/* ========================================
 * RESPONSIVE.CSS - DISCOVER PAGE RESPONSIVE DESIGN
 * FILE: /css/renter/styles/discover/responsive.css
 * VERSION: v=20251002a
 * ========================================
 * 🎯 PURPOSE: Main responsive CSS for discover.html
 * 📱 COVERAGE: Mobile-first design (320px → 2560px+)
 * 🔧 FEATURES: CSS variables, breakpoints, responsive overrides
 * 📄 IMPORTED BY: discover.html (line 335)
 * 🚀 STATUS: ACTIVE - Single source of truth for responsive behavior
 * ======================================== */

/* ========================================
 * 1. CSS VARIABLES (CONSOLIDATED)
 * ========================================
 * All CSS custom properties in one place
 * ======================================== */
:root {
  /* ===== BASE DESIGN TOKENS ===== */
  
  /* Spacing Scale (Tailwind-inspired) - Use for systematic spacing */
  --space-0: 0;
  --space-px: 1px;
  --space-0-5: 0.125rem;   /* 2px */
  --space-1: 0.25rem;      /* 4px */
  --space-1-5: 0.375rem;   /* 6px */
  --space-2: 0.5rem;       /* 8px */
  --space-2-5: 0.625rem;   /* 10px */
  --space-3: 0.75rem;      /* 12px */
  --space-3-5: 0.875rem;   /* 14px */
  --space-4: 1rem;         /* 16px */
  --space-5: 1.25rem;      /* 20px */
  --space-6: 1.5rem;       /* 24px */
  --space-8: 2rem;         /* 32px */
  --space-10: 2.5rem;      /* 40px */
  --space-12: 3rem;        /* 48px */
  --space-16: 4rem;        /* 64px */
  --space-20: 5rem;        /* 80px */
  
  /* ===== SEMANTIC SPACING ===== */
  
  /* General purpose semantic spacing - Use for consistent design */
  --spacing-xs: var(--space-1);      /* Extra small: 4px */
  --spacing-sm: var(--space-2);      /* Small: 8px */
  --spacing-md: var(--space-4);      /* Medium: 16px */
  --spacing-lg: var(--space-6);      /* Large: 24px */
  --spacing-xl: var(--space-8);      /* Extra large: 32px */
  --spacing-2xl: var(--space-12);    /* 2X large: 48px */
  
  /* ===== COMPONENT-SPECIFIC SPACING ===== */
  
  /* Icon spacing - Use for consistent icon margins */
  --icon-margin: var(--space-2);           /* Standard icon margins: 8px */
  --dropdown-arrow-margin: var(--space-1-5); /* Dropdown arrows: 6px */
  
  /* Button spacing - Use for consistent button spacing */
  --button-margin: var(--space-3);         /* Button margins: 12px */
  --button-padding-x: var(--space-4);      /* Button horizontal padding: 16px */
  --button-padding-y: var(--space-2);      /* Button vertical padding: 8px */
  
  /* Card spacing - Use for consistent card layouts */
  --card-margin: var(--space-4);           /* Card margins: 16px */
  --card-padding: var(--space-4);          /* Card padding: 16px */
  
  /* Section spacing - Use for page layout consistency */
  --section-margin: var(--space-8);        /* Section margins: 32px */
  --section-padding: var(--space-6);       /* Section padding: 24px */
  
  /* ===== DISCOVER PAGE COMPONENTS ===== */
  
  /* Top bar field spacing (systematic, responsive-friendly) */
  --topbar-field-margin-base: var(--space-12);     /* 48px - base desktop */
  --topbar-field-margin-tablet: var(--space-20);   /* 80px - larger screens */
  --topbar-field-margin-desktop: 160px;            /* 160px - desktop (direct value for easier debugging) */
  
  /* Datetime field internal spacing (use for consistent datetime layout) */
  --datetime-icon-spacing: var(--space-3);         /* 12px - icon spacing */
  --datetime-text-spacing-base: var(--space-2);    /* 8px - default text spacing */
  --datetime-arrow-spacing-base: var(--space-3);   /* 12px - default arrow spacing */
}

/* ========================================
 * 2. UTILITY CLASSES (SEMANTIC)
 * ========================================
 * Semantic spacing utilities for consistent design
 * ======================================== */

