/* ========================================
 * TOPBAR.CSS - DISCOVER PAGE TOP BAR STYLES
 * FILE: /css/renter/styles/discover/components/topbar.css
 * VERSION: v=20251001g
 * ======================================== */
/* 
 * 🎯 PURPOSE: Top bar layout and controls
 * 📱 COVERAGE: Desktop + mobile responsive rules
 * 🔧 FEATURES: Map controls and responsive sizing
 * 📄 IMPORTED BY: discover.html (line 332)
 * 🚀 STATUS: ACTIVE
 */
/* ENHANCED: Sticky top bar with filter count and reset */
.discover-top-bar {
  z-index: var(--z-topbar, 50);
  background: rgba(255, 255, 255, 0.98) !important; /* Single consolidated background */
  border-bottom: none; /* Remove the unwanted line */
  height: auto !important; /* Flexible height to accommodate content */
  min-height: 4rem !important; /* Minimum height for touch targets and content */
  max-height: none !important; /* Allow expansion for varying content */
  position: sticky !important; /* Make it sticky */
  top: 0 !important;
  /* REMOVED: backdrop-filter - creates stacking context that blocks child interactions on mobile */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important; /* Reduced shadow to prevent duplicate appearance */
  transition: all 0.3s ease !important; /* Smooth transitions */
  display: flex !important; /* Ensure flexbox layout */
  align-items: stretch !important; /* CRITICAL: Use stretch to allow content to determine height */
  overflow-y: visible !important; /* Allow vertical expansion */
  overflow-x: visible !important; /* Allow horizontal expansion for dropdowns */
  /* CRITICAL: Prevent backdrop-filter from creating blocking stacking context */
  isolation: auto !important;
  contain: none !important;
}

/* CRITICAL: Inner flex container must also allow expansion */
.discover-top-bar .flex.items-center.justify-between.w-full {
  display: flex !important;
  align-items: flex-start !important; /* CRITICAL: Use flex-start to allow vertical expansion */
  min-height: 100% !important; /* Take full height of parent */
  height: auto !important; /* CRITICAL: Allow container to expand beyond parent */
  max-height: none !important; /* Remove height constraints */
  overflow-y: visible !important; /* Allow vertical expansion */
  overflow-x: visible !important; /* Allow horizontal expansion */
  /* CRITICAL: Ensure container doesn't block child interactions */
  position: relative !important;
  z-index: 1 !important;
  pointer-events: auto !important;
  isolation: auto !important;
}

/* ENHANCED: Filter count indicator */
.filter-count-indicator {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 20px !important;
  height: 20px !important;
  background: #ef4444 !important; /* Red background for visibility */
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  margin-left: 0.25rem !important;
  padding: 0 0.25rem !important;
  line-height: 1 !important;
}

/* ENHANCED: Clear filters button */
.clear-filters-btn {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.25rem 0.5rem !important;
  background: transparent !important;
  color: #6b7280 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  margin-left: 0.5rem !important;
}

.clear-filters-btn:hover {
  background: #f3f4f6 !important;
  color: #374151 !important;
  border-color: #9ca3af !important;
}

/* CRITICAL: Desktop top bar anti-clipping override - MAXIMUM SPECIFICITY */
@media (min-width: 1024px) {
  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 */
    padding-top: 1rem !important;
    padding-bottom: 0.75rem !important; /* Increased bottom padding for content */
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    overflow-x: visible !important; /* Allow horizontal overflow for dropdowns */
    overflow-y: visible !important; /* Allow vertical expansion for content */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: var(--z-dropdown) !important; /* Very high z-index */
    background: #ffffff !important;
    border-bottom: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    display: flex !important; /* Ensure flexbox layout */
    align-items: flex-start !important; /* CRITICAL: Use flex-start to allow content to expand vertically */
    /* ANTI-CLIPPING PROPERTIES */
    contain: none !important;
    clip: auto !important;
    clip-path: none !important;
    -webkit-clip-path: none !important;
    transform: none !important;
    will-change: auto !important;
    isolation: auto !important;
  }
  
  /* CRITICAL: Center individual items vertically within their own space */
  .discover-top-bar .flex.items-center.justify-between.w-full {
    align-items: flex-start !important; /* Allow children to expand */
  }
  
  /* Center entry field containers vertically within available space */
  .discover-top-bar .datetime-field-container,
  .discover-top-bar .search-field-container {
    align-self: center !important; /* Center individually */
  }
}
/* CONSOLIDATED: Dark mode styling - applies to all breakpoints */
.dark .discover-top-bar {
  background: rgba(31, 41, 55, 0.98) !important; /* Consistent with light mode transparency */
  border-bottom: none !important;
}

/* Dark mode desktop styling */
/* Desktop layout */
/**
 * FILTER CHIPS
 * ============
 * Horizontal scrolling container for filter chips
 * Hidden scrollbars for clean appearance
 */
