/* ═══════════════════════════════════════════════════════════════════════════
   Flipster Carousel — Public Styles
   ───────────────────────────────────────────────────────────────────────────
   The carousel wrapper has NO background colour/image — it is fully
   transparent so the Elementor section (or any parent element) background
   shows through.

   All configurable values are injected as CSS custom properties on the
   .flipster-carousel-wrap element by the PHP shortcode renderer.
═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   1. WRAPPER
══════════════════════════════════════════════════════════════════════════ */
.flipster-carousel-wrap {
    padding-top:    var(--fc-pt,  60px);
    padding-bottom: var(--fc-pb,  60px);
    margin-top:     var(--fc-mt,   0px);
    margin-bottom:  var(--fc-mb,   0px);
    position:  relative;
    overflow:  visible;   /* side cards extend beyond wrapper — do not clip */
    box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════════════════
   2. SECTION TITLE
══════════════════════════════════════════════════════════════════════════ */
.flipster-section-title-wrap {
    text-align:    center;
    margin-bottom: 40px;
}

.flipster-section-title {
    display:        inline-block;
    border:         1.5px solid var(--fc-title-border, #ffffff);
    color:          var(--fc-title-color,  #ffffff);
    padding:        8px 30px;
    border-radius:  40px;
    font-size:      11.5px;
    font-weight:    700;
    letter-spacing: 2.8px;
    text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════════════════
   3. CAROUSEL STAGE
══════════════════════════════════════════════════════════════════════════ */
.flipster-stage {
    position:           relative;
    height:             var(--fc-card-height, 420px);
    perspective:        1200px;
    perspective-origin: 50% 50%;
    overflow:           visible;
}

/* ── Slide list ───────────────────────────────────────────────────────────── */
.flipster-slide-list {
    list-style:      none;
    margin:          0;
    padding:         0;
    position:        relative;
    width:           100%;
    height:          100%;
    transform-style: preserve-3d;
}

/* ══════════════════════════════════════════════════════════════════════════
   4. SLIDE CARD BASE STYLES
══════════════════════════════════════════════════════════════════════════ */
.flipster-slide {
    position:            absolute;
    top:                 0;
    left:                50%;
    width:               var(--fc-card-width,  280px);
    height:              var(--fc-card-height, 420px);
    /* Centre the card on the stage axis */
    margin-left:         calc(var(--fc-card-width, 280px) / -2);
    background-size:     cover;
    background-position: center center;
    background-repeat:   no-repeat;
    background-color:    #1c1c1c;    /* fallback if no image set */
    border-radius:       var(--fc-radius, 16px);
    overflow:            hidden;
    cursor:              pointer;
    user-select:         none;
    -webkit-user-select: none;
    will-change:         transform, opacity;
    /* Smooth all position transitions */
    transition:
        transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity   0.45s ease;
    transform-origin: center center;
    box-shadow: 0 6px 28px rgba(0, 0, 0, 0.45);
}

/* ══════════════════════════════════════════════════════════════════════════
   5. POSITION CLASSES (set by JS on every navigation)
   ─────────────────────────────────────────────────────────────────────────
   The fan effect mirrors the reference image:
    · Center card  — full size, front
    · ±1           — rotated ~46°, scaled 0.84, shifted 62%
    · ±2           — rotated ~62°, scaled 0.70, shifted 95%
    · ±3           — rotated ~72°, scaled 0.58, shifted 118%
    · ±4+          — fully hidden (opacity 0, pointer-events none)
══════════════════════════════════════════════════════════════════════════ */

/* ── Active (center) ──────────────────────────────────────────────────────── */
.flipster-slide.flipster-active {
    transform:  translateX(0) translateZ(0) rotateY(0deg) scale(1);
    opacity:    1;
    z-index:    10;
    cursor:     default;
    box-shadow: 0 16px 52px rgba(0, 0, 0, 0.70);
}

/* ── 1 card away ──────────────────────────────────────────────────────────── */
.flipster-slide.flipster-prev-1 {
    transform: translateX(-62%) translateZ(-130px) rotateY(46deg) scale(0.84);
    opacity:   0.92;
    z-index:   9;
}
.flipster-slide.flipster-next-1 {
    transform: translateX(62%) translateZ(-130px) rotateY(-46deg) scale(0.84);
    opacity:   0.92;
    z-index:   9;
}

/* ── 2 cards away ─────────────────────────────────────────────────────────── */
.flipster-slide.flipster-prev-2 {
    transform: translateX(-95%) translateZ(-290px) rotateY(62deg) scale(0.70);
    opacity:   0.78;
    z-index:   8;
}
.flipster-slide.flipster-next-2 {
    transform: translateX(95%) translateZ(-290px) rotateY(-62deg) scale(0.70);
    opacity:   0.78;
    z-index:   8;
}

/* ── 3 cards away ─────────────────────────────────────────────────────────── */
.flipster-slide.flipster-prev-3 {
    transform: translateX(-118%) translateZ(-400px) rotateY(72deg) scale(0.58);
    opacity:   0.60;
    z-index:   7;
}
.flipster-slide.flipster-next-3 {
    transform: translateX(118%) translateZ(-400px) rotateY(-72deg) scale(0.58);
    opacity:   0.60;
    z-index:   7;
}

/* ── 4+ cards away (hidden) ───────────────────────────────────────────────── */
.flipster-slide.flipster-hidden-left {
    transform:      translateX(-136%) translateZ(-460px) rotateY(80deg) scale(0.46);
    opacity:        0;
    z-index:        6;
    pointer-events: none;
}
.flipster-slide.flipster-hidden-right {
    transform:      translateX(136%) translateZ(-460px) rotateY(-80deg) scale(0.46);
    opacity:        0;
    z-index:        6;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   6. GRADIENT OVERLAY (ensures text readability over any image)
══════════════════════════════════════════════════════════════════════════ */
.flipster-overlay {
    position:      absolute;
    inset:         0;
    background:    linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.04)  0%,
        rgba(0, 0, 0, 0.08) 35%,
        rgba(0, 0, 0, 0.62) 68%,
        rgba(0, 0, 0, 0.88) 100%
    );
    border-radius: inherit;
    z-index:       1;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   7. NUMBER BADGE (#01 / #02 / …)
══════════════════════════════════════════════════════════════════════════ */
.flipster-badge {
    position:      absolute;
    top:           14px;
    left:          14px;
    z-index:       3;
    background:    var(--fc-badge-bg,    #cc0000);
    color:         var(--fc-badge-color, #ffffff);
    font-size:     13px;
    font-weight:   700;
    letter-spacing: 0.4px;
    padding:       5px 11px;
    border-radius: 5px;
    line-height:   1;
    pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   8. CARD CONTENT AREA (bottom section)
══════════════════════════════════════════════════════════════════════════ */
.flipster-slide-content {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    z-index:    2;
    padding:    16px 16px 20px;
    display:    flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:        5px;
}

/* Title */
.flipster-slide-title {
    margin:      0;
    color:       #ffffff;
    font-size:   15px;
    font-weight: 700;
    line-height: 1.35;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55);
}

/* Sub text */
.flipster-sub-text {
    margin:      0;
    color:       rgba(255, 255, 255, 0.82);
    font-size:   12px;
    line-height: 1.55;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    display:     -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:    hidden;
}

/* ══════════════════════════════════════════════════════════════════════════
   9. CTA BUTTON — visible only on the active card
══════════════════════════════════════════════════════════════════════════ */
.flipster-cta-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    background:      rgba(255, 255, 255, 0.94);
    color:           #111111;
    font-size:       13px;
    font-weight:     700;
    text-decoration: none;
    padding:         10px 18px;
    border-radius:   8px;
    margin-top:      6px;
    white-space:     nowrap;
    /* Hidden + offset for non-active slides */
    opacity:         0;
    pointer-events:  none;
    transform:       translateY(6px);
    transition:
        opacity   0.30s ease,
        transform 0.30s ease,
        background 0.18s ease;
}

/* Reveal on the active card (with a slight delay for elegance) */
.flipster-slide.flipster-active .flipster-cta-btn {
    opacity:        1;
    pointer-events: auto;
    transform:      translateY(0);
    transition:
        opacity   0.32s ease 0.12s,
        transform 0.32s ease 0.10s,
        background 0.18s ease;
}

.flipster-cta-btn:hover {
    background: #ffffff;
    transform:  translateY(-2px);
}

.flipster-icon {
    flex-shrink:    0;
    vertical-align: middle;
    display:        inline-block;
}

/* ══════════════════════════════════════════════════════════════════════════
   10. NAV ARROWS
══════════════════════════════════════════════════════════════════════════ */
.flipster-nav-btn {
    position:        absolute;
    top:             50%;
    transform:       translateY(-50%);
    z-index:         20;
    background:      rgba(255, 255, 255, 0.14);
    border:          1px solid rgba(255, 255, 255, 0.28);
    color:           #ffffff;
    border-radius:   50%;
    width:           44px;
    height:          44px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    outline:         none;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter:         blur(6px);
    transition:      background 0.2s ease, transform 0.2s ease;
}

.flipster-nav-btn:hover {
    background: rgba(255, 255, 255, 0.28);
    transform:  translateY(-50%) scale(1.08);
}

.flipster-nav-btn:focus-visible {
    outline: 2px solid rgba(255,255,255,0.7);
    outline-offset: 2px;
}

.flipster-nav-prev { left:  12px; }
.flipster-nav-next { right: 12px; }

/* ══════════════════════════════════════════════════════════════════════════
   11. ARC DECORATION
══════════════════════════════════════════════════════════════════════════ */
.flipster-arc-wrap {
    margin-top: 24px;
    padding:    0 30px;
    height:     64px;
    position:   relative;
    line-height: 0;
}

.flipster-arc-svg {
    width:    100%;
    height:   100%;
    overflow: visible;
}

/* ══════════════════════════════════════════════════════════════════════════
   12. ADMIN-ONLY: no-slides notice
══════════════════════════════════════════════════════════════════════════ */
.flipster-no-slides-notice {
    padding:    12px 16px;
    background: #fff3cd;
    border:     1px solid #ffc107;
    border-radius: 4px;
    color:      #856404;
    font-size:  14px;
}
.flipster-no-slides-notice a { color: #856404; }

/* ══════════════════════════════════════════════════════════════════════════
   13. RESPONSIVE
══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* Scale down card dimensions on tablets/phones */
    .flipster-stage {
        height: calc(var(--fc-card-height, 420px) * 0.74);
    }

    .flipster-slide {
        width:       calc(var(--fc-card-width,  280px) * 0.74);
        height:      calc(var(--fc-card-height, 420px) * 0.74);
        margin-left: calc(var(--fc-card-width,  280px) * 0.74 / -2);
    }

    /* Tighten fan geometry for smaller screens */
    .flipster-slide.flipster-prev-1 {
        transform: translateX(-56%) translateZ(-80px) rotateY(42deg) scale(0.82);
    }
    .flipster-slide.flipster-next-1 {
        transform: translateX(56%) translateZ(-80px) rotateY(-42deg) scale(0.82);
    }
    .flipster-slide.flipster-prev-2 {
        transform: translateX(-88%) translateZ(-180px) rotateY(58deg) scale(0.64);
    }
    .flipster-slide.flipster-next-2 {
        transform: translateX(88%) translateZ(-180px) rotateY(-58deg) scale(0.64);
    }
    .flipster-slide.flipster-prev-3,
    .flipster-slide.flipster-hidden-left {
        transform: translateX(-108%) translateZ(-260px) rotateY(72deg) scale(0.50);
        opacity:   0.35;
    }
    .flipster-slide.flipster-next-3,
    .flipster-slide.flipster-hidden-right {
        transform: translateX(108%) translateZ(-260px) rotateY(-72deg) scale(0.50);
        opacity:   0.35;
    }

    .flipster-slide-title { font-size: 13px; }
    .flipster-badge       { font-size: 11px; padding: 4px 8px; }

    .flipster-nav-prev { left:  4px; }
    .flipster-nav-next { right: 4px; }
    .flipster-nav-btn  { width: 36px; height: 36px; }
}

@media (max-width: 480px) {

    .flipster-stage {
        height: calc(var(--fc-card-height, 420px) * 0.62);
    }

    .flipster-slide {
        width:       calc(var(--fc-card-width,  280px) * 0.62);
        height:      calc(var(--fc-card-height, 420px) * 0.62);
        margin-left: calc(var(--fc-card-width,  280px) * 0.62 / -2);
    }

    .flipster-slide.flipster-prev-2,
    .flipster-slide.flipster-prev-3,
    .flipster-slide.flipster-hidden-left {
        opacity: 0.25;
    }
    .flipster-slide.flipster-next-2,
    .flipster-slide.flipster-next-3,
    .flipster-slide.flipster-hidden-right {
        opacity: 0.25;
    }

    .flipster-arc-wrap { margin-top: 14px; height: 44px; }
}



/* ══════════════════════════════════════════════════════════════════════════
   14. YOUTUBE VIDEO POPUP MODAL
══════════════════════════════════════════════════════════════════════════ */

/* Backdrop — hidden by default */
#flipster-yt-modal {
    display:          none;
    position:         fixed;
    inset:            0;
    z-index:          99999;
    background:       rgba(0, 0, 0, 0.82);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter:         blur(6px);
    align-items:      center;
    justify-content:  center;
    padding:          20px;
    box-sizing:       border-box;
    animation:        flipster-fade-in 0.22s ease;
}

/* Visible state (toggled by JS) */
#flipster-yt-modal.flipster-yt-open {
    display: flex;
}

/* Inner dialog box */
.flipster-yt-box {
    position:      relative;
    width:         100%;
    max-width:     900px;
    background:    #000;
    border-radius: 10px;
    overflow:      hidden;
    box-shadow:    0 24px 80px rgba(0, 0, 0, 0.85);
    animation:     flipster-slide-up 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 16:9 responsive iframe container */
.flipster-yt-ratio {
    position:        relative;
    width:           100%;
    padding-bottom:  56.25%; /* 16:9 */
    height:          0;
    overflow:        hidden;
}
.flipster-yt-ratio iframe {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    border:   none;
}

/* Close (×) button */
.flipster-yt-close {
    position:        absolute;
    top:             -14px;
    right:           -14px;
    z-index:         10;
    width:           36px;
    height:          36px;
    border-radius:   50%;
    border:          none;
    background:      #ffffff;
    color:           #111111;
    font-size:       22px;
    line-height:     1;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    box-shadow:      0 2px 12px rgba(0, 0, 0, 0.45);
    transition:      background 0.15s ease, transform 0.15s ease;
}
.flipster-yt-close:hover {
    background:  #f0f0f0;
    transform:   scale(1.1);
}
.flipster-yt-close:focus-visible {
    outline:        2px solid #ffffff;
    outline-offset: 2px;
}

/* Animations */
@keyframes flipster-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes flipster-slide-up {
    from { transform: translateY(28px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* Responsive: full-screen on very small screens */
@media (max-width: 480px) {
    #flipster-yt-modal {
        padding: 0;
        align-items: flex-end;
    }
    .flipster-yt-box {
        border-radius: 12px 12px 0 0;
        max-width: 100%;
    }
    .flipster-yt-close {
        top:   8px;
        right: 8px;
    }
}