/* ==========================================================================
   HW Booking Widget — scoped under .hw-widget. v2: light parchment surface,
   ink + brass accents, sentence-case sans labels. Oxblood survives only as
   the required-dot color (per design.md §A11y).
   ========================================================================== */

.hw-widget {
  --w-parchment:  #F1ECE3;
  --w-limestone:  #CEC7B9;
  --w-oxblood:    #30121C;  /* required-dot only on light surface */
  --w-ink:        #0F2138;  /* primary accent + headings */
  --w-night:      #1C1A18;  /* body text */
  --w-brass:      #C6A25C;  /* selected + accent */

  --w-border:     rgba(15, 33, 56, 0.18);
  --w-border-strong: rgba(15, 33, 56, 0.35);
  --w-text-soft:  rgba(28, 26, 24, 0.7);
  --w-text-faint: rgba(28, 26, 24, 0.5);
  --w-input-bg:   rgba(15, 33, 56, 0.03);
  --w-input-bg-focus: rgba(15, 33, 56, 0.06);

  /* Softened editorial: rounded surfaces for warmth, hairlines for structure,
     subtle shadow for depth. No pill buttons for primary actions, no brass
     fills on light — those brief constraints stay. */
  --w-rule:       1px solid var(--w-ink);
  --w-rule-soft:  1px solid rgba(15, 33, 56, 0.18);
  --w-glow:       0 18px 48px -16px rgba(15, 33, 56, 0.18);

  --w-radius-card: 20px;
  --w-radius-pill: 999px;
  --w-radius-input: 12px;

  --w-serif: 'DM Serif Display', 'Iowan Old Style', Georgia, serif;
  --w-sans:  'Manrope', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --w-mono:  'JetBrains Mono', ui-monospace, Menlo, monospace;

  position: relative;
  font-family: var(--w-sans);
}

/* ==========================================================================
   Mode — floating (kept for future; not currently used)
   ========================================================================== */
.hw-widget--floating {
  position: fixed;
  right: 32px;
  bottom: 32px;
  z-index: 40;
}
.hw-widget--floating .hw-widget__card {
  position: absolute;
  right: 0;
  bottom: 64px;
  width: min(440px, calc(100vw - 64px));
  z-index: 45;
  transform-origin: bottom right;
  animation: hw-card-in 240ms ease-out;
}
@keyframes hw-card-in {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1)    translateY(0); }
}
.hw-widget--floating.is-close-visible .hw-widget__pill {
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 240ms ease-out, transform 240ms ease-out;
}
@media (max-width: 760px) {
  .hw-widget--floating { display: none; }
}

/* Pill — light card on dark hero */
/* Floating mode is not currently used. If reactivated, the pill should be
   restyled as an editorial badge (text + brass underline on a parchment chip
   with hairline edge), but for now the original shape is preserved with the
   forbidden glow stripped. */
.hw-widget__pill {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px 14px 14px;
  background: var(--w-parchment);
  color: var(--w-ink);
  border: 1px solid var(--w-ink);
  border-radius: 0;
  font-family: var(--w-sans);
  font-weight: 500;
  font-size: 16px;
  cursor: pointer;
  transition: transform 200ms ease-out;
}
.hw-widget__pill:focus-visible {
  outline: 1.5px solid var(--w-ink);
  outline-offset: 3px;
}

/* ==========================================================================
   Card (the form surface)
   ========================================================================== */
.hw-widget__card {
  background: var(--w-parchment);
  color: var(--w-night);
  border: 1px solid rgba(15, 33, 56, 0.18);
  border-radius: var(--w-radius-card);
  box-shadow: var(--w-glow);
  padding: 32px 36px 28px;
  display: grid;
  gap: 22px;
}
.hw-widget--inline .hw-widget__card {
  margin: 0 auto;
  max-width: 720px;
}
.hw-widget--inline {
  display: block;
  padding: 80px 24px;
  background: var(--w-limestone);
}

/* Header */
.hw-widget__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.hw-widget__eyebrow {
  font-family: var(--w-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(15, 33, 56, 0.65);
}
.hw-widget__eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px; height: 1px;
  background: var(--w-brass);
  vertical-align: middle;
  margin-right: 12px;
}
.hw-widget__close {
  background: transparent;
  border: 0;
  color: var(--w-ink);
  font-family: var(--w-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  min-height: 32px;
  padding: 4px 8px;
}
.hw-widget__close:hover { color: var(--w-night); }

/* Progress — single hairline that fills left-to-right with each step.
   Brass marks the territory covered; the remainder is ink at 15%. */
.hw-widget__progress {
  position: relative;
  height: 1px;
  background: rgba(15, 33, 56, 0.15);
  overflow: visible;
}
.hw-widget__progress-fill {
  display: block;
  height: 1px;
  width: 0;
  background: var(--w-brass);
  transition: width 280ms ease-out;
}

/* Step body */
.hw-widget__step {
  min-height: 240px;
  display: grid;
  gap: 18px;
}
.hw-widget__step.is-enter {
  animation: hw-step-in 180ms ease-out;
}
@keyframes hw-step-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Title: soft thematic, sans, not display serif. Smaller than v1. */
.hw-widget__title {
  font-family: var(--w-sans);
  font-weight: 500;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--w-ink);
}
.hw-widget__lead {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--w-text-soft);
}