.amenity-chips-container {
  /* Positioning & Layout */
  position: relative;
  z-index: var(--z-search);

  /* Scrolling Behavior */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  /* Hide Scrollbars - Cross Browser */
  scrollbar-width: none;           /* Firefox */
  -ms-overflow-style: none;        /* Internet Explorer 10+ */
}
/* Hide scrollbars in WebKit browsers */
.amenity-chips-container::-webkit-scrollbar {
  display: none;
}
/* Ensure all scrollbar elements are hidden */
.amenity-chips-container::-webkit-scrollbar-track,
.amenity-chips-container::-webkit-scrollbar-thumb,
.amenity-chips-container::-webkit-scrollbar-corner {
  display: none;
  width: 0;
  height: 0;
  background: transparent;
}
/* Unified autocomplete dropdown styling - ESCAPE ALL CONSTRAINTS */
#unified-autocomplete {
  /* CRITICAL: Complete container escape */
  position: fixed !important; /* Fixed to escape all stacking contexts and container bounds */
  /* top and left will be set by JavaScript - don't override! */
  /* width will be set by JavaScript - don't override with auto! */
  margin: 0 !important; /* Remove all margins */
  padding: 0 !important; /* Remove any inherited padding */

  /* Visual styling */
  background: var(--white) !important;
  border: var(--border-light) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-dropdown) !important;

  /* Size constraints */
  max-height: 20rem !important;
  height: auto !important; /* CRITICAL: Allow container to shrink when items are hidden */
  min-height: auto !important; /* CRITICAL: Remove minimum height constraint */
  min-width: 200px !important; /* Minimum usable width */

  /* Overflow behavior - CRITICAL: Prevent horizontal scrollbar */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  box-sizing: border-box !important;

  /* Z-index and stacking - MAXIMUM VALUE TO ENSURE VISIBILITY */
  z-index: var(--z-dropdown-menu) !important; /* Use standardized dropdown z-index */
  display: none !important;

  /* CRITICAL: Force stacking context above Google Maps */
  isolation: isolate !important;
  will-change: auto !important; /* Let JavaScript control transforms */

  /* ESCAPE CONTAINER CONSTRAINTS */
  right: auto !important;
  bottom: auto !important;
}

/* Desktop: Size dropdown to match search field but allow container escape */
@media (min-width: 1024px) {
  #unified-autocomplete {
    /* Width will be set by JavaScript to match search field exactly */
    max-width: none !important;
    min-width: none !important;
    /* width will be set by JavaScript with !important inline styles */
    box-sizing: border-box !important; /* Ensure padding doesn't expand width */
    overflow-y: auto !important; /* Allow vertical scrolling */
    overflow-x: hidden !important; /* CRITICAL: Prevent horizontal scrollbar */
  }

  /* Ensure dropdown items fit within constrained width */
  #unified-autocomplete .pac-item,
  #unified-autocomplete .pac-container,
  #unified-autocomplete > div,
  #unified-autocomplete li,
  #unified-autocomplete button {
    max-width: 100% !important;
    width: 100% !important; /* Force child elements to respect container width */
    box-sizing: border-box !important;
    overflow-x: hidden !important; /* Prevent horizontal overflow */
    overflow-y: visible !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Ensure all parent containers allow dropdown to escape on desktop */
  body.discover-page .flex-shrink-0.fixed,
  body.discover-page .flex.flex-col.gap-2.w-full,
  body.discover-page .max-w-md.relative {
    overflow: visible !important;
  }
}

/* Mobile/Tablet: Allow JavaScript to control width, with viewport constraints */
/* NOTE: Specific breakpoints in listings.css override these general rules */
@media (max-width: 1023px) {
  #unified-autocomplete {
    /* These are fallback values - specific breakpoints in listings.css take precedence */
    max-width: calc(100vw - 2rem) !important; /* Consistent with listings.css margin calculations */
    min-width: 200px !important; /* Minimum usable width */
    width: auto !important; /* Allow JavaScript to set exact width */
    box-sizing: border-box !important; /* Ensure padding doesn't expand width */
  }

  /* Ensure mobile containers allow dropdown to escape */
  body.discover-page .flex-shrink-0.fixed,
  body.discover-page .flex.flex-col.gap-2.w-full,
  body.discover-page .max-w-md.relative {
    overflow: visible !important;
  }

  /* Ensure dropdown content respects width constraints on mobile/tablet */
  #unified-autocomplete .pac-item,
  #unified-autocomplete .pac-container,
  #unified-autocomplete > div,
  #unified-autocomplete li,
  #unified-autocomplete button {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* FORCE dropdown width to match input - override Google Places API */
  #unified-autocomplete {
    width: var(--dropdown-width, auto) !important;
    min-width: var(--dropdown-width, 200px) !important;
    max-width: var(--dropdown-width, calc(100vw - 2rem)) !important; /* Consistent with listings.css */
  }

/* Override any Google Places API width settings */
.pac-container,
.pac-container .pac-item {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
}

.pac-container {
  width: var(--dropdown-width, 200px) !important;
  min-width: var(--dropdown-width, 200px) !important;
  max-width: var(--dropdown-width, calc(100vw - 2rem)) !important; /* Consistent with listings.css */
  box-sizing: border-box !important;
}

.pac-container .pac-item {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
}

/* CONSOLIDATED: Force dropdown above Google Maps with maximum z-index */
body.discover-page #unified-autocomplete,
/* EMERGENCY OVERRIDE: If dropdown is still clipped, force body-level attachment */
body.discover-page {
  /* Allow dropdown to render at body level */
  position: relative !important;
  overflow: visible !important;
  contain: none !important;
}
/* NUCLEAR OPTION: Force dropdown to render at document level */
html {
  overflow: visible !important;
}
/* Create a new stacking context at the root level for the dropdown */
/* Ensure dropdown can render outside ALL containers */
#unified-autocomplete[style*="display: block"],
#unified-autocomplete:not(.hidden) {
  display: block !important;
  position: fixed !important;
  z-index: var(--z-dropdown-menu) !important; /* Use standardized dropdown z-index */
  contain: none !important;
  clip: auto !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}
