/* =============================================================================
 * Discover page shell: accessibility + viewport layout (discover.html only).
 * Merged from base-accessibility.css + layout.css — one load, clear ownership.
 * ============================================================================= */

/* ---------------------------------------------------------------------------
 * Section 1: Base accessibility (discover-specific; .sr-only lives in base/utilities)
 * --------------------------------------------------------------------------- */
/**
 * ACCESSIBILITY UTILITIES
 * ========================
 * .sr-only is defined in css/base/utilities.css (loaded by base_renter).
 * This file adds discover-specific accessibility (reduced-motion overrides, etc.).
 */
/**
 * RESPONSIVE MEDIA
 * ================
 * Prevent images and videos from breaking layout
 */
img,
video {
  max-width: 100%;
  height: auto;
}

/* Google Maps tiles: clear max-width only. Do NOT set height/width (unset/revert
   distorted tiles on iOS). With max-width unconstrained, height:auto from the
   global img rule uses intrinsic size and does not fight Maps' attributes. */
body.discover-page #map-container img,
body.discover-page #map-container .gm-style img,
body.discover-page #map-container .gm-style video {
  max-width: none;
  max-height: none;
}
/**
 * REDUCED MOTION ACCESSIBILITY
 * =============================
 * Respects user's motion preferences for accessibility
 * Disables animations for users who prefer reduced motion
 */
@media (prefers-reduced-motion: reduce) {
  /* Global * reset lives in discover-head.css (loads in head). Component overrides only here. */

  /* Remove transform animations but keep visual feedback */
  .amenity-chip:hover,
  .spot-card-button:hover,
  .quick-time-btn:hover,
  #auto-search-toggle:hover {
    transform: none !important;
  }

  .amenity-chip:hover {
    background-color: var(--neutral-200) !important;
    box-shadow: none !important;
  }

  .dark .filter-chip:hover {
    background-color: var(--neutral-600) !important;
  }
}
/* PERFORMANCE OPTIMIZATIONS */
/* Enable hardware acceleration for smooth animations */
/* CAREFUL: Only apply to leaf elements, not parent containers */
.spot-card {
  transform: translateZ(0);
}
/* Parent containers (#listings-sheet, #listings-overlay) get isolation instead */

/* ---------------------------------------------------------------------------
 * Section 2: Layout system (discover viewport shell)
 * --------------------------------------------------------------------------- */
html:has(body.discover-page) {
  overflow-y: hidden !important; /* Prevent vertical scrollbar on html element */
  max-width: 100% !important;
  height: 100vh !important;
  height: 100svh !important; /* Stable — 100dvh jumps when iOS URL bar toggles on touch release */
  min-height: 100vh !important;
  min-height: 100svh !important; /* Beat app-page-shell html { min-height: 100dvh } */
  max-height: 100vh !important;
  max-height: 100svh !important;
}

body.discover-page,
body.discover-page.min-h-screen {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important; /* Page scroll lives in map/sheet containers */
  overflow-x: clip !important;
  overflow-y: hidden !important;
  height: 100vh !important;
  height: 100svh !important; /* Stable layout viewport; sheet overlays remaining chrome */
  min-height: 100vh !important;
  min-height: 100svh !important; /* Beat app-page-shell coarse .min-h-screen { 100dvh } */
  max-height: 100vh !important;
  max-height: 100svh !important;
  /* Prevent iOS rubber-band scroll from shifting position:fixed map on touch release. */
  overscroll-behavior: none !important;
  -webkit-overflow-scrolling: auto !important;
}

/* Any .h-screen under Discover (root shell) must stay on svh — never inherit coarse 100dvh. */
body.discover-page .h-screen {
  height: 100vh !important;
  height: 100svh !important;
  min-height: 100vh !important;
  min-height: 100svh !important;
  max-height: 100vh !important;
  max-height: 100svh !important;
}

body.discover-page .discover-top-bar,
body.discover-page #map-panel,
body.discover-page #discover-map-studio,
body.discover-page #map-container {
  min-width: 0 !important;
  max-width: 100% !important;
}

