/* Slider Outer Container */
.slider-outer-container {
    position: relative;
    width: 100%;
}

/* SkOn Slider Widget - Overflow hidden to hide adjacent slides */
.custom-slider-widget.swiper {
    overflow: hidden;
    position: relative;
}

/* Swiper Overlays Container: CSS Grid for responsive positioning */
.swiper-overlays-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;  /* Clicks go through to swiper */
    z-index: 10;  /* Above swiper */
    display: grid;
    justify-items: var(--overlay-h-justify, start);
    align-items:   var(--overlay-v-align,   start);
    box-sizing: border-box;
    padding-left:  var(--overlay-h-inset, 0px);
    padding-right: var(--overlay-h-inset, 0px);
}

/* Overlays: all in the same grid cell, stacked */
.swiper-overlays-container .swiper-slide-overlay {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    pointer-events: auto;  /* Overlays are clickable */
    opacity: 0;  /* Initially hidden */
    transition: all 0.4s ease;  /* Smooth fade (configurable via Elementor) */
    /* Fade-out: offset along the configured direction */
    transform: translate(
        var(--overlay-translate-x, 0px),
        calc(var(--overlay-translate-y, 0px)
             + var(--fade-direction-multiplier, 1)
             * var(--fade-out-distance, 100px))
    );
}

/* Active overlay: only user-offset, no fade offset */
.swiper-overlays-container .swiper-slide-overlay.active {
    opacity: 1;
    transform: translate(
        var(--overlay-translate-x, 0px),
        var(--overlay-translate-y, 0px)
    );
}

.swiper-slide-overlay-content {
    position: relative;
}

/* Ensure navigation buttons are above everything */
.custom-slider-widget .swiper-button-prev,
.custom-slider-widget .swiper-button-next {
    z-index: 20;
}

/* Ensure pagination is above everything */
.custom-slider-widget .swiper-pagination {
    z-index: 20;
}

/* Slide images fill the slide area */
.custom-slider-widget .swiper-slide img,
.custom-slider-widget .swiper-slide picture {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* SkOn Slider Widget - Remove ::after when custom icons are used */
.custom-slider-widget.has-custom-prev-icon .swiper-button-prev::after {
    display: none;
}

.custom-slider-widget.has-custom-next-icon .swiper-button-next::after {
    display: none;
}

.custom-slider-widget-toolbar {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 30;
    width: 100%;
    height: 46px;
    /*background: rgba(255, 255, 255, 0.37);*/
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 12px;
}

.custom-slider-widget-toolbar .swiper-pagination {
    --swiper-pagination-bullet-inactive-opacity: 1;

    position: static !important; /* override Swiper's position: absolute so flex: 1 works */
    width: 100%;
    margin: 0;
    justify-content: center;
}

/* Pagination Bullet Styling - applies Elementor controls */
.custom-slider-widget .swiper-pagination-bullet {
    width: var(--swiper-pagination-bullet-size, 8px);
    height: var(--swiper-pagination-bullet-size, 8px);
    border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
    border: var(--swiper-pagination-bullet-border-width, 0) solid var(--swiper-pagination-bullet-border-color, transparent);
    box-sizing: content-box;
}

/* Inactive bullet styling */
.custom-slider-widget .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
    background-color: var(--swiper-pagination-bullet-inactive-color, rgba(0, 0, 0, 0.2));
    border-color: var(--swiper-pagination-bullet-inactive-border-color, transparent);
}

.swiper-toggle-autoplay-icons img {
    display: block;
    width: 22px;
    height: 22px;
}

.swiper-toggle-autoplay-icons {
    border: none;
    padding: 0;
}

.swiper-toggle-autoplay {
    border: none;
    padding: 0;
    position: absolute;
    right: 12px; /* match toolbar padding */
    z-index: 100;
}

.custom-slider-widget-toolbar[data-pagination-alignment="flex-end"] .swiper-toggle-autoplay {
    right: auto;
    left: 12px;
}

.swiper-toggle-autoplay[data-state="playing"] .swiper-toggle-autoplay-icon-play {
    display: none;
}

.swiper-toggle-autoplay[data-state="playing"] .swiper-toggle-autoplay-icon-pause {
    display: block;
}

.swiper-toggle-autoplay[data-state="paused"] .swiper-toggle-autoplay-icon-play {
    display: block;
}

.swiper-toggle-autoplay[data-state="paused"] .swiper-toggle-autoplay-icon-pause {
    display: none;
}