/* booking.css: companion to colors_and_type.css.
   Houses hover/focus/transition rules, responsive overrides, sheet animations.
   All rules scoped under .nara-v (the vanilla root class) so they don't
   bleed into other prototypes on the same page. */

/* ---------- Reset within the engine ---------- */
.nara-v, .nara-v * { box-sizing: border-box; }
/* Reset only the inline / icon-style buttons. `.nara-v-btn-*` variants
   bring their own color + font and need to win the cascade. Without
   this :not(), `.nara-v button` outweighs `.nara-v-btn-primary` on
   specificity (0,1,1 vs 0,1,0) and the primary action ends up with ink
   text on an ink background (invisible). */
.nara-v button:not([class*="nara-v-btn-"]) { font: inherit; color: inherit; }
.nara-v input, .nara-v textarea, .nara-v select { font: inherit; color: inherit; }

/* ---------- Layout shell ---------- */
.nara-v {
  background: var(--bg-1);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  --nara-scroll-offset: 96px;
}
/* .nara-v never carries .is-mobile (only .nara-v-header, .nara-v-main and
   .nara-v-confirm-header do), so the mobile override scopes to
   .nara-v-main, the ancestor that actually wraps the step content. */
.nara-v-main.is-mobile { --nara-scroll-offset: 80px; }
#nara-v-date-guests,
#nara-v-nest-section,
[id^="nara-v-upgrade-"] {
  scroll-margin-top: var(--nara-scroll-offset);
}

/* ---------- Header ---------- */
/* Why a Quick Book link dropped the guest here instead of at checkout. */
.nara-v-qb-notice {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 14px 36px 0;
  padding: 12px 16px;
  background: rgba(159, 106, 63, 0.07);
  border: 1px solid var(--nara-bronze, #9F6A3F);
  border-radius: 4px;
  font-size: 13px; line-height: 1.5; color: var(--fg-1);
}
.nara-v-qb-notice svg { flex-shrink: 0; margin-top: 1px; color: var(--nara-bronze-deep, #7A4F2C); }
.nara-v-qb-notice span { flex: 1; }
.nara-v-qb-notice-close {
  background: none; border: 0; padding: 0 2px; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--fg-3);
}
.nara-v-qb-notice-close:hover { color: var(--fg-1); }
@media (max-width: 860px) { .nara-v-qb-notice { margin: 12px 16px 0; } }

.nara-v-header {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 36px;
  border-bottom: 1px solid var(--border-1);
  background: var(--bg-1);
  position: sticky; top: 0; z-index: 20;
}
.nara-v-header.is-mobile { padding: 14px 18px; }
.nara-v-header-logo {
  display: flex; align-items: center; gap: 10px;
  border-bottom: 0; flex-shrink: 0;
  text-decoration: none; color: inherit;
}
.nara-v-header-logo img { width: 40px; height: 40px; object-fit: contain; }
.nara-v-header.is-mobile .nara-v-header-logo img { width: 32px; height: 32px; }
.nara-v-header-back {
  width: 36px; height: 36px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border-2); cursor: pointer; color: var(--fg-1);
  transition: background 160ms var(--ease-standard), border-color 160ms var(--ease-standard);
}
@media (hover: hover) {
  .nara-v-header-back:hover { background: var(--bg-2); border-color: var(--nara-ink); }
}
.nara-v-header-currency {
  border: 1px solid var(--border-2);
  background: transparent;
  padding: 6px 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--fg-1);
  cursor: pointer;
  flex-shrink: 0;
  /* Hide the native arrow when this renders as a <select>. */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
.nara-v-header-currency-static {
  display: inline-flex; align-items: center;
  border: 1px solid var(--border-2);
  padding: 6px 12px;
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--fg-1);
  flex-shrink: 0;
  background: transparent;
  user-select: none;
}
.nara-v-header-exit {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: 0;
  color: var(--fg-3); cursor: pointer;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; flex-shrink: 0;
  transition: color 160ms var(--ease-standard);
}
@media (hover: hover) {
  .nara-v-header-exit:hover { color: var(--fg-1); }
}

/* ---------- Progress stepper ---------- */
.nara-v-progress { display: flex; align-items: center; gap: 0; flex: 1; }
.nara-v-progress-step {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: 0; padding: 8px 4px;
  cursor: default; color: var(--fg-3); flex-shrink: 0;
}
.nara-v-progress-step.reachable { cursor: pointer; }
.nara-v-progress-step.active { color: var(--fg-1); }
.nara-v-progress-mark {
  width: 26px; height: 26px;
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--fg-3);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-family: var(--font-sans); font-variant-numeric: tabular-nums;
  transition: all 200ms var(--ease-standard);
}
.nara-v-progress-step.active .nara-v-progress-mark {
  background: var(--bg-1); border-color: var(--nara-ink); color: var(--fg-1);
}
.nara-v-progress-step.done .nara-v-progress-mark {
  background: var(--nara-ink); border-color: var(--nara-ink); color: var(--fg-on-dark);
}
.nara-v-progress-label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; }
.nara-v-progress-line {
  flex: 1; height: 1px; background: var(--border-1);
  margin: 0 14px; min-width: 16px;
  transition: background 300ms var(--ease-standard);
}
.nara-v-progress-line.done { background: var(--nara-ink); }
.nara-v-progress button:disabled { cursor: default; opacity: 0.55; }

.nara-v-progress-mobile { display: flex; align-items: center; gap: 12px; flex: 1; }
.nara-v-progress-mobile-eyebrow {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-3); white-space: nowrap;
}
.nara-v-progress-mobile-bar { flex: 1; height: 2px; background: var(--border-1); position: relative; }
.nara-v-progress-mobile-fill {
  position: absolute; inset: 0; background: var(--nara-ink);
  transition: right 400ms var(--ease-standard);
}
.nara-v-progress-mobile-label { font-family: var(--font-sans); font-size: 13px; color: var(--fg-1); white-space: nowrap; }