/* Ensure all dropdown content inherits the high z-index */
#unified-autocomplete .pac-item,
#unified-autocomplete .pac-container,
#unified-autocomplete > div,
#unified-autocomplete li,
#unified-autocomplete * {
  z-index: inherit !important;
  position: relative !important;
}
.dark #unified-autocomplete {
  background: #262626 !important;
  border-color: #525252 !important;
  color: #e5e7eb !important;
}
/* ULTIMATE ESCAPE: Attach to viewport, not container */
#unified-autocomplete {
  position: fixed !important;
  /* top and left will be overridden by JavaScript */

  /* Remove ANY possible clipping */
  max-width: none !important;
  max-height: 90vh !important;
  height: auto !important; /* CRITICAL: Allow container to shrink when items are hidden */
  min-height: auto !important; /* CRITICAL: Remove minimum height constraint */
  /* width will be set by JavaScript - don't override! */

  /* Performance optimizations */
  backface-visibility: hidden !important;
}

/* Force dropdown to be visible when needed */
#unified-autocomplete[style*="display: block"],
#unified-autocomplete:not(.hidden) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#unified-autocomplete[style*="display: block"],
/* ========================================
 * AUTOCOMPLETE/SUGGESTIONS LAYER USAGE
 * ========================================
 * CRITICAL: Autocomplete ≠ Tooltips!
 *
 * DROPDOWN LAYER (20-21):
 * - Autocomplete suggestions
 * - Search dropdowns
 * - Menu dropdowns
 * - Context menus
 *
 * TOOLTIP LAYER (300):
 * - Help tooltips
 * - Info popups
 * - Hover explanations
 * - Status messages
 *
 * This ensures real tooltips/modals can appear above autocomplete
 * ======================================== */
/* Search suggestions on dropdown layer - NOT tooltip layer */
.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-dropdown-menu) !important; /* High z-index to appear above fixed positioned map */
  background: var(--white);
  border: var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-dropdown);
  max-height: 200px;
  overflow-y: auto;
}
.dark .search-suggestions {
  background: #262626;
  border-color: #525252;
}
/* CRITICAL: Prevent horizontal scrollbar on top bar containers */
.discover-top-bar,
.discover-top-bar > div,
.discover-topbar-content {
  overflow-x: hidden !important; /* Prevent horizontal scrollbar */
  /* FIX: Allow vertical expansion so inner content is visible on small devices */
  overflow-y: visible !important;
  box-sizing: border-box !important;
  max-width: 100vw !important; /* CRITICAL: Prevent top bar from exceeding viewport */
  width: 100% !important; /* Ensure proper width calculation */
  /* CRITICAL: Force hide scrollbars */
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE/Edge */
}

/* CRITICAL: Hide scrollbars on all top bar containers - webkit browsers */
.discover-top-bar::-webkit-scrollbar,
.discover-top-bar > div::-webkit-scrollbar,
.discover-topbar-content::-webkit-scrollbar,
.discover-top-bar *::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
}

/* TOUCH MOBILE: Aggressive scrollbar prevention when autocomplete opens/closes */
@media (hover: none) and (pointer: coarse) and (max-width: 1023px) {
  .discover-top-bar,
  .discover-top-bar > div,
  .discover-top-bar .flex,
  .discover-top-bar .flex.items-center,
  .discover-top-bar .flex.items-center.justify-between,
  .discover-top-bar .flex.items-center.gap-2 {
    overflow: hidden !important; /* Force hidden on touch mobile */
    overflow-x: hidden !important;
    overflow-y: hidden !important; /* Change from visible to hidden to prevent scrollbar */
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
  }
  
  /* But allow the autocomplete dropdown to escape - it's position: fixed */
  #unified-autocomplete {
    overflow-y: auto !important; /* Dropdown itself can scroll */
  }
}

/* Top bar content container */
.discover-topbar-content,
.max-w-4xl.mx-auto {
  background: linear-gradient(180deg, var(--primary-blue-bg-lighter) 0%, rgba(59, 130, 246, 0.01) 100%);
  border-radius: var(--radius-lg);
  padding: var(--spacing-md);
  margin-top: var(--spacing-xs);
  margin-bottom: var(--spacing-xs);
}
.dark .discover-topbar-content,
.dark .max-w-4xl.mx-auto {
  background: linear-gradient(180deg, var(--primary-blue-bg-light) 0%, var(--primary-blue-bg-lighter) 100%);
}
/* UNIFIED LISTINGS CONTAINERS */

/* NOTE: Main #listings-sheet styles moved to components/bottomsheet.css to eliminate duplication */

/* NOTE: Drag handle and interactive element styles moved to components/bottomsheet.css to eliminate duplication */

/* NOTE: All #listings-sheet content and interaction styles moved to components/bottomsheet.css to eliminate duplication */

