/* ============================================================
   NEW MOBILE HERO SYSTEM - ISOLATED CSS
   All rules prefixed with .mobile-hero-system to prevent conflicts
   Desktop system uses .desktop-hero-system wrapper
   ============================================================ */
@media (max-width: 991px) {
    /* ========================================
       PART 0: DISABLE STICKY BEHAVIOR ON MOBILE
       Remove sticky from menu bar and search module
       ======================================== */
    .main-menu-wrapper,
    .main-menu-wrapper.is-sticky,
    .main-menu-wrapper.sticky-wrapper {
        position: static !important;
        top: auto !important;
        transform: none !important;
    }
    
    /* Disable sticky kit wrapper on mobile */
    .main-menu-wrapper .sticky-wrapper,
    #undefined-sticky-wrapper {
        position: static !important;
        height: auto !important;
    }
    
    /* ========================================
       PART 1: DISABLE OLD DESKTOP SEARCH ON MOBILE
       Hide desktop-hero-system search wrapper
       ======================================== */
    .desktop-hero-system .search-luxury-wrapper {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }
    
    /* ========================================
       PART 2: NEW MOBILE SLIDER SYSTEM
       Only applies to .mobile-hero-system wrapper
       ======================================== */
    .mobile-hero-system.site-showcase {
        display: block !important;
        visibility: visible !important;
        position: relative !important;
        height: calc(100vh - 20px) !important;
        min-height: 450px !important;
        max-height: 650px !important;
        overflow: hidden !important; /* Keep hidden for slider, but search overlay is absolutely positioned so it's visible */
        margin: 0 !important;
        padding: 0 !important;
        /* CRITICAL: Explicitly disable sticky/fixed behavior */
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
    }
    
    .mobile-hero-system .hero-slider,
    .mobile-hero-system .hero-slider.hidden-xs {
        display: block !important;
        visibility: visible !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(100vh - 20px) !important;
        min-height: 450px !important;
        z-index: 1 !important;
        overflow: hidden !important;
    }
    
    .mobile-hero-system .hero-slider .flex-viewport,
    .mobile-hero-system .hero-slider .slides {
        height: 100% !important;
        width: 100% !important;
    }
    
    /* Slider images - lighter/more transparent */
    .mobile-hero-system .hero-slider .slides li {
        height: 100% !important;
        background-size: cover !important;
        background-position: center center !important;
        opacity: 0.92 !important;
        filter: brightness(1.3) !important;
        position: relative !important;
    }
    
    /* 20% dark overlay on slider images */
    .mobile-hero-system .hero-slider .slides li::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.2) !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }
    
    /* Hide hero caption on mobile */
    .mobile-hero-system .hero-caption {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* ========================================
       PART 3: NEW MOBILE SEARCH OVERLAY
       Created by JavaScript, positioned over slider
       NO STICKY BEHAVIOR - scrolls with page naturally
       CENTERED vertically on slider
       ======================================== */
    .mobile-search-overlay-wrapper {
        position: absolute !important;
        top: 50% !important; /* Center vertically */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        transform: translateY(-50%) !important; /* Center vertically */
        z-index: 100 !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        display: block !important;
        visibility: visible !important;
        min-height: 200px !important;
        /* CRITICAL: Explicitly disable sticky/fixed behavior */
        position: absolute !important; /* Absolute within relative parent = scrolls with page */
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
    
    .mobile-search-overlay-wrapper .site-search-module {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 200px !important;
    }
    
    /* Ensure search overlay wrapper is always visible on mobile */
    .mobile-hero-system .mobile-search-overlay-wrapper {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    
    .mobile-search-overlay-wrapper .site-search-module-inside {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
        height: auto !important;
        min-height: 150px !important;
        max-height: calc(100vh - 170px) !important;
        overflow: visible !important;
        overflow-y: visible !important;
        position: static !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08) !important;
        backdrop-filter: blur(0.3px) !important;
        -webkit-backdrop-filter: blur(0.3px) !important;
        background: rgba(255, 255, 255, 0.45) !important;
        padding: 25px 20px !important;
        box-sizing: border-box !important;
    }
    
    .mobile-search-overlay-wrapper .site-search-module form {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
    }
    
    /* ========================================
       PART 4: DISABLE OLD MOBILE SEARCH MODULES
       Hide old .page-section search modules (not new overlay)
       ======================================== */
    .page-section:has(.site-search-module:not(.mobile-hero-search-overlay)) {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* ========================================
       PART 5: DISABLE OLD CSS RULES
       Prevent old akkus.css and style.css from affecting new system
       ======================================== */
    /* Override old rules that hide .hero-slider on mobile */
    .mobile-hero-system .hero-slider {
        display: block !important;
        visibility: visible !important;
        height: calc(100vh - 20px) !important;
        min-height: 450px !important;
    }
    
    /* Override old height:300px rules */
    .mobile-hero-system .site-showcase {
        height: calc(100vh - 20px) !important;
        min-height: 450px !important;
    }
    
    /* ========================================
       PART 6: SLIDE IMAGE ALIGNMENT
       ======================================== */
    .mobile-hero-system .hero-slider .slides li {
        background-position: center top !important;
        background-size: cover !important;
    }
}

/* ============================================================
   DESKTOP HERO SYSTEM - ISOLATED CSS
   Only applies to .desktop-hero-system wrapper
   Mobile system completely disabled on desktop
   ============================================================ */
@media (min-width: 992px) {
    /* CRITICAL: Show desktop slider even if element has both classes */
    .desktop-hero-system.site-showcase {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .desktop-hero-system .hero-slider,
    .desktop-hero-system.site-showcase .hero-slider {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
    }
    
    /* Hide mobile system on desktop */
    .mobile-hero-system .hero-slider,
    .mobile-search-overlay-wrapper {
        display: none !important;
        visibility: hidden !important;
    }
    
    /* Ensure desktop search bar is visible - HIGHEST PRIORITY */
    .desktop-hero-system .search-luxury-wrapper,
    .desktop-hero-system .page-section .search-luxury-wrapper {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
        position: relative !important;
    }
    
    /* Protect the search module itself */
    .desktop-hero-system .search-luxury-wrapper .site-search-module {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Protect parent page-section that contains search bar */
    .desktop-hero-system.page-section {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        overflow: visible !important;
    }
}