/* ============================================================
   WEST SLIDER – Frontend Styles
   ============================================================ */

.west-slider {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.west-slider--fullwidth { max-width: 100% !important; }

/* Viewport — aspect ratio maintained via padding-bottom */
.west-slider__viewport {
    position: relative;
    width: 100%;
    height: 0;
    overflow: hidden;
}

/* Slides */
.west-slider__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition-property: opacity, transform;
    transition-timing-function: ease;
    z-index: 1;
}
.west-slider__slide--active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

/* Transition: Fade */
.west-slider[data-transition="fade"] .west-slider__slide {
    transform: none;
}

/* Transition: Slide */
.west-slider[data-transition="slide"] .west-slider__slide {
    transform: translateX(60px);
}
.west-slider[data-transition="slide"] .west-slider__slide--active {
    transform: translateX(0);
}
.west-slider[data-transition="slide"] .west-slider__slide--exit-left {
    transform: translateX(-60px);
}

/* Transition: Slide Up */
.west-slider[data-transition="slideUp"] .west-slider__slide {
    transform: translateY(40px);
}
.west-slider[data-transition="slideUp"] .west-slider__slide--active {
    transform: translateY(0);
}

/* Transition: Zoom */
.west-slider[data-transition="zoom"] .west-slider__slide {
    transform: scale(1.1);
}
.west-slider[data-transition="zoom"] .west-slider__slide--active {
    transform: scale(1);
}

/* Transition: Flip */
.west-slider[data-transition="flip"] {
    perspective: 1200px;
}
.west-slider[data-transition="flip"] .west-slider__slide {
    transform: rotateY(90deg);
    backface-visibility: hidden;
}
.west-slider[data-transition="flip"] .west-slider__slide--active {
    transform: rotateY(0);
}

/* Layers */
.west-slider__layer {
    position: absolute;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.west-slider__slide--active .west-slider__layer.ws-animated {
    opacity: 1;
    transform: none !important;
}

/* Layer animations — initial states */
.west-slider__layer[data-animation="fadeIn"] { opacity: 0; }
.west-slider__layer[data-animation="slideLeft"] { transform: translateX(-60px); }
.west-slider__layer[data-animation="slideRight"] { transform: translateX(60px); }
.west-slider__layer[data-animation="slideUp"] { transform: translateY(40px); }
.west-slider__layer[data-animation="slideDown"] { transform: translateY(-40px); }
.west-slider__layer[data-animation="zoomIn"] { transform: scale(0.7); }
.west-slider__layer[data-animation="bounceIn"] { transform: scale(0.5); }

/* Buttons */
.west-slider__btn {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.2s;
    box-sizing: border-box;
}
.west-slider__btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}

/* Navigation arrows */
.west-slider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, opacity 0.2s;
    opacity: 0;
    padding: 0;
}
.west-slider:hover .west-slider__arrow { opacity: 1; }
.west-slider__arrow:hover { background: rgba(0, 0, 0, 0.7); }
.west-slider__arrow--prev { left: 16px; }
.west-slider__arrow--next { right: 16px; }

/* Pagination dots */
.west-slider__dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    display: flex;
    gap: 8px;
}
.west-slider__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
}
.west-slider__dot:hover { background: rgba(255, 255, 255, 0.8); }
.west-slider__dot--active {
    background: #fff;
    transform: scale(1.2);
}

/* Responsive UI elements (arrows, dots) — always applied.
   Layer-level responsive overrides are rendered inline by the PHP renderer
   based on per-layer breakpoint settings configured in the editor. */
@media (max-width: 768px) {
    .west-slider__arrow { width: 36px; height: 36px; }
    .west-slider__arrow--prev { left: 8px; }
    .west-slider__arrow--next { right: 8px; }
}
@media (max-width: 480px) {
    .west-slider__dots { bottom: 8px; gap: 6px; }
    .west-slider__dot { width: 8px; height: 8px; }
}

/* Stage wrapper re-enables pointer events on clickable children */
.west-slider__stage { pointer-events: none; }
.west-slider__stage .west-slider__layer { pointer-events: auto; }
.west-slider__stage a { pointer-events: auto; }

/* Disable layer animations override */
.west-slider--no-layer-anim .west-slider__layer {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}