/* ==========================================================================
   CROWN RIDES — BOOKING WIZARD
   Loaded only by /booking. Keeps this weight off every other page.
   ========================================================================== */

.lhero--tight { padding-bottom: var(--s-6); }
.section--tight { padding-top: var(--s-7); }

/* ==========================================================================
   1. PROGRESS
   ========================================================================== */

.wizard__step.is-done { color: var(--text); }
.wizard__step.is-done .wizard__num {
  background: var(--c-gold-champagne);
  border-color: var(--c-gold);
  color: var(--c-gold-deep);
  cursor: pointer;
}
.wizard__step.is-done:hover .wizard__num { background: var(--c-gold); color: var(--c-black); }

.wizard__bar {
  height: 2px;
  margin: calc(var(--s-7) * -1) 0 var(--s-7);
  background: var(--border);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.wizard__fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--c-gold);
  transition: width var(--d-base) var(--e-out);
}

.js .bstep.is-active { animation: bstep-in var(--d-base) var(--e-out); }
@keyframes bstep-in { from { opacity: 0; transform: translateY(10px); } }

/* ==========================================================================
   2. FIELD STATES
   ========================================================================== */

.field__help { font-size: var(--fs-xs); color: var(--text-muted); }
.field__opt {
  color: var(--text-muted);
  font-weight: var(--fw-regular);
  text-transform: none;
  letter-spacing: 0;
}

.field__error {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--fs-xs);
  color: var(--c-error);
}
.field__error::before {
  content: "!";
  display: grid;
  place-items: center;
  width: 15px; height: 15px;
  flex: none;
  border-radius: 50%;
  background: var(--c-error);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
}

.field__control.is-invalid { border-color: var(--c-error); }
.field__control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.18); }

/* ==========================================================================
   3. ROUTE + SWAP
   ========================================================================== */

.route { position: relative; display: flex; flex-direction: column; gap: var(--s-5); }

.route__swap {
  position: absolute;
  top: calc(50% - 18px);
  right: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 1px solid var(--border-strong);
  border-radius: 50%;
  background: var(--bg-raised);
  color: var(--text);
  transition: transform var(--d-base) var(--e-out), border-color var(--d-fast) var(--e-ui);
}
.route__swap svg { width: 16px; height: 16px; }
.route__swap:hover { border-color: var(--c-gold); color: var(--c-gold-deep); }
.route__swap.is-spun { transform: rotate(180deg); }

/* ==========================================================================
   4. ADDRESS AUTOCOMPLETE
   ========================================================================== */

.ac { position: relative; }
.ac__wrap { position: relative; display: flex; align-items: center; }

.ac__pin {
  position: absolute;
  left: var(--s-4);
  display: grid;
  place-items: center;
  color: var(--text-accent);
  pointer-events: none;
}
.ac__pin svg { width: 17px; height: 17px; }

.ac__input {
  padding-left: calc(var(--s-4) + 17px + var(--s-3));
  padding-right: var(--s-7);
}

.ac__clear {
  position: absolute;
  right: var(--s-3);
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  color: var(--text-muted);
  transition: background-color var(--d-fast) var(--e-ui), color var(--d-fast) var(--e-ui);
}
.ac__clear:hover { background: var(--c-n-100); color: var(--text); }
.ac__clear svg { width: 13px; height: 13px; }

/* "Use my current location". Sits left of the clear button, so the two never
   collide when a value is present; the input reserves room for both via
   .ac__input--geo. */
.ac__geo {
  position: absolute;
  right: calc(var(--s-3) + 30px);
  display: grid;
  place-items: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  color: var(--text-muted);
  transition: background-color var(--d-fast) var(--e-ui), color var(--d-fast) var(--e-ui);
}
.ac__geo:hover:not(:disabled) { background: var(--c-n-100); color: var(--c-gold); }
.ac__geo:disabled { opacity: .55; cursor: default; }
.ac__geo svg { width: 17px; height: 17px; }

/* Spinning while we wait on the browser + the geocoder. Motion is the only
   feedback here — the permission prompt is drawn by the browser, outside the
   page, and on a second visit it may not appear at all. */
.ac__geo.is-busy svg { animation: ac-geo-spin 1.1s linear infinite; }
@keyframes ac-geo-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .ac__geo.is-busy svg { animation: none; opacity: .5; }
}

.ac__input--geo { padding-right: calc(var(--s-3) + 66px); }