/* ---------- Main grid ---------- */
.nara-v-main { padding: 42px 36px 80px; max-width: 1280px; margin: 0 auto; width: 100%; }
.nara-v-main.is-mobile { padding: 24px 18px 40px; }
.nara-v-main-grid {
  display: grid; grid-template-columns: 1fr 340px; gap: 48px;
}
.nara-v-main-grid.no-rail { grid-template-columns: 1fr; }
/* Step 1 (date/guests/contact) hides the order preview, so the grid collapses
   to a single column instead of leaving the 340px rail track empty. */
.nara-v-main-grid--rail-hidden { grid-template-columns: 1fr; }
.nara-v-step-col { min-width: 0; }
.nara-v-rail { position: sticky; top: 100px; align-self: flex-start; }
.nara-v-rail--hidden { display: none; }

/* ---------- Eyebrow ---------- */
.nara-v-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px; font-weight: 400;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-3);
}

/* ---------- Field + TextInput ---------- */
.nara-v-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.nara-v-field-label { display: flex; align-items: center; gap: 6px; }
.nara-v-field-optional {
  text-transform: none; letter-spacing: 0; font-size: 10px; opacity: 0.7; font-style: italic;
}
.nara-v-field-row {
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--border-2);
  padding-bottom: 10px; padding-top: 2px;
  transition: border-color 160ms var(--ease-standard);
}
.nara-v-field.error .nara-v-field-row { border-bottom-color: var(--nara-critical); }
.nara-v-field.error .nara-v-field-label { color: var(--nara-critical); }
.nara-v-field-row:focus-within { border-bottom-color: var(--nara-bronze); }
.nara-v-field-icon { color: var(--fg-3); display: flex; }
.nara-v-field-hint { font-size: 12px; color: var(--fg-3); }
.nara-v-field-error { font-size: 12px; color: var(--nara-critical); }

.nara-v-text-input {
  flex: 1; min-width: 0;
  font-family: var(--font-sans);
  font-size: 15px; font-weight: 400;
  background: transparent; border: 0; outline: none;
  color: var(--fg-1); padding: 0;
}
.nara-v-text-input::placeholder { color: var(--fg-3); }

.nara-v-textarea {
  width: 100%;
  font-family: var(--font-sans); font-size: 14px; line-height: 1.55;
  background: #fffbf7; border: 1px solid var(--border-2); border-radius: 0;
  padding: 14px 16px; outline: none;
  color: var(--fg-1); resize: vertical;
  transition: border-color 160ms var(--ease-standard);
}
.nara-v-textarea:focus { border-color: var(--nara-bronze); }
.nara-v-textarea::placeholder { color: var(--fg-3); }

/* ---------- Button ---------- */
.nara-v-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 400;
  letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; border-radius: 0;
  transition: background-color 180ms var(--ease-standard),
              color 180ms var(--ease-standard),
              border-color 180ms var(--ease-standard),
              transform 120ms var(--ease-standard);
  user-select: none;
}
.nara-v-btn-md { padding: 14px 26px; font-size: 12px; }
.nara-v-btn-sm { padding: 10px 18px; font-size: 11px; }
.nara-v-btn-lg { padding: 16px 32px; font-size: 13px; }

.nara-v-btn-primary {
  background: var(--nara-ink); color: var(--fg-on-dark); border: 1px solid var(--nara-ink);
}
.nara-v-btn-secondary {
  background: transparent; color: var(--fg-1); border: 1px solid var(--fg-1);
}
.nara-v-btn-ghost {
  background: transparent; color: var(--fg-brand); border: 1px solid transparent; padding: 0;
}
.nara-v-btn-subtle {
  background: var(--bg-2); color: var(--fg-1); border: 1px solid var(--border-1);
}
.nara-v-btn:disabled, .nara-v-btn[aria-disabled="true"] {
  opacity: 0.42; cursor: not-allowed;
}
/* Primary buttons get a muted-ink fill when disabled, so the label stays
   readable instead of fading toward invisibility. */
.nara-v-btn-primary:disabled,
.nara-v-btn-primary[aria-disabled="true"] {
  background: var(--nara-ink-quiet);
  border-color: var(--nara-ink-quiet);
  color: var(--fg-on-dark);
  opacity: 1;
}
@media (hover: hover) {
  .nara-v-btn-primary:not(:disabled):hover { background: var(--nara-bronze-deep); border-color: var(--nara-bronze-deep); }
  .nara-v-btn-secondary:not(:disabled):hover { background: var(--fg-1); color: var(--fg-on-dark); }
  .nara-v-btn-ghost:not(:disabled):hover { color: var(--nara-bronze-deep); }
  .nara-v-btn-subtle:not(:disabled):hover { border-color: var(--nara-ink); }
}
.nara-v-btn:not(:disabled):active { transform: translateY(1px); }
.nara-v-btn:focus-visible { outline: 2px solid var(--nara-bronze); outline-offset: 2px; }

/* ---------- Stepper (+/-) ---------- */
.nara-v-stepper {
  display: inline-flex; align-items: center; gap: 14px;
  border: 1px solid var(--border-2); padding: 6px 10px;
}
.nara-v-stepper-btn {
  width: 28px; height: 28px; border: 0; background: transparent;
  cursor: pointer; color: var(--fg-1);
  display: flex; align-items: center; justify-content: center; padding: 0;
  transition: color 140ms var(--ease-standard);
}
.nara-v-stepper-btn:disabled { color: var(--fg-muted); cursor: not-allowed; }
.nara-v-stepper-val {
  font-family: var(--font-sans); font-size: 15px; min-width: 16px;
  text-align: center; font-variant-numeric: tabular-nums;
}