/* Spot card image container */
.spot-card-image {
  border-top-left-radius: var(--radius-md);
  border-bottom-left-radius: var(--radius-md);
  flex-shrink: 0;
  min-width: 96px;
  max-width: 96px;
}
/* Spot card content area */
.spot-card-content {
  flex: 1 1 0%;
  min-width: 0;
  max-width: calc(100% - 96px);
}
/* Spot card text elements - Allow text to wrap naturally */
.spot-card-title,
.spot-card-address,
.spot-card-text {
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
/* Spot card interactive elements */
.spot-card-button {
  max-width: fit-content;
  white-space: nowrap;
  transition: all var(--transition-normal);
}
/* Spot card button hover effect only on desktop (not tablet/mobile) */
@media (min-width: 1024px) {
  .spot-card-button:hover {
    transform: var(--transform-scale);
    box-shadow: var(--shadow-md);
  }
}
.spot-card-button:focus {
  box-shadow: 0 0 0 2px var(--primary-blue), 0 0 0 4px #ffffff;
}
.dark .spot-card-button:focus {
  box-shadow: 0 0 0 2px var(--primary-blue), 0 0 0 4px var(--neutral-800);
}
/* Avoid heavy focus rings on mouse click, keep for keyboard navigation */
.spot-card-button:focus:not(:focus-visible) {
  box-shadow: none;
  outline: none;
}
/* UNIFIED LISTINGS INTERACTIONS - ADAPTIVE FOR INPUT METHOD */
  /* NOTE: Mobile bottom sheet constraints moved to components/bottomsheet.css */
  #toggle-list-panel {
    transition: all var(--transition-fast);
  }
  #toggle-list-panel:hover {
    transform: scale(1.1);
  }
  /* Smooth transitions for all interactive elements */
  .spot-card * {
    transition: all var(--transition-fast);
  }
  /* Enhanced focus states */
  .book-btn:focus {
    box-shadow: 0 0 0 2px #1d4ed8, 0 0 0 4px #ffffff;
  }
  .dark .book-btn:focus {
    box-shadow: 0 0 0 2px #1d4ed8, 0 0 0 4px #1f2937;
  }
  /* Avoid heavy focus rings on mouse click for book buttons */
  .book-btn:focus:not(:focus-visible) {
    box-shadow: none;
    outline: none;
  }
  .map-control-dropdown {
    transition: all var(--transition-normal);
  }
  .map-control-dropdown:hover {
    background: #f3f4f6 !important;
  }
  .map-control-menu {
    transition: all var(--transition-normal);
  }
  .map-control-menu-item {
    transition: all var(--transition-normal);
  }
  .map-control-menu-item:hover {
    background: #f3f4f6 !important;
    transform: translateX(2px);
  }
  .map-control-menu-item:active {
    transform: translateX(1px);
  }
  .dark .map-control-dropdown {
    background: #1f2937 !important;
    color: #d1d5db;
  }
  .dark .map-control-dropdown:hover {
    background: #374151 !important;
  }
  .dark .map-control-menu {
    background: #1f2937;
    border-color: #374151;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }
  .dark .map-control-menu-item {
    background: #1f2937 !important;
    color: #d1d5db;
  }
  .dark .map-control-menu-item:hover {
    background: #374151 !important;
  }
  /* Focus states for accessibility */
  .map-control-dropdown:focus,
  .map-control-menu-item:focus {
    outline: 2px solid #1d4ed8;
    outline-offset: 2px;
  }
  /* Avoid heavy focus rings on mouse click for map controls */
  .map-control-dropdown:focus:not(:focus-visible),
  .map-control-menu-item:focus:not(:focus-visible) {
    outline: none;
  }
  /* Enhanced filter chip animations */
  .amenity-chip {
    transition: all var(--transition-cubic);
    will-change: transform, box-shadow;
  }
  .amenity-chip:hover {
    background-color: var(--neutral-200);
    transform: translateY(-2px) scale(1.05);
    box-shadow: var(--shadow-hover);
  }
  .dark .filter-chip:hover {
    background-color: var(--neutral-600);
  }
  .amenity-chip.active {
    background-color: #dbeafe;
    color: var(--primary-blue-darker);
    transform: var(--transform-scale);
    box-shadow: 0 0 0 2px var(--primary-blue-bg);
  }
  .dark .filter-chip.active {
    background-color: #1e3a8a;
    color: var(--primary-blue-lighter);
  }
  /* Auto-search toggle states */
  .auto-search-enabled {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, rgba(34, 197, 94, 0.05) 100%);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    border: 1px solid rgba(34, 197, 94, 0.2);
  }
  .auto-search-disabled {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.1) 0%, rgba(107, 114, 128, 0.05) 100%);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm);
    border: 1px solid rgba(107, 114, 128, 0.2);
  }
  /* Location loading state */
  #use-current-location.location-loading {
    opacity: 0.7;
    cursor: not-allowed;
    background: linear-gradient(90deg, #1d4ed8, #1d4ed8);
    animation: pulse 2s infinite;
  }
  /* Enhanced datetime input states */
  #start-time:focus {
    border-color: var(--primary-blue);
    box-shadow: var(--shadow-focus);
  }
  #start-time.border-red-500 {
    animation: shake 0.5s ease-in-out;
  }
  #start-time.border-green-500 {
    animation: success-pulse 0.6s ease-in-out;
  }
  /* Quick time presets */
  .quick-time-presets button {
    transition: all var(--transition-normal);
    border: 1px solid transparent;
  }
  .quick-time-presets button:hover {
    transform: var(--transform-hover);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-color: var(--primary-blue);
  }
  .quick-time-presets button:active {
    transform: translateY(0);
  }
  /* Message animations */
  .datetime-validation-message,
  .auto-search-message,
  .location-message,
  .map-search-indicator {
    animation: slideInDownY 0.3s ease-out;
  }
/* ========================================
 * ANIMATIONS
 * ======================================== */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