.ac__list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0; right: 0;
  z-index: var(--z-overlay);
  max-height: 310px;
  overflow-y: auto;
  padding: var(--s-2);
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
}
.ac__opt {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-md);
  cursor: pointer;
}
.ac__opt.is-active,
.ac__opt:hover { background: var(--c-gold-champagne); }
.ac__opt-icon {
  color: var(--c-gold-deep);
  font-size: 14px;
  flex: none;
  width: 18px;
  text-align: center;
}
.ac__opt-text { display: flex; flex-direction: column; min-width: 0; }
.ac__opt-text strong { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.ac__opt-text small { font-size: var(--fs-xs); color: var(--text-muted); }

/* ==========================================================================
   5. CHIPS
   ========================================================================== */

.chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
}
.chips__label {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: var(--s-2);
}
.chip {
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  transition: border-color var(--d-fast) var(--e-ui),
              background-color var(--d-fast) var(--e-ui),
              color var(--d-fast) var(--e-ui);
}
.chip:hover {
  border-color: var(--c-gold);
  background: var(--c-gold-champagne);
  color: var(--c-gold-deep);
}

/* ==========================================================================
   6. INLINE NOTICE — the 2-hour rule, explained not enforced silently
   ========================================================================== */

.notice {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding: var(--s-4) var(--s-5);
  border: 1px solid var(--border);
  border-left: 2px solid var(--c-gold);
  border-radius: var(--r-md);
  background: var(--bg-subtle);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  text-align: left;
}
.notice svg { width: 17px; height: 17px; color: var(--text-accent); flex: none; }
.notice--warn {
  border-left-color: var(--c-error);
  background: rgba(179, 38, 30, 0.05);
  color: var(--text);
  cursor: pointer;
}
.notice--warn svg { color: var(--c-error); }

/* ==========================================================================
   7. VEHICLE PICKER
   ========================================================================== */

.vpick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--s-4);
}
.vpick__item { cursor: pointer; }
.vpick__radio { position: absolute; opacity: 0; pointer-events: none; }

.vpick__card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--d-fast) var(--e-ui),
              box-shadow var(--d-base) var(--e-out),
              transform var(--d-base) var(--e-out);
}
.vpick__item:hover .vpick__card { transform: translateY(-3px); box-shadow: var(--sh-md); }
.vpick__radio:checked + .vpick__card {
  border-color: var(--c-gold);
  box-shadow: 0 0 0 2px var(--c-gold), var(--sh-md);
}
.vpick__radio:focus-visible + .vpick__card { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

.vpick__media {
  aspect-ratio: 16 / 10;
  background: radial-gradient(110% 90% at 50% 90%, var(--c-gold-champagne) 0%, var(--c-n-050) 60%, var(--c-white) 100%);
}
.vpick__media img { width: 100%; height: 100%; object-fit: contain; padding: var(--s-3); }

.vpick__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s-4);
  border-top: 1px solid var(--border);
}
.vpick__tag {
  font-size: 0.6875rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
}
.vpick__name { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.15; }

/* Capacity sits under the name because it is the reason a card is or is not
   in the list — the customer should be able to see the filter's logic. */
.vpick__cap {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 2px;
}

/* The fare, directly under the capacity it depends on. Given the display
   face and a little weight so it reads as the card's headline number, not
   another line of spec text. */
.vpick__price {
  margin-top: var(--s-2);
  font-family: var(--font-display);
  font-size: 1.375rem;
  line-height: 1.1;
  color: var(--text);
}

/* VAT basis and the estimate caveat, once beneath the whole grid. */
/* "Confirmed with your booking" sits in the same slot as a price, so it has
   to stop looking like one — a sentence set in the display face at 1.375rem
   reads as a figure at a glance. Smaller, lighter, body face. */
.vpick__price.is-onrequest {
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--text-muted);
}

.vpick__pricenote {
  margin-top: var(--s-4);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* When NOTHING in the fleet can be priced for this ride, this note stops being
   a footnote and becomes the only answer to "what does it cost?" — so it has
   to hold its own rather than sit greyed out under seven empty price slots.
   Boxed and set in the body colour; still not a price, so still not the
   display face. */
.vpick__pricenote.is-onrequest {
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--bg-raised);
  color: var(--text);
}

/* Explains a filtered or impossible party size. Not an error — the booking is
   still valid — so it is toned down from .field__error. */
.vpick__note {
  margin-top: var(--s-4);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--text-muted);
}
.vpick__note[data-tone="warn"] {
  padding: var(--s-4);
  border: 1px solid var(--border);
  border-left: 3px solid var(--c-gold);
  border-radius: var(--r-sm);
  color: var(--text);
}

