/* ============================================================
   rentie-ui.css — "Warm Parchment / Soft Tactile" component layer.

   THE RULE SET, taken from the Stitch home-search reference:

     Shape      generous and soft. Cards 24px, nested surfaces 16px,
                small controls 12px, buttons + chips FULL PILL.
     Depth      soft, low-opacity, warm-tinted shadows. Three levels.
                No hard offsets, no ink outlines as structure.
     Borders    hairlines only, and only where a shadow can't carry
                the separation (e.g. an underlined field row).
     Press      scale(0.96) — tactile, never below 0.95.

   Loaded LAST on the customer funnel pages, after each page's inline
   <style>. `!important` on radius/shadow is deliberate: the pages
   carry inline `border-radius:` declarations, and a stylesheet
   !important is the only thing that outranks an inline style.

   Colour lives in rentie-tokens.css. This file never sets a hex.
   ============================================================ */

/* ── 1. PAGE ─────────────────────────────────────────────── */
#app {
  background: var(--parchment);
  color: var(--ink);
}

/* ── 2. TYPE ─────────────────────────────────────────────── */
#app h1, #app .hero-title { font-weight: 800; letter-spacing: -0.02em; }
#app h2, #app h3, #app .section-h, #app .v-name, #app .shop-name { font-weight: 800; }
/* label-bold: the small ALL-CAPS label above a field or on a stamp. */
#app .field-label, #app .ticket-label, #app .bb-label,
#app .results-label, #app .dp-col label, #app .v-price .unit, #app .stub-grid .k {
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--tertiary);
}
#app .tnum, #app .lr-countdown, #app .v-price .amt,
#app .price .amt, #app .bb-price { font-variant-numeric: tabular-nums; }

/* ── 3. SURFACES ─────────────────────────────────────────── */
/* Level 1 — cards resting on the parchment. */
#app .nb-card, #app .v-card, #app .shop-card, #app .bike-card,
#app .search-card, #app .offer, #app .bk-card, #app .lr-card,
#app .notice, #app .ticket {
  background: var(--surface);
  border: none;
  border-radius: var(--r-card) !important;
  box-shadow: var(--elev-1) !important;
  overflow: hidden;
}
/* Level 2 — sheets and modals that float above content. */
#app .modal-sheet {
  background: var(--surface);
  border: none;
  border-radius: var(--r-sheet) !important;
  box-shadow: var(--elev-2) !important;
}
/* Level 0 — inset wells. Tonal shift instead of a border. */
#app .summary-box, #app .tnc-box, #app .state, #app .tk-stub, #app .tk-deadline {
  background: var(--surface-2);
  border: none;
  border-radius: var(--r-nested) !important;
  box-shadow: none !important;
}
/* Media panels inside a card sit on the faintest tint. */
#app .v-img, #app .shop-banner, #app .bike-img-wrap {
  background: var(--surface-3);
  border: none;
  border-radius: 0 !important;   /* clipped by the parent card's radius */
}

/* ── 4. BUTTONS — full pill, soft shadow, scale on press ─── */
#app .btn-primary, #app .btn-book, #app .btn-search, #app .btn-retry,
#app .bb-btn, #app .btn-more, #app .btn-outline, #app .model-pill,
#app .icon-btn, #app .ctx-change, #app .filter-chip, #app .chip {
  border-radius: 999px !important;
  transition: transform .14s cubic-bezier(.2,0,0,1), box-shadow .18s, background-color .18s;
}
/* Primary action */
#app .btn-primary, #app .btn-book, #app .btn-search,
#app .btn-retry, #app .bb-btn, #app .model-pill {
  background: var(--crimson);
  color: var(--on-primary);
  border: none;
  box-shadow: var(--elev-1) !important;
  font-weight: 800;
  letter-spacing: 0.03em;
}
#app .btn-primary:hover, #app .btn-book:hover,
#app .btn-search:hover, #app .bb-btn:hover {
  background: var(--crimson-2);
  box-shadow: var(--elev-2) !important;
}
/* Secondary action — tonal, not outlined */
#app .btn-outline, #app .btn-more, #app .icon-btn, #app .ctx-change {
  background: var(--surface-3);
  color: var(--ink);
  border: none;
  box-shadow: none !important;
  font-weight: 700;
}
#app .btn-outline:hover, #app .btn-more:hover, #app .icon-btn:hover {
  background: var(--surface-4);
}
/* Tactile press. 0.96 — anything below 0.95 reads as exaggerated. */
#app .press:active,
#app .btn-primary:active, #app .btn-book:active, #app .btn-search:active,
#app .btn-retry:active, #app .bb-btn:active, #app .btn-more:active,
#app .btn-outline:active, #app .icon-btn:active, #app .model-pill:active,
#app .filter-chip:active {
  transform: scale(.96);
}
#app button:disabled, #app .btn-na {
  background: var(--surface-4);
  color: var(--muted);
  border: none;
  box-shadow: none !important;
}

