/* ==========================================
 * LISTINGS.CSS - PARKING LISTINGS SYSTEM
 * FILE: /css/renter/styles/discover/components/listings.css
 * VERSION: v=20251001
 * ==========================================
 * 🎯 PURPOSE: Parking spot listings, cards, and containers
 * 📱 COVERAGE: Desktop overlay + mobile bottom sheet listings
 * 🔧 FEATURES: Spot cards, loading states, responsive layout
 * 📄 IMPORTED BY: discover.html (line 326)
 * 🚀 STATUS: ACTIVE - Core listings display system
 * ========================================== */

/* ============================================================================
   DEFENSIVE CSS: Prevent cached state issues on page reload
   These rules ensure correct initial state regardless of cached HTML/CSS
   ============================================================================ */

/* CRITICAL: Desktop overlay visibility - only show on desktop */
@media (min-width: 1024px) {
  #listings-overlay {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
  
  /* CRITICAL: Ensure desktop content container is visible */
  #listings-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* CRITICAL: Hide mobile content on desktop */
  #listings-content-mobile {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  /* CRITICAL: Hide bottom sheet on desktop */
  #listings-sheet {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* CRITICAL: Mobile/tablet visibility - hide desktop overlay */
@media (max-width: 1023px) {
  #listings-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  /* CRITICAL: Hide desktop content on mobile */
  #listings-content {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  
  /* CRITICAL: Ensure mobile content container is visible */
  #listings-content-mobile {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* ============================================================================
   END DEFENSIVE CSS
   ============================================================================ */

/* ============================================================================
   SPACE TYPE TOGGLE (PARKING / STORAGE)
   Segmented control for switching between parking and storage modes
   ============================================================================ */

.space-type-toggle {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border-radius: 4px;
  background-color: #f5f5f5;
}

.dark .space-type-toggle {
  background-color: #404040;
}

.space-type-btn {
  padding: 2px 6px;
  font-size: 11px;
  font-weight: 500;
  border-radius: 3px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  color: #525252;
  background: transparent;
}

.dark .space-type-btn {
  color: #d4d4d4;
}

.space-type-btn:hover:not(.active) {
  color: #262626;
  background-color: rgba(0, 0, 0, 0.05);
}

.dark .space-type-btn:hover:not(.active) {
  color: #fafafa;
  background-color: rgba(255, 255, 255, 0.05);
}

.space-type-btn.active {
  background-color: #ffffff;
  color: #2563eb;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.1);
}

.dark .space-type-btn.active {
  background-color: #525252;
  color: #60a5fa;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.2);
}

/* Focus state for accessibility */
.space-type-btn:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 1px;
}

/* Touch-friendly sizing on mobile */
@media (max-width: 640px) {
  .space-type-btn {
    padding: 3px 6px;
    font-size: 10px;
  }
}

/* ============================================================================
   END SPACE TYPE TOGGLE
   ============================================================================ */

/* Listings content */
#listings-content {
  /* Layout */
  max-width: 100%;
  width: 100%;

  /* Behavior - CRITICAL: Prevent horizontal scroll completely */
  overflow-x: hidden !important;
  overflow-y: visible; /* Desktop: #listings-container owns scroll */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  /* Ensure content never exceeds container width */
  box-sizing: border-box;

  /* Positioning */
  position: relative;

  /* CRITICAL: Remove right padding - override Tailwind p-3 class */
  padding-right: 0 !important;

}
/* Mobile listings content - MUST be scrollable */
#listings-content-mobile {
  /* Layout */
  max-width: 100%;
  width: 100%;

  /* Behavior - CRITICAL: Mobile content must scroll */
  overflow-x: hidden;
  overflow-y: auto !important; /* Auto scroll when content exceeds container */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;

  /* Positioning */
  position: relative;

  /* Mobile specific: Dynamic responsive height */
  flex: 1 1 0% !important; /* Grow and shrink to fill available space, no baseline */
  min-height: 0 !important; /* Allow flex to shrink below content size */
  height: auto !important; /* Let flex determine height based on content and space */
  
  /* CRITICAL: Let JavaScript manage max-height dynamically to ensure all content is scrollable
   * Remove the fixed constraint - updateScrollContainerHeight() will handle this properly
   */
  /* REMOVED: max-height: calc(100vh - 100px) !important; - Let JS handle dynamic calculation */

}
/* Mobile listings container - Flex optimization */
.mobile-listings-container {
  min-height: 0;
  flex-basis: 0;
}
/* LISTINGS CONTENT - Populated State */
/* CRITICAL: Scope desktop and mobile separately to prevent conflicts */
@media (min-width: 1024px) {
  #listings-content:not(:empty) {
    background: linear-gradient(180deg, var(--primary-blue-bg-lighter) 0%, rgba(59, 130, 246, 0.01) 100%);
    border-radius: var(--radius-md);
    margin: -0.5rem;    /* Negative margin for tighter spacing */
    padding-top: var(--spacing-sm);   /* Top padding only */
  }
  
  #listings-content:empty::before {
    content: 'No parking spots found. Try adjusting your search or filters.';
    display: block;
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-lg);  /* Systematic spacing for empty state */
    color: var(--neutral-500);
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

@media (max-width: 1023px) {
  #listings-content-mobile:not(:empty) {
    background: linear-gradient(180deg, var(--primary-blue-bg-lighter) 0%, rgba(59, 130, 246, 0.01) 100%);
    border-radius: var(--radius-md);
    margin: -0.5rem;    /* Negative margin for tighter spacing */
    padding-top: var(--spacing-sm);   /* Top padding only */
  }
  
  #listings-content-mobile:empty::before {
    content: 'No parking spots found. Try adjusting your search or filters.';
    display: block;
    text-align: center;
    padding: var(--spacing-2xl) var(--spacing-lg);  /* Systematic spacing for empty state */
    color: var(--neutral-500);
    font-size: 0.875rem;
    line-height: 1.25rem;
  }
}

/* No results message styling - when not using ::before */
#listings-content-mobile .text-center.text-neutral-500,
#listings-content-mobile > .text-center {
  margin-bottom: 4rem !important; /* Large bottom margin to prevent cutoff */
  padding-bottom: 2rem !important; /* Additional padding */
}

/* Make the "no results" SVG icon smaller */
#listings-content-mobile .text-center svg.w-12.h-12 {
  width: 2.5rem !important; /* Smaller icon (40px instead of 48px) */
  height: 2.5rem !important;
}
/* CRITICAL: Scope dark mode empty states separately */
@media (min-width: 1024px) {
  .dark #listings-content:empty::before {
    color: var(--neutral-400);
  }
  
  #listings-content.loading {
    background: linear-gradient(90deg, var(--neutral-100) 25%, var(--neutral-200) 50%, var(--neutral-100) 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
    border-radius: var(--radius-md);
    margin: var(--spacing-sm);    /* Systematic spacing for loading state */
    padding: var(--spacing-sm);   /* Systematic spacing for loading state */
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth loading transitions */
  }
  
  .dark #listings-content.loading {
    background: linear-gradient(90deg, var(--neutral-700) 25%, var(--neutral-600) 50%, var(--neutral-700) 75%);
    background-size: 200% 100%;
  }
}

/* Skeleton loader animation - reuses existing loading-shimmer keyframe */
@keyframes loading-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Skeleton card shimmer effect */
.animate-loading-shimmer {
  background-size: 200% 100%;
  animation: loading-shimmer 1.5s infinite;
}

@media (max-width: 1023px) {
  .dark #listings-content-mobile:empty::before {
    color: var(--neutral-400);
  }
  
  #listings-content-mobile.loading {
    background: linear-gradient(90deg, var(--neutral-100) 25%, var(--neutral-200) 50%, var(--neutral-100) 75%);
    background-size: 200% 100%;
    animation: loading-shimmer 1.5s infinite;
    border-radius: var(--radius-md);
    margin: var(--spacing-sm);    /* Systematic spacing for loading state */
    padding: var(--spacing-sm);   /* Systematic spacing for loading state */
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Smooth loading transitions */
  }
  
  .dark #listings-content-mobile.loading {
    background: linear-gradient(90deg, var(--neutral-700) 25%, var(--neutral-600) 50%, var(--neutral-700) 75%);
    background-size: 200% 100%;
  }
}
/* LISTINGS CONTENT - Scrollbar Styling */
/* Apple-style listings scrollbar - ultra thin and elegant */
/* CRITICAL: Scope scrollbar styles separately for desktop and mobile to prevent conflicts */
@media (min-width: 1024px) {
  #listings-content::-webkit-scrollbar {
    width: 2px !important; /* Apple ultra-thin */
  }

  #listings-content::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15) !important; /* Subtle visibility */
    border-radius: 1px !important; /* Minimal radius */
    border: none !important;
    min-height: 30px !important;
  }

  #listings-content::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3) !important; /* More visible on hover */
  }

  #listings-content::-webkit-scrollbar-track {
    background: transparent !important; /* Invisible track */
  }

  /* Remove scrollbar arrows */
  #listings-content::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Dark mode */
  .dark #listings-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15) !important;
  }

  .dark #listings-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3) !important;
  }
}

@media (max-width: 1023px) {
  #listings-content-mobile::-webkit-scrollbar {
    width: 2px !important; /* Apple ultra-thin */
  }

  #listings-content-mobile::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15) !important; /* Subtle visibility */
    border-radius: 1px !important; /* Minimal radius */
    border: none !important;
    min-height: 30px !important;
  }

  #listings-content-mobile::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.3) !important; /* More visible on hover */
  }

  #listings-content-mobile::-webkit-scrollbar-track {
    background: transparent !important; /* Invisible track */
  }

  /* Remove scrollbar arrows */
  #listings-content-mobile::-webkit-scrollbar-button {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  /* Dark mode */
  .dark #listings-content-mobile::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15) !important;
  }

  .dark #listings-content-mobile::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3) !important;
  }
}
/* ==============================================
 * DESKTOP LISTINGS OVERLAY - AIRBNB STYLE
 * ============================================== */

/* Desktop overlay - Glass morphism and professional styling */
#listings-overlay {
  /* Airbnb-inspired visual polish */
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: var(--shadow-overlay);
  
  /* Smooth transitions */
  transition: transform var(--transition-cubic),
              opacity var(--transition-normal),
              box-shadow var(--transition-normal);
  
  /* CRITICAL: Don't create stacking context that could trap amenities popup */
  isolation: auto !important;
  contain: none !important;
  overflow: visible !important; /* Allow popups to escape */
}

/* Dark mode desktop overlay */
.dark #listings-overlay {
  background: rgba(26, 26, 26, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

/* Desktop overlay header - Refined styling */
#listings-overlay .sticky {
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-subtle);
}

.dark #listings-overlay .sticky {
  background: rgba(26, 26, 26, 0.98);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* ==============================================
 * FILTER AND SORT CONTROLS - AIRBNB POLISH
 * CRITICAL: Visual-only changes, functionality preserved
 * ============================================== */

/* Filter and sort buttons - Compact styling to match space type toggle */
#amenities-popup-trigger-desktop {
  font-size: 11px !important; /* Match other compact buttons */
  font-weight: 500 !important;
  padding: 2px 6px !important; /* Compact padding */
  border-radius: 4px !important;
  gap: 0 !important; /* No gap */
  border: none !important; /* No border for inline look */
  transition: all var(--transition-normal);
  background: transparent !important; /* Transparent like sort toggle */
  color: #525252 !important; /* neutral-600 */
  /* CRITICAL: Ensure always clickable and visible */
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: var(--z-button-elevated) !important;
}

#amenities-popup-trigger-desktop svg {
  width: 10px !important;
  height: 10px !important;
  margin-right: 2px !important; /* Small controlled margin */
}

.dark #amenities-popup-trigger-desktop {
  color: #d4d4d4 !important; /* neutral-300 in dark mode */
}

#amenities-popup-trigger-desktop:hover {
  background: #f5f5f5 !important; /* neutral-100 on hover */
  color: #262626 !important; /* neutral-800 on hover */
}

.dark #amenities-popup-trigger-desktop:hover {
  background: #404040 !important; /* neutral-700 in dark mode */
  color: #e5e5e5 !important; /* neutral-200 in dark mode */
}

/* Mobile filters button - keeps larger styling */
#amenities-popup-trigger-mobile {
  font-size: 13px;
  font-weight: 600 !important;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #D1D5DB !important;
  transition: all var(--transition-normal);
  background: #515259 !important;
  color: #dbe5f5 !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: var(--z-button-elevated) !important;
}

/* Sort toggles - Compact styling */
#sort-toggle-desktop,
#sort-toggle-mobile {
  font-weight: 500;
  border-radius: 4px;
  transition: all var(--transition-normal);
  /* CRITICAL: Ensure always clickable and visible */
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  position: relative !important;
  z-index: var(--z-button-elevated) !important; /* Above any overlays */
}

/* DESKTOP: Force compact controls - space type, filters, sort */
@media (min-width: 1024px) {
  /* Compact styling for controls */
  .space-type-toggle,
  #amenities-popup-trigger-desktop,
  #sort-toggle-desktop {
    transform: translateX(8px) !important;
    margin: 0 !important;
  }
  
  #sort-toggle-desktop {
    font-size: 11px !important;
    padding: 2px 6px !important;
    gap: 0 !important; /* NO gap between text and icon */
    min-height: unset !important;
    line-height: 1.3 !important;
  }
  
  #sort-toggle-desktop span,
  #sort-label-desktop {
    font-size: 11px !important;
    margin: 0 !important;
  }
  
  /* CRITICAL: Override all SVG arrow styling in sort toggle */
  #sort-toggle-desktop svg,
  #sort-toggle-desktop svg.mx-dropdown-arrow,
  #sort-toggle-desktop .mx-dropdown-arrow,
  button#sort-toggle-desktop svg,
  button#sort-toggle-desktop svg.mx-dropdown-arrow {
    width: 10px !important;
    height: 10px !important;
    margin: 0 !important;
    margin-left: 2px !important; /* Only tiny left margin */
    margin-right: 0 !important;
    padding: 0 !important;
    transform: none !important; /* Remove the translateX(15px) */
    flex-shrink: 0 !important;
  }
  
  /* Filters button - remove gap */
  #amenities-popup-trigger-desktop {
    gap: 0 !important;
  }
  
  #amenities-popup-trigger-desktop svg {
    margin: 0 2px 0 0 !important; /* Only right margin */
  }
}

/* CRITICAL: Desktop button must be visible and clickable on desktop */
@media (min-width: 1024px) {
  #amenities-popup-trigger-desktop {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: var(--z-button-elevated) !important;
    position: relative !important;
    /* CRITICAL: Ensure button has visible background and border */
    background: #515259 !important; /* Override any transparent backgrounds */
    border: 1px solid #D1D5DB !important; /* Ensure border is visible */
    color: #dbe5f5 !important; /* Ensure text is visible */
  }
  
  /* CRITICAL: Ensure desktop button is visible even if parent has hidden class */
  #listings-overlay.hidden #amenities-popup-trigger-desktop,
  #listings-overlay #amenities-popup-trigger-desktop {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    background: #515259 !important;
    border: 1px solid #D1D5DB !important;
    color: #dbe5f5 !important;
  }
  
  /* CRITICAL: Ensure button children are clickable */
  #amenities-popup-trigger-desktop * {
    pointer-events: auto !important;
  }
  
  /* Mobile button must be hidden on desktop */
  #amenities-popup-trigger-mobile {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* CRITICAL: Mobile button must be visible on mobile/tablet */
@media (max-width: 1023px) {
  #amenities-popup-trigger-mobile {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: var(--z-button-elevated) !important;
  }
  
  /* Desktop button hidden on mobile (it's in desktop overlay which is hidden) */
  #amenities-popup-trigger-desktop {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Hover states for filter buttons (desktop only) */
@media (min-width: 1024px) {
  #amenities-popup-trigger-desktop:hover {
    background: #E5E7EB !important; /* Slightly darker gray on hover - neutral-200 */
    border-color: var(--border-medium);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
  }
}

/* Dark mode filter buttons */
.dark #amenities-popup-trigger-desktop,
.dark #amenities-popup-trigger-mobile {
  background: #374151 !important; /* Dark gray - neutral-700 */
  color: #D1D5DB !important; /* Light text - neutral-300 */
  border-color: rgba(255, 255, 255, 0.2);
}

.dark #amenities-popup-trigger-desktop:hover {
  background: #9CA3AF !important; /* Slightly lighter gray on hover - neutral-600 */
}

/* Sort dropdown menu - Professional styling with proper contrast */
#sort-dropdown-desktop,
#sort-dropdown-mobile {
  border-radius: 12px;
  border: 1px solid #E5E7EB;
  box-shadow: var(--shadow-overlay);
  background: #F3F4F6 !important; /* Modern gray - neutral-100 */
}

/* RESPONSIVE: Make dropdown width match content size instead of fixed w-56 */
#sort-dropdown-mobile,
#sort-dropdown-desktop {
  width: auto !important; /* Override Tailwind's fixed width classes */
  min-width: 120px !important; /* Minimum width for usability */
  max-width: 200px !important; /* Maximum width to prevent overflow */
}

/* CRITICAL: Fix sort dropdown positioning to prevent falling off page */
#sort-dropdown-mobile,
#sort-dropdown-desktop {
  position: absolute !important;
  right: 0 !important; /* Align to right edge of parent */
  top: 100% !important; /* Position below trigger button */
  margin-top: 0.25rem !important;
  transform: translateX(0) !important; /* No horizontal offset */
  z-index: var(--z-high-modal) !important; /* Ultra-high z-index to appear above spot cards */
}

/* If dropdown would fall off right edge, position it to the left */
@media (max-width: 400px) {
  #sort-dropdown-mobile {
    right: auto !important;
    left: 0 !important; /* Align to left edge on very small screens */
  }
}

/* ============================================================================
   TOUCHSCREEN DEVICE RESPONSIVE FIXES - SORT DROPDOWN
   ============================================================================ */

/* Actual touchscreen devices - smaller sort dropdown for mobile */
@media (hover: none) and (pointer: coarse) {
  /* Sort dropdown container - smaller size for touchscreens */
  #sort-dropdown-mobile,
  #sort-dropdown-desktop {
    min-width: 100px !important; /* Reduced from 120px */
    max-width: 160px !important; /* Reduced from 200px */
    font-size: 0.875rem !important; /* Smaller text (14px) */
    padding: 0.375rem 0 !important; /* Reduced padding */
  }

  /* Sort dropdown menu items - smaller text and padding */
  #sort-dropdown-mobile .sort-option,
  #sort-dropdown-desktop .sort-option,
  #sort-dropdown-mobile button,
  #sort-dropdown-desktop button,
  #sort-dropdown-mobile a,
  #sort-dropdown-desktop a {
    font-size: 0.875rem !important; /* Smaller text (14px) */
    padding: 0.5rem 0.75rem !important; /* Reduced padding */
    line-height: 1.4 !important; /* Tighter line height */
  }

  /* Sort dropdown text - ensure it fits */
  #sort-dropdown-mobile span,
  #sort-dropdown-desktop span {
    font-size: 0.875rem !important;
  }

  /* Filter buttons - smaller size for touchscreens */
  #amenities-popup-trigger-desktop,
  #amenities-popup-trigger-mobile {
    font-size: 0.75rem !important; /* Smaller text (12px, reduced from 13px) */
    padding: 0.5rem 0.75rem !important; /* Reduced padding (8px 12px -> 6px 12px) */
    min-height: 32px !important; /* Smaller minimum height */
  }

  /* Filter button text and icons - smaller */
  #amenities-popup-trigger-desktop span,
  #amenities-popup-trigger-mobile span {
    font-size: 0.75rem !important; /* Match button font size */
  }

  /* Filter button icons - smaller */
  #amenities-popup-trigger-desktop svg,
  #amenities-popup-trigger-mobile svg {
    width: 0.75rem !important; /* Smaller icons */
    height: 0.75rem !important;
  }
}

/* ============================================================================
   DISCOVER MENU RESPONSIVE CONSTRAINTS (Below 520px)
   ============================================================================ */

/* Very small screens (≤520px) - Constrain discover menu height */
@media (max-width: 520px) {
  #discover-menu {
    max-height: 358px !important; /* Compact height for very small screens */
    height: auto !important;
    overflow-y: auto !important;
    /* Ensure proper positioning */
    position: fixed !important;
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
  }
}

/* CRITICAL: Drag handle positioning for screens below 521px with pointer fine */
@media (hover: hover) and (pointer: fine) and (max-width: 520px) {
  #listings-sheet .absolute.-top-1,
  #listings-sheet button[aria-label*="Drag"] {
    position: absolute !important;
    top: -0.75rem !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-6px) !important; /* Center + move up */
    z-index: var(--z-elevated) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 60px !important;
    height: 28px !important;
    padding: 0.75rem 1.25rem !important;
    min-height: 44px !important;
    min-width: 44px !important;
    background: transparent !important;
    border: none !important;
    cursor: grab !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Ultra small screens (≤400px) - Even more compact */