.vpick__tick {
  position: absolute;
  top: var(--s-3); right: var(--s-3);
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--c-gold);
  color: var(--c-black);
  opacity: 0;
  transform: scale(0.6);
  transition: opacity var(--d-fast) var(--e-ui), transform var(--d-base) var(--e-out);
}
.vpick__tick svg { width: 15px; height: 15px; }
.vpick__radio:checked + .vpick__card .vpick__tick { opacity: 1; transform: scale(1); }

/* ==========================================================================
   8. REVIEW
   ========================================================================== */

.review { display: flex; flex-direction: column; gap: var(--s-5); }
.review__group { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; }
.review__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
}
.review__title { font-family: var(--font-display); font-size: 1.25rem; font-weight: var(--fw-regular); }
.review__edit {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
  border-bottom: 1px solid currentColor;
}
.review__list { padding: var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.review__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  justify-content: space-between;
}
.review__row dt { font-size: var(--fs-sm); color: var(--text-muted); }
.review__row dd { font-size: var(--fs-sm); font-weight: var(--fw-medium); text-align: right; }

/* ==========================================================================
   9. PAYMENT
   Card details are never collected here — PayPal's hosted checkout handles
   them. These are method choices only.
   ========================================================================== */

.pay { display: flex; flex-direction: column; gap: var(--s-5); }
.pay__opts { display: flex; flex-direction: column; gap: var(--s-3); }
.pay__opt { cursor: pointer; }
.pay__opt input { position: absolute; opacity: 0; pointer-events: none; }

.pay__box {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  transition: border-color var(--d-fast) var(--e-ui), background-color var(--d-fast) var(--e-ui);
}
.pay__opt input:checked + .pay__box { border-color: var(--c-gold); background: var(--c-gold-champagne); }
.pay__opt input:focus-visible + .pay__box { outline: 2px solid var(--focus-ring); outline-offset: 3px; }

.pay__icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  flex: none;
  border: 1px solid var(--rule-gold);
  border-radius: 50%;
  color: var(--text-accent);
}
.pay__icon svg { width: 19px; height: 19px; }
.pay__box strong { display: block; font-size: var(--fs-md); font-weight: var(--fw-medium); }
.pay__box small { font-size: var(--fs-xs); color: var(--text-muted); }

.pay__consent { display: flex; gap: var(--s-3); align-items: flex-start; font-size: var(--fs-sm); }
.pay__consent input { width: 18px; height: 18px; flex: none; margin-top: 2px; accent-color: var(--c-gold); }
.pay__consent a { color: var(--text-accent); text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   10. NAV + SAVED STATE
   ========================================================================== */

.bnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: space-between;
  align-items: center;
  margin-top: var(--s-7);
  padding-top: var(--s-6);
  border-top: 1px solid var(--border);
}
.bnav [data-next],
.bnav [data-submit] { margin-left: auto; }

.bsaved {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-5);
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
.bsaved svg { width: 15px; height: 15px; color: var(--c-success); }

.bsum__trust {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-5);
  padding-top: var(--s-5);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.bsum__trust li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--fs-xs);
  color: var(--c-n-300);
}
.bsum__trust svg { width: 15px; height: 15px; color: var(--c-gold); flex: none; }

/* ==========================================================================
   11. ROUTE MAP
   ========================================================================== */

.bsum__mapwrap { position: relative; }

.bsum__map {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  margin-bottom: var(--s-5);
  overflow: hidden;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 12px, transparent 12px 24px),
    var(--c-n-900);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Google injects its own children; hide our note once a map is drawn. */
.bsum__map[data-state="ready"] .bsum__map-note { display: none; }
.bsum__map[data-state="ready"] { place-items: stretch; }

.bsum__map-note {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  max-width: 82%;
  padding: var(--s-4);
  text-align: left;
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--c-n-400);
}
.bsum__map-note svg { width: 17px; height: 17px; color: var(--c-gold); flex: none; }

.bsum__map[data-state="loading"] .bsum__map-note svg { animation: map-pulse 1.2s ease-in-out infinite; }
@keyframes map-pulse { 50% { opacity: 0.35; } }

.bsum__map[data-state="error"] .bsum__map-note,
.bsum__map[data-state="unconfigured"] .bsum__map-note { color: var(--c-n-300); }
.bsum__map[data-state="error"] .bsum__map-note svg { color: var(--c-error); }

