/**
 * Slider CSS - Desktop and Mobile Slider Styles
 * Contains all styles for LayerSlider (desktop) and Slick Slider (mobile)
 */

/* Hero section container */
.vs-hero-wrapper {
    position: relative;
    overflow: hidden;
}

/* Separated video background */
.hero-video-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}

#hero-background-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    cursor: pointer;
    transition: filter 0.3s ease;
}

/* Subtle visual feedback for video interaction */
#hero-background-video:hover {
    filter: brightness(1.1);
}

/* Add a subtle click indicator overlay */
.hero-video-background::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

/* Show click indicator when hovering over video area */
.hero-video-background:hover::before {
    opacity: 1;
}

/* Clickable audio enabler overlay */
.video-audio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.video-audio-overlay:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Hide audio enabler after interaction */
.video-audio-overlay.hidden {
    display: none;
    pointer-events: none;
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* LayerSlider positioned above video */
.vs-hero-carousel {
    position: relative;
    z-index: 2;
    background: transparent;
}

/* Video slide with low opacity background */
.video-slide .ls-bg {
    opacity: 0.1 !important;
}

/* Ensure other slides have proper backgrounds */
.ls-slide:not(.video-slide) .ls-bg {
    opacity: 1 !important;
}

/* Hide video controls completely */
#hero-background-video::-webkit-media-controls,
#mobile-background-video::-webkit-media-controls {
    display: none !important;
}

#hero-background-video::-webkit-media-controls-panel,
#mobile-background-video::-webkit-media-controls-panel {
    display: none !important;
}

#hero-background-video::-webkit-media-controls-play-button,
#mobile-background-video::-webkit-media-controls-play-button {
    display: none !important;
}

#hero-background-video::-webkit-media-controls-start-playback-button,
#mobile-background-video::-webkit-media-controls-start-playback-button {
    display: none !important;
}

/* Mobile slider container - holds only the slider */
.mobile-slider-container {
    position: relative;
    width: 100%;
    height: 500px;
    overflow: hidden;
    display: block !important;
    z-index: 10; /* Above video background */
}

/* Mobile video intro overlay - shows initially */
.mobile-video-intro-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20; /* Above everything in slider container */
    background: transparent; /* Completely transparent to show video */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    pointer-events: auto; /* Allow interaction with content */
}

.mobile-video-intro-overlay.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    display: none !important; /* Force complete hiding */
}

/* Make sure content in video intro is visible with proper background */
.mobile-video-intro-overlay .slider-mobile-content {
    background: rgba(0, 0, 0, 0.6); /* Semi-transparent background for text readability */
    padding: 30px;
    border-radius: 10px;
    backdrop-filter: blur(5px);
    text-align: center;
    color: white;
    position: relative;
    z-index: 21;
}

/* Slider navigation buttons - positioned in slider container, outside overlay */
.slider-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 30; /* Higher than overlay to remain visible */
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.prev-btn {
    left: 20px;
}

.next-btn {
    right: 20px;
}

.slider-nav-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: rgba(255, 255, 255, 0.8);
    transform: translateY(-50%) scale(1.1);
}

/* Return to video button */
.return-video-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 35;
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.return-video-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: rgba(255, 255, 255, 0.8);
    transform: scale(1.1);
}

/* Hide default Slick arrows to avoid conflicts */
.mobile-slick-slider .slick-prev,
.mobile-slick-slider .slick-next {
    display: block !important;
}

/* Mobile slider styles */
.slider-mobile-wrapper {
    position: relative; /* Normal positioning within container */
    width: 100%;
    height: 100%;
    background: transparent;
}

/* Mobile video background - positioned inside slider container */
.mobile-video-background {
    position: absolute; /* Absolute within slider container */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Fill container height */
    z-index: 1; /* Behind all other content */
    overflow: hidden;
    display: block;
    pointer-events: none; /* Allow clicks to pass through to overlay content */
    background: transparent;
}

@media (min-width: 992px) {
    .mobile-video-background {
        display: none !important; /* Hide on desktop */
    }
}

#mobile-background-video {
    width: 100% !important;
    height: 100% !important; /* Fill the container */
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1; /* Within video background container */
    cursor: pointer;
    transition: filter 0.3s ease;
    display: block;
    pointer-events: auto; /* Allow video clicks */
    background: transparent;
}

