/* Custom properties for navigation button colors */
.custom-swipe-slider {
    --button-bg-color: #000000;
    --button-hover-bg-color: #333333;
    --button-icon-color: #ffffff;
    --slider-height: 500px;
    --title-font-size: 25px;
    --title-color: #ffffff;
    --subtitle-font-size: 16px;
    --subtitle-color: #ffffff;
    --button-text-color: #ffffff;
}

.custom-swipe-slider {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: var(--slider-height, 500px);
    min-height: 350px;
    overflow: hidden;
}

.custom-swipe-slider .slider-item,
.custom-swipe-slider .swiper-slide {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    width: 100%;
    height: 100%;
    position: relative;
}

.custom-swipe-slider .slider-button {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 20px;
    background-color: #0073aa;
    color: #fff;
    text-decoration: none;
}
.swiper-pagination-bullet-active {
    background-color: #fff !important;
}


/* Aggressive full-width option CSS */
.custom-swipe-slider.full-width-enabled {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

/* Desktop Full Height option */
.custom-swipe-slider.full-height-enabled {
    height: 100vh !important;
}


/* Declare separate prev/next CSS variables (fall back to shared button vars) */
.custom-swipe-slider {
    --prev-button-bg-color: var(--button-bg-color);
    --prev-button-hover-bg-color: var(--button-hover-bg-color);
    --next-button-bg-color: var(--button-bg-color);
    --next-button-hover-bg-color: var(--button-hover-bg-color);
}

/* Base styles for navigation buttons */
.custom-swipe-slider .swiper-button-prev,
.custom-swipe-slider .swiper-button-next {
    color: var(--button-icon-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    z-index: 20;
    cursor: pointer;
    pointer-events: all;
}

/* Prev button colors */
.custom-swipe-slider .swiper-button-prev {
    background-color: var(--prev-button-bg-color);
    left: 20px;
}

.custom-swipe-slider .swiper-button-prev:hover {
    background-color: var(--prev-button-hover-bg-color);
}

/* Next button colors */
.custom-swipe-slider .swiper-button-next {
    background-color: var(--next-button-bg-color);
    right: 20px;
}

.custom-swipe-slider .swiper-button-next:hover {
    background-color: var(--next-button-hover-bg-color);
}

/* Swiper 4.x renders arrows as SVG background-image on the button element.
   Remove it entirely when a custom icon is injected. */
.custom-swipe-slider .swiper-button-next.has-custom-icon,
.custom-swipe-slider .swiper-button-prev.has-custom-icon {
    background-image: none !important;
}

/* Also hide ::after for Swiper 6+ compatibility */
.custom-swipe-slider .swiper-button-next.has-custom-icon::after,
.custom-swipe-slider .swiper-button-prev.has-custom-icon::after,
.custom-swipe-slider .swiper-button-next.has-custom-icon::before,
.custom-swipe-slider .swiper-button-prev.has-custom-icon::before {
    display: none !important;
    content: '' !important;
    font-size: 0 !important;
    background: none !important;
}

/* Style for custom injected icons */
.custom-swipe-slider .swiper-button-prev i,
.custom-swipe-slider .swiper-button-next i {
    font-size: 20px;
    line-height: 1;
    display: inline-block;
    color: var(--button-icon-color);
}/* Base styles for the title within the content */
.custom-swipe-slider .slide-content h2 {
    /* ... (Your existing h2 styles) ... */
    
    /* Initially hidden for the animation */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    transition-delay: 0.2s; /* Stagger the animation */
}

/* Base styles for the subtitle within the content */
.custom-swipe-slider .slide-content .subtitle {
    /* ... (Your existing subtitle styles) ... */
    
    /* Initially hidden for the animation */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    transition-delay: 0.4s; /* Stagger the animation */
}

/* Base styles for the buttons wrapper */
.custom-swipe-slider .slider-buttons-wrapper {
    /* ... (Your existing button wrapper styles) ... */
    
    /* Initially hidden for the animation */
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    transition-delay: 0.6s; /* Stagger the animation */
}

/* Animation trigger for the active slide */
.custom-swipe-slider .swiper-slide-active .slide-content {
    opacity: 1;
    transform: translateY(0);
}

/* Animation for the title when the slide is active */
.custom-swipe-slider .swiper-slide-active .slide-content h2 {
    opacity: 1;
    transform: translateY(0);
}

/* Animation for the subtitle when the slide is active */
.custom-swipe-slider .swiper-slide-active .slide-content .subtitle {
    opacity: 1;
    transform: translateY(0);
}

/* Animation for the buttons when the slide is active */
.custom-swipe-slider .swiper-slide-active .slider-buttons-wrapper {
    opacity: 1;
    transform: translateY(0);
}


/* Overall slide item styling */
.custom-swipe-slider .slider-item {
    /* ... (Your existing styles) ... */
    position: relative;
    width: 100%;
    height: 100%;
    left:0;
    top:0;
}

/* Updated styles for the content box */
.custom-swipe-slider .slide-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
    margin: 20px;
    border-radius: 10px;
    
    /* Updated Box Shadow: A more layered and modern effect */
    box-shadow: 
        0 4px 6px rgba(0, 0, 0, 0.1),  /* Light, upper shadow */
        0 10px 20px rgba(0, 0, 0, 0.15), /* Wider, darker shadow below */
        0 20px 40px rgba(0, 0, 0, 0.2); /* Soft, distant shadow */

    /*backdrop-filter: blur(5px);*/
    /* Use the custom properties for the background */
    background-color: rgba(var(--content-bg-color-rgb), var(--content-overlay-opacity));
    /*background-color: #000;*/


    
    border: 1px solid rgba(255, 255, 255, 0.2);
    width: 90%;
    max-width: 600px;
    text-align: center;
    transition: all 0.5s ease-in-out;
    
    /* Add a hover effect for a subtle lift */
    transform: translateY(0);

    opacity: 0;
    transform: translateY(20px); /* Adjust vertical position for the effect */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    z-index: 10;
}

/* Hover effect for the slide content */
.custom-swipe-slider .slide-content:hover {
    transform: translateY(-5px); /* Lift the box slightly */
    box-shadow: 
        0 8px 12px rgba(0, 0, 0, 0.15),
        0 20px 40px rgba(0, 0, 0, 0.2),
        0 30px 60px rgba(0, 0, 0, 0.3);
}

/* Animations for content elements */
.custom-swipe-slider .swiper-slide-active .slide-content h2,
.custom-swipe-slider .swiper-slide-active .slide-content .subtitle,
.custom-swipe-slider .swiper-slide-active .slide-content .slider-buttons-wrapper {
    transition: transform 0.5s ease, opacity 0.5s ease;
    transform: translateY(0);
    opacity: 1;
}

.custom-swipe-slider .slide-content h2,
.custom-swipe-slider .slide-content .subtitle,
.custom-swipe-slider .slide-content .slider-buttons-wrapper {
    transform: translateY(20px);
    opacity: 0;
}

.custom-swipe-slider .swiper-slide-active .slide-content h2 { transition-delay: 0.1s; }
.custom-swipe-slider .swiper-slide-active .slide-content .subtitle { transition-delay: 0.2s; }
.custom-swipe-slider .swiper-slide-active .slide-content .slider-buttons-wrapper { transition-delay: 0.3s; }

/* Styling for content elements */
.custom-swipe-slider .slide-content h2 {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.custom-swipe-slider .slide-content .subtitle {
    font-size: 1.2rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
    line-height: 1.4;
    font-weight: 300;
}

.custom-swipe-slider .slider-buttons-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
}

.custom-swipe-slider .slider-button {
    padding: 12px 25px;
    border-radius: 50em;
    background-color: #0073aa;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.custom-swipe-slider .slider-button:hover {
    background-color: #005f8d;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.custom-swipe-slider .button-group-item {
    background-color: transparent;
    border: none;
    padding: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.custom-swipe-slider .button-group-item h2,
.custom-swipe-slider .button-group-item .subtitle {
    color: inherit;
    margin-bottom: 0.2rem;
}


/* Base styles for the content box */
.custom-swipe-slider .slide-content {
    /* ... (Your existing styles) ... */
    position: absolute;
}

/* Styling for title */
.custom-swipe-slider .slide-content h2 {
    font-size: var(--title-font-size);
    color: var(--title-color);
    /* ... (other styles) ... */
}

/* Styling for subtitle */
.custom-swipe-slider .slide-content .subtitle {
    font-size: var(--subtitle-font-size);
    color: var(--subtitle-color);
    /* ... (other styles) ... */
}

/* Styling for buttons */
.custom-swipe-slider .slider-button {
    background-color: var(--button-bg-color);
    color: var(--button-text-color);
    text-decoration: none!important;
}

.custom-swipe-slider .slider-button:hover {
    background-color: var(--button-hover-bg-color);
}



.swiper-slide {
    height: 100%;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Slide media wrapper & full coverage image */
.deloswsl-slide-media-wrap,
.custom-swipe-slider .deloswsl-media-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.swiper-slide img,
.custom-swipe-slider .deloswsl-slide-img,
.custom-swipe-slider img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* Video & iframe player within slide */
.deloswsl-media-video video,
.deloswsl-media-youtube iframe,
.deloswsl-media-vimeo iframe,
.deloswsl-yt-wrapper iframe,
.deloswsl-vimeo-wrapper iframe,
video.deloswsl-video-player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
    z-index: 1;
}