@keyframes success-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}
@keyframes slideInDownY {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    transform: translate3d(0,-8px,0);
  }
  70% {
    transform: translate3d(0,-4px,0);
  }
  90% {
    transform: translate3d(0,-2px,0);
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}
@keyframes loading-shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
  /* Enhanced dropdown animations */
  .map-control-menu {
    transform-origin: top right;
  }
  .map-control-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
  }
  .map-control-menu.hide {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px) scale(0.95);
  }
  /* Icon animations */
  .map-control-dropdown svg {
    transition: transform var(--transition-normal);
  }
  .map-control-dropdown:hover svg {
    transform: scale(1.1);
  }
  /* Menu item icon styling */
  .map-control-menu-item svg {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
  }

/* ========================================
 * LOW HEIGHT SCREEN HANDLING
 * Targets landscape mode on small screens
 * ======================================== */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 768px) {
  /* Compact top bar for low-height landscape screens */
  .discover-top-bar {
    display: flex !important;
    visibility: visible !important;
    min-height: 3rem !important; /* Reduced from 4rem */
    padding-top: 0.375rem !important;
    padding-bottom: 0.375rem !important;
  }

  /* Compact amenities for landscape */
  #amenities-container {
    max-height: 100px;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xs);
  }

  /* Compact filter chips for landscape */
  .amenity-chips-container {
    padding-bottom: 0.5rem;
  }

  /* Compact quick time presets for landscape */
  .quick-time-presets {
    margin-top: var(--spacing-sm);
  }

  /* Adjust mobile listings sheet for landscape */
  #listings-sheet {
    max-height: 120vh;
    min-height: 120px;
  }

  /* Adjust positioning for landscape mode */
  #auto-search-toggle {
    top: 0.5rem;
    right: 0.5rem;
  }

  #map-search-indicator {
    top: 1rem;
  }

  #desktop-listings-overlay-toggle,
  #desktop-listings-overlay {
    top: 1rem;
  }
}

/* Low height portrait mode (small phone screens) */
@media (max-height: 500px) and (orientation: portrait) {
  .discover-top-bar {
    min-height: 3rem !important; /* Reduced from 4rem */
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  
  /* Compact inner elements */
  .discover-top-bar .search-display-container,
  .discover-top-bar .datetime-display-container {
    min-height: 32px !important;
    height: 32px !important;
    max-height: 32px !important;
  }
}

#map-container .gm-style {
  overflow: hidden !important;
}
/* ========================================
 * COMPACT ICON-ONLY SATELLITE BUTTON
 * ======================================== */
.map-control-satellite-icon {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: none !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #4b5563 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease !important;
  cursor: pointer !important;
  transform: none !important; /* Transform applied to container instead */
  pointer-events: auto !important; /* Ensure button captures all clicks */
  position: relative !important;
}

.map-control-satellite-icon:hover {
  background: rgba(59, 130, 246, 0.1) !important;
  color: #2563eb !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.map-control-satellite-icon:active {
  transform: scale(0.95) !important; /* Only scale, container handles position */
  transition: transform 0.1s ease !important;
}

.map-control-satellite-icon svg {
  width: 18px !important;
  height: 18px !important;
  flex-shrink: 0 !important;
  pointer-events: none !important; /* Allow clicks to pass through to button */
}

.map-control-satellite-icon * {
  pointer-events: none !important; /* Ensure all children don't block clicks */
}

/* Active state (when satellite mode is on) - HIGH VISIBILITY FOR DARK MAPS */
.map-control-satellite-icon.active,
.map-control-satellite-icon[style*="background: rgba(59, 130, 246"] {
  background: rgba(255, 255, 255, 0.98) !important; /* Bright white background for visibility */
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: #1e40af !important; /* Darker blue for contrast */
  border: 2px solid rgba(59, 130, 246, 0.3) !important; /* Blue border for definition */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(59, 130, 246, 0.2) !important; /* Strong shadow for visibility */
}

/* Custom map controls container */
.custom-map-controls {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  z-index: var(--z-overlay) !important;
  pointer-events: none !important; /* Allow clicks to pass through container to button */
}

/* DESKTOP: Custom map controls transform - perfect for desktop */
@media (min-width: 1024px) {
  .custom-map-controls {
    transform: translate(0.25rem, -0.2rem) !important; /* Transform applied to container so clickable area matches */
  }
}

/* TABLET: Custom map controls transform - adjusted for tablet */
@media (min-width: 641px) and (max-width: 1023px) {
  .custom-map-controls {
    transform: translate(-0.3rem, 1.9rem) !important; /* Adjusted transform for tablet */
  }
}

/* MOBILE: Custom map controls transform - adjusted for mobile */
@media (max-width: 640px) {
  .custom-map-controls {
    transform: translate(-0.2rem, 0.85rem) !important; /* Adjusted transform for mobile */
  }
}

.custom-map-controls > * {
  pointer-events: auto !important; /* Re-enable pointer events on button */
}

/* Dark mode support */
.dark .map-control-satellite-icon {
  background: rgba(31, 41, 55, 0.95) !important;
  color: #d1d5db !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.dark .map-control-satellite-icon:hover {
  background: rgba(55, 65, 81, 0.95) !important;
  color: #60a5fa !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(59, 130, 246, 0.3) !important;
}

.dark .map-control-satellite-icon.active,
.dark .map-control-satellite-icon[style*="background: rgba(59, 130, 246"] {
  background: rgba(255, 255, 255, 0.95) !important; /* Bright white for dark mode too */
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  color: #1e3a8a !important; /* Dark blue for contrast */
  border: 2px solid rgba(59, 130, 246, 0.4) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(59, 130, 246, 0.3) !important;
  color: #93c5fd !important;
  box-shadow: 0 1px 3px rgba(59, 130, 246, 0.4), 0 1px 2px rgba(59, 130, 246, 0.3) !important;
}

