/* ========================================
 * TOPBAR.CSS - DISCOVER PAGE TOP BAR STYLES
 * FILE: /css/discover/components/topbar.css
 * VERSION: v=20251001g
 * ======================================== */
/*
 * PURPOSE: Top bar layout and controls
 * COVERAGE: Desktop + mobile responsive rules
 * FEATURES: Map controls and responsive sizing
 * IMPORTED BY: discover.html
 * STATUS: ACTIVE
 */
/* ENHANCED: Sticky top bar with filter count and reset */
.discover-top-bar {
  z-index: var(--z-topbar, 50);
  background: var(--discover-topbar-bg, var(--discover-chrome-surface)) !important;
  border-bottom: 1px solid var(--discover-topbar-border, var(--discover-chrome-border));
  height: auto !important; /* Flexible height to accommodate content */
  min-height: 4rem !important; /* Minimum height for touch targets and content */
  max-height: none !important; /* Allow expansion for varying content */
  position: sticky !important; /* Make it sticky */
  top: 0 !important;
  box-shadow: var(--discover-topbar-shadow, 0 1px 3px rgba(15, 23, 42, 0.06)) !important;
  /* OPTIMIZED: Only transition properties that change naturally, not transform (causes issues at breakpoints) */
  transition: opacity var(--transition-slow, 0.3s ease), background-color var(--transition-slow, 0.3s ease) !important;
  display: flex !important; /* Ensure flexbox layout */
  align-items: stretch !important; /* CRITICAL: Use stretch to allow content to determine height */
  overflow-y: visible !important; /* Allow vertical expansion */
  overflow-x: visible !important; /* Allow horizontal expansion for dropdowns */
  /* CRITICAL: Prevent backdrop-filter from creating blocking stacking context */
  isolation: auto !important;
  contain: none !important;
}

@media (max-width: 1100px) {
  body.discover-page .discover-top-bar {
    flex-shrink: 0 !important;
  }
}

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

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

/* ENHANCED: Clear filters button */
.clear-filters-btn {
  display: inline-flex !important;
  align-items: center !important;
  padding: 0.25rem 0.5rem !important;
  background: transparent !important;
  color: #6b7280 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  font-size: var(--type-badge-size, 0.75rem) !important;
  font-weight: var(--font-weight-medium, 500) !important;
  cursor: pointer !important;
  transition: opacity var(--transition-base, 0.2s ease), transform var(--transition-base, 0.2s ease), background-color var(--transition-base, 0.2s ease) !important;
  margin-left: 0.5rem !important;
}

.clear-filters-btn:hover {
  background: var(--discover-control-bg-hover) !important;
  color: var(--discover-control-text-strong) !important;
  border-color: var(--discover-control-border-hover) !important;
}

.discover-menu-trigger-z {
  z-index: var(--z-toast);
  position: relative;
}

.discover-toolbar-account-wrap {
  position: relative;
  overflow: visible;
}

.discover-toolbar-account-trigger {
  position: relative;
  overflow: visible;
}

.discover-toolbar-account-trigger .founding-host-avatar-crown,
.discover-toolbar-account-trigger .discover-founding-host-crown {
  pointer-events: none;
}
.discover-top-bar-bottom-row {
  display: none;
}
/* body.discover-page #unified-autocomplete: shell visuals owned by discover-popover.css */

/* Unified autocomplete dropdown — escape constraints; visuals in discover-popover.css */
#unified-autocomplete {
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
  z-index: var(--z-discover-address-autocomplete) !important;
  display: none !important;
  isolation: isolate !important;
  will-change: auto !important;
  right: auto !important;
  bottom: auto !important;
  overflow: hidden !important;
}

/* CRITICAL: Desktop top bar anti-clipping override - MAXIMUM SPECIFICITY */


/* Tablet/desktop row padding: use top bar padding as single source; no extra row padding */

/* CONSOLIDATED: Dark mode styling - applies to all breakpoints */
.dark .discover-top-bar {
  background: var(--discover-topbar-bg) !important;
  border-bottom-color: var(--discover-topbar-border) !important;
}

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

  /* Scrolling Behavior */
  scroll-behavior: smooth;

  /* Hide Scrollbars - Cross Browser */
  scrollbar-width: none;           /* Firefox */
}
/* Hide scrollbars in WebKit browsers */
.amenity-chips-container::-webkit-scrollbar {
  display: none;
}
/* Ensure all scrollbar elements are hidden */
.amenity-chips-container::-webkit-scrollbar-track,
.amenity-chips-container::-webkit-scrollbar-thumb,
.amenity-chips-container::-webkit-scrollbar-corner {
  display: none;
  width: 0;
  height: 0;
  background: transparent;
}

@media (min-width: 1101px) {
  .amenity-chips-container .amenity-chip {
    transition:
      opacity 220ms var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
      transform 220ms var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
      background-color var(--transition-normal, 200ms ease),
      border-color var(--transition-normal, 200ms ease),
      color var(--transition-normal, 200ms ease) !important;
  }

  .amenity-chips-container .amenity-chip--confirm-select {
    transform: scale(1.04) !important;
  }

  .amenity-chips-container .amenity-chip--leaving {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0.96) translateY(-2px) !important;
  }

  .amenity-chips-container .amenity-chip--entering {
    opacity: 0 !important;
    transform: scale(0.96) translateY(2px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .amenity-chips-container .amenity-chip,
  .amenity-chips-container .amenity-chip--confirm-select,
  .amenity-chips-container .amenity-chip--leaving,
  .amenity-chips-container .amenity-chip--entering {
    transition: none !important;
    transform: none !important;
  }
}

/* Desktop: Size dropdown to match search field but allow container escape */

/* Mobile/Tablet: Allow JavaScript to control width, with viewport constraints */
/* NOTE: Specific breakpoints in listings.css override these general rules */

/* Autocomplete is portaled to body and positioned fixed by RenterFocusedAutocomplete.js. */
body.discover-page {
  position: relative !important;
  contain: none !important;
}

/* Create a new stacking context at the root level for the dropdown */
/* Ensure dropdown can render outside ALL containers */
#unified-autocomplete[style*="display: flex"],
#unified-autocomplete.show,
#unified-autocomplete:not(.hidden) {
  display: flex !important;
  flex-direction: column !important;
  z-index: var(--z-discover-address-autocomplete) !important;
  contain: none !important;
  clip: auto !important;
  clip-path: none !important;
  -webkit-clip-path: none !important;
}
/* Ensure all dropdown content inherits the high z-index */
#unified-autocomplete .pac-item,
#unified-autocomplete .pac-container,
#unified-autocomplete > div,
#unified-autocomplete li,
#unified-autocomplete * {
  z-index: inherit !important;
  position: relative !important;
}
/* Dark mode styles for #unified-autocomplete consolidated in search.css */
/* ========================================
 * AUTOCOMPLETE/SUGGESTIONS LAYER USAGE
 * ========================================
 * CRITICAL: Autocomplete ≠ Tooltips!
 *
 * DROPDOWN LAYER (20-21):
 * - Autocomplete suggestions
 * - Search dropdowns
 * - Menu dropdowns
 * - Context menus
 *
 * TOOLTIP LAYER (300):
 * - Help tooltips
 * - Info popups
 * - Hover explanations
 * - Status messages
 *
 * This ensures real tooltips/modals can appear above autocomplete
 * ======================================== */
/* Search suggestions on dropdown layer - NOT tooltip layer */
.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-dropdown-menu) !important; /* High z-index to appear above fixed positioned map */
  background: var(--white);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-dropdown);
  max-height: 200px;
  overflow-y: auto;
}
.dark .search-suggestions {
  background: #262626;
  border-color: #525252;
}
/* CRITICAL: Prevent horizontal scrollbar on top bar containers */
.discover-top-bar,
.discover-top-bar > div,
.discover-topbar-content {
  overflow-x: clip !important; /* Prevent horizontal scrollbar without creating a scroll container */
  /* FIX: Allow vertical expansion so inner content is visible on small devices */
  overflow-y: visible !important;
  box-sizing: border-box !important;
  max-width: 100% !important; /* CRITICAL: Prevent top bar from exceeding viewport */
  width: 100% !important; /* Ensure proper width calculation */
  /* CRITICAL: Force hide scrollbars */
  scrollbar-width: none !important; /* Firefox */
}

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

/* ========================================
 * DISCOVER PAGE LOGO - SINGLE SOURCE OF TRUTH
 * Logo is always top-left and scales by breakpoint without squishing.
 * ======================================== */
:root {
  --discover-logo-height: 34px;
  --discover-topbar-padding-y: 0.75rem;
  --discover-topbar-padding-x: 1rem;
  --discover-topbar-offset: var(--discover-current-topbar-height, 4rem);
  --discover-filter-badges-top-offset: calc(var(--discover-topbar-offset) + 0.25rem);
  --discover-map-control-safe-gutter: clamp(4.25rem, 7vw, 5.75rem);
  --discover-chip-rail-fade-width: 2rem;
  --discover-chip-rail-safe-width: max(
    0px,
    calc(
      100vw
      - max(var(--discover-topbar-padding-x), env(safe-area-inset-left, 0px))
      - max(var(--discover-topbar-padding-x), env(safe-area-inset-right, 0px))
      - var(--discover-map-control-safe-gutter)
    )
  );
}

@media (min-width: 641px) and (max-width: 1100px) {
  :root { --discover-logo-height: 38px; }
}

@media (min-width: 1101px) {
  :root { --discover-logo-height: 43px; }
}

/* Logo container: semantic toolbar owner; no positional transforms. */
.discover-top-bar .discover-toolbar-logo {
  flex-shrink: 0 !important;
  min-width: auto !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
}

/* Logo link and image - unified size and aspect ratio for all viewports */
.discover-top-bar .discover-toolbar-logo a {
  display: flex !important;
  align-items: center !important;
  line-height: 0 !important;
  padding: 0.18rem 0.42rem 0.18rem 0.28rem !important;
  border-radius: 0.5rem !important;
  background: var(--discover-logo-scrim, rgba(255, 255, 255, 0.92)) !important;
}

/* Size/position only; visibility is owned by logo-switch.css. */
.discover-top-bar .swiftspot-logo,
.discover-top-bar img.swiftspot-logo,
.discover-top-bar .flex-shrink-0 .swiftspot-logo,
.discover-top-bar .flex-shrink-0 img.swiftspot-logo {
  height: var(--discover-logo-height) !important;
  width: auto !important;
  min-height: var(--discover-logo-height) !important;
  max-height: var(--discover-logo-height) !important;
  object-fit: contain !important;
  object-position: left center !important;
  transform: none !important;
  /* Let the browser smoothly downscale the pre-sized toolbar PNG.
     optimize-contrast makes small logos look crunchy/grainy. */
  image-rendering: auto;
}

/* Subtle hover scale only on interaction (base uses transform:none !important for layout stability). */
.discover-top-bar .discover-toolbar-logo a:hover .swiftspot-logo-light,
.discover-top-bar .discover-toolbar-logo a:hover .swiftspot-logo-dark {
  transform: translateZ(0) scale(1.02) !important;
}

/*
 * Logo light/dark visibility is owned exclusively by logo-switch.css.
 * Do not set display on both .swiftspot-logo imgs here — light and dark
 * share that class, so forcing display:block shows the dark teal on light UI.
 */

/* SwiftSpot logo transition only (visibility remains logo-switch.css). */
.swiftspot-logo,
img.swiftspot-logo {
  transition: opacity var(--transition-base, 0.2s ease);
}

/* Top bar: consistent padding so logo sits in top-left at all breakpoints; respect safe area on notched devices */
.discover-top-bar {
  padding-top: max(var(--discover-topbar-padding-y), env(safe-area-inset-top, 0px)) !important;
  padding-bottom: var(--discover-topbar-padding-y) !important;
  padding-left: max(var(--discover-topbar-padding-x), env(safe-area-inset-left, 0px)) !important;
  padding-right: max(var(--discover-topbar-padding-x), env(safe-area-inset-right, 0px)) !important;
}

/* iOS Safari: prevent auto-zoom on focus for discover top-bar inputs by enforcing 16px font size. */
@media (hover: none) and (pointer: coarse) and (max-width: 640px) {
  html body.discover-page .discover-top-bar input[type="text"],
  html body.discover-page .discover-top-bar input[type="search"],
  html body.discover-page .discover-top-bar input[type="email"],
  html body.discover-page .discover-top-bar input[type="tel"],
  html body.discover-page .discover-top-bar input[type="url"],
  html body.discover-page .discover-top-bar input[type="password"],
  html body.discover-page .discover-top-bar input[type="date"],
  html body.discover-page .discover-top-bar input[type="time"],
  html body.discover-page .discover-top-bar textarea {
    font-size: 16px !important;
  }
}

/* Touch tablet: keep the horizontal toolbar clipped without affecting the final phone grid. */
@media (hover: none) and (pointer: coarse) and (min-width: 641px) and (max-width: 1100px) {
  .discover-top-bar > div.flex.items-center.justify-between.w-full,
  .discover-top-bar .flex.items-center.justify-between.w-full {
    align-items: center !important;
  }
  .discover-top-bar .flex.items-center.gap-2.flex-1.min-w-0,
  .discover-top-bar .flex.items-center.gap-2.sm\:gap-4.lg\:gap-6.flex-1.min-w-0 {
    align-items: center !important;
  }

  .discover-top-bar .flex.items-center.gap-2.flex-1.min-w-0 > .flex-shrink-0:first-child,
  .discover-top-bar .flex.items-center.gap-2.sm\:gap-4.lg\:gap-6.flex-1.min-w-0 > .flex-shrink-0:first-child {
    flex-shrink: 0 !important;
    min-width: auto !important;
  }

  .discover-top-bar .flex.items-center.gap-2,
  .discover-top-bar .flex.items-center.gap-2.sm\:gap-4,
  .discover-top-bar .flex.items-center.gap-2.sm\:gap-4.lg\:gap-6 {
    gap: 0.375rem !important;
  }

  .discover-top-bar,
  .discover-top-bar > div,
  .discover-top-bar .flex,
  .discover-top-bar .flex.items-center,
  .discover-top-bar .flex.items-center.justify-between,
  .discover-top-bar .flex.items-center.gap-2 {
    overflow-x: clip !important;
    overflow-y: visible !important;
    scrollbar-width: none !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #unified-autocomplete {
    overflow-y: auto !important;
  }
}

/* Touch tablet: let search flex within the row. */
@media (hover: none) and (pointer: coarse) and (min-width: 641px) and (max-width: 1100px) {
  .discover-top-bar .search-field-container.flex-1.min-w-0 {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  .discover-top-bar .search-display-container {
    max-width: none !important;
    width: 100% !important;
  }
}

/* ANIMATIONS */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
@keyframes success-pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); }
}
@keyframes slideInDownY {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    transform: translate3d(0,-8px,0);
  }
  70% {
    transform: translate3d(0,-4px,0);
  }
  90% {
    transform: translate3d(0,-2px,0);
  }
}
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: .5;
  }
}
/* Optimized shimmer animation - smooth and performant */
@keyframes loading-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* GPU-accelerated shimmer for better performance */
@keyframes loading-shimmer-fast {
  0% {
    background-position: -200% 0;
    transform: translateZ(0);
  }
  100% {
    background-position: 200% 0;
    transform: translateZ(0);
  }
}

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

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

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

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

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

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

  /* Compact inner elements */
  .discover-top-bar .search-display-container,
  .discover-top-bar .datetime-display-container {
    min-height: 32px !important;
    height: 32px !important;
    max-height: 32px !important;
  }
}

@media (min-width: 768px) and (max-width: 1100px) {
  /* Same compact height as below 768: padding comes from base/touch vars only. */
  .discover-top-bar {
    min-height: 4rem !important;
  }
}