/* ── 5. CHIPS, TAGS, STAMPS — fully pill-shaped ──────────── */
#app .tag, #app .stamp, #app .spec, #app .meta-chip, #app .badge {
  border-radius: 999px !important;
  border: none;
  background: var(--surface-3);
  color: var(--tertiary);
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: none !important;
}
#app .tag-sponsored { background: var(--crimson); color: var(--on-primary); }
#app .tag-featured  { background: var(--surface); color: var(--crimson); }
#app .stamp         { background: var(--surface); box-shadow: var(--elev-1) !important; }
#app .stamp.avail   { color: var(--success); }
#app .stamp.soon    { color: var(--warning); }
#app .stamp.booked  { background: var(--surface-3); color: var(--muted); }
/* Filter chips read as pressable: surface fill + hairline shadow. */
#app .filter-chip {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--elev-0) !important;
  font-weight: 700;
}
#app .filter-chip.active {
  background: var(--crimson);
  color: var(--on-primary);
  box-shadow: var(--elev-1) !important;
}

/* ── 6. INPUTS ───────────────────────────────────────────── */
#app input, #app select, #app textarea, #app .input-field, #app .rz-dt {
  background: var(--surface-2);
  border: 1px solid transparent !important;
  border-radius: var(--r-input) !important;
  color: var(--ink);
  font-family: inherit;
  box-shadow: none !important;
  transition: border-color .18s, box-shadow .18s;
}
#app input:focus, #app select:focus, #app textarea:focus, #app .input-field:focus {
  outline: none;
  border-color: var(--crimson) !important;
  box-shadow: var(--elev-1) !important;
}
#app input::placeholder, #app textarea::placeholder { color: var(--muted); }

/* The shared date/time picker (rentie-datetime.css) ships its own shapes —
   bring them into this language rather than letting the funnel show two
   different geometries side by side in the same search card. */
#app .rz-dt-trigger {
  background: var(--surface-2);
  border: 1px solid transparent;
  border-radius: var(--r-input) !important;
  color: var(--ink);
}
#app .rz-dt-trigger:focus { border-color: var(--crimson); box-shadow: var(--elev-1) !important; }
.rz-dt-sheet { border-radius: var(--r-sheet) var(--r-sheet) 0 0 !important; box-shadow: var(--elev-2) !important; }
.rz-dt-cell, .rz-dt-day, .rz-dt-ampm, .rz-dt-done, .rz-dt-x, .rz-dt-nav {
  border-radius: var(--r-pill) !important;
}

/* ── 7. LISTS + DIVIDERS — faint, never hard rules ───────── */
#app .list-row, #app .ticket-row, #app .summary-row + .summary-row {
  border-bottom: 1px solid var(--divider-soft);
}
#app .list-row:last-child, #app .ticket-row:last-child { border-bottom: none; }

/* ── 8. TICKET STUB ──────────────────────────────────────── */
/* The perforation stays — it's the one motif that reads as a ticket,
   and a dashed hairline is soft enough to live in this language. */
.nb-perf, #app .perf-line {
  border: none;
  border-top: 1px dashed var(--divider-soft);
  margin: 0;
  height: 0;
}
.nb-notch-row { position: relative; display: flex; align-items: center; }
#app .nb-notch-row .nb-notch,
.nb-notch-row .nb-notch {
  position: absolute; width: 20px; height: 20px;
  background: var(--parchment);
  border: none;
  border-radius: 999px !important;
}
#app .nb-notch-row .nb-notch.left,
.nb-notch-row .nb-notch.left  { left: -10px; }
#app .nb-notch-row .nb-notch.right,
.nb-notch-row .nb-notch.right { right: -10px; }

/* ── 9. MOTION ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #app *, #app *::before, #app *::after {
    transition: none !important; animation: none !important;
  }
}