/**
 * Home Slider System - Custom CSS Overrides
 * Loads after Prime Slider CSS to override default styles
 */

/* CRITICAL: Ensure all thumb slides are visible from the start */
/* This prevents the "missing third slide" flash on load */

.bdt-storker-thumbs .swiper-slide {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Hide thumbs container when only 1 slide (set via JS) */
.bdt-storker-thumbs.is-hidden {
    display: none !important;
}

/* Reset base styles - DO NOT set transition here (Prime Slider handles slide animations) */
.bdt-storker-thumbs .bdt-item:not(.swiper-slide-active),
.bdt-storker-thumbs .bdt-item.swiper-slide-active {
    background-color: transparent !important;
    border-color: transparent !important;
    border-width: 0 !important;
    border-style: solid !important;
}

/**
 * Fix for colors reverting during transitions
 *
 * CRITICAL: Prime Slider has:
 * 1. A ::before pseudo-element with background-color: #000 (black) that expands on active
 * 2. transition-delay values (0.8s - 1.6s) on active states
 *
 * Using smooth cubic-bezier easing and staggered timing for natural feel.
 */

/* === INACTIVE STATE - Smooth transitions === */
.bdt-storker-thumbs .bdt-item:not(.swiper-slide-active) .bdt-title a {
    color: var(--thumbs-inactive-title-color, #ffffff) !important;
    transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.bdt-storker-thumbs .bdt-item:not(.swiper-slide-active) .bdt-storker-arrow a {
    background: var(--thumbs-inactive-arrow-bg, #000000) !important;
    color: var(--thumbs-inactive-arrow-color, #EDF2F4) !important;
    transition: background 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                color 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
                padding 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* === ACTIVE STATE - Smooth transitions with slight stagger === */
.bdt-storker-thumbs .bdt-item.swiper-slide-active .bdt-title a {
    color: var(--thumbs-active-title-color, #fe506c) !important;
    transition: color 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.bdt-storker-thumbs .bdt-item.swiper-slide-active .bdt-storker-arrow a {
    background: var(--thumbs-active-arrow-bg, #fe506c) !important;
    color: var(--thumbs-active-arrow-color, #EDF2F4) !important;
    transition: background 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                color 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                padding 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* CRITICAL FIX: Override the ::before black overlay background */
/* Prime Slider uses ::before as a black animated overlay - we make it use custom color */
.bdt-storker-thumbs .bdt-item::before {
    background-color: transparent !important;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), 
                background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.bdt-storker-thumbs .bdt-item.swiper-slide-active::before {
    background-color: var(--thumbs-active-arrow-bg, #fe506c) !important;
}

/* Load bar color - smooth animation */
.bdt-storker-thumbs .bdt-item.swiper-slide-active::after {
    background: var(--thumbs-active-loadbar-color, #fe506c) !important;
    height: var(--thumbs-active-loadbar-height, 2px) !important;
}

/* Hover state - use inactive colors, smooth fade */
.bdt-storker-thumbs .bdt-item:hover .bdt-title a {
    color: var(--thumbs-inactive-title-color, #ffffff) !important;
    transition: color 0.3s ease-out !important;
}

.bdt-storker-thumbs .bdt-item:hover .bdt-storker-arrow a {
    background: var(--thumbs-inactive-arrow-bg, #000000) !important;
    color: var(--thumbs-inactive-arrow-color, #EDF2F4) !important;
    transition: background 0.3s ease-out, color 0.3s ease-out !important;
}

/* Disable the hover ::before overlay expansion (prevents reddish flash) */
.bdt-storker-thumbs .bdt-item:hover::before {
    width: 0 !important;
    background-color: transparent !important;
}