/* Semantic margin utilities */
.m-xs { margin: var(--spacing-xs) !important; }
.m-sm { margin: var(--spacing-sm) !important; }
.m-md { margin: var(--spacing-md) !important; }
.m-lg { margin: var(--spacing-lg) !important; }
.m-xl { margin: var(--spacing-xl) !important; }
.m-2xl { margin: var(--spacing-2xl) !important; }

/* Horizontal margin utilities */
.mx-xs { margin-left: var(--spacing-xs) !important; margin-right: var(--spacing-xs) !important; }
.mx-sm { margin-left: var(--spacing-sm) !important; margin-right: var(--spacing-sm) !important; }
.mx-md { margin-left: var(--spacing-md) !important; margin-right: var(--spacing-md) !important; }
.mx-lg { margin-left: var(--spacing-lg) !important; margin-right: var(--spacing-lg) !important; }
.mx-xl { margin-left: var(--spacing-xl) !important; margin-right: var(--spacing-xl) !important; }
.mx-2xl { margin-left: var(--spacing-2xl) !important; margin-right: var(--spacing-2xl) !important; }

/* Left margin utilities */
.ml-xs { margin-left: var(--spacing-xs) !important; }
.ml-sm { margin-left: var(--spacing-sm) !important; }
.ml-md { margin-left: var(--spacing-md) !important; }
.ml-lg { margin-left: var(--spacing-lg) !important; }
.ml-xl { margin-left: var(--spacing-xl) !important; }
.ml-2xl { margin-left: var(--spacing-2xl) !important; }

/* Component-specific utility classes */
/* responsive.css - dropdown arrow margin utility */
.mx-dropdown-arrow { 
  margin-left: var(--dropdown-arrow-margin) !important; 
  margin-right: var(--dropdown-arrow-margin) !important; 
}

/* Mobile sizing transform for dropdown arrows (640px-768px) */
/* Small phone sizing - hide dropdown arrows to save space */
@media (max-width: 375px) {
  /* responsive.css - hide dropdown arrows on small phones */
  .mx-dropdown-arrow {
    display: none !important;
  }
}

/* Desktop transform for dropdown arrows (768px and up) */
@media (min-width: 768px) {
  .mx-dropdown-arrow {
    transform: translateX(15px) !important;
  }
}

.mx-button { margin-left: var(--button-margin) !important; margin-right: var(--button-margin) !important; }
.mx-card { margin-left: var(--card-margin) !important; margin-right: var(--card-margin) !important; }
.mx-icon { margin-left: var(--icon-margin) !important; margin-right: var(--icon-margin) !important; }

/* ========================================
 * 3. BASE RESPONSIVE BREAKPOINTS (MOBILE-FIRST)
 * ========================================
 * Organized in ascending order for mobile-first approach
 * ======================================== */

/* ========================================
 * DISCOVER PAGE RESPONSIVE LAYOUT
 * ======================================== */

/* Note: Support chat positioning is now handled in bottomsheet.css and support_chat.html 
   to prevent conflicts with discover page elements */

