/* ================================================================
   FEF CAROUSEL EFFECTS — Coverflow / 3D Coverflow / Center-mode /
   Overlapping / Focus Center / Stacked Cards / Peeking / Multi-item
   Center. Structural CSS only — per-slide transforms are computed and
   applied inline by fef-carousel-effects.js so every admin-configurable
   number (scale, overlap, opacity, speed…) can drive them directly.
   ================================================================ */
.fef-ce-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
}
.fef-ce-track {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--fef-ce-height, 360px);
    perspective: 1200px;
    -webkit-user-select: none;
    user-select: none;
}
.fef-ce-slide {
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--fef-ce-slide-w, 60%);
    max-width: 560px;
    height: calc(100% - 10px);
    margin-left: calc(var(--fef-ce-slide-w, 60%) / -2);
    margin-top: calc((100% - 10px) / -2);
    border-radius: 10px;
    overflow: hidden;
    background: #0f172a;
    box-shadow: 0 20px 45px rgba(15, 23, 42, .28);
    will-change: transform, opacity, filter;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.fef-ce-slide.fef-ce-hidden { visibility: hidden; }
.fef-ce-slide img, .fef-ce-slide picture, .fef-ce-slide picture img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fef-ce-slide.fef-ce-active { box-shadow: 0 28px 60px rgba(15, 23, 42, .38); }

/* Effect skins — mostly presentational touches beyond the shared transform pipeline. */
.fef-ce-wrap[data-effect="coverflow_3d"] .fef-ce-track,
.fef-ce-wrap[data-effect="coverflow"] .fef-ce-track { perspective: 1500px; }
.fef-ce-wrap[data-effect="stacked_cards"] .fef-ce-slide { box-shadow: 0 12px 30px rgba(15, 23, 42, .3); }
.fef-ce-wrap[data-effect="focus_center"] .fef-ce-slide:not(.fef-ce-active) { filter: saturate(.7); }

/* ── Text overlay (optional, per-slide title/desc already carried on the slide) ── */
.fef-ce-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 16px 18px;
    background: linear-gradient(to top, rgba(0, 0, 0, .72), transparent);
    color: #fff;
    opacity: 0;
    transition: opacity .25s ease;
    pointer-events: none;
}
.fef-ce-slide.fef-ce-active .fef-ce-caption { opacity: 1; }
.fef-ce-caption-title { font-size: 16px; font-weight: 700; margin: 0 0 4px; }
.fef-ce-caption-desc { font-size: 13px; opacity: .9; margin: 0; }

/* ── Arrows ── */
.fef-ce-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 200;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, .9);
    color: #1e293b;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .18);
    transition: background .2s ease, transform .2s ease;
}
.fef-ce-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.06); }
.fef-ce-prev { left: 12px; }
.fef-ce-next { right: 12px; }

/* ── Dots ── */
.fef-ce-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
}
.fef-ce-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(15, 23, 42, .25);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: transform .2s ease, background .2s ease;
}
.fef-ce-dot-active { background: #1e293b; transform: scale(1.3); }

@media (max-width: 767px) {
    .fef-ce-slide { width: var(--fef-ce-slide-w-mobile, 78%); margin-left: calc(var(--fef-ce-slide-w-mobile, 78%) / -2); }
    .fef-ce-arrow { width: 34px; height: 34px; font-size: 14px; }
}