/* SLIDER CONTROL BUTTON CSS START  */


/* button css start  */
.left_btn,
.right_btn {
    position: absolute;
    top: 50%;
    z-index: 9;
    transform: translateY(-50%);
    transition: .3s linear;
    box-shadow: var(--BoxShadow);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    overflow: hidden;
    /* backdrop-filter: blur(10px); */
    opacity: 0;
    visibility: hidden;
    transition: .3s linear;
    background: var(--ColorLightPrimary);
}

.slider:hover .left_btn,
.slider:hover .right_btn {
    opacity: 1;
    visibility: visible;
}

.left_btn:hover,
.right_btn:hover {
    background: var(--ColorPrimary);
}

.left_btn i,
.right_btn i {
    color: var(--ColorPrimary);
}

.left_btn:hover i,
.right_btn:hover i {
    color: var(--ColorLightPrimary);
}

.left_btn {
    left: 2%;
}

.right_btn {
    right: 2%;
}

.slider[data-arrows="false"] .left_btn,
.slider[data-arrows="false"] .right_btn {
    display: none !important;
}

.slider[data-dots="false"] .slick-dots,
.slider .slick-dots.hidden {
    display: none !important;
}

/* button css end  */


/* dots css start  */
.slider_wrap .slick-dots {
    position: absolute;
    left: 50%;
    bottom: 30px;
    display: flex;
    transform: translateX(-50%);
    /* opacity: 0;
    visibility: hidden; */
    transition: .3s linear;
    z-index: 9;
    padding: 5px 10px;
    border-radius: 50px;
    background: var(--ColorLightPrimary);
    box-shadow: var(--BoxShadow);
}

.slider:hover .slick-dots {
    opacity: 1;
    visibility: visible;
}

.slider_wrap .slick-dots li {
    display: inline-block;
    margin-top: -8px;
}

.slider_wrap .slick-dots li button {
    font-size: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1px solid var(--ColorPrimary);
    background: transparent;
    backdrop-filter: blur(5px);
    margin: 5px;
    transition: all .3s linear;
}

.slider_wrap .slick-dots li.slick-active button {
    background: var(--ColorPrimary);
}

/* dots css end  */



/* slider item css start  */
.slider_wrap {
    overflow: hidden;
}


/* Pre-initialization layout preservation (Universal 0% FOUC / 0% layout shift before Slick JS runs) */
.slider_wrap:not(.slick-initialized) {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    gap: 12px !important;
    width: 100% !important;
}

.slider_wrap:not(.slick-initialized)>.slider_item {
    flex: 0 0 calc((100% - 48px) / 5) !important;
    min-width: 0 !important;
    width: calc((100% - 48px) / 5) !important;
}

@media (max-width: 1200px) {
    .slider_wrap:not(.slick-initialized)>.slider_item {
        flex: 0 0 calc((100% - 36px) / 4) !important;
        width: calc((100% - 36px) / 4) !important;
    }
}

@media (max-width: 992px) {
    .slider_wrap:not(.slick-initialized)>.slider_item {
        flex: 0 0 calc((100% - 24px) / 3) !important;
        width: calc((100% - 24px) / 3) !important;
    }
}

@media (max-width: 576px) {
    .slider_wrap:not(.slick-initialized)>.slider_item {
        flex: 0 0 calc((100% - 12px) / 2) !important;
        width: calc((100% - 12px) / 2) !important;
    }
}

/* Single-Slide / Full-Width Sliders (Hero Banners, Single Cards) */
.slider[data-slides-to-show="BPD: 1"] .slider_wrap:not(.slick-initialized)>.slider_item,
.slider[data-slides-to-show="1"] .slider_wrap:not(.slick-initialized)>.slider_item {
    flex: 0 0 100% !important;
    width: 100% !important;
}

.slider_item {
    cursor: default;
}




.slick-list {
    /* margin: 0 -5px !important; */
    /* margin set dynamically for gap  */
}

.slick-track {
    /* margin: 0 5px !important; */
    display: flex;
    align-items: center;

    /* gap: 10px; */
    /* gap set dynamically for gap  */
}



/* dynamically set gap start  */
/* managed in slick.customize.js  */
/* .slider.has-gap .slick-list {
    margin: 0 !important;
}

.slider.has-gap .slick-track {
    gap: var(--gap-value) !important;
    display: flex !important;
}
.slider.has-gap .slick-track.test-class {
    gap: var(--gap-value) !important;
    display: flex !important;
}
.slider[data-gap-value] .slick-track {
    gap: var(--gap-value) !important;
    display: flex !important;
} */
/* dynamically set gap end  */

/* Quick View Nav Slider — Thumbnail Active / Hover States */
.qv-thumb-slider .qv-thumb-btn {
    border: 2px solid transparent;
    border-radius: 12px;
    opacity: 0.6;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.qv-thumb-slider .slick-slide:hover .qv-thumb-btn {
    opacity: 1;
}

/* Active thumbnail: slick puts slick-current/slick-center on .slick-slide wrapper */
.qv-thumb-slider .slick-slide.slick-current .qv-thumb-btn,
.qv-thumb-slider .slick-slide.slick-center .qv-thumb-btn {
    border-color: var(--ColorPrimary) !important;
    opacity: 1 !important;
    box-shadow: 0 0 0 1px rgba(var(--ColorPrimaryRGB), 0.25);
}

/* slider item css end  */



/* responsive css start  */
/* Optional: if you want to hide arrows on mobile for all sliders */
/* @media (max-width: 767.98px) {
    .slider_wrap .slick-dots {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .slider .left_btn,
    .slider .right_btn {
        display: none !important;
    }
} */
/* responsive css end  */



/* Prevent navigation slider track movement when content does not exceed visible slides */
.no-scroll .slick-track {
    transform: none !important;
    transition: none !important;
}

/* SLIDER CONTROL BUTTON CSS END  */