/* Fields — hairline language. Label is a small-caps mono eyebrow above; the
   input/value sits on a single 1px ink bottom-rule. No filled box, no full
   border. Focus shifts the hairline to brass. Matches the Quote screen's
   small-caps + rule treatment (`.hw-widget__quote-label`, `-summary-row`). */
.hw-widget__field { display: grid; gap: 8px; }
.hw-widget__field label,
.hw-widget__field > .label,
.hw-widget__sublabel {
  font-family: var(--w-mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--w-ink);
}
.hw-widget__sublabel { margin-top: 14px; }

.hw-widget__field input[type="text"],
.hw-widget__field input[type="tel"],
.hw-widget__field input[type="email"],
.hw-widget__field input[type="time"],
.hw-widget__field textarea {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--w-border);
  border-radius: 0;
  color: var(--w-night);
  font-family: var(--w-sans);
  font-size: 16px;
  padding: 8px 0 10px;
  outline: 0;
  transition: border-bottom-color 180ms ease-out;
}
.hw-widget__field textarea {
  min-height: 72px;
  resize: vertical;
  line-height: 1.5;
}
.hw-widget__field input:focus,
.hw-widget__field input:focus-visible,
.hw-widget__field textarea:focus,
.hw-widget__field textarea:focus-visible {
  border-bottom-color: var(--w-brass);
}
.hw-widget__field input::placeholder,
.hw-widget__field textarea::placeholder {
  color: var(--w-text-faint);
  font-style: italic;
}

/* Locked input — the airport-side address slot when the airport chip is set.
   Same hairline; muted text color carries the read-only state without a fake
   lock icon. */
.hw-widget__input--locked,
.hw-widget__field input[readonly] {
  color: var(--w-text-soft);
  cursor: default;
  border-bottom-style: dashed;
}
/* Worksheet placeholder for the quote slot — reads as a field awaiting input, not a value. */
.hw-widget__quote-placeholder {
  font-family: var(--w-sans);
  font-style: italic;
  font-size: clamp(20px, 2.4vw, 26px);
  color: var(--w-text-faint);
  letter-spacing: -0.01em;
}
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__quote-placeholder {
  color: rgba(241, 236, 227, 0.55);
}

.hw-widget__field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 520px) {
  .hw-widget__field-row { grid-template-columns: 1fr; }
}

.hw-widget__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--w-sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--w-night);
  cursor: pointer;
}
.hw-widget__toggle input { accent-color: var(--w-brass); width: 18px; height: 18px; }

.hw-widget__inline-note {
  font-family: var(--w-sans);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--w-text-soft);
  padding: 12px 14px;
  border-left: 2px solid var(--w-brass);
  background: rgba(198, 162, 92, 0.08);
  border-radius: 0 var(--w-radius-input) var(--w-radius-input) 0;
}

/* ==========================================================================
   Conditional fields — animate in/out
   ========================================================================== */
.hw-widget__field[hidden],
.hw-widget__field-row[hidden] { display: none; }

/* ==========================================================================
   Stops list
   ========================================================================== */