/* MOBILE: ≤520px - Ultra-compact layout */
@media (max-width: 520px) {
  /* Mobile: Topbar height and padding - FLEXIBLE HEIGHT TO FIT CONTENT */
  html body.discover-page .discover-top-bar,
  body.discover-page .discover-top-bar,
  .discover-top-bar {
    height: auto !important; /* Flexible height to accommodate content */
    min-height: 4rem !important; /* Minimum height for touch targets */
    max-height: none !important; /* Allow expansion for content */
    /* FIX: Avoid excessive safe-area padding on real devices that can hide content */
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    display: flex !important;
    align-items: stretch !important; /* CRITICAL: Use stretch to allow content to determine height */
    /* CRITICAL: Prevent horizontal overflow */
    max-width: 100vw !important;
    width: 100vw !important;
    overflow-x: hidden !important;
    overflow-y: visible !important; /* Allow vertical expansion for content */
    box-sizing: border-box !important;
    /* CRITICAL: Ensure touch events work properly without making the header
     * its own scroll container. Allow taps/clicks, but prevent vertical
     * scrolling gestures from scrolling the header contents.
     */
    pointer-events: auto !important;
    touch-action: pan-x !important; /* Allow horizontal gestures, block vertical scroll */
    overscroll-behavior-y: contain !important; /* Don't let header start a scroll chain */
  }

  /* Mobile: Hide any vertical scrollbar artifacts on the discover top bar itself
   * while still allowing its contents to be fully visible and interactive.
   */
  body.discover-page .discover-top-bar {
    -ms-overflow-style: none !important;    /* IE/Edge */
    scrollbar-width: none !important;       /* Firefox */
  }
  body.discover-page .discover-top-bar::-webkit-scrollbar {
    display: none !important;               /* WebKit (iOS Safari/Chrome) */
  }

  /* SAFETY: Account for iOS notch/safe area by offsetting the fixed header itself,
   * instead of inflating internal padding (which can hide content). This keeps the
   * entire top bar fully within the visible viewport on real phones.
   */
  html body.discover-page .discover-top-bar,
  body.discover-page .discover-top-bar {
    top: env(safe-area-inset-top, 0px) !important;
  }
  
  /* Mobile: Ensure all top bar child containers respect width constraints */
  html body.discover-page .discover-top-bar > *,
  body.discover-page .discover-top-bar > *,
  .discover-top-bar > * {
    max-width: 100% !important;
    overflow-x: hidden !important;
    /* CRITICAL: Use overflow:hidden to prevent scrollbar on touch mobile */
    /* The autocomplete dropdown escapes via position:fixed, so overflow:hidden is safe */
    overflow-y: hidden !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    pointer-events: auto !important; /* Ensure interactive elements receive touch events */
    /* Hide any scrollbars that might appear */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
  }
  
  /* Hide webkit scrollbars on top bar children */
  html body.discover-page .discover-top-bar > *::-webkit-scrollbar,
  body.discover-page .discover-top-bar > *::-webkit-scrollbar,
  .discover-top-bar > *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  
  /* Mobile: Ensure interactive elements in top bar are touchable */
  html body.discover-page .discover-top-bar button,
  html body.discover-page .discover-top-bar a,
  html body.discover-page .discover-top-bar input,
  html body.discover-page .discover-top-bar .search-display-container,
  html body.discover-page .discover-top-bar .datetime-display-container,
  body.discover-page .discover-top-bar button,
  body.discover-page .discover-top-bar a,
  body.discover-page .discover-top-bar input,
  body.discover-page .discover-top-bar .search-display-container,
  body.discover-page .discover-top-bar .datetime-display-container,
  .discover-top-bar button,
  .discover-top-bar a,
  .discover-top-bar input,
  .discover-top-bar .search-display-container,
  .discover-top-bar .datetime-display-container {
    position: relative !important;
    z-index: 10 !important; /* Well above any background layers */
    pointer-events: auto !important;
    touch-action: manipulation !important; /* Optimize touch interactions */
    -webkit-tap-highlight-color: rgba(59, 130, 246, 0.2) !important; /* Visual feedback on touch */
    isolation: auto !important; /* Don't create new stacking context */
  }

  /* Mobile: Container sizing */
  body.discover-page .discover-top-bar .search-field-container {
    flex: 0 0 60px !important;
    width: 60px !important;
    max-width: 60px !important;
    min-width: 60px !important;
  }

  body.discover-page .discover-top-bar .datetime-field-container {
    flex: 0 0 100px !important;
    width: 100px !important;
    max-width: 100px !important;
    min-width: 100px !important;
  }

  /* Mobile: Override Tailwind max-width classes */
  body.discover-page .discover-top-bar .max-w-\[140px\],
  body.discover-page .discover-top-bar .max-w-\[180px\],
  body.discover-page .discover-top-bar .max-w-\[220px\] {
    max-width: 100px !important;
  }

  /* Mobile: Datetime container sizing - EXCEPT for 520px specific override in search.css */
  .datetime-display-container:not(.discover-top-bar .datetime-display-container) {
    min-height: 2.5rem !important;
    padding: 0.375rem 0.25rem !important;
    width: 120% !important;
    max-width: 130% !important;
  }
  
  /* OVERRIDE DISABLED: Let search.css handle 520px specific datetime container styling */
  /* The specific 520px transform and width rules are handled in search.css */

  /* Mobile: Search container sizing - FLEXIBLE HEIGHT */
  .search-display-container {
    min-height: 2.25rem !important;
    max-height: none !important; /* Allow expansion for content */
    height: auto !important; /* Flexible height to fit content */
    padding: 0.25rem !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-y: visible !important; /* Allow vertical expansion */
  }

  /* Mobile: Text sizing */
  .datetime-display-container .text-xs {
    font-size: 0.5rem !important; /* 8px */
    line-height: 1 !important;
  }

  .datetime-display-container #datetime-display-value {
    font-size: 0.625rem !important; /* 10px */
    line-height: 1.1 !important;
  }

  /* Mobile: Icon sizing */
  .datetime-display-container .w-6.h-6 {
    width: 1rem !important; /* 16px */
    height: 1rem !important;
  }

  .datetime-display-container .w-8.h-8 {
    width: 1.25rem !important; /* 20px */
    height: 1.25rem !important;
  }

  /* Mobile: Hide dropdown arrows to save space */
  .datetime-display-container .flex-shrink-0:last-child,
  .search-display-container .flex-shrink-0:last-child {
    display: none !important;
  }

  /* Mobile: Tighter gaps */
  .discover-top-bar .flex.items-center.gap-2 {
    gap: 0.125rem !important;
  }

  /* Mobile: Content wrapper layout */
  .datetime-display-container > div {
    min-height: 1.75rem !important;
    align-items: center !important;
    display: flex !important;
    width: 100% !important;
    overflow: visible !important;
  }

  /* Mobile: Text content container */
  .datetime-display-container .flex-1 {
    margin-left: 0.5rem !important; /* Direct value for easier debugging */
    margin-right: 0.25rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    min-width: 0 !important;
    flex-grow: 1 !important;
    overflow: hidden !important;
  }

  /* Mobile: Text handling */
  .datetime-display-container .flex-1 .text-xs,
  .datetime-display-container .flex-1 #datetime-display-value {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    text-align: left !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    line-height: 1.2 !important;
  }

  /* Mobile: Dropdown arrow spacing */
  .datetime-display-container .flex-shrink-0:last-child {
    margin-left: 0.75rem !important; /* Direct value for easier debugging */
  }

  /* Mobile: Reset hardcoded margins */
  .datetime-display-container .md\:rounded-xl,
  .datetime-display-container .bg-gradient-to-br {
    margin-left: -0.25 !important;
  }

}


