/* find.css — /p/find (Find My PPW). Design source: MEMBERSHIP_REQUIREMENTS §7 / §15.6-7.
   Phase 2A scope: map engine (inject/zoom/pan/reset), round selector, zone
   states, claim badges. Sidebar content is a placeholder until Phase 2B. */

* { box-sizing: border-box; }
body { margin: 0; background: var(--space-gradient), var(--bg-primary); background-repeat: no-repeat; background-attachment: fixed; color: var(--text-primary); font-family: var(--font-thai); }
/* Form controls don't inherit font-family from the page by default (browser
   UA stylesheet gives them their own system font) — without this, any
   button/input/select added here silently falls back off Noto Sans Thai.
   Fixes it everywhere at once instead of patching each selector by hand
   (the seat buttons and zoom/reset controls were the ones actually missing
   it before this rule existed). */
button, input, select, textarea { font: inherit; color: inherit; }

/* ── Space-vibe background, scoped to the map only (2026-07-10 ask;
   relocated off the page background to .find-map, 2026-07-10 follow-up) —
   base .p-star/.p-shooting-star rules live in tokens.css (shared site-wide);
   this overrides position:fixed -> absolute since mountStarfield(mapWrap)
   (find.js) mounts these as children of .find-map (position:relative/
   overflow:hidden), not document.body. Wins on specificity (adds .is-scoped)
   over tokens.css's unscoped rule regardless of stylesheet load order. */
#p-starfield.is-scoped, #p-shooting-stars.is-scoped { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }

/* Pause the twinkling/shooting-star animations while the zoomed-in seat
   view's frosted-glass overlay (.find-seatplan, below) is showing
   (2026-07-11 perf fix). Measured impact: on Find My PPW specifically,
   backdrop-filter forces the browser to re-sample everything beneath it
   every frame it's visible — continuously-animating stars underneath add to
   that per-frame cost for zero visual payoff, since they're already
   unreadable under the panel's blur + dark tint. Confirmed via rAF frame
   timing: 59fps/0 dropped frames with the map alone vs 54fps/multiple
   dropped frames once the frosted panel was open — pausing this doesn't
   change how anything looks, only stops wasted work under the hood. */
.find-map:has(.find-seatplan.is-visible) .p-star,
.find-map:has(.find-seatplan.is-visible) .p-shooting-star { animation-play-state: paused; }

.find-page {
  display: flex;
  /* dvh (not vh) — vh includes the area behind mobile browsers' collapsible
     address bar, so this fixed-height full-screen page overflowed by that
     much and forced an extra outer scroll (2026-07-08 fix). */
  height: calc(100vh - var(--navbar-h));
  height: calc(100dvh - var(--navbar-h));
  background: var(--space-gradient), var(--bg-primary);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--text-primary);
  font-family: var(--font-thai);
}

/* ── Phase-disabled state (§7.11/§12, §15.17) ────────────────────────────── */
.find-disabled {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  max-width: 360px;
  margin: 0 auto;
  padding: 40px 24px;
  height: calc(100vh - var(--navbar-h));
  height: calc(100dvh - var(--navbar-h));
  justify-content: center;
}
/* Legal footer fallback for the disabled state — no sidebar exists here to
   host it, so it falls back to page level with its own symmetric spacing. */
#find-root > .lg-footer-link { margin-top: 20px; padding-bottom: 20px; }
.find-disabled__icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--accent-gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  background: rgba(244, 161, 64, 0.08);
}
.find-disabled__title { font-size: 18px; font-weight: 700; }
.find-disabled__subtext { font-size: 13px; color: var(--text-secondary); }
.find-disabled__chip {
  margin-top: 6px;
  font-size: 11px;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 12px;
}

/* ── Map area ─────────────────────────────────────────────────────────── */
.find-map {
  position: relative;
  flex: 1;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  background:
    radial-gradient(circle at 30% 20%, rgba(19, 205, 203, 0.06), transparent 60%),
    var(--bg-primary);
}
.find-map.is-panning { cursor: grabbing; }

.find-map__viewport {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
}
/* will-change only while actively panning/zooming/animating — GPU caches a
   bitmap of the layer at this point and just scales that texture for
   subsequent transforms, which is what causes visible blur at high zoom.
   Dropping the hint once interaction settles forces a normal, crisp
   re-render of the underlying vector paths. */