@media (max-width: 400px) {
  #discover-menu {
    max-height: 128px !important; /* Very compact for ultra-small screens */
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
  }
}

/* Ensure dropdown buttons fit content properly */
#sort-dropdown-mobile .sort-option,
#sort-dropdown-desktop .sort-option {
  white-space: nowrap !important; /* Prevent text wrapping */
  padding: 0.5rem 1rem !important; /* Consistent padding */
  width: auto !important; /* Let content determine width */
  text-align: left !important; /* Ensure left alignment */
}

/* Sort dropdown options - ensure proper text visibility */
/* listings.css - sort dropdown option styling */
.sort-option {
  color: #1F2937 !important; /* Dark text for light background - neutral-800 */
}

/* listings.css - sort option hover states */
.sort-option:hover {
  background: #E5E7EB !important; /* Slightly darker gray on hover - neutral-200 */
  transform: translateX(2px);
}

/* Dark mode dropdown styling */
.dark #sort-dropdown-desktop,
.dark #sort-dropdown-mobile {
  background: #374151 !important; /* Dark gray - neutral-700 */
  border-color: rgba(255, 255, 255, 0.1);
}

.dark .sort-option {
  color: #F3F4F6 !important; /* Light text for dark background - neutral-100 */
}

.dark .sort-option:hover {
  background: #9CA3AF !important; /* Slightly lighter gray on hover - neutral-600 */
}

/* Spot count badge - Refined styling with high visibility */
#listings-count,
#listings-count-mobile {
  font-weight: 700 !important; /* Bolder */
  font-size: 15px !important; /* Slightly larger */
  color: #1d4ed8 !important; /* Darker blue for WCAG AA compliance (was #1d4ed8) */
}

/* Mobile spot count - add vertical positioning */
#listings-count-mobile {
  display: inline-block !important; /* Required for transform to work */
  transform: translateY(-7px) translateX(8px) !important; /* Move up 8px and right 8px for better visual alignment */
}

.dark #listings-count,
.dark #listings-count-mobile {
  color: #60A5FA !important; /* Lighter blue in dark mode */
}

/* LIST PANEL - Base Definition */
#list-panel {
  /* Layout */
  max-width: 100%;
  width: 100%;

  /* Behavior */
  overflow-x: hidden;
  transition: width var(--transition-slow);

  /* Performance */
  contain: layout style;
}
/* LIST PANEL - Variants */
#list-panel.is-collapsed {
  overflow: hidden;
}
#list-panel.is-collapsed #listings-container,
#list-panel.is-collapsed .p-3 {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-normal);
}
/* LIST PANEL - Content Constraints */
#list-panel * {
  max-width: 100%;
  box-sizing: border-box;
}

/* 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 */

/* ==============================================
 * GLOBAL AUTOCOMPLETE SCROLLBAR FIX - ALL SIZES
 * ============================================== */

/* GLOBAL FIX: Ensure only ONE scrollbar by removing overflow from inner containers */
#unified-autocomplete .autocomplete-suggestions {
  overflow: visible !important; /* Remove inner scrollbar */
  max-height: none !important; /* Let parent container handle height */
  height: auto !important; /* CRITICAL: Allow suggestions container to shrink when items are hidden */
  min-height: auto !important; /* CRITICAL: Remove minimum height constraint */
  display: flex !important; /* Use flexbox for proper height calculation */
  flex-direction: column !important; /* Stack items vertically */
}

/* CRITICAL: Ensure main container shrinks when items are hidden */
#unified-autocomplete,
#unified-autocomplete .renter-autocomplete,
#unified-autocomplete > div {
  height: auto !important; /* Allow container to shrink dynamically */
  min-height: auto !important; /* Remove minimum height constraint */
  max-height: none !important; /* CRITICAL: Remove max-height to allow shrinking to visible items */
  display: flex !important; /* Use flexbox for proper height calculation */
  flex-direction: column !important; /* Stack children vertically */
}

/* CRITICAL: Ensure suggestions container shrinks when items are hidden */
#unified-autocomplete .autocomplete-suggestions {
  height: auto !important; /* Allow to shrink */
  min-height: auto !important; /* Remove minimum height */
  display: flex !important; /* Use flexbox */
  flex-direction: column !important; /* Stack items vertically */
}

/* Collapsed state: Limit height to show only first few items */
#unified-autocomplete .autocomplete-suggestions:not(.expanded),
#unified-autocomplete .autocomplete-suggestions[data-expanded="false"] {
  max-height: 240px !important; /* Show approximately 4 items */
  overflow-y: hidden !important; /* Hide overflow when collapsed */
}

/* Expanded state: Allow scrolling for all items */
#unified-autocomplete .autocomplete-suggestions.expanded,
#unified-autocomplete .autocomplete-suggestions[data-expanded="true"] {
  max-height: 320px !important; /* Allow scrolling when expanded */
  overflow-y: auto !important; /* Enable scrolling when expanded */
}

/* CRITICAL: Override any inline styles that might set height before "show more" is clicked */
#unified-autocomplete[style*="height"],
#unified-autocomplete .autocomplete-suggestions[style*="height"]:not([data-expanded="true"]) {
  height: auto !important; /* Override inline height styles when not expanded */
}

/* Show more/less button styling */
#unified-autocomplete .autocomplete-show-more {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 0.75rem 1rem !important;
  margin: 0.5rem 0 0 0 !important;
  cursor: pointer !important;
  color: #3b82f6 !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
  border-top: 1px solid rgba(229, 231, 235, 0.5) !important;
  background: transparent !important;
  border-radius: 0 !important;
  border-left: none !important;
  border-right: none !important;
  border-bottom: none !important;
}

#unified-autocomplete .autocomplete-show-more:hover {
  background-color: rgba(59, 130, 246, 0.05) !important;
  color: #2563eb !important;
}

#unified-autocomplete .autocomplete-show-more:active {
  background-color: rgba(59, 130, 246, 0.1) !important;
}

/* Icon rotation transition */
#unified-autocomplete .autocomplete-show-more svg {
  transition: transform 0.3s ease !important;
  flex-shrink: 0 !important;
}

/* Dark mode styles */
html.dark #unified-autocomplete .autocomplete-show-more,
body.dark #unified-autocomplete .autocomplete-show-more,
.dark #unified-autocomplete .autocomplete-show-more {
  color: #60a5fa !important;
  border-top-color: rgba(75, 85, 99, 0.5) !important;
}

html.dark #unified-autocomplete .autocomplete-show-more:hover,
body.dark #unified-autocomplete .autocomplete-show-more:hover,
.dark #unified-autocomplete .autocomplete-show-more:hover {
  background-color: rgba(96, 165, 250, 0.1) !important;
  color: #93c5fd !important;
}

/* RESPONSIVE HEIGHT FIX: Make autocomplete items height responsive to content */
#unified-autocomplete .autocomplete-item {
  min-height: auto !important; /* Remove fixed min-height */
  height: auto !important; /* Let content determine height */
  overflow: visible !important; /* Prevent individual item scrollbars */
  padding: 12px 16px !important; /* Consistent padding */
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
}

/* CRITICAL: Hide items with autocomplete-item-hidden class - must override all display rules */
#unified-autocomplete .autocomplete-item.autocomplete-item-hidden {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  flex-basis: 0 !important;
}

/* CRITICAL: Ensure flexbox container doesn't reserve space for hidden items */
#unified-autocomplete .autocomplete-suggestions:not(.expanded) .autocomplete-item-hidden,
#unified-autocomplete .autocomplete-suggestions[data-expanded="false"] .autocomplete-item-hidden {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 0 !important;
}

/* Ensure location names can expand naturally */
#unified-autocomplete .location-name,
#unified-autocomplete .suggestion-name {
  overflow: visible !important; /* Remove text overflow constraints */
  max-height: none !important; /* Remove height limits */
  height: auto !important; /* Let text determine height */
  line-height: 1.4 !important; /* Better line spacing */
  white-space: normal !important; /* Allow text wrapping */
  word-wrap: break-word !important; /* Break long words */
  word-break: break-word !important; /* Break long words */
  text-overflow: clip !important; /* Remove ellipsis */
}

/* AGGRESSIVE FIX: Target all container elements that might constrain height */
#unified-autocomplete .item-main,
#unified-autocomplete .item-header {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  min-height: auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  flex-wrap: wrap !important; /* Allow wrapping if needed */
}

/* NUCLEAR OPTION: Override any remaining constraints on suggestion items */
#unified-autocomplete .suggestion-item,
#unified-autocomplete .autocomplete-item.suggestion-item {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  min-height: auto !important;
  padding: 12px 16px !important;
  display: block !important; /* Change from flex to block for better text flow */
}

/* ULTIMATE OVERRIDE: Target the exact element structure from the HTML */
#unified-autocomplete .autocomplete-item.suggestion-item[data-type="google"] {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  min-height: auto !important;
  display: block !important;
}

#unified-autocomplete .autocomplete-item.suggestion-item[data-type="google"] .item-main {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  display: block !important;
}

#unified-autocomplete .autocomplete-item.suggestion-item[data-type="google"] .item-header {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

#unified-autocomplete .autocomplete-item.suggestion-item[data-type="google"] .suggestion-name {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  flex: 1 !important;
  line-height: 1.4 !important;
  /* CRITICAL: Remove all text truncation properties */
  text-overflow: clip !important;
  -webkit-line-clamp: none !important;
  line-clamp: none !important;
  -webkit-box-orient: initial !important;
  display: block !important; /* Override any -webkit-box display */
}

/* AGGRESSIVE OVERRIDE: Remove ellipsis from ALL autocomplete text elements */
#unified-autocomplete .location-name,
#unified-autocomplete .suggestion-name,
#unified-autocomplete .autocomplete-item .location-name,
#unified-autocomplete .autocomplete-item .suggestion-name,
#unified-autocomplete .suggestion-item .suggestion-name {
  text-overflow: clip !important; /* Remove ellipsis */
  -webkit-line-clamp: none !important; /* Remove line clamping */
  line-clamp: none !important; /* Remove line clamping */
  -webkit-box-orient: initial !important; /* Remove box orientation */
  display: block !important; /* Override -webkit-box display */
  overflow: visible !important;
  white-space: normal !important;
  word-break: break-word !important;
  hyphens: auto !important; /* Add hyphenation for better breaks */
}

/* RESPONSIVE BOTTOM PADDING: Ensure last location field isn't pressed against bottom */
#unified-autocomplete {
  padding-bottom: 16px !important; /* Base padding for all sizes */
}

/* Responsive bottom padding based on screen size */
@media (max-width: 375px) {
  #unified-autocomplete {
    padding-bottom: 12px !important; /* Smaller padding for very small screens */
  }
}

@media (min-width: 340px) and (max-width: 640px) {
  #unified-autocomplete {
    padding-bottom: 14px !important; /* Medium padding for mobile */
  }
}

@media (min-width: 641px) and (max-width: 1023px) {
  #unified-autocomplete {
    padding-bottom: 18px !important; /* Larger padding for tablets */
  }
}

@media (min-width: 1024px) {
  #unified-autocomplete {
    padding-bottom: 20px !important; /* Maximum padding for desktop */
  }
}

/* Responsive height based on screen size */
@media (max-width: 375px) {
  #unified-autocomplete .autocomplete-item {
    min-height: 40px !important; /* Minimum for very small screens */
    padding: 8px 12px !important; /* Tighter padding for small screens */
  }
}

@media (min-width: 340px) and (max-width: 640px) {
  #unified-autocomplete .autocomplete-item {
    min-height: 44px !important; /* Minimum for mobile */
    padding: 10px 14px !important; /* Mobile padding */
  }
}

@media (min-width: 641px) {
  #unified-autocomplete .autocomplete-item {
    min-height: 48px !important; /* Minimum for tablet+ */
    padding: 12px 16px !important; /* Desktop padding */
  }
}

/* GLOBAL FIX: Ensure main container handles all scrolling - DISABLED to prevent scrollbar */
/* Commented out to prevent unwanted scrollbars that affect dropdown positioning */
/*
#unified-autocomplete {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: 400px !important;
}
*/

/* GLOBAL FIX: Remove any other potential scrolling containers */
#unified-autocomplete .pac-container,
#unified-autocomplete > div,
#unified-autocomplete .autocomplete-input-container,
#unified-autocomplete .autocomplete-search-section {
  overflow: visible !important;
  max-height: none !important;
}

/* GLOBAL FIX: Ensure Google Places containers don't create scrollbars */
.pac-container {
  overflow: visible !important;
  max-height: none !important;
}

/* AGGRESSIVE FIX: Target all possible scrolling containers within autocomplete */
#unified-autocomplete *:not(#unified-autocomplete) {
  overflow-y: visible !important;
  max-height: none !important;
}

/* NUCLEAR OPTION: Force single scrollbar architecture - DISABLED for location dropdown */
/* Commented out to prevent unwanted scrollbars that affect dropdown positioning */
/*
#unified-autocomplete,
#unified-autocomplete[style*="overflow"] {
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
*/

/* Ensure no nested scrollable areas */
#unified-autocomplete .pac-item,
#unified-autocomplete .autocomplete-suggestions,
#unified-autocomplete .pac-container,
#unified-autocomplete > div,
#unified-autocomplete section,
#unified-autocomplete article {
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  max-height: none !important;
}

/* ==============================================
 * POLISHED MOBILE TOP BAR LAYOUT
 * ============================================== */

/* SMALL PHONE: ≤375px - Ultra-compact for very small screens */
@media (max-width: 375px) {
  /* Top bar container - ultra-compact */
  html body.discover-page .discover-top-bar,
  body.discover-page .discover-top-bar,
  .discover-top-bar {
    height: 3.5rem !important; /* Compact height */
    padding: 0.25rem 0.5rem !important;
  }
  
  /* Location field - ultra-compact for "Where" */
  html body.discover-page .discover-top-bar .search-field-container,
  body.discover-page .discover-top-bar .search-field-container,
  .discover-top-bar .search-field-container {
    flex: 0 0 40px !important; /* Ultra-compact for "Where" */
    width: 40px !important;
    max-width: 40px !important;
    min-width: 40px !important;
  }
  
  /* Datetime field - ultra-compact */
  html body.discover-page .discover-top-bar .datetime-field-container,
  body.discover-page .discover-top-bar .datetime-field-container,
  div.discover-top-bar.fixed .datetime-field-container {
    flex: 0 0 70px !important;
    width: 70px !important;
    max-width: 70px !important;
    min-width: 70px !important;
    margin-left: -0.5rem !important; /* Negative margin to pull left */
  }
  
  /* SwiftSpot logo - ultra-small - Maximum specificity */
  html body.discover-page .discover-top-bar .flex-shrink-0:first-child img,
  html body.discover-page .discover-top-bar .logo img,
  body.discover-page .discover-top-bar .flex-shrink-0:first-child img,
  body.discover-page .discover-top-bar .logo img,
  .discover-page .discover-top-bar .flex-shrink-0:first-child img,
  .discover-page .discover-top-bar .logo img,
  .discover-top-bar .flex-shrink-0:first-child img,
  .discover-top-bar .logo img {
    height: 16px !important; /* Ultra-small logo for very small phones */
    width: auto !important;
    max-height: 16px !important; /* Ensure it doesn't exceed this */
    min-height: 16px !important; /* Ensure consistent sizing */
  }
  
  /* MOVED: Search field font styling moved to search.css for proper cascade order */
  
  /* Hide all responsive spans and show "Where to" on very small phones */
  html body.discover-page .discover-top-bar .search-display-container .search-button-display span,
  body.discover-page .discover-top-bar .search-display-container .search-button-display span,
  .discover-top-bar .search-display-container .search-button-display span {
    display: none !important; /* Hide all spans */
  }
  
  /* Show "Where to" using CSS content on very small phones */
  html body.discover-page .discover-top-bar .search-display-container .search-button-display::before,
  body.discover-page .discover-top-bar .search-display-container .search-button-display::before,
  .discover-top-bar .search-display-container .search-button-display::before {
    content: "Where to" !important;
    color: #111827 !important; /* gray-900 - matches datetime field text color */
    font-weight: 600 !important;
    font-size: 0.58rem !important; /* 8px */
    display: block !important;
  }
  
}

/* ULTRA-MOBILE: 340px-519px - Maximum compactness (matches mobile range) */
@media (min-width: 340px) and (max-width: 520px) {
  /* Top bar container - ultra-compact */
  html body.discover-page .discover-top-bar,
  body.discover-page .discover-top-bar,
  .discover-top-bar {
    height: 4rem !important; /* Compact height */
    min-height: 4rem !important;
    padding: 0.5rem 0.75rem !important; /* Minimal padding */
    display: flex !important;
    align-items: center !important;
    gap: 0.25rem !important; /* Minimal gap */
  }
  
  /* Logo - ultra-compact */
  html body.discover-page .discover-top-bar .flex-shrink-0:first-child,
  body.discover-page .discover-top-bar .flex-shrink-0:first-child,
  .discover-top-bar .flex-shrink-0:first-child {
    flex: 0 0 auto !important;
    margin-right: 0rem !important;
  }
  
  /* Make SwiftSpot logo smaller on ultra-mobile - Maximum specificity */
  html body.discover-page .discover-top-bar .flex-shrink-0:first-child img,
  html body.discover-page .discover-top-bar .logo img,
  body.discover-page .discover-top-bar .flex-shrink-0:first-child img,
  body.discover-page .discover-top-bar .logo img,
  .discover-page .discover-top-bar .flex-shrink-0:first-child img,
  .discover-page .discover-top-bar .logo img,
  .discover-top-bar .flex-shrink-0:first-child img,
  .discover-top-bar .logo img {
    height: 20px !important; /* Reduced from default 32px for small phones */
    width: auto !important;
    max-height: 20px !important; /* Ensure it doesn't exceed this */
    min-height: 20px !important; /* Ensure consistent sizing */
  }
  
  /* Search field - ultra-compact - UPDATED TO 100px FOR SMALL PHONES */
  html body.discover-page .discover-top-bar .flex-1.min-w-0:has(.search-display-container),
  html body.discover-page .discover-top-bar .search-field-container,
  html body.discover-page .discover-top-bar .flex-1.min-w-0 .search-display-container,
  body.discover-page .discover-top-bar .flex-1.min-w-0:has(.search-display-container),
  body.discover-page .discover-top-bar .search-field-container,
  body.discover-page .discover-top-bar .flex-1.min-w-0 .search-display-container,
  .discover-top-bar .flex-1.min-w-0:has(.search-display-container),
  .discover-top-bar .search-field-container,
  .discover-top-bar .flex-1.min-w-0 .search-display-container {
    flex: 0 0 100px !important; /* Updated to 100px for small phones */
    width: 127px !important;
    max-width: 145px !important;
    min-width: 100px !important;
    flex-grow: 0 !important; /* Prevent growing */
  }
  
  /* DateTime field - ultra-compact with negative left margin - NUCLEAR SPECIFICITY */
  html body.discover-page .discover-top-bar .datetime-field-container.flex.flex-col.gap-0.min-w-0.flex-1.relative,
  html body.discover-page .discover-top-bar div.datetime-field-container.flex.flex-col,
  html body.discover-page .discover-top-bar .datetime-field-container,
  body.discover-page .discover-top-bar .datetime-field-container.flex.flex-col.gap-0,
  body.discover-page .discover-top-bar .datetime-field-container,
  .discover-page .discover-top-bar .datetime-field-container.flex.flex-col,
  .discover-top-bar .datetime-field-container.flex.flex-col.gap-0.min-w-0.flex-1,
  .discover-top-bar .datetime-field-container,
  html body .discover-top-bar .datetime-field-container,
  html body div.discover-top-bar .datetime-field-container,
  body .discover-top-bar .datetime-field-container,
  .discover-top-bar .flex.items-center.gap-2.flex-1.min-w-0 .datetime-field-container,
  div.discover-top-bar.fixed .datetime-field-container {
    flex: 0 0 90px !important;
    width: 90px !important;
    max-width: 90px !important;
    min-width: 90px !important;
    margin-left: -0.5rem !important; /* Negative margin to pull datetime field left on small phones - direct value for easier debugging */
  }

  /* NUCLEAR OPTION: Override any CSS variable usage with direct margin - ULTRA HIGH SPECIFICITY */
  html[lang] body.discover-page .discover-top-bar .datetime-field-container.flex.flex-col.gap-0.min-w-0.flex-1.relative,
  html[lang] body.discover-page .discover-top-bar div.datetime-field-container.flex.flex-col.gap-0,
  html[lang] body.discover-page .discover-top-bar .datetime-field-container.flex,
  html[lang] body.discover-page .discover-top-bar .datetime-field-container {
    margin-left: -7.5rem !important; /* Force negative margin regardless of CSS variables */
    margin-right: 0 !important;
  }
  
  /* Override CSS variable for ultra-mobile with maximum specificity */
  html body.discover-page .discover-top-bar,
  body.discover-page .discover-top-bar,
  .discover-page .discover-top-bar,
  .discover-top-bar,
  /* Datetime margin handled directly in selectors for easier debugging */

  /* FINAL OVERRIDE: Ensure this rule wins over all other media queries and CSS variables */
  html[lang="en"] body.discover-page .discover-top-bar .datetime-field-container,
  html body.discover-page .discover-top-bar .datetime-field-container[class*="flex"],
  body.discover-page .discover-top-bar div.datetime-field-container[class*="gap-0"] {
    margin-left: 0rem !important; /* Ultra-specific negative margin for small phones */
    margin-right: 0rem !important;
  }
  
  /* Display containers - compact but with adequate height for text */
  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 .search-display-container,
  body.discover-page .discover-top-bar .datetime-display-container,
  .discover-top-bar .search-display-container,
  .discover-top-bar .datetime-display-container {
    height: auto !important; /* Flexible height to fit content */
    min-height: 3rem !important; /* Minimum height for touch targets */
    max-height: none !important; /* Allow expansion for content */
    padding: 0rem 0rem !important; /* Increased padding for text spacing */
    border-radius: 0.5rem !important; /* Smaller radius */
    overflow-y: visible !important; /* Allow vertical expansion */
  }
  
  /* Icon containers - ultra-compact */
  html body.discover-page .discover-top-bar .datetime-display-container .flex-shrink-0:first-child,
  body.discover-page .discover-top-bar .datetime-display-container .flex-shrink-0:first-child,
  .discover-top-bar .datetime-display-container .flex-shrink-0:first-child {
    margin-left: -0.25rem !important;
    margin-right: 0.125rem !important;
  }
  
  /* Text content - ultra-compact */
  html body.discover-page .discover-top-bar .datetime-display-container .flex-1,
  html body.discover-page .discover-top-bar .search-display-container .flex-1,
  body.discover-page .discover-top-bar .datetime-display-container .flex-1,
  body.discover-page .discover-top-bar .search-display-container .flex-1,
  .discover-top-bar .datetime-display-container .flex-1,
  .discover-top-bar .search-display-container .flex-1 {
    font-size: 0.625rem !important; /* 10px */
    line-height: 1.1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
  }
  
  /* Fix datetime placeholder text vertical centering */
  html body.discover-page .discover-top-bar .datetime-display-container #datetime-display-value,
  body.discover-page .discover-top-bar .datetime-display-container #datetime-display-value,
  .discover-top-bar .datetime-display-container #datetime-display-value {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    line-height: 1 !important;
  }
  
  /* Fix datetime placeholder text spans */
  html body.discover-page .discover-top-bar .datetime-display-container #datetime-display-value span,
  body.discover-page .discover-top-bar .datetime-display-container #datetime-display-value span,
  .discover-top-bar .datetime-display-container #datetime-display-value span {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
  }
  
  /* AGGRESSIVE: Force perfect vertical centering for datetime text */
  html body.discover-page .discover-top-bar .datetime-display-container #datetime-display-value,
  body.discover-page .discover-top-bar .datetime-display-container #datetime-display-value,
  .discover-top-bar .datetime-display-container #datetime-display-value {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 100% !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* NUCLEAR: Force all datetime text spans to be perfectly centered */
  html body.discover-page .discover-top-bar .datetime-display-container #datetime-display-value > *,
  body.discover-page .discover-top-bar .datetime-display-container #datetime-display-value > *,
  .discover-top-bar .datetime-display-container #datetime-display-value > * {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
  }
  
  /* Change search field text to "Where" on ultra-mobile */
  html body.discover-page .discover-top-bar .search-display-container #search-input-display-value,
  body.discover-page .discover-top-bar .search-display-container #search-input-display-value,
  .discover-top-bar .search-display-container #search-input-display-value {
    font-size: 0.625rem !important; /* 10px to fit "Where" */
    font-weight: 600 !important; /* Bold for visibility */
  }
  
  /* Hide original text and show "Where" using CSS content */
  html body.discover-page .discover-top-bar .search-display-container #search-input-display-value:empty::before,
  body.discover-page .discover-top-bar .search-display-container #search-input-display-value:empty::before,
  .discover-top-bar .search-display-container #search-input-display-value:empty::before {
    content: "Where" !important;
    color: #111827 !important; /* gray-900 - matches datetime field text color */
    font-weight: 600 !important;
  }
}