.hw-widget__stops {
  display: grid;
  gap: 8px;
}
.hw-widget__stop-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: center;
}
.hw-widget__stop-reorder {
  display: inline-flex;
  gap: 2px;
}
.hw-widget__stop-up,
.hw-widget__stop-down {
  width: 28px;
  height: 36px;
  background: transparent;
  border: 1px solid var(--w-border);
  color: var(--w-text-soft);
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  transition: border-color 180ms ease-out, color 180ms ease-out;
}
.hw-widget__stop-up:not(:disabled):hover,
.hw-widget__stop-down:not(:disabled):hover {
  border-color: var(--w-ink);
  color: var(--w-ink);
}
.hw-widget__stop-up:disabled,
.hw-widget__stop-down:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}
.hw-widget__stop-input {
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--w-border);
  border-radius: 0;
  color: var(--w-night);
  font-family: var(--w-sans);
  font-size: 16px;
  padding: 8px 0 10px;
  outline: 0;
  transition: border-bottom-color 180ms ease-out;
}
.hw-widget__stop-input::placeholder {
  color: var(--w-text-faint);
  font-style: italic;
}
.hw-widget__stop-input:focus,
.hw-widget__stop-input:focus-visible {
  border-bottom-color: var(--w-brass);
}
.hw-widget__stop-remove {
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--w-border);
  color: var(--w-text-soft);
  border-radius: var(--w-radius-pill);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.hw-widget__stop-remove:hover {
  border-color: var(--w-oxblood);
  color: var(--w-oxblood);
}
.hw-widget__add-stop {
  align-self: start;
  background: transparent;
  border: 1px dashed var(--w-border-strong);
  border-radius: var(--w-radius-pill);
  padding: 10px 18px;
  color: var(--w-ink);
  font-family: var(--w-sans);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: border-color 180ms ease-out, background 180ms ease-out;
  margin-top: 4px;
  min-height: 40px;
}
.hw-widget__add-stop:hover {
  border-color: var(--w-ink);
  background: rgba(15, 33, 56, 0.04);
}

/* ==========================================================================
   Step 1 — Ride
   ========================================================================== */
.hw-widget__ride-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 520px) {
  .hw-widget__ride-grid { grid-template-columns: 1fr; }
}
/* Secondary ride group — quieter, subordinate to the two primary cards. */
.hw-widget__ride-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 12px;
  font-family: var(--w-sans);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--w-text-soft);
}
.hw-widget__ride-divider span { white-space: nowrap; }
.hw-widget__ride-divider::before,
.hw-widget__ride-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--w-border);
}
.hw-widget__ride-grid--quiet {
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 520px) {
  .hw-widget__ride-grid--quiet { grid-template-columns: 1fr; }
}
.hw-widget__ride-grid--quiet .hw-widget__ride {
  min-height: 60px;
  padding: 11px 14px;
}
.hw-widget__ride-grid--quiet .hw-widget__ride-name {
  font-size: 14px;
  color: var(--w-text-soft);
}
.hw-widget__ride-grid--quiet .hw-widget__ride-meta {
  font-size: 11.5px;
}
.hw-widget__ride-note {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-left: 2px solid var(--w-brass);
  font-family: var(--w-sans);
  font-style: italic;
  font-size: 14px;
  line-height: 1.5;
  color: var(--w-text-soft);
  background: rgba(198, 162, 92, 0.08);
  border-radius: 0 var(--w-radius-input) var(--w-radius-input) 0;
}
.hw-widget__ride {
  display: grid;
  gap: 4px;
  text-align: left;
  padding: 14px 18px;
  background: transparent;
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius-input);
  color: var(--w-night);
  cursor: pointer;
  transition: border-color 180ms ease-out, background 180ms ease-out;
  min-height: 76px;
}
.hw-widget__ride:hover { border-color: var(--w-ink); background: rgba(15, 33, 56, 0.02); }
.hw-widget__ride.is-selected {
  border-color: var(--w-ink);
  background: var(--w-ink);
  color: var(--w-parchment);
}
.hw-widget__ride.is-selected .hw-widget__ride-name,
.hw-widget__ride.is-selected .hw-widget__ride-meta {
  color: var(--w-parchment);
}
.hw-widget__ride-name {
  font-family: var(--w-sans);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--w-ink);
}
.hw-widget__ride-meta {
  font-family: var(--w-sans);
  font-size: 12.5px;
  color: var(--w-text-soft);
}

/* ==========================================================================
   Chips
   ========================================================================== */
.hw-widget__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hw-widget__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 16px;
  border-radius: var(--w-radius-pill);
  background: var(--w-input-bg);
  border: 1px solid var(--w-border);
  color: var(--w-night);
  font-family: var(--w-sans);
  font-size: 14px;
  cursor: pointer;
  transition: background 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
}
.hw-widget__chip:hover { border-color: var(--w-ink); }
/* Selected = ink fill on light. Brass never appears as a fill on a light
   surface (design.md §Color anti-pattern #1). */
.hw-widget__chip.is-selected {
  background: var(--w-ink);
  color: var(--w-parchment);
  border-color: var(--w-ink);
  font-weight: 500;
}

/* ==========================================================================
   Calendar — editorial. No bordered container, no circular nav. Day numbers
   sit on the parchment surface; selected day carries a brass hairline
   underline instead of a filled circle.
   ========================================================================== */