/* TABLET RANGE: 520px-767px - Simplified layout (extended to prevent 768px transition gap) */
@media (min-width: 520px) and (max-width: 767px) {
  /* Narrow tablet: Topbar flexible height */
  html body.discover-page .discover-top-bar,
  body.discover-page .discover-top-bar,
  .discover-top-bar {
    height: auto !important; /* Flexible height to fit content */
    min-height: 4rem !important; /* Minimum height for content */
    max-height: none !important; /* Allow expansion */
    overflow-y: visible !important; /* Allow vertical expansion */
    display: flex !important;
    align-items: center !important;
  }
  
  /* Search field sizing */
  .discover-top-bar .search-field-container {
    width: 80px !important;
    max-width: 80px !important;
  }

  /* Text sizing for compact display */
  .datetime-display-container .text-xs,
  .datetime-display-container #datetime-display-value {
    font-size: 0.625rem !important;
    line-height: 1.1 !important;
  }

  /* Hide datetime labels on tablet */
  .datetime-display-container .text-xs.uppercase {
    display: none !important;
  }

  /* Compact tablet: Hamburger menu positioning */
  #discover-menu-button {
    transform: translateX(1.1rem) !important;
  }

  .dropdown-trigger.discover-menu-trigger {
    margin-left: 2rem !important;
  }

  body.discover-page .discover-top-bar .dropdown-trigger.discover-menu-trigger {
    margin-left: 2rem !important;
  }

  html body.discover-page .discover-top-bar button.dropdown-trigger.discover-menu-trigger {
    margin-left: 2rem !important;
  }
}