/* Google's controls sit on a dark panel — keep them legible. */
.bsum__map .gm-style-cc,
.bsum__map .gmnoprint a { filter: invert(1) hue-rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .bsum__map[data-state="loading"] .bsum__map-note svg { animation: none; }
}

/* Route computed but the map could not be drawn. Distance and time are on
   screen and correct — only the picture is missing, so this reads as a
   quiet state rather than an error. */
.bsum__map[data-state="totals"] .bsum__map-note { color: var(--c-n-400); }
.bsum__map[data-state="totals"] .bsum__map-note svg { color: var(--c-gold); }


/* ==========================================================================
   PAYPAL
   PayPal renders its own buttons into this container. The site's submit
   button is hidden while they show, so there is never a route to "book"
   without paying once payment was the chosen method.
   ========================================================================== */

.paypal { margin-top: var(--s-5); }
.paypal__note {
  margin-top: var(--s-3);
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-muted);
}
.paypal__note[data-tone="ok"]  { color: var(--c-gold-deep); }
.paypal__note[data-tone="err"] { color: var(--c-error); }


/* ==========================================================================
   CONFIRMATION
   Replaces the whole wizard once the booking is away. Previously this was two
   lines appended under the form, which left people unsure anything had
   happened. It now recaps what was booked, gives a reference to quote, and
   says plainly what comes next.
   ========================================================================== */

/* ── FARE CHANGED ──────────────────────────────────────────────────────────
   The fare recalculates whenever the route, the vehicle or the ride type
   changes, and it used to swap silently. On a page where the number is the
   whole point, a value that changes without saying so is easy to miss — and
   a customer who misses it thinks the site ignored them.

   One short lift, on the change only. Not a loop, not a colour that stays:
   it marks the moment and gets out of the way. Duration comes from the
   tokens, which already collapse to 1ms under prefers-reduced-motion. */
.is-fresh { animation: fare-lift var(--d-slow) var(--e-out); }
@keyframes fare-lift {
  0%   { color: var(--c-gold); transform: translateY(-2px); }
  100% { color: inherit;       transform: none; }
}

/* This card no longer lives inside .bpanel — the <form> IS .bpanel and gets
   hidden — so it has to carry its own panel chrome. */
.conf {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-8, var(--s-7)) var(--s-6) var(--s-7);
  text-align: center;
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  background: var(--bg-raised);
  box-shadow: var(--sh-sm);
  min-width: 0;
}

/* Atmosphere. A flat panel reads as a system message; a single warm bloom
   behind the seal reads as somewhere expensive. Sits under everything and
   never intercepts a click. */
.conf__glow {
  position: absolute;
  inset-inline: 0;
  top: -140px;
  height: 320px;
  pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%,
              rgba(212, 175, 55, 0.16), rgba(212, 175, 55, 0) 70%);
}

/* ── THE SEAL ──────────────────────────────────────────────────────────
   Drawn, not popped. The ring scribes itself and the tick follows — a wax
   stamp being pressed. Bounce would read as a notification; this is a
   confirmation of something that cost money. */
.conf__seal {
  position: relative;
  width: 76px; height: 76px;
  margin: 0 auto;
}
.conf__seal svg { width: 100%; height: 100%; overflow: visible; }

.conf__seal-ring,
.conf__seal-tick {
  stroke: var(--text-accent);
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.conf__seal-ring {
  stroke-width: 1.25;
  opacity: 0.6;
  stroke-dasharray: 195;            /* 2πr, r = 31 */
  stroke-dashoffset: 195;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  animation: confDraw 900ms cubic-bezier(0.22, 1, 0.36, 1) 100ms forwards;
}
.conf__seal-tick {
  stroke-width: 2.5;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: confDraw 420ms cubic-bezier(0.65, 0, 0.35, 1) 760ms forwards;
}
@keyframes confDraw { to { stroke-dashoffset: 0; } }

/* One slow ring outward as the tick lands. Once — a flourish, not a pulse. */
.conf__seal::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--c-gold);
  opacity: 0;
  animation: confHalo 1100ms cubic-bezier(0.22, 1, 0.36, 1) 900ms forwards;
}
@keyframes confHalo {
  0%   { opacity: 0.5; transform: scale(1); }
  100% { opacity: 0;   transform: scale(1.7); }
}

/* ── ARRIVAL ───────────────────────────────────────────────────────────
   Every block rises in turn. `--d` is set per element in booking.js, so the
   order is authored where the markup is, not guessed at with :nth-child. */
