/* ── Summerland Slider — Frontend CSS ── */

/* ── Container ── */
.ss-slider-container {
    position: relative !important;
    width: 100% !important;
    display: block !important;
    overflow: hidden !important;
    border-radius: 20px !important;
    background: blue !important; /* DEBUG: If you see blue, slides are missing */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    
    /* Force a fixed height for debug */
    height: 400px !important;
    margin-bottom: 30px !important;
}

/* Fallback for older browsers */
@supports not (aspect-ratio: 16/6) {
    .ss-slider-container {
        height: 0 !important;
        padding-bottom: 37.5% !important;
    }
}

@media (max-width: 1024px) {
    .ss-slider-container { aspect-ratio: 16 / 8; }
    @supports not (aspect-ratio: 16/8) { .ss-slider-container { padding-bottom: 50% !important; } }
}

@media (max-width: 767px) {
    .ss-slider-container { 
        aspect-ratio: 16 / 10;
        border-radius: 12px !important;
    }
    @supports not (aspect-ratio: 16/10) { .ss-slider-container { padding-bottom: 62.5% !important; } }
}

/* Wrapper: fills the container absolutely */
.ss-slider-wrapper {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: visible !important; /* MUST be visible so slides aren't black */
    transition: transform 500ms cubic-bezier(0.4, 0, 0.2, 1) !important;
    will-change: transform;
    margin: 0 !important;
    padding: 0 !important;
}

/* Each slide */
.ss-slide {
    position: relative !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    height: 100% !important;
    overflow: visible !important;
    z-index: 1 !important;
    background: red !important; /* DEBUG: if you see red, slides are there but images are failing */
}

.ss-slide-image {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    pointer-events: none !important;
    border: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ── Arrows ── */
.ss-arrows {
    position: absolute !important;
    inset: 0 !important;
    z-index: 50 !important;
    pointer-events: none !important;
}

.ss-arrow {
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #fff !important;
    opacity: 0.75 !important;
    /* Kill the 300ms delay */
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    -webkit-user-select: none !important;
    user-select: none !important;
    outline: none !important;
}

.ss-prev { left: 10px !important; }
.ss-next { right: 10px !important; }

.ss-arrow:hover { opacity: 1 !important; }

.ss-arrow svg {
    width: 26px !important;
    height: 26px !important;
    display: block !important;
    fill: none !important;
    stroke: #fff !important;
    stroke-width: 2 !important;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,0.35)) !important;
    pointer-events: none !important;
}

/* ── Dots ── */
.ss-dots {
    position: absolute !important;
    bottom: 18px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    z-index: 60 !important;
    pointer-events: none !important;
}

.ss-dot {
    display: block !important;
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #fff !important;
    opacity: 0.4 !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    transition: opacity 0.3s ease, width 0.3s ease, border-radius 0.3s ease !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
}

.ss-dot.ss-active {
    opacity: 1 !important;
}

/* Prevent image drag on desktop */
.ss-slider-container img {
    -webkit-user-drag: none;
    user-select: none;
    -moz-user-select: none;
}