/* ---------- Tag ---------- */
.nara-v-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 400;
}
.nara-v-tag-default { background: var(--bg-2); color: var(--fg-2); border: 1px solid var(--border-1); }
.nara-v-tag-bronze { background: rgba(174,108,74,0.08); color: var(--nara-bronze-deep); border: 1px solid rgba(174,108,74,0.24); }
.nara-v-tag-sea { background: rgba(47,110,136,0.08); color: var(--nara-sea-deep); border: 1px solid rgba(47,110,136,0.24); }
.nara-v-tag-olive { background: rgba(107,138,90,0.10); color: var(--nara-success); border: 1px solid rgba(107,138,90,0.24); }
.nara-v-tag-ink { background: var(--nara-ink); color: var(--fg-on-dark); border: 1px solid var(--nara-ink); }
.nara-v-tag-dune { background: rgba(201,138,75,0.12); color: var(--nara-dune-deep); border: 1px solid rgba(201,138,75,0.28); }

/* ---------- Popover ---------- */
.nara-v-popover {
  position: absolute;
  top: calc(100% + 10px);
  background: var(--bg-1);
  border: 1px solid var(--border-1);
  box-shadow: var(--shadow-md);
  padding: 24px;
  z-index: 30;
  min-width: 300px;
  max-width: calc(100vw - 24px);
}
.nara-v-popover.align-left { left: 0; }
.nara-v-popover.align-right { right: 0; }

.nara-v-sheet-backdrop {
  position: fixed; inset: 0;
  background: rgba(42,36,32,0.5);
  z-index: 90;
  display: flex; align-items: flex-end;
  animation: naraFadeIn 200ms var(--ease-standard);
}
.nara-v-sheet {
  background: var(--bg-1);
  width: 100%; max-height: 88vh; overflow: auto;
  padding: 18px 18px 24px;
  box-shadow: 0 -12px 40px rgba(28,32,40,0.25);
  animation: naraSlideUp 280ms var(--ease-standard);
}
.nara-v-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.nara-v-sheet-close {
  background: transparent; border: 0; cursor: pointer; color: var(--fg-2);
  padding: 4px;
}
@keyframes naraFadeIn { from { opacity: 0 } to { opacity: 1 } }
@keyframes naraSlideUp { from { transform: translateY(24px) } to { transform: translateY(0) } }

/* ---------- Sticky actions (back/continue) ---------- */
.nara-v-stickybar-wrap {
  position: sticky; bottom: 0; z-index: 5;
  margin-left: -36px; margin-right: -36px;
  padding-left: 36px; padding-right: 36px;
  background: linear-gradient(180deg, rgba(253,246,235,0) 0%, var(--bg-1) 24%);
  padding-top: 20px; padding-bottom: 16px; margin-top: 8px;
}
.nara-v-stickybar {
  background: var(--bg-card);
  border: 1px solid rgba(74,50,39,0.08);
  box-shadow: var(--shadow-md);
  padding: 14px 20px;
  display: flex; align-items: center; gap: 16px;
}
.nara-v-stickybar-hint { flex: 1; font-size: 12px; color: var(--fg-3); display: flex; align-items: center; gap: 8px; }
.nara-v-stickybar-hint.warn { color: var(--nara-critical); }

.nara-v-stickybar-mobile-wrap {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--bg-1);
  border-top: 1px solid var(--border-1);
  padding-bottom: env(safe-area-inset-bottom, 0);
  box-shadow: 0 -8px 24px rgba(28,32,40,0.08);
}
.nara-v-stickybar-mobile-row {
  width: 100%; background: transparent; border: 0;
  border-bottom: 1px solid var(--border-1);
  padding: 12px 18px;
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; text-align: left;
}
.nara-v-stickybar-mobile-actions {
  display: flex; gap: 10px;
  padding: 12px 18px 14px;
  align-items: stretch;
}
.nara-v-stickybar-mobile-back {
  flex: 0 0 auto; min-width: 56px; min-height: 52px;
  background: transparent; border: 1px solid var(--border-2); color: var(--fg-1);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background 160ms var(--ease-standard);
}
@media (hover: hover) {
  .nara-v-stickybar-mobile-back:hover { background: var(--bg-2); }
}
/* The generic reset `.nara-v button:not([class*="nara-v-btn-"])` (0,2,1)
   forces color:inherit and font:inherit onto these bar buttons (they carry
   no nara-v-btn- class), which hides the ink-filled next button's label
   (ink text on ink fill) and drops its type scale. A 0,3,0 descendant
   selector restores the intended fill, label color and type, mirroring the
   reset-beating pattern used for the addon-card pill below. */
.nara-v-stickybar-mobile-wrap .nara-v-stickybar-mobile-actions .nara-v-stickybar-mobile-next {
  flex: 1; min-height: 52px;
  background: var(--nara-ink); color: var(--fg-on-dark); border: 0;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-sans); font-size: 13px; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: background 200ms var(--ease-standard);
}
.nara-v-stickybar-mobile-wrap .nara-v-stickybar-mobile-actions .nara-v-stickybar-mobile-next:disabled {
  background: var(--bg-2);
  color: var(--fg-2);
  border: 1px solid var(--border-2);
  cursor: not-allowed;
}

/* ---------- Calendar ---------- */
.nara-v-cal-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;
}
.nara-v-cal-nav {
  width: 34px; height: 34px;
  border: 1px solid var(--border-2); background: transparent; cursor: pointer; color: var(--fg-1);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background 160ms var(--ease-standard), border-color 160ms var(--ease-standard);
}
@media (hover: hover) {
  .nara-v-cal-nav:hover { background: var(--bg-2); border-color: var(--nara-ink); }
}
/* Positioned so the shared loading overlay can cover the months while an
   availability fetch is in flight. */
