/* ============================================================
   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) {
    /* Homepage only: hide in-flow desktop search block (below vitrin); overlay clone carries mobile search. */
    body.home .page-section.desktop-hero-system {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }
    /* ========================================
       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(75vh - 12px) !important;
        min-height: 330px !important;
        max-height: 520px !important;
        overflow: visible !important; /* CRITICAL: Changed to visible so overlay is not clipped */
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        /* CRITICAL: Explicitly disable sticky/fixed behavior */
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: translateZ(0) !important;
        -webkit-transform: translateZ(0) !important;
        z-index: 1 !important; /* Ensure stacking context */
    }
    
    .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(75vh - 12px) !important;
        min-height: 330px !important;
        max-height: 520px !important;
        z-index: 1 !important;
        overflow: hidden !important;
        transform: translateZ(0) !important;
        -webkit-transform: translateZ(0) !important;
    }
    
    /* FlexSlider theme defaults: white background + border — hides slide imagery */
    .mobile-hero-system .hero-slider.flexslider {
        background: transparent !important;
        background-color: transparent !important;
        border: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        margin-bottom: 0 !important;
    }
    .mobile-hero-system .hero-slider.flexslider .flex-viewport {
        background: transparent !important;
        background-color: transparent !important;
    }
    
    .mobile-hero-system .hero-slider .flex-viewport,
    .mobile-hero-system .hero-slider .slides {
        height: 100% !important;
        width: 100% !important;
        background: transparent !important;
        background-color: transparent !important;
    }
    
    /* Do NOT force display on all li — FlexSlider uses display:none on inactive slides; !important breaks slideshow */
    /* Do not set opacity or opacity transitions — FlexSlider fade controls opacity; !important caused ~100ms flash per slide. */
    .mobile-hero-system .hero-slider .slides li {
        visibility: visible !important;
        height: 100% !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        position: relative !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
       ======================================== */
    /* Slightly above centre so the module reads clearly on the hero (not clipped / not below slider). */
    /* Flexbox vertical center — avoid translateY(-50%) on WebKit (often paints overlay after first interaction). */
    .mobile-search-overlay-wrapper {
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        margin-top: 0 !important;
        transform: none !important;
        -webkit-transform: none !important;
        z-index: 25 !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        min-height: 0 !important;
        pointer-events: none !important;
    }
    
    .mobile-search-overlay-wrapper * {
        pointer-events: auto !important; /* Re-enable clicks on children */
    }
    
    /* Flat 5% tint only — no backdrop-filter (Safari first-paint / tap issues). */
    .mobile-search-overlay-wrapper .site-search-module.mobile-hero-search-overlay {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 200px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        background-color: rgba(255, 255, 255, 0.05) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border: none !important;
        border-radius: 18px !important;
        box-shadow: none !important;
    }
    
    .mobile-search-overlay-wrapper .site-search-module h3,
    .mobile-search-overlay-wrapper .site-search-module .col-md-3 h3 {
        margin: 5px 0 16px 0 !important;
        padding-top: 0 !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 - NEVER disappears */
    .mobile-hero-system .mobile-search-overlay-wrapper {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: none !important;
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        margin-top: 0 !important;
        transform: none !important;
        -webkit-transform: none !important;
        z-index: 25 !important;
    }
    
    /* CRITICAL: Prevent overlay from disappearing on scroll */
    .mobile-search-overlay-wrapper {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !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;
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
    
    .mobile-search-overlay-wrapper .site-search-module form {
        display: block !important;
        visibility: visible !important;
        width: 100% !important;
    }

    .mobile-search-overlay-wrapper select,
    .mobile-search-overlay-wrapper .bootstrap-select > .dropdown-toggle {
        opacity: 1 !important;
        visibility: visible !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(75vh - 12px) !important;
        min-height: 330px !important;
        max-height: 520px !important;
    }
    
    /* Override old height:300px rules */
    .mobile-hero-system .site-showcase {
        height: calc(75vh - 12px) !important;
        min-height: 330px !important;
        max-height: 520px !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;
    }
}