/* ==========================================================
   MILX PREMIUM
   slider.css
========================================================== */

/* ===============================
   SLIDER SECTION
================================= */

.xs-slider-section {
    position: relative;
    overflow: hidden;
}

/* ===============================
   TRACK WRAPPER
================================= */

.xs-slider-track-wrap {
    overflow: hidden;
    width: 100%;
}

/* ===============================
   TRACK
================================= */

.xs-slider-track {
    display: flex;
    transition: transform .55s cubic-bezier(.4,0,.2,1);
    will-change: transform;
}

/* ===============================
   SLIDE
================================= */

.xs-slide {
    flex: 0 0 33.333%;
    max-width: 33.333%;
    padding: .75rem;
    transition: .35s;
}

    .xs-slide:hover {
        transform: translateY(-5px);
    }

/* ===============================
   RESPONSIVE
================================= */

@media(max-width:991px) {

    .xs-slide {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media(max-width:768px) {

    .xs-slide {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ===============================
   CONTROLS
================================= */

.xs-slider-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2rem;
}

/* ===============================
   BUTTONS
================================= */

.xs-slider-btn {
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background: var(--gold-gradient);
    color: #111;
    font-size: 1rem;
    transition: all .3s ease;
    box-shadow: var(--shadow-gold);
}

    .xs-slider-btn:hover {
        transform: scale(1.08);
    }

    .xs-slider-btn:active {
        transform: scale(.95);
    }

    .xs-slider-btn:disabled {
        opacity: .25;
        cursor: not-allowed;
        transform: none;
    }

/* ===============================
   PROGRESS BAR
================================= */

.xs-slider-progress-wrap {
    flex: 1;
    height: 4px;
    border-radius: 999px;
    background: #2A2A2A;
    overflow: hidden;
}

.xs-slider-progress-fill {
    width: 0;
    height: 100%;
    border-radius: 999px;
    background: var(--gold-gradient-horizontal);
    transition: width .45s ease;
}

/* ===============================
   CARD ANIMATION
================================= */

.xs-slide .xs-card {
    animation: sliderFade .5s ease;
}

@keyframes sliderFade {

    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ===============================
   NAVIGATION ICONS
================================= */

.xs-slider-btn i {
    pointer-events: none;
}

/* ===============================
   RTL
================================= */

html[dir="rtl"] .xs-slider-track {
    direction: rtl;
}

/* ===============================
   SCROLL SNAP (Touch Devices)
================================= */

@media(max-width:768px) {

    .xs-slider-track {
        scroll-snap-type: x mandatory;
        overflow-x: auto;
        scrollbar-width: none;
    }

        .xs-slider-track::-webkit-scrollbar {
            display: none;
        }

    .xs-slide {
        scroll-snap-align: start;
    }
}

/* ===============================
   LOADING PLACEHOLDER
================================= */

.xs-slide.loading {
    pointer-events: none;
}

    .xs-slide.loading .xs-card {
        background: #181818;
        animation: pulse 1.5s infinite;
    }

@keyframes pulse {

    0% {
        opacity: .55;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: .55;
    }
}

/* ===============================
   AUTO PLAY INDICATOR
================================= */

.xs-slider-autoplay {
    position: absolute;
    top: 15px;
    inset-inline-end: 15px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 15px rgba(212,175,55,.6);
}

/* ===============================
   FADE EDGES
================================= */

.xs-slider-section::before,
.xs-slider-section::after {
    content: "";
    position: absolute;
    top: 0;
    width: 80px;
    height: 100%;
    z-index: 5;
    pointer-events: none;
}

.xs-slider-section::before {
    left: 0;
    background: linear-gradient(to right,#0B0B0B,transparent);
}

.xs-slider-section::after {
    right: 0;
    background: linear-gradient(to left,#0B0B0B,transparent);
}

.xs-slider-controls {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
}

.xs-slider-progress-wrap {
    flex: 1;
    height: 4px;
    background: #2d2d2d;
    border-radius: 999px;
    overflow: hidden;
}

.xs-slider-progress-fill {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg,#8d6b1f,#d4af37,#f7e08a);
    transition: .4s;
}
/* RTL */

html[dir="rtl"] .xs-slider-section::before {
    left: auto;
    right: 0;
    background: linear-gradient(to left,#0B0B0B,transparent);
}

html[dir="rtl"] .xs-slider-section::after {
    right: auto;
    left: 0;
    background: linear-gradient(to right,#0B0B0B,transparent);
}

.xs-slider-track {
    display: flex;
    gap: 24px;
    transition: transform .5s ease;
    will-change: transform;
}

.xs-slide {
    flex: 0 0 calc((100% - 48px)/3);
}

@media(max-width:991px) {

    .xs-slide {
        flex: 0 0 calc((100% - 24px)/2);
    }
}

@media(max-width:767px) {

    .xs-slide {
        flex: 0 0 100%;
    }
    .xs-slider-track-wrap {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
        .xs-slider-track-wrap::-webkit-scrollbar {
            display: none;
        }

    .xs-slider-track {
        transform: none !important;
        display: flex;
        gap: 16px;
    }

    .xs-slide {
        flex: 0 0 88%;
    }

}