/* WIDE TABLET: 768px-1023px - Enhanced layout */
@media (min-width: 768px) and (max-width: 1023px) {
  /* Wide tablet: Topbar flexible height */
  html body.discover-page .discover-top-bar,
  body.discover-page .discover-top-bar,
  .discover-top-bar {
    height: auto !important; /* Flexible height to fit content */
    min-height: 4.5rem !important; /* Minimum height for content */
    max-height: none !important; /* Allow expansion */
    overflow-y: visible !important; /* Allow vertical expansion */
    display: flex !important;
    align-items: center !important;
  }
  
  /* Wide tablet: Field sizing */
  body.discover-page .discover-top-bar .max-w-\[120px\] {
    max-width: 180px !important;
  }

  body.discover-page .discover-top-bar .max-w-\[140px\] {
    max-width: 270px !important;
  }

  /* REMOVED: Complex datetime container sizing rules that conflict with good styling */

  body.discover-page .discover-top-bar svg.mx-dropdown-arrow {
    margin-left: 6px !important;     margin-right: 6px !important;   }

  /* Wide tablet: Dark mode support */
  .dark body.discover-page .discover-top-bar,
  .dark .discover-top-bar {
    background: #1f2937 !important;
  }
}

/* ==============================================
 * VERTICAL CENTERING - ABOVE 768px
 * ============================================== */

/* Fix vertical centering for screens above 768px where fields sit at bottom */
@media (min-width: 769px) {
  /* Ensure top bar has proper vertical centering - FLEXIBLE HEIGHT */
  html body.discover-page .discover-top-bar,
  body.discover-page .discover-top-bar,
  .discover-top-bar {
    display: flex !important;
    align-items: flex-start !important; /* CRITICAL: Use flex-start to allow content to expand */
    justify-content: space-between !important;
    min-height: 4.5rem !important; /* Reduced from 5rem to allow flexibility */
    height: auto !important; /* Flexible height to fit content */
    max-height: none !important; /* Allow expansion */
    padding: 1rem 1.5rem !important;
    overflow-y: visible !important; /* Allow vertical expansion */
  }
  
  /* Center entry field containers vertically within available space */
  html body.discover-page .discover-top-bar .datetime-field-container,
  html body.discover-page .discover-top-bar .search-field-container,
  body.discover-page .discover-top-bar .datetime-field-container,
  body.discover-page .discover-top-bar .search-field-container {
    align-self: center !important; /* Center individually */
  }
}

/* DESKTOP: ≥1024px - Full desktop layout */
@media (min-width: 1024px) {
  /* Desktop: Topbar styling */
  body.discover-page .discover-top-bar,
  .discover-top-bar {
    padding-top: 1rem !important;
    padding-bottom: 0.5rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: var(--z-header) !important;
    /* Background controlled by topbar.css - removed duplicate */
    border-bottom: none !important;
    /* Shadow controlled by topbar.css - removed duplicate */
  }

  /* Desktop: Main content padding */
  main[role="main"] {
    padding-top: 6rem;
    height: 100vh;
    min-height: 100vh;
    box-sizing: border-box;
  }

  /* Desktop: Sort dropdown sizing */
  #sort-dropdown-desktop {
    width: 16rem !important;
    min-width: 16rem !important;
  }

  /* Desktop: Dark mode support */
  .dark body.discover-page .discover-top-bar,
  .dark .discover-top-bar {
    background: #1f2937 !important;
    border-bottom: none !important;
  }
}

/* ========================================
 * 4. HEIGHT-BASED RESPONSIVE OPTIMIZATIONS
 * ========================================
 * Grouped height-based media queries
 * ======================================== */

/* Ultra-small height screens (≤400px) */
@media (max-width: 1023px) and (max-height: 400px) {
  html body.discover-page .discover-top-bar,
  body.discover-page .discover-top-bar,
  .discover-top-bar {
    height: 3.5rem !important;
    min-height: 3.5rem !important;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  .datetime-display-container {
    min-height: 2.25rem !important;
    padding: 0.375rem 0.5rem !important;
  }

  body.discover-page #map-container {
    top: 3.5rem !important;
    height: calc(100vh - 3.5rem) !important;
  }
}

