/**
 * Swiper Custom Styles for BSmaart
 * Custom styling for all sliders
 * With Dark/Light Mode Support
 */

/* ===========================
   Theme Variables for Swiper
   =========================== */
:root {
    --swiper-nav-color: var(--site-bg);
    --swiper-nav-bg: color-mix(in srgb, var(--site-text) 90%, transparent);
    --swiper-nav-hover-bg: var(--site-text);
    --swiper-pagination-bullet: var(--site-text);
    --swiper-thumb-border: color-mix(in srgb, var(--site-text) 70%, transparent);
    --swiper-shadow-color: color-mix(in srgb, var(--site-text) 20%, transparent);
    --swiper-shadow-hover: color-mix(in srgb, var(--site-text) 35%, transparent);
    --swiper-banner-nav-bg: color-mix(in srgb, var(--site-text) 40%, transparent);
    --swiper-banner-nav-hover: color-mix(in srgb, var(--site-bg) 60%, transparent);
    --swiper-banner-nav-text-hover: color-mix(in srgb, var(--site-text) 80%, transparent);
    --swiper-banner-text-color: var(--site-bg);
    --swiper-banner-bullet-bg: var(--site-text);
}

/* ===========================
   Banner Slider Styles
   =========================== */
.swiper {
    width: 100%;
    height: auto;
    position: relative;
    /* Force Swiper navigation color to follow site palette */
    --swiper-navigation-color: var(--site-text);
    --swiper-theme-color: var(--site-text);
}

/* Navigation Arrows for Banner */

/* Swiper navigation arrows styled from the site palette */
.swiper-button-next,
.swiper-button-prev {
    color: var(--site-text) !important;
    background: color-mix(in srgb, var(--site-bg) 82%, transparent) !important;
    border: 1.5px solid color-mix(in srgb, var(--site-text) 28%, transparent) !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    transition: background 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s !important;
    box-shadow: 0 8px 22px var(--swiper-shadow-color) !important;
    backdrop-filter: blur(2px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.96 !important;
    margin-top: 0 !important;
}

.swiper-button-prev {
    left: 12px;
}

.swiper-button-next {
    right: 12px;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: var(--site-text);
    color: var(--site-bg);
    border-color: var(--site-text);
    box-shadow: 0 10px 26px var(--swiper-shadow-hover);
}

.swiper-button-next:after,
.swiper-button-prev:after {
    color: var(--site-text) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1;
}

.swiper-button-next:hover:after,
.swiper-button-prev:hover:after {
    color: var(--site-bg) !important;
}

/* ===========================
   Responsive Styles
   =========================== */
@media (max-width: 768px) {

    .swiper-button-next,
    .swiper-button-prev {
        width: 34px !important;
        height: 34px !important;
    }

    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 11px !important;
    }
}

@media (max-width: 576px) {

    .swiper-button-next,
    .swiper-button-prev {
        width: 30px !important;
        height: 30px !important;
    }

    .swiper-button-next:after,
    .swiper-button-prev:after {
        font-size: 10px !important;
    }
}