/* DESKTOP TOP BAR FIXES */
/* Ensure desktop logo and fields are properly sized */
@media (min-width: 1280px) {

  /* Desktop amenity chip strip: natural width, no horizontal scroll (toolbar grid + search flex yield enough space) */
  .discover-top-bar .amenity-chips-container.hidden.lg\:flex {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: relative !important;
    gap: 0.5rem !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    overscroll-behavior-x: auto !important;
    touch-action: manipulation !important;
    /* Smooth transition during breakpoint changes */
    transition: opacity var(--transition-base, 0.2s ease), transform var(--transition-base, 0.2s ease) !important;
  }

  /* CRITICAL: Override Tailwind lg:flex (1024px) to match our desktop breakpoint (1101px) */
  @media (min-width: 1024px) and (max-width: 1100px) {
    .discover-top-bar .amenity-chips-container.lg\:flex {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
    }
  }

  /* CRITICAL: Ensure amenity chips are visible at desktop breakpoint (1101px+) */
  @media (min-width: 1101px) {
    .discover-top-bar .amenity-chips-container.hidden.lg\:flex,
    .discover-top-bar .amenity-chips-container.lg\:flex {
      display: flex !important;
      visibility: visible !important;
      opacity: 1 !important;
    }
  }

  /* General amenity chip styles (for other locations) — pill shape, not boxy corners */
  .amenity-chip {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0.125rem 0.375rem !important;
    background-color: #f3f4f6 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 9999px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    color: #374151 !important;
    cursor: pointer !important;
    transition: opacity var(--transition-base, 0.2s ease), transform var(--transition-base, 0.2s ease), background-color var(--transition-base, 0.2s ease) !important;
  }

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

  .amenity-chip.active {
    background-color: var(--discover-premium-ink) !important;
    color: var(--discover-premium-surface-solid) !important;
    border-color: var(--discover-premium-ink) !important;
  }

  /* Dark mode active amenity chip */
  .dark .amenity-chip.active,
  html.dark .amenity-chip.active {
    background-color: #f5f5f4 !important;
    color: #1c1917 !important;
    border-color: #f5f5f4 !important;
  }

  /* Ensure amenity chips in top bar are properly styled - FIXED FOR CONTRAST */
  .discover-top-bar .amenity-chip {
    background-color: rgba(255, 255, 255, 0.76) !important;
    border: 1px solid rgba(148, 163, 184, 0.62) !important;
    color: #334155 !important;
    font-size: 0.75rem !important;
    padding: 0.35rem 0.65rem !important;
    border-radius: 9999px !important;
    min-height: 1.75rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    transition: opacity var(--transition-base, 0.2s ease), transform var(--transition-base, 0.2s ease), background-color var(--transition-base, 0.2s ease) !important;
    flex-shrink: 0 !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* Dark mode amenity chips in top bar */
  .dark .discover-top-bar .amenity-chip,
  html.dark .discover-top-bar .amenity-chip {
    background-color: rgba(38, 38, 38, 0.74) !important;
    border: 1px solid rgba(115, 115, 115, 0.64) !important;
    color: #d4d4d4 !important;
  }

  .discover-top-bar .amenity-chip:hover {
    background-color: rgba(241, 245, 249, 0.96) !important;
    border-color: rgba(100, 116, 139, 0.74) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.12) !important;
  }

  .discover-top-bar .amenity-chip.active,
  .discover-top-bar .amenity-chip[aria-pressed="true"] {
    background-color: var(--discover-premium-ink) !important;
    color: var(--discover-premium-surface-solid) !important;
    border-color: var(--discover-premium-ink) !important;
    box-shadow: var(--discover-control-shadow-active) !important;
  }

  .discover-top-bar .amenity-chip.active svg,
  .discover-top-bar .amenity-chip[aria-pressed="true"] svg {
    color: #fff !important;
  }

  /* Storage implicit tier: scope hint on price rail chip (not a removable filter). */
  .discover-top-bar .amenity-chip.amenity-chip--discover-price-scope:not(.active):not([aria-pressed="true"]) {
    border-style: dashed !important;
    border-color: rgba(148, 163, 184, 0.55) !important;
    background-color: rgba(248, 250, 252, 0.72) !important;
    color: #64748b !important;
    font-weight: 600 !important;
  }

  .dark .discover-top-bar .amenity-chip.amenity-chip--discover-price-scope:not(.active):not([aria-pressed="true"]),
  html.dark .discover-top-bar .amenity-chip.amenity-chip--discover-price-scope:not(.active):not([aria-pressed="true"]) {
    border-color: rgba(115, 115, 115, 0.55) !important;
    background-color: rgba(30, 41, 55, 0.45) !important;
    color: #94a3b8 !important;
  }

  .discover-top-bar .amenity-chip:disabled,
  .discover-top-bar .amenity-chip[aria-disabled="true"] {
    opacity: 1 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    background-color: rgba(241, 245, 249, 0.55) !important;
    color: #94a3b8 !important;
    border-color: rgba(148, 163, 184, 0.45) !important;
  }

  .dark .discover-top-bar .amenity-chip:disabled,
  html.dark .discover-top-bar .amenity-chip:disabled,
  .dark .discover-top-bar .amenity-chip[aria-disabled="true"],
  html.dark .discover-top-bar .amenity-chip[aria-disabled="true"] {
    background-color: rgba(30, 41, 55, 0.55) !important;
    color: #94a3b8 !important;
    border-color: rgba(82, 82, 82, 0.55) !important;
  }

  /* Dark mode active amenity chips in top bar */
  .dark .discover-top-bar .amenity-chip.active,
  html.dark .discover-top-bar .amenity-chip.active,
  .dark .discover-top-bar .amenity-chip[aria-pressed="true"],
  html.dark .discover-top-bar .amenity-chip[aria-pressed="true"] {
    background-color: #f5f5f4 !important;
    color: #1c1917 !important;
    border-color: #f5f5f4 !important;
  }

  /* Desktop logo size controlled by single source (--discover-logo-height) in topbar.css; no override here */

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

  /* Desktop: Enhanced field styling */
  .discover-top-bar .search-display-container,
  .discover-top-bar .datetime-display-container {
    border-color: rgba(148, 163, 184, 0.58) !important;
    border-radius: 0.95rem !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 8px 22px rgba(15, 23, 42, 0.05) !important;
    transition: opacity var(--transition-base, 0.2s ease), transform var(--transition-base, 0.2s ease), background-color var(--transition-base, 0.2s ease) !important;
  }

  .discover-top-bar .discover-search-flow-field {
    position: relative;
  }

  .discover-top-bar .discover-search-flow-field--location .search-display-container {
    border-top-right-radius: 0.45rem !important;
    border-bottom-right-radius: 0.45rem !important;
  }

  .discover-top-bar .discover-search-flow-field--datetime .datetime-display-container {
    border-top-left-radius: 0.45rem !important;
    border-bottom-left-radius: 0.45rem !important;
  }

  .dark .discover-top-bar .search-display-container,
  .dark .discover-top-bar .datetime-display-container,
  html.dark .discover-top-bar .search-display-container,
  html.dark .discover-top-bar .datetime-display-container {
    border-color: rgba(82, 82, 82, 0.78) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22), 0 8px 22px rgba(0, 0, 0, 0.18) !important;
  }

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

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

  .discover-top-bar .datetime-label-text,
  .discover-top-bar #datetime-display-value {
    text-align: center !important;
  }

  .discover-top-bar .search-display-container:hover,
  .discover-top-bar .datetime-display-container:hover {
    box-shadow: 0 2px 8px #00000026 !important;
    /* OPTIMIZED: Subtle hover effect without conflicting with positioning transforms */
    transform: translateY(-1px) !important;
  }

  /* Desktop: Enhanced hamburger dropdown styling */
  #discover-menu {
    box-shadow: var(--discover-premium-shadow);
    border: 1px solid var(--discover-premium-line);
  }
  .dark #discover-menu {
    box-shadow: var(--discover-premium-shadow);
    border: 1px solid var(--discover-premium-line);
  }
}

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

/* NOTE: Dark mode text color overrides consolidated in apple-scrollbars.css */

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

/* Discover menu (hamburger dropdown) - content-sized; JS caps height only when content overflows viewport */
#discover-menu {
  max-height: none;
  height: auto;
  overflow-y: visible;

  /* Ensure smooth transitions - removed max-height transition to prevent closing animation conflict */
  transition: opacity var(--transition-base, 0.2s ease), transform var(--transition-base, 0.2s ease), visibility var(--transition-base, 0.2s ease);

  /* Better spacing for menu items */
  padding: 0.25rem 0;

  /* When JS enables overflow scroll, full-width rows must not steal vertical drag. */
  touch-action: pan-y;
  overscroll-behavior: contain;
}

#discover-menu a[role="menuitem"],
#discover-menu button[role="menuitem"],
#discover-menu .discover-menu-item,
#discover-menu .discover-menu-profile-link {
  touch-action: pan-y;
}

/* Bottom fade and scroll hint when menu content is scrollable (more items below) */
#discover-menu .discover-menu-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 36px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  background: linear-gradient(to top, var(--discover-glass-strong, rgba(248, 250, 252, 0.98)) 0%, transparent 100%);
  border-radius: 0 0 0.75rem 0.75rem;
}
.dark #discover-menu .discover-menu-fade {
  background: linear-gradient(to top, rgba(38, 38, 38, 0.98) 0%, transparent 100%);
}
#discover-menu.discover-menu-has-more .discover-menu-fade {
  opacity: 1;
}

/* Hamburger menu item styling */
.dark #discover-menu {
  background: var(--discover-popover-bg-dark);
  border-color: var(--discover-popover-border-dark);
}

#discover-menu a {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 0.2s ease-out;
}

#discover-menu a:hover {
  background-color: #0000000d;
}

body.discover-page #discover-menu a:hover,
body.guest-discover-chrome #discover-menu a:hover {
  transform: none;
}

.dark #discover-menu a {
  color: #d1d5db;
}

.dark #discover-menu a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

#discover-menu .border-t {
  margin: 0.25rem 0;
}

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

/* TOUCH MOBILE: menu panel width from DiscoverMenuManager; avoid clipping profile rows */
@media (hover: none) and (pointer: coarse) and (max-width: 1100px) {
  /* CRITICAL: Override inline styles with attribute selector for maximum specificity */
  #discover-menu,
  #discover-menu[style],
  div#discover-menu,
  div#discover-menu[style] {
    width: auto !important;
    min-width: min(10.5rem, calc(100vw - 1rem)) !important;
    max-width: min(18rem, calc(100vw - 1rem)) !important;
    max-height: none !important;
    bottom: auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    padding: 0 !important;
  }

  /* Keep children within the panel without hard-clipping text blocks */
  #discover-menu *,
  #discover-menu[style] * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #discover-menu > div,
  #discover-menu .py-1 {
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #discover-menu .discover-menu-profile,
  #discover-menu .discover-menu-profile-link {
    overflow: visible !important;
  }

  #discover-menu .discover-menu-profile-link .flex-1.min-w-0 p,
  #discover-menu .discover-menu-profile-details p {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* Compact welcome header for short non-auth menus */
  #discover-menu .welcome-header-section {
    padding: 0.5rem 0.625rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  #discover-menu .welcome-header-section > .flex {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    gap: 0.5rem !important;
  }

  #discover-menu .welcome-header-section p {
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
  }

  #discover-menu .welcome-header-section p.text-sm,
  #discover-menu .welcome-header-section .text-sm {
    font-size: 0.875rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.25rem !important;
    font-weight: 600 !important;
  }

  #discover-menu .welcome-header-section p.text-xs,
  #discover-menu .welcome-header-section .text-xs {
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
  }

  /* Welcome icon - centered on top */
  #discover-menu .welcome-icon-wrapper {
    width: 2.5rem !important;
    height: 2.5rem !important;
    min-width: 2.5rem !important;
    flex-shrink: 0 !important;
  }

  #discover-menu .welcome-icon-wrapper svg {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }

  /* Menu items */
  #discover-menu a[role="menuitem"],
  #discover-menu button[role="menuitem"] {
    padding: 0.625rem 0.75rem !important;
    font-size: 0.8125rem !important; /* 13px */
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    overflow: visible !important;
  }

  #discover-menu a[role="menuitem"] svg {
    width: 1rem !important;
    height: 1rem !important;
    min-width: 1rem !important;
    margin-right: 0.5rem !important;
    flex-shrink: 0 !important;
  }

  /* Touch: keep menu copy readable without hover (no gradient clip / inherited transparent fill). */
  body.discover-page #discover-menu,
  body.discover-page #discover-menu .discover-menu-item,
  body.discover-page #discover-menu .discover-menu-item-label,
  body.discover-page #discover-menu .discover-menu-profile p,
  body.discover-page #discover-menu a[role="menuitem"],
  body.discover-page #discover-menu button[role="menuitem"] {
    color: var(--discover-menu-text, #0f172a) !important;
    -webkit-text-fill-color: currentColor !important;
  }

  .dark body.discover-page #discover-menu,
  body.dark.discover-page #discover-menu,
  .dark body.discover-page #discover-menu .discover-menu-item,
  body.dark.discover-page #discover-menu .discover-menu-item,
  .dark body.discover-page #discover-menu .discover-menu-item-label,
  body.dark.discover-page #discover-menu .discover-menu-item-label,
  .dark body.discover-page #discover-menu a[role="menuitem"],
  body.dark.discover-page #discover-menu a[role="menuitem"],
  .dark body.discover-page #discover-menu button[role="menuitem"],
  body.dark.discover-page #discover-menu button[role="menuitem"] {
    color: var(--discover-menu-text, #e7e5e4) !important;
    -webkit-text-fill-color: currentColor !important;
  }

  body.discover-page #discover-menu .discover-menu-item--danger,
  body.discover-page #discover-menu .discover-menu-item--danger .discover-menu-item-label,
  .dark body.discover-page #discover-menu .discover-menu-item--danger,
  body.dark.discover-page #discover-menu .discover-menu-item--danger,
  .dark body.discover-page #discover-menu .discover-menu-item--danger .discover-menu-item-label,
  body.dark.discover-page #discover-menu .discover-menu-item--danger .discover-menu-item-label {
    color: #b91c1c !important;
    -webkit-text-fill-color: currentColor !important;
  }

  .dark body.discover-page #discover-menu .discover-menu-item--danger,
  body.dark.discover-page #discover-menu .discover-menu-item--danger,
  .dark body.discover-page #discover-menu .discover-menu-item--danger .discover-menu-item-label,
  body.dark.discover-page #discover-menu .discover-menu-item--danger .discover-menu-item-label {
    color: #fca5a5 !important;
  }

  body.discover-page #discover-menu .welcome-header-section p:first-child {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
    color: var(--discover-menu-text, #0f172a) !important;
  }

  .dark body.discover-page #discover-menu .welcome-header-section p:first-child,
  body.dark.discover-page #discover-menu .welcome-header-section p:first-child {
    color: var(--discover-menu-text, #e7e5e4) !important;
  }

  body.discover-page #discover-menu .discover-menu-item-label {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
  }

  body.discover-page #discover-menu .discover-menu-item-main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #discover-menu a:hover,
  #discover-menu .discover-menu-item:hover {
    transform: none !important;
  }

}

/* ========================================
 * DESKTOP MID-RANGE (1101px-1279px) - MOVED UP FROM 1024px
 * Specific adjustments for medium desktop screens
 * ======================================== */
@media (min-width: 1101px) and (max-width: 1279px) {
  /* Logo: small left shift in mid-range desktop */
  .discover-top-bar .flex.items-center.gap-2.flex-1.min-w-0 > .flex-shrink-0:first-child,
  .discover-top-bar .flex.items-center.gap-2.sm\:gap-4.lg\:gap-6.flex-1.min-w-0 > .flex-shrink-0:first-child {
    transform: translateX(-2px) !important;
  }

  /* CONSOLIDATED: Datetime field for mid-range desktop */
  body.discover-page .discover-top-bar .datetime-field-container,
  .discover-top-bar .datetime-field-container {
    transform: translateY(0px) !important;
    margin-left: 0 !important;
    transition: margin-left var(--transition-base, 0.2s ease), opacity var(--transition-base, 0.2s ease) !important;
  }
}

/* SMOOTH BREAKPOINT TRANSITION: Override tablet transforms at desktop breakpoint */
@media (min-width: 1101px) {
  /* CRITICAL: Override ALL tablet/touch transforms at desktop breakpoint */
  .discover-top-bar .search-display-container,
  .discover-top-bar .search-display-container:hover,
  .discover-top-bar .search-display-container:active,
  .discover-top-bar .search-display-container:focus {
    transform: translateX(0px) !important; /* Reset horizontal transform */
  }

  .discover-top-bar .datetime-display-container {
    transform: none !important; /* Reset display container transforms */
  }
}

/* SMOOTH BREAKPOINT TRANSITION: Fine-tune for narrow desktop windows */
@media (min-width: 1101px) and (max-width: 1200px) {
  /* CONSOLIDATED: Top bar smooth transitions */
  .discover-top-bar {
    transition: opacity var(--transition-slow, 0.3s ease), background-color var(--transition-slow, 0.3s ease) !important;
  }

  /* CONSOLIDATED: Datetime field in transition zone - slight negative margin for compact spacing */
  /* NOTE: Vertical transform (translateY) is handled by search.css for 1101-1279px range */
  body.discover-page .discover-top-bar .datetime-field-container,
  .discover-top-bar .datetime-field-container {
    margin-left: 0 !important;
    transition: transform var(--transition-base, 0.2s ease), margin-left var(--transition-base, 0.2s ease) !important;
  }

  /* CONSOLIDATED: Smooth transitions */
  .discover-top-bar .search-display-container {
    transition: transform var(--transition-base, 0.2s ease), box-shadow var(--transition-base, 0.2s ease) !important;
  }

  /* Smooth hover effects */
  .discover-top-bar .search-display-container:hover,
  .discover-top-bar .datetime-display-container:hover {
    transition: transform var(--transition-fast, 0.15s ease), box-shadow var(--transition-fast, 0.15s ease) !important;
  }

  .discover-top-bar .datetime-display-container {
    transition: transform var(--transition-base, 0.2s ease), box-shadow var(--transition-base, 0.2s ease) !important;
  }
}