/* Very small height screens (401px-500px) */
@media (max-width: 1023px) and (min-height: 401px) and (max-height: 500px) {
  html body.discover-page .discover-top-bar,
  body.discover-page .discover-top-bar,
  .discover-top-bar {
    height: 4rem !important;
    min-height: 4rem !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  body.discover-page #map-container {
    top: 4rem !important;
    height: calc(100vh - 4rem) !important;
  }
}

/* ========================================
 * 5. COMPONENT-SPECIFIC LOGIC
 * ========================================
 * Consolidated component logic with breakpoint overrides
 * ======================================== */

/* Container Queries for Dynamic Datetime Spacing */
/* Container query spacing handled with direct values for easier debugging */

/* Container query spacing handled with direct values for easier debugging */

/* Container query spacing handled with direct values for easier debugging */

/* Container query spacing handled with direct values for easier debugging */

/* Autocomplete Logic - Consolidated */
@media (min-width: 768px) {
  #unified-autocomplete {
    box-sizing: border-box !important;
  }

  #unified-autocomplete .autocomplete-input-container,
  #unified-autocomplete .autocomplete-search-section,
  #unified-autocomplete .autocomplete-suggestions,
  #unified-autocomplete > div {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #unified-autocomplete .dropdown-search-input {
    width: 100% !important;
    flex: 1 !important;
    min-width: 0 !important;
    font-size: 16px !important; /* CRITICAL: Prevent iOS Safari auto-zoom */
  }
}