/* CRITICAL: All breakpoints above 521px - Make logo smaller to match size below 521px */
@media (min-width: 521px) {
  /* Make SwiftSpot logo smaller on all screens above 521px - Maximum specificity */
  html body.discover-page .discover-top-bar .flex-shrink-0:first-child img,
  html body.discover-page .discover-top-bar .logo img,
  body.discover-page .discover-top-bar .flex-shrink-0:first-child img,
  body.discover-page .discover-top-bar .logo img,
  .discover-page .discover-top-bar .flex-shrink-0:first-child img,
  .discover-page .discover-top-bar .logo img,
  .discover-top-bar .flex-shrink-0:first-child img,
  .discover-top-bar .logo img,
  .discover-top-bar img {
    height: 20px !important; /* Match size below 521px breakpoint */
    width: auto !important;
    max-height: 20px !important; /* Ensure it doesn't exceed this */
    min-height: 20px !important; /* Ensure consistent sizing */
  }
}

/* MOBILE: 340px-519px - Compact but readable (mobile only, tablet starts at 520px) */
@media (min-width: 340px) and (max-width: 520px) {
  /* Top bar container - compact */
  html body.discover-page .discover-top-bar,
  body.discover-page .discover-top-bar,
  .discover-top-bar {
    height: 4.5rem !important;
    min-height: 4.5rem !important;
    padding: 0.75rem 1rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }
  
  /* Make SwiftSpot logo smaller on mobile - Maximum specificity */
  html body.discover-page .discover-top-bar .flex-shrink-0:first-child img,
  html body.discover-page .discover-top-bar .logo img,
  body.discover-page .discover-top-bar .flex-shrink-0:first-child img,
  body.discover-page .discover-top-bar .logo img,
  .discover-page .discover-top-bar .flex-shrink-0:first-child img,
  .discover-page .discover-top-bar .logo img,
  .discover-top-bar .flex-shrink-0:first-child img,
  .discover-top-bar .logo img {
    height: 20px !important; /* Match size below 521px breakpoint */
    width: auto !important;
    max-height: 20px !important; /* Ensure it doesn't exceed this */
    min-height: 20px !important; /* Ensure consistent sizing */
  }
  
  /* Search field - compact */
  html body.discover-page .discover-top-bar .search-field-container,
  body.discover-page .discover-top-bar .search-field-container,
  .discover-top-bar .search-field-container {
    flex: 0 0 80px !important; /* More compact for "Where" */
    width: 80px !important;
    max-width: 80px !important;
    min-width: 80px !important;
  }
  
  /* DateTime field - compact */
  html body.discover-page .discover-top-bar .datetime-field-container,
  body.discover-page .discover-top-bar .datetime-field-container,
  .discover-top-bar .datetime-field-container,
  html body .discover-top-bar .datetime-field-container,
  html body div.discover-top-bar .datetime-field-container,
  body .discover-top-bar .datetime-field-container,
  .discover-top-bar .flex.items-center.gap-2.flex-1.min-w-0 .datetime-field-container,
  div.discover-top-bar.fixed .datetime-field-container {
    flex: 0 0 140px !important;
    width: 140px !important;
    max-width: 140px !important;
    min-width: 140px !important;
    margin-left: 0.75rem !important; /* Override search.css variable */
  }
  
  /* Override CSS variable for mobile */
  /* Datetime margin handled directly in selectors for easier debugging */
  
  /* Display containers - compact but with adequate height for text */
  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 .search-display-container,
  body.discover-page .discover-top-bar .datetime-display-container,
  .discover-top-bar .search-display-container,
  .discover-top-bar .datetime-display-container {
    height: auto !important; /* Flexible height to fit content */
    min-height: 3.5rem !important; /* Minimum height for touch targets */
    max-height: none !important; /* Allow expansion for content */
    padding: 0rem 0rem !important; /* Increased padding for text spacing */
    border-radius: 0.625rem !important;
    overflow-y: visible !important; /* Allow vertical expansion */
  }
  
  /* Icon containers - compact */
  html body.discover-page .discover-top-bar .datetime-display-container .flex-shrink-0:first-child,
  body.discover-page .discover-top-bar .datetime-display-container .flex-shrink-0:first-child,
  .discover-top-bar .datetime-display-container .flex-shrink-0:first-child {
    margin-left: -0.375rem !important;
    margin-right: 0.25rem !important;
  }
  
  /* Text content - compact */
  html body.discover-page .discover-top-bar .datetime-display-container .flex-1,
  html body.discover-page .discover-top-bar .search-display-container .flex-1,
  body.discover-page .discover-top-bar .datetime-display-container .flex-1,
  body.discover-page .discover-top-bar .search-display-container .flex-1,
  .discover-top-bar .datetime-display-container .flex-1,
  .discover-top-bar .search-display-container .flex-1 {
    font-size: 0.75rem !important; /* 12px */
    line-height: 1.2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
  }
  
  /* Fix datetime placeholder text vertical centering */
  html body.discover-page .discover-top-bar .datetime-display-container #datetime-display-value,
  body.discover-page .discover-top-bar .datetime-display-container #datetime-display-value,
  .discover-top-bar .datetime-display-container #datetime-display-value {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    line-height: 1 !important;
  }
  
  /* Fix datetime placeholder text spans */
  html body.discover-page .discover-top-bar .datetime-display-container #datetime-display-value span,
  body.discover-page .discover-top-bar .datetime-display-container #datetime-display-value span,
  .discover-top-bar .datetime-display-container #datetime-display-value span {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
  }
  
  /* Additional vertical centering for datetime content wrapper */
  html body.discover-page .discover-top-bar .datetime-display-container .relative,
  body.discover-page .discover-top-bar .datetime-display-container .relative,
  .discover-top-bar .datetime-display-container .relative {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
  }
  
  /* Ensure inner flex container is centered */
  html body.discover-page .discover-top-bar .datetime-display-container .flex.items-center,
  body.discover-page .discover-top-bar .datetime-display-container .flex.items-center,
  .discover-top-bar .datetime-display-container .flex.items-center {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    min-height: 2.5rem !important;
  }
  
  /* AGGRESSIVE: Force perfect vertical centering for datetime text */
  html body.discover-page .discover-top-bar .datetime-display-container #datetime-display-value,
  body.discover-page .discover-top-bar .datetime-display-container #datetime-display-value,
  .discover-top-bar .datetime-display-container #datetime-display-value {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 100% !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* NUCLEAR: Force all datetime text spans to be perfectly centered */
  html body.discover-page .discover-top-bar .datetime-display-container #datetime-display-value > *,
  body.discover-page .discover-top-bar .datetime-display-container #datetime-display-value > *,
  .discover-top-bar .datetime-display-container #datetime-display-value > * {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
  }
  
  /* Change search field text to "Where" on mobile */
  html body.discover-page .discover-top-bar .search-display-container #search-input-display-value,
  body.discover-page .discover-top-bar .search-display-container #search-input-display-value,
  .discover-top-bar .search-display-container #search-input-display-value {
    font-size: 0.75rem !important; /* 12px to fit "Where" */
    font-weight: 600 !important; /* Bold for visibility */
  }
  
  /* Hide original text and show "Where" using CSS content */
  html body.discover-page .discover-top-bar .search-display-container #search-input-display-value:empty::before,
  body.discover-page .discover-top-bar .search-display-container #search-input-display-value:empty::before,
  .discover-top-bar .search-display-container #search-input-display-value:empty::before {
    content: "Where" !important;
    color: #111827 !important; /* gray-900 - matches datetime field text color */
    font-weight: 600 !important;
  }
}

/* SHARED MOBILE RULES: ≤519px (mobile only, tablet starts at 520px) */
@media (max-width: 520px) {
  /* Override Tailwind responsive classes */
  html body.discover-page .discover-top-bar .max-w-\[140px\],
  html body.discover-page .discover-top-bar .max-w-\[180px\],
  html body.discover-page .discover-top-bar .max-w-\[220px\],
  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: none !important; /* Let our rules control width */
  }
  
  /* CRITICAL OVERRIDE: Force unified positioning for mobile - override search.css and topbar.css */
  html body.discover-page #unified-autocomplete.visible,
  html body.discover-page #unified-autocomplete[style*="display: block"],
  html body.discover-page #unified-autocomplete,
  body.discover-page #unified-autocomplete.visible,
  body.discover-page #unified-autocomplete[style*="display: block"],
  body.discover-page #unified-autocomplete,
  #unified-autocomplete.visible,
  #unified-autocomplete[style*="display: block"],
  #unified-autocomplete {
    left: 0.5rem !important; /* UNIFIED - Override search.css */
    right: 0.5rem !important; /* UNIFIED - Override topbar.css */
  }
  
  
  /* RESPONSIVE AUTOCOMPLETE DROPDOWN - ALL SCREEN SIZES */
  
  /* Small Phone: ≤375px - Ultra-compact dropdown with reduced margins for narrower width */
  @media (max-width: 375px) {
    /* ULTRA HIGH SPECIFICITY: Override search.css width constraints */
    html body.discover-page #unified-autocomplete.visible,
    html body.discover-page #unified-autocomplete[style*="display: block"],
    html body.discover-page #unified-autocomplete,
    body.discover-page #unified-autocomplete.visible,
    body.discover-page #unified-autocomplete[style*="display: block"],
    body.discover-page #unified-autocomplete,
    #unified-autocomplete.visible,
    #unified-autocomplete[style*="display: block"],
    #unified-autocomplete {
      position: fixed !important;
      top: 3.5rem !important; /* Below ultra-compact top bar */
      left: 1rem !important; /* Narrower dropdown - more margin */
      right: auto !important; /* Use left + width instead of right */
      width: calc(100vw - 2rem) !important; /* Explicit narrower width - prevents overflow */
      max-width: calc(100vw - 2rem) !important; /* Ensure proper width constraint */
      box-sizing: border-box !important;
      transform: none !important; /* Remove transform */
      overflow-x: hidden !important; /* CRITICAL: Prevent horizontal overflow */
    }
    
    /* Small phone: Ultra-compact content */
    #unified-autocomplete .autocomplete-input-container {
      padding: 0.5rem 0.75rem !important; /* More touch-friendly padding */
      font-size: 0.875rem !important; /* Readable text size */
    }
    
    /* CRITICAL: Prevent auto-zoom - input field must be >= 16px */
    #unified-autocomplete .autocomplete-input-container .dropdown-search-input,
    #unified-autocomplete .dropdown-search-input {
      font-size: 16px !important; /* Prevent iOS Safari auto-zoom */
    }
    
    #unified-autocomplete .pac-item {
      padding: 0.625rem 0.75rem !important; /* More touch-friendly padding */
      font-size: 0.875rem !important; /* Readable text size */
    }
    
    /* More compact autocomplete items on small phones */
    #unified-autocomplete .autocomplete-item {
      padding: 0.625rem 0.75rem !important; /* Touch-friendly but compact */
      min-height: 44px !important; /* Compact height */
    }
    
    /* ULTRA HIGH SPECIFICITY: Override renter-autocomplete.css font sizes */
    html body.discover-page #unified-autocomplete .location-name,
    html body.discover-page #unified-autocomplete .suggestion-name,
    body.discover-page #unified-autocomplete .location-name,
    body.discover-page #unified-autocomplete .suggestion-name,
    #unified-autocomplete .location-name,
    #unified-autocomplete .suggestion-name {
      font-size: 0.8125rem !important; /* 13px - Readable but compact */
      line-height: 1.35 !important; /* Tighter line height */
    }
    
    /* SMALL PHONE: Ensure all autocomplete items are fully visible */
    html body.discover-page #unified-autocomplete .autocomplete-item,
    body.discover-page #unified-autocomplete .autocomplete-item,
    #unified-autocomplete .autocomplete-item {
      opacity: 1 !important; /* Ensure full opacity */
      visibility: visible !important; /* Ensure visibility */
      display: block !important; /* Ensure display */
      min-height: 40px !important; /* Allow space for 2 lines */
    }
    
    /* CRITICAL: Hide items with autocomplete-item-hidden class - must override above rule */
    html body.discover-page #unified-autocomplete .autocomplete-item.autocomplete-item-hidden,
    body.discover-page #unified-autocomplete .autocomplete-item.autocomplete-item-hidden,
    #unified-autocomplete .autocomplete-item.autocomplete-item-hidden {
      display: none !important; /* Hide hidden items */
      opacity: 0 !important;
      visibility: hidden !important;
    }
    
    /* SMALL PHONE: Allow popular locations to wrap to 2 lines */
    html body.discover-page #unified-autocomplete .location-name,
    html body.discover-page #unified-autocomplete .suggestion-name,
    body.discover-page #unified-autocomplete .location-name,
    body.discover-page #unified-autocomplete .suggestion-name,
    #unified-autocomplete .location-name,
    #unified-autocomplete .suggestion-name {
      white-space: normal !important; /* Allow wrapping */
      line-height: 1.3 !important; /* Tighter line spacing for mobile */
      max-height: 2.6em !important; /* Limit to ~2 lines */
      overflow: hidden !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
      word-break: break-word !important;
    }
  }
  
  /* Ultra-Mobile: 340px-519px - Narrower width with consistent margins */
  @media (min-width: 340px) and (max-width: 520px) {
    /* ULTRA HIGH SPECIFICITY: Override search.css width constraints */
    html body.discover-page #unified-autocomplete.visible,
    html body.discover-page #unified-autocomplete[style*="display: block"],
    html body.discover-page #unified-autocomplete,
    body.discover-page #unified-autocomplete.visible,
    body.discover-page #unified-autocomplete[style*="display: block"],
    body.discover-page #unified-autocomplete,
    #unified-autocomplete.visible,
    #unified-autocomplete[style*="display: block"],
    #unified-autocomplete {
      position: fixed !important;
      top: 4rem !important; /* Below compact top bar */
      left: 1.25rem !important; /* Narrower dropdown - more margin */
      right: auto !important; /* Use left + width instead of right */
      width: calc(100vw - 2.5rem) !important; /* Explicit narrower width - prevents overflow */
      max-width: calc(100vw - 2.5rem) !important; /* Ensure proper width constraint */
      box-sizing: border-box !important;
      transform: none !important; /* Remove transform */
      overflow-x: hidden !important; /* CRITICAL: Prevent horizontal overflow */
    }
    
    /* Ultra-mobile: Compact content */
    #unified-autocomplete .autocomplete-input-container {
      padding: 0.625rem 0.875rem !important; /* Touch-friendly padding */
      font-size: 0.875rem !important; /* Readable text */
    }
    
    /* CRITICAL: Prevent auto-zoom - input field must be >= 16px */
    #unified-autocomplete .autocomplete-input-container .dropdown-search-input,
    #unified-autocomplete .dropdown-search-input {
      font-size: 16px !important; /* Prevent iOS Safari auto-zoom */
    }
    
    #unified-autocomplete .pac-item {
      padding: 0.75rem 0.875rem !important; /* Touch-friendly padding */
      font-size: 0.875rem !important; /* Readable text */
    }
    
    /* More compact autocomplete items */
    #unified-autocomplete .autocomplete-item {
      padding: 0.75rem 0.875rem !important; /* Touch-friendly but compact */
      min-height: 46px !important; /* Compact height */
    }
    
    /* ULTRA HIGH SPECIFICITY: Override renter-autocomplete.css font sizes */
    html body.discover-page #unified-autocomplete .location-name,
    html body.discover-page #unified-autocomplete .suggestion-name,
    body.discover-page #unified-autocomplete .location-name,
    body.discover-page #unified-autocomplete .suggestion-name,
    #unified-autocomplete .location-name,
    #unified-autocomplete .suggestion-name {
      font-size: 0.6875rem !important; /* 11px - Override 14px */
      white-space: normal !important; /* Allow wrapping */
      line-height: 1.3 !important; /* Tighter line spacing for mobile */
      max-height: 2.6em !important; /* Limit to ~2 lines */
      overflow: hidden !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
      word-break: break-word !important;
    }
    
    /* ULTRA-MOBILE: Allow space for 2-line popular locations */
    html body.discover-page #unified-autocomplete .autocomplete-item,
    body.discover-page #unified-autocomplete .autocomplete-item,
    #unified-autocomplete .autocomplete-item {
      min-height: 44px !important; /* Allow space for 2 lines */
    }
  }
  
  /* Mobile: 520px-567px - Narrower responsive width with consistent margins */
  @media (min-width: 521px) and (max-width: 567px) {
    /* ULTRA HIGH SPECIFICITY: Override search.css width constraints AND search.css positioning */
    html body.discover-page #unified-autocomplete.visible,
    html body.discover-page #unified-autocomplete[style*="display: block"],
    html body.discover-page #unified-autocomplete,
    body.discover-page #unified-autocomplete.visible,
    body.discover-page #unified-autocomplete[style*="display: block"],
    body.discover-page #unified-autocomplete,
    #unified-autocomplete.visible,
    #unified-autocomplete[style*="display: block"],
    #unified-autocomplete {
      position: fixed !important;
      top: 4.5rem !important; /* Below mobile top bar */
      left: 1.5rem !important; /* Narrower dropdown - more margin */
      right: auto !important; /* Use left + width instead of right */
      width: calc(100vw - 3rem) !important; /* Explicit narrower width - prevents overflow */
      max-width: calc(100vw - 3rem) !important; /* Ensure proper width constraint */
      box-sizing: border-box !important;
      transform: none !important; /* Remove transform */
      overflow-x: hidden !important; /* CRITICAL: Prevent horizontal overflow */
    }
    
    /* Mobile: Balanced content sizing with smaller text */
    #unified-autocomplete .autocomplete-input-container {
      padding: 0.5rem 0.75rem !important;
      font-size: 0.75rem !important; /* Smaller text for mobile */
    }
    
    /* CRITICAL: Prevent auto-zoom - input field must be >= 16px */
    #unified-autocomplete .autocomplete-input-container .dropdown-search-input,
    #unified-autocomplete .dropdown-search-input {
      font-size: 16px !important; /* Prevent iOS Safari auto-zoom */
    }
    
    #unified-autocomplete .pac-item {
      padding: 0.625rem 0.875rem !important;
      font-size: 0.75rem !important; /* Smaller text for mobile */
    }
    
    /* ULTRA HIGH SPECIFICITY: Override renter-autocomplete.css font sizes */
    html body.discover-page #unified-autocomplete .location-name,
    html body.discover-page #unified-autocomplete .suggestion-name,
    body.discover-page #unified-autocomplete .location-name,
    body.discover-page #unified-autocomplete .suggestion-name,
    #unified-autocomplete .location-name,
    #unified-autocomplete .suggestion-name {
      font-size: 0.75rem !important; /* 12px - Override 14px */
      white-space: normal !important; /* Allow wrapping */
      line-height: 1.4 !important; /* Good line spacing for mobile */
      max-height: 2.8em !important; /* Limit to ~2 lines */
      overflow: hidden !important;
      display: -webkit-box !important;
      -webkit-line-clamp: 2 !important;
      line-clamp: 2 !important;
      -webkit-box-orient: vertical !important;
      word-break: break-word !important;
    }
    
    /* MOBILE: Allow space for 2-line popular locations */
    html body.discover-page #unified-autocomplete .autocomplete-item,
    body.discover-page #unified-autocomplete .autocomplete-item,
    #unified-autocomplete .autocomplete-item {
      min-height: 48px !important; /* Allow space for 2 lines with larger text */
    }
  }
  
  /* Tablet: 568px-1023px - Smart width matching search field */
  @media (min-width: 568px) and (max-width: 1023px) {
    /* ULTRA HIGH SPECIFICITY: Override search.css width constraints */
    html body.discover-page #unified-autocomplete.visible,
    html body.discover-page #unified-autocomplete[style*="display: block"],
    html body.discover-page #unified-autocomplete,
    body.discover-page #unified-autocomplete.visible,
    body.discover-page #unified-autocomplete[style*="display: block"],
    body.discover-page #unified-autocomplete,
    #unified-autocomplete.visible,
    #unified-autocomplete[style*="display: block"],
    #unified-autocomplete {
      position: absolute !important;
      width: auto !important;
      min-width: 550px !important; /* Increased from 450px to better fit popular locations */
      max-width: calc(100vw - 2rem) !important;
      left: 0 !important;
      right: auto !important;
      box-sizing: border-box !important;
      transform: none !important;
    }
    
    /* Tablet: Comfortable content sizing with smaller text */
    #unified-autocomplete .autocomplete-input-container {
      padding: 0.625rem 1rem !important;
      font-size: 0.8125rem !important; /* Smaller text for tablet */
    }
    
    #unified-autocomplete .pac-item {
      padding: 0.75rem 1rem !important;
      font-size: 0.8125rem !important; /* Smaller text for tablet */
    }
    
    /* TABLET SPECIFIC: Allow dropdown to expand to fit content horizontally */
    html body.discover-page #unified-autocomplete .pac-item,
    html body.discover-page #unified-autocomplete .autocomplete-suggestions > *,
    html body.discover-page #unified-autocomplete .pac-item-query,
    body.discover-page #unified-autocomplete .pac-item,
    body.discover-page #unified-autocomplete .autocomplete-suggestions > *,
    body.discover-page #unified-autocomplete .pac-item-query,
    #unified-autocomplete .pac-item,
    #unified-autocomplete .autocomplete-suggestions > *,
    #unified-autocomplete .pac-item-query {
      max-width: none !important; /* Allow expansion beyond container */
      overflow: visible !important; /* Don't hide overflowing text */
      text-overflow: clip !important; /* Don't add ellipsis */
      white-space: nowrap !important; /* Keep text on single line for width expansion */
      width: max-content !important; /* Expand to fit content */
      min-width: 100% !important; /* At least as wide as container */
    }
    
    /* Ensure dropdown container expands to accommodate content */
    html body.discover-page #unified-autocomplete.visible,
    html body.discover-page #unified-autocomplete[style*="display: block"],
    html body.discover-page #unified-autocomplete,
    body.discover-page #unified-autocomplete.visible,
    body.discover-page #unified-autocomplete[style*="display: block"],
    body.discover-page #unified-autocomplete,
    #unified-autocomplete.visible,
    #unified-autocomplete[style*="display: block"],
    #unified-autocomplete {
      width: max-content !important; /* Expand to fit content */
      min-width: 450px !important; /* Minimum width maintained */
      max-width: calc(100vw - 2rem) !important; /* Respect viewport bounds */
      overflow: visible !important; /* Allow content to expand */
    }
  }
  
  /* Desktop: ≥1024px - Enhanced width to accommodate longest popular locations */
  @media (min-width: 1024px) {
    /* ULTRA HIGH SPECIFICITY: Override search.css width constraints */
    html body.discover-page #unified-autocomplete,
    body.discover-page #unified-autocomplete,
    #unified-autocomplete.visible,
    #unified-autocomplete[style*="display: block"],
    #unified-autocomplete {
      position: absolute !important;
      width: auto !important;
      min-width: 650px !important; /* Increased from 500px to fit longest locations */
      max-width: 750px !important; /* Increased from 600px for better accommodation */
      left: 0 !important;
      right: auto !important;
      box-sizing: border-box !important;
    }
    
    /* Desktop: Full-featured content sizing */
    #unified-autocomplete .autocomplete-input-container {
      padding: 0.75rem 1.25rem !important;
      font-size: 1rem !important;
    }
    
    #unified-autocomplete .pac-item {
      padding: 0.875rem 1.25rem !important;
      font-size: 1rem !important;
      line-height: 1.5 !important;
    }
  }
  
  /* UNIVERSAL CONTENT FITTING - ALL SIZES */
  #unified-autocomplete {
    /* Ensure content never overflows horizontally */
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  #unified-autocomplete .pac-item,
  #unified-autocomplete .autocomplete-suggestions > *,
  #unified-autocomplete .pac-item-query {
    /* Ensure all text content fits within container */
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    /* Allow multi-line display for long addresses */
    white-space: normal !important;
    line-height: 1.4 !important;
  }
  
  /* Long address handling - allow wrapping on larger screens */
  @media (min-width: 768px) {
    #unified-autocomplete .pac-item {
      white-space: normal !important;
      line-height: 1.4 !important;
      max-height: 3rem !important;
      overflow: hidden !important;
    }
  }
  
  /* Hide dropdown arrows on mobile to save space */
  html body.discover-page .discover-top-bar .datetime-display-container .flex-shrink-0:last-child,
  html body.discover-page .discover-top-bar .search-display-container .flex-shrink-0:last-child,
  body.discover-page .discover-top-bar .datetime-display-container .flex-shrink-0:last-child,
  body.discover-page .discover-top-bar .search-display-container .flex-shrink-0:last-child,
  .discover-top-bar .datetime-display-container .flex-shrink-0:last-child,
  .discover-top-bar .search-display-container .flex-shrink-0:last-child {
    display: none !important;
  }
  
  /* Hide datetime field labels on mobile */
  html body.discover-page .discover-top-bar .datetime-display-container .text-xs.font-medium.tracking-wide.uppercase,
  body.discover-page .discover-top-bar .datetime-display-container .text-xs.font-medium.tracking-wide.uppercase,
  .discover-top-bar .datetime-display-container .text-xs.font-medium.tracking-wide.uppercase {
    display: none !important;
  }
}

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