/* Responsive sizing - slightly smaller on mobile */
@media (max-width: 640px) {
  .map-control-satellite-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }
  
  .map-control-satellite-icon svg {
    width: 16px !important;
    height: 16px !important;
  }
}
/* SPOT DETAILS ICON SIZING FIX */
/* Ensure all info icons in spot details are properly sized */
#spot-detail-content .info-icon,
#spot-detail-content svg.info-icon,
.spot-details-container .info-icon,
.spot-details-container svg.info-icon {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  flex-shrink: 0 !important;
}

/* DESKTOP TOP BAR FIXES */
/* Ensure desktop logo and fields are properly sized */
@media (min-width: 1024px) {
  /* Desktop top bar styling - FLEXIBLE HEIGHT TO FIT CONTENT */
  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 */
    padding-top: 1rem !important;
    padding-bottom: 0.75rem !important; /* Increased bottom padding for content */
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    background: #ffffff !important;
    border-bottom: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    position: fixed !important; /* Fixed position on desktop */
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: var(--z-topbar) !important;
    overflow-x: visible !important; /* Allow horizontal overflow for dropdowns */
    overflow-y: visible !important; /* Allow vertical expansion for content */
    display: flex !important; /* Ensure flexbox layout */
    align-items: flex-start !important; /* CRITICAL: Use flex-start to allow content to expand vertically */
    contain: none !important; /* Prevent content clipping */
    clip: auto !important; /* Prevent content clipping */
    clip-path: none !important; /* Prevent content clipping */
  }
  
  /* CRITICAL: Center individual items vertically within their own space */
  body.discover-page .discover-top-bar .flex.items-center.justify-between.w-full {
    align-items: flex-start !important; /* Allow children to expand */
  }
  
  /* Center entry field containers vertically within available space */
  body.discover-page .discover-top-bar .datetime-field-container,
  body.discover-page .discover-top-bar .search-field-container {
    align-self: center !important; /* Center individually */
  }

  /* CRITICAL: Override any tablet rules that might conflict with desktop */
  body.discover-page .discover-top-bar {
    padding-top: 1rem !important;
    padding-bottom: 0.75rem !important; /* Increased bottom padding for content */
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    height: auto !important; /* Flexible height to fit content */
    min-height: 4.5rem !important; /* Minimum height for content */
    max-height: none !important; /* Allow expansion */
    overflow-x: visible !important; /* Allow horizontal overflow for dropdowns */
    overflow-y: visible !important; /* Allow vertical expansion for content */
  }

  /* Desktop filters bar - Hidden since amenity chips moved to top bar */
  body.discover-page #filters-bar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    z-index: -1 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
  }

  /* Desktop top bar amenity chips container - Ensure proper visibility and spacing */
  .discover-top-bar .hidden.lg\:flex {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    gap: 0.5rem !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    min-width: auto !important;
    max-width: none !important;
  }

  /* General amenity chip styles (for other locations) */
  .amenity-chip {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.5rem 1rem !important;
    background-color: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #374151 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
  }

  .amenity-chip:hover {
    background-color: #e5e7eb !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  }

  .amenity-chip.active {
    background-color: #dbeafe !important;
    color: #FFFFFF !important;
    border-color: #1d4ed8 !important;
  }

  /* Dark mode active amenity chip */
  .dark .amenity-chip.active,
  html.dark .amenity-chip.active {
    background-color: rgba(147, 197, 253, 0.2) !important;
    color: #FFFFFF !important;
    border-color: #93c5fd !important; /* Lighter blue for better contrast on dark backgrounds */
  }

  /* Ensure amenity chips in top bar are properly styled - FIXED FOR CONTRAST */
  .discover-top-bar .amenity-chip {
    background-color: #d1d5db !important; /* gray-300 for better contrast */
    border: 1px solid #9ca3af !important; /* gray-400 */
    color: #111827 !important; /* gray-900 - dark text */
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
    border-radius: 0.375rem !important;
    min-height: 1.75rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    transition: all 0.2s ease !important;
    flex-shrink: 0 !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* Dark mode amenity chips in top bar */
  .dark .discover-top-bar .amenity-chip,
  html.dark .discover-top-bar .amenity-chip {
    background-color: #374151 !important; /* gray-700 */
    border: 1px solid #4b5563 !important; /* gray-600 */
    color: #e5e7eb !important; /* gray-200 - light text for dark mode */
  }

  .discover-top-bar .amenity-chip:hover {
    background-color: #9ca3af !important; /* gray-400 - darker on hover */
    border-color: #6b7280 !important; /* gray-500 */
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  }

  .discover-top-bar .amenity-chip.active {
    background-color: #2563eb !important; /* Darker blue for better contrast */
    color: white !important;
    border-color: #1d4ed8 !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2) !important;
  }

  /* Dark mode active amenity chips in top bar */
  .dark .discover-top-bar .amenity-chip.active,
  html.dark .discover-top-bar .amenity-chip.active {
    background-color: #2563eb !important;
    color: white !important;
    border-color: #1d4ed8 !important;
  }

  /* Desktop logo - match size below 521px breakpoint */
  .discover-top-bar img {
    height: 20px !important;
  }
}

/* ADDITIONAL DESKTOP OVERRIDE - Ensure amenity chips are visible on all desktop sizes */
@media (min-width: 1024px) {
  /* Desktop filters bar - Hidden since amenity chips moved to top bar */
  body.discover-page #filters-bar {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
    z-index: -1 !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
  }

  /* Desktop search and datetime fields - allow proper width */
  .discover-top-bar .max-w-\[120px\],
  .discover-top-bar .max-w-\[140px\] {
    max-width: none !important;
  }

  /* Desktop: Control field container behavior */
  .discover-top-bar .flex-1.min-w-0 {
    flex: 0 1 auto !important; /* Don't grow, allow shrink, auto basis */
    width: auto !important;
  }

  /* Desktop: Restore proper field widths */
  .discover-top-bar .lg\:max-w-xs {
    max-width: 20rem !important; /* 320px - proper desktop width */
  }

  /* Desktop: Ensure proper spacing and layout */
  .discover-top-bar .gap-2.sm\:gap-4.lg\:gap-6 {
    gap: 1rem !important; /* 16px gap on desktop - reduced from 24px */
  }

  /* Desktop: Allow search and datetime fields to have reasonable widths */
  .discover-top-bar .relative {
    min-width: 300px !important;
    max-width: 315px !important;
  }

  /* Desktop: Prevent fields from becoming too wide */
  .discover-top-bar .datetime-field-container {
    max-width: 300px !important;
  }

  /* Desktop: Enhanced field styling */
  .discover-top-bar .search-display-container,
  .discover-top-bar .datetime-display-container {
    border-radius: 0.75rem !important; /* More rounded corners */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s ease !important;
  }

  /* Desktop: Ensure datetime text doesn't overflow */
  .discover-top-bar #datetime-display-value {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Desktop: Center datetime text horizontally */
  .discover-top-bar .datetime-display-container .flex-1.min-w-0 {
    text-align: center !important;
  }
  
  .discover-top-bar .datetime-label-text,
  .discover-top-bar #datetime-display-value {
    text-align: center !important;
  }

  .discover-top-bar .search-display-container:hover,
  .discover-top-bar .datetime-display-container:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-1px) !important;
  }

  /* Desktop: Enhanced hamburger dropdown styling */
  #discover-menu {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(0, 0, 0, 0.1);
  }
  .dark #discover-menu {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
  }
}