.conf__title, .conf__lead, .conf__ticket, .conf__status,
.conf__block, .conf__actions, .conf__help {
  animation: confRise 620ms cubic-bezier(0.22, 1, 0.36, 1) var(--d, 0ms) both;
}
@keyframes confRise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.conf__title {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem);
  font-weight: var(--fw-regular);
  line-height: 1.15;
  text-wrap: balance;
}
.conf__lead { color: var(--text-muted); max-width: 46ch; margin-inline: auto; }

/* ── THE STUB ──────────────────────────────────────────────────────────
   The reference is the one thing worth reading off a screen onto a phone
   call, so it is a ticket you could tear off, not a line of text. The two
   notches are punched out of the side edges with radial gradients. */
.conf__ticket {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  width: fit-content;
  max-width: 100%;
  margin: var(--s-2) auto 0;
  padding: var(--s-4) var(--s-5);
  border: 1px dashed var(--c-gold);
  border-radius: var(--r-md);
  background:
    radial-gradient(circle at left  center, var(--bg-raised) 7px, transparent 7px),
    radial-gradient(circle at right center, var(--bg-raised) 7px, transparent 7px),
    rgba(212, 175, 55, 0.07);
}
.conf__ticket-main {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
  min-width: 0;
}
.conf__ticket-main span {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}
.conf__ticket-main strong {
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--text-accent);
  word-break: break-all;
}

.conf__copy {
  flex: none;
  padding: 7px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
.conf__copy:hover { color: var(--text-accent); border-color: var(--c-gold); }
.conf__copy.is-done {
  color: var(--c-black);
  background: var(--c-gold);
  border-color: var(--c-gold);
}

.conf__block { display: flex; flex-direction: column; gap: var(--s-3); }

.conf__sub {
  margin-top: var(--s-4);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-muted);
}

.conf__list { display: flex; flex-direction: column; gap: var(--s-3); text-align: left; }
.conf__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  justify-content: space-between;
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--border);
}
.conf__row:last-child { border-bottom: 0; padding-bottom: 0; }
.conf__row dt { font-size: var(--fs-xs); color: var(--text-muted); }
.conf__row dd { font-size: var(--fs-sm); text-align: right; }
/* The fare is the line the eye goes to. Let it. */
.conf__row:last-child dd { font-size: 1.05rem; color: var(--text-accent); }

.conf__status {
  align-self: center;
  padding: 6px 16px;
  border-radius: var(--r-pill);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  color: var(--text-muted);
}
.conf__status[data-paid="yes"] {
  border-color: var(--c-gold);
  background: var(--c-gold);
  color: var(--c-black);
}

/* ── THE ROUTE ─────────────────────────────────────────────────────────
   The next steps are drawn as a journey: a gold line with stops on it,
   deliberately echoing the polyline on the map beside this card. */
.conf__steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  text-align: left;
  list-style: none;
  padding-left: var(--s-6);
}
.conf__steps::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: linear-gradient(to bottom,
              var(--c-gold), rgba(212, 175, 55, 0.15));
}
.conf__steps li {
  position: relative;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}
.conf__steps li::before {
  content: '';
  position: absolute;
  left: calc(var(--s-6) * -1);
  top: 0.45em;
  width: 13px; height: 13px;
  margin-left: 0;
  border-radius: 50%;
  border: 1px solid var(--c-gold);
  background: var(--bg-raised);
}
/* The first stop is where they are now. */
.conf__steps li:first-child::before { background: var(--c-gold); }

.conf__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  justify-content: center;
  margin-top: var(--s-4);
}
.conf__help {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  max-width: 44ch;
  margin-inline: auto;
}

/* Business travellers keep a paper copy. Give them a clean one: no glow, no
   panel, no buttons that cannot be pressed on paper. */
@media print {
  .conf { border: 0; box-shadow: none; background: none; padding: 0; }
  .conf__glow, .conf__actions, .conf__copy { display: none !important; }
  .conf__seal-ring, .conf__seal-tick { stroke-dashoffset: 0; animation: none; }
  .conf__seal::after { display: none; }
}

/* Motion is decoration here — the content is identical without it. */
@media (prefers-reduced-motion: reduce) {
  .conf__title, .conf__lead, .conf__ticket, .conf__status,
  .conf__block, .conf__actions, .conf__help { animation: none; }
  .conf__seal-ring, .conf__seal-tick { stroke-dashoffset: 0; animation: none; }
  .conf__seal::after { display: none; }
}