.nara-v-cal-months { position: relative; }
.nara-v-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.nara-v-cal-cell {
  position: relative;
  border: 0; background: transparent;
  font-family: var(--font-sans); font-size: 14px; font-variant-numeric: tabular-nums;
  cursor: pointer;
  color: var(--fg-1);
  border-bottom: 1.5px solid transparent;
  outline: none;
  transition: background 140ms var(--ease-standard), color 140ms var(--ease-standard);
}
@media (hover: hover) {
  .nara-v-cal-cell:not(:disabled):not(.selected):hover { background: var(--bg-2); }
}
.nara-v .nara-v-cal-cell.selected { background: var(--nara-bronze); color: #fff; }
.nara-v-cal-cell.today:not(.selected) { border-bottom-color: var(--nara-bronze); }
.nara-v-cal-cell:disabled { color: var(--fg-muted); cursor: not-allowed; }
.nara-v-cal-cell.unavailable { text-decoration: line-through; text-decoration-color: var(--fg-muted); }
.nara-v-cal-dot {
  position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px;
}

/* ---------- Loading overlay (shared) ---------- */
/* pointer-events stay off so the overlay never swallows a click or a tab
   stop: the controls underneath are disabled while it is on screen. */
.nara-v-loading-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: rgba(253,246,235,0.78);
  pointer-events: none;
}
.nara-v-loading-mark { display: block; }
.nara-v-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; border: 0;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Step 1 destination tabs + cards ---------- */
.nara-v-tabs {
  display: flex; gap: 0; margin-bottom: 28px;
  border: 1px solid var(--border-1); border-radius: 4px; overflow: hidden;
}
.nara-v-tab {
  flex: 1; padding: 14px 0;
  background: transparent; border: 0;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  font-family: var(--font-sans); font-size: 12px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--fg-3); cursor: pointer;
  transition: all 200ms var(--ease-standard);
}
@media (hover: hover) {
  .nara-v-tab:hover { color: var(--fg-2); }
}
.nara-v-tab-bar .nara-v-tab.active { border-bottom-color: var(--nara-ink); color: var(--fg-1); }

.nara-v-tabs .nara-v-tab {
  border-bottom: 2px solid transparent;
  border-right: 1px solid var(--border-1);
  margin-bottom: 0;
}
.nara-v-tabs .nara-v-tab:last-child { border-right: 0; }
.nara-v-tabs .nara-v-tab.active {
  background: var(--nara-ink);
  color: var(--fg-on-dark, #fff);
  border-bottom-color: transparent;
}
@media (hover: hover) {
  .nara-v-tabs .nara-v-tab:not(.active):hover { background: rgba(74, 50, 39, 0.06); color: var(--fg-1); }
}

/* Mobile category tab bar. The section labels (Transport, Lounge, Stage row,
   Adventurous touch, Celebrate an occasion) are wider than a phone viewport,
   so scroll the row horizontally instead of overflowing the page. Tabs keep
   their natural width (flex:none, set inline) so they never squash. The
   scrollbar is hidden; the partially-clipped next tab hints scrollability. */
.nara-v-tab-bar {
  display: flex;
  flex-wrap: nowrap;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--border-1);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.nara-v-tab-bar::-webkit-scrollbar { display: none; }

.nara-v-venue-grid { display: grid; gap: 16px; margin-top: 24px; }
.nara-v-venue-card {
  position: relative; text-align: left; padding: 0;
  display: flex; flex-direction: column;
  background: var(--bg-card);
  border: 1px solid rgba(74,50,39,0.08);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: border-color 200ms var(--ease-standard), box-shadow 200ms var(--ease-standard);
  overflow: hidden;
  font-family: inherit; color: inherit;
}
.nara-v-venue-card.selected {
  border-color: var(--nara-ink);
  box-shadow: var(--shadow-md);
}
@media (hover: hover) {
  .nara-v-venue-card:not(.selected):hover {
    box-shadow: var(--shadow-sm); border-color: var(--border-2);
  }
}
.nara-v-venue-card-img-wrap {
  position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--bg-3);
  flex: 0 0 auto;
}
.nara-v-venue-card-img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 820ms var(--ease-standard);
}
.nara-v-venue-card.selected .nara-v-venue-card-img { transform: scale(1.03); }
@media (hover: hover) {
  .nara-v-venue-card:hover .nara-v-venue-card-img { transform: scale(1.03); }
}
.nara-v-venue-card-grad {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(42,36,32,0.55) 100%);
}
.nara-v-venue-card-region {
  position: absolute; left: 14px; top: 12px;
}
.nara-v-venue-card-check {
  position: absolute; right: 12px; top: 12px;
  width: 28px; height: 28px;
  background: var(--nara-ink); color: var(--fg-on-dark);
  display: flex; align-items: center; justify-content: center;
}
.nara-v-venue-card-body {
  padding: 16px 18px 18px;
  flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: center;
}
.nara-v-venue-card-name {
  font-family: var(--font-display); font-size: 20px; line-height: 1.2;
  margin-bottom: 6px; color: var(--fg-1);
}
.nara-v-venue-card-blurb { font-size: 13px; color: var(--fg-2); line-height: 1.55; }
.nara-v-venue-card.is-coming-soon { cursor: default; }
.nara-v-venue-card.is-coming-soon .nara-v-venue-card-img { filter: grayscale(0.35); opacity: 0.92; }
.nara-v-venue-card-soon {
  position: absolute; right: 12px; top: 12px;
  background: var(--nara-ink); color: var(--fg-on-dark);
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 10px;
}