.hw-widget__calendar {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}
.hw-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.hw-cal__nav {
  background: transparent;
  border: 0;
  color: var(--w-ink);
  min-width: 36px;
  min-height: 36px;
  padding: 4px 8px;
  border-radius: 0;
  font-family: var(--w-mono);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: color 180ms ease-out;
}
.hw-cal__nav:hover { color: var(--w-brass); }
.hw-cal__nav:focus-visible {
  outline: 1.5px solid var(--w-ink);
  outline-offset: 2px;
}
.hw-cal__month {
  font-family: var(--w-sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--w-ink);
}
.hw-cal__dow,
.hw-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.hw-cal__dow span {
  font-family: var(--w-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-align: center;
  color: var(--w-text-faint);
  padding: 6px 0;
}
.hw-cal__cell {
  min-height: 40px;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  color: var(--w-night);
  font-family: var(--w-sans);
  font-size: 14px;
  cursor: pointer;
  transition: color 160ms ease-out, border-bottom-color 160ms ease-out;
}
.hw-cal__cell:hover:not(.is-disabled) {
  color: var(--w-ink);
  border-bottom-color: rgba(15, 33, 56, 0.25);
}
.hw-cal__cell:focus-visible {
  outline: 1.5px solid var(--w-ink);
  outline-offset: 2px;
}
.hw-cal__cell.is-disabled { color: rgba(28, 26, 24, 0.22); cursor: not-allowed; }
.hw-cal__cell.is-today {
  border-bottom-color: rgba(198, 162, 92, 0.4);
}
.hw-cal__cell.is-selected {
  color: var(--w-ink);
  font-weight: 500;
  border-bottom: 1px solid var(--w-brass);
}
.hw-cal__cell--blank { cursor: default; pointer-events: none; }

/* ==========================================================================
   Time picker — native <input type="time"> styled to the hairline system.
   The OS handles the picker UI; we just style the field itself.
   ========================================================================== */
.hw-widget__time-input {
  font-family: var(--w-sans);
  font-size: 16px;
  /* WebKit shows a custom calendar/clock icon; let it sit at the field's
     trailing edge in muted ink. */
  color-scheme: light;
}
.hw-widget__time-input::-webkit-calendar-picker-indicator {
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 180ms ease-out;
}
.hw-widget__time-input:hover::-webkit-calendar-picker-indicator { opacity: 0.85; }

/* ==========================================================================
   Stepper
   ========================================================================== */
.hw-widget__field--stepper { gap: 8px; }
/* Pill stepper restored — softer than bare numerals between square buttons. */
.hw-widget__stepper {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius-pill);
  padding: 4px;
  width: fit-content;
}
.hw-widget__stepper button {
  width: 36px; height: 36px;
  border: 0;
  background: transparent;
  color: var(--w-ink);
  font-size: 20px;
  font-family: var(--w-sans);
  cursor: pointer;
  border-radius: 999px;
  font-weight: 500;
}
.hw-widget__stepper button:hover { background: rgba(15, 33, 56, 0.08); }
.hw-widget__stepper span {
  min-width: 44px;
  text-align: center;
  font-family: var(--w-sans);
  font-weight: 500;
  font-size: 17px;
  color: var(--w-night);
}

/* ==========================================================================
   Quote + Summary
   ========================================================================== */
.hw-widget__quote {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 0 0;
}
.hw-widget__quote-label {
  font-family: var(--w-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--w-ink);
}
.hw-widget__quote-amount {
  font-family: var(--w-serif);
  font-size: clamp(36px, 4.4vw, 48px);
  color: var(--w-ink);
  letter-spacing: -0.02em;
}
.hw-widget__quote-source {
  font-family: var(--w-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--w-text-faint);
  text-align: right;
}
.hw-widget__quote-status {
  font-family: var(--w-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--w-text-faint);
}
.hw-widget__quote-note {
  font-family: var(--w-serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: var(--w-text-soft);
  margin-top: 18px;
}

/* Quote — resolved breakdown. Eyebrow + rule-separated line items +
   total row at the bottom. Mono labels on the left, serif amounts on the
   right. Line items stage in on first arrival at Step 5. */
.hw-widget__quote-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--w-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--w-ink);
  margin-bottom: 4px;
}
.hw-widget__quote-eyebrow::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 1px;
  background: var(--w-brass);
}
.hw-widget__quote-lines {
  display: grid;
  gap: 0;
}
.hw-widget__quote-line {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid rgba(15, 33, 56, 0.18);
}
.hw-widget__quote-line:last-of-type { border-bottom: 1px solid rgba(15, 33, 56, 0.18); }
.hw-widget__quote-line-label {
  font-family: var(--w-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--w-ink);
}
.hw-widget__quote-line-amount {
  font-family: var(--w-serif);
  font-size: 20px;
  letter-spacing: -0.012em;
  color: var(--w-ink);
}
.hw-widget__quote-total {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding: 22px 0 6px;
  border-top: 1px solid var(--w-ink);
  margin-top: 0;
}
.hw-widget__quote-total-label {
  font-family: var(--w-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--w-ink);
}
.hw-widget__quote-total-amount {
  font-family: var(--w-serif);
  font-size: clamp(36px, 4.4vw, 48px);
  letter-spacing: -0.02em;
  color: var(--w-ink);
}