/* Search Button Logic - Consolidated */
@media (min-width: 768px) {
  .search-button-display {
    margin-right: 0.050rem !important;
    min-width: auto !important;
    max-width: none !important;
    width: auto !important;
    overflow: visible !important;
    white-space: nowrap !important;
    position: relative !important;
    z-index: var(--z-elevated) !important;
  }

  /* Comprehensive responsive rules for search placeholder spans - Tablet/Desktop (768px-1279px) */
  /* Force hide mobile spans with maximum specificity */
  html body.discover-page .search-button-display .inline.lg\:hidden,
  body.discover-page .search-button-display .inline.lg\:hidden,
  .discover-page .search-button-display .inline.lg\:hidden,
  .search-button-display .inline.lg\:hidden {
    display: none !important; /* Hide mobile spans on tablet/desktop */
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* REMOVED: lg:inline tablet spans - no longer using "Search parking" */
  
  /* Show XL spans on all desktop sizes (768px+) - "Search for parking locations" */
  html body.discover-page .search-button-display .hidden.xl\:inline,
  body.discover-page .search-button-display .hidden.xl\:inline,
  .discover-page .search-button-display .hidden.xl\:inline,
  .search-button-display .hidden.xl\:inline {
    display: inline !important; /* Show xl:inline spans on all desktop sizes */
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Hide lg:inline spans on all desktop sizes */
  html body.discover-page .search-button-display .hidden.lg\:inline.xl\:hidden,
  body.discover-page .search-button-display .hidden.lg\:inline.xl\:hidden,
  .discover-page .search-button-display .hidden.lg\:inline.xl\:hidden,
  .search-button-display .hidden.lg\:inline.xl\:hidden {
    display: none !important; /* Always hide "Search parking" text */
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Always hidden spans stay hidden */
  html body.discover-page .search-button-display .hidden:not(.lg\:inline):not(.xl\:inline),
  body.discover-page .search-button-display .hidden:not(.lg\:inline):not(.xl\:inline),
  .search-button-display .hidden:not(.lg\:inline):not(.xl\:inline) {
    display: none !important; /* Always hidden spans stay hidden */
    visibility: hidden !important;
    opacity: 0 !important;
  }
}

/* REMOVED: XL-specific rules - xl:inline now shows on all desktop sizes (768px+) */

/* Mobile Screens (below 768px) - Show inline lg:hidden spans */
@media (max-width: 767px) {
  /* Force show mobile spans with maximum specificity */
  html body.discover-page .search-button-display .inline.lg\:hidden,
  body.discover-page .search-button-display .inline.lg\:hidden,
  .discover-page .search-button-display .inline.lg\:hidden,
  .search-button-display .inline.lg\:hidden {
    display: inline !important; /* Show inline lg:hidden spans on mobile */
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Force hide desktop spans with maximum specificity */
  html body.discover-page .search-button-display .hidden.lg\:inline,
  html body.discover-page .search-button-display .hidden.xl\:inline,
  body.discover-page .search-button-display .hidden.lg\:inline,
  body.discover-page .search-button-display .hidden.xl\:inline,
  .discover-page .search-button-display .hidden.lg\:inline,
  .discover-page .search-button-display .hidden.xl\:inline,
  .search-button-display .hidden.lg\:inline,
  .search-button-display .hidden.xl\:inline {
    display: none !important; /* Hide lg:inline and xl:inline spans on mobile */
    visibility: hidden !important;
    opacity: 0 !important;
  }

  /* Always hidden spans stay hidden */
  html body.discover-page .search-button-display .hidden:not(.lg\:inline):not(.xl\:inline),
  body.discover-page .search-button-display .hidden:not(.lg\:inline):not(.xl\:inline),
  .search-button-display .hidden:not(.lg\:inline):not(.xl\:inline) {
    display: none !important; /* Always hidden spans stay hidden */
    visibility: hidden !important;
    opacity: 0 !important;
  }
}

/* Mobile Autocomplete Positioning */
/* REMOVED: Conflicting width: 100vw rule - handled by listings.css with proper calc-based widths */
/* The narrower width rules in listings.css (calc(100vw - 2rem) etc.) prevent horizontal overflow */

/* Dropdown Menu Sizing */
@media (max-width: 520px) {
  .dropdown-menu {
    min-width: 180px !important;
    max-width: calc(100vw - 1rem) !important;
    font-size: 0.875rem !important;
  }
}

@media (max-width: 1023px) {
  .dropdown-menu {
    min-width: 180px !important;
    max-width: calc(100vw - 2rem) !important;
    font-size: 0.875rem !important;
  }
}

/* Satellite button removed - tablet override no longer needed */

/* ========================================
 * 6. LAYOUT & POSITIONING
 * ========================================
 * Map and main content positioning
 * ======================================== */

@media (max-width: 1023px) {
  /* Mobile/Tablet: Main element layout */
  html body.discover-page main,
  html body.discover-page main[role="main"],
  body.discover-page main.flex-1,
  body.discover-page main.flex-grow,
  html body.discover-page main.flex-1.flex,
  html body.discover-page main.flex-1.flex.overflow-hidden {
    min-height: 100vh !important;
    height: 100vh !important;
    display: flex !important;
    flex: 1 !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden !important;
    padding-top: 0 !important;
    padding-top: 0rem !important;
    margin-top: 0 !important;
  }

  /* Mobile/Tablet: Map panel layout */
  html body.discover-page #map-panel,
  html body.discover-page section#map-panel {
    height: 100% !important;
    width: 100% !important;
    display: block !important;
    flex: 1 !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: 300px !important;
  }

  /* Mobile/Tablet: Map container positioning */
  body.discover-page #map-container {
    top: 4.5rem !important;
    height: calc(100vh - 4.5rem) !important;
  }

  /* Mobile/Tablet: Spot detail view rules moved to map.css for single source of truth */
  
  /* iOS 13/14 Safari Compatibility: Ensure map and listings are visible */
  /* These rules override any :has() selectors that fail on iOS 13 */
  body.discover-page #map-panel,
  body.discover-page #map-container {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: 4.5rem !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: calc(100vh - 4.5rem) !important;
    z-index: 1 !important;
  }
  
  /* Ensure bottom sheet is visible */
  #listings-sheet {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 100 !important;
  }
  
  /* Ensure mobile listings container is visible */
  #listings-sheet #listings-content-mobile {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 1 !important;
    overflow-y: auto !important;
    min-height: 200px !important;
  }
}

/* Component Visibility Rules */
@media (max-width: 1146px) {
  .amenity-chips-container,
  .amenity-chip,
  div.amenity-chips-container,
  .discover-top-bar .amenity-chips-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

@media (max-width: 1023px) {
  #filters-bar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    height: 0 !important;
    overflow: hidden !important;
  }
}

/* ========================================
 * 7. ANIMATIONS & VISUAL EFFECTS
 * ========================================
 * Map pin animations and visual feedback
 * ======================================== */

@keyframes marker-bounce {
  0% { transform: translateY(0) scale(1); }
  25% { transform: translateY(-8px) scale(1.1); }
  50% { transform: translateY(-12px) scale(1.15); }
  75% { transform: translateY(-4px) scale(1.05); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes marker-pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.7);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.3);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
  }
}