/* Fix vertical centering for location field text and icon under 768px */
@media (max-width: 768px) {
  /* Ensure search field containers are properly centered */
  html body.discover-page .discover-top-bar .search-field-container,
  body.discover-page .discover-top-bar .search-field-container,
  .discover-top-bar .search-field-container {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
  }
  
  /* Ensure search display containers are vertically centered */
  html body.discover-page .discover-top-bar .search-display-container,
  body.discover-page .discover-top-bar .search-display-container,
  .discover-top-bar .search-display-container {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
  }
  
  /* Ensure the inner content wrapper is centered */
  html body.discover-page .discover-top-bar .search-display-container .relative,
  body.discover-page .discover-top-bar .search-display-container .relative,
  .discover-top-bar .search-display-container .relative {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  /* Ensure the flex container inside search display is centered */
  html body.discover-page .discover-top-bar .search-display-container .flex.items-center,
  body.discover-page .discover-top-bar .search-display-container .flex.items-center,
  .discover-top-bar .search-display-container .flex.items-center {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
  }
  
  /* Add negative left margin to datetime field icon */
  html body.discover-page .discover-top-bar .datetime-display-container .flex-shrink-0:first-child,
  body.discover-page .discover-top-bar .datetime-display-container .flex-shrink-0:first-child,
  .discover-top-bar .datetime-display-container .flex-shrink-0:first-child {
    margin-left: 0.5rem !important; /* Pull datetime icon left */
  }
  
  /* COMPREHENSIVE DATETIME VERTICAL CENTERING FOR ALL SCREENS UNDER 768PX */
  
  /* Ensure datetime field containers are properly centered */
  html body.discover-page .discover-top-bar .datetime-field-container,
  body.discover-page .discover-top-bar .datetime-field-container,
  .discover-top-bar .datetime-field-container {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
  }
  
  /* Ensure datetime display containers are vertically centered */
  html body.discover-page .discover-top-bar .datetime-display-container,
  body.discover-page .discover-top-bar .datetime-display-container,
  .discover-top-bar .datetime-display-container {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
  }
  
  /* Ensure datetime content wrapper is centered */
  html body.discover-page .discover-top-bar .datetime-display-container .relative,
  body.discover-page .discover-top-bar .datetime-display-container .relative,
  .discover-top-bar .datetime-display-container .relative {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
  }
  
  /* Ensure datetime flex container is centered */
  html body.discover-page .discover-top-bar .datetime-display-container .flex.items-center,
  body.discover-page .discover-top-bar .datetime-display-container .flex.items-center,
  .discover-top-bar .datetime-display-container .flex.items-center {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
  }
  
  /* Ensure datetime text content is centered */
  html body.discover-page .discover-top-bar .datetime-display-container .flex-1,
  body.discover-page .discover-top-bar .datetime-display-container .flex-1,
  .discover-top-bar .datetime-display-container .flex-1 {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
  }
  
  /* AGGRESSIVE: Force perfect vertical centering for datetime text */
  html body.discover-page .discover-top-bar .datetime-display-container #datetime-display-value,
  body.discover-page .discover-top-bar .datetime-display-container #datetime-display-value,
  .discover-top-bar .datetime-display-container #datetime-display-value {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 100% !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* NUCLEAR: Force all datetime text spans to be perfectly centered */
  html body.discover-page .discover-top-bar .datetime-display-container #datetime-display-value > *,
  body.discover-page .discover-top-bar .datetime-display-container #datetime-display-value > *,
  .discover-top-bar .datetime-display-container #datetime-display-value > * {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !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 */
  html body.discover-page .discover-top-bar,
  body.discover-page .discover-top-bar,
  .discover-top-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 5rem !important;
    height: auto !important;
    padding: 1rem 1.5rem !important;
  }
  
  /* Ensure main flex container centers items vertically */
  html body.discover-page .discover-top-bar > div.flex.items-center.justify-between.w-full,
  body.discover-page .discover-top-bar > div.flex.items-center.justify-between.w-full,
  .discover-top-bar > div.flex.items-center.justify-between.w-full {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 100% !important;
    min-height: 3rem !important;
  }
  
  /* Ensure left side container centers items vertically */
  html body.discover-page .discover-top-bar .flex.items-center.gap-2.sm\\:gap-4.lg\\:gap-6.flex-1.min-w-0,
  body.discover-page .discover-top-bar .flex.items-center.gap-2.sm\\:gap-4.lg\\:gap-6.flex-1.min-w-0,
  .discover-top-bar .flex.items-center.gap-2.sm\\:gap-4.lg\\:gap-6.flex-1.min-w-0 {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    min-height: 3rem !important;
  }
  
  /* Ensure search and datetime field containers are vertically centered and less tall */
  html body.discover-page .discover-top-bar .search-field-container,
  html body.discover-page .discover-top-bar .datetime-field-container,
  body.discover-page .discover-top-bar .search-field-container,
  body.discover-page .discover-top-bar .datetime-field-container,
  .discover-top-bar .search-field-container,
  .discover-top-bar .datetime-field-container {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: auto !important; /* Flexible height to fit content */
    min-height: 2.5rem !important; /* Minimum height for touch targets */
    max-height: none !important; /* Allow expansion for content */
    overflow-y: visible !important; /* Allow vertical expansion */
  }
  
  /* Ensure display containers are vertically centered - FLEXIBLE HEIGHT */
  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 .search-display-container,
  body.discover-page .discover-top-bar .datetime-display-container,
  .discover-top-bar .search-display-container,
  .discover-top-bar .datetime-display-container {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: auto !important; /* Flexible height to fit content */
    min-height: 3.2rem !important; /* Minimum height for touch targets */
    max-height: none !important; /* Allow expansion for content */
    overflow-y: visible !important; /* Allow vertical expansion */
  }
}

/* MOBILE DROPDOWN MARGIN OVERRIDE - SIMPLE APPROACH */
@media (max-width: 375px) {
  #unified-autocomplete {
    left: 1rem !important;
    right: -0.25rem !important;
  }
}

@media (min-width: 340px) and (max-width: 520px) {
  #unified-autocomplete {
    left: 1rem !important;
    right: -0.25rem !important;
  }
}
/* OPTIMIZED: Reduced bottom padding for better scroll precision */
#listings-content-mobile,
.mobile-listings-container {
  padding-bottom: 2rem !important; /* Minimal bottom padding - precise scrollbar handles the rest */
}

/* SPOT DETAILS: Even less padding when spot details are open in bottom sheet */
.bottom-sheet-spot-details-mode #listings-content-mobile,
.bottom-sheet-spot-details-mode .mobile-listings-container {
  padding-bottom: 1rem !important; /* Minimal padding - precise scrollbar compensates */
}

/* PRECISE SCROLL OVERRIDE: Smart padding based on content type */
.precise-scroll-active.mobile-listings-container,
.precise-scroll-active#listings-content-mobile {
  padding-bottom: 0 !important; /* Default: no padding for precise scrolling */
  margin-bottom: 0 !important; /* No margin - precise boundary */
}

/* BOOK BUTTON ACCESS: Maximum padding when book button is present */
.spot-details-scroll-active.precise-scroll-active {
  padding-bottom: 20rem !important; /* Maximum padding for full book button access */
}

/* CRITICAL: Mobile touch - Extra padding for book button and content below */
@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
  #listings-sheet #listings-content-mobile.spot-details-scroll-active {
    padding-bottom: 4rem !important; /* Extra padding for mobile touch to ensure book button + content below are accessible */
  }
  
  .spot-details-scroll-active.precise-scroll-active {
    padding-bottom: 24rem !important; /* Increased from 20rem for mobile touch */
  }
}

/* COMPENSATING SCROLL: Enhanced scrolling when bottom sheet cuts off content */
.compensating-scroll-active {
  overflow-y: auto !important; /* Force scrolling when content is cut off */
  height: 100% !important; /* Take full available height */
  max-height: none !important; /* Remove height constraints */
  -webkit-overflow-scrolling: touch !important; /* Smooth iOS scrolling */
  overscroll-behavior: contain !important; /* Prevent page scroll */
}

/* Enhanced scrollbar for compensating scroll mode */
.compensating-scroll-active::-webkit-scrollbar {
  width: 4px !important; /* Slightly wider for better visibility */
}

.compensating-scroll-active::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.4) !important; /* Blue tint to indicate active scroll */
  border-radius: 2px !important;
}

.compensating-scroll-active::-webkit-scrollbar-thumb:hover {
  background: rgba(59, 130, 246, 0.6) !important; /* Darker on hover */
}

/* SPOT DETAILS: Enhanced scrolling for spot details content */
.spot-details-scroll-active {
  overflow-y: auto !important;
  height: 100% !important;
  max-height: calc(100vh - 100px) !important; /* Constrain scrollbar to stay within viewport */
  flex: 1 1 auto !important;
  min-height: 0 !important;
  position: relative !important; /* Ensure scrollbar stays within bounds */
  contain: layout !important; /* Contain scrollbar within element bounds */
}

.spot-details-scroll-active::-webkit-scrollbar {
  width: 4px !important; /* Optimal width for visibility without intrusion */
  position: absolute !important; /* Keep scrollbar positioned correctly */
}

.spot-details-scroll-active::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.05) !important; /* Subtle track for better visual reference */
  border-radius: 2px !important;
  margin: 8px 0 8px 0 !important; /* Top and bottom margin to keep scrollbar within bounds */
  max-height: calc(100% - 16px) !important; /* Ensure track doesn't exceed container */
}

.spot-details-scroll-active::-webkit-scrollbar-thumb {
  background: rgba(34, 197, 94, 0.4) !important; /* Green tint for spot details */
  border-radius: 2px !important;
  min-height: 20px !important; /* Minimum thumb size for usability */
  margin: 2px !important; /* Keep thumb within track bounds */
}

.spot-details-scroll-active::-webkit-scrollbar-thumb:hover {
  background: rgba(34, 197, 94, 0.6) !important; /* Darker green on hover */
}

/* Dark mode scrollbar for spot details */
.dark .spot-details-scroll-active::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.05) !important;
}

.dark .spot-details-scroll-active::-webkit-scrollbar-thumb {
  background: rgba(34, 197, 94, 0.3) !important;
}

.dark .spot-details-scroll-active::-webkit-scrollbar-thumb:hover {
  background: rgba(34, 197, 94, 0.5) !important;
}

/* CRITICAL: Bottom sheet specific scrollbar constraints to prevent overflow */
#listings-sheet .spot-details-scroll-active {
  max-height: calc(100vh - 120px) !important; /* Account for bottom sheet header and margins */
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* CRITICAL: Mobile touch - Use more accurate height calculation for spot details */
@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
  /* Override both general and specific spot-details-scroll-active rules */
  .spot-details-scroll-active,
  #listings-sheet .spot-details-scroll-active {
    /* CRITICAL: Allow JavaScript to set height dynamically via inline styles */
    /* Remove fixed max-height constraint - let JS calculate based on actual sheet position */
    max-height: none !important;
    /* Use 100vh as fallback, but JS will override with precise calculation */
    height: 100% !important;
    /* Ensure it can expand to full available height */
    min-height: 0 !important;
    /* Remove contain constraint that might limit expansion */
    contain: none !important;
  }
}

/* CRITICAL: Bottom sheet spot details - ensure bottom spacer provides padding */
#listings-sheet .spot-details-container .spot-details-bottom-spacer {
  height: 120px !important; /* Generous bottom padding to ensure last content is visible */
  width: 100% !important;
  visibility: hidden !important; /* Invisible but still takes up space */
  pointer-events: none !important; /* Don't interfere with interactions */
  flex-shrink: 0 !important; /* Prevent flexbox from shrinking it */
  display: block !important; /* Ensure it takes up space */
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important; /* Fully transparent */
}