/* ---------- Step 2 / 3 cards (shared selectable card patterns) ---------- */
.nara-v-pkg-card, .nara-v-upgrade-card {
  background: var(--bg-card);
  border: 1px solid rgba(74,50,39,0.08);
  cursor: pointer; text-align: left; padding: 0; width: 100%;
  overflow: hidden; position: relative;
  font-family: inherit; color: inherit;
  box-shadow: var(--shadow-xs);
  transition: border-color 220ms var(--ease-standard), box-shadow 220ms var(--ease-standard);
  display: flex; flex-direction: column;
}
.nara-v-pkg-card.editorial {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
}
@media (max-width: 720px) {
  .nara-v-pkg-card.editorial { grid-template-columns: 1fr; }
}
.nara-v-pkg-card.selected, .nara-v-upgrade-card.selected {
  border-color: var(--nara-ink); box-shadow: var(--shadow-md);
}
@media (hover: hover) {
  .nara-v-pkg-card:not(.selected):hover, .nara-v-upgrade-card:not(.selected):hover {
    box-shadow: var(--shadow-sm);
  }
}
.nara-v-card-img-wrap {
  position: relative; overflow: hidden; background: var(--bg-3);
}
.nara-v-card-img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 820ms var(--ease-standard);
}
.nara-v-pkg-card.selected .nara-v-card-img { transform: scale(1.04); }
@media (hover: hover) {
  .nara-v-pkg-card:hover .nara-v-card-img { transform: scale(1.04); }
}
.nara-v-pkg-card.is-unavailable { opacity: 0.5; pointer-events: none; filter: grayscale(0.4); }
.nara-v-pkg-unavail { margin-top: 8px; font-size: 12px; color: var(--fg-muted); letter-spacing: 0.02em; }
.nara-v-venue-conflict { margin: 0 0 16px; padding: 12px 16px; border: 1px solid var(--nara-bronze); border-radius: 8px; background: rgba(183,140,77,0.08); font-size: 13px; color: var(--fg-1); }
.nara-v-review-date-warning {
  display: flex; flex-direction: column; gap: 10px; align-items: flex-start;
  margin: 0 0 20px; padding: 14px 16px;
  border: 1px solid var(--nara-bronze); border-radius: 8px;
  background: rgba(183,140,77,0.08);
  font-size: 13px; color: var(--fg-1);
}
.nara-v-section-alert {
  background: var(--nara-bone);
  border-left: 3px solid var(--nara-terracotta);
  padding: 10px 14px;
  margin-bottom: 12px;
  font-size: 13px;
  color: var(--nara-ink);
  grid-column: 1 / -1;
}
.nara-v-card-pill {
  display: inline-block;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 2px 8px;
  border: 1px solid var(--nara-terracotta);
  color: var(--nara-bronze-deep);
  margin-left: 8px;
}
.nara-v-card-grad {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(28,74,99,0.4) 100%);
}
.nara-v-card-grad.soft {
  background: linear-gradient(180deg, transparent 55%, rgba(28,74,99,0.35) 100%);
}
.nara-v-card-corner-tag { position: absolute; left: 14px; top: 14px; }
.nara-v-card-corner-check {
  position: absolute; right: 14px; top: 14px;
  width: 32px; height: 32px;
  background: var(--nara-ink); color: var(--fg-on-dark);
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Pill-style select badge (Select / Selected) ---------- */
.nara-v-select-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: transparent; color: var(--fg-1);
  border: 1px solid var(--fg-1);
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
}
.nara-v-select-pill.sm { padding: 7px 12px; gap: 5px; font-size: 10px; font-weight: 500; }
.nara-v-select-pill.md { padding: 8px 14px; gap: 6px; font-size: 10px; font-weight: 500; }
.nara-v-select-pill.selected {
  background: var(--nara-ink); color: var(--fg-on-dark);
}

/* ---------- Step 3 anchor nav ---------- */
.nara-v-anchor-nav {
  position: sticky; top: 100px; align-self: flex-start;
  display: flex; flex-direction: column; gap: 2px;
  border-left: 1px solid var(--border-1);
}
.nara-v-anchor-nav-item {
  text-align: left; background: transparent; border: 0;
  border-left: 2px solid transparent; margin-left: -1px;
  padding: 10px 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
  color: var(--fg-3);
  transition: color 160ms var(--ease-standard), border-color 160ms var(--ease-standard);
  font-family: inherit;
}
@media (hover: hover) {
  .nara-v-anchor-nav-item:hover { color: var(--fg-2); }
}
.nara-v-anchor-nav-item.active {
  border-left-color: var(--nara-ink); color: var(--fg-1);
}
.nara-v-anchor-nav-label { font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.nara-v-anchor-nav-count {
  font-size: 10px; width: 18px; height: 18px;
  background: var(--nara-ink); color: var(--fg-on-dark);
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
}

/* ---------- Step 4 time slot button ---------- */
.nara-v-time-slot {
  padding: 14px 16px; min-height: 48px; white-space: nowrap;
  background: var(--bg-card); color: var(--fg-1);
  border: 1px solid rgba(74,50,39,0.12);
  box-shadow: var(--shadow-xs);
  font-family: var(--font-sans); font-size: 14px; font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 180ms var(--ease-standard),
              box-shadow 180ms var(--ease-standard),
              background 180ms var(--ease-standard),
              color 180ms var(--ease-standard);
}
@media (hover: hover) {
  .nara-v-time-slot:not(.selected):hover {
    border-color: var(--nara-ink); box-shadow: var(--shadow-sm);
  }
}
/* The generic reset `.nara-v button:not([class*="nara-v-btn-"])` (0,2,1) forces
   color:inherit onto this chip, hiding the selected label on the dark fill. The
   extra `.nara-v` lifts specificity to 0,3,0 so the on-dark color wins. */
.nara-v .nara-v-time-slot.selected {
  background: var(--nara-ink); color: var(--fg-on-dark);
  border-color: var(--nara-ink); box-shadow: var(--shadow-sm);
}
.nara-v-slot-area { position: relative; }
/* Loading skeleton: three of these render under the loader while the slots
   fetch is in flight, so the customer never sees the static fallback flash
   and the layout does not jump when the live list lands. */
.nara-v-time-slot.is-loading {
  cursor: wait; color: transparent; user-select: none; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(74,50,39,0.04) 0%,
    rgba(74,50,39,0.10) 50%,
    rgba(74,50,39,0.04) 100%);
  background-size: 200% 100%;
  animation: nara-v-shimmer 1.2s linear infinite;
  border-color: rgba(74,50,39,0.06);
}
@keyframes nara-v-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---------- Step 4 toggle switch ---------- */
.nara-v-toggle {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; border: 0; padding: 0;
  cursor: pointer;
}
.nara-v-toggle-track {
  width: 36px; height: 20px; border-radius: 10px;
  background: var(--border-2);
  position: relative;
  transition: background 200ms var(--ease-standard);
}
.nara-v-toggle[aria-pressed="true"] .nara-v-toggle-track { background: var(--nara-ink); }
.nara-v-toggle-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--bg-1);
  transition: left 200ms var(--ease-standard);
}
.nara-v-toggle[aria-pressed="true"] .nara-v-toggle-thumb { left: 18px; }