/* ========================================
 * IPAD/TABLET SPECIFIC OVERRIDES (641px-1100px) - EXTENDED RANGE
 * Wider datetime field and better positioning
 * ======================================== */
@media (hover: none) and (pointer: coarse) and (min-width: 641px) and (max-width: 1100px) {
  /* CONSOLIDATED: DateTime container for iPad/tablet */
  .discover-top-bar .datetime-display-container {
    min-width: 280px !important;
    max-width: 320px !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    transform: none !important;
    overflow: visible !important;
  }

  /* CONSOLIDATED: DateTime field container for iPad/tablet */
  .discover-top-bar .datetime-field-container {
    min-width: 280px !important;
    max-width: 320px !important;
    width: auto !important;
    transform: none !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  /* IPAD: Ensure content wrapper allows overflow */
  .discover-top-bar .datetime-display-container .relative.flex.items-center {
    overflow: visible !important;
    max-width: 100% !important;
  }

  /* IPAD: Ensure label and icon are visible */
  .discover-top-bar .datetime-display-container .flex-1.min-w-0 {
    overflow: visible !important;
    min-width: 0 !important;
  }

  /* IPAD: Ensure dropdown arrow is visible */
  .discover-top-bar .datetime-display-container .flex-shrink-0:last-child {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  /* Compact inner content for location/address containers */
  .discover-top-bar .search-display-container .flex-1.min-w-0,
  .discover-top-bar .datetime-display-container .flex-1.min-w-0 {
    gap: 0.125rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }

  /* Ensure placeholder text is vertically centered */
  .discover-top-bar .search-display-container .search-button-display,
  .discover-top-bar .search-display-container .search-button-display > div,
  .discover-top-bar .search-display-container .search-placeholder-text {
    display: flex !important;
    align-items: center !important; /* Vertical centering */
    justify-content: center !important; /* Horizontal centering */
    height: 100% !important; /* Fill parent height */
    min-height: 100% !important;
    transform: none !important; /* Remove any transforms to ensure proper centering */
  }

  /* Smaller icons in containers */
  .discover-top-bar .search-display-container svg,
  .discover-top-bar .datetime-display-container svg,
  .discover-top-bar .search-display-container .w-5.h-5,
  .discover-top-bar .datetime-display-container .w-5.h-5,
  .discover-top-bar .search-display-container .w-6.h-6,
  .discover-top-bar .datetime-display-container .w-6.h-6 {
    width: 1rem !important;
    height: 1rem !important;
  }

  /* Label text - smaller but visible */
  .discover-top-bar .search-display-container .text-xs,
  .discover-top-bar .datetime-display-container .text-xs {
    font-size: 0.5625rem !important; /* 9px */
    line-height: 0.75rem !important;
    opacity: 0.7 !important;
  }

  /* Value text - readable */
  .discover-top-bar .search-display-container .text-sm,
  .discover-top-bar .datetime-display-container .text-sm {
    font-size: 0.75rem !important; /* 12px */
    line-height: 1rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Inner content padding - tighter on touch tablets */
  .discover-top-bar .search-display-container .relative.flex.items-center {
    padding: 0.25rem 0.375rem !important;
  }

  /* Smaller icon container */
  .discover-top-bar .search-display-container .flex-shrink-0.mr-1 > div,
  .discover-top-bar .search-display-container .flex-shrink-0 > div:first-child {
    width: 1.25rem !important;
    height: 1.25rem !important;
  }

}

/* CRITICAL: Mobile touch optimization - ensure all interactive elements are touchable */

@media (min-width: 1101px) {
  :root {
    --discover-map-control-safe-gutter: clamp(4.75rem, 5vw, 6.25rem);
    --discover-chip-rail-fade-width: 2rem;
  }

  /* discover.html only: one chain is enough (no non-discover .discover-top-bar in this file) */
  html body.discover-page .discover-top-bar {
    height: auto !important; /* Flexible height to fit content */
    min-height: 4.5rem !important; /* Minimum height for content */
    max-height: none !important; /* Allow expansion */
    padding-top: 0 !important; /* Removed to make room for bottom row */
    padding-bottom: 0 !important; /* Removed to make room for bottom row */
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    overflow-x: visible !important; /* Allow horizontal overflow for dropdowns */
    overflow-y: visible !important; /* Allow vertical expansion for content */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: var(--z-dropdown) !important; /* Very high z-index */
    background: var(--discover-topbar-bg, linear-gradient(180deg, #f1f5f9 0%, #e8edf3 55%, #e2e8f0 100%)) !important;
    border-bottom: none !important;
    box-shadow: none !important;
    display: flex !important; /* Ensure flexbox layout */
    flex-direction: column !important; /* CRITICAL: Column layout for top and bottom rows */
    align-items: stretch !important; /* Stretch children to full width */
  }

  /* Top toolbar row: do not set min-width:0 on the whole row (shifts logo/search/datetime left). Overflow visible keeps dropdowns usable. */
  html body.discover-page .discover-top-bar > div:first-of-type {
    overflow-x: visible !important;
  }

  html body.discover-page .discover-top-bar-bottom-row {
    overflow-x: visible !important;
    min-width: 0 !important;
  }

  /*
   * Cap chip / badge rail width so satellite controls stay reachable; amenity chips
   * do not use horizontal scroll (overflow visible + flex sizing).
   */
  html body.discover-page .discover-top-bar .discover-toolbar-chip-rail,
  html body.discover-page .discover-top-bar #amenity-filter-badges-desktop {
    max-width: var(--discover-chip-rail-safe-width) !important;
    padding-right: 0 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* Amenity chip rail: no horizontal scroll; chips use natural width in the toolbar. */
  html body.discover-page .discover-top-bar .amenity-chips-container {
    overflow-x: visible !important;
    overflow-y: visible !important;
    scrollbar-width: none !important;
    overscroll-behavior-x: auto !important;
    touch-action: manipulation !important;
  }

  html body.discover-page .discover-top-bar #amenity-filter-badges-desktop {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(156, 163, 175, 0.5) transparent !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x !important;
  }

  html body.discover-page .discover-top-bar #amenity-filter-badges-desktop::-webkit-scrollbar {
    display: block !important;
    height: 4px !important;
    width: auto !important;
    background: transparent !important;
  }

  html body.discover-page .discover-top-bar #amenity-filter-badges-desktop::-webkit-scrollbar-thumb {
    background: rgba(156, 163, 175, 0.5) !important;
    border-radius: 2px !important;
  }

  html body.discover-page .discover-top-bar #amenity-filter-badges-desktop::-webkit-scrollbar-track {
    background: transparent !important;
  }

  .dark html body.discover-page .discover-top-bar #amenity-filter-badges-desktop {
    scrollbar-color: rgba(148, 163, 184, 0.45) transparent !important;
  }

  .dark html body.discover-page .discover-top-bar #amenity-filter-badges-desktop::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.45) !important;
  }

  html body.discover-page .discover-top-bar .amenity-chips-container::-webkit-scrollbar,
  html body.discover-page .discover-top-bar .amenity-chips-container::-webkit-scrollbar-track,
  html body.discover-page .discover-top-bar .amenity-chips-container::-webkit-scrollbar-thumb,
  html body.discover-page .discover-top-bar .amenity-chips-container::-webkit-scrollbar-corner {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
  }

  /* Dark mode: theme-init.js sets class on documentElement only */
  html.dark body.discover-page .discover-top-bar {
    background: var(--discover-topbar-bg) !important;
  }

  /* Top row - keep natural height; active badges render in the real row below */
  .discover-top-bar > div:first-of-type {
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
  }

  /* Bottom row container - shows when badge is visible */
  .discover-top-bar-bottom-row {
    position: static !important;
    padding-top: 0 !important;
    padding-bottom: 0.5rem !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    min-height: 0 !important;
    display: none !important; /* Hidden by default */
    background: transparent !important;
    width: 100% !important;
    z-index: 1 !important;
    /* CRITICAL: Override any Tailwind padding classes that might be applied */
    padding: 0 0 0.5rem 0 !important;
  }

  html.dark .discover-top-bar-bottom-row {
    background: transparent !important; /* Transparent - header background shows through */
  }

  /* Flex container inside bottom row - align badges horizontally */
  .discover-top-bar-bottom-row > div {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important; /* Align to left */
    width: 100% !important;
    padding-left: 0 !important; /* Remove any left padding - use container padding instead */
    padding-right: var(--discover-map-control-safe-gutter) !important;
    padding-top: 0 !important; /* Remove any top padding */
    padding-bottom: 0 !important; /* Remove any bottom padding */
    margin-left: 0 !important; /* Remove any left margin */
    gap: 0.5rem !important; /* Space between badges */
    flex-wrap: nowrap !important;
    min-width: 0 !important;
    /* CRITICAL: Override any Tailwind padding classes */
    padding: 0 var(--discover-map-control-safe-gutter) 0 0 !important;
  }

  /* Badge positioning in bottom row - horizontal alignment */
  .discover-top-bar-bottom-row #datetime-filter-badge-desktop {
    margin-left: 0 !important; /* Remove left margin - align to container edge */
    margin-right: 0 !important; /* No auto margin - badges flow horizontally */
    align-self: center !important; /* Center align vertically with other badges */
    flex-shrink: 0 !important; /* Prevent shrinking */
  }

  /* Amenity badges container - positioned next to datetime badge; scrolls when many filters */
  .discover-top-bar-bottom-row #amenity-filter-badges-desktop {
    margin-left: 0 !important;
    margin-right: 0 !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    align-self: center !important;
    scrollbar-width: none;
  }

  .discover-top-bar-bottom-row #amenity-filter-badges-desktop::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }

  /* Show bottom row when any badge inside it is visible */
  .discover-top-bar-bottom-row:has(#datetime-filter-badge-desktop:not(.hidden)),
  .discover-top-bar-bottom-row:has(#amenity-filter-badges-desktop:not(.hidden)) {
    display: block !important;
  }

  /* Fallback for browsers without :has() - use JavaScript to toggle */
  .discover-top-bar-bottom-row.show {
    display: block !important;
  }

  /* Ensure badges are visible when bottom row is shown - but only if they're not hidden */
  .discover-top-bar-bottom-row.show #datetime-filter-badge-desktop:not(.hidden) {
    display: flex !important;
  }

  .discover-top-bar-bottom-row.show #amenity-filter-badges-desktop:not(.hidden) {
    display: flex !important;
  }

  /* Ensure hidden badges stay hidden even when bottom row is shown */
  .discover-top-bar-bottom-row.show #datetime-filter-badge-desktop.hidden {
    display: none !important;
  }

  /* Center entry field containers vertically within available space */
  .discover-top-bar .datetime-field-container,
  .discover-top-bar .search-field-container {
    align-self: center !important; /* Center individually */
  }

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

}

/* ==========================================
 * COMPACT OVERLAYS ON SMALL PHONES (iOS)
 * Tighten autocomplete; datetime dropdown geometry is owned by datetime.css + DateTimePicker.js.
 * ==========================================
 */

@media (max-width: 1100px) {
  #unified-autocomplete {
    box-sizing: border-box !important; /* Ensure padding doesn't expand width */
    pointer-events: auto !important;
    touch-action: pan-y !important; /* Allow vertical scrolling in dropdown */
  }

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

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

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

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

.discover-top-bar,
  .discover-top-bar button,
  .discover-top-bar a,
  .discover-top-bar input,
  .discover-top-bar .search-display-container,
  .discover-top-bar .datetime-display-container {
    pointer-events: auto !important;
    touch-action: manipulation !important; /* Optimize touch interactions */
    -webkit-tap-highlight-color: var(--discover-premium-active) !important;
  }

  /* Ensure autocomplete items are touchable */
  #unified-autocomplete .autocomplete-item,
  #unified-autocomplete button,
  #unified-autocomplete a {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: var(--discover-premium-active) !important;
  }
}

/* Narrow discover menu spacing: after coarse-touch menu rules so padding wins over padding:0 (moved from search.css) */
@media (max-width: 520px) {
  #discover-menu,
  #discover-menu[style],
  div#discover-menu,
  div#discover-menu[style] {
    padding: 0.5rem 0 !important;
  }

  #discover-menu .dropdown-item,
  #discover-menu button,
  #discover-menu a {
    padding: 0.75rem 1rem !important;
    margin-bottom: 0.25rem !important;
    line-height: 1.5 !important;
  }

  #discover-menu .dropdown-item:last-child,
  #discover-menu button:last-child,
  #discover-menu a:last-child {
    margin-bottom: 0 !important;
  }

  #discover-menu .border-t {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
  }

  #discover-menu > * {
    margin-bottom: 0.25rem !important;
  }

  #discover-menu > *:last-child {
    margin-bottom: 0 !important;
  }
}

/* ==========================================
 * TOP BAR FIELD CONTAINMENT OWNERSHIP
 * Narrow search pill, ellipsis, and max-width 1100 search row: search.css (single source).
 * Tablet/desktop width clamps: blocks below. Touch coarse search-field overflow: nested media in touch block above.
 * ==========================================
 */

/*
 * Wide tablet (769–1100): continuous with the 641–768 fill tier.
 * Hard px clamps (~240–280) on .search-field-container left a dead gap between the
 * search/date cluster and the menu. Grid column tokens own track size; ellipsis
 * owns long addresses. Scope ONLY .search-field-container (not :has on flex-1 row).
 */