/* CRITICAL: Mobile touch - Prevent overlap, ensure proper vertical stacking */
@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
  /* CRITICAL: Photo gallery proper spacing - NO overlap with book button */
  #listings-sheet .spot-details-container .photo-gallery-compact {
    margin-bottom: 0.75rem !important; /* Adequate space below photo */
    position: relative !important;
    transform: none !important;
  }
  
  #listings-sheet .spot-details-container .spot-details-bottom-spacer {
    height: 150px !important; /* Bottom padding for scroll */
  }
  
  /* Content container padding */
  #listings-sheet #listings-content-mobile.spot-details-scroll-active {
    padding-bottom: 1.5rem !important;
  }
  
  /* CRITICAL: Book button container - proper stacking, NO transforms */
  #listings-sheet .spot-details-container div.mb-6:has(#spot-detail-book),
  #listings-sheet .spot-details-container .mb-6.bg-gradient-to-r.from-blue-50.to-blue-100:has(#spot-detail-book) {
    position: relative !important;
    margin-top: 0rem !important;
    margin-bottom: 0rem !important;
    transform: none !important; /* CRITICAL: Remove ALL transforms */
    position: relative !important; /* Ensure it's in normal flow, not overlapping */
  }
  
  /* CRITICAL: Ensure features section has proper spacing - NO OVERLAP */
  #listings-sheet .spot-details-container .luxury-features {
    margin-top: 0rem !important; /* Space above features section */
    margin-bottom: 0rem !important; /* Space below features section */
    position: relative !important;
    transform: none !important; /* CRITICAL: No transforms */
    display: block !important;
  }
  
  /* CRITICAL: About/description section - proper stacking */
  #listings-sheet .spot-details-container .luxury-description {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
    position: relative !important;
    transform: none !important;
    display: block !important;
  }
  
  /* CRITICAL: Feature chips container - no transforms causing overlap */
  #listings-sheet .spot-details-container .feature-chips,
  #listings-sheet .luxury-features .feature-chips {
    transform: none !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }
  
  /* CRITICAL: Section labels - no transforms */
  #listings-sheet .spot-details-container .section-label {
    transform: none !important;
    margin-left: 0 !important;
  }
}

/* CRITICAL: Prevent double scrollbars - only listings-content-mobile should scroll */
#listings-sheet .spot-details-container {
  overflow: visible !important; /* CRITICAL: Don't scroll - parent handles scrolling */
  overflow-y: visible !important;
  overflow-x: visible !important;
  height: auto !important; /* Let content determine height */
  max-height: none !important; /* No height constraint */
  position: relative !important;
}

/* CRITICAL: Ensure no nested scrolling containers within spot details */
#listings-sheet .spot-details-container > *,
#listings-sheet .spot-details-container .luxury-header,
#listings-sheet .spot-details-container .luxury-features,
#listings-sheet .spot-details-container .luxury-description,
#listings-sheet .spot-details-container .luxury-info-grid,
#listings-sheet .spot-details-container .cancellation-policy-container,
#listings-sheet .spot-details-container .reviews-section {
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  max-height: none !important;
  height: auto !important;
}

#listings-sheet .spot-details-scroll-active::-webkit-scrollbar {
  width: 4px !important;
  height: calc(100% - 20px) !important; /* Constrain scrollbar height */
}

#listings-sheet .spot-details-scroll-active::-webkit-scrollbar-track {
  margin: 10px 0 10px 0 !important; /* Generous margins to keep within sheet bounds */
  max-height: calc(100% - 20px) !important; /* Ensure track stays within bounds */
}

/* LISTINGS: Enhanced scrolling for listings content */
.listings-scroll-active::-webkit-scrollbar-thumb {
  background: rgba(59, 130, 246, 0.5) !important; /* Blue tint for listings */
}

/* PRECISE SCROLL: Enhanced scrolling with exact height compensation */
.precise-scroll-active {
  overflow-y: auto !important;
  flex: none !important; /* Don't flex - use exact calculated height */
  position: relative !important;
  padding-bottom: 0 !important; /* Remove all bottom padding for precise scrolling */
  margin-bottom: 0 !important; /* Remove all bottom margin */
}

.precise-scroll-active::-webkit-scrollbar {
  width: 6px !important; /* Wider scrollbar for precise scroll */
}

.precise-scroll-active::-webkit-scrollbar-thumb {
  background: rgba(255, 165, 0, 0.7) !important; /* Orange tint for precise scroll */
  border-radius: 3px !important;
}

.precise-scroll-active::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 165, 0, 0.9) !important; /* Darker orange on hover */
}

/* SPOT DETAILS ANIMATIONS: Ensure animations work in bottom sheet context */
/* Note: luxury-fade-in keyframe is defined in luxury-spot-details.css */
#listings-sheet .spot-details-container .luxury-info-grid .info-chip {
  animation: luxury-fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) backwards !important;
}

#listings-sheet .spot-details-container .luxury-info-grid .info-chip:nth-child(1) {
  animation-delay: 0.05s !important;
}

#listings-sheet .spot-details-container .luxury-info-grid .info-chip:nth-child(2) {
  animation-delay: 0.1s !important;
}

#listings-sheet .spot-details-container .luxury-info-grid .info-chip:nth-child(3) {
  animation-delay: 0.15s !important;
}

/* Enable all transitions for spot details in bottom sheet */
/* CRITICAL: Exclude photo navigation buttons from transition override to prevent visibility issues */
#listings-sheet .spot-details-container *:not(.photo-nav-btn):not(.photo-nav-btn *) {
  transition: all 0.2s ease !important;
}

/* Ensure policy expandable animations work in bottom sheet */
#listings-sheet .policy-expandable-content {
  transition: max-height 0.3s ease !important;
}

#listings-sheet .policy-chevron {
  transition: transform 0.2s ease !important;
}

/* Bottom sheet spot details: Transform icon and text in enhanced-tooltip-btn */
#listings-sheet .spot-details-container .enhanced-tooltip-btn svg {
  transform: translateX(-2px) !important; /* Right transform for icon */
}

#listings-sheet .spot-details-container .enhanced-tooltip-btn .tooltip-hint {
  transform: translateX(-58px) !important; /* Left transform for text */
}

/* Bottom sheet spot details: Center the book button container */
#listings-sheet .spot-details-container .mb-6.bg-gradient-to-r.from-blue-50.to-blue-100,
#listings-sheet .spot-details-container div.mb-6[class*="bg-gradient-to-r"][class*="from-blue-50"],
#listings-sheet .spot-details-container div.mb-6:has(#spot-detail-book) {
  margin-left: auto !important;
  margin-right: auto !important;
  display: block !important;
  transform: translateY(-0.25rem) !important; /* Small upward transform */
}

/* Bottom sheet spot details: Center the book button itself */
#listings-sheet .spot-details-container #spot-detail-book,
#listings-sheet .spot-details-container button#spot-detail-book {
  margin-left: auto !important;
  margin-right: auto !important;
  display: flex !important;
  width: auto !important;
  max-width: 300px !important;
  padding-left: 0.75rem !important; /* Reduce horizontal padding from px-4 (1rem) to 0.75rem */
  padding-right: 0.75rem !important;
  position: relative !important;
  z-index: var(--z-high-modal) !important; /* Ensure button is above photo indicators */
  pointer-events: auto !important;
}

/* Bottom sheet spot details: Add tiny right transform to spot-type-badge */
/* Tablet and Mobile */
@media (max-width: 1023px) {
  #listings-sheet .spot-details-container .spot-type-badge {
    transform: translateX(0.25rem) !important; /* Tiny right transform (4px) */
  }
}

/* Bottom sheet spot details: Add right transform to Reviews heading */
#listings-sheet .spot-details-container .reviews-section h3.text-lg.font-semibold.text-gray-900.dark\\:text-white,
#listings-sheet .spot-details-container .reviews-section h3[class*="text-lg"][class*="font-semibold"] {
  transform: translateX(0.25rem) !important; /* Right transform (4px) */
}

/* Bottom sheet spot details: Center the count automatically as container shrinks */
/* CRITICAL: Use flexbox centering instead of transforms - automatically adapts to any width */
body.bottom-sheet-spot-details-mode #listings-sheet #bottom-sheet-listings-header,
#listings-sheet.bottom-sheet-spot-details-mode #bottom-sheet-listings-header {
  justify-content: center !important; /* Center all children horizontally */
  align-items: center !important; /* Center vertically */
}

/* Reset the count's transform in spot details mode - let flexbox handle positioning */
body.bottom-sheet-spot-details-mode #listings-sheet #listings-count-mobile,
#listings-sheet.bottom-sheet-spot-details-mode #listings-count-mobile {
  transform: translateY(-2px) !important; /* Keep only vertical offset, remove horizontal transform */
  margin-left: auto !important; /* Auto margins for perfect centering */
  margin-right: auto !important;
}

/* Hide filters/sort container in spot details mode to keep count centered */
/* Target by specific button IDs for reliability */
body.bottom-sheet-spot-details-mode #listings-sheet #amenities-popup-trigger-mobile,
body.bottom-sheet-spot-details-mode #listings-sheet #sort-toggle-mobile,
body.bottom-sheet-spot-details-mode #listings-sheet #sort-dropdown-mobile,
body.bottom-sheet-spot-details-mode #amenities-popup-trigger-mobile,
body.bottom-sheet-spot-details-mode #sort-toggle-mobile,
body.bottom-sheet-spot-details-mode #sort-dropdown-mobile {
  display: none !important; /* Hide filters/sort buttons when showing spot details */
}

/* Also target by class as fallback */
body.bottom-sheet-spot-details-mode #listings-sheet #bottom-sheet-listings-header .flex.items-center.gap-1.ml-auto,
body.bottom-sheet-spot-details-mode #bottom-sheet-listings-header .flex.items-center.gap-1,
body.bottom-sheet-spot-details-mode #bottom-sheet-listings-header .ml-auto {
  display: none !important; /* Hide filters/sort container when showing spot details */
}

/* Hide space type toggle (parking/storage) in spot details mode */
body.bottom-sheet-spot-details-mode #listings-sheet #bottom-sheet-listings-header .space-type-toggle,
body.bottom-sheet-spot-details-mode #listings-sheet .space-type-toggle,
body.bottom-sheet-spot-details-mode #space-type-parking-mobile,
body.bottom-sheet-spot-details-mode #space-type-storage-mobile,
body.bottom-sheet-spot-details-mode .space-type-toggle {
  display: none !important; /* Hide parking/storage toggle when showing spot details */
}

/* Hide the absolute-positioned container holding the space type toggle */
/* CRITICAL: Only hide the container with space-type-toggle, NOT the drag handle container */
body.bottom-sheet-spot-details-mode #bottom-sheet-listings-header > .absolute:has(.space-type-toggle) {
  display: none !important;
}

/* Fallback for browsers that don't support :has() - target by position (space type toggle is lower) */
body.bottom-sheet-spot-details-mode #bottom-sheet-listings-header > .absolute.left-1\/2:not(.-top-1) {
  display: none !important;
}

/* Bottom sheet spot details: Add left transform to back button */
#listings-sheet #temp-back-to-listings-btn,
#listings-sheet button#temp-back-to-listings-btn {
  transform: translateX(-8px) !important; /* Move left 8px for better alignment */
  position: relative !important;
}

/* Bottom sheet mobile: Override auto Tailwind margin-top on spot cards */
#listings-sheet .spot-card,
#listings-sheet #listings-content-mobile .spot-card {
  margin-top: 0 !important; /* Remove auto Tailwind margin-top */
}

/* Bottom sheet spot details: Back button uses desktop style (icon only) */
/* Button uses same classes as desktop: flex items-center text-neutral-600 dark:text-neutral-300 hover:text-neutral-800 dark:hover:text-neutral-200 transition-colors flex-shrink-0 */
/* Icon size matches desktop: w-6 h-6 (24px) */

/* Bottom sheet spot details: Fix cancellation policy blocking tooltips (same fix as desktop) */
/* CRITICAL: Only set pointer-events: none on non-interactive elements, NOT the button */
#listings-sheet .spot-details-container .cancellation-policy-container,
#listings-sheet .spot-details-container .policy-expandable-content,
#listings-sheet .spot-details-container .policy-expandable-content *,
#listings-sheet .spot-details-container .policy-details,
#listings-sheet .spot-details-container .policy-details *,
#listings-sheet .spot-details-container .policy-label:not(.policy-expandable-trigger .policy-label),
#listings-sheet .spot-details-container .policy-value {
  position: static !important;
  z-index: -1 !important; /* NEGATIVE z-index - ensure below tooltip (999999) */
  isolation: auto !important;
  contain: none !important;
  transform: none !important;
  will-change: auto !important;
  opacity: 1 !important;
  pointer-events: none !important; /* CRITICAL: Don't block tooltip interactions */
}

/* Bottom sheet: Policy trigger button - MUST be clickable but below tooltips */
#listings-sheet .spot-details-container .policy-expandable-trigger {
  position: relative !important;
  z-index: 1 !important; /* LOW z-index - clickable but below tooltips (2147483647) */
  isolation: auto !important;
  pointer-events: auto !important; /* CRITICAL: Button must be clickable */
  cursor: pointer !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: transparent !important;
  border: none !important;
  text-align: left !important;
}

/* CRITICAL: Override any inline styles that set high z-index */
#listings-sheet .spot-details-container .policy-expandable-trigger[style*="z-index"] {
  z-index: 1 !important; /* Force low z-index even if inline style sets higher */
}

/* Bottom sheet: Policy trigger children - clicks pass through to button */
#listings-sheet .spot-details-container .policy-expandable-trigger > .flex,
#listings-sheet .spot-details-container .policy-expandable-trigger > div.flex,
#listings-sheet .spot-details-container .policy-expandable-trigger .flex.items-center,
#listings-sheet .spot-details-container .policy-expandable-trigger .policy-icon,
#listings-sheet .spot-details-container .policy-expandable-trigger svg.policy-icon,
#listings-sheet .spot-details-container .policy-expandable-trigger .policy-chevron {
  pointer-events: none !important; /* Clicks pass through to button */
  z-index: 0 !important;
}

/* CRITICAL: Bottom sheet policy label text - must NOT block tooltips */
#listings-sheet .spot-details-container .policy-expandable-trigger .policy-label,
#listings-sheet .spot-details-container .policy-expandable-trigger span.policy-label,
#listings-sheet .spot-details-container .policy-expandable-trigger .policy-label[style*="pointer-events"],
#listings-sheet .spot-details-container .policy-expandable-trigger span.policy-label[style*="pointer-events"],
#listings-sheet .spot-details-container .policy-expandable-trigger span[class*="policy-label"],
#listings-sheet .spot-details-container .policy-expandable-trigger .policy-label[style],
#listings-sheet .spot-details-container .policy-expandable-trigger span.policy-label[style],
#listings-sheet .spot-details-container .policy-expandable-trigger .flex .policy-label,
#listings-sheet .spot-details-container .policy-expandable-trigger .flex span.policy-label,
#listings-sheet .spot-details-container .policy-expandable-trigger div.flex .policy-label,
#listings-sheet .spot-details-container .policy-expandable-trigger div.flex span.policy-label {
  position: static !important; /* No positioning - prevents stacking context */
  z-index: -9999 !important; /* Extremely negative z-index - well below tooltips */
  isolation: auto !important; /* Don't create stacking context */
  contain: none !important; /* Don't contain anything */
  transform: none !important; /* No transforms that create stacking contexts */
  will-change: auto !important; /* No will-change */
  opacity: 1 !important; /* Visible but don't create stacking context */
  pointer-events: none !important; /* CRITICAL: Don't intercept mouse events */
  mix-blend-mode: normal !important; /* Don't create stacking context */
  filter: none !important; /* Don't create stacking context */
  backdrop-filter: none !important; /* Don't create stacking context */
}

/* Bottom sheet: Ensure tooltips appear above everything */
/* CRITICAL: Only apply pointer-events: auto when tooltip is shown */
#listings-sheet .spot-details-container .enhanced-tooltip.show,
#listings-sheet .spot-details-container .availability-schedule-tooltip.show {
  position: fixed !important;
  z-index: 2147483647 !important; /* MAXIMUM z-index - higher than policy elements */
  isolation: isolate !important;
  pointer-events: auto !important;
}

/* Base state: Ensure hidden tooltips don't block interactions */
#listings-sheet .spot-details-container .enhanced-tooltip:not(.show),
#listings-sheet .spot-details-container .availability-schedule-tooltip:not(.show) {
  pointer-events: none !important; /* CRITICAL: Hidden tooltips must not block mouse events */
}

/* Bottom sheet spot details: Add negative top margin to spot card title text */
#listings-sheet .spot-details-container .spot-card-title-text {
  margin-top: -0.125rem !important; /* -2px */
}

/* Bottom sheet: Fix title clipping - ensure titles are fully visible */
/* Note: All titles in bottom sheet now use truncation with widened area */
/* The rules above apply to all titles uniformly */

/* CRITICAL: Apply truncation to title wrappers in bottom sheet */
/* Widen the title area before truncation to show more text - EXCLUDE .needs-scroll which needs 100% width */
/* MAXIMUM SPECIFICITY to override spot-card.css rules */
/* Bottom sheet and mobile content are the same - tablet and mobile both use bottom sheet */
#listings-sheet .spot-card .spot-card-title-wrapper:not(.needs-scroll),
#listings-sheet .spot-card .spot-card-title-wrapper.short-title-static,
#listings-sheet .spot-card .flex-1 .spot-card-title-wrapper:not(.needs-scroll),
#listings-sheet .spot-card .flex-1 .spot-card-title-wrapper.short-title-static,
#listings-content-mobile .spot-card .spot-card-title-wrapper:not(.needs-scroll),
#listings-content-mobile .spot-card .spot-card-title-wrapper.short-title-static,
#listings-content-mobile .spot-card .flex-1 .spot-card-title-wrapper:not(.needs-scroll),
#listings-content-mobile .spot-card .flex-1 .spot-card-title-wrapper.short-title-static {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  width: calc(100% + 120px) !important; /* Widen to show more text before truncating */
  max-width: calc(100% + 120px) !important;
  min-width: 0 !important;
  margin-left: 0px !important; /* Negative margin to center the wider content */
  margin-right: 0px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* Ensure truncation works for title content */
/* Width and transform are controlled by media query rules below - do not set here */
/* Bottom sheet and mobile content are the same - tablet and mobile both use bottom sheet */
/* CRITICAL: Higher specificity to override spot-card.css 100% width rule */
#listings-sheet .spot-card .spot-card-title-wrapper .spot-card-title-content,
#listings-sheet .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
#listings-sheet .spot-card .spot-card-title-wrapper.short-title-static .spot-card-title-content,
#listings-sheet .spot-card .flex-1 .spot-card-title-wrapper .spot-card-title-content,
#listings-sheet .spot-card .flex-1 .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
#listings-sheet .spot-card .flex-1 .spot-card-title-wrapper.short-title-static .spot-card-title-content,
#listings-content-mobile .spot-card .spot-card-title-wrapper .spot-card-title-content,
#listings-content-mobile .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
#listings-content-mobile .spot-card .spot-card-title-wrapper.short-title-static .spot-card-title-content,
#listings-content-mobile .spot-card .flex-1 .spot-card-title-wrapper .spot-card-title-content,
#listings-content-mobile .spot-card .flex-1 .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
#listings-content-mobile .spot-card .flex-1 .spot-card-title-wrapper.short-title-static .spot-card-title-content {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  /* Width and transform controlled by media query rules below */
  min-width: 0 !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
  animation: none !important; /* Disable any marquee animations */
}

/* Ensure truncation works for title text - this is where the ellipsis appears */
/* CRITICAL: Don't apply transform to text element - it breaks truncation */
/* Instead, apply transform to parent container (title-content) */
/* Bottom sheet and mobile content are the same - tablet and mobile both use bottom sheet */
#listings-sheet .spot-card .spot-card-title-wrapper .spot-card-title-text,
#listings-sheet .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-text,
#listings-sheet .spot-card .spot-card-title-wrapper.short-title-static .spot-card-title-text,
#listings-sheet .spot-card .flex-1 .spot-card-title-wrapper .spot-card-title-text,
#listings-sheet .spot-card .flex-1 .spot-card-title-wrapper.needs-scroll .spot-card-title-text,
#listings-sheet .spot-card .flex-1 .spot-card-title-wrapper.short-title-static .spot-card-title-text,
#listings-content-mobile .spot-card .spot-card-title-wrapper .spot-card-title-text,
#listings-content-mobile .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-text,
#listings-content-mobile .spot-card .spot-card-title-wrapper.short-title-static .spot-card-title-text,
#listings-content-mobile .spot-card .flex-1 .spot-card-title-wrapper .spot-card-title-text,
#listings-content-mobile .spot-card .flex-1 .spot-card-title-wrapper.needs-scroll .spot-card-title-text,
#listings-content-mobile .spot-card .flex-1 .spot-card-title-wrapper.short-title-static .spot-card-title-text {
  padding-left: 0 !important;
  margin-left: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: block !important;
  box-sizing: border-box !important;
  position: relative !important;
  transform: none !important; /* Prevent transforms on text element - breaks truncation */
}

/* CRITICAL: Override transform: none for char-30 titles to preserve translateX(-3rem) from layout.css */
/* Ensure margin-top: -0.125rem applies ONLY to char-30 titles in ALL contexts */
.spot-card-title-wrapper.short-title-static.char-30 .spot-card-title-text,
#listings-overlay .spot-card .spot-card-title-wrapper.short-title-static.char-30 .spot-card-title-text,
#listings-content .spot-card .spot-card-title-wrapper.short-title-static.char-30 .spot-card-title-text,
#listings-sheet .spot-card .spot-card-title-wrapper.short-title-static.char-30 .spot-card-title-text,
#listings-sheet .spot-card .flex-1 .spot-card-title-wrapper.short-title-static.char-30 .spot-card-title-text,
#listings-content-mobile .spot-card .spot-card-title-wrapper.short-title-static.char-30 .spot-card-title-text,
#listings-content-mobile .spot-card .flex-1 .spot-card-title-wrapper.short-title-static.char-30 .spot-card-title-text,
div.spot-card .spot-card-title-wrapper.short-title-static.char-30 .spot-card-title-text {
  transform: translateX(-3rem) !important; /* Restore transform for 30-character titles */
  margin-top: 0rem !important; /* CRITICAL: Only for char-30 titles */
  display: inline !important;
  white-space: nowrap !important;
}