/* ---------- Step 5 payment method buttons ---------- */
.nara-v-pay-method {
  padding: 14px 16px;
  background: transparent; color: var(--fg-1);
  border: 1px solid var(--border-2);
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  transition: background 180ms var(--ease-standard), border-color 180ms var(--ease-standard), color 180ms var(--ease-standard);
}
@media (hover: hover) {
  .nara-v-pay-method:not(.selected):hover {
    border-color: var(--nara-ink);
  }
}
.nara-v-pay-method.selected {
  background: var(--nara-ink); color: var(--fg-on-dark); border-color: var(--nara-ink);
}

/* ---------- Summary aside ---------- */
.nara-v-summary {
  background: var(--bg-card);
  border: 1px solid rgba(74,50,39,0.08);
  box-shadow: var(--shadow-xs);
  padding: 28px 30px;
  display: flex; flex-direction: column; gap: 18px;
}
.nara-v-summary.compact { padding: 20px 22px; }
.nara-v-summary-line {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 10px 0; border-bottom: 1px dashed var(--border-1);
}
.nara-v-summary-line:last-child { border-bottom: 0; }
.nara-v-summary-line-remove {
  background: transparent; border: 0; color: var(--fg-3); cursor: pointer; padding: 2px;
  display: inline-flex;
  transition: color 140ms var(--ease-standard);
}
@media (hover: hover) {
  .nara-v-summary-line-remove:hover { color: var(--nara-critical); }
}

/* ---------- Confirmation screen ---------- */
.nara-v-confirm {
  min-height: 100%; display: flex; flex-direction: column; background: var(--bg-1);
}
.nara-v-confirm-header {
  padding: 18px 36px; border-bottom: 1px solid var(--border-1);
}
.nara-v-confirm-header.is-mobile { padding: 14px 18px; }
.nara-v-confirm-main {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 60px 24px;
}
.nara-v-confirm-card {
  max-width: 560px; text-align: center;
}

/* ---------- Splash overlay ---------- */
.nara-v-splash {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-1); z-index: 0;
  transition: opacity 320ms var(--ease-standard);
}
.nara-v-splash.hidden { opacity: 0; pointer-events: none; }