.map-control-dropdown svg {
    width: 12px !important;
    height: 12px !important;
  }
/* Satellite button dark mode styles removed */
/* Auto-search toggle positioning - Ensure visibility */
#auto-search-toggle {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: var(--z-overlay);
}
/* Ensure auto-search toggle container is visible - FORCE VISIBILITY */
.absolute.top-4.right-4.z-20,
#auto-search-toggle,
label[for="auto-search-toggle"] {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  z-index: var(--z-overlay) !important;
  position: relative !important;
}
/* Force auto-search toggle to appear */

/* CRITICAL: Ensure proper contrast on dark overlays and backgrounds */
.dark *[style*="background: rgba(0"],
.dark *[style*="background-color: rgba(0"],
html.dark *[style*="background: rgba(0"],
html.dark *[style*="background-color: rgba(0"],
body.dark *[style*="background: rgba(0"],
body.dark *[style*="background-color: rgba(0"] {
  color: #f9fafb !important; /* Light text on dark backgrounds */
}

/* Ensure text is light on any very dark background */
*[style*="background: #0"],
*[style*="background-color: #0"],
*[style*="background: rgba(0, 0, 0"],
*[style*="background-color: rgba(0, 0, 0"] {
  color: #f9fafb !important; /* Light text on very dark backgrounds */
}

/* Override any gray-800 text that might appear on dark backgrounds in dark mode */
.dark .text-gray-800,
html.dark .text-gray-800,
body.dark .text-gray-800,
.dark [style*="color: #ffffff"],
html.dark [style*="color: #ffffff"],
body.dark [style*="color: #ffffff"] {
  color: #f9fafb !important; /* Light text in dark mode */
}

/* NOTE: Dark mode styles (including NUCLEAR OPTION) consolidated in dark-mode.css */

/* Cover computed styles that might result in gray-800 */

/* ============================================================================
   DISCOVER MENU DROPDOWN - Content-aware sizing
   ============================================================================ */

/* Discover menu (hamburger dropdown) - let JavaScript handle sizing */
#discover-menu {
  /* Remove fixed max-height - JavaScript will set it based on content */
  max-height: none; /* Default: no constraint, JS will set it */
  height: auto; /* Size to content */
  overflow-y: visible; /* JS will set to 'auto' if scrolling is needed */
  
  /* Ensure smooth transitions */
  transition: max-height 0.2s ease, opacity 0.2s ease;
  
  /* Better spacing for menu items */
  padding: 0.25rem 0;
}

/* Fallback max-height only if JavaScript fails */
@supports not (max-height: none) {
  #discover-menu {
    max-height: 280px;
    overflow-y: auto;
  }
}