/* Apply right shift transform to title-content container instead */
/* This preserves truncation while allowing positioning */
/* MAXIMUM SPECIFICITY to override spot-card.css rules */
/* MOBILE (≤567px): Keep current values */
@media (max-width: 567px) {
  #listings-sheet .spot-card .spot-card-title-wrapper .spot-card-title-content,
  #listings-sheet .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
  #listings-sheet .spot-card .spot-card-title-wrapper.short-title-static .spot-card-title-content,
  #listings-sheet .spot-card .flex-1 .spot-card-title-wrapper .spot-card-title-content,
  #listings-sheet .spot-card .flex-1 .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
  #listings-sheet .spot-card .flex-1 .spot-card-title-wrapper.short-title-static .spot-card-title-content,
  #listings-content-mobile .spot-card .spot-card-title-wrapper .spot-card-title-content,
  #listings-content-mobile .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
  #listings-content-mobile .spot-card .spot-card-title-wrapper.short-title-static .spot-card-title-content,
  #listings-content-mobile .spot-card .flex-1 .spot-card-title-wrapper .spot-card-title-content,
  #listings-content-mobile .spot-card .flex-1 .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
  #listings-content-mobile .spot-card .flex-1 .spot-card-title-wrapper.short-title-static .spot-card-title-content {
    transform: translateX(22px) !important; /* Move content container right */
    position: relative !important;
    /* Keep overflow hidden for truncation */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    width: calc(100% + 0px) !important; /* Increased width to show more content */
    max-width: calc(100% + 0px) !important; /* Match width for consistent truncation */
  }
}

/* TABLET (568px - 1023px): Increased width for larger screens */
@media (min-width: 568px) and (max-width: 1023px) {
  #listings-sheet .spot-card .spot-card-title-wrapper .spot-card-title-content,
  #listings-sheet .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
  #listings-sheet .spot-card .spot-card-title-wrapper.short-title-static .spot-card-title-content,
  #listings-sheet .spot-card .flex-1 .spot-card-title-wrapper .spot-card-title-content,
  #listings-sheet .spot-card .flex-1 .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
  #listings-sheet .spot-card .flex-1 .spot-card-title-wrapper.short-title-static .spot-card-title-content,
  #listings-content-mobile .spot-card .spot-card-title-wrapper .spot-card-title-content,
  #listings-content-mobile .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
  #listings-content-mobile .spot-card .spot-card-title-wrapper.short-title-static .spot-card-title-content,
  #listings-content-mobile .spot-card .flex-1 .spot-card-title-wrapper .spot-card-title-content,
  #listings-content-mobile .spot-card .flex-1 .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
  #listings-content-mobile .spot-card .flex-1 .spot-card-title-wrapper.short-title-static .spot-card-title-content {
    transform: translateX(22px) !important; /* Move content container right */
    position: relative !important;
    /* Keep overflow hidden for truncation */
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    width: calc(100% + 180px) !important; /* Increased width for tablet - larger than mobile */
    max-width: calc(100% + 180px) !important;
  }
}

/* Bottom sheet: Ensure parent containers allow wider title area */
/* Allow overflow to accommodate the widened title wrapper */
#listings-sheet .spot-card .flex-1,
#listings-sheet .spot-card .spot-card-content {
  padding-left: 0.5rem !important;
  padding-right: 0.5rem !important;
  overflow: visible !important; /* Allow wider title to extend */
  min-width: 0 !important; /* Allow flex shrinking */
}

/* CRITICAL: Ensure mb-1 container (title parent) allows wider title to extend */
/* This div wraps the title-wrapper and must not clip the expanded title width */
/* ENHANCED: Prevent title getting stuck inside container on navigation transitions */
#listings-sheet .spot-card .flex-1 > div:first-child,
#listings-sheet .spot-card .flex-1 > .mb-1,
#listings-sheet .spot-card .flex-1 > div.mb-1,
#listings-sheet .spot-card .mb-1,
#listings-content-mobile .spot-card .flex-1 > div:first-child,
#listings-content-mobile .spot-card .flex-1 > .mb-1,
#listings-content-mobile .spot-card .flex-1 > div.mb-1,
#listings-content-mobile .spot-card .mb-1 {
  overflow: visible !important; /* Allow title to extend beyond container */
  min-width: 0 !important; /* Allow flex shrinking */
  width: 100% !important; /* Full width of parent */
  height: auto !important; /* Prevent height constraints during transitions */
  max-height: none !important; /* No max-height limit */
  clip: auto !important; /* Prevent any clipping */
  clip-path: none !important; /* Prevent clip-path issues */
  contain: none !important; /* Prevent contain from causing layout issues */
}

/* CRITICAL: Ensure title wrapper inside mb-1 is always visible during navigation */
#listings-sheet .spot-card .mb-1 .spot-card-title-wrapper,
#listings-sheet .spot-card .flex-1 > .mb-1 .spot-card-title-wrapper,
#listings-content-mobile .spot-card .mb-1 .spot-card-title-wrapper,
#listings-content-mobile .spot-card .flex-1 > .mb-1 .spot-card-title-wrapper {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Ensure reviews content animations work in bottom sheet */
#listings-sheet .reviews-content {
  transition: max-height 0.3s ease !important;
}

/* CRITICAL: Ensure policy buttons are clickable in bottom sheet but below tooltips */
#listings-sheet .policy-expandable-trigger {
  pointer-events: auto !important;
  cursor: pointer !important;
  z-index: 1 !important; /* LOW z-index - below tooltips (2147483647) */
  position: relative !important;
  background: transparent !important;
  border: none !important;
  width: 100% !important;
  text-align: left !important;
}

/* Override inline styles */
#listings-sheet .policy-expandable-trigger[style*="z-index"] {
  z-index: 1 !important; /* Force low z-index even if inline style sets higher */
}

#listings-sheet .policy-expandable-trigger:hover {
  background: rgba(59, 130, 246, 0.05) !important;
}

#listings-sheet .policy-expandable-trigger:active {
  background: rgba(59, 130, 246, 0.1) !important;
}

/* CRITICAL: Ensure price overlay and navigation buttons are visible in bottom sheet */
#listings-sheet .photo-gallery-compact.photo-carousel {
  overflow: visible !important; /* Allow price overlay and nav buttons to extend outside */
  position: relative !important; /* CRITICAL: Position context for absolutely positioned buttons */
  z-index: auto !important; /* Don't interfere with button z-index */
  isolation: auto !important; /* CRITICAL: Don't create stacking context that traps buttons */
  contain: none !important; /* CRITICAL: Don't contain layout/style/paint - allow buttons to escape */
}

/* CRITICAL: Ensure spot-details-container in bottom sheet doesn't clip photo navigation buttons */
#listings-sheet .spot-details-container {
  overflow-x: visible !important; /* Allow buttons to extend horizontally */
  overflow-y: auto !important; /* Allow vertical scrolling */
  isolation: auto !important; /* CRITICAL: Don't create stacking context that traps buttons */
  contain: none !important; /* CRITICAL: Don't contain layout/style/paint - allow buttons to escape */
  position: relative !important; /* Ensure positioning context */
}

/* CRITICAL: Ensure ALL parent containers allow overflow */
#listings-sheet,
#listings-sheet .spot-details-container,
#listings-sheet .spot-details-container > *,
#listings-content-mobile,
#listings-content-mobile .spot-details-container {
  overflow-x: visible !important; /* Allow buttons to extend horizontally */
}

/* CRITICAL: Force photo navigation buttons to be visible in bottom sheet */
#listings-sheet .spot-details-container .photo-nav-btn,
#listings-sheet .spot-details-container .photo-gallery-compact .photo-nav-btn,
#listings-sheet .spot-details-container .photo-carousel .photo-nav-btn,
#listings-sheet .photo-nav-btn,
#listings-sheet .photo-gallery-compact .photo-nav-btn,
#listings-sheet .photo-carousel .photo-nav-btn,
#listings-sheet button.photo-nav-btn,
#listings-sheet button.photo-nav-prev,
#listings-sheet button.photo-nav-next {
  position: absolute !important;
  z-index: 2147483647 !important; /* Maximum z-index */
  opacity: 1 !important;
  visibility: visible !important;
  display: flex !important;
  pointer-events: auto !important;
  background: rgba(255, 255, 255, 0.6) !important; /* Translucent when not hovered */
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 50% !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  margin: 0 !important;
  padding: 0 !important;
  top: 50% !important;
  transform: translateY(calc(-50% - 8px)) !important; /* Move up 8px from center */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* CRITICAL: Position prev button */
#listings-sheet .photo-nav-prev,
#listings-sheet button.photo-nav-prev {
  left: 16px !important;
  right: auto !important;
  transform: translateY(calc(-50% - 8px)) !important; /* Move up 8px from center */
}

/* CRITICAL: Position next button */
#listings-sheet .photo-nav-next,
#listings-sheet button.photo-nav-next {
  right: 16px !important;
  left: auto !important;
  transform: translateY(calc(-50% - 8px)) !important; /* Move up 8px from center */
}

/* CRITICAL: Translucent effect when not hovered - bottom sheet */
#listings-sheet .photo-nav-btn:not(:hover) {
  background: rgba(255, 255, 255, 0.6) !important; /* Translucent when not hovered */
}

/* CRITICAL: More opaque on hover - bottom sheet */
#listings-sheet .photo-nav-btn:hover {
  background: rgba(255, 255, 255, 0.95) !important; /* More opaque on hover */
  transform: translateY(calc(-50% - 8px)) scale(1.1) !important; /* Maintain top offset on hover */
}

#listings-sheet .spot-price-overlay {
  position: absolute !important;
  z-index: var(--z-high-modal) !important;
  pointer-events: auto !important;
  visibility: visible !important;
  opacity: 1 !important;
  display: flex !important; /* Changed from block to flex for centering */
  align-items: center !important; /* Vertically center content */
  justify-content: center !important; /* Horizontally center content */
  bottom: 8px !important;
  left: 8px !important;
  /* Size constraints for consistent layout */
  width: auto !important;
  min-width: 80px !important;
  max-width: 120px !important;
  height: auto !important;
  min-height: 60px !important;
  /* Position adjustment with transform */
  transform: translate(-6px, 5px) !important; /* Move right 4px, up 4px */
}

/* CRITICAL: Fix scrolling when bottom sheet is partially closed */
#listings-content-mobile {
  overflow-y: auto !important; /* Ensure scrolling always works - ONLY this element scrolls */
  overflow-x: hidden !important;
  flex: 1 1 auto !important; /* Take remaining flex space */
  min-height: 0 !important; /* Allow shrinking below content size */
  max-height: 100% !important; /* Don't exceed parent height */
  /* Remove height: 100% - let flexbox handle sizing */
}

/* CRITICAL: When spot details are shown, ensure only listings-content-mobile scrolls */
#listings-sheet #listings-content-mobile.spot-details-scroll-active {
  overflow-y: auto !important; /* Only this container scrolls */
  overflow-x: hidden !important;
}

/* CRITICAL: Prevent any child elements from creating their own scrollbars */
#listings-sheet #listings-content-mobile.spot-details-scroll-active .spot-details-container,
#listings-sheet #listings-content-mobile.spot-details-scroll-active .spot-details-container * {
  overflow: visible !important;
  overflow-y: visible !important;
  overflow-x: visible !important;
  max-height: none !important;
  height: auto !important;
}

/* Ensure bottom sheet content area allows proper scrolling */
#listings-sheet {
  overflow: visible !important; /* Allow popups to escape container */
  contain: none !important; /* Don't contain child elements - let popups break out */
}

/* ============================================================================
   BOTTOM SHEET RESPONSIVE TITLE ADJUSTMENTS
   ============================================================================ */

/* Mobile devices (≤640px) - Compact title with right and top transform */
/* ONLY apply transforms in listings view, not spot details view */
@media (max-width: 640px) {
  #listings-content-mobile .spot-card-title-wrapper {
    transform: translate(38px, -4px) !important; /* Move right 38px, up 4px */
    position: relative !important;
  }
  
  #listings-content-mobile .spot-card-title-text {
    display: inline-block !important;
    transform: translateX(2px) !important; /* Additional subtle right shift */
  }
  
  /* Address element responsive transform - Mobile */
  #listings-content-mobile .clickable-address {
    transform: translate(20px, 0px) !important; /* Less aggressive for mobile */
    position: relative !important;
  }
  
  /* Address element responsive transform - Mobile Bottom Sheet Spot Details (more precise) */
  #listings-sheet .spot-details-container .clickable-address,
  #listings-sheet .spot-details-container .location-badge.clickable-address,
  #listings-sheet .spot-details-container #listings-content-mobile .clickable-address {
    transform: translate(6px, 0px) !important; /* Minimal transform for bottom sheet spot details - better alignment */
    position: relative !important;
  }
  
  /* Address element responsive transform - Mobile Bottom Sheet Spot Cards */
  #listings-sheet .spot-card .clickable-address,
  #listings-sheet #listings-content-mobile .spot-card .clickable-address {
    transform: translate(52px, 0px) !important; /* Transform for listing cards on bottom sheet */
    position: relative !important;
  }
  
  /* Metadata row (spot type, distance) responsive transform */
  #listings-content-mobile .spot-card .flex.items-center.gap-2.mt-0\.5 {
    transform: translate(38px, -4px) !important; /* Match title alignment */
    position: relative !important;
  }
  
  /* Availability badge responsive transform */
  #listings-content-mobile .spot-card .flex.items-start.justify-start.mt-1 {
    transform: translate(38px, 1px) !important; /* Match title alignment */
    position: relative !important;
  }
}

/* Small tablets (641px-768px) - Moderate adjustment */
/* ONLY apply transforms in listings view, not spot details view */
@media (min-width: 641px) and (max-width: 768px) {
  #listings-content-mobile .spot-card-title-wrapper {
    transform: translate(0px, 0px) !important; 
    position: relative !important;
  }
  
  #listings-content-mobile .spot-card-title-text {
    display: inline-block !important;
    transform: translateX(1px) !important;
  }
  
  /* Address element responsive transform - Tablet */
  #listings-content-mobile .clickable-address {
    transform: translate(45px, -2px) !important; /* Original transform for tablet */
    position: relative !important;
  }
  
  /* Metadata row (spot type, distance) responsive transform */
  #listings-content-mobile .spot-card .flex.items-center.gap-2.mt-0\.5 {
    transform: translate(53px, -3px) !important; /* Match title alignment */
    position: relative !important;
  }
  
  /* Availability badge responsive transform */
  #listings-content-mobile .spot-card .flex.items-start.justify-start.mt-1 {
    transform: translate(53px, -8px) !important; /* Match title alignment */
    position: relative !important;
  }
  
  /* Book button responsive transform */
  #listings-content-mobile .spot-card .book-btn,
  #listings-content-mobile .spot-card button[data-book-spot-id] {
    transform: translate(-8px, -4px) !important; /* Move left 8px, up 4px */
    position: relative !important;
  }
}

/* Medium tablets (769px-1023px) - STANDARDIZED TO MATCH FULL TABLET RANGE */
/* ONLY apply transforms in listings view, not spot details view */
@media (min-width: 769px) and (max-width: 1023px) {
  #listings-content-mobile .spot-card-title-wrapper {
    transform: translate(68px, -7px) !important; /* Consistent tablet positioning */
    position: relative !important;
  }
  
  /* Address element responsive transform - Tablet */
  #listings-content-mobile .clickable-address {
    transform: translate(38px, -4px) !important; /* Original transform for tablet */
    position: relative !important;
  }
  
  /* Metadata row (spot type, distance) responsive transform */
  #listings-content-mobile .spot-card .flex.items-center.gap-2.mt-0\.5 {
    transform: translate(68px, -7px) !important; /* Match title alignment exactly */
    position: relative !important;
  }
  
  /* Availability badge responsive transform */
  #listings-content-mobile .spot-card .flex.items-start.justify-start.mt-1 {
    transform: translate(68px, -7px) !important; /* Match title alignment exactly */
    position: relative !important;
  }
}

/* Ensure the listings container can scroll even when sheet is partially open */
@media (max-width: 1023px) {
  #listings-content-mobile {
    position: relative !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
    overscroll-behavior-y: contain !important; /* Prevent page scroll when reaching end */
    min-height: calc(100vh - 200px) !important; /* Ensure enough height for scrolling */
  }
  
  /* Ensure end message is always visible by adding extra space */
  .listings-end-message {
    margin-bottom: 8rem !important; /* Even larger bottom margin on mobile */
    padding-bottom: 4rem !important; /* Extra bottom padding */
  }
}

/* SUBTLE: Adjust drag handle vertical position without disrupting existing system */

/* Small screens (≤520px) - Lower position */
@media (max-width: 520px) {
  #listings-sheet .absolute.-top-1 {
    top: 0rem !important; /* Lower position for small screens */
  }
  
  /* Ensure drag handle button has proper touch target */
  #listings-sheet button[aria-label*="Drag"] {
    padding: 0.5rem !important; /* Adequate touch area */
  }
}

/* Medium screens (521px-1023px) - Higher position */
@media (min-width: 521px) and (max-width: 1023px) {
  #listings-sheet .absolute.-top-1 {
    top: -1.2rem !important; /* Higher position for tablets */
  }
  
  /* Ensure drag handle button has proper touch target */
  #listings-sheet button[aria-label*="Drag"] {
    padding: 0.5rem !important; /* Adequate touch area */
  }
}

/* Add negative right margin to filters button for all sizes */
#amenities-popup-trigger-mobile {
  margin-right: -0.5rem !important;
}

#amenities-popup-trigger-desktop {
  margin-right: -0.5rem !important;
}

/* FIX: Autocomplete back button - Position OUTSIDE search container */
#unified-autocomplete .autocomplete-search-section,
.autocomplete-search-section {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px !important;
  justify-content: flex-start !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  flex-wrap: nowrap !important;
  position: relative !important;
}

/* CRITICAL: Prevent search section from expanding dropdown - DISABLED to prevent scrollbar */
/* Commented out to prevent unwanted scrollbars that affect dropdown positioning */
/*
#unified-autocomplete {
  overflow: hidden !important;
  box-sizing: border-box !important;
}
*/

#unified-autocomplete .autocomplete-search-section {
  max-width: calc(100% - 24px) !important; /* Account for padding */
  width: calc(100% - 24px) !important;
}

/* ULTRA HIGH SPECIFICITY: Override all other back button rules */
#unified-autocomplete .autocomplete-search-section .autocomplete-back-button,
#unified-autocomplete .autocomplete-back-button,
.autocomplete-search-section .autocomplete-back-button,
button.autocomplete-back-button[data-action="go-back"],
button.autocomplete-back-button {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  max-width: 24px !important;
  margin: 0 !important;
  padding: 2px !important;
  background: #f1f5f9 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 4px !important;
  color: #64748b !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  flex-basis: 24px !important;
  order: 1 !important;
  box-sizing: border-box !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden !important;
}

/* Ensure SVG icon stays small */
#unified-autocomplete .autocomplete-search-section .autocomplete-back-button svg,
#unified-autocomplete .autocomplete-back-button svg,
.autocomplete-search-section .autocomplete-back-button svg,
button.autocomplete-back-button[data-action="go-back"] svg,
button.autocomplete-back-button svg {
  width: 12px !important;
  height: 12px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  max-width: 12px !important;
  max-height: 12px !important;
}

.autocomplete-input-container {
  flex: 1 !important; /* Take remaining space */
  min-height: 40px !important;
  max-height: 40px !important;
  padding: 8px 12px !important;
  order: 2 !important; /* Second in the row */
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  background: white !important;
  border: 2px solid #e5e7eb !important;
  border-radius: 8px !important;
  gap: 6px !important;
  box-sizing: border-box !important;
  width: auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

/* Ensure search input and icon stay properly contained */
.autocomplete-input-container .search-icon {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  width: 20px !important;
  height: 20px !important;
}

.autocomplete-input-container .dropdown-search-input {
  flex: 1 !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
  font-size: 14px !important;
  min-width: 0 !important;
  width: auto !important;
}

.dropdown-search-input {
  flex: 1 !important;
  min-width: 100px !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Prevent auto-zoom on mobile touch devices - font-size must be >= 16px */
@media (hover: none) and (pointer: coarse) {
  .dropdown-search-input {
    font-size: 16px !important; /* Prevent iOS Safari auto-zoom */
  }
  
  #unified-autocomplete .dropdown-search-input {
    font-size: 16px !important; /* Prevent iOS Safari auto-zoom */
  }
  
  .autocomplete-input-container .dropdown-search-input {
    font-size: 16px !important; /* Prevent iOS Safari auto-zoom */
  }
}

/* Also prevent auto-zoom on mobile breakpoints */
@media (max-width: 640px) {
  .dropdown-search-input {
    font-size: 16px !important; /* Prevent iOS Safari auto-zoom */
  }
  
  #unified-autocomplete .dropdown-search-input {
    font-size: 16px !important; /* Prevent iOS Safari auto-zoom */
  }
  
  .autocomplete-input-container .dropdown-search-input {
    font-size: 16px !important; /* Prevent iOS Safari auto-zoom */
  }
}