/* Staged resolve — line items + total start hidden and fade-up. CSS handles
   the transitions; JS adds .is-resolved when the sequence should run. */
.hw-widget__quote-line,
.hw-widget__quote-total {
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.hw-widget__quote.is-resolved .hw-widget__quote-line,
.hw-widget__quote.is-resolved .hw-widget__quote-total {
  opacity: 1;
  transform: translateY(0);
}
.hw-widget__quote.is-resolved .hw-widget__quote-line:nth-of-type(1) { transition-delay: 0ms; }
.hw-widget__quote.is-resolved .hw-widget__quote-line:nth-of-type(2) { transition-delay: 160ms; }
.hw-widget__quote.is-resolved .hw-widget__quote-line:nth-of-type(3) { transition-delay: 320ms; }
.hw-widget__quote.is-resolved .hw-widget__quote-line:nth-of-type(4) { transition-delay: 480ms; }
.hw-widget__quote.is-resolved .hw-widget__quote-total {
  transition:
    opacity 380ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 380ms cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 700ms;
}

/* Instant variant — no stagger (subsequent visits or reduced-motion). */
.hw-widget__quote.is-instant .hw-widget__quote-line,
.hw-widget__quote.is-instant .hw-widget__quote-total {
  opacity: 1;
  transform: none;
  transition: none;
}

/* Dark-card overrides for the resolved quote elements. */
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__quote-eyebrow,
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__quote-line-label,
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__quote-line-amount,
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__quote-total-label,
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__quote-total-amount {
  color: var(--w-parchment);
}
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__quote-line {
  border-top-color: rgba(241, 236, 227, 0.22);
}
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__quote-line:last-of-type {
  border-bottom-color: rgba(241, 236, 227, 0.22);
}
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__quote-total {
  border-top-color: var(--w-brass);
}
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__quote-total-amount {
  color: var(--w-brass);
}

/* Quote disclosures — wait-time, group pricing, hourly event note. Operational
   notes shown beneath the total but not summed into it. */
.hw-widget__quote-disclosures {
  display: grid;
  gap: 6px;
  margin-top: 16px;
}
.hw-widget__quote-disclosure {
  font-family: var(--w-sans);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--w-text-soft);
  margin: 0;
}
.hw-widget__quote-fallback {
  font-family: var(--w-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.5;
  color: var(--w-night);
  margin-top: 10px;
}
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__quote-disclosure {
  color: rgba(241, 236, 227, 0.66);
}
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__quote-fallback {
  color: rgba(241, 236, 227, 0.92);
}

/* Promo-code row on the quote step (lives on the oxblood card). */
.hw-widget__promo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.hw-widget__promo-input {
  flex: 1 1 160px;
  min-width: 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--w-border);
  border-radius: 0;
  color: var(--w-night);
  font-family: var(--w-sans);
  font-size: 15px;
  padding: 7px 0 8px;
  outline: 0;
}
.hw-widget__promo-input::placeholder { color: var(--w-text-faint); }
.hw-widget__promo-apply {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--w-border-strong);
  border-radius: 4px;
  color: var(--w-ink);
  font-family: var(--w-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 8px 16px;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}