@supports not (overflow-x: clip) {
  body.discover-page {
    overflow-x: hidden !important;
  }
}

/* Hide the global cookie banner on Discover so it cannot overlap the map and sheet UI. */
body.discover-page #cookie-banner,
body.discover-page [data-cookie-banner="true"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -999 !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
}

/* Legacy discover-main-container — prefer .discover-app-shell in discover.html */
.discover-main-container {
  position: relative;
  width: 100%;
  z-index: var(--z-map);
}

/* Discover viewport shell — single flex column; height from body/main chain (100svh), not nested h-screen. */
body.discover-page #main-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.discover-page .discover-app-shell {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  position: relative;
  z-index: var(--z-map);
}

/* Map content row: <div class="discover-map-row flex-1 flex min-h-0"> */
body.discover-page .discover-map-row {
  min-height: 0 !important;
  flex: 1 1 auto !important;
}

@media (max-width: 1100px) {
  /* Keep none (not contain) — contain re-enabled rubber-band chaining on release. */
  body.discover-page {
    overscroll-behavior: none !important;
  }

  /* overflow:visible — Tailwind overflow-hidden on this row fought map.css and
     clipped GMaps tile transforms during pan. */
  body.discover-page .discover-map-row {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    overflow: visible !important;
  }

  body.discover-page #map-panel {
    touch-action: none !important;
    overscroll-behavior: none !important;
    overflow: visible !important;
  }
}

/* ========================================
 * CRITICAL LAYOUT FIXES - LOAD EARLY
 * ======================================== */
/* CRITICAL: 30-character spot card titles - prevent rerender flash */
.spot-card-title-wrapper.short-title-static.char-30 .spot-card-title-text,
#listings-overlay .spot-card .spot-card-title-wrapper.short-title-static.char-30 .spot-card-title-text,
#listings-content .spot-card .spot-card-title-wrapper.short-title-static.char-30 .spot-card-title-text,
div.spot-card .spot-card-title-wrapper.short-title-static.char-30 .spot-card-title-text {
  margin-top: -0.125rem !important;
  transform: translateX(0rem) !important;
  display: inline !important;
  white-space: nowrap !important;
}

/* First-time space type switch (Parking/Storage): lightweight session notice */
.discover-space-type-ack {
  position: fixed;
  bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast, 9999);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  max-width: min(28rem, calc(100vw - 1.5rem));
  padding: 0.75rem 1rem;
  margin: 0;
  border-radius: 0.5rem;
  border: 1px solid rgb(212 212 216);
  background: rgb(255 255 255);
  color: rgb(24 24 27);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.08);
  font-size: 0.875rem;
  line-height: 1.35;
}

html.dark .discover-space-type-ack {
  border-color: rgb(63 63 70);
  background: rgb(39 39 42);
  color: rgb(244 244 245);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.35), 0 4px 6px -4px rgb(0 0 0 / 0.25);
}

.discover-space-type-ack__text {
  margin: 0;
  flex: 1 1 12rem;
  min-width: 0;
}

.discover-space-type-ack__btn {
  flex-shrink: 0;
  margin-left: auto;
  padding: 0.375rem 0.75rem;
  border-radius: 0.375rem;
  border: 1px solid rgb(63 63 70);
  background: rgb(24 24 27);
  color: rgb(250 250 250);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
}

.discover-space-type-ack__btn:hover {
  background: rgb(39 39 42);
}

.discover-space-type-ack__btn:focus-visible {
  outline: 2px solid rgb(59 130 246);
  outline-offset: 2px;
}

html.dark .discover-space-type-ack__btn {
  border-color: rgb(82 82 91);
  background: rgb(228 228 231);
  color: rgb(24 24 27);
}

html.dark .discover-space-type-ack__btn:hover {
  background: rgb(244 244 245);
}