/* Dark mode for repositioned back button */
.dark .autocomplete-back-button {
  background: #374151 !important;
  border-color: #4b5563 !important;
  color: #9ca3af !important;
}

.dark .autocomplete-back-button:hover {
  background: #4b5563 !important;
  border-color: #6b7280 !important;
  color: #f3f4f6 !important;
}

/* UPDATED: Allow multi-line display for long addresses in autocomplete dropdown */
#unified-autocomplete .autocomplete-item {
  overflow: hidden !important;
  /* Allow natural height expansion for multi-line content */
}

#unified-autocomplete .location-name,
#unified-autocomplete .suggestion-name {
  /* Use the multi-line display from search.css - don't override */
  max-width: 100% !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  word-break: break-word !important;
  line-height: 1.4 !important;
}

#unified-autocomplete .pac-item-query {
  /* Allow Google Places API queries to wrap */
  overflow: hidden !important;
  white-space: normal !important;
  max-width: 100% !important;
  display: block !important;
  line-height: 1.4 !important;
  word-break: break-word !important;
}

#unified-autocomplete .item-main {
  overflow: visible !important;
  max-width: 100% !important;
}

#unified-autocomplete .item-header {
  overflow: visible !important;
  max-width: 100% !important;
}

/* Allow address details to wrap to secondary line */
#unified-autocomplete .item-details,
#unified-autocomplete .autocomplete-item .text-sm {
  overflow: hidden !important;
  white-space: normal !important;
  max-width: 100% !important;
  line-height: 1.3 !important;
  word-break: break-word !important;
  /* Limit to 2 lines for details */
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

/* FIX: Restore desktop vertical expansion for long addresses - ULTRA HIGH SPECIFICITY */
@media (min-width: 1280px) {
  /* DESKTOP: Allow search field text wrapping while maintaining horizontal layout */
  html body.discover-page .discover-top-bar .search-display-container.group.w-full.max-w-full.bg-white,
  html body.discover-page .discover-top-bar .search-display-container.flex.items-center,
  html body.discover-page .discover-top-bar .search-display-container,
  body.discover-page .discover-top-bar .search-display-container.group.w-full.max-w-full.bg-white,
  body.discover-page .discover-top-bar .search-display-container.flex.items-center,
  body.discover-page .discover-top-bar .search-display-container,
  .discover-top-bar .search-display-container.group.w-full.max-w-full.bg-white,
  .discover-top-bar .search-display-container.flex.items-center,
  .discover-top-bar .search-display-container {
    align-items: center !important; /* Keep horizontal alignment for desktop */
    min-height: 3rem !important;
    max-height: 4rem !important; /* Allow some expansion but not unlimited */
    height: auto !important;
    overflow: hidden !important; /* Hide overflow to prevent layout breaking */
    display: flex !important;
    flex-direction: row !important; /* Keep horizontal layout for desktop */
    justify-content: flex-start !important;
  }

  /* DESKTOP: Content wrapper should maintain horizontal layout */
  html body.discover-page .discover-top-bar .search-display-container .relative.px-2,
  body.discover-page .discover-top-bar .search-display-container .relative.px-2,
  .discover-top-bar .search-display-container .relative.px-2 {
    display: flex !important;
    flex-direction: row !important; /* Keep horizontal layout for desktop */
    align-items: center !important; /* Center align icons and text */
    height: 100% !important;
    min-height: 3rem !important;
    overflow: hidden !important; /* Prevent layout breaking */
  }

  /* REMOVED: Conflicting datetime-display-container rules - let correct version handle styling */

  /* REMOVED: Conflicting nested datetime height rules - let correct version handle styling */
  
  /* DESKTOP: Search field flex containers should maintain horizontal layout */
  html body.discover-page .discover-top-bar .search-display-container .flex.items-center,
  body.discover-page .discover-top-bar .search-display-container .flex.items-center,
  .discover-top-bar .search-display-container .flex.items-center {
    align-items: center !important; /* Keep center alignment for desktop */
    flex-direction: row !important; /* Keep horizontal layout for desktop */
    height: 100% !important;
    min-height: auto !important;
  }

  /* REMOVED: Conflicting datetime flex container rules - let correct version handle styling */
  
  /* DESKTOP: Search text container should maintain normal flow */
  html body.discover-page .discover-top-bar .search-display-container .flex-1.min-w-0,
  body.discover-page .discover-top-bar .search-display-container .flex-1.min-w-0,
  .discover-top-bar .search-display-container .flex-1.min-w-0 {
    overflow: hidden !important; /* Prevent layout breaking */
    max-height: 100% !important; /* Stay within container */
    height: 100% !important;
    flex-direction: row !important; /* Keep normal horizontal flow */
    justify-content: flex-start !important;
    align-items: center !important; /* Center align text with icons */
    width: 100% !important;
    display: flex !important;
  }

  /* DATETIME text container should allow vertical stacking but stay within bounds */
  html body.discover-page .discover-top-bar .datetime-display-container .flex-1.min-w-0,
  body.discover-page .discover-top-bar .datetime-display-container .flex-1.min-w-0,
  .discover-top-bar .datetime-display-container .flex-1.min-w-0 {
    overflow: hidden !important; /* Hide overflow instead of expanding */
    max-height: 100% !important; /* Stay within container height */
    height: 100% !important; /* Fill container height */
    flex-direction: column !important; /* Allow vertical stacking of label and value */
    justify-content: center !important; /* Center content vertically */
    align-items: flex-start !important; /* Left align text content */
    width: 100% !important;
    display: flex !important;
  }

  /* Ensure datetime icons stay vertically centered with text content */
  html body.discover-page .discover-top-bar .datetime-display-container .flex-shrink-0:first-child,
  body.discover-page .discover-top-bar .datetime-display-container .flex-shrink-0:first-child,
  .discover-top-bar .datetime-display-container .flex-shrink-0:first-child {
    align-self: center !important; /* Force icon to center align regardless of container changes */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Ensure search icons stay vertically centered with text content */
  html body.discover-page .discover-top-bar .search-display-container .flex-shrink-0:first-child,
  body.discover-page .discover-top-bar .search-display-container .flex-shrink-0:first-child,
  .discover-top-bar .search-display-container .flex-shrink-0:first-child {
    align-self: center !important; /* Force icon to center align regardless of container changes */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Allow search button display to expand */
  html body.discover-page .discover-top-bar .search-button-display,
  body.discover-page .discover-top-bar .search-button-display,
  .discover-top-bar .search-button-display {
    min-height: 1.5rem !important;
    max-height: none !important;
    overflow: visible !important;
    height: auto !important;
    width: 100% !important;
    display: block !important;
  }

  /* REMOVED: Conflicting datetime button display rules - let correct version handle styling */
  
  /* Enable text wrapping for long addresses in SEARCH field */
  html body.discover-page .discover-top-bar .search-button-display .text-xs,
  html body.discover-page .discover-top-bar .search-button-display .text-sm,
  body.discover-page .discover-top-bar .search-button-display .text-xs,
  body.discover-page .discover-top-bar .search-button-display .text-sm,
  .discover-top-bar .search-button-display .text-xs,
  .discover-top-bar .search-button-display .text-sm {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.3 !important;
    height: auto !important;
    /* Removed display: block !important to allow Tailwind responsive classes (hidden/inline) to work */
    width: 100% !important;
  }

  /* REMOVED: Conflicting datetime text wrapping rules - let correct version handle styling */
  
  /* Ensure text spans can expand properly for SEARCH field - but allow responsive classes */
  html body.discover-page .discover-top-bar .search-display-container span,
  html body.discover-page .discover-top-bar .search-display-container span.truncate,
  html body.discover-page .discover-top-bar .search-display-container span.block,
  body.discover-page .discover-top-bar .search-display-container span,
  body.discover-page .discover-top-bar .search-display-container span.truncate,
  body.discover-page .discover-top-bar .search-display-container span.block,
  .discover-top-bar .search-display-container span,
  .discover-top-bar .search-display-container span.truncate,
  .discover-top-bar .search-display-container span.block {
    max-width: 100% !important;
    width: 100% !important;
    /* Removed display: block !important to allow Tailwind responsive classes (hidden/inline) to work */
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.3 !important;
  }

  /* CRITICAL: Override search button display truncation */
  html body.discover-page .discover-top-bar .search-button-display,
  html body.discover-page .discover-top-bar .search-button-display div,
  body.discover-page .discover-top-bar .search-button-display,
  body.discover-page .discover-top-bar .search-button-display div,
  .discover-top-bar .search-button-display,
  .discover-top-bar .search-button-display div {
    overflow: visible !important;
    text-overflow: unset !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.3 !important;
    height: auto !important;
    max-height: none !important;
  }

  /* REMOVED: Conflicting datetime span rules - let correct version handle styling */
  
  /* Override any remaining Tailwind constraints for SEARCH field */
  html body.discover-page .discover-top-bar .search-field-container,
  body.discover-page .discover-top-bar .search-field-container,
  .discover-top-bar .search-field-container {
    height: auto !important;
    max-height: none !important;
    min-height: 3rem !important;
    align-items: flex-start !important;
  }

  /* DATETIME field container should NOT expand - keep adequate fixed height for desktop */
  html body.discover-page .discover-top-bar .datetime-field-container,
  body.discover-page .discover-top-bar .datetime-field-container,
  .discover-top-bar .datetime-field-container {
    align-items: center !important; /* Center align datetime content */
  }

  /* Desktop-specific height for datetime field container */
  @media (min-width: 768px) {
    html body.discover-page .discover-top-bar .datetime-field-container,
    body.discover-page .discover-top-bar .datetime-field-container,
    .discover-top-bar .datetime-field-container {
      height: 4rem !important; /* Fixed height - adequate for content */
      max-height: 4rem !important; /* Fixed height - don't expand */
      min-height: 4rem !important;
    }
  }
}
/* CRITICAL: Fix vertical centering issue at 768x673 resolution */
@media (min-width: 768px) and (max-width: 768px) and (min-height: 670px) and (max-height: 680px) {
  /* Ensure top bar and all field containers are properly centered */
  html body.discover-page .discover-top-bar,
  body.discover-page .discover-top-bar,
  .discover-top-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 5rem !important;
    height: auto !important;
    padding: 1rem 1.5rem !important;
  }
  
  /* Force vertical centering on field containers */
  html body.discover-page .discover-top-bar .search-field-container,
  html body.discover-page .discover-top-bar .datetime-field-container,
  body.discover-page .discover-top-bar .search-field-container,
  body.discover-page .discover-top-bar .datetime-field-container,
  .discover-top-bar .search-field-container,
  .discover-top-bar .datetime-field-container {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: 2.5rem !important;
    max-height: 2.5rem !important;
    min-height: 2.5rem !important;
  }
  
  /* Force vertical centering on display containers */
  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 .search-display-container,
  body.discover-page .discover-top-bar .datetime-display-container,
  .discover-top-bar .search-display-container,
  .discover-top-bar .datetime-display-container {
    display: flex !important;
    align-items: center !important;
    align-self: center !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    height: 2.5rem !important;
    max-height: 2.5rem !important;
    min-height: 2.5rem !important;
  }
}

/* Professional end-of-results message styling */
.listings-end-message {
  text-align: center !important;
  padding: 1rem 1rem !important; /* Increased padding for better visibility */
  margin-top: 0rem !important; /* More top margin */
  margin-bottom: 2.5rem !important; /* Large bottom margin to ensure visibility */
  color: #6b7280 !important; /* Gray-500 */
  font-size: 0.875rem !important; /* text-sm */
  font-weight: 500 !important; /* font-medium */
  border-top: 1px solid #e5e7eb !important; /* Gray-200 border */
  background: rgba(249, 250, 251, 0.8) !important; /* Light gray background */
  backdrop-filter: blur(4px) !important;
  position: relative !important;
  z-index: var(--z-base) !important;
}

/* Dark mode styling for end message */
.dark .listings-end-message {
  color: #9ca3af !important; /* Gray-400 */
  border-top: 1px solid #374151 !important; /* Gray-700 border */
  background: rgba(31, 41, 55, 0.8) !important; /* Dark gray background */
}

/* Icon styling for end message */
.listings-end-message .end-icon {
  display: inline-block !important;
  width: 1rem !important;
  height: 1rem !important;
  margin-right: 0.5rem !important;
  opacity: 0.7 !important;
}

/* CRITICAL: Make bottom sheet listings clickable */
#listings-sheet .spot-card {
  cursor: pointer !important;
  pointer-events: auto !important;
  user-select: none !important;
  position: relative !important;
  z-index: var(--z-base) !important;
}

#listings-sheet .spot-card:hover {
  cursor: pointer !important;
}

/* CRITICAL: Override any conflicting pointer-events from bottomsheet.css */
#listings-sheet .spot-card,
#listings-sheet .spot-card > *,
#listings-sheet .spot-card .flex,
#listings-sheet .spot-card .relative {
  pointer-events: auto !important;
}

/* DEVELOPMENT-FRIENDLY: Allow element inspection while maintaining card clicks */
/* Remove aggressive pointer-events blocking to allow DevTools inspection */
/* Card clicks will be handled by JavaScript event delegation instead */

/* Ensure most elements are inspectable - but exclude title elements that block clicks */
#listings-sheet .spot-card * {
  pointer-events: auto !important;
}

/* CRITICAL FIX: Title elements must NOT capture pointer events - let clicks pass through to spot-card */
/* This fixes the issue where clicking on marquee title text doesn't open spot details */
#listings-sheet .spot-card .spot-card-title-wrapper,
#listings-sheet .spot-card .spot-card-title-wrapper *,
#listings-sheet .spot-card .spot-card-title-content,
#listings-sheet .spot-card .spot-card-title-text,
#listings-sheet .spot-card .spot-card-title-duplicate,
#listings-sheet .spot-card .spot-card-title-duplicate2,
#listings-content-mobile .spot-card .spot-card-title-wrapper,
#listings-content-mobile .spot-card .spot-card-title-wrapper *,
#listings-content-mobile .spot-card .spot-card-title-content,
#listings-content-mobile .spot-card .spot-card-title-text,
#listings-content-mobile .spot-card .spot-card-title-duplicate,
#listings-content-mobile .spot-card .spot-card-title-duplicate2 {
  pointer-events: none !important;
}

/* Ensure interactive elements have proper cursor */
#listings-sheet .spot-card button,
#listings-sheet .spot-card a,
#listings-sheet .spot-card [role="button"],
#listings-sheet .spot-card input,
#listings-sheet .spot-card select,
#listings-sheet .spot-card .clickable-address {
  cursor: pointer !important;
}

/* CRITICAL: Override any text selection rules that might block clicks */
#listings-sheet .spot-card {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}

/* RESPONSIVE BOTTOM SHEET LISTING DETAILS */

/* Very Small Screen (≤411px) - Disable marquee, force ellipsis */
@media (max-width: 411px) {
  /* CRITICAL: Title displays OVER TOP of book button container */
  #listings-sheet .spot-card .spot-card-title-wrapper,
  #listings-sheet .spot-card .mb-1,
  #listings-sheet .spot-card .flex-1 > .mb-1,
  #listings-content-mobile .spot-card .spot-card-title-wrapper,
  #listings-content-mobile .spot-card .mb-1,
  #listings-content-mobile .spot-card .flex-1 > .mb-1 {
    position: relative !important;
    z-index: 20 !important; /* Above book button container */
  }
  
  /* CRITICAL: Force disable marquee on very small screens */
  #listings-sheet .spot-card .spot-card-title-wrapper,
  #listings-sheet .spot-card .spot-card-title-wrapper.needs-scroll,
  #listings-content-mobile .spot-card .spot-card-title-wrapper,
  #listings-content-mobile .spot-card .spot-card-title-wrapper.needs-scroll {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Disable marquee animation and constrain content */
  #listings-sheet .spot-card .spot-card-title-wrapper .spot-card-title-content,
  #listings-sheet .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
  #listings-content-mobile .spot-card .spot-card-title-wrapper .spot-card-title-content,
  #listings-content-mobile .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-content {
    animation: none !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }
  
  /* Ensure text element has ellipsis */
  #listings-sheet .spot-card .spot-card-title-wrapper .spot-card-title-text,
  #listings-sheet .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-text,
  #listings-content-mobile .spot-card .spot-card-title-wrapper .spot-card-title-text,
  #listings-content-mobile .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-text {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }
  
  /* Hide duplicate elements used for marquee */
  #listings-sheet .spot-card .spot-card-title-duplicate,
  #listings-sheet .spot-card .spot-card-title-duplicate2,
  #listings-content-mobile .spot-card .spot-card-title-duplicate,
  #listings-content-mobile .spot-card .spot-card-title-duplicate2 {
    display: none !important;
  }
}