.hw-widget__promo-apply:hover { border-color: var(--w-brass); color: var(--w-brass); }
.hw-widget__promo-msg {
  flex: 1 0 100%;
  font-family: var(--w-sans);
  font-size: 12.5px;
  color: var(--w-text-soft);
  min-height: 1em;
}
.hw-widget__promo-msg.is-ok { color: #2e7d50; }
.hw-widget__promo-msg.is-error { color: var(--w-oxblood); }

/* Dark-card variants — the quote step flips to oxblood. */
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__promo-input {
  color: var(--w-parchment);
  border-bottom-color: rgba(241, 236, 227, 0.3);
}
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__promo-input::placeholder {
  color: rgba(241, 236, 227, 0.45);
}
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__promo-apply {
  color: var(--w-parchment);
  border-color: rgba(241, 236, 227, 0.4);
}
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__promo-apply:hover {
  border-color: var(--w-brass);
  color: var(--w-brass);
}
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__promo-msg { color: rgba(241, 236, 227, 0.7); }
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__promo-msg.is-ok { color: #7fc99b; }
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__promo-msg.is-error { color: #e6a3b0; }

/* Keep-the-car nudge (Phase C) — appears on the dark quote card when a one-way
   trip is far or flagged round-trip. Leads with a brass-outlined primary action;
   the full-hourly and dismiss options are quiet parchment text links. */
.hw-widget__keep-car {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(241, 236, 227, 0.18);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hw-widget__keep-car .hw-widget__chips { margin: 2px 0 0; }
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__keep-car .hw-widget__chip {
  background: transparent;
  border-color: var(--w-brass);
  color: var(--w-brass);
  font-weight: 500;
}
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__keep-car .hw-widget__chip:hover {
  background: var(--w-brass);
  color: var(--w-night);
}
.hw-widget__keep-car .hw-widget__add-stop {
  align-self: flex-start;
  border: none;
  padding: 2px 0;
  min-height: 0;
  margin: 0;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(241, 236, 227, 0.3);
}
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__keep-car .hw-widget__add-stop {
  color: rgba(241, 236, 227, 0.72);
  background: transparent;
}
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__keep-car .hw-widget__add-stop:hover {
  color: var(--w-brass);
  background: transparent;
}

/* Honeypot — off-screen bot trap, never seen or tabbed to by real users. */
.hw-widget__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
}

/* Booking reference on the confirmation step (oxblood card). */
.hw-widget__sent-ref {
  font-family: var(--w-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--w-text-soft);
  margin: 4px 0 18px;
}
.hw-widget__sent-ref strong { letter-spacing: 0.1em; color: var(--w-ink); }
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__sent-ref { color: rgba(241, 236, 227, 0.7); }
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__sent-ref strong { color: var(--w-brass); }

/* Address autocomplete dropdown — parchment popover under the address inputs.
   The field / stop-row is the positioning context. */
.hw-widget__field,
.hw-widget__stop-row { position: relative; }
.hw-ac {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 30;
  margin-top: 4px;
  background: var(--w-parchment);
  border: 1px solid var(--w-border-strong);
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(15, 33, 56, 0.18);
  max-height: 264px;
  overflow-y: auto;
}
.hw-ac__opt {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--w-border);
  padding: 11px 13px;
  font-family: var(--w-sans);
  font-size: 15px;
  line-height: 1.35;
  color: var(--w-night);
  cursor: pointer;
}
.hw-ac__opt:last-child { border-bottom: 0; }
.hw-ac__opt:hover,
.hw-ac__opt.is-active { background: rgba(198, 162, 92, 0.18); }

.hw-widget__summary {
  display: grid;
  gap: 0;
}
.hw-widget__summary-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid rgba(15, 33, 56, 0.1);
  align-items: baseline;
}
.hw-widget__summary-row:last-child { border-bottom: 1px solid rgba(15, 33, 56, 0.1); }
.hw-widget__summary-key {
  font-family: var(--w-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--w-text-faint);
}
.hw-widget__summary-val {
  font-family: var(--w-sans);
  font-size: 14.5px;
  line-height: 1.4;
  color: var(--w-night);
}

/* ==========================================================================
   Footer (back / error / next)
   ========================================================================== */
.hw-widget__footer {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid rgba(15, 33, 56, 0.1);
}
/* Editorial actions — text with brass underline, no fills. Primary (Next /
   Send / Restart) and secondary (Back) differ in weight, not in container. */
.hw-widget__back,
.hw-widget__next,
.hw-widget__restart {
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--w-ink);
  font-family: var(--w-sans);
  font-weight: 500;
  font-size: 15px;
  padding: 4px 0 6px;
  border-radius: 0;
  cursor: pointer;
  min-height: 44px;
  transition: color 180ms ease-out, border-bottom-color 180ms ease-out, border-bottom-width 180ms ease-out;
  letter-spacing: 0.01em;
}
.hw-widget__next,
.hw-widget__restart {
  border-bottom-color: var(--w-brass);
}
.hw-widget__next:hover,
.hw-widget__restart:hover {
  color: var(--w-oxblood);
  border-bottom-color: var(--w-oxblood);
}
.hw-widget__next:disabled { opacity: 0.45; cursor: progress; }
.hw-widget__back {
  color: var(--w-text-soft);
}
.hw-widget__back:hover {
  color: var(--w-ink);
  border-bottom-color: var(--w-ink);
}
.hw-widget__restart {
  margin-top: 14px;
  justify-self: start;
}
.hw-widget__error {
  font-family: var(--w-sans);
  font-size: 13px;
  color: var(--w-oxblood);
}

.hw-widget__call-out {
  font-family: var(--w-sans);
  font-size: 13.5px;
  color: var(--w-text-soft);
  text-align: center;
}
.hw-widget__call-out a {
  color: var(--w-ink);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--w-brass);
}
.hw-widget__call-out--strong {
  font-family: var(--w-sans);
  font-size: 14.5px;
  color: var(--w-night);
}