/* ---------- Cake family card (step 3 celebration section) ---------- */
.nara-v-cake-family {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-1);
  padding: 14px;
  margin-bottom: 10px;
  align-items: stretch;
}
.nara-v-cake-family.is-selected {
  border-color: var(--nara-terracotta);
  box-shadow: 0 0 0 1px var(--nara-terracotta) inset;
}
.nara-v-cake-family-img {
  width: 100%;
  height: 180px;
  background-color: var(--nara-bone);
  background-position: center;
  background-size: cover;
  flex-shrink: 0;
}
.nara-v-cake-family-name {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 4px;
}
.nara-v-cake-family-desc {
  font-size: 12px;
  color: var(--nara-ink-soft);
  margin-bottom: 8px;
  line-height: 1.5;
}
.nara-v-cake-family-sizes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.nara-v-cake-size-pill {
  background: transparent;
  border: 1px solid var(--border-1);
  padding: 10px 14px;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  gap: 4px;
  font: inherit;
  color: var(--nara-ink);
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.nara-v-cake-size-pill:hover:not(.is-on) {
  border-color: var(--nara-ink);
}
.nara-v-cake-size-pill.is-on {
  background: var(--nara-ink);
  color: var(--nara-cream);
  border-color: var(--nara-ink);
  box-shadow: 0 2px 8px -2px rgba(74, 50, 39, 0.35);
}
.nara-v-cake-size-pill.is-on .nara-v-cake-size-letter,
.nara-v-cake-size-pill.is-on .nara-v-cake-size-price {
  color: var(--nara-cream);
}
.nara-v-cake-size-letter {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.02em;
}
.nara-v-cake-size-price {
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.78;
}
.nara-v-cake-size-pill.is-on .nara-v-cake-size-price {
  opacity: 0.92;
}

/* Variant pills for curated addon groups (Dune Buggy 2/4 seater x 1/2 hour,
   Dune Bashing). Mirrors the cake-size pill rhythm so the visual language
   stays consistent between the celebration and adventure sections. */
.nara-v-addon-card.is-group { cursor: default; }
.nara-v-addon-card-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.nara-v-addon-card-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--border-1, #e5e0d6);
  background: transparent;
  cursor: pointer;
  font: inherit;
  color: var(--nara-ink, #1c1816);
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.nara-v-addon-card-pill:hover:not(.is-on) {
  border-color: var(--nara-ink, #1c1816);
}
.nara-v-addon-card-pill.is-on {
  background: var(--nara-ink, #1c1816);
  color: var(--nara-cream, #fdf6eb);
  border-color: var(--nara-ink, #1c1816);
  box-shadow: 0 2px 8px -2px rgba(74, 50, 39, 0.35);
}
/* The generic `.nara-v button:not([class*="nara-v-btn-"])` reset (specificity
   0,2,1) outweighs the pill.is-on rule (0,2,0) and forces color:inherit back
   to ink. Explicit child selectors (0,3,0) beat the reset, mirroring the
   cake-size-pill pattern. */
.nara-v-addon-card-pill.is-on .nara-v-addon-card-pill-label,
.nara-v-addon-card-pill.is-on .nara-v-addon-card-pill-price {
  color: var(--nara-cream, #fdf6eb);
}
.nara-v-addon-card-pill-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.nara-v-addon-card-pill-price {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.78;
}
.nara-v-addon-card-pill.is-on .nara-v-addon-card-pill-price {
  opacity: 0.92;
}
@media (max-width: 640px) {
  .nara-v-addon-card-pills {
    flex-direction: column;
    align-items: stretch;
  }
  .nara-v-addon-card-pill {
    justify-content: space-between;
  }
}

@media (max-width: 540px) {
  .nara-v-cake-family-img {
    height: 160px;
  }
}

/* Addon vertical card: shared by transport, seating, seatingRow, adventure.
 * Cards live inside a grid (align-items: stretch by default) so every
 * card in a row matches the tallest sibling's height. height: 100% lets
 * the card fill that allocated cell, and body: flex 1 + cta/pills margin-top:
 * auto pushes the action row to the bottom so text-only cards no longer
 * leave a blank lower half. */
/* padding and text-align are UA <button> defaults (Chrome ships
   `padding: 1px 6px`) leaking through the reset at the top of this file, which
   only restores font and color. Left unset they inset the image by 6px on each
   side, which is the white gap that never appeared on the cake cards: those
   are <div>. */
.nara-v-addon-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  height: 100%;
  padding: 0;
  text-align: left;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-1, #e5e0d6);
  border-radius: 10px;
  overflow: hidden;
  transition: border-color 160ms ease, box-shadow 160ms ease;
  cursor: pointer;
}
/* One ring, on the card. The image used to draw a second one inside this via
   an ::after inset shadow, which read as two concentric terracotta rectangles
   with a sliver of card between them. */
.nara-v-addon-card.is-selected {
  border-color: var(--nara-terracotta);
  background: rgba(174, 108, 74, 0.06);
  box-shadow: 0 0 0 1px var(--nara-terracotta), 0 12px 28px -12px rgba(174,108,74,0.45);
}
.nara-v-addon-card.is-disabled { opacity: 0.55; pointer-events: none; }
/* Text-only options (Self drive, No lounge, No celebration, etc.) keep the same
   height as the image cards in their row; their sparse content is centred with
   even spacing so the card reads balanced instead of leaving a hollow middle. */
.nara-v-addon-card.is-text-only .nara-v-addon-card-body { justify-content: center; gap: 14px; padding: 20px 16px; }
.nara-v-addon-card.is-text-only .nara-v-addon-card-cta { margin-top: 0; }

.nara-v-addon-card-img       { width: 100%; aspect-ratio: 16 / 9; background: #f3eee5; overflow: hidden; flex: 0 0 auto; }
.nara-v-addon-card-img img   { width: 100%; height: 100%; object-fit: cover; display: block; }

.nara-v-addon-card-body      { flex: 1 1 auto; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; }
.nara-v-addon-card-title     { font-family: var(--font-sans); font-size: 17px; font-weight: 600; color: var(--fg-1, #1c1816); line-height: 1.25; }
.nara-v-addon-card-subtitle  { font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--fg-muted, #8c8278); }
.nara-v-addon-card-desc      { font-size: 13px; line-height: 1.5; color: var(--fg-2, #4a4138); }
.nara-v-addon-card-cta       { margin-top: auto; padding-top: 4px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.nara-v-addon-card-price     { font-size: 14px; font-weight: 600; color: var(--fg-1, #1c1816); }
.nara-v-addon-card-price-wrap { display: flex; flex-direction: column; gap: 2px; }
.nara-v-addon-card-price-note { font-size: 11px; color: var(--fg-3, #8c8278); }
.nara-v-addon-card.is-group .nara-v-addon-card-pills { margin-top: auto; padding-top: 4px; }

@media (max-width: 640px) {
  .nara-v-addon-card-img   { aspect-ratio: 3 / 2; }
  .nara-v-addon-card-body  { padding: 12px 14px 14px; }
  .nara-v-addon-card-title { font-size: 16px; }
}

/* ---------- Addon sub-groups (transport: shared vs private) ---------- */
/* Only the transport section carries these. A shared per-person seat and a
   private car are sold on different terms, so each block states its own terms
   under its own cards rather than leaving the guest to infer them. */
.nara-v-addon-group + .nara-v-addon-group { margin-top: 26px; }
.nara-v-addon-group-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--fg-2, #4a4138);
}
.nara-v-addon-group-intro {
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-3, #8c8278);
}
.nara-v-addon-group-label + .nara-v-addon-grid,
.nara-v-addon-group-intro + .nara-v-addon-grid { margin-top: 12px; }
.nara-v-addon-group-notes {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: 12px;
  line-height: 1.6;
  color: var(--fg-3, #8c8278);
}
.nara-v-addon-group-notes li { padding-left: 14px; position: relative; }
.nara-v-addon-group-notes li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--nara-terracotta);
  opacity: 0.55;
}

/* ---------- Pick-up & drop-off toggle on adventure cards ---------- */
.nara-v-pickup-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-1, #e5e0d6);
}
.nara-v-pickup-toggle-label {
  font-size: 12px;
  color: var(--fg-2, #4a4138);
  line-height: 1.4;
  cursor: pointer;
  user-select: none;
}
/* Accessible toggle switch */
.nara-v-pickup-switch {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 20px;
  flex-shrink: 0;
}
.nara-v-pickup-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.nara-v-pickup-switch-track {
  position: absolute;
  inset: 0;
  background: var(--border-2, #c8bfb5);
  border-radius: 20px;
  transition: background 160ms ease;
  cursor: pointer;
}
.nara-v-pickup-switch-track::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 160ms ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.nara-v-pickup-switch input:checked + .nara-v-pickup-switch-track {
  background: var(--fg-brand, #b78c4d);
}
.nara-v-pickup-switch input:checked + .nara-v-pickup-switch-track::before {
  transform: translateX(14px);
}
.nara-v-pickup-switch input:focus-visible + .nara-v-pickup-switch-track {
  outline: 2px solid var(--fg-brand, #b78c4d);
  outline-offset: 2px;
}
/* Address input that appears below the card when toggle is on */
.nara-v-pickup-address-wrap {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--bg-1, #faf8f4);
  border: 1px solid var(--border-1, #e5e0d6);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.nara-v-pickup-address-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3, #9e9690);
}
.nara-v-pickup-address-input {
  width: 100%;
  border: 1px solid var(--border-1, #e5e0d6);
  border-radius: 6px;
  padding: 8px 10px;
  font-size: 13px;
  color: var(--fg-1, #1c1816);
  background: #fff;
  outline: none;
  transition: border-color 160ms ease;
}
.nara-v-pickup-address-input:focus {
  border-color: var(--fg-brand, #b78c4d);
}
.nara-v-pickup-address-input::placeholder {
  color: var(--fg-4, #bab5af);
}
.nara-v-pickup-price-with {
  font-size: 12px;
  color: var(--fg-brand, #b78c4d);
  font-weight: 600;
  margin-top: 2px;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .nara-v-main-grid { grid-template-columns: 1fr; }
  .nara-v-step1-grid { grid-template-columns: 1fr !important; }
  .nara-v-step1-contact-grid { grid-template-columns: 1fr !important; }
  .nara-v-pkg-grid { grid-template-columns: 1fr !important; }
  .nara-v-upgrade-grid { grid-template-columns: 1fr !important; }
  .nara-v-two-col { grid-template-columns: 1fr !important; }
  .nara-v-three-col { grid-template-columns: 1fr !important; }
  .nara-v-rail { position: static; }
}

/* Mobile (below isMobile breakpoint): tighter chrome */
@media (max-width: 780px) {
  .nara-v-main { padding: 24px 18px 40px; }
  .nara-v-stickybar-wrap { margin-left: -18px; margin-right: -18px; padding-left: 18px; padding-right: 18px; }
  .nara-v-anchor-nav { display: none; }
  /* Clear the fixed mobile sticky bar (total row + actions, ~140px incl.
     safe-area). Matches the JS isMobile breakpoint (NARA_MOBILE_BREAKPOINT
     780) so the bar and this padding appear together. Steps 1-4 use the
     fixed bar; step5 has its own inline action row and needs no offset. */
  .nara-v-step1,
  .nara-v-step2,
  .nara-v-step3,
  .nara-v-step4 { padding-bottom: 140px; }
}

/* ---------- Leave-booking confirm sheet ---------- */
.nara-v-leave-sheet {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(74,50,39,0.45);
    display: flex; align-items: flex-end; justify-content: center;
    animation: nara-v-sheet-in 200ms ease-out;
}
.nara-v-leave-sheet-card {
    background: #fff;
    max-width: 480px;
    width: 100%;
    padding: 24px;
    border-top: 4px solid var(--nara-terracotta);
}
.nara-v-leave-sheet-card h3 {
    font-family: var(--font-display);
    font-weight: 400;
    margin: 0 0 8px;
    font-size: 22px;
    color: var(--nara-ink);
}
.nara-v-leave-sheet-card p {
    font-size: 14px;
    color: var(--nara-ink-soft);
    margin: 0 0 16px;
}
.nara-v-leave-sheet-actions {
    display: flex; gap: 10px;
}
.nara-v-leave-sheet-actions button {
    flex: 1;
}
@keyframes nara-v-sheet-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (min-width: 768px) {
    .nara-v-leave-sheet { align-items: center; }
    .nara-v-leave-sheet-card { border: 1px solid var(--border-1); }
}

/* ---------- Responsive visibility helpers ---------- */
.nara-v-mobile-only  { display: none; }
.nara-v-desktop-only { display: block; }

@media (max-width: 768px) {
    .nara-v-mobile-only  { display: block; }
    .nara-v-desktop-only { display: none; }
}

/* ---------- Card brand marks (Secure payment section) ---------- */
.nara-v-card-brand {
    display: inline-flex;
    align-items: center;
    height: 22px;
    padding: 2px 6px;
    background: #fff;
    border: 1px solid rgba(74, 50, 39, 0.22);
    border-radius: 3px;
}
.nara-v-card-brand svg { height: 100%; width: auto; display: block; }