/* Main Swiper Container */
.custom-slider.swiper {
    width: 100%;
    position: relative;
    overflow: hidden;
    display: block;
}

/* REQUIRED: Forces slides to sit side-by-side */
.custom-slider .swiper-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    transition-property: transform;
}

/* Individual Slide */
.custom-slide.swiper-slide {
    position: relative;
    overflow: hidden;
    flex-shrink: 0; /* Prevents slides from collapsing */
    width: 100%;
    display: flex;
    box-sizing: border-box;
}

/* Ken Burns / Background Image Layer */
.custom-slide-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 1; /* Bottom Layer */
}

/* SMOOTH WHITE OVERLAY */
.slide-overlay-white {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    opacity: 0;
    z-index: 3; /* Above Background, but below text if needed */
    pointer-events: none;
    transition: opacity 0.6s ease-in-out;
}

/* Logic for the white flash: Show on incoming/outgoing, hide on active */
.swiper-slide-next .slide-overlay-white,
.swiper-slide-prev .slide-overlay-white {
    opacity: 1;
}

.swiper-slide-active .slide-overlay-white {
    opacity: 0;
}

/* Content Area */
.slide-content {
    position: relative;
    z-index: 4; /* Top Layer */
    width: 100%;
}

.slide-template-render {
    width: 100%;
}

/* Swiper Navigation Customization (Optional/Basic) */
.swiper-button-next, .swiper-button-prev {
    z-index: 10;
}
.swiper-pagination {
  display: flex;
}

/* --- PAGINATION STYLES --- */

/* 1. Bullets (Dots) */
.swiper-pagination {
    position: absolute;
    bottom: 25px !important; /* Position from bottom */
    left: 70px;
    width: 100%;
    text-align: center;
    z-index: 20;
    line-height: 1;
}

.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: 50%;
    background: #000; /* Default if not set in Elementor */
    opacity: 0.3;
    margin: 0 5px !important;
    cursor: pointer;
    transition: all 0.3s ease;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    transform: scale(1.2);
}

/* 2. Fraction (e.g., 1/3) */
.swiper-pagination-fraction {
    color: #000;
    font-size: 16px;
    font-weight: bold;
}

/* 3. Progress Bar */
.swiper-pagination-progressbar {
    background: rgba(0,0,0,0.1);
    position: absolute;
    top: 0 !important; /* Usually looks best at the very top */
    height: 4px !important;
}

.swiper-pagination-progressbar-fill {
    background: #000; /* Controlled by PHP Color selector */
}

/* --- NAVIGATION ARROWS --- */
.swiper-button-next,
.swiper-button-prev {
    z-index: 30;
    color: #000; /* Default color */
    transition: all 0.3s ease;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 24px; /* Size of the arrow icon */
}

.swiper-button-disabled {
    opacity: 0.1;
    cursor: not-allowed;
}


/* Hide default Swiper icons so custom Elementor icons show correctly */
.swiper-button-next::after, 
.swiper-button-prev::after {
    display: none !important;
    content: "" !important;
}

/* Base style for Arrows */
.swiper-button-next, 
.swiper-button-prev {
    display: flex !important;
    align-items: center;
    justify-content: center;
    z-index: 50 !important;
}

/* Ensure icons inside scale with the slider settings */
.swiper-button-next i, .swiper-button-prev i,
.swiper-button-next svg, .swiper-button-prev svg {
    display: block;
    line-height: 1;
}

/* Pagination Z-index */
.swiper-pagination {
    z-index: 50 !important;
    bottom: 20px !important;
}
.swiper-buttons-wrap {
    display: flex;
    justify-content: center;
}