/* ==========================================================================
   Inline-mode tweaks
   ========================================================================== */
.hw-widget--inline .hw-widget__close { display: none; }

/* ==========================================================================
   Embed mode (homepage hero — parchment card on dark hero)
   ========================================================================== */
.hw-widget--embed {
  display: block;
  width: 100%;
  margin-top: 24px;
}
.hw-widget--embed .hw-widget__card {
  /* Card is parchment over the oxblood hero — softer shadow + brass edge. */
  border: 1px solid rgba(198, 162, 92, 0.45);
  border-radius: var(--w-radius-card);
  box-shadow:
    0 24px 60px -20px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(198, 162, 92, 0.18);
  padding: 26px 26px 22px;
  gap: 16px;
}
.hw-widget--embed .hw-widget__step { min-height: 200px; gap: 14px; }
.hw-widget--embed .hw-widget__title { font-size: clamp(18px, 1.9vw, 22px); }
.hw-widget--embed .hw-widget__ride-grid { gap: 6px; }
.hw-widget--embed .hw-widget__ride { padding: 12px 14px; min-height: 64px; }
.hw-widget--embed .hw-widget__ride-name { font-size: 15px; }
.hw-widget--embed .hw-widget__ride-meta { font-size: 11.5px; }
.hw-widget--embed .hw-cal__cell { min-height: 34px; font-size: 13px; }

@media (max-width: 760px) {
  .hw-widget--embed { display: none; }
}

@media (min-width: 761px) {
  body.hw-widget-loaded .threshold-statement--mobile-fallback { display: none; }
  body.hw-widget-loaded .threshold {
    grid-template-rows: auto;
    min-height: 100vh;
  }
  body.hw-widget-loaded .threshold-image {
    height: 100vh;
    min-height: 720px;
  }
  body.hw-widget-loaded .threshold-text {
    justify-content: center;
    padding-top: 160px;
    padding-bottom: 64px;
  }
  body.hw-widget-loaded .threshold-headline {
    font-size: clamp(40px, 4.6vw, 72px);
  }
}

/* ==========================================================================
   No-JS fallback (used on /book) — also parchment surface
   ========================================================================== */