/* Small Phone (≤375px) - Ultra-compact details */
@media (max-width: 375px) {
  /* Make listing photos smaller for small phone - TARGET CORRECT SELECTORS */
  #listings-sheet .spot-card .relative.w-16,
  #listings-sheet .spot-card .relative.w-20,
  #listings-sheet .spot-card div[class*="w-16"],
  #listings-sheet .spot-card div[class*="w-20"],
  .spot-card .relative.w-16,
  .spot-card .relative.w-20,
  .spot-card div[class*="w-16"],
  .spot-card div[class*="w-20"] {
    width: 90px !important;
    height: 90px !important;
    margin-right: 0.5rem !important;
    margin-top: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Make the actual img elements smaller and centered for small phone */
  #listings-sheet .spot-card .relative.w-16 img,
  #listings-sheet .spot-card .relative.w-20 img,
  #listings-sheet .spot-card div[class*="w-16"] img,
  #listings-sheet .spot-card div[class*="w-20"] img,
  .spot-card .relative.w-16 img,
  .spot-card .relative.w-20 img,
  .spot-card div[class*="w-16"] img,
  .spot-card div[class*="w-20"] img {
    width: 90px !important;
    height: 90px !important;
    object-fit: cover !important;
    border-radius: 0.5rem !important;
  }
  
  /* Adjust content area to accommodate smaller image */
  #listings-sheet .spot-card-content,
  .spot-card-content {
    max-width: calc(100% - 100px) !important;
  }
  
  /* Make all text smaller */
  #listings-sheet .spot-card .title-text,
  #listings-sheet .spot-card h3,
  #listings-sheet .spot-card .spot-title,
  #listings-sheet .spot-card-title {
    font-size: 12px !important;
    line-height: 1.2 !important;
    margin-bottom: 0.125rem !important;
  }
  
  /* Smaller price text */
  #listings-sheet .spot-card .text-blue-700,
  #listings-sheet .spot-card .font-semibold,
  #listings-sheet .spot-card .price-display,
  #listings-sheet .spot-card [class*="price"] {
    font-size: 14px !important;
    font-weight: 600 !important;
  }
  
  /* Smaller metadata text */
  #listings-sheet .spot-card .metadata,
  #listings-sheet .spot-card .text-gray-500,
  #listings-sheet .spot-card .text-gray-600,
  #listings-sheet .spot-card .address-text,
  #listings-sheet .spot-card .distance-text,
  #listings-sheet .spot-card .amenity-text,
  #listings-sheet .spot-card p,
  #listings-sheet .spot-card-text {
    font-size: 10px !important;
    line-height: 1.3 !important;
  }
  
  /* Smaller buttons */
  #listings-sheet .spot-card .book-btn,
  #listings-sheet .spot-card .notify-btn,
  #listings-sheet .spot-card .contact-btn,
  #listings-sheet .spot-card button {
    font-size: 11px !important;
    padding: 0.25rem 0.5rem !important;
    min-height: 32px !important;
  }
  
  /* Tighter spacing */
  #listings-sheet .spot-card-content {
    gap: 0.25rem !important;
    padding: 0.25rem 0.25rem 0.25rem 0.25rem !important;
  }
  
  /* Add negative right margin to all written content - ULTRA HIGH SPECIFICITY */
  html body #listings-sheet .spot-card .title-text,
  html body #listings-sheet .spot-card h3,
  html body #listings-sheet .spot-card .spot-title,
  html body #listings-sheet .spot-card-title,
  html body #listings-sheet .spot-card .metadata,
  html body #listings-sheet .spot-card .text-gray-500,
  html body #listings-sheet .spot-card .text-gray-600,
  html body #listings-sheet .spot-card .address-text,
  html body #listings-sheet .spot-card .distance-text,
  html body #listings-sheet .spot-card .amenity-text,
  html body #listings-sheet .spot-card p,
  html body #listings-sheet .spot-card-text,
  html body #listings-sheet .spot-card .text-blue-700,
  html body #listings-sheet .spot-card .font-semibold,
  html body #listings-sheet .spot-card .price-display,
  html body #listings-sheet .spot-card [class*="price"],
  html body #listings-sheet .spot-card span.text-xs.font-medium.text-neutral-700,
  html body #listings-sheet .spot-card span[class*="text-xs"][class*="font-medium"][class*="text-neutral-700"],
  html body #listings-sheet .spot-card span[class*="text-xs"][class*="font-medium"][class*="uppercase"],
  html body #listings-sheet .spot-card span.text-xs.font-medium.text-neutral-700.uppercase.tracking-wide,
  html body #listings-sheet .spot-card span[class*="text-xs"][class*="font-medium"][class*="text-neutral-700"][class*="uppercase"][class*="tracking-wide"] {
    margin-right: 0rem !important;
    margin-left: 0 !important;
  }
  
  /* Disable marquee scrolling for small phone - ULTRA HIGH SPECIFICITY */
  #listings-sheet .spot-card .spot-card-title-wrapper,
  #listings-sheet .spot-card .spot-card-title-wrapper.needs-scroll,
  .spot-card .spot-card-title-wrapper.needs-scroll {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Disable all marquee animations and content */
  #listings-sheet .spot-card .spot-card-title-wrapper .spot-card-title,
  #listings-sheet .spot-card .spot-card-title-wrapper .spot-card-title-content,
  #listings-sheet .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
  .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-content {
    animation: none !important;
    transform: translateX(22px) !important;
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
  
  /* Hide duplicate elements */
  #listings-sheet .spot-card .spot-card-title-duplicate,
  #listings-sheet .spot-card .spot-card-title-duplicate2,
  .spot-card .spot-card-title-duplicate,
  .spot-card .spot-card-title-duplicate2 {
    display: none !important;
  }
  
  /* Remove fade overlays */
  #listings-sheet .spot-card .spot-card-title-wrapper.needs-scroll::before,
  .spot-card .spot-card-title-wrapper.needs-scroll::before {
    display: none !important;
  }
  
  /* Add negative left margin to address spans - MAXIMUM SPECIFICITY */
  html body #listings-sheet .spot-card span.text-blue-600.dark\\:text-blue-400,
  html body #listings-sheet .spot-card span.text-blue-600,
  html body #listings-sheet .spot-card span.dark\\:text-blue-400,
  html body .spot-card span.text-blue-600.dark\\:text-blue-400,
  html body .spot-card span.text-blue-600,
  html body .spot-card span.dark\\:text-blue-400,
  #listings-sheet .spot-card span.text-blue-600,
  #listings-sheet .spot-card span.dark\\:text-blue-400,
  .spot-card span.text-blue-600,
  .spot-card span.dark\\:text-blue-400 {
    margin-left: -0.5rem !important; /* Negative left margin for address text alignment */
  }
}

/* Ultra-Mobile (340px-519px) - Compact details */
@media (min-width: 340px) and (max-width: 520px) {
  /* Make listing photos larger - TARGET CORRECT SELECTORS */
  #listings-sheet .spot-card .relative.w-16,
  #listings-sheet .spot-card .relative.w-20,
  #listings-sheet .spot-card div[class*="w-16"],
  #listings-sheet .spot-card div[class*="w-20"],
  .spot-card .relative.w-16,
  .spot-card .relative.w-20,
  .spot-card div[class*="w-16"],
  .spot-card div[class*="w-20"] {
    width: 110px !important;
    height: 110px !important;
    margin-right: 0.5rem !important;
    margin-top: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Make the actual img elements larger and centered */
  #listings-sheet .spot-card .relative.w-16 img,
  #listings-sheet .spot-card .relative.w-20 img,
  #listings-sheet .spot-card div[class*="w-16"] img,
  #listings-sheet .spot-card div[class*="w-20"] img,
  .spot-card .relative.w-16 img,
  .spot-card .relative.w-20 img,
  .spot-card div[class*="w-16"] img,
  .spot-card div[class*="w-20"] img {
    width: 110px !important;
    height: 110px !important;
    object-fit: cover !important;
    border-radius: 0.5rem !important;
  }
  
  /* Adjust content area to accommodate larger image */
  #listings-sheet .spot-card-content,
  .spot-card-content {
    max-width: calc(100% - 120px) !important;
  }
  
  /* Make all text smaller */
  #listings-sheet .spot-card .title-text,
  #listings-sheet .spot-card h3,
  #listings-sheet .spot-card .spot-title,
  #listings-sheet .spot-card-title {
    font-size: 13px !important;
    line-height: 1.2 !important;
    margin-bottom: 0.125rem !important;
  }
  
  /* Smaller price text */
  #listings-sheet .spot-card .text-blue-700,
  #listings-sheet .spot-card .font-semibold,
  #listings-sheet .spot-card .price-display,
  #listings-sheet .spot-card [class*="price"] {
    font-size: 15px !important;
    font-weight: 600 !important;
  }
  
  /* Smaller metadata text */
  #listings-sheet .spot-card .metadata,
  #listings-sheet .spot-card .text-gray-500,
  #listings-sheet .spot-card .text-gray-600,
  #listings-sheet .spot-card .address-text,
  #listings-sheet .spot-card .distance-text,
  #listings-sheet .spot-card .amenity-text,
  #listings-sheet .spot-card p,
  #listings-sheet .spot-card-text {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
  
  /* Smaller buttons */
  #listings-sheet .spot-card .book-btn,
  #listings-sheet .spot-card .notify-btn,
  #listings-sheet .spot-card .contact-btn,
  #listings-sheet .spot-card button {
    font-size: 12px !important;
    padding: 0.375rem 0.625rem !important;
    min-height: 36px !important;
  }
  
  /* Tighter spacing */
  #listings-sheet .spot-card-content {
    gap: 0.25rem !important;
    padding: 0.25rem 0.25rem 0.375rem 0.375rem !important;
  }
  
  /* Add negative right margin to all written content - ULTRA HIGH SPECIFICITY */
  html body #listings-sheet .spot-card .title-text,
  html body #listings-sheet .spot-card h3,
  html body #listings-sheet .spot-card .spot-title,
  html body #listings-sheet .spot-card-title,
  html body #listings-sheet .spot-card .metadata,
  html body #listings-sheet .spot-card .text-gray-500,
  html body #listings-sheet .spot-card .text-gray-600,
  html body #listings-sheet .spot-card .address-text,
  html body #listings-sheet .spot-card .distance-text,
  html body #listings-sheet .spot-card .amenity-text,
  html body #listings-sheet .spot-card p,
  html body #listings-sheet .spot-card-text,
  html body #listings-sheet .spot-card .text-blue-700,
  html body #listings-sheet .spot-card .font-semibold,
  html body #listings-sheet .spot-card .price-display,
  html body #listings-sheet .spot-card [class*="price"],
  html body #listings-sheet .spot-card span.text-xs.font-medium.text-neutral-700,
  html body #listings-sheet .spot-card span[class*="text-xs"][class*="font-medium"][class*="text-neutral-700"],
  html body #listings-sheet .spot-card span[class*="text-xs"][class*="font-medium"][class*="uppercase"],
  html body #listings-sheet .spot-card span.text-xs.font-medium.text-neutral-700.uppercase.tracking-wide,
  html body #listings-sheet .spot-card span[class*="text-xs"][class*="font-medium"][class*="text-neutral-700"][class*="uppercase"][class*="tracking-wide"] {
    margin-right: -0.375rem !important;
    margin-left: 0 !important;
  }
  
  /* Disable marquee scrolling for ultra-mobile - ULTRA HIGH SPECIFICITY */
  #listings-sheet .spot-card .spot-card-title-wrapper,
  #listings-sheet .spot-card .spot-card-title-wrapper.needs-scroll,
  .spot-card .spot-card-title-wrapper.needs-scroll {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Disable all marquee animations and content */
  #listings-sheet .spot-card .spot-card-title-wrapper .spot-card-title,
  #listings-sheet .spot-card .spot-card-title-wrapper .spot-card-title-content,
  #listings-sheet .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
  .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-content {
    animation: none !important;
    transform: translateX(37px) !important;
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
  
  /* Hide duplicate elements */
  #listings-sheet .spot-card .spot-card-title-duplicate,
  #listings-sheet .spot-card .spot-card-title-duplicate2,
  .spot-card .spot-card-title-duplicate,
  .spot-card .spot-card-title-duplicate2 {
    display: none !important;
  }
  
  /* Remove fade overlays */
  #listings-sheet .spot-card .spot-card-title-wrapper.needs-scroll::before,
  .spot-card .spot-card-title-wrapper.needs-scroll::before {
    display: none !important;
  }
  
  /* Add negative left margin to address spans - MAXIMUM SPECIFICITY */
  html body #listings-sheet .spot-card span.text-blue-600.dark\\:text-blue-400,
  html body #listings-sheet .spot-card span.text-blue-600,
  html body #listings-sheet .spot-card span.dark\\:text-blue-400,
  html body .spot-card span.text-blue-600.dark\\:text-blue-400,
  html body .spot-card span.text-blue-600,
  html body .spot-card span.dark\\:text-blue-400,
  #listings-sheet .spot-card span.text-blue-600,
  #listings-sheet .spot-card span.dark\\:text-blue-400,
  .spot-card span.text-blue-600,
  .spot-card span.dark\\:text-blue-400 {
    margin-left: -0.375rem !important; /* Negative left margin for address text alignment */
  }
}

/* Mobile (520px-567px) - Moderately compact details */
@media (min-width: 521px) and (max-width: 567px) {
  /* Make listing photos larger - TARGET CORRECT SELECTORS */
  #listings-sheet .spot-card .relative.w-16,
  #listings-sheet .spot-card .relative.w-20,
  #listings-sheet .spot-card div[class*="w-16"],
  #listings-sheet .spot-card div[class*="w-20"],
  .spot-card .relative.w-16,
  .spot-card .relative.w-20,
  .spot-card div[class*="w-16"],
  .spot-card div[class*="w-20"] {
    width: 108px !important;
    height: 108px !important;
    margin-right: 0.625rem !important;
    margin-top: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Make the actual img elements larger and centered */
  #listings-sheet .spot-card .relative.w-16 img,
  #listings-sheet .spot-card .relative.w-20 img,
  #listings-sheet .spot-card div[class*="w-16"] img,
  #listings-sheet .spot-card div[class*="w-20"] img,
  .spot-card .relative.w-16 img,
  .spot-card .relative.w-20 img,
  .spot-card div[class*="w-16"] img,
  .spot-card div[class*="w-20"] img {
    width: 108px !important;
    height: 108px !important;
    object-fit: cover !important;
    border-radius: 0.5rem !important;
  }
  
  /* Adjust content area to accommodate larger image */
  #listings-sheet .spot-card-content,
  .spot-card-content {
    max-width: calc(100% - 118px) !important;
  }
  
  /* Make all text smaller */
  #listings-sheet .spot-card .title-text,
  #listings-sheet .spot-card h3,
  #listings-sheet .spot-card .spot-title,
  #listings-sheet .spot-card-title {
    font-size: 13px !important;
    line-height: 1.25 !important;
    margin-bottom: 0.25rem !important;
  }
  
  /* Smaller price text */
  #listings-sheet .spot-card .text-blue-700,
  #listings-sheet .spot-card .font-semibold,
  #listings-sheet .spot-card .price-display,
  #listings-sheet .spot-card [class*="price"] {
    font-size: 16px !important;
    font-weight: 600 !important;
  }
  
  /* Smaller metadata text */
  #listings-sheet .spot-card .metadata,
  #listings-sheet .spot-card .text-gray-500,
  #listings-sheet .spot-card .text-gray-600,
  #listings-sheet .spot-card .address-text,
  #listings-sheet .spot-card .distance-text,
  #listings-sheet .spot-card .amenity-text,
  #listings-sheet .spot-card p,
  #listings-sheet .spot-card-text {
    font-size: 11px !important;
    line-height: 1.4 !important;
  }
  
  /* Smaller buttons */
  #listings-sheet .spot-card .book-btn,
  #listings-sheet .spot-card .notify-btn,
  #listings-sheet .spot-card .contact-btn,
  #listings-sheet .spot-card button {
    font-size: 12px !important;
    padding: 0.375rem 0.75rem !important;
    min-height: 38px !important;
  }
  
  /* Moderate spacing */
  #listings-sheet .spot-card-content {
    gap: 0.25rem !important;
    padding: 0.25rem 0.375rem 0.375rem 0.375rem !important;
  }
  
  /* Add negative right margin to all written content - ULTRA HIGH SPECIFICITY */
  html body #listings-sheet .spot-card .title-text,
  html body #listings-sheet .spot-card h3,
  html body #listings-sheet .spot-card .spot-title,
  html body #listings-sheet .spot-card-title,
  html body #listings-sheet .spot-card .metadata,
  html body #listings-sheet .spot-card .text-gray-500,
  html body #listings-sheet .spot-card .text-gray-600,
  html body #listings-sheet .spot-card .address-text,
  html body #listings-sheet .spot-card .distance-text,
  html body #listings-sheet .spot-card .amenity-text,
  html body #listings-sheet .spot-card p,
  html body #listings-sheet .spot-card-text,
  html body #listings-sheet .spot-card .text-blue-700,
  html body #listings-sheet .spot-card .font-semibold,
  html body #listings-sheet .spot-card .price-display,
  html body #listings-sheet .spot-card [class*="price"],
  html body #listings-sheet .spot-card span.text-xs.font-medium.text-neutral-700,
  html body #listings-sheet .spot-card span[class*="text-xs"][class*="font-medium"][class*="text-neutral-700"],
  html body #listings-sheet .spot-card span[class*="text-xs"][class*="font-medium"][class*="uppercase"],
  html body #listings-sheet .spot-card span.text-xs.font-medium.text-neutral-700.uppercase.tracking-wide,
  html body #listings-sheet .spot-card span[class*="text-xs"][class*="font-medium"][class*="text-neutral-700"][class*="uppercase"][class*="tracking-wide"] {
    margin-right: -0.25rem !important;
    margin-left: 0 !important;
  }
  
  /* Disable marquee scrolling for mobile - ULTRA HIGH SPECIFICITY */
  #listings-sheet .spot-card .spot-card-title-wrapper,
  #listings-sheet .spot-card .spot-card-title-wrapper.needs-scroll,
  .spot-card .spot-card-title-wrapper.needs-scroll {
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    transform: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Disable all marquee animations and content */
  #listings-sheet .spot-card .spot-card-title-wrapper .spot-card-title,
  #listings-sheet .spot-card .spot-card-title-wrapper .spot-card-title-content,
  #listings-sheet .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-content,
  .spot-card .spot-card-title-wrapper.needs-scroll .spot-card-title-content {
    animation: none !important;
    transform: translateX(22px) !important;
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }
  
  /* Hide duplicate elements */
  #listings-sheet .spot-card .spot-card-title-duplicate,
  #listings-sheet .spot-card .spot-card-title-duplicate2,
  .spot-card .spot-card-title-duplicate,
  .spot-card .spot-card-title-duplicate2 {
    display: none !important;
  }
  
  /* Remove fade overlays */
  #listings-sheet .spot-card .spot-card-title-wrapper.needs-scroll::before,
  .spot-card .spot-card-title-wrapper.needs-scroll::before {
    display: none !important;
  }
  
  /* Add negative left margin to address spans - MAXIMUM SPECIFICITY */
  html body #listings-sheet .spot-card span.text-blue-600.dark\\:text-blue-400,
  html body #listings-sheet .spot-card span.text-blue-600,
  html body #listings-sheet .spot-card span.dark\\:text-blue-400,
  html body .spot-card span.text-blue-600.dark\\:text-blue-400,
  html body .spot-card span.text-blue-600,
  html body .spot-card span.dark\\:text-blue-400,
  #listings-sheet .spot-card span.text-blue-600,
  #listings-sheet .spot-card span.dark\\:text-blue-400,
  .spot-card span.text-blue-600,
  .spot-card span.dark\\:text-blue-400 {
    margin-left: -0.25rem !important; /* Negative left margin for address text alignment */
  }
}

/* Tablet (568px-1023px) - Larger photos, moderately compact text */
@media (min-width: 568px) and (max-width: 1023px) {
  /* Make listing photos larger - TARGET CORRECT SELECTORS */
  #listings-sheet .spot-card .relative.w-16,
  #listings-sheet .spot-card .relative.w-20,
  #listings-sheet .spot-card div[class*="w-16"],
  #listings-sheet .spot-card div[class*="w-20"],
  .spot-card .relative.w-16,
  .spot-card .relative.w-20,
  .spot-card div[class*="w-16"],
  .spot-card div[class*="w-20"] {
    width: 112px !important;
    height: 112px !important;
    margin-right: 0.75rem !important;
    margin-top: 0.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Make the actual img elements larger and centered */
  #listings-sheet .spot-card .relative.w-16 img,
  #listings-sheet .spot-card .relative.w-20 img,
  #listings-sheet .spot-card div[class*="w-16"] img,
  #listings-sheet .spot-card div[class*="w-20"] img,
  .spot-card .relative.w-16 img,
  .spot-card .relative.w-20 img,
  .spot-card div[class*="w-16"] img,
  .spot-card div[class*="w-20"] img {
    width: 112px !important;
    height: 112px !important;
    object-fit: cover !important;
    border-radius: 0.5rem !important;
  }
  
  /* Adjust content area to accommodate larger image */
  #listings-sheet .spot-card-content,
  .spot-card-content {
    max-width: calc(100% - 122px) !important;
  }
  
  /* Moderately smaller text */
  #listings-sheet .spot-card .title-text,
  #listings-sheet .spot-card h3,
  #listings-sheet .spot-card .spot-title,
  #listings-sheet .spot-card-title {
    font-size: 14px !important;
    line-height: 1.25 !important;
    margin-bottom: 0.25rem !important;
  }
  
  /* Moderately smaller price text */
  #listings-sheet .spot-card .text-blue-700,
  #listings-sheet .spot-card .font-semibold,
  #listings-sheet .spot-card .price-display,
  #listings-sheet .spot-card [class*="price"] {
    font-size: 17px !important;
    font-weight: 600 !important;
  }
  
  /* Smaller metadata text */
  #listings-sheet .spot-card .metadata,
  #listings-sheet .spot-card .text-gray-500,
  #listings-sheet .spot-card .text-gray-600,
  #listings-sheet .spot-card .address-text,
  #listings-sheet .spot-card .distance-text,
  #listings-sheet .spot-card .amenity-text,
  #listings-sheet .spot-card p,
  #listings-sheet .spot-card-text {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }
  
  /* Moderately smaller buttons */
  #listings-sheet .spot-card .book-btn,
  #listings-sheet .spot-card .notify-btn,
  #listings-sheet .spot-card .contact-btn,
  #listings-sheet .spot-card button {
    font-size: 13px !important;
    padding: 0.5rem 0.875rem !important;
    min-height: 40px !important;
  }
  
  /* Standard spacing */
  #listings-sheet .spot-card-content {
    gap: 0.375rem !important;
    padding: 0.375rem 0.5rem 0.5rem 0.5rem !important;
  }
}

/* FIX CAKE ICON DROPDOWN HEIGHT ISSUE ON MOBILE */
@media (max-width: 1023px) {
  /* Prevent cake menu dropdown from spanning full viewport height */
  #cake-menu,
  .cake-menu-trigger + .dropdown-menu,
  button.cake-menu-trigger + .dropdown-menu {
    height: auto !important;
    max-height: calc(100vh - 120px) !important;
    min-height: auto !important;
    overflow-y: auto !important;
    position: fixed !important;
  }
  
  /* Specific positioning for mobile cake menu */
  @media (max-width: 768px) {
    #cake-menu,
    .cake-menu-trigger + .dropdown-menu,
    button.cake-menu-trigger + .dropdown-menu {
      position: fixed !important;
      right: 0.5rem !important;
      top: 3.5rem !important;
      left: auto !important;
      width: auto !important;
      min-width: 200px !important; /* Reduced from 240px */
      max-width: calc(100vw - 1rem) !important;
      height: auto !important;
      max-height: 250px !important; /* Fixed reasonable height instead of viewport-based */
      min-height: auto !important; /* Allow natural height */
    }
  }
  
  /* Extra small screens */
  @media (max-width: 520px) {
    #cake-menu,
    .cake-menu-trigger + .dropdown-menu,
    button.cake-menu-trigger + .dropdown-menu {
      min-width: 180px !important; /* Reduced from 220px for small phones */
      right: 0.25rem !important;
      max-width: calc(100vw - 0.5rem) !important;
      height: auto !important;
      max-height: 200px !important; /* Fixed reasonable height instead of viewport-based */
      min-height: auto !important; /* Allow natural height */
    }
  }
}