/**
 * discover-head.css
 * Early-load styles for discover page (reduced motion, longterm row/toggle).
 * Linked in head so they apply before other discover CSS.
 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Keep Maps tile/camera transitions intact (iOS pan-release flash). */
  .gm-style,
  .gm-style *,
  .gm-style *::before,
  .gm-style *::after,
  #map-container,
  #map-container *,
  #discover-map-studio,
  #discover-map-studio * {
    animation-duration: revert !important;
    animation-iteration-count: revert !important;
    transition-duration: revert !important;
  }
}

@media (min-width: 1101px) {
  #parking-longterm-row-sheet,
  #parking-longterm-row-sheet.parking-longterm-row-sheet {
    margin-top: 0 !important;
    transform: none !important;
  }
}

#parking-longterm-toggle-desktop.parking-longterm-bubble:not(.border-green-500),
#parking-longterm-toggle-sheet.parking-longterm-bubble:not(.border-green-500) {
  background-color: var(--discover-control-bg, #f5f2ec) !important;
}

html.dark #parking-longterm-toggle-desktop.parking-longterm-bubble:not(.border-green-500),
html.dark #parking-longterm-toggle-sheet.parking-longterm-bubble:not(.border-green-500) {
  background-color: var(--discover-control-bg-dark, #292524) !important;
}

/* Reserve mobile top-bar height before JS measures the toolbar (prevents under-measure + load clipping). */
@media (max-width: 640px) {
  html body.discover-page {
    /* Matches --bp-phone-toolbar / DiscoverConstants.BREAKPOINTS.PHONE_TOOLBAR */
    /* Single-row phone toolbar: menu + unified search pill (~3.5rem before safe-area). */
    --discover-topbar-height: 3.5rem;
    --discover-current-topbar-height: 3.5rem;
    --discover-topbar-offset: 3.5rem;
  }
}

/* Discover below desktop: one line in #datetime-display-value only (no label + value stack). */
@media (max-width: 1100px) {
  /* Phone search pill: one line — value only ("When?"), never stack label + value. */
  html body.discover-page .discover-top-bar .datetime-display-container .datetime-label-text {
    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 #datetime-display-value {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

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

/* Stable first-paint datetime trigger copy (value-only; matches topbar final typography). */
html body.discover-page .discover-top-bar .discover-datetime-trigger-value,
html body.discover-page .discover-top-bar #datetime-display-value {
  display: block;
  min-width: 0;
  max-width: 100%;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--discover-chrome-text, #171412);
  font-weight: 650;
  letter-spacing: -0.01em;
  font-size: 0.875rem;
  line-height: 1.2;
  text-align: left;
}

/* Empty When?: slightly quieter than committed values so the control still reads as required. */
html body.discover-page .discover-top-bar .discover-datetime-trigger-value:not(.discover-datetime-trigger-value--set),
html body.discover-page .discover-top-bar #datetime-display-value:not(.discover-datetime-trigger-value--set) {
  color: var(--discover-chrome-text-muted, #5c5650);
  font-weight: 600;
}

html body.discover-page .discover-top-bar .discover-datetime-trigger-value--set,
html body.discover-page .discover-top-bar #datetime-display-value.discover-datetime-trigger-value--set {
  color: var(--discover-chrome-text, #171412);
  font-weight: 650;
}

html body.discover-page .discover-top-bar .datetime-display-container.datetime-has-committed-value {
  border-color: color-mix(in srgb, var(--color-brand-accent, #0f5a56) 28%, var(--discover-chrome-border, rgba(120, 113, 108, 0.2)));
  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);
}

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

html body.discover-page .discover-top-bar .datetime-display-container .flex-1.min-w-0 {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}

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

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

  html body.discover-page .discover-top-bar .datetime-display-container .flex-1.min-w-0 {
    text-align: center;
  }
}

/* Discover menu: in-app notification pills (SSR + JS toggles .hidden) */
#discover-menu .in-app-nav-badge--message,
#discover-menu .swiftspot-nav-badge--message {
  background: #e11d48;
}
#discover-menu .in-app-nav-badge--booking,
#discover-menu .swiftspot-nav-badge--booking {
  background: #2563eb;
}
#discover-menu .in-app-nav-badge--host-booking,
#discover-menu .swiftspot-nav-badge--host-booking {
  background: #d97706;
}

html.dark #discover-menu .in-app-nav-badge--booking,
html.dark #discover-menu .swiftspot-nav-badge--booking {
  background: #3b82f6;
}

/* iOS Safari: prevent auto-zoom on input focus by ensuring minimum 16px font size on touch devices */
@media (hover: none) and (pointer: coarse) {
  html body.discover-page input[type="text"],
  html body.discover-page input[type="search"],
  html body.discover-page input[type="email"],
  html body.discover-page input[type="tel"],
  html body.discover-page input[type="url"],
  html body.discover-page input[type="password"],
  html body.discover-page textarea {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100% !important;
  }
}