.hw-widget__fallback {
  max-width: 720px;
  margin: 0 auto;
  display: grid;
  gap: 16px;
  padding: 32px 36px;
  background: var(--w-parchment);
  color: var(--w-night);
  border: 1px solid rgba(15, 33, 56, 0.18);
  border-radius: var(--w-radius-card);
  box-shadow: var(--w-glow);
}
.hw-widget__fallback-title {
  font-family: var(--w-sans);
  font-weight: 500;
  font-size: 26px;
  letter-spacing: -0.018em;
  color: var(--w-ink);
}
.hw-widget__fallback-title em { font-style: normal; color: var(--w-brass); }
.hw-widget__fallback-lead { font-size: 15px; color: var(--w-text-soft); }
.hw-widget__fallback label {
  display: grid; gap: 6px;
  font-family: var(--w-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(28, 26, 24, 0.78);
}
.hw-widget__fallback input,
.hw-widget__fallback textarea {
  font-family: var(--w-sans); font-size: 16px;
  padding: 12px 16px;
  background: var(--w-input-bg);
  border: 1px solid var(--w-border);
  border-radius: var(--w-radius-input);
  color: var(--w-night);
}
.hw-widget__fallback textarea { border-radius: var(--w-radius-input); }
.hw-widget__fallback fieldset { border: 0; padding: 0; display: grid; gap: 6px; }
.hw-widget__fallback fieldset legend {
  font-family: var(--w-sans);
  font-weight: 500;
  font-size: 13px;
  color: rgba(28, 26, 24, 0.78);
  margin-bottom: 6px;
}
.hw-widget__fallback fieldset label {
  font-family: var(--w-sans);
  font-weight: 400;
  font-size: 15px;
  color: var(--w-night);
  display: inline;
}
.hw-widget__fallback button[type="submit"] {
  background: transparent;
  color: var(--w-ink);
  border: 0;
  border-bottom: 1px solid var(--w-brass);
  font-family: var(--w-sans);
  font-weight: 500;
  font-size: 15px;
  padding: 6px 0;
  border-radius: 0;
  cursor: pointer;
  justify-self: start;
  min-height: 44px;
  transition: color 180ms ease-out, border-bottom-color 180ms ease-out;
}
.hw-widget__fallback button[type="submit"]:hover {
  color: var(--w-oxblood);
  border-bottom-color: var(--w-oxblood);
}
.hw-widget__fallback-note { font-family: var(--w-sans); font-size: 13px; color: var(--w-text-soft); }
.hw-widget__fallback-note a { color: var(--w-ink); font-weight: 500; }

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 760px) {
  .hw-widget--inline { padding: 56px 16px; }
  .hw-widget__card {
    padding: 22px 18px;
    border-radius: 18px;
    /* Keep the card inside the viewport even when an internal child wants
       to push wider than the viewport. */
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }
  .hw-widget__title { font-size: 22px; }
  .hw-widget__ride-grid { grid-template-columns: 1fr; }
  .hw-widget__footer { grid-template-columns: 1fr 1fr; }
  .hw-widget__error { grid-column: 1 / -1; order: -1; }

  /* Header — let the prototype badge wrap to its own line below the
     step eyebrow instead of pushing the row off the page. */
  .hw-widget__header {
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  .hw-widget__eyebrow {
    font-size: 10.5px;
    letter-spacing: 0.18em;
  }
  .hw-widget__eyebrow::before { width: 18px; margin-right: 10px; }

  /* Summary — narrower key column + wrap long values. */
  .hw-widget__summary-row {
    grid-template-columns: 84px 1fr;
    gap: 12px;
  }
  .hw-widget__summary-val { overflow-wrap: anywhere; }

  /* Quote — let the amount + label stack rather than overflow horizontally. */
  .hw-widget__quote {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 16px 0;
  }
  .hw-widget__quote-source { text-align: left; }
}

/* Very narrow phones — extra safety. */
@media (max-width: 380px) {
  .hw-widget--inline { padding: 48px 12px; }
  .hw-widget__card { padding: 20px 14px; }
  .hw-widget__summary-row { grid-template-columns: 72px 1fr; gap: 10px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .hw-widget__card,
  .hw-widget__step,
  .hw-widget__pill,
  .hw-widget__quote-line,
  .hw-widget__quote-total {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Step 3 stepper row — auto-fit so people + (hours OR suitcases + handLuggage)
   lay out cleanly regardless of how many are visible. With [hidden] removing
   children from layout, this row gracefully becomes 2-up (people + hours for
   hourly), 3-up (people + suitcases + handLuggage for airport), or 1-up.
   ========================================================================== */
.hw-widget__field-row--steppers {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px 16px;
}
@media (max-width: 520px) {
  .hw-widget__field-row--steppers {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
  }
}

/* ==========================================================================
   Cabin reference hint (CabinConfig variant="compact") — sits below the
   step-3 luggage steppers. Shown ONLY on airport rides, where the luggage
   steppers themselves appear; applyConditionals() sets data-hw-ride on the
   card, so this needs no JS. The component owns its own typography/colours.
   ========================================================================== */
.cabin-hint {
  display: none;
  margin-top: 18px;
  padding: 16px;
  border: var(--w-rule-soft);
  border-radius: var(--w-radius-input);
  background: var(--w-input-bg);
}
.hw-widget__card[data-hw-ride="airport"] .cabin-hint { display: block; }

/* ==========================================================================
   Card — dark mode for steps 5 (Your estimate) + 6 (Sent).
   Toggled via [data-hw-card-mode="dark"] on the card. Resolution moments
   visually mark a hand-off to HW; the parchment form steps stay light.
   ========================================================================== */
.hw-widget__card[data-hw-card-mode="dark"] {
  background: var(--w-oxblood);
  color: var(--w-parchment);
}
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__title,
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__lead,
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__quote-amount,
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__quote-status,
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__summary-key,
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__summary-val,
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__call-out,
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__call-out a {
  color: var(--w-parchment);
}
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__eyebrow {
  color: rgba(241, 236, 227, 0.78);
}
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__quote-label,
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__quote-source,
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__quote-note {
  color: rgba(241, 236, 227, 0.72);
}
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__quote-amount em {
  color: var(--w-brass);
}
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__summary-row {
  border-color: rgba(241, 236, 227, 0.18);
}
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__summary-row:last-child {
  border-bottom: 1px solid rgba(241, 236, 227, 0.18);
}
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__progress {
  background: rgba(241, 236, 227, 0.2);
}
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__progress-fill {
  background: var(--w-brass);
}
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__back {
  color: rgba(241, 236, 227, 0.7);
}
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__back:hover {
  color: var(--w-parchment);
  border-bottom-color: var(--w-parchment);
}
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__next,
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__restart {
  color: var(--w-parchment);
  border-bottom-color: var(--w-brass);
}
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__next:hover,
.hw-widget__card[data-hw-card-mode="dark"] .hw-widget__restart:hover {
  color: var(--w-brass);
  border-bottom-color: var(--w-parchment);
}

/* Print */
@media print {
  .hw-widget--floating { display: none; }
  .hw-widget__card { box-shadow: none; }
}

body.hw-widget-open { /* reserved */ }