/* overrideinfo-slider-public.css */
.overrideinfo-slider-wrapper {
    position: relative;
    /* Breakout to full screen width (up to 1920px) even if inside a container */
    width: 100vw !important;
    max-width: 1920px !important;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
}

.overrideinfo-slider-container {
    position: relative;
    /* width and height are set via inline style from PHP (design dimensions) */
    /* JS applies scale() transform to fit the viewport proportionally */
    overflow: hidden;
    background: #f0f0f0;
    transform-origin: top left;
}

/*
  FULL-WIDTH OVERRIDE
  PHP outputs: #overrideinfo-slider-{id} .overrideinfo-slider-container { width: Npx !important }
  That selector has specificity (1,1,0). A plain class rule like
  `.overrideinfo-slider-container { width: 100% !important }` is only (0,1,0)
  and LOSES — so the PHP's fixed pixel width always wins.

  Fix: add `.overrideinfo-slider-wrapper` (0,1,0) + `.overrideinfo-slider-container` (0,1,0)
  + `:not(#ovrinfo-w)` whose argument is a non-existent ID giving (1,0,0) per spec.
  Total = (1,2,0) which is higher than PHP's (1,1,0) — our rule wins on every breakpoint.
  HEIGHT values set by PHP are intentionally left untouched.
*/
.overrideinfo-slider-wrapper .overrideinfo-slider-container:not(#ovrinfo-w) {
    width: 100% !important;
    max-width: 100% !important;
}

.ovrinfo-slider-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
    width: 100%;
    height: 100%;
}

.ovrinfo-slider-slide {
    flex-shrink: 0 !important;
    width: 100% !important;
    /* Height set via inline style (matches design canvas height exactly) */
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
}

/* Base element styles */
.ovrinfo-slider-el {
    position: relative;
    z-index: 10;
    box-sizing: border-box;
    color: inherit;
    visibility: visible;
    opacity: 1;
}

/* Group layer: acts as a positioned container for child layers */
.ovrinfo-slider-el-group {
    overflow: visible !important;
}

.ovrinfo-slider-group-inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Child layers inside a group are absolutely positioned relative to the group */
.ovrinfo-slider-group-inner > .ovrinfo-slider-el {
    position: absolute;
}

/* Text and heading layers must stay content-sized — no full-width stretching */
.ovrinfo-slider-el-text,
.ovrinfo-slider-el-heading,
.ovrinfo-slider-el-title {
    max-width: max-content;
}

.ovrinfo-slider-content-wrapper {
    /* MUST be absolute covering the full slide so layer positions
       reference the same origin as the editor canvas (top-left of slide) */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    display: block;
    overflow: visible;
    z-index: 10;
}

.ovrinfo-slider-btn {
    display: inline-block;
    padding: 12px 24px;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-align: center;
}


/* Navigation Arrows */
.ovrinfo-slider-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.ovrinfo-slider-nav:hover {
    background: rgba(0, 0, 0, 0.8);
}

.ovrinfo-slider-prev {
    left: 20px;
}

.ovrinfo-slider-next {
    right: 20px;
}

/* Dots */
.ovrinfo-slider-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 20;
}

.ovrinfo-slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    transition: all 0.3s;
}

.ovrinfo-slider-dot-active,
.ovrinfo-slider-dot:hover {
    background: #fff;
    transform: scale(1.2);
}

/* Image overlay */
.ovrinfo-slide-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

/* Animations */
.ovrinfo-anim-hidden {
    opacity: 0;
    visibility: hidden;
}

.ovrinfo-anim-visible {
    opacity: 1;
    visibility: visible;
}

/* Editor Keyframes */
@keyframes ovrFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes ovrFadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes ovrMoveUp {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.98);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes ovrMoveDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ovrMoveLeft {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes ovrMoveRight {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes ovrPopIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes ovrPopUp {
    from {
        opacity: 0;
        transform: scale(0.5);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes ovrPopOut {
    from {
        opacity: 1;
        transform: scale(1);
    }

    to {
        opacity: 0;
        transform: scale(0.5);
    }
}

/* Fade */
@keyframes ovrinfoFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.ovrinfo-anim-fade {
    animation: ovrinfoFadeIn forwards;
}

/* Slide Up */
@keyframes ovrinfoSlideUp {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ovrinfo-anim-slide-up {
    animation: ovrinfoSlideUp forwards;
}

/* Slide Down */
@keyframes ovrinfoSlideDown {
    from {
        opacity: 0;
        transform: translateY(-50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ovrinfo-anim-slide-down {
    animation: ovrinfoSlideDown forwards;
}

/* Zoom In */
@keyframes ovrinfoZoomIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.ovrinfo-anim-zoom-in {
    animation: ovrinfoZoomIn forwards;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ovrinfo-slider-content-wrapper {
        width: 100%;
    }

    /* min-height intentionally removed:
       PHP defines height per breakpoint with !important — a static
       min-height: 300px here overrides those values and breaks mobile layout. */

    .ovrinfo-slider-nav {
        width: 30px;
        height: 30px;
        font-size: 18px;
    }
}