.find-map__viewport.is-interacting { will-change: transform; }
.find-map__viewport.is-animating { transition: transform 0.4s ease; }
.find-map__viewport svg { display: block; }

.find-map__viewport .zone {
  cursor: pointer;
  transition: filter 0.15s ease, opacity 0.15s ease;
}
.find-map__viewport .zone:hover { filter: brightness(1.25); }
.find-map__viewport .zone.is-active path {
  stroke: #FFFFFF;
  stroke-width: 3;
  paint-order: stroke;
}

.find-dim-layer {
  /* var(--bg-primary), not pure #000000 (2026-07-11 fix) — this rect covers
     the ENTIRE SVG canvas (viewBox), including the blank space outside the
     venue silhouette. At the overview map's normal zoom that blank space is
     a sliver, easy to miss; zoomed into any zone near an edge/corner (where
     most of the visible viewport IS that blank space), pure black filled
     most of the screen and read as a broken/opaque background instead of
     an intentional dim effect. --bg-primary matches .find-map's own
     background, so the same dim effect now blends with the app's real
     theme instead of clashing as a flat black slab. */
  fill: var(--bg-primary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.find-dim-layer.is-visible { opacity: 0.85; }
.find-badge-layer { transition: opacity 0.3s ease; }

.find-badge circle { fill: var(--bg-elevated); }
.find-badge text {
  /* fill set per-badge in map.js (matches that zone's own tier color) */
  font-family: var(--font-thai);
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
}

/* ── Seat-plan floating panel — an independent HTML overlay covering the
   whole map area (not bound to the macro map's own pan/zoom transform).
   Carries its own mini pan/zoom engine for its (potentially large) seat
   grid. ─────────────────────────────────────────────────────────────── */
.find-seatplan {
  position: absolute;
  inset: 0;
  z-index: 8;
  display: flex;
  flex-direction: column;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
  /* Frosted-glass effect (2026-07-11 ask) — the underlying full-venue map
     must stay visible (not swapped for an opaque background) but blurred,
     like a sheet of frosted glass laid over it. Reverted to the original
     rgba(15,15,30,0.55) tint ("current level of opacity" per the ask) —
     an earlier attempt made this opaque instead, which hid the map
     entirely; the actual bug was the missing blur, not the tint's alpha. */
  background: rgba(15, 15, 30, 0.55);
  /* 8px (was 12px, 2026-07-11 perf fix) — backdrop-filter is one of the
     more expensive CSS properties (continuous per-frame re-sampling of
     everything beneath it); a smaller radius costs less to compute while
     still reading as "frosted" at this panel's scale. */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  overflow: hidden;
}
.find-seatplan.is-visible { opacity: 1; pointer-events: auto; }

/* Now rendered as the first child of .find-seatplan__content, not a fixed
   strip above .find-seatplan__viewport (2026-07-10 ask) — it pans/zooms
   together with the seat grid like part of the venue floor plan, instead of
   staying pinned to the viewport's top regardless of pan/zoom. The old
   76px top padding was a position anchor clearing the back-button/zone-chip
   overlays above the old fixed strip; that concern doesn't apply once it's
   inside the scrollable content, so it's now just a small gap matching
   .find-seatplan__content's own 8px top padding, plus a bit more before the
   first seat row. */
.find-seatplan__stage { text-align: center; padding: 0 0 12px; }
.find-seatplan__stage-label {
  color: var(--like-red);
  font-weight: 700;
  /* 20% smaller (2026-07-10 ask): 11px -> 8.8px */
  font-size: 8.8px;
  letter-spacing: 0.25em;
}
.find-seatplan__stage-arc {
  /* 20% smaller (2026-07-10 ask): 70% -> 56%, 14px -> 11.2px, 6px -> 4.8px,
     3px -> 2.4px */
  width: 56%;
  height: 11.2px;
  margin: 4.8px auto 0;
  border-top: 2.4px solid var(--like-red);
  border-radius: 50%;
  opacity: 0.85;
}

.find-seatplan__viewport {
  flex: 1;
  position: relative;
  overflow: hidden;
  cursor: grab;
  touch-action: none;
}
.find-seatplan__viewport.is-panning { cursor: grabbing; }
.find-seatplan__content {
  position: absolute;
  top: 0;
  left: 0;
  padding: 8px 16px;
  transform-origin: 0 0;
}
/* Same hybrid as .find-map__viewport — will-change only while interacting,
   so the resting view always re-renders crisp instead of scaling a cached
   GPU texture. */
.find-seatplan__content.is-interacting { will-change: transform; }
/* Brief eased transition for the double-click/double-tap zoom-to-seat
   camera move (2026-07-10 ask) — manual wheel/pinch/drag stays instant. */
.find-seatplan__content.is-animating { transition: transform 0.4s ease; }

.find-seatplan__row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.find-seatplan__row-label {
  width: 30px;
  flex-shrink: 0;
  text-align: right;
  font-size: 11px;
  color: rgba(255, 255, 255, 0.45);
}
.find-seatplan__row-label:last-child { text-align: left; }
.find-seatplan__row-cells { display: grid; gap: 8px; }

.find-seat {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  appearance: none;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: transparent;
  border: 1px solid transparent;
  padding: 0;
}
.find-seat__emoji { font-size: 1.39755em; display: flex; align-items: center; justify-content: center; line-height: 0; }
.find-seat--available { opacity: 0.55; }
.find-seat__number { font-size: 10.35px; font-weight: 700; color: #07071a; pointer-events: none; }
.find-seat--pending { opacity: 0.7; }
.find-seat--unverified { background: transparent !important; border-width: 3px; }
.find-seat.is-selected { box-shadow: 0 0 0 2px #ffffff; }
.find-seat__badge {
  position: absolute;
  top: -3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ffffff;
  color: #07071a;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
}
.find-seat__badge--pending { right: -3px; }
.find-seat__badge--forsale { left: -3px; background: #ffe33e; }
/* Health Status Check-In badge (§4.1) — same top-left slot as ⚡ for-sale
   (2026-07-26 decision: WTS listings don't exist post-concert, no real
   collision to design around). Per-status circle color; "other" (💊) gets
   a dedicated purple not used anywhere else on the site — no existing token
   covers it (approved 2026-07-26). */
.find-seat__badge--health { left: -3px; }
.find-seat__badge--health-covid { background: var(--like-red); }
.find-seat__badge--health-flu { background: var(--accent-gold); }
.find-seat__badge--health-other { background: #9B7FE8; }

/* Admin-added health report marker (§4.1 Decision #11/#13/#19) — no ticket
   behind it, so it fully replaces the normal seat treatment: FontAwesome
   "user" glyph on slate fill instead of a price-tier/identity color. */
.find-seat--manual-report { background: #4A5578 !important; border-color: #4A5578 !important; }
.find-seat__manual-icon { width: 60%; height: 60%; color: #fff; display: flex; align-items: center; justify-content: center; }
.find-seat__manual-icon svg { width: 100%; height: 100%; }

.find-seat--mini { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); }
.find-seat__dots { display: flex; gap: 2px; }
.find-seat__dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }
.find-seat__dot.has-ticket { background: var(--accent-teal); }

.find-legend {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 9;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  max-width: min(calc(100% - 80px), 520px);
  row-gap: 4px;
  column-gap: 10px;
  /* More transparent + stronger blur (2026-07-10 ask) — was a near-opaque
     0.9 alpha that read as a solid tile sitting on the map rather than a
     glassy overlay. */
  background: rgba(8, 8, 24, 0.6);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 7px 11px;
  font-size: 10px;
  color: var(--text-secondary);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.find-legend__item { display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.find-legend__dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.find-legend__dot--verified { background: var(--accent-teal); }
.find-legend__dot--pending { background: var(--accent-teal); opacity: 0.7; }
.find-legend__dot--unverified { background: transparent; border: 2px solid var(--accent-teal); }
.find-legend__dot--available { background: transparent; border: 1px solid rgba(255, 255, 255, 0.5); opacity: 0.6; }

.find-zone-back-btn {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 10;
  appearance: none;
  border: 1px solid var(--border);
  background: rgba(8, 8, 24, 0.85);
  color: var(--text-primary);
  border-radius: 10px;
  padding: 8px 14px;
  font-family: var(--font-thai);
  font-size: 12px;
  cursor: pointer;
}

.find-zone-chip {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 10;
  background: rgba(8, 8, 24, 0.85);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 6px 18px;
  font-family: var(--font-thai);
  text-align: center;
  line-height: 1.2;
}
.find-zone-chip__label { font-size: 11px; font-weight: 500; color: var(--text-secondary); }
.find-zone-chip__code { font-size: 24px; font-weight: 800; color: var(--text-primary); }

.find-reset-btn, .find-zoom-btn {
  position: absolute;
  right: 16px;
  z-index: 10;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(8, 8, 24, 0.85);
  color: var(--text-primary);
  cursor: pointer;
}
/* Icon sizing (2026-07-10 — SVG replaced the ＋／－／⤢ Unicode glyphs, which
   read as too small/faint at these button sizes). */
.find-reset-btn svg, .find-zoom-btn svg { width: 18px; height: 18px; }
.find-reset-btn:hover, .find-zoom-btn:hover { background: var(--bg-elevated); }
.find-reset-btn { bottom: 16px; }
.find-zoom-btn--out { bottom: 64px; }
.find-zoom-btn--in { bottom: 112px; }

/* ── Map toolbar (round/day selector + reset) ───────────────────────────── */
.find-toolbar {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 10;
  /* More transparent + stronger blur (2026-07-10 ask), matching the same
     treatment applied to .find-legend below. */
  background: rgba(8, 8, 24, 0.6);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 6px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.find-round-tab {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 10px;
  padding: 6px 14px;
  cursor: pointer;
  text-align: center;
  line-height: 1.2;
  font-family: var(--font-thai);
}
.find-round-tab__main { display: block; font-size: 13px; font-weight: 700; }
.find-round-tab__sub { display: block; font-size: 10px; opacity: 0.8; }
.find-round-tab.is-active {
  background: var(--accent-gold);
  color: #1a1300;
}
.find-round-tab.is-active .find-round-tab__main,
.find-round-tab.is-active .find-round-tab__sub { color: #1a1300; }

.find-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 20;
  pointer-events: none;
  white-space: nowrap;
  background: #07071a;
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
}
.find-tooltip[hidden] { display: none; }

/* ── Sidebar / panel (§15.6 Seat Summary) ────────────────────────────────── */
.find-sidebar {
  width: 320px;
  flex-shrink: 0;
  background: var(--bg-secondary);
  border-left: 1px solid var(--border);
  position: relative;
  display: flex;
  flex-direction: column;
}
.find-sidebar__content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.18) transparent;
}
.find-sidebar__content::-webkit-scrollbar { width: 8px; }
.find-sidebar__content::-webkit-scrollbar-track { background: transparent; }
.find-sidebar__content::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 4px;
}
.find-sidebar__content::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }

/* Legal footer — sits below the scrollable panel content, as a persistent
   strip at the end of the sidebar (not inside the scroll area, so it's
   never cleared by panel.js's re-renders). Slimmer than other pages'
   footer (2026-07-09 ask): flat 10px top/bottom, ~10% smaller text and
   side padding, since the 320px-wide panel has less room to spare. */
.find-sidebar .lg-footer-link {
  flex-shrink: 0;
  padding: 10px 14px;
  font-size: 10px;
  border-top: 1px solid var(--border);
}

.find-panel__head { font-size: 16px; font-weight: 700; }

.find-panel__search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
}
.find-panel__search-icon { font-size: 13px; flex-shrink: 0; }
.find-panel__search {
  flex: 1;
  min-width: 0;
  width: 100%;
  background: transparent;
  border: none;
  padding: 0;
  color: var(--text-primary);
  font-family: var(--font-thai);
  font-size: 13px;
}
.find-panel__search:focus { outline: none; }
.find-panel__search::placeholder { color: var(--text-secondary); }

/* ── Search dropdown (live suggestions) ─────────────────────────────────── */
.find-search-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 5;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.find-search-dropdown__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
}
.find-search-dropdown__item:hover { background: rgba(255, 255, 255, 0.06); }
.find-search-dropdown__item + .find-search-dropdown__item { border-top: 1px solid var(--border); }
.find-search-dropdown__name { font-weight: 600; }
.find-search-dropdown__count { font-size: 11px; color: var(--text-secondary); flex-shrink: 0; }

/* ── Search results panel (Enter key / ambiguous group) ──────────────────── */
.find-search-results { display: flex; flex-direction: column; gap: 8px; }
.find-search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
}
.find-search-result:hover { background: rgba(255, 255, 255, 0.04); }
.find-search-result__swatch { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.find-search-result__main { flex: 1; min-width: 0; }
.find-search-result__seat { font-size: 13px; font-weight: 600; }
.find-search-result__meta { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }

.find-panel__venue-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.find-count-line__owned { font-weight: 700; font-size: 14.4px; }
.find-count-line__total { color: var(--text-primary); font-weight: 600; font-size: 12px; }
.find-panel__bar, .find-zone-row__bar {
  height: 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.find-panel__bar-fill, .find-zone-row__bar-fill {
  height: 100%;
  border-radius: 4px;
}
/* Overview summary bar matches its own count text color (--accent-gold);
   per-zone row bars keep their tier color (set inline per row) with teal
   as the fallback default. */
.find-panel__bar-fill { background: var(--accent-gold); }
.find-zone-row__bar-fill { background: var(--accent-teal); }

.find-panel__daytabs { display: flex; gap: 6px; }
.find-daytab {
  flex: 1;
  appearance: none;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  border-radius: 8px;
  padding: 6px 4px;
  font-size: 12px;
  font-family: var(--font-thai);
  cursor: pointer;
}
.find-daytab.is-active { background: var(--accent-gold); border-color: var(--accent-gold); color: #1a1300; font-weight: 700; }

.find-panel__group-label {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 6px 0 2px;
}
.find-panel__empty { font-size: 12px; color: var(--text-secondary); padding: 8px 0; }

/* Health Status Check-In — sidebar default-state takeover (§4.2) */
.find-health-zones { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.find-health-zone { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.find-health-zone__head {
  width: 100%; display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  background: rgba(232, 67, 90, 0.08);
  border: none;
  color: var(--text-primary);
  font: 700 13px var(--font-thai);
  cursor: pointer;
}
.find-health-zone__code { flex-shrink: 0; }
.find-health-zone__count { flex: 1; text-align: left; font-weight: 500; color: var(--text-secondary); font-size: 12px; }
.find-health-zone__chevron { font-size: 11px; color: var(--text-secondary); }
.find-health-zone__body { padding: 6px 12px 10px; display: flex; flex-direction: column; gap: 4px; }
.find-health-group__head { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--text-secondary); margin-top: 6px; }
.find-health-group__head:first-child { margin-top: 0; }
.find-health-seat { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-primary); padding-left: 20px; }

.find-zone-row {
  display: flex;
  gap: 10px;
  padding: 8px;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid transparent;
}
.find-zone-row:hover { background: rgba(255, 255, 255, 0.04); }
.find-zone-row.is-active { border-color: var(--accent-gold); background: rgba(244, 161, 64, 0.08); }
.find-zone-row__chip {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #0a0a12;
}
.find-zone-row__main { flex: 1; min-width: 0; }
.find-zone-row__top { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 2px; }
.find-zone-row__code { font-weight: 600; }
.find-zone-row__count { font-size: 11px; margin-bottom: 4px; color: var(--text-secondary); }
.find-zone-row__count-label { color: var(--text-secondary); }
.find-zone-row__count-num { color: rgba(255, 255, 255, 0.85); font-weight: 400; }

.find-cta {
  width: 100%;
  appearance: none;
  border: none;
  background: var(--accent-gold);
  color: #1a1300;
  border-radius: 10px;
  padding: 10px;
  font-family: var(--font-thai);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.find-cta--inpanel { margin-top: 4px; }

/* ── Marketplace entry link — plain navigation to /p/find/market/ (a
   separate page, per Figma frame `find-marketplace`), not a panel mode. ── */
.mk-entry-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  text-decoration: none;
  border: 1px solid rgba(244, 161, 64, 0.4);
  background: rgba(244, 161, 64, 0.1);
  color: var(--accent-gold);
  border-radius: 10px;
  padding: 10px;
  font-family: var(--font-thai);
  font-size: 15px;   /* 13px +15% (2026-07-09) — icon scales with it since it's inline text */
  font-weight: 700;
  cursor: pointer;
}
.mk-entry-btn:hover { background: rgba(244, 161, 64, 0.18); }

/* Small, muted group label above the Marketplace/Sponsor buttons — a
   sub-menu heading, deliberately not styled to compete with
   .find-panel__head below it (2026-07-12 ask: "add it, but not prominent"). */
.find-panel__submenu-label {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
  margin-bottom: 2px;
}

/* Sponsor entry — same shape as .mk-entry-btn, teal instead of gold so the
   two buttons read as distinct destinations, and ~10% smaller text
   (15px -> 13.5px) since its label is shorter/less primary than
   Marketplace's (2026-07-12 ask). */
.mk-entry-btn--sponsor {
  border-color: rgba(19, 205, 203, 0.4);
  background: rgba(19, 205, 203, 0.1);
  color: var(--accent-teal);
  font-size: 13.5px;
}
.mk-entry-btn--sponsor:hover { background: rgba(19, 205, 203, 0.18); }

.find-panel__divider { height: 0; border-top: 1px solid var(--border); margin: 4px 0; }

/* ── Share row (copy-link + LINE/Facebook/Instagram/X) — styling matches the
   main site's zone-card share row (.btn-social) exactly, per user request.
   Always the last row of the zone-selected / seat-selected panel. ───────── */
.find-share-row { display: flex; gap: 8px; margin-top: 4px; }
.find-share-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border);
  cursor: pointer;
  font-size: 15px;
  transition: background 0.15s;
}
.find-share-btn:hover { background: rgba(255, 255, 255, 0.15); }
.find-share-btn--copy { color: var(--text-primary); }
.find-share-btn--line { color: #06C755; }
.find-share-btn--fb { color: #1877F2; }
.find-share-btn--ig { color: #E1306C; }
.find-share-btn--x { color: #ffffff; }

.find-share-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--bg-elevated);
  color: var(--text-primary);
  padding: 10px 20px;
  border-radius: 24px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
  z-index: 200;
  border: 1px solid var(--border);
  white-space: nowrap;
}
.find-share-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Zone-selected panel ─────────────────────────────────────────────────── */
.find-panel__back {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 999px;
  color: var(--text-secondary);
  font-family: var(--font-thai);
  font-size: 10.4px;
  cursor: pointer;
  padding: 4.8px 9.6px 4.8px 8px;
  align-self: flex-start;
}
.find-panel__back:hover { background: rgba(255, 255, 255, 0.1); }
.find-zone-head { display: flex; align-items: center; gap: 8px; }
.find-zone-head__swatch { width: 18px; height: 18px; border-radius: 5px; flex-shrink: 0; }
.find-zone-head__code { font-size: 16px; font-weight: 700; }
.find-zone-head__tier { font-size: 11px; color: var(--text-secondary); }
.find-zone-price { font-size: 12px; color: var(--text-secondary); }

.find-zone-direction__label { font-size: 11px; color: var(--text-secondary); }
.find-zone-direction__card {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
}
.find-zone-direction__stage {
  padding: 8px;
  font-size: 12px;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
}
.find-zone-direction__row { display: flex; align-items: stretch; }
.find-zone-direction__arrow {
  flex-shrink: 0;
  padding: 10px 14px;
  font-size: 20px;
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.find-zone-direction__facing {
  flex: 1;
  padding: 10px;
  font-size: 11.9px;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: normal;
  word-break: break-word;
}
.find-zone-days { display: flex; gap: 8px; }
.find-zone-day {
  flex: 1;
  text-align: center;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 4px;
}
.find-zone-day__label { font-size: 11px; color: var(--text-secondary); }
.find-zone-day__count { font-size: 18px; font-weight: 700; margin-top: 2px; }
.find-zone-hint { font-size: 11px; color: var(--text-secondary); text-align: center; }

/* ── Seat-selected panel (Phase 2C, §15.6 "Seat selected") ──────────────── */
.find-seat-panel__dots-label { font-size: 11px; color: var(--text-secondary); display: block; margin-bottom: 6px; }
.find-seat-panel__dots-row { display: flex; gap: 8px; }
.find-seat-panel__dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border);
}
.find-seat-panel__days { display: flex; flex-direction: column; gap: 8px; }
.find-seat-panel__day {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px;
}
.find-seat-panel__day-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.find-seat-panel__day-label { font-size: 11px; color: var(--text-secondary); }
.find-seat-panel__empty { font-size: 12px; color: var(--text-secondary); }
.find-seat-panel__owner { display: flex; align-items: center; gap: 8px; }
.find-seat-panel__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--accent-teal);
  background: var(--bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.find-seat-panel__name-col { display: flex; flex-direction: column; gap: 2px; }
.find-seat-panel__name { font-size: 13px; font-weight: 600; }
.find-seat-panel__country { display: flex; align-items: center; gap: 4px; font-size: 8.1px; color: var(--text-secondary); }
.find-seat-panel__tags { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.find-seat-panel__tag {
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary);
}
.find-seat-panel__tag--verified { background: rgba(19, 205, 203, 0.15); color: var(--accent-teal); }
.find-seat-panel__tag--pending { background: rgba(244, 161, 64, 0.15); color: var(--accent-gold); }
.find-seat-panel__tag--forsale { background: rgba(244, 161, 64, 0.15); color: var(--accent-gold); }
.find-seat-panel__tag--health-covid { background: rgba(232, 67, 90, 0.15); color: var(--like-red); }
.find-seat-panel__tag--health-flu { background: rgba(244, 161, 64, 0.15); color: var(--accent-gold); }
.find-seat-panel__tag--health-other { background: rgba(155, 127, 232, 0.15); color: #9B7FE8; }

.find-seat-panel__interest-btn {
  flex-shrink: 0;
  appearance: none;
  border: 1px solid var(--accent-gold);
  background: rgba(244, 161, 64, 0.1);
  color: var(--accent-gold);
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.find-seat-panel__interest-btn:hover { background: rgba(244, 161, 64, 0.2); }

/* ── Floating registration CTA (§15.8) ────────────────────────────────────── */
.find-floating-cta {
  /* Shifted down 10% (56px -> 50.4px) and scaled down 10% overall
     (max-width/padding/border-radius below) — 2026-07-10 ask. */
  position: absolute;
  bottom: 50.4px;
  left: 16px;
  z-index: 10;
  max-width: 234px;
  background: rgba(8, 8, 24, 0.92);
  border: 1px solid var(--accent-gold);
  border-radius: 10.8px;
  padding: 10.8px;
  backdrop-filter: blur(6px);
}
.find-floating-cta__header { display: flex; align-items: flex-start; gap: 7.2px; margin-bottom: 7.2px; }
.find-floating-cta__text { font-size: 10.8px; flex: 1; }
.find-floating-cta__actions .find-cta { padding: 7.2px; font-size: 10.8px; }
.find-floating-cta__dismiss {
  flex-shrink: 0;
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 11.7px;
  line-height: 1;
  padding: 0;
}

/* ── Mobile (MOBILE_STRATEGY §B2) ────────────────────────────────────────
   Map and panel stack in normal document flow, same as the main site: the
   map takes most of the initial viewport, the panel peeks ~30% at the
   bottom, and the user scrolls the page down to read the rest — no custom
   drag gesture, no position:fixed. */
/* Hidden entirely outside the mobile query below — map/panel are
   side-by-side on desktop with nothing below the fold to scroll to. Must
   come BEFORE the media query in source order so the mobile override below
   (equal specificity) actually wins on mobile instead of being shadowed by
   this base rule. */
.find-scroll-hint { display: none; }
@media (max-width: 768px) {
  .find-page { flex-direction: column; height: auto; min-height: calc(100vh - var(--navbar-h)); }

  /* 65vh (was 58vh, before that 65/55/60vh — back to the original value per 2026-07-10 ask). */
  .find-map { flex: none; width: 100%; height: 65vh; }

  .find-sidebar {
    position: relative;
    /* Pulled up over the map's own bottom edge by exactly the corner
       radius (2026-07-10 ask) — without this, the sidebar's rounded top
       corners cut into their own background, revealing a sliver of the
       PAGE's background color (not the map's) in the two corner triangles.
       Since map and sidebar backgrounds don't match, that sliver read as an
       obvious seam between "two separate layers", most visible when the
       map was zoomed. Overlapping instead means whatever shows through the
       rounded cutout is the map's own content, not a gap. z-index: 15
       (2026-07-10 follow-up — was 5) — the map's own overlay buttons go up
       to z-index 10 (.find-reset-btn/.find-zoom-btn), and the reset button
       in particular sits low enough (bottom:16px) to physically reach into
       this 20px overlap band, so 5 let it visually poke above the panel
       instead of being covered by it. Panel must always render above the
       map, full stop — this now beats every map-side element, not just the
       plain background. */
    z-index: 15;
    margin-top: -20px;
    width: 100%;
    height: auto;
    max-height: none;
    min-height: 40vh;
    border-left: none;
    border-top: 1px solid var(--border);
    border-radius: 20px 20px 0 0;
  }
  .find-sidebar__content {
    flex: none;
    overflow-y: visible;
  }

  /* Date/round selector and control buttons shrink ~15% on mobile, then an
     additional 10% on top of that (2026-07-10 ask) — only their own size
     (padding/font/dimensions), never their anchor offsets (top/left/right/
     bottom stay exactly as on desktop). */
  .find-toolbar { padding: 4.5px; gap: 6.3px; }
  .find-round-tab { padding: 4.5px 10.8px; }
  .find-round-tab__main { font-size: 9.9px; }
  .find-round-tab__sub { font-size: 7.65px; }

  /* Back to a compact corner overlay (2026-07-10 revert) — the full-width
     docked bar it briefly became wasn't wanted either. Stays translucent +
     blurred (see the base .find-legend rule) instead of the old near-opaque
     fill, so it no longer reads as a solid block sitting on the seats.
     bottom: 34px (was 14px, the desktop default — 2026-07-10 follow-up) —
     the sidebar now overlaps 20px into the map's bottom edge and renders
     above it (z-index: 15), so anything left at the old offset would sit
     behind the panel. Shifted up by exactly that 20px, same edge spacing
     as before relative to the panel's new top edge. */
  .find-legend { bottom: 34px; padding: 6px 9px; font-size: 8.5px; row-gap: 3px; column-gap: 8px; }
  .find-legend__dot { width: 9px; height: 9px; }

  /* CTA sat at the desktop bottom:56px offset, which put its bottom edge
     5px into the legend's mobile band (34px-61px, see above) — shifted up
     to clear it with a clean gap (2026-07-10 ask), then shifted back down
     10% (80px -> 72px, 2026-07-10 follow-up) alongside the base rule's own
     10% downward shift + 10% size reduction. */
  .find-floating-cta { bottom: 72px; }

  /* Whole block scaled down an additional 10% (2026-07-10 ask) — button
     size 34px -> 31px AND the vertical spacing between them recalculated
     from scratch (31px button + 8px gap = 39px per slot) instead of
     reusing the old 48px slot spacing, which was sized for the original
     40px desktop button and never actually scaled down with it, so the
     3-button stack read as loosely spaced on mobile.
     bottom offsets shifted up by 20px (2026-07-10 follow-up), same reason
     as .find-legend above — the panel now overlaps the map's bottom edge. */
  .find-reset-btn, .find-zoom-btn { width: 31px; height: 31px; }
  .find-reset-btn svg, .find-zoom-btn svg { width: 15px; height: 15px; }
  .find-reset-btn { bottom: 36px; }
  .find-zoom-btn--out { bottom: 75px; }
  .find-zoom-btn--in { bottom: 114px; }
  /* Additional 10% (2026-07-10 ask), on top of the existing mobile shrink. */
  .find-zone-back-btn { padding: 6.3px 10.8px; font-size: 9px; }

  /* Stage block (label + arc) shrinks ~15% on mobile already, then an
     additional 20% on top of that (2026-07-10 ask) — padding-top (its
     position anchor from the panel's top edge) stays 76px; only the
     label/arc's own dimensions shrink. */
  .find-seatplan__stage-label { font-size: 7.6px; }
  .find-seatplan__stage-arc { width: 47.6%; height: 9.6px; margin-top: 4px; border-top-width: 2px; }

  /* Floating "scroll for details" hint (2026-07-10 ask) — mobile only, map
     + panel stack in normal document flow here so the panel starts below
     the fold with no other affordance telling users to scroll for it. */
  .find-scroll-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 999px;
    /* Brighter + more transparent, stronger blur (2026-07-10 ask) — the
       original dark fill (rgba(20,21,39)) sat too close to the page's own
       dark background and read as blending in rather than floating above it. */
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    color: var(--text-primary);
    font: 600 12px var(--font-thai);
    cursor: pointer;
    z-index: 50;
    opacity: 1;
    transition: opacity 0.3s ease;
  }
  /* Faded out once the panel's own top edge scrolls into view (toggled by
     an IntersectionObserver in find.js watching .find-sidebar directly —
     more reliable than a scroll-position threshold guessed in CSS/JS). */
  .find-scroll-hint.is-hidden { opacity: 0; pointer-events: none; }
  .find-scroll-hint__arrow { display: inline-block; animation: find-scroll-hint-bounce 1.4s ease-in-out infinite; }
}
@keyframes find-scroll-hint-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}