/* Mobile video overlay */
.mobile-video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; /* Above video within container */
    pointer-events: none;
    background: linear-gradient(45deg, rgba(0,0,0,0.3), rgba(0,0,0,0.1));
}

.slider-mobile-slide {
    position: relative;
    height: 500px; /* Match container height */
    overflow: hidden;
    z-index: 4; /* Above video background */
    background: #1a1a1a; /* Dark solid background for all slides */
}

.slider-mobile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute; /* Absolute positioning to ensure full coverage */
    top: 0;
    left: 0;
    z-index: 1; /* Base layer for images */
    opacity: 1; /* Full opacity for regular slides */
    display: block; /* Ensure image is visible */
}

/* Mobile slide overlay for regular slides */
.slider-mobile-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Semi-transparent overlay for text readability */
    z-index: 2; /* Above image, below content */
}

.slider-mobile-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    z-index: 6; /* Highest z-index for content */
    background: transparent; /* Remove black transparent background */
    padding: 20px;
    border-radius: 10px;
}

.slider-mobile-title-one,
.slider-mobile-title-two {
    margin: 10px 0;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8); /* Add text shadow for better visibility */
    font-size: 24px; /* Ensure readable size */
}

.slider-mobile-slogan {
    margin: 15px 0;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8); /* Add text shadow */
    font-size: 16px; /* Ensure readable size */
}

.slider-mobile-buttons {
    margin-top: 20px;
}

.slider-mobile-btn {
    margin: 5px;
}

/* Video slide mobile - completely transparent to show video */
.video-slide-mobile {
    background: transparent !important;
}

.video-slide-mobile .slider-mobile-img {
    display: none !important; /* Hide image on video slide */
}

.video-slide-mobile .slider-mobile-overlay {
    display: none !important; /* Hide overlay on video slide */
}

/* Mobile slide video styling */
.mobile-slide-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* Show overlay on video slide for content readability */
.video-slide-mobile .slider-mobile-overlay {
    display: block !important;
    background: rgba(0, 0, 0, 0.4);
    z-index: 2;
}

/* Ensure content is above video */
.video-slide-mobile .slider-mobile-content {
    z-index: 3;
    position: relative;
    padding: 20px;
    border-radius: 10px;
}

/* Regular slides - ensure they completely cover video background */
.regular-slide {
    background: #1a1a1a !important; /* Solid dark background */
}

.regular-slide::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #1a1a1a; /* Additional solid background layer */
    z-index: 0; /* Behind everything else in slide */
}

.regular-slide .slider-mobile-img {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Mobile sound toggle button - positioned relative to slider container */
.mobile-sound-toggle-wrapper {
    position: absolute; /* Changed from fixed to absolute for slide-relative positioning */
    bottom: 20px;
    left: 20px;
    z-index: 9999; /* Very high z-index to be above everything including Slick overlays */
    pointer-events: auto; /* Allow clicks */
}

@media (min-width: 992px) {
    .mobile-sound-toggle-wrapper {
        display: none !important; /* Hide on desktop */
    }
}

.mobile-video-sound-btn {
    background: rgb(0 0 0 / 0%);
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    pointer-events: auto; /* Ensure button is clickable */
    opacity: 1;
    visibility: visible;
}

.mobile-video-sound-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: rgba(255, 255, 255, 0.8);
    transform: scale(1.1);
}

.mobile-video-sound-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

/* Mobile slider navigation arrows - Custom styling */
.mobile-slick-slider .slick-prev,
.mobile-slick-slider .slick-next {
    width: 50px !important;
    height: 50px !important;
    z-index: 1000 !important;
    background: rgba(0, 0, 0, 0.8) !important;
    border: 2px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 50% !important;
    transition: all 0.3s ease !important;
    backdrop-filter: blur(10px);
    position: absolute !important;
    display: block !important;
    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
    /* Remove text-indent and overflow that hide content */
    text-indent: 0 !important;
    overflow: visible !important;
    line-height: 50px !important; /* Center content vertically */
    text-align: center !important;
    font-size: 0 !important; /* Hide any default text */
}

