/**
 * Search Bar Navbar Fix
 * 
 * Fixes search bar positioning to prevent overlap with navbar
 * and ensures proper mobile dropdown behavior
 */

/* ==========================================================================
   Search Bar Container - Position Below Navbar
   ========================================================================== */

/* Fix for search bar that appears above map/property sections */
.booking-search-bar,
.booking-search-bar__container,
.property-map-section .booking-search-bar,
.property-map-section__container .booking-search-bar {
    margin-top: calc(var(--navbar-height, 56px) + 1rem) !important;
    position: relative !important;
    z-index: 9999 !important; /* Below navbar (10000) but above content */
}

/* Ensure search bar doesn't overlap navbar on mobile */
@media (max-width: 768px) {
    .booking-search-bar,
    .booking-search-bar__container,
    .property-map-section .booking-search-bar,
    .property-map-section__container .booking-search-bar {
        margin-top: calc(var(--navbar-height-mobile, 50px) + 1rem) !important;
    }
}

/* ==========================================================================
   Mobile Dropdown Fixes
   ========================================================================== */

/* Ensure dropdowns appear above content but below mobile menu */
.booking-search-bar__popover,
.booking-search-bar__destination-popover,
.booking-search-bar__date-popover,
.booking-search-bar__guests-popover,
.booking-destination-suggestions {
    z-index: 9998 !important; /* Above content, below navbar/mobile menu */
    position: fixed !important; /* Use fixed positioning for proper stacking */
}

/* Mobile menu should be above everything (including dropdowns) */
.navbar__mobile-menu,
.navbar__mobile-menu.show {
    z-index: 999999 !important;
}

/* Ensure mobile search overlay is above dropdowns */
.navbar__search-overlay {
    z-index: 999997 !important; /* Below mobile menu (999999) but above dropdowns */
}

.navbar__search-overlay-container {
    z-index: 999997 !important;
}

/* ==========================================================================
   Desktop Dropdown Positioning
   ========================================================================== */

@media (min-width: 769px) {
    .booking-search-bar__popover {
        z-index: 10001 !important; /* Above navbar (10000) but below mobile menu */
        position: absolute !important; /* Use absolute on desktop */
    }
}

/* ==========================================================================
   Mobile Specific Fixes
   ========================================================================== */

@media (max-width: 768px) {
    /* Ensure dropdowns are positioned relative to viewport, not scroll position */
    .booking-search-bar__popover[data-destination-popover],
    .booking-search-bar__popover[data-date-picker-dialog],
    .booking-search-bar__popover[data-guests-dialog] {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
    }
    
    /* Adjust top margin for mobile when dropdown is open */
    .booking-search-bar__field--active ~ .booking-search-bar__popover,
    .booking-search-bar__popover[aria-hidden="false"] {
        margin-top: calc(var(--navbar-height-mobile, 50px)) !important;
    }
}

/* ==========================================================================
   Property Map Section Specific Fixes
   ========================================================================== */

.property-map-section {
    padding-top: calc(var(--navbar-height, 56px) + 2rem) !important;
}

@media (max-width: 768px) {
    .property-map-section {
        padding-top: calc(var(--navbar-height-mobile, 50px) + 1.5rem) !important;
    }
}

/* Search bar within property map should have proper spacing */
.property-map-section__container > .booking-search-bar:first-child,
.property-map-section__header + .booking-search-bar {
    margin-top: 0 !important; /* Remove extra margin if it's the first element */
    margin-bottom: 2rem !important;
}