.marker-bounce { animation: marker-bounce 0.6s ease-out; }
.marker-pulse { animation: marker-pulse 1s ease-in-out infinite; }
.marker-selected {
  transform: scale(1.1);
  z-index: var(--z-dropdown) !important;
  position: relative;
}

.marker-selected img,
.marker-selected canvas {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
  border-radius: 8px;
  outline: 3px solid #1d4ed8 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px #1d4ed8, 0 0 12px rgba(59, 130, 246, 0.4) !important;
}

/* ========================================
 * 8. ACCESSIBILITY & INTERACTION
 * ========================================
 * Touch targets and component interaction
 * ======================================== */

/* Touch target sizing */
button,
#search-input,
#amenities-popup-trigger-desktop,
.amenity-chip,
#desktop-sort-select,
#mobile-sort-select,
#amenities-toggle {
  min-height: auto;
  min-width: auto;
}

/* Navigation and button containers */
.discover-top-bar,
.discover-top-bar * {
  pointer-events: auto;
}

/* Hamburger button positioning */
#discover-menu-button {
  isolation: isolate;
  transform: translateZ(0);
}

/* Search input line height */
#search-input {
  line-height: 1;
}

/* Amenities popup triggers */
/* CRITICAL: Desktop button styling is handled in listings.css - don't override here */
@media (min-width: 1024px) {
  #amenities-popup-trigger-desktop {
    position: relative !important;
    z-index: var(--z-button-elevated) !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    /* Background and border handled by listings.css */
    outline: none !important;
    user-select: none !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* CRITICAL: Allow pointer events on desktop button children so clicks work */
@media (min-width: 1024px) {
  #amenities-popup-trigger-desktop * {
    pointer-events: auto !important; /* Allow clicks to work */
  }
}

#amenities-popup-trigger-mobile {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: var(--z-header) !important;
}

#amenities-popup-trigger-mobile * {
  pointer-events: auto;
}

/* Sort toggle visibility */
#sort-toggle-mobile {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  position: relative !important;
}

#sort-toggle-mobile .relative {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Filters bar positioning */
#filters-bar {
  position: fixed;
  z-index: var(--z-header);
  height: auto;
  min-height: 3rem;
}

/* ========================================
 * 9. DARK MODE OVERRIDES
 * ========================================
 * Force dark mode colors for computed styles
 * ======================================== */

body.dark *[style*="color:rgb(17,24,39)"],
.dark *[style*="color:rgb(17,24,39)"] {
  color: #ffffff !important;
}

body.dark *[style*="color:rgb(55,65,81)"],
.dark *[style*="color:rgb(55,65,81)"] {
  color: #ffffff !important;
}

body.dark *[style*="color:rgb(31,41,55)"],
.dark *[style*="color:rgb(31,41,55)"] {
  color: #ffffff !important;
}

/* CRITICAL OVERRIDE: Force remove padding-top on main element for mobile/tablet */
@media (max-width: 1023px) {
  html body.discover-page main,
  html body.discover-page main[role="main"],
  body.discover-page main,
  body.discover-page main.flex-1,
  body.discover-page main.flex-grow,
  html body.discover-page main.flex-1.flex,
  html body.discover-page main.flex-1.flex.overflow-hidden,
  html body.discover-page main.flex-1.flex.overflow-hidden.min-h-0,
  html body.discover-page .h-screen.flex.flex-col main,
  html body.discover-page .h-screen.flex.flex-col.overflow-hidden main,
  body.discover-page .h-screen.flex.flex-col main,
  body.discover-page .h-screen.flex.flex-col.overflow-hidden main {
    padding-top: 0 !important;
    padding-top: 0rem !important;
    padding-top: 0px !important;
  }
  
  /* Also remove padding from parent containers that might be creating the visual gap */
  html body.discover-page .h-screen.flex.flex-col,
  html body.discover-page .h-screen.flex.flex-col.overflow-hidden,
  body.discover-page .h-screen.flex.flex-col,
  body.discover-page .h-screen.flex.flex-col.overflow-hidden {
    padding-top: 0 !important;
  }
}