/* ---------------------------------------------------------------------------
 * Discover boot shell — unified initial load (map + sheet + controls together)
 * --------------------------------------------------------------------------- */
.discover-boot-shell {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: var(--discover-current-topbar-height, var(--discover-topbar-height, 4.75rem));
  z-index: calc(var(--z-sheet, 100) + 15);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--discover-premium-wash, #f3f4f6);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  /* Single reveal: shell fades off a sheet already seated underneath. */
  transition: opacity 0.42s ease, visibility 0.42s ease;
}

.dark .discover-boot-shell,
html.dark .discover-boot-shell,
body.dark.discover-page .discover-boot-shell {
  background: rgb(23 23 23);
}

.discover-boot-shell-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
}

.discover-boot-shell-label {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: rgb(75 85 99);
}

/* Discover loading spinners (boot shell, map overlay, search indicator) */
@keyframes discover-spinner-rotate {
  to {
    transform: rotate(360deg);
  }
}

.discover-loading-spinner {
  display: inline-block;
  flex-shrink: 0;
  border-radius: 9999px;
  border-style: solid;
  border-width: 2px;
  border-top-color: transparent !important;
  animation: discover-spinner-rotate 0.75s linear infinite;
  transform-origin: center center;
  box-sizing: border-box;
}

.discover-loading-spinner--primary {
  border-color: rgb(37 99 235);
  border-top-color: transparent !important;
}

.discover-loading-spinner--inverse {
  border-color: #ffffff;
  border-top-color: transparent !important;
}

.discover-loading-spinner--lg {
  width: 2rem;
  height: 2rem;
}

.discover-loading-spinner--sm {
  width: 0.75rem;
  height: 0.75rem;
}

.discover-loading-spinner--xs {
  width: 0.625rem;
  height: 0.625rem;
  border-width: 1.5px;
}

@media (min-width: 640px) {
  .discover-loading-spinner--sm {
    width: 1rem;
    height: 1rem;
  }

  .discover-loading-spinner--xs {
    width: 0.75rem;
    height: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .discover-loading-spinner {
    animation-duration: 0.75s !important;
    animation-iteration-count: infinite !important;
  }
}

.dark .discover-boot-shell-label,
html.dark .discover-boot-shell-label,
body.dark.discover-page .discover-boot-shell-label {
  color: rgb(212 212 216);
}

.discover-boot-shell--dismissed {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Keep map, sheet, spot detail, Map/List chrome, and related UI hidden until the boot shell dismisses.
   FAB z-index sits above the boot shell, so without this it paints early. */
body.discover-page:not(.discover-shell-ready) #map-panel,
body.discover-page:not(.discover-shell-ready) #listings-sheet,
body.discover-page:not(.discover-shell-ready) #spot-detail-view,
body.discover-page:not(.discover-shell-ready) #discover-map-mode-fab,
body.discover-page:not(.discover-shell-ready) #discover-map-mode-header-btn,
body.discover-page:not(.discover-shell-ready) #discover-map-spaces-badge {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Keep marketing/footer modules from painting under the boot shell (reads as stacked boxes). */
body.discover-page:not(.discover-shell-ready) .discover-lower-marketplace {
  visibility: hidden !important;
  pointer-events: none !important;
}

/* After shell unlock, settle marketing a beat behind the sheet (already visible). */
body.discover-page.discover-shell-ready .discover-lower-marketplace {
  animation: discover-marketplace-boot-settle 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: 0.08s;
}

@keyframes discover-marketplace-boot-settle {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.discover-page.discover-shell-ready .discover-lower-marketplace {
    animation: none;
  }
}

body.discover-page:not(.discover-shell-ready) #map-loading {
  display: none !important;
}

/* Boot shell sits above the map but must never cover the fixed top bar during load. */
body.discover-page:not(.bottom-sheet-spot-details-mode) .discover-top-bar {
  z-index: calc(var(--z-sheet, 100) + 25) !important;
}

@media (prefers-reduced-motion: reduce) {
  .discover-boot-shell {
    transition: none;
  }
}