.mobile-slick-slider .slick-prev {
    left: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

.mobile-slick-slider .slick-next {
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* Custom arrow icons using CSS */
.mobile-slick-slider .slick-prev:before,
.mobile-slick-slider .slick-next:before {
    font-size: 24px !important;
    color: white !important;
    opacity: 1 !important;
    font-family: Arial, sans-serif !important;
    font-weight: bold !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    line-height: 1 !important;
    display: block !important;
    content: '' !important; /* Clear default content first */
}

.mobile-slick-slider .slick-prev:before {
    content: '‹' !important; /* Left arrow */
}

.mobile-slick-slider .slick-next:before {
    content: '›' !important; /* Right arrow */
}

.mobile-slick-slider .slick-prev:hover,
.mobile-slick-slider .slick-next:hover {
    background: rgba(0, 0, 0, 0.95) !important;
    border-color: rgba(255, 255, 255, 1) !important;
    transform: translateY(-50%) scale(1.1) !important;
}

.mobile-slick-slider .slick-next:hover {
    transform: translateY(-50%) scale(1.1);
}

/* Additional fallback styles for mobile arrows visibility */
.mobile-slick-slider .slick-arrow {
    width: 50px !important;
    height: 50px !important;
    background: rgba(0, 0, 0, 0.8) !important;
    border: 2px solid rgba(255, 255, 255, 0.7) !important;
    border-radius: 50% !important;
    z-index: 1001 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    font-size: 24px !important;
    color: white !important;
    text-align: center !important;
    line-height: 46px !important; /* Adjust for border */
}

/* Ensure arrows are above all slide content */
.mobile-slick-slider .slick-prev,
.mobile-slick-slider .slick-next,
.mobile-slick-slider .slick-arrow {
    z-index: 1002 !important;
}

/* Force display on mobile devices specifically */
@media (max-width: 991px) {
    .mobile-slick-slider .slick-prev,
    .mobile-slick-slider .slick-next {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
    
    /* Ensure the arrows are not hidden by any parent containers */
    .mobile-slider-container {
        overflow: visible !important;
    }
    
    .slider-mobile-wrapper {
        overflow: visible !important;
    }
}

/* Mobile slider dots */
.mobile-slick-slider .slick-dots {
    bottom: 90px; /* Above sound button */
    z-index: 15;
}

.mobile-slick-slider .slick-dots li button:before {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.mobile-slick-slider .slick-dots li.slick-active button:before {
    color: white;
    opacity: 1;
}

/* Desktop sound toggle button styles */
.hero-sound-toggle-wrapper {
    position: absolute;
    bottom: 30px;
    left: 30px;
    z-index: 100;
    pointer-events: none;
}

.video-sound-btn {
    background: rgb(0 0 0 / 9%);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}

.video-sound-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.1);
}

.video-sound-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.sound-icon {
    transition: all 0.2s ease;
}

.hero-sound-toggle-wrapper.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Remove problematic CSS that interferes with Slick transitions */
.mobile-slick-slider .slick-slide {
    /* Let Slick handle slide visibility and positioning naturally */
}

.mobile-slick-slider .slick-slide .slider-mobile-slide {
    opacity: 1;
    visibility: visible;
    display: block;
    position: relative;
    height: 500px; /* Maintain slide height */
    overflow: hidden;
    background: #1a1a1a; /* Solid background for regular slides */
}

.mobile-slick-slider .slick-slide .slider-mobile-img {
    opacity: 1;
    visibility: visible;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* Ensure the slider track works properly with Slick */
.mobile-slick-slider .slick-track {
    /* Let Slick handle track positioning */
}

/* Let Slick handle slide visibility states */
.mobile-slick-slider .slick-slide[aria-hidden="true"] {
    /* Slick will handle hidden slides */
}

.mobile-slick-slider .slick-slide[aria-hidden="false"] {
    /* Slick will handle visible slides */
}

/* Style for test slide placeholders */
.slider-mobile-img-placeholder {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    z-index: 1 !important;
}

/* Ensure slider wrapper is always visible */
.mobile-slick-slider {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
}

/* Force slide content to be visible */
.slider-mobile-slide {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    position: relative !important;
    height: 500px !important;
    overflow: hidden !important;
    background: #1a1a1a !important;
}