/* TOUCH MOBILE: Wider menu dropdown for better readability */
@media (hover: none) and (pointer: coarse) and (max-width: 1023px) {
  /* CRITICAL: Override inline styles with attribute selector for maximum specificity */
  #discover-menu,
  #discover-menu[style],
  div#discover-menu,
  div#discover-menu[style] {
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    max-height: 450px !important;
    right: 8px !important;
    left: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: 0 !important;
  }
  
  /* CRITICAL: Force all children to respect container bounds */
  #discover-menu *,
  #discover-menu[style] * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Ensure menu content doesn't overflow */
  #discover-menu > div,
  #discover-menu .py-1 {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  /* Ensure menu text has room to breathe */
  #discover-menu .welcome-header-section {
    padding: 0.75rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  
  #discover-menu .welcome-header-section > .flex {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    gap: 0.5rem !important;
  }
  
  #discover-menu .welcome-header-section p {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
  }
  
  #discover-menu .welcome-header-section p.text-sm,
  #discover-menu .welcome-header-section .text-sm {
    font-size: 0.875rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.25rem !important;
    font-weight: 600 !important;
  }
  
  #discover-menu .welcome-header-section p.text-xs,
  #discover-menu .welcome-header-section .text-xs {
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
  }
  
  /* Welcome icon - centered on top */
  #discover-menu .welcome-icon-wrapper {
    width: 2.5rem !important;
    height: 2.5rem !important;
    min-width: 2.5rem !important;
    flex-shrink: 0 !important;
  }
  
  #discover-menu .welcome-icon-wrapper svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }
  
  /* Menu items */
  #discover-menu a[role="menuitem"] {
    padding: 0.625rem 0.75rem !important;
    font-size: 0.8125rem !important; /* 13px */
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    overflow: hidden !important;
  }
  
  #discover-menu a[role="menuitem"] svg {
    width: 1rem !important;
    height: 1rem !important;
    min-width: 1rem !important;
    margin-right: 0.5rem !important;
    flex-shrink: 0 !important;
  }
  
  /* ========================================
   * TOP BAR PADDING AND CONTAINER SPACING
   * (Consolidated into single touch mobile block)
   * ======================================== */
  
  /* Add padding inside top bar for breathing room */
  .discover-top-bar {
    padding-top: 0.625rem !important; /* 10px - more space at top */
    padding-bottom: 0.75rem !important; /* 12px - comfortable bottom padding */
  }
  
  /* CRITICAL: Add bottom margin to the inner flex container */
  .discover-top-bar .flex.items-center.gap-2,
  .discover-top-bar .flex.items-center.gap-2.sm\:gap-4,
  .discover-top-bar .flex.items-center.gap-2.sm\:gap-4.lg\:gap-6,
  .discover-top-bar .flex.items-center.gap-2.sm\:gap-4.lg\:gap-6.flex-1,
  .discover-top-bar > div > .flex.items-center {
    padding-bottom: 0.5rem !important; /* 8px bottom padding for inner container */
    margin-bottom: 0.25rem !important; /* 4px extra margin */
  }
  
  /* Shorter container heights on mobile touch */
  .discover-top-bar .search-display-container,
  .discover-top-bar .datetime-display-container {
    min-height: 36px !important; /* Compact but readable containers */
    height: 36px !important;
    max-height: 36px !important;
    padding: 0.375rem 0.5rem !important; /* Balanced padding */
    transform: translateY(-6px) !important; /* Move up away from bottom of header */
    display: flex !important;
    align-items: center !important;
  }
  
  /* Compact inner content for location/address containers */
  .discover-top-bar .search-display-container .flex-1.min-w-0,
  .discover-top-bar .datetime-display-container .flex-1.min-w-0 {
    gap: 0.125rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  
  /* Smaller icons in containers */
  .discover-top-bar .search-display-container svg,
  .discover-top-bar .datetime-display-container svg,
  .discover-top-bar .search-display-container .w-5.h-5,
  .discover-top-bar .datetime-display-container .w-5.h-5,
  .discover-top-bar .search-display-container .w-6.h-6,
  .discover-top-bar .datetime-display-container .w-6.h-6 {
    width: 1rem !important;
    height: 1rem !important;
  }
  
  /* Label text - smaller but visible */
  .discover-top-bar .search-display-container .text-xs,
  .discover-top-bar .datetime-display-container .text-xs {
    font-size: 0.5625rem !important; /* 9px */
    line-height: 0.75rem !important;
    opacity: 0.7 !important;
  }
  
  /* Value text - readable */
  .discover-top-bar .search-display-container .text-sm,
  .discover-top-bar .datetime-display-container .text-sm {
    font-size: 0.75rem !important; /* 12px */
    line-height: 1rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  
  /* NOTE: Search container width controlled by size-specific rules in search.css */
  /* 521px-612px uses 165px, below 520px uses 120px - see search.css for details */
  
  /* Inner content padding - tighter on mobile */
  .discover-top-bar .search-display-container .relative.flex.items-center {
    padding: 0.25rem 0.375rem !important;
  }
  
  /* Smaller icon container */
  .discover-top-bar .search-display-container .flex-shrink-0.mr-1 > div,
  .discover-top-bar .search-display-container .flex-shrink-0 > div:first-child {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }
  
  /* Truncate long location text */
  .discover-top-bar .search-display-container .search-button-display,
  .discover-top-bar .search-display-container #search-input-description {
    max-width: 80px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

/* CRITICAL: Mobile touch optimization - ensure all interactive elements are touchable */
@media (max-width: 1023px) {
  .discover-top-bar,
  .discover-top-bar button,
  .discover-top-bar a,
  .discover-top-bar input,
  .discover-top-bar .search-display-container,
  .discover-top-bar .datetime-display-container {
    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 */
  }
  
  /* Ensure dropdown doesn't block touch events */
  #unified-autocomplete {
    pointer-events: auto !important;
    touch-action: pan-y !important; /* Allow vertical scrolling in dropdown */
  }
  
  /* Ensure autocomplete items are touchable */
  #unified-autocomplete .autocomplete-item,
  #unified-autocomplete button,
  #unified-autocomplete a {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(59, 130, 246, 0.15) !important;
  }
}