@media (min-width: 769px) and (max-width: 1100px) {
  .discover-top-bar .search-field-container {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: none !important;
  }

  .discover-top-bar :is(#search-input-display-container.search-display-container, .search-display-container) {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .discover-top-bar .search-display-container :is(.search-button-display, #search-input-description, .search-placeholder-text, span[title]) {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .discover-top-bar .datetime-field-container {
    flex: 0 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .discover-top-bar .datetime-display-container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
}

/* Desktop: grow with toolbar track; long address clamped to 2 lines for rail density. */
@media (min-width: 1101px) {
  .discover-top-bar .search-field-container {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    /* Cap only on full amenity-rail desktops (1280+); mid band overridden below. */
    max-width: none !important;
  }

  .discover-top-bar :is(#search-input-display-container.search-display-container, .search-display-container) {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    max-height: 72px !important;
    overflow: hidden !important;
  }

  .discover-top-bar .search-display-container :is(.search-button-display, #search-input-description, .search-placeholder-text) {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .discover-top-bar .search-display-container span[title] {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    line-clamp: 2 !important;
    white-space: normal !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  /* Tighter amenity chips; rail does not scroll horizontally on desktop. */
  html body.discover-page .discover-top-bar .amenity-chips-container {
    gap: 0.375rem !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    flex-wrap: nowrap !important;
    flex: 0 1 auto !important;
    min-width: 0 !important;
    scrollbar-width: none !important;
    overscroll-behavior-x: auto !important;
  }

  html body.discover-page .discover-top-bar .amenity-chips-container::-webkit-scrollbar,
  html body.discover-page .discover-top-bar .amenity-chips-container::-webkit-scrollbar-track,
  html body.discover-page .discover-top-bar .amenity-chips-container::-webkit-scrollbar-thumb,
  html body.discover-page .discover-top-bar .amenity-chips-container::-webkit-scrollbar-corner {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
  }

  .discover-top-bar .amenity-chips-container #parking-amenity-chips,
  .discover-top-bar .amenity-chips-container #storage-amenity-chips {
    gap: 0.6rem !important;
    flex-wrap: nowrap !important;
  }

  .discover-top-bar .amenity-chip {
    padding: 0.35rem 0.65rem !important;
    font-size: 0.6875rem !important;
    min-height: 1.625rem !important;
    gap: 0.25rem !important;
    border-radius: 9999px !important;
  }

  .discover-top-bar .amenity-chip svg {
    width: 0.6875rem !important;
    height: 0.6875rem !important;
    min-width: 0.6875rem !important;
    min-height: 0.6875rem !important;
  }
}

/* Tablet landscape still uses the sheet layout; do not let Tailwind lg:flex surface top-bar shortcuts. */
@media (min-width: 1024px) and (max-width: 1100px) {
  html body.discover-page .discover-top-bar .amenity-chips-container,
  .discover-top-bar .amenity-chips-container.hidden.lg\:flex,
  .discover-top-bar .amenity-chips-container.lg\:flex {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Compact desktop / laptop: preserve the primary controls and keep shortcut chips out of the row. */
@media (min-width: 1101px) and (max-width: 1279px) {
  html body.discover-page .discover-top-bar {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    overflow-x: visible !important;
  }

  .discover-top-bar > div:first-of-type {
    padding-top: 0.45rem !important;
    padding-bottom: 0.5rem !important;
  }

  .discover-top-bar:has(.discover-top-bar-bottom-row #datetime-filter-badge-desktop:not(.hidden)) > div:first-of-type,
  .discover-top-bar:has(.discover-top-bar-bottom-row #amenity-filter-badges-desktop:not(.hidden)) > div:first-of-type,
  .discover-top-bar:has(.discover-top-bar-bottom-row.show) > div:first-of-type {
    padding-bottom: 0.5rem !important;
  }

  .discover-top-bar .flex.items-center.justify-between.w-full {
    gap: 0.75rem !important;
    align-items: center !important;
    min-width: 0 !important;
  }

  .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.flex-1.min-w-0 {
    flex: 1 1 auto !important;
    gap: 0.625rem !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .discover-top-bar .flex.items-center.gap-2.flex-1.min-w-0 > .flex-shrink-0:first-child,
  .discover-top-bar .flex.items-center.gap-2.sm\:gap-4.lg\:gap-6.flex-1.min-w-0 > .flex-shrink-0:first-child {
    transform: translateX(-2px) !important;
    align-self: center !important;
  }

  .discover-top-bar .search-field-container,
  .discover-top-bar .flex-1.min-w-0.search-field-container {
    flex: 1 1 clamp(230px, 30vw, 350px) !important;
    min-width: 190px !important;
    max-width: clamp(240px, 32vw, 360px) !important;
    width: auto !important;
    overflow: visible !important;
  }

  .discover-top-bar .search-field-container > .relative,
  .discover-top-bar :is(#search-input-display-container.search-display-container, .search-display-container) {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  .discover-top-bar .search-display-container .flex-1.min-w-0,
  .discover-top-bar .search-display-container .search-button-display,
  .discover-top-bar .search-display-container .search-button-display > div,
  .discover-top-bar .search-display-container .search-placeholder-text,
  .discover-top-bar .search-display-container span,
  .discover-top-bar .search-display-container span[title] {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .discover-top-bar .datetime-field-container {
    flex: 0 1 clamp(190px, 24vw, 260px) !important;
    width: clamp(190px, 24vw, 260px) !important;
    min-width: 170px !important;
    max-width: 260px !important;
    margin-left: 0 !important;
    transform: none !important;
  }

  .discover-top-bar .datetime-display-container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    transform: none !important;
    overflow: hidden !important;
  }

  .discover-top-bar .datetime-display-container:hover,
  .discover-top-bar .datetime-display-container:active,
  .discover-top-bar .datetime-display-container:focus {
    transform: none !important;
  }

  .discover-top-bar .datetime-label-text {
    font-size: 0.625rem !important;
    line-height: 0.85rem !important;
    max-width: 100% !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }

  .discover-top-bar #datetime-display-value {
    font-size: 0.8125rem !important;
    line-height: 1rem !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .discover-top-bar .datetime-display-container .relative.flex.items-center {
    padding-left: 0.75rem !important;
    padding-right: 0.5rem !important;
  }

  .discover-top-bar .datetime-display-container .flex-shrink-0.ml-1,
  .discover-top-bar .datetime-display-container .flex-shrink-0.ml-2,
  .discover-top-bar .datetime-display-container .flex-shrink-0.ml-3 {
    margin-left: 0.375rem !important;
  }

  html body.discover-page .discover-top-bar .amenity-chips-container,
  .discover-top-bar .amenity-chips-container.hidden.lg\:flex,
  .discover-top-bar .amenity-chips-container.lg\:flex {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

.discover-top-bar .datetime-display-container.datetime-compact-label .datetime-label-text {
  font-size: 0.625rem !important;
  line-height: 0.85rem !important;
  max-width: 100% !important;
  overflow: hidden !important;
  white-space: nowrap !important;
}

/* Compact label replaces the value only when the label row is visible (md:block = 768px+). */
@media (min-width: 768px) {
  html body.discover-page .discover-top-bar .datetime-display-container.datetime-compact-label #datetime-display-value {
    display: none !important;
  }
}

/* Date/time field: keep label/value and arrow in a consistent row so text cannot crowd the right edge. */
.discover-top-bar .datetime-field-container,
.discover-top-bar .datetime-display-container {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.discover-top-bar .datetime-display-container {
  overflow: hidden !important;
}

.discover-top-bar .datetime-display-container > .relative.flex.items-center {
  width: 100% !important;
  min-width: 0 !important;
  gap: var(--datetime-arrow-spacing, 0.375rem) !important;
  padding-left: 0.75rem !important;
  padding-right: 0.5rem !important;
  box-sizing: border-box !important;
}

.discover-top-bar .datetime-display-container > .relative.flex.items-center > .flex-1.min-w-0 {
  min-width: 0 !important;
  overflow: hidden !important;
  text-align: left !important;
}

.discover-top-bar .datetime-label-text {
  max-width: 100% !important;
  overflow: hidden !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.discover-top-bar #datetime-display-value {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-align: left !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Discover datetime trigger: value-only (#datetime-display-value). Label stays in DOM for JS/picker copy. */
html body.discover-page .discover-top-bar .datetime-field-container .datetime-display-container .datetime-label-text,
html body.discover-page .discover-top-bar .datetime-display-container .datetime-label-text.hidden.md\:block {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

html body.discover-page .discover-top-bar .datetime-display-container #datetime-display-value,
html body.discover-page .discover-top-bar .datetime-display-container.datetime-compact-label #datetime-display-value {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.discover-top-bar .datetime-display-container > .relative.flex.items-center > .flex-shrink-0 {
  flex: 0 0 auto !important;
  margin-left: 0 !important;
}

.discover-top-bar .datetime-display-container .mx-dropdown-arrow {
  width: 1.5rem !important;
  height: 1.5rem !important;
  min-width: 1.5rem !important;
}

/* Shared Discover control surface: search and datetime should read as sibling triggers. */
.discover-top-bar .search-display-container,
.discover-top-bar .datetime-display-container {
  background: var(--discover-popover-bg-elevated, #ffffff) !important;
  border-color: var(--discover-popover-border, rgba(214, 211, 208, 0.68)) !important;
}

.dark .discover-top-bar .search-display-container,
.dark .discover-top-bar .datetime-display-container,
html.dark .discover-top-bar .search-display-container,
html.dark .discover-top-bar .datetime-display-container {
  background: var(--discover-popover-bg-dark-elevated, #2f2f2f) !important;
  border-color: var(--discover-popover-border-dark, rgba(82, 82, 82, 0.72)) !important;
}

.discover-top-bar .search-display-container:hover,
.discover-top-bar .datetime-display-container:hover {
  border-color: rgba(168, 162, 158, 0.66) !important;
}

.dark .discover-top-bar .search-display-container:hover,
.dark .discover-top-bar .datetime-display-container:hover,
html.dark .discover-top-bar .search-display-container:hover,
html.dark .discover-top-bar .datetime-display-container:hover {
  border-color: rgba(115, 115, 115, 0.78) !important;
}

/* Canonical Discover toolbar layout: search + datetime are one grouped control system.
   This high-specificity section intentionally owns topbar layout so older search.css
   breakpoint fixes cannot size or offset the controls independently. */
html body.discover-page .discover-top-bar {
  --discover-toolbar-gap: clamp(0.5rem, 0.9vw, 0.875rem);
  --discover-control-gap: clamp(0.375rem, 0.65vw, 0.625rem);
  --discover-control-height: 2.75rem;
  --discover-search-column: minmax(15rem, clamp(18rem, 28vw, 26rem));
  --discover-date-column: minmax(10.25rem, clamp(10.5rem, 15vw, 14rem));
  --discover-search-controls-max: min(52vw, 42rem);
}

html body.discover-page .discover-top-bar .discover-toolbar {
  display: grid !important;
  /* Primary row includes desktop amenity chips; menu is the only other column */
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: var(--discover-toolbar-gap) !important;
  min-width: 0 !important;
  width: 100% !important;
  overflow: visible !important;
}

html body.discover-page .discover-top-bar .discover-toolbar-primary {
  display: flex !important;
  align-items: center !important;
  gap: var(--discover-toolbar-gap) !important;
  min-width: 0 !important;
  width: 100% !important;
  overflow: visible !important;
}

html body.discover-page .discover-top-bar > .discover-toolbar.flex.items-center.justify-between.w-full {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: var(--discover-toolbar-gap) !important;
  min-width: 0 !important;
  width: 100% !important;
  overflow: visible !important;
}

html body.discover-page .discover-top-bar .discover-toolbar-primary.flex.items-center.gap-2.flex-1.min-w-0,
html body.discover-page .discover-top-bar .discover-toolbar-primary.flex.items-center.gap-2.sm\:gap-4.lg\:gap-6.flex-1.min-w-0 {
  display: flex !important;
  align-items: center !important;
  gap: var(--discover-toolbar-gap) !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

html body.discover-page .discover-top-bar .discover-toolbar-logo {
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: auto !important;
  transform: none !important;
}

html body.discover-page .discover-top-bar .discover-search-controls {
  display: grid !important;
  grid-template-columns: var(--discover-search-column) var(--discover-date-column) !important;
  align-items: center !important;
  gap: var(--discover-control-gap) !important;
  flex: 0 1 var(--discover-search-controls-max) !important;
  min-width: 0 !important;
  max-width: var(--discover-search-controls-max) !important;
  width: min(100%, var(--discover-search-controls-max)) !important;
  overflow: visible !important;
}

html body.discover-page .discover-top-bar .discover-toolbar-search-field,
html body.discover-page .discover-top-bar .discover-toolbar-datetime-field {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
  flex: 0 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: var(--discover-control-height) !important;
  height: var(--discover-control-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  overflow: visible !important;
}

html body.discover-page .discover-top-bar .discover-toolbar-primary.flex.items-center.gap-2.flex-1.min-w-0 .discover-toolbar-search-field.search-field-container,
html body.discover-page .discover-top-bar .discover-toolbar-primary.flex.items-center.gap-2.flex-1.min-w-0 .discover-toolbar-datetime-field.datetime-field-container,
html body.discover-page .discover-top-bar .discover-toolbar-primary.flex.items-center.gap-2.sm\:gap-4.lg\:gap-6.flex-1.min-w-0 .discover-toolbar-search-field.search-field-container,
html body.discover-page .discover-top-bar .discover-toolbar-primary.flex.items-center.gap-2.sm\:gap-4.lg\:gap-6.flex-1.min-w-0 .discover-toolbar-datetime-field.datetime-field-container {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  align-items: center !important;
  align-self: center !important;
  justify-self: stretch !important;
  flex: 0 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: var(--discover-control-height) !important;
  height: var(--discover-control-height) !important;
  max-height: var(--discover-control-height) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  overflow: visible !important;
}

html body.discover-page .discover-top-bar .discover-toolbar-search-field > .relative,
html body.discover-page .discover-top-bar .discover-toolbar-datetime-field > .relative {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

html body.discover-page .discover-top-bar .search-display-container,
html body.discover-page .discover-top-bar .datetime-display-container {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: var(--discover-control-height) !important;
  height: var(--discover-control-height) !important;
  max-height: var(--discover-control-height) !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
  transform: none !important;
  overflow: hidden !important;
}

html body.discover-page .discover-top-bar .search-display-container:hover,
html body.discover-page .discover-top-bar .search-display-container:active,
html body.discover-page .discover-top-bar .search-display-container:focus,
html body.discover-page .discover-top-bar .datetime-display-container:hover,
html body.discover-page .discover-top-bar .datetime-display-container:active,
html body.discover-page .discover-top-bar .datetime-display-container:focus {
  transform: none !important;
}

html body.discover-page .discover-top-bar .search-display-container > .relative.flex.items-center,
html body.discover-page .discover-top-bar .datetime-display-container > .relative.flex.items-center {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  align-items: center !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

html body.discover-page .discover-top-bar .search-display-container .flex-1.min-w-0,
html body.discover-page .discover-top-bar .datetime-display-container .flex-1.min-w-0 {
  min-width: 0 !important;
  max-width: 100% !important;
  flex: 1 1 0% !important;
  overflow: hidden !important;
}

html body.discover-page .discover-top-bar .search-placeholder-text,
html body.discover-page .discover-top-bar #search-input-description,
html body.discover-page .discover-top-bar #datetime-display-value,
html body.discover-page .discover-top-bar .datetime-label-text {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

html body.discover-page .discover-top-bar .discover-toolbar-chip-rail {
  align-self: center !important;
  min-width: 0 !important;
  /* Allow full chip row without capping to ~20rem (that cap required overflow-x scroll) */
  max-width: min(42rem, 100%) !important;
  margin: 0 !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  overscroll-behavior-x: auto !important;
  touch-action: manipulation !important;
  min-height: var(--discover-control-height, 2.75rem) !important;
  align-items: center !important;
  box-sizing: border-box !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

html body.discover-page .discover-top-bar .discover-toolbar-menu {
  justify-self: end !important;
  align-self: center !important;
  width: auto !important;
  min-width: 2.25rem !important;
  max-width: none !important;
  margin: 0 !important;
  transform: none !important;
}

html body.discover-page .discover-top-bar #discover-menu-button {
  transform: none !important;
}

html body.discover-page .discover-top-bar .discover-top-bar-bottom-row {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  display: none !important;
  overflow: hidden !important;
}

html body.discover-page .discover-top-bar .discover-top-bar-bottom-row.show,
html body.discover-page .discover-top-bar .discover-top-bar-bottom-row:has(#datetime-filter-badge-desktop:not(.hidden)),
html body.discover-page .discover-top-bar .discover-top-bar-bottom-row:has(#amenity-filter-badges-desktop:not(.hidden)) {
  display: block !important;
  padding-top: 0.375rem !important;
  padding-bottom: 0.25rem !important;
  overflow: visible !important;
}

@media (min-width: 1420px) {
  html body.discover-page .discover-top-bar .discover-search-controls {
    --discover-search-column: minmax(18rem, clamp(22rem, 30vw, 28rem));
    --discover-date-column: minmax(11rem, clamp(11.5rem, 13vw, 14.5rem));
    --discover-search-controls-max: min(48vw, 43rem);
  }
}

@media (min-width: 1101px) and (max-width: 1279px) {
  html body.discover-page .discover-top-bar .discover-toolbar,
  html body.discover-page .discover-top-bar > .discover-toolbar.flex.items-center.justify-between.w-full {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  html body.discover-page .discover-top-bar .discover-search-controls {
    --discover-search-column: minmax(14rem, clamp(15.5rem, 27vw, 23rem));
    --discover-date-column: minmax(9.75rem, 12.5rem);
    --discover-search-controls-max: min(100%, 36rem);
  }

  html body.discover-page .discover-top-bar .discover-toolbar-chip-rail {
    display: none !important;
  }
}

/* Compact + wide tablet (641–1100): one continuous track; no unowned mid-band. */
@media (min-width: 641px) and (max-width: 1100px) {
  html body.discover-page .discover-top-bar {
    --discover-control-height: 2.75rem;
    --discover-search-column: minmax(12rem, 1fr);
    --discover-date-column: minmax(8.75rem, clamp(9rem, 22vw, 12.5rem));
    --discover-search-controls-max: min(100%, 48rem);
  }

  html body.discover-page .discover-top-bar .discover-toolbar,
  html body.discover-page .discover-top-bar > .discover-toolbar.flex.items-center.justify-between.w-full {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  html body.discover-page .discover-top-bar .discover-search-controls {
    grid-template-columns: var(--discover-search-column) var(--discover-date-column) !important;
    max-width: var(--discover-search-controls-max) !important;
    width: min(100%, var(--discover-search-controls-max)) !important;
  }

  html body.discover-page .discover-top-bar .discover-toolbar-chip-rail {
    display: none !important;
  }
}

/* 641–768: denser date column while search still takes remaining primary-row space. */
@media (min-width: 641px) and (max-width: 768px) {
  html body.discover-page .discover-top-bar .discover-toolbar-primary {
    gap: 0.5rem !important;
  }

  html body.discover-page .discover-top-bar .discover-search-controls {
    flex: 1 1 auto !important;
    --discover-search-column: minmax(0, 1fr);
    --discover-date-column: minmax(6.75rem, 8.25rem);
    --discover-search-controls-max: none;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0.375rem !important;
  }

  html body.discover-page .discover-top-bar .discover-toolbar-search-field,
  html body.discover-page .discover-top-bar .discover-toolbar-search-field.search-field-container {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    width: 100% !important;
  }

  html body.discover-page .discover-top-bar :is(#search-input-display-container.search-display-container, .search-display-container) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  html body.discover-page .discover-top-bar .datetime-label-text {
    display: none !important;
  }
}

/* =============================================================================
 * Canonical Discover top bar and account menu polish.
 * Moved from the former page-level responsive refresh layer so topbar.css owns
 * all top-bar chrome, compact phone grid behavior, and Discover menu visuals.
 * ============================================================================= */
body.discover-page .discover-top-bar {
  background: var(--discover-chrome-surface) !important;
  border-bottom: 1px solid var(--discover-chrome-border) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04), 0 10px 28px rgba(15, 23, 42, 0.08) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  padding: max(0.625rem, env(safe-area-inset-top, 0px)) var(--discover-chrome-edge) 0.625rem !important;
}

.dark body.discover-page .discover-top-bar,
body.dark.discover-page .discover-top-bar {
  background: var(--discover-topbar-bg) !important;
  border-bottom-color: var(--discover-topbar-border) !important;
  box-shadow: var(--discover-topbar-shadow) !important;
}

body.discover-page .discover-toolbar,
body.discover-page .discover-toolbar-primary {
  align-items: center !important;
  gap: var(--discover-chrome-gap) !important;
}

body.discover-page .discover-search-controls {
  display: flex !important;
  align-items: stretch !important;
  gap: 0.5rem !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: 44rem !important;
}

body.discover-page .discover-toolbar-search-field {
  flex: 1 1 18rem !important;
  min-width: 0 !important;
}

body.discover-page .discover-toolbar-datetime-field {
  flex: 0 0 clamp(8.5rem, 18vw, 14rem) !important;
  min-width: 0 !important;
}

body.discover-page .discover-top-bar .swiftspot-logo,
body.discover-page .discover-top-bar img.swiftspot-logo {
  height: clamp(1.35rem, 2vw, 1.75rem) !important;
  max-height: clamp(1.35rem, 2vw, 1.75rem) !important;
}

body.discover-page .search-display-container,
body.discover-page .datetime-display-container {
  min-height: var(--discover-chrome-control-height) !important;
  border-radius: 999px !important;
  border: 1px solid var(--discover-chrome-border) !important;
  background: var(--discover-chrome-surface-solid) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
}

.dark body.discover-page .search-display-container,
.dark body.discover-page .datetime-display-container,
body.dark.discover-page .search-display-container,
body.dark.discover-page .datetime-display-container {
  background: var(--discover-chrome-surface-solid) !important;
  border-color: var(--discover-chrome-border) !important;
}

body.discover-page .search-display-container:hover,
body.discover-page .datetime-display-container:hover,
body.discover-page .search-display-container:focus-within,
body.discover-page .datetime-display-container:focus-within {
  border-color: var(--discover-chrome-border-strong) !important;
  box-shadow: var(--discover-premium-focus) !important;
  transform: none !important;
}

/* Committed location: same set-vs-empty cue as When? (placeholder class removed when set). */
body.discover-page .search-display-container:not(:has(.search-placeholder-text)) {
  border-color: color-mix(in srgb, var(--color-brand-accent, #0f5a56) 28%, var(--discover-chrome-border)) !important;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.05), 0 0 0 1px color-mix(in srgb, var(--color-brand-accent, #0f5a56) 12%, transparent) !important;
}

.dark body.discover-page .search-display-container:not(:has(.search-placeholder-text)),
body.dark.discover-page .search-display-container:not(:has(.search-placeholder-text)) {
  border-color: color-mix(in srgb, var(--color-brand-accent-on-dark, #5eead4) 32%, var(--discover-chrome-border)) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 0 0 1px color-mix(in srgb, var(--color-brand-accent-on-dark, #5eead4) 14%, transparent) !important;
}

body.discover-page .search-display-container:not(:has(.search-placeholder-text)):hover,
body.discover-page .search-display-container:not(:has(.search-placeholder-text)):focus-within {
  border-color: color-mix(in srgb, var(--color-brand-accent, #0f5a56) 40%, var(--discover-chrome-border-strong)) !important;
  box-shadow: var(--discover-premium-focus), 0 0 0 1px color-mix(in srgb, var(--color-brand-accent, #0f5a56) 16%, transparent) !important;
}

.dark body.discover-page .search-display-container:not(:has(.search-placeholder-text)):hover,
.dark body.discover-page .search-display-container:not(:has(.search-placeholder-text)):focus-within,
body.dark.discover-page .search-display-container:not(:has(.search-placeholder-text)):hover,
body.dark.discover-page .search-display-container:not(:has(.search-placeholder-text)):focus-within {
  border-color: color-mix(in srgb, var(--color-brand-accent-on-dark, #5eead4) 42%, var(--discover-chrome-border-strong)) !important;
  box-shadow: var(--discover-premium-focus), 0 0 0 1px color-mix(in srgb, var(--color-brand-accent-on-dark, #5eead4) 18%, transparent) !important;
}

body.discover-page .search-display-container:not(:has(.search-placeholder-text)) #search-input-description,
body.discover-page .search-display-container:not(:has(.search-placeholder-text)) .search-button-display {
  color: var(--discover-chrome-text, var(--discover-premium-ink, #171412));
  font-weight: 600;
}

body.discover-page .search-display-container .relative.flex.items-center,
body.discover-page .datetime-display-container .relative.flex.items-center,
body.discover-page .search-display-container .discover-topbar-control__inner,
body.discover-page .datetime-display-container .discover-topbar-control__inner {
  min-height: var(--discover-chrome-control-height) !important;
  padding: 0.45rem 0.75rem !important;
}

body.discover-page .search-display-container .w-6,
body.discover-page .search-display-container .sm\:w-7,
body.discover-page .search-display-container .md\:w-8 {
  width: 1.75rem !important;
  height: 1.75rem !important;
  border-radius: 999px !important;
  background: var(--discover-chrome-surface-muted) !important;
}

body.discover-page .datetime-display-container .mx-dropdown-arrow {
  background: transparent !important;
}

/* Committed values only — empty When? stays muted (see :not(--set) below). */
body.discover-page .search-display-container:not(:has(.search-placeholder-text)) #search-input-description,
body.discover-page #datetime-display-value.discover-datetime-trigger-value--set,
body.discover-page .discover-datetime-trigger-value--set {
  color: var(--discover-chrome-text) !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
}

body.discover-page #datetime-display-value:not(.discover-datetime-trigger-value--set),
body.discover-page .discover-datetime-trigger-value:not(.discover-datetime-trigger-value--set) {
  color: var(--discover-chrome-text-muted, #5c5650) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

body.discover-page .datetime-label-text {
  color: var(--discover-chrome-muted) !important;
  letter-spacing: 0.06em !important;
}

body.discover-page #discover-menu-button {
  min-width: var(--discover-chrome-control-height) !important;
  min-height: var(--discover-chrome-control-height) !important;
  border: 1px solid var(--discover-chrome-border) !important;
  border-radius: 999px !important;
  background: var(--discover-chrome-surface-solid) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

.dark body.discover-page #discover-menu-button,
body.dark.discover-page #discover-menu-button {
  background: var(--discover-chrome-surface-solid) !important;
}

body.discover-page #discover-menu-button:hover {
  border-color: var(--discover-chrome-border-strong) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.1) !important;
}

body.discover-page #discover-menu-button:focus,
body.discover-page #discover-menu-button:focus-visible {
  outline: none !important;
}

body.discover-page #discover-menu-button.profile-menu-trigger img,
body.discover-page #discover-menu-button.profile-menu-trigger > div {
  box-shadow: none !important;
}

body.discover-page #discover-menu-button img {
  width: 2rem !important;
  height: 2rem !important;
}

body.discover-page .amenity-chips-container .amenity-chip,
body.discover-page .datetime-filter-badge,
body.discover-page .amenity-filter-badges-container > * {
  border-radius: 999px !important;
}

/* Discover top bar — unified control shell (search, datetime, menu trigger) */
body.discover-page .discover-topbar-control {
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

body.discover-page .discover-topbar-control__inner {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: 0;
  min-height: inherit;
  height: 100%;
  gap: 0.5rem;
}

body.discover-page .discover-topbar-control__icon-well {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  background: var(--discover-chrome-surface-muted);
  color: var(--discover-chrome-muted);
  flex-shrink: 0;
  transition: background-color 0.15s ease, color 0.15s ease;
}

body.discover-page .discover-topbar-control__icon-svg,
body.discover-page .discover-topbar-control__chevron-svg {
  width: 0.875rem;
  height: 0.875rem;
  color: inherit;
  stroke: currentColor;
  flex-shrink: 0;
}

body.discover-page .discover-topbar-control__chevron {
  margin-left: auto;
}

body.discover-page .datetime-display-container .discover-topbar-control__icon-well.mx-dropdown-arrow {
  width: 1.5rem;
  height: 1.5rem;
  background: transparent;
}

body.discover-page .search-display-container:focus-within .discover-topbar-control__icon-well,
body.discover-page .datetime-display-container:focus-within .discover-topbar-control__icon-well,
body.discover-page .search-display-container:hover .discover-topbar-control__icon-well,
body.discover-page .datetime-display-container:hover .discover-topbar-control__icon-well {
  background: var(--discover-chrome-surface-muted);
  color: var(--discover-chrome-text);
}

body.discover-page .search-placeholder-text,
body.discover-page #datetime-display-value,
body.discover-page .discover-datetime-trigger-value {
  font-size: 0.875rem;
  line-height: 1.2;
}

body.discover-page #datetime-display-value:not(.discover-datetime-trigger-value--set),
body.discover-page .discover-datetime-trigger-value:not(.discover-datetime-trigger-value--set) {
  color: var(--discover-chrome-text-muted, #5c5650);
}

body.discover-page #datetime-display-value.discover-datetime-trigger-value--set,
body.discover-page .discover-datetime-trigger-value--set {
  color: var(--discover-chrome-text, var(--discover-premium-ink, #171412));
  font-weight: 600;
}

body.discover-page .datetime-display-container.datetime-has-committed-value {
  border-color: color-mix(in srgb, var(--color-brand-accent, #0f5a56) 28%, var(--discover-chrome-border)) !important;
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.05), 0 0 0 1px color-mix(in srgb, var(--color-brand-accent, #0f5a56) 12%, transparent) !important;
}

.dark body.discover-page .datetime-display-container.datetime-has-committed-value,
body.dark.discover-page .datetime-display-container.datetime-has-committed-value {
  border-color: color-mix(in srgb, var(--color-brand-accent-on-dark, #5eead4) 32%, var(--discover-chrome-border)) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 0 0 1px color-mix(in srgb, var(--color-brand-accent-on-dark, #5eead4) 14%, transparent) !important;
}

body.discover-page .datetime-display-container.datetime-has-committed-value:hover,
body.discover-page .datetime-display-container.datetime-has-committed-value:focus-within {
  border-color: color-mix(in srgb, var(--color-brand-accent, #0f5a56) 40%, var(--discover-chrome-border-strong)) !important;
  box-shadow: var(--discover-premium-focus), 0 0 0 1px color-mix(in srgb, var(--color-brand-accent, #0f5a56) 16%, transparent) !important;
}

.dark body.discover-page .datetime-display-container.datetime-has-committed-value:hover,
.dark body.discover-page .datetime-display-container.datetime-has-committed-value:focus-within,
body.dark.discover-page .datetime-display-container.datetime-has-committed-value:hover,
body.dark.discover-page .datetime-display-container.datetime-has-committed-value:focus-within {
  border-color: color-mix(in srgb, var(--color-brand-accent-on-dark, #5eead4) 42%, var(--discover-chrome-border-strong)) !important;
  box-shadow: var(--discover-premium-focus), 0 0 0 1px color-mix(in srgb, var(--color-brand-accent-on-dark, #5eead4) 18%, transparent) !important;
}

body.discover-page #datetime-picker-trigger.discover-datetime-trigger--needs-when {
  outline: 2px solid var(--brand-primary, #0f5a56);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  body.discover-page #datetime-display-value,
  body.discover-page .discover-datetime-trigger-value {
    font-size: 0.8rem;
    line-height: 1.1rem;
    text-align: left;
  }
}

@media (min-width: 1280px) {
  body.discover-page #datetime-display-value,
  body.discover-page .discover-datetime-trigger-value {
    font-size: 0.8125rem;
    line-height: 1.1;
    text-align: center;
  }
}

body.discover-page .datetime-label-text {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.125rem;
}

body.discover-page .discover-topbar-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--discover-chrome-text);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

body.discover-page a.discover-topbar-hub-link {
  position: relative;
  width: var(--discover-chrome-control-height, 2.75rem);
  height: var(--discover-chrome-control-height, 2.75rem);
  border-radius: 9999px;
  text-decoration: none;
  flex-shrink: 0;
}

body.discover-page a.discover-topbar-hub-link:hover {
  background: color-mix(in srgb, var(--discover-chrome-text, #0f172a) 8%, transparent);
}

body.discover-page a.discover-topbar-hub-link:focus-visible {
  outline: none;
  box-shadow: var(--discover-premium-focus);
}

body.discover-page .discover-topbar-signin-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--discover-chrome-control-height, 2.75rem);
  padding: 0 0.75rem;
  border-radius: 0.75rem;
  border: 1px solid var(--discover-chrome-border, #e7e5e4);
  background: var(--discover-chrome-surface, #fff);
  color: var(--discover-chrome-text, #171412);
  font-size: 0.8125rem;
  font-weight: 650;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

body.discover-page .discover-topbar-signin-btn:hover {
  background: var(--discover-chrome-surface-muted, #f5f5f4);
}

body.discover-page .discover-topbar-signin-btn:focus-visible {
  outline: none;
  box-shadow: var(--discover-premium-focus);
}

body.discover-page a.discover-topbar-hub-link .swiftspot-nav-badge--corner {
  top: 0.2rem;
  right: 0.15rem;
}

body.discover-page #discover-menu-button:not(.profile-menu-trigger) svg {
  color: var(--discover-chrome-text);
  stroke: currentColor;
}

body.discover-page #discover-menu-button:focus-visible {
  outline: none !important;
  border-color: var(--discover-chrome-border-strong) !important;
  box-shadow: var(--discover-premium-focus) !important;
}

body.discover-page .search-display-container:focus-within,
body.discover-page .datetime-display-container:focus-within {
  outline: none;
}

body.discover-page .discover-toolbar-menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
  flex-shrink: 0;
  align-self: center;
}

@media (min-width: 1101px) {
  body.discover-page .discover-top-bar {
    padding-inline: clamp(1rem, 1.8vw, 1.75rem) !important;
  }

  body.discover-page .discover-search-controls {
    max-width: min(48rem, 54vw) !important;
  }

  body.discover-page .discover-toolbar-chip-rail {
    max-width: min(42rem, 100%) !important;
    padding-inline: 0.15rem !important;
  }
}

@media (min-width: 1280px) and (max-width: 1419px) {
  html body.discover-page .discover-top-bar .discover-toolbar-datetime-field {
    flex-basis: clamp(8.75rem, 11vw, 10.25rem) !important;
  }
}

@media (min-width: 1420px) {
  body.discover-page .discover-toolbar-datetime-field {
    flex-basis: 14.5rem !important;
  }
}

/* Canonical tablet band (568–1100): chrome density only.
 * Do not cap .discover-search-controls with 68vw here — that left an empty strip
 * beside the menu on wide tablets; phone (≤640) and compact (641–768) own fill. */
@media (min-width: 568px) and (max-width: 1100px) {
  body.discover-page {
    --discover-chrome-edge: clamp(0.875rem, 2.2vw, 1.25rem);
    --discover-chrome-control-height: 2.75rem;
  }

  body.discover-page .discover-toolbar-datetime-field {
    flex-basis: clamp(10.5rem, 25vw, 15.5rem) !important;
  }
}

@media (min-width: 641px) and (max-width: 768px) {
  body.discover-page .discover-search-controls {
    max-width: 100% !important;
  }

  body.discover-page .discover-toolbar-datetime-field {
    flex-basis: clamp(6.75rem, 18vw, 8.25rem) !important;
  }
}

@media (max-height: 500px) and (max-width: 1100px) {
  body.discover-page {
    --discover-chrome-control-height: 2.25rem;
  }

  body.discover-page .discover-top-bar {
    padding-top: max(0.35rem, env(safe-area-inset-top, 0px)) !important;
    padding-bottom: 0.35rem !important;
  }
}

@media (max-width: 640px) {
  /* Phone toolbar layout: --bp-phone-toolbar / DiscoverConstants.PHONE_TOOLBAR */
  html body.discover-page {
    --discover-phone-edge: max(0.625rem, env(safe-area-inset-left, 0px));
    --discover-phone-edge-right: max(0.625rem, env(safe-area-inset-right, 0px));
    --discover-map-control-safe-gutter: 3.75rem;
    --discover-chip-rail-safe-width: max(
      0px,
      calc(100vw - var(--discover-phone-edge) - var(--discover-phone-edge-right) - var(--discover-map-control-safe-gutter))
    );
    --discover-chrome-edge: 0.625rem;
    --discover-chrome-control-height: 2.125rem;
    --discover-mobile-search-fill: rgba(118, 118, 128, 0.12);
    --discover-mobile-search-divider: rgba(60, 60, 67, 0.18);
  }

  html.dark body.discover-page {
    --discover-mobile-search-fill: rgba(255, 255, 255, 0.08);
    --discover-mobile-search-divider: rgba(255, 255, 255, 0.14);
  }

  html body.discover-page .discover-top-bar {
    /* Phone lockup: icon is ~3× wordmark height in the asset; 2rem keeps both readable. */
    --discover-logo-height: 2rem;
    /* Logo + native search pill + menu on one row. */
    --discover-control-height: 2.75rem;
    --discover-datetime-control-height: 2.75rem;
    --discover-mobile-pill-shadow: none;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: max(0.35rem, env(safe-area-inset-top, 0px)) var(--discover-phone-edge-right) 0.4rem var(--discover-phone-edge) !important;
    min-height: 0 !important;
    overflow-x: visible !important;
  }

  /* Applied filter badges live in the list-header rail (not the top bar). */
  html body.discover-page .discover-top-bar > .discover-toolbar.flex.items-center.justify-between.w-full {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 0.5rem !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  /* Menu / avatar on the right; JS anchors dropdown to the trigger. */
  html body.discover-page .discover-top-bar .discover-toolbar-menu {
    order: 1 !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    gap: 0.25rem !important;
  }

  /*
   * Phone chrome density: hide standalone Sign in — guests reach it via the
   * hamburger menu. Frees width for the search + When pill.
   */
  html body.discover-page .discover-top-bar .discover-topbar-signin-btn {
    display: none !important;
  }

  html body.discover-page .discover-top-bar .discover-topbar-hub-link {
    display: none !important;
  }

  html body.discover-page .discover-top-bar .discover-toolbar-chip-rail,
  html body.discover-page .discover-top-bar .amenity-chips-container,
  html body.discover-page .discover-top-bar #amenity-filter-badges-desktop {
    max-width: var(--discover-chip-rail-safe-width) !important;
    padding-right: 0.5rem !important;
  }

  html body.discover-page .discover-top-bar .discover-toolbar-primary,
  html body.discover-page .discover-top-bar .discover-toolbar-primary.flex.items-center.gap-2.flex-1.min-w-0,
  html body.discover-page .discover-top-bar .discover-toolbar-primary.flex.items-center.gap-2.sm\:gap-4.lg\:gap-6.flex-1.min-w-0 {
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    min-width: 0 !important;
    gap: 0.5rem !important;
    order: 0 !important;
  }

  html body.discover-page .discover-top-bar .discover-toolbar-logo {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    align-self: center !important;
    width: auto !important;
    min-width: 0 !important;
    /* Room for 2rem-tall lockup (~2.91:1) without clipping AA edges. */
    max-width: 6.5rem !important;
    height: var(--discover-control-height) !important;
    overflow: visible !important;
  }

  html body.discover-page .discover-top-bar .discover-toolbar-logo a {
    display: flex !important;
    align-items: center !important;
    width: auto !important;
    max-width: 100% !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: visible !important;
  }

  html body.discover-page .discover-top-bar .swiftspot-logo,
  html body.discover-page .discover-top-bar img.swiftspot-logo {
    height: var(--discover-logo-height) !important;
    min-height: var(--discover-logo-height) !important;
    max-height: var(--discover-logo-height) !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  /*
   * Native-style search field: iOS-like filled bar with inline When segment.
   */
  html body.discover-page .discover-top-bar .discover-search-controls {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    flex: 1 1 auto !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: var(--discover-control-height) !important;
    min-height: var(--discover-control-height) !important;
    max-height: var(--discover-control-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0.625rem !important;
    background: var(--discover-mobile-search-fill) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    isolation: isolate !important;
  }

  html.dark body.discover-page .discover-top-bar .discover-search-controls,
  html body.dark.discover-page .discover-top-bar .discover-search-controls {
    background: var(--discover-mobile-search-fill) !important;
    box-shadow: none !important;
  }

  html body.discover-page .discover-top-bar #discover-menu-button {
    width: 2.75rem !important;
    min-width: 2.75rem !important;
    max-width: 2.75rem !important;
    height: 2.75rem !important;
    min-height: 2.75rem !important;
    max-height: 2.75rem !important;
    padding: 0 !important;
  }

  /* Hamburger guest trigger: keep icon smaller inside the chrome pill. */
  html body.discover-page .discover-top-bar #discover-menu-button:not(.profile-menu-trigger) img {
    width: 1.55rem !important;
    min-width: 1.55rem !important;
    max-width: 1.55rem !important;
    height: 1.55rem !important;
    min-height: 1.55rem !important;
    max-height: 1.55rem !important;
  }

  /* Profile avatar: fill the circular trigger so chrome background does not ring the image. */
  html body.discover-page .discover-top-bar #discover-menu-button.profile-menu-trigger {
    overflow: hidden !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html body.discover-page .discover-top-bar #discover-menu-button.profile-menu-trigger img,
  html body.discover-page .discover-top-bar #discover-menu-button.profile-menu-trigger > div {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
  }

  html body.discover-page .discover-top-bar #discover-menu-button svg {
    width: 0.95rem !important;
    height: 0.95rem !important;
  }

  /* Search segment: grow inside pill — beat shared toolbar-primary width:100%. */
  html body.discover-page .discover-top-bar .discover-toolbar-search-field,
  html body.discover-page .discover-top-bar .search-field-container,
  html body.discover-page .discover-top-bar .discover-toolbar-search-field.search-field-container,
  html body.discover-page .discover-top-bar .discover-toolbar-primary .discover-toolbar-search-field.search-field-container,
  html body.discover-page .discover-top-bar .discover-toolbar-primary.flex.items-center.gap-2.flex-1.min-w-0 .discover-toolbar-search-field.search-field-container,
  html body.discover-page .discover-top-bar .discover-toolbar-primary.flex.items-center.gap-2.sm\:gap-4.lg\:gap-6.flex-1.min-w-0 .discover-toolbar-search-field.search-field-container {
    align-self: stretch !important;
    display: flex !important;
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /*
   * Idle phone search: show a short Where? label beside the icon so location
   * search is obvious next to When?. Composing still expands the field.
   */
  html body.discover-page .discover-top-bar .discover-toolbar-search-field:has(.search-placeholder-text),
  html body.discover-page .discover-top-bar .search-field-container:has(.search-placeholder-text),
  html body.discover-page .discover-top-bar .discover-toolbar-search-field.search-field-container:has(.search-placeholder-text) {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  html body.discover-page .discover-top-bar .discover-search-controls:has(.search-placeholder-text):not(.is-location-search-composing) .discover-toolbar-datetime-field,
  html body.discover-page .discover-top-bar .discover-search-controls:has(.search-placeholder-text):not(.is-location-search-composing) .datetime-field-container {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 4.75rem !important;
    max-width: 5.75rem !important;
  }

  html body.discover-page .discover-top-bar .search-display-container:has(.search-placeholder-text) {
    width: 100% !important;
    max-width: none !important;
  }

  html body.discover-page .discover-top-bar .search-display-container:has(.search-placeholder-text) > .relative.flex.items-center,
  html body.discover-page .discover-top-bar .search-display-container:has(.search-placeholder-text) .discover-topbar-control__inner {
    width: 100% !important;
    padding-left: 0.45rem !important;
    padding-right: 0.45rem !important;
    justify-content: flex-start !important;
    gap: 0.35rem !important;
  }

  html body.discover-page .discover-top-bar .search-display-container:has(.search-placeholder-text) .flex-1.min-w-0 {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body.discover-page .discover-top-bar .search-display-container:has(.search-placeholder-text) .search-button-display,
  html body.discover-page .discover-top-bar .search-display-container:has(.search-placeholder-text) .search-button-display > div {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  html.dark body.discover-page .discover-top-bar .discover-toolbar-search-field,
  html body.dark.discover-page .discover-top-bar .discover-toolbar-search-field,
  html.dark body.discover-page .discover-top-bar .search-field-container,
  html body.dark.discover-page .discover-top-bar .search-field-container {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* When segment: compact trailing chip — beat shared toolbar-primary width:100%. */
  html body.discover-page .discover-top-bar .discover-toolbar-datetime-field,
  html body.discover-page .discover-top-bar .datetime-field-container,
  html body.discover-page .discover-top-bar .discover-toolbar-datetime-field.datetime-field-container,
  html body.discover-page .discover-top-bar .discover-toolbar-primary .discover-toolbar-datetime-field.datetime-field-container,
  html body.discover-page .discover-top-bar .discover-toolbar-primary.flex.items-center.gap-2.flex-1.min-w-0 .discover-toolbar-datetime-field.datetime-field-container,
  html body.discover-page .discover-top-bar .discover-toolbar-primary.flex.items-center.gap-2.sm\:gap-4.lg\:gap-6.flex-1.min-w-0 .discover-toolbar-datetime-field.datetime-field-container,
  html body.discover-page .discover-top-bar .datetime-field-container:has(#datetime-display-value),
  html body.discover-page .discover-top-bar .discover-toolbar-datetime-field:has(#datetime-display-value) {
    align-self: stretch !important;
    display: flex !important;
    position: relative !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 4.75rem !important;
    max-width: 5.5rem !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-left: 1px solid var(--discover-mobile-search-divider, rgba(60, 60, 67, 0.18)) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html.dark body.discover-page .discover-top-bar .discover-toolbar-datetime-field,
  html.dark body.discover-page .discover-top-bar .datetime-field-container,
  html body.dark.discover-page .discover-top-bar .discover-toolbar-datetime-field,
  html body.dark.discover-page .discover-top-bar .datetime-field-container {
    border-left-color: var(--discover-mobile-search-divider, rgba(255, 255, 255, 0.14)) !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body.discover-page .discover-top-bar .search-display-container,
  html body.discover-page .discover-top-bar #search-input-display-container,
  html body.discover-page .discover-top-bar .datetime-display-container {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    overflow: hidden !important;
  }

  html body.discover-page .discover-top-bar .search-display-container:hover,
  html body.discover-page .discover-top-bar .search-display-container:focus-within,
  html body.discover-page .discover-top-bar .datetime-display-container:hover,
  html body.discover-page .discover-top-bar .datetime-display-container:focus-within {
    border: 0 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  /* Focus ring on the native search bar when either segment is active. */
  html body.discover-page .discover-top-bar .discover-search-controls:focus-within {
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.22) !important;
  }

  html body.discover-page .discover-top-bar .discover-toolbar-search-field:focus-within,
  html body.discover-page .discover-top-bar .discover-toolbar-datetime-field:focus-within {
    border-color: transparent !important;
    box-shadow: none !important;
  }

  html body.discover-page .discover-top-bar .search-display-container > .relative.flex.items-center,
  html body.discover-page .discover-top-bar .datetime-display-container > .relative.flex.items-center {
    display: flex !important;
    align-items: center !important;
    min-height: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    padding: 0 0.45rem !important;
    gap: 0 !important;
    overflow: hidden !important;
  }

  html body.discover-page .discover-top-bar .search-display-container > .relative.flex.items-center {
    padding-left: 0.45rem !important;
    padding-right: 0.35rem !important;
  }

  html body.discover-page .discover-top-bar .datetime-display-container > .relative.flex.items-center {
    padding: 0 0.45rem 0 0.5rem !important;
    justify-content: flex-start !important;
    gap: 0.1rem !important;
  }

  html body.discover-page .discover-top-bar .search-display-container .flex-shrink-0:first-child,
  html body.discover-page .discover-top-bar .search-display-container .discover-topbar-control__icon {
    margin-right: 0.35rem !important;
    transform: none !important;
  }

  /* Idle: icon-only — no gap after glass when placeholder text is visually hidden. */
  html body.discover-page .discover-top-bar .search-display-container:has(.search-placeholder-text) .flex-shrink-0:first-child,
  html body.discover-page .discover-top-bar .search-display-container:has(.search-placeholder-text) .discover-topbar-control__icon {
    margin-right: 0 !important;
  }

  /* Flatten nested circular well — plain glass inside the native search pill. */
  html body.discover-page .discover-top-bar .search-display-container .flex-shrink-0:first-child > div,
  html body.discover-page .discover-top-bar .search-display-container .discover-topbar-control__icon-well {
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  html body.discover-page .discover-top-bar .search-display-container:hover .discover-topbar-control__icon-well,
  html body.discover-page .discover-top-bar .search-display-container:focus-within .discover-topbar-control__icon-well {
    background: transparent !important;
  }

  html body.discover-page .discover-top-bar .search-display-container .flex-shrink-0:first-child svg,
  html body.discover-page .discover-top-bar .search-display-container .discover-topbar-control__icon-svg {
    width: 1rem !important;
    height: 1rem !important;
  }

  html body.discover-page .discover-top-bar .search-display-container .flex-shrink-0.hidden.sm\:block {
    display: none !important;
  }

  html body.discover-page .discover-top-bar .search-display-container .flex-1.min-w-0 {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: stretch !important;
    align-self: stretch !important;
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  html body.discover-page .discover-top-bar .search-display-container .search-button-display,
  html body.discover-page .discover-top-bar .search-display-container .search-button-display > div {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    text-align: left !important;
  }

  /* Committed location label (placeholder class removed when set). */
  html body.discover-page .discover-top-bar #search-input-description:not(.search-placeholder-text) {
    display: block !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: auto !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    text-align: left !important;
  }

  /*
   * Idle phone search: short visible Where? label (not icon-only).
   * Keep aria-label on .search-button-display for the open action.
   */
  html body.discover-page .discover-top-bar .search-placeholder-text {
    position: static !important;
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: auto !important;
    clip-path: none !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    border: 0 !important;
    font-size: 0.8125rem !important;
    line-height: 1.15rem !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    color: rgba(60, 60, 67, 0.72) !important;
  }

  html.dark body.discover-page .discover-top-bar .search-placeholder-text {
    color: rgba(235, 235, 245, 0.6) !important;
  }

  html body.discover-page .discover-top-bar .search-display-container > .relative.flex.items-center > .flex-1.min-w-0 {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    align-self: stretch !important;
  }

  html body.discover-page .discover-top-bar .search-display-container.search-composing .flex-1.min-w-0 {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    align-self: stretch !important;
    flex: 1 1 0% !important;
    width: auto !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 0 !important;
    gap: 0 !important;
  }

  html body.discover-page .discover-top-bar .search-display-container.search-composing #search-input {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 0 !important;
    max-height: none !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    align-self: stretch !important;
    box-sizing: border-box !important;
    clip: auto !important;
    clip-path: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: var(--discover-chrome-text, #171412) !important;
    -webkit-text-fill-color: currentColor !important;
    caret-color: currentColor !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
    text-align: left !important;
  }

  html body.discover-page .discover-top-bar .search-display-container.search-composing #search-input::placeholder {
    color: var(--discover-popover-text-muted, #78716c) !important;
    opacity: 1 !important;
    -webkit-text-fill-color: currentColor !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
    letter-spacing: -0.01em !important;
    text-align: left !important;
    white-space: nowrap !important;
  }

  html.dark body.discover-page .discover-top-bar .search-display-container.search-composing #search-input,
  html body.dark.discover-page .discover-top-bar .search-display-container.search-composing #search-input {
    color: var(--discover-chrome-text, #fafaf9) !important;
  }

  html.dark body.discover-page .discover-top-bar .search-display-container.search-composing #search-input::placeholder,
  html body.dark.discover-page .discover-top-bar .search-display-container.search-composing #search-input::placeholder {
    color: var(--discover-popover-text-muted-dark, #a8a29e) !important;
  }

  /* Composing: beat phone pill rules that force display:flex on the static placeholder overlay. */
  html body.discover-page .discover-top-bar .search-display-container.search-composing .search-button-display,
  html body.discover-page .discover-top-bar .search-display-container.search-composing .search-button-display > div {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /*
   * Phone location search composing: expand the search rail across the toolbar and
   * stretch the inner input chain so typed text uses the full width (not the idle segment).
   */
  html body.discover-page .discover-top-bar .discover-search-controls.is-location-search-composing .discover-toolbar-datetime-field,
  html body.discover-page .discover-top-bar .discover-search-controls.is-location-search-composing .datetime-field-container {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    pointer-events: none !important;
  }

  html body.discover-page .discover-top-bar .discover-toolbar-primary.is-location-search-composing .discover-toolbar-logo {
    display: none !important;
    flex: 0 0 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  html body.discover-page .discover-top-bar .discover-search-controls.is-location-search-composing .discover-toolbar-search-field,
  html body.discover-page .discover-top-bar .discover-search-controls.is-location-search-composing .search-field-container {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  html body.discover-page .discover-top-bar .discover-search-controls.is-location-search-composing .search-field-container > .relative {
    display: flex !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  html body.discover-page .discover-top-bar .search-display-container.search-composing,
  html body.discover-page .discover-top-bar .search-display-container.search-composing .discover-topbar-control__inner,
  html body.discover-page .discover-top-bar .search-display-container.search-composing > .discover-topbar-control__inner,
  html body.discover-page .discover-top-bar .search-display-container.search-composing > .relative.flex.items-center {
    display: flex !important;
    flex: 1 1 auto !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  html body.discover-page .discover-top-bar .datetime-label-text,
  html body.discover-page .discover-top-bar .datetime-display-container .datetime-label-text.hidden.md\:block {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  html body.discover-page .discover-top-bar .datetime-display-container .flex-1.min-w-0 {
    display: block !important;
    flex-direction: row !important;
  }

  html body.discover-page .discover-top-bar .datetime-display-container #datetime-display-value,
  html body.discover-page .discover-top-bar .datetime-display-container.datetime-compact-label #datetime-display-value {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 0.8125rem !important;
    line-height: 1.15rem !important;
  }

  html body.discover-page .discover-top-bar .discover-toolbar-datetime-field > .relative,
  html body.discover-page .discover-top-bar .discover-toolbar-search-field > .relative {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }

  html body.discover-page .discover-top-bar .datetime-display-container .flex-1.min-w-0 {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  html body.discover-page .discover-top-bar .datetime-display-container .flex-shrink-0.ml-1,
  html body.discover-page .discover-top-bar .datetime-display-container .flex-shrink-0.ml-2,
  html body.discover-page .discover-top-bar .datetime-display-container .flex-shrink-0.ml-3 {
    display: none !important;
  }

  /* Compact When affordance inside unified pill. */
  html body.discover-page .discover-top-bar .datetime-display-container .discover-topbar-control__chevron {
    display: none !important;
  }

  html body.discover-page .discover-top-bar .datetime-display-container .discover-topbar-control__icon-well.mx-dropdown-arrow {
    width: 1.1rem !important;
    height: 1.1rem !important;
  }

  html body.discover-page .discover-top-bar .datetime-display-container .discover-topbar-control__chevron-svg {
    width: 0.7rem !important;
    height: 0.7rem !important;
  }
}

@media (max-width: 380px) {
  html body.discover-page .discover-top-bar {
    --discover-control-height: 2.75rem;
    --discover-datetime-control-height: 2.75rem;
    padding-bottom: 0.35rem !important;
  }

  html body.discover-page .discover-top-bar .discover-toolbar-menu,
  html body.discover-page .discover-top-bar #discover-menu-button {
    width: 2.75rem !important;
    min-width: 2.75rem !important;
    max-width: 2.75rem !important;
    height: 2.75rem !important;
    min-height: 2.75rem !important;
    max-height: 2.75rem !important;
  }

  html body.discover-page .discover-top-bar .discover-toolbar-datetime-field,
  html body.discover-page .discover-top-bar .datetime-field-container,
  html body.discover-page .discover-top-bar .discover-toolbar-datetime-field.datetime-field-container {
    min-width: 4.5rem !important;
    max-width: 5.25rem !important;
  }

  html body.discover-page .discover-top-bar #datetime-display-value {
    font-size: 0.76rem !important;
  }
}

body.discover-page #discover-menu,
body.guest-discover-chrome #discover-menu {
  --discover-menu-surface: rgba(255, 255, 255, 0.98);
  --discover-menu-muted-surface: rgba(248, 250, 252, 0.9);
  --discover-menu-border: rgba(148, 163, 184, 0.28);
  --discover-menu-text: #0f172a;
  --discover-menu-muted: #64748b;
  --discover-menu-hover: rgba(241, 245, 249, 0.95);
  --discover-menu-icon-bg: rgba(241, 245, 249, 0.96);
  --discover-menu-icon: #64748b;
  min-width: 14rem !important;
  width: max-content !important;
  max-width: min(18rem, calc(100vw - 1.25rem)) !important;
  padding: 0.45rem !important;
  border-radius: var(--discover-chrome-radius-md, 1rem) !important;
  border: 1px solid var(--discover-menu-border) !important;
  background: var(--discover-menu-surface) !important;
  color: var(--discover-menu-text) !important;
  box-shadow: var(--discover-premium-shadow) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  overflow-x: hidden !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, 0.28) transparent;
}

.dark body.discover-page #discover-menu,
body.dark.discover-page #discover-menu,
.dark body.guest-discover-chrome #discover-menu,
body.dark.guest-discover-chrome #discover-menu {
  --discover-menu-surface: var(--discover-popover-bg-dark);
  --discover-menu-muted-surface: var(--discover-popover-bg-dark-elevated);
  --discover-menu-border: var(--discover-popover-border-dark);
  --discover-menu-text: var(--discover-popover-text-dark);
  --discover-menu-muted: var(--discover-popover-text-muted-dark);
  --discover-menu-hover: var(--discover-popover-hover-dark);
  --discover-menu-icon-bg: var(--discover-popover-hover-dark);
  --discover-menu-icon: var(--discover-popover-text-muted-dark);
  box-shadow: 0 22px 58px rgba(0, 0, 0, 0.52), 0 3px 14px rgba(0, 0, 0, 0.32) !important;
}

body.discover-page #discover-menu .discover-menu-profile {
  padding: 0.4rem !important;
  border: 0 !important;
  margin-bottom: 0.25rem !important;
}

body.discover-page #discover-menu .discover-menu-profile-link {
  display: flex !important;
  align-items: center !important;
  gap: 0.625rem !important;
  margin: 0 !important;
  padding: 0.7rem 0.75rem !important;
  border-radius: 0.9rem !important;
  background: var(--discover-menu-muted-surface) !important;
  border: 1px solid var(--discover-menu-border) !important;
  text-decoration: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  white-space: normal !important;
  cursor: pointer !important;
  transform: none !important;
}

body.discover-page #discover-menu .discover-menu-profile-avatar {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
}

body.discover-page #discover-menu .discover-menu-profile-avatar img,
body.discover-page #discover-menu .discover-menu-profile-avatar > div {
  width: 2.5rem !important;
  height: 2.5rem !important;
  min-width: 2.5rem !important;
  min-height: 2.5rem !important;
}

body.discover-page #discover-menu .discover-menu-profile-details {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 0.125rem !important;
}

body.discover-page #discover-menu .discover-menu-profile-chevron {
  flex: 0 0 auto !important;
  align-self: center !important;
  width: 1rem !important;
  height: 1rem !important;
  min-width: 1rem !important;
  margin-left: 0.125rem !important;
  color: var(--discover-menu-muted) !important;
  opacity: 0.72 !important;
}

body.discover-page #discover-menu .discover-menu-profile-link:hover {
  background: var(--discover-menu-hover) !important;
  transform: none !important;
}

body.discover-page #discover-menu .discover-menu-profile p:first-child,
body.discover-page #discover-menu .discover-menu-profile-name {
  color: var(--discover-menu-text) !important;
  font-size: 0.875rem !important;
  line-height: 1.35 !important;
  font-weight: 750 !important;
  letter-spacing: -0.01em !important;
  margin: 0 !important;
}

body.discover-page #discover-menu .discover-menu-profile p:last-child,
body.discover-page #discover-menu .discover-menu-profile-contact,
body.discover-page #discover-menu .discover-menu-section-label {
  color: var(--discover-menu-muted) !important;
  font-size: 0.75rem !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}

body.discover-page #discover-menu .discover-menu-section,
body.discover-page #discover-menu .py-1 {
  width: 100% !important;
  padding: 0.1rem 0 !important;
}

body.discover-page #discover-menu .discover-menu-divider,
body.discover-page #discover-menu .border-t {
  margin: 0.35rem 0.35rem !important;
  border-color: var(--discover-menu-border) !important;
}

body.discover-page #discover-menu .discover-menu-section-label-wrap {
  padding: 0.3rem 0.55rem 0.2rem !important;
}

body.discover-page #discover-menu .discover-menu-section-label {
  font-size: 0.66rem !important;
  line-height: 1rem !important;
  letter-spacing: 0.12em !important;
  font-weight: 800 !important;
}

body.discover-page #discover-menu .discover-menu-item,
body.discover-page #discover-menu a[role="menuitem"].discover-menu-item,
body.discover-page #discover-menu button[role="menuitem"].discover-menu-item,
body.guest-discover-chrome #discover-menu .discover-menu-item,
body.guest-discover-chrome #discover-menu a[role="menuitem"].discover-menu-item,
body.guest-discover-chrome #discover-menu button[role="menuitem"].discover-menu-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 2.1rem !important;
  margin: 0.04rem 0 !important;
  padding: 0.35rem 0.55rem !important;
  border-radius: 0.82rem !important;
  color: var(--discover-menu-text) !important;
  -webkit-text-fill-color: var(--discover-menu-text) !important;
  background: transparent !important;
  text-decoration: none !important;
  gap: 0.45rem !important;
  transform: none !important;
  transition-property: background-color, box-shadow !important;
  transition-duration: 160ms !important;
  transition-timing-function: ease !important;
}

body.discover-page #discover-menu .discover-menu-item:hover,
body.discover-page #discover-menu .discover-menu-item:focus-visible,
body.discover-page #discover-menu .discover-menu-item:active {
  background: var(--discover-menu-hover) !important;
  color: var(--discover-menu-text) !important;
  -webkit-text-fill-color: var(--discover-menu-text) !important;
  transform: none !important;
  outline: none !important;
}

body.discover-page #discover-menu .discover-menu-item:focus-visible {
  box-shadow: 0 0 0 2px var(--discover-popover-focus) !important;
}

body.discover-page #discover-menu .discover-menu-item-main {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: 0.55rem !important;
  color: var(--discover-menu-text) !important;
  -webkit-text-fill-color: var(--discover-menu-text) !important;
}

body.discover-page #discover-menu .discover-menu-item-label {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  font-size: 0.84rem !important;
  line-height: 1.15rem !important;
  font-weight: 680 !important;
  letter-spacing: -0.008em !important;
  color: var(--discover-menu-text) !important;
  -webkit-text-fill-color: var(--discover-menu-text) !important;
}

/* Account menu rows are text-only; section labels and profile header carry structure. */
/* Discover menu — semantic variants (token-driven; one apply block) */
:is(body.discover-page, body.guest-discover-chrome) #discover-menu .discover-menu-item--primary {
  --discover-menu-variant-color: var(--color-brand-accent-fg);
  --discover-menu-variant-color-active: var(--color-brand-accent-fg-hover, var(--color-brand-accent-fg));
  --discover-menu-variant-label-weight: 750;
}

/* Portal mode switch — soft fill + nowrap so "Switch to hosting" never stacks awkwardly */
:is(body.discover-page, body.guest-discover-chrome) #discover-menu .discover-menu-item--mode-switch {
  --discover-menu-variant-color: #047857;
  --discover-menu-variant-color-active: #065f46;
  --discover-menu-variant-bg: rgba(16, 185, 129, 0.12);
  --discover-menu-variant-bg-active: rgba(16, 185, 129, 0.2);
  --discover-menu-variant-label-weight: 750;
  margin-bottom: 0.2rem !important;
  box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.2);
}

:is(body.discover-page, body.guest-discover-chrome) #discover-menu .discover-menu-item--mode-switch-browse {
  --discover-menu-variant-color: #1d4ed8;
  --discover-menu-variant-color-active: #1e40af;
  --discover-menu-variant-bg: rgba(59, 130, 246, 0.1);
  --discover-menu-variant-bg-active: rgba(59, 130, 246, 0.18);
  --discover-menu-variant-label-weight: 750;
  margin-bottom: 0.2rem !important;
  box-shadow: inset 0 0 0 1px rgba(59, 130, 246, 0.22);
}

.dark :is(body.discover-page, body.guest-discover-chrome) #discover-menu .discover-menu-item--mode-switch,
body.dark:is(body.discover-page, body.guest-discover-chrome) #discover-menu .discover-menu-item--mode-switch {
  --discover-menu-variant-color: #6ee7b7;
  --discover-menu-variant-color-active: #a7f3d0;
  --discover-menu-variant-bg: rgba(16, 185, 129, 0.16);
  --discover-menu-variant-bg-active: rgba(16, 185, 129, 0.24);
  box-shadow: inset 0 0 0 1px rgba(110, 231, 183, 0.22);
}

.dark :is(body.discover-page, body.guest-discover-chrome) #discover-menu .discover-menu-item--mode-switch-browse,
body.dark:is(body.discover-page, body.guest-discover-chrome) #discover-menu .discover-menu-item--mode-switch-browse {
  --discover-menu-variant-color: #93c5fd;
  --discover-menu-variant-color-active: #bfdbfe;
  --discover-menu-variant-bg: rgba(59, 130, 246, 0.16);
  --discover-menu-variant-bg-active: rgba(59, 130, 246, 0.24);
  box-shadow: inset 0 0 0 1px rgba(147, 197, 253, 0.22);
}

:is(body.discover-page, body.guest-discover-chrome) #discover-menu .discover-menu-item--mode-switch .discover-menu-item-label,
:is(body.discover-page, body.guest-discover-chrome) #discover-menu .discover-menu-item--mode-switch-browse .discover-menu-item-label {
  white-space: nowrap !important;
  flex: 0 1 auto !important;
}

:is(body.discover-page, body.guest-discover-chrome) #discover-menu .discover-menu-item--danger {
  --discover-menu-variant-color: #b91c1c;
  --discover-menu-variant-color-active: #991b1b;
}

.dark :is(body.discover-page, body.guest-discover-chrome) #discover-menu .discover-menu-item--danger,
body.dark:is(body.discover-page, body.guest-discover-chrome) #discover-menu .discover-menu-item--danger {
  --discover-menu-variant-color: #fca5a5;
  --discover-menu-variant-color-active: #fecaca;
}

:is(body.discover-page, body.guest-discover-chrome) #discover-menu .discover-menu-item--host {
  --discover-menu-variant-color: #047857;
  --discover-menu-variant-color-active: #065f46;
  --discover-menu-variant-bg: rgba(16, 185, 129, 0.08);
  --discover-menu-variant-bg-active: rgba(16, 185, 129, 0.14);
}

.dark :is(body.discover-page, body.guest-discover-chrome) #discover-menu .discover-menu-item--host,
body.dark:is(body.discover-page, body.guest-discover-chrome) #discover-menu .discover-menu-item--host {
  --discover-menu-variant-color: #6ee7b7;
  --discover-menu-variant-color-active: #a7f3d0;
  --discover-menu-variant-bg: rgba(16, 185, 129, 0.14);
  --discover-menu-variant-bg-active: rgba(16, 185, 129, 0.22);
}

:is(body.discover-page, body.guest-discover-chrome) #discover-menu .discover-menu-item[class*="discover-menu-item--"] {
  color: var(--discover-menu-variant-color, var(--discover-menu-text)) !important;
  -webkit-text-fill-color: var(--discover-menu-variant-color, var(--discover-menu-text)) !important;
  background: var(--discover-menu-variant-bg, transparent) !important;
}

:is(body.discover-page, body.guest-discover-chrome) #discover-menu .discover-menu-item[class*="discover-menu-item--"] .discover-menu-item-label,
:is(body.discover-page, body.guest-discover-chrome) #discover-menu .discover-menu-item[class*="discover-menu-item--"] .discover-menu-item-main {
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  font-weight: var(--discover-menu-variant-label-weight, inherit);
}

:is(body.discover-page, body.guest-discover-chrome) #discover-menu .discover-menu-item[class*="discover-menu-item--"]:is(:hover, :focus-visible, :active) {
  color: var(--discover-menu-variant-color-active, var(--discover-menu-variant-color, var(--discover-menu-text))) !important;
  -webkit-text-fill-color: var(--discover-menu-variant-color-active, var(--discover-menu-variant-color, var(--discover-menu-text))) !important;
  background: var(--discover-menu-variant-bg-active, var(--discover-menu-variant-bg, var(--discover-menu-hover))) !important;
}

@media (max-width: 640px), (pointer: coarse) {
  :is(body.discover-page, body.guest-discover-chrome) #discover-menu .discover-menu-item,
  :is(body.discover-page, body.guest-discover-chrome) #discover-menu a[role="menuitem"].discover-menu-item,
  :is(body.discover-page, body.guest-discover-chrome) #discover-menu button[role="menuitem"].discover-menu-item {
    min-height: 44px !important;
    padding-top: 0.55rem !important;
    padding-bottom: 0.55rem !important;
  }
}

body.discover-page #discover-menu .discover-menu-item-badge,
body.discover-page #discover-menu .in-app-nav-badge,
body.discover-page #discover-menu .swiftspot-nav-badge {
  display: none;
  align-items: center;
  justify-content: center;
  min-width: 1.125rem !important;
  min-height: 1.125rem !important;
  padding: 0 0.3125rem !important;
  border-radius: 999px !important;
  font-size: 0.6875rem !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  border: 1.5px solid var(--discover-menu-surface) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.14) !important;
}

body.discover-page #discover-menu .swiftspot-nav-badge.is-visible:not(.hidden),
body.discover-page #discover-menu .in-app-nav-badge:not(.hidden) {
  display: inline-flex !important;
}

body.guest-discover-chrome #discover-menu .discover-menu-item-badge,
body.guest-discover-chrome #discover-menu .in-app-nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.1rem !important;
  min-height: 1.1rem !important;
  padding: 0 0.36rem !important;
  border-radius: 999px !important;
  font-size: 0.66rem !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 0 0 2px var(--discover-menu-surface) !important;
}

body.discover-page #discover-menu .in-app-nav-badge--message,
body.guest-discover-chrome #discover-menu .in-app-nav-badge--message,
body.discover-page #discover-menu .swiftspot-nav-badge--message {
  background: #e11d48 !important;
}

body.discover-page #discover-menu .in-app-nav-badge--booking,
body.guest-discover-chrome #discover-menu .in-app-nav-badge--booking,
body.discover-page #discover-menu .swiftspot-nav-badge--booking {
  background: #2563eb !important;
}

.dark body.discover-page #discover-menu .in-app-nav-badge--booking,
body.dark.discover-page #discover-menu .in-app-nav-badge--booking,
.dark body.guest-discover-chrome #discover-menu .in-app-nav-badge--booking,
body.dark.guest-discover-chrome #discover-menu .in-app-nav-badge--booking,
.dark body.discover-page #discover-menu .swiftspot-nav-badge--booking,
body.dark.discover-page #discover-menu .swiftspot-nav-badge--booking {
  background: #3b82f6 !important;
}

body.discover-page #discover-menu .in-app-nav-badge--host-booking,
body.guest-discover-chrome #discover-menu .in-app-nav-badge--host-booking,
body.discover-page #discover-menu .swiftspot-nav-badge--host-booking {
  background: #d97706 !important;
}

body.discover-page #discover-menu .discover-menu-item:hover .in-app-nav-badge,
body.discover-page #discover-menu .discover-menu-item:focus-visible .in-app-nav-badge,
body.discover-page #discover-menu .discover-menu-item:active .in-app-nav-badge,
body.guest-discover-chrome #discover-menu .discover-menu-item:hover .in-app-nav-badge,
body.guest-discover-chrome #discover-menu .discover-menu-item:focus-visible .in-app-nav-badge,
body.guest-discover-chrome #discover-menu .discover-menu-item:active .in-app-nav-badge {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

body.discover-page #discover-menu .in-app-nav-badge.hidden {
  display: none !important;
}

body.discover-page #discover-menu .discover-menu-fade {
  position: sticky !important;
  bottom: 0 !important;
  display: block !important;
  height: 1.75rem !important;
  margin: -1.75rem 0 0 !important;
  pointer-events: none !important;
  opacity: 0 !important;
  background: linear-gradient(to top, var(--discover-menu-surface) 0%, transparent 100%) !important;
  transition: opacity 160ms ease !important;
}

body.discover-page #discover-menu.discover-menu-has-more .discover-menu-fade {
  opacity: 1 !important;
}

@media (max-width: 640px) {
  body.discover-page #discover-menu,
  body.discover-page #discover-menu[style] {
    width: auto !important;
    min-width: min(14rem, calc(100vw - 1.25rem)) !important;
    max-width: min(18rem, calc(100vw - 1.25rem)) !important;
    max-height: none !important;
    padding: 0.4rem !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
  }

  body.discover-page #discover-menu .discover-menu-profile {
    padding: 0.45rem !important;
  }

  body.discover-page #discover-menu .discover-menu-profile-link {
    padding: 0.75rem 0.8rem !important;
    min-width: 0 !important;
  }

  body.discover-page #discover-menu .discover-menu-profile-link .flex-1.min-w-0,
  body.discover-page #discover-menu .discover-menu-profile-details {
    min-width: 0 !important;
    gap: 0.2rem !important;
  }

  body.discover-page #discover-menu .discover-menu-profile-link p,
  body.discover-page #discover-menu .discover-menu-profile-details p {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
  }

  body.discover-page #discover-menu .discover-menu-item,
  body.discover-page #discover-menu button[role="menuitem"],
  body.discover-page #discover-menu a[role="menuitem"] {
    min-height: 2rem !important;
    min-width: 0 !important;
    padding: 0.3rem 0.45rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body.discover-page #discover-menu .discover-menu-item-label {
    font-size: 0.8rem !important;
  }
}

/* Touch: menu item text must paint immediately (iOS WebKit defers color/fill when color is transitioned). */
@media (hover: none) and (pointer: coarse) {
  body.discover-page #discover-menu,
  body.guest-discover-chrome #discover-menu {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--discover-menu-surface, rgba(255, 255, 255, 0.98)) !important;
  }

  .dark body.discover-page #discover-menu,
  body.dark.discover-page #discover-menu,
  .dark body.guest-discover-chrome #discover-menu,
  body.dark.guest-discover-chrome #discover-menu {
    background: var(--discover-menu-surface, rgba(38, 38, 38, 0.98)) !important;
  }

  body.discover-page #discover-menu .welcome-header-section p:first-child,
  body.guest-discover-chrome #discover-menu .welcome-header-section p:first-child {
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: var(--discover-menu-text, #0f172a) !important;
    color: var(--discover-menu-text, #0f172a) !important;
  }

  .dark body.discover-page #discover-menu .welcome-header-section p:first-child,
  body.dark.discover-page #discover-menu .welcome-header-section p:first-child,
  .dark body.guest-discover-chrome #discover-menu .welcome-header-section p:first-child,
  body.dark.guest-discover-chrome #discover-menu .welcome-header-section p:first-child {
    -webkit-text-fill-color: var(--discover-menu-text, #e7e5e4) !important;
    color: var(--discover-menu-text, #e7e5e4) !important;
  }

  body.discover-page #discover-menu .discover-menu-section,
  body.guest-discover-chrome #discover-menu .discover-menu-section,
  body.discover-page #discover-menu .discover-menu-item,
  body.guest-discover-chrome #discover-menu .discover-menu-item,
  body.discover-page #discover-menu .discover-menu-item-main,
  body.guest-discover-chrome #discover-menu .discover-menu-item-main,
  body.discover-page #discover-menu .discover-menu-item-label,
  body.guest-discover-chrome #discover-menu .discover-menu-item-label,
  body.discover-page #discover-menu a[role="menuitem"],
  body.guest-discover-chrome #discover-menu a[role="menuitem"],
  body.discover-page #discover-menu button[role="menuitem"],
  body.guest-discover-chrome #discover-menu button[role="menuitem"] {
    color: var(--discover-menu-text, #0f172a) !important;
    -webkit-text-fill-color: var(--discover-menu-text, #0f172a) !important;
    opacity: 1 !important;
    visibility: visible !important;
    transition: none !important;
  }

  .dark body.discover-page #discover-menu .discover-menu-section,
  body.dark.discover-page #discover-menu .discover-menu-section,
  .dark body.guest-discover-chrome #discover-menu .discover-menu-section,
  body.dark.guest-discover-chrome #discover-menu .discover-menu-section,
  .dark body.discover-page #discover-menu .discover-menu-item,
  body.dark.discover-page #discover-menu .discover-menu-item,
  .dark body.guest-discover-chrome #discover-menu .discover-menu-item,
  body.dark.guest-discover-chrome #discover-menu .discover-menu-item,
  .dark body.discover-page #discover-menu .discover-menu-item-main,
  body.dark.discover-page #discover-menu .discover-menu-item-main,
  .dark body.guest-discover-chrome #discover-menu .discover-menu-item-main,
  body.dark.guest-discover-chrome #discover-menu .discover-menu-item-main,
  .dark body.discover-page #discover-menu .discover-menu-item-label,
  body.dark.discover-page #discover-menu .discover-menu-item-label,
  .dark body.guest-discover-chrome #discover-menu .discover-menu-item-label,
  body.dark.guest-discover-chrome #discover-menu .discover-menu-item-label,
  .dark body.discover-page #discover-menu a[role="menuitem"],
  body.dark.discover-page #discover-menu a[role="menuitem"],
  .dark body.guest-discover-chrome #discover-menu a[role="menuitem"],
  body.dark.guest-discover-chrome #discover-menu a[role="menuitem"],
  .dark body.discover-page #discover-menu button[role="menuitem"],
  body.dark.discover-page #discover-menu button[role="menuitem"],
  .dark body.guest-discover-chrome #discover-menu button[role="menuitem"],
  body.dark.guest-discover-chrome #discover-menu button[role="menuitem"] {
    color: var(--discover-menu-text, #e7e5e4) !important;
    -webkit-text-fill-color: var(--discover-menu-text, #e7e5e4) !important;
  }

  body.discover-page #discover-menu .discover-menu-item--danger,
  body.guest-discover-chrome #discover-menu .discover-menu-item--danger,
  body.discover-page #discover-menu .discover-menu-item--danger .discover-menu-item-label,
  body.guest-discover-chrome #discover-menu .discover-menu-item--danger .discover-menu-item-label {
    color: #b91c1c !important;
    -webkit-text-fill-color: #b91c1c !important;
  }

  .dark body.discover-page #discover-menu .discover-menu-item--danger,
  body.dark.discover-page #discover-menu .discover-menu-item--danger,
  .dark body.guest-discover-chrome #discover-menu .discover-menu-item--danger,
  body.dark.guest-discover-chrome #discover-menu .discover-menu-item--danger,
  .dark body.discover-page #discover-menu .discover-menu-item--danger .discover-menu-item-label,
  body.dark.discover-page #discover-menu .discover-menu-item--danger .discover-menu-item-label,
  .dark body.guest-discover-chrome #discover-menu .discover-menu-item--danger .discover-menu-item-label,
  body.dark.guest-discover-chrome #discover-menu .discover-menu-item--danger .discover-menu-item-label {
    color: #fca5a5 !important;
    -webkit-text-fill-color: #fca5a5 !important;
  }

  body.discover-page #discover-menu .discover-menu-item-label,
  body.guest-discover-chrome #discover-menu .discover-menu-item-label {
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  body.discover-page #discover-menu .discover-menu-item,
  body.guest-discover-chrome #discover-menu .discover-menu-item,
  body.discover-page #discover-menu a[role="menuitem"],
  body.guest-discover-chrome #discover-menu a[role="menuitem"],
  body.discover-page #discover-menu button[role="menuitem"],
  body.guest-discover-chrome #discover-menu button[role="menuitem"] {
    transition-property: background-color, box-shadow !important;
    transition-duration: 160ms !important;
    transition-timing-function: ease !important;
  }
}

/* =============================================================================
 * Compact desktop with amenity rail (1280px–1419px)
 * Chips appear at 1280px; this tier keeps search/datetime readable beside them.
 * ============================================================================= */
@media (min-width: 1280px) and (max-width: 1419px) {
  html body.discover-page .discover-top-bar .discover-toolbar-primary,
  html body.discover-page .discover-top-bar .flex.items-center.gap-2.sm\:gap-4.lg\:gap-6.flex-1.min-w-0 {
    align-items: center !important;
    gap: var(--discover-toolbar-gap, 0.625rem) !important;
    min-height: 0 !important;
    height: auto !important;
  }

  html body.discover-page .discover-top-bar .discover-search-controls {
    display: flex !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    --discover-search-controls-max: none;
    gap: 0.375rem !important;
  }

  html body.discover-page .discover-top-bar .discover-toolbar-search-field,
  html body.discover-page .discover-top-bar .search-field-container {
    flex: 1 1 0% !important;
    min-width: 10.5rem !important;
    max-width: none !important;
    width: auto !important;
  }

  html body.discover-page .discover-top-bar .discover-toolbar-datetime-field,
  html body.discover-page .discover-top-bar .datetime-field-container {
    flex: 0 0 clamp(8.75rem, 11vw, 10.25rem) !important;
    min-width: 8.75rem !important;
    max-width: 10.25rem !important;
    width: auto !important;
    margin-left: 0 !important;
    transform: none !important;
  }

  html body.discover-page .discover-top-bar :is(#search-input-display-container.search-display-container, .search-display-container) {
    min-height: var(--discover-control-height, 2.75rem) !important;
    max-height: var(--discover-control-height, 2.75rem) !important;
  }

  html body.discover-page .discover-top-bar .search-display-container .relative.flex.items-center,
  html body.discover-page .discover-top-bar .datetime-display-container .relative.flex.items-center {
    padding: 0.3rem 0.55rem !important;
  }

  html body.discover-page .discover-top-bar .search-display-container .flex-shrink-0.mr-1,
  html body.discover-page .discover-top-bar .search-display-container .flex-shrink-0.mr-2,
  html body.discover-page .discover-top-bar .search-display-container .flex-shrink-0.mr-3 {
    margin-right: 0.35rem !important;
  }

  /* Reclaim inner width: chevron is redundant on compact desktop */
  html body.discover-page .discover-top-bar .search-display-container .search-arrow-container,
  html body.discover-page .discover-top-bar .search-display-container > .relative > .flex-shrink-0.hidden.sm\:block {
    display: none !important;
  }

  html body.discover-page .discover-top-bar .search-display-container span[title],
  html body.discover-page .discover-top-bar .search-placeholder-text,
  html body.discover-page .discover-top-bar #search-input-description {
    display: block !important;
    -webkit-line-clamp: unset !important;
    line-clamp: unset !important;
    -webkit-box-orient: unset !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Single-line datetime trigger (label hidden globally for Discover; see canonical rule above) */
  html body.discover-page .discover-top-bar .datetime-display-container .flex-1.min-w-0 {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  html body.discover-page .discover-top-bar .datetime-display-container .flex-shrink-0.ml-1,
  html body.discover-page .discover-top-bar .datetime-display-container .flex-shrink-0.ml-2,
  html body.discover-page .discover-top-bar .datetime-display-container .flex-shrink-0.ml-3 {
    margin-left: 0.25rem !important;
  }

  html body.discover-page .discover-top-bar .datetime-display-container .mx-dropdown-arrow {
    width: 1.125rem !important;
    height: 1.125rem !important;
  }

  html body.discover-page .discover-top-bar .datetime-display-container .mx-dropdown-arrow svg {
    width: 0.625rem !important;
    height: 0.625rem !important;
  }

  html body.discover-page .discover-top-bar .discover-toolbar-chip-rail,
  html body.discover-page .discover-top-bar .amenity-chips-container {
    flex: 0 1 auto !important;
    min-width: 0 !important;
    max-width: none !important;
    gap: 0.3rem !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  html body.discover-page .discover-top-bar .amenity-chips-container #parking-amenity-chips,
  html body.discover-page .discover-top-bar .amenity-chips-container #storage-amenity-chips {
    gap: 0.3rem !important;
  }

  html body.discover-page .discover-top-bar .discover-toolbar-chip-rail .amenity-chip,
  html body.discover-page .discover-top-bar .amenity-chips-container .amenity-chip {
    padding: 0.18rem 0.42rem !important;
    font-size: 0.625rem !important;
    font-weight: 600 !important;
    min-height: 1.375rem !important;
    gap: 0.2rem !important;
    letter-spacing: -0.01em !important;
  }

  html body.discover-page .discover-top-bar .discover-toolbar-chip-rail .amenity-chip svg,
  html body.discover-page .discover-top-bar .amenity-chips-container .amenity-chip svg {
    width: 0.625rem !important;
    height: 0.625rem !important;
    min-width: 0.625rem !important;
    min-height: 0.625rem !important;
  }
}

/* Keep the search usable on narrow phones; the menu retains brand navigation. */
@media (max-width: 430px) {
  html body.discover-page .discover-top-bar .discover-toolbar-logo {
    display: none !important;
  }
}