/* =========================================================================
   BMV Courier Service, quote tool
   quote.css

   Loads AFTER styles.css and owns only what the quote tool adds. Tokens,
   reset, chrome (utility bar, header, nav, footer) and the shared component
   classes below all come from styles.css and are not restated here:

     layout   .container            type     .lede .micro .muted
     buttons  .btn .btn-primary .btn-outline .btn-block
     forms    .field .field-label .field-error .input .select .textarea
     stepper  .stepper .stepper-btn .stepper-body .stepper-label
     tags     .pill .pill-solid .chip        misc  .sr-only .skip-link

   Where a quote-only `.q-` class sits on top of a shared one, it is a
   modifier: the shared class carries the site's interaction language, the
   modifier carries the geometry this tool needs.
   ========================================================================= */

.q-page {
  --q-ease-out: cubic-bezier(.23, 1, .32, 1);
  --q-ink-2: #475569;                     /* label grey, AA on white and on --silver-100 */
  --q-shadow-card: 0 4px 10px rgba(16, 40, 80, .05), 0 14px 30px rgba(16, 40, 80, .11);

  padding: clamp(24px, 4vw, 56px) var(--gutter) 8px;
  background:
    radial-gradient(120% 58% at 50% -12%, var(--navy-100) 0%, transparent 62%),
    var(--canvas);
}

.q-shell { width: 100%; max-width: 560px; margin-inline: auto; }

/* Inline icons drawn in this file's markup. */
.q-page .icon {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

/* ── Above the card ─────────────────────────────────────────────────── */

.q-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-bottom: 14px; min-height: 34px;
}
.q-topbar[hidden] { display: none; }

.q-back {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px 7px 9px; margin-left: -9px;
  background: none; border: 0; border-radius: var(--r-pill);
  font-size: 14px; font-weight: 600; color: var(--text-muted); cursor: pointer;
  transition: color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.q-back:hover { color: var(--navy); background: var(--white); }
.q-back .icon { width: 16px; height: 16px; }

.q-stepcount {
  margin: 0; font-size: 13px; font-weight: 600;
  color: var(--text-muted); font-variant-numeric: tabular-nums;
}

/* ── Card ───────────────────────────────────────────────────────────── */

.q-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--q-shadow-card);
  padding: clamp(24px, 5vw, 48px);
}

/* ── Progress ───────────────────────────────────────────────────────── */

.q-progress {
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 6px; margin: 0 0 26px; padding: 0; list-style: none;
}
.q-progress__seg {
  position: relative; overflow: hidden;
  height: 3px; border-radius: var(--r-pill);
  background: var(--navy-100);
}
.q-progress__seg::after {
  content: ""; position: absolute; inset: 0;
  border-radius: inherit; background: var(--navy);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-3) var(--ease);
}
.q-progress__seg.is-done::after { transform: scaleX(1); }
.q-progress__seg.is-current::after { transform: scaleX(1); background: var(--accent); }

/* ── Step entrance: fade plus 8px, cascading 80ms per block ─────────── */

.q-step[hidden] { display: none; }

.q-card.is-animating .q-block {
  animation: q-enter 280ms var(--ease) both;
  animation-delay: calc(var(--i, 0) * 80ms);
}
@keyframes q-enter {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* ── Card typography ────────────────────────────────────────────────── */

.q-title {
  margin: 0 0 8px;
  font-size: clamp(25px, 5.2vw, 32px);
  font-weight: 700; line-height: 1.14;
  letter-spacing: -.028em; color: var(--ink);
  text-wrap: balance;
}
.q-title:focus { outline: none; }
.q-page .lede { font-size: 15.5px; line-height: 1.55; max-width: 46ch; }
.q-page .micro:empty { display: none; }

/* ── Fields ─────────────────────────────────────────────────────────── */

.q-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.q-fieldset + .q-fieldset {
  margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--line);
}

.q-legend {
  display: flex; align-items: center; gap: 9px;
  padding: 0; margin: 0 0 14px;
  font-size: 12.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--navy);
}
.q-legend__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--navy); }
.q-legend__dot--to { background: var(--accent); }

.q-optional { font-weight: 400; color: var(--text-muted); }

.q-row { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.field + .field, .q-row + .field, .field + .q-row, .q-row + .q-row { margin-top: 14px; }

@media (min-width: 480px) {
  .q-row--addr { grid-template-columns: minmax(0, 1fr) 108px; }
  .q-row--dims { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .q-row:not(.q-row--addr):not(.q-row--dims) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .q-row .field + .field { margin-top: 0; }
}

.q-page .input[aria-invalid="true"],
.q-page .select[aria-invalid="true"],
.q-page .textarea[aria-invalid="true"] { border-color: #c2373b; }
.q-page .input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgba(194, 55, 59, .16); }
.q-page .textarea { min-height: 96px; }

.q-step > .q-block + .q-block { margin-top: 22px; }
.q-step > header.q-block + .q-block { margin-top: 24px; }

/* ── Stepper rows ───────────────────────────────────────────────────── */

.q-steppers { border-top: 1px solid var(--line); }

.q-steprow.stepper {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 12px;
  padding: 12px 2px;
  border-top: 0; border-bottom: 1px solid var(--line);
}
.q-steprow__mid { gap: 8px; min-width: 0; }

/* Briance geometry on top of the shared stepper button. */
.q-stepbtn.stepper-btn {
  width: 36px; height: 36px;
  border-radius: var(--r-xs);
  border-color: var(--line);
  background: rgba(255, 255, 255, .6);
  box-shadow: var(--shadow-1);
  color: var(--ink);
}
.q-stepbtn.stepper-btn:hover:not(:disabled) { background: var(--navy-050); border-color: var(--navy); }
.q-stepbtn.stepper-btn:active:not(:disabled) { transform: scale(.94); }
.q-stepbtn.stepper-btn .icon { width: 16px; height: 16px; stroke-width: 1.9; }
.q-stepbtn.stepper-btn:disabled { opacity: .4; }

/* The count chip is coloured by its value, not by its row. */
.q-count.chip {
  height: 24px; min-width: 24px; padding-inline: 6px;
  border-radius: var(--r-xs);
  font-size: 12px; font-weight: 700;
  background: var(--silver-100); color: var(--q-ink-2);
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.q-count.chip[data-v="1"] { background: #d1fae5; color: #047857; }
.q-count.chip[data-v="2"] { background: #e0f2fe; color: #0369a1; }
.q-count.chip[data-v="3"] { background: #ede9fe; color: #6d28d9; }
.q-count.chip[data-v="4"] { background: #ffe4e6; color: #be123c; }
.q-count.is-pop { animation: q-pop 240ms var(--q-ease-out); }
@keyframes q-pop {
  0%   { transform: scale(1); }
  38%  { transform: scale(1.16); }
  100% { transform: scale(1); }
}

.q-steprow__label.stepper-label {
  font-size: 15.5px; font-weight: 500;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color var(--dur-2) var(--ease);
}
.q-steprow.is-zero .q-steprow__label { color: var(--text-muted); }

/* Help chip and its tooltip */
.q-help {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; flex: none; padding: 0;
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; line-height: 1;
  color: var(--text-muted); cursor: help;
  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.q-help:hover, .q-help:focus-visible { color: var(--navy); border-color: var(--navy); }

.q-tip {
  position: absolute; bottom: calc(100% + 9px); left: 50%;
  width: max-content; max-width: 220px;
  padding: 9px 12px;
  background: var(--ink); color: var(--white);
  border-radius: var(--r-sm);
  font-size: 12.5px; font-weight: 400; line-height: 1.45; text-align: left;
  letter-spacing: 0; text-transform: none;
  box-shadow: 0 4px 10px rgba(11, 26, 51, .18), 0 16px 34px rgba(11, 26, 51, .2);
  opacity: 0; transform: translate(-50%, 4px) scale(.97);
  transform-origin: bottom center;
  transition: opacity 140ms var(--q-ease-out), transform 140ms var(--q-ease-out);
  pointer-events: none; z-index: 20;
}
.q-help:hover .q-tip,
.q-help:focus-visible .q-tip,
.q-help.is-open .q-tip { opacity: 1; transform: translate(-50%, 0) scale(1); }

/* ── Segmented control ──────────────────────────────────────────────────
   Radio inputs rather than the shared button-based .segmented, so that
   arrow keys move between options for free. Styled to match it.        */

.q-seg {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  gap: 4px; padding: 4px;
  background: var(--silver-100);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
}
.q-seg--wrap { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 540px) {
  .q-seg--wrap { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); }
}

.q-seg__opt { position: relative; display: block; min-width: 0; }
.q-seg__opt input {
  position: absolute; inset: 0; width: 100%; height: 100%;
  margin: 0; opacity: 0; cursor: pointer;
}
.q-seg__face {
  display: flex; align-items: center; justify-content: center;
  min-height: 38px; padding: 6px 6px;
  border-radius: var(--r-pill);
  font-size: 13.5px; font-weight: 600; line-height: 1.2; text-align: center;
  color: var(--q-ink-2);          /* AA on the silver-100 track */
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
}
.q-seg__opt input:hover + .q-seg__face { color: var(--navy-700); }
.q-seg__opt input:checked + .q-seg__face {
  background: var(--white); color: var(--navy); box-shadow: var(--shadow-1);
}
.q-seg__opt input:focus-visible + .q-seg__face {
  outline: 3px solid var(--accent); outline-offset: 1px;
}

/* ── Switch ─────────────────────────────────────────────────────────── */

.q-switch {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 15px 17px;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--white); cursor: pointer;
  transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.q-switch:hover { border-color: var(--line-strong); background: var(--silver-100); }
.q-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.q-switch__track {
  position: relative; flex: none;
  width: 42px; height: 25px; margin-top: 1px;
  background: var(--line-strong); border-radius: var(--r-pill);
  transition: background var(--dur-2) var(--ease);
}
.q-switch__thumb {
  position: absolute; top: 3px; left: 3px;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--white); box-shadow: 0 1px 3px rgba(11, 26, 51, .3);
  transition: transform var(--dur-2) var(--ease);
}
.q-switch input:checked + .q-switch__track { background: var(--navy); }
.q-switch input:checked + .q-switch__track .q-switch__thumb { transform: translateX(17px); }
.q-switch input:focus-visible + .q-switch__track { outline: 3px solid var(--accent); outline-offset: 2px; }
.q-switch__text { display: flex; flex-direction: column; gap: 2px; }
.q-switch__title { font-size: 15.5px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
.q-switch__sub { font-size: 13px; color: var(--text-muted); }

/* ── Suggested vehicle ──────────────────────────────────────────────── */

.q-vehicle { gap: 9px; padding-left: 13px; }
.q-vehicle .icon { width: 18px; height: 18px; }
.q-vehicle strong { font-weight: 700; }
.q-vehicle.is-pop { animation: q-pop 260ms var(--q-ease-out); }

/* ── Dimensions disclosure ──────────────────────────────────────────── */

.q-disclosure { border-top: 1px solid var(--line); padding-top: 16px; }
.q-disclosure > summary {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 600; color: var(--text-muted);
  cursor: pointer; list-style: none;
  transition: color var(--dur-2) var(--ease);
}
.q-disclosure > summary::-webkit-details-marker { display: none; }
.q-disclosure > summary:hover { color: var(--navy); }
.q-disclosure__chev { width: 15px; height: 15px; transition: transform var(--dur-2) var(--ease); }
.q-disclosure[open] .q-disclosure__chev { transform: rotate(90deg); }
.q-disclosure__body { padding-top: 14px; display: grid; gap: 12px; }

/* ── The hill ───────────────────────────────────────────────────────── */

/* Below 480px the tick row is bled toward the card edge, to buy the
   winning tick and its price the width they need. */
.q-chart { margin-inline: -14px; }
.q-hill { display: block; width: 100%; height: 116px; }
@media (min-width: 480px) {
  .q-chart { margin-inline: -2px; }
  .q-hill { height: 132px; }
}

/* Flex rather than a fixed 5-column grid: the winning tick is set in a
   larger size, so it claims more of the row and its neighbours give way,
   the same nudge the reference makes. */
.q-ticks {
  display: flex; align-items: flex-start; gap: 2px; margin-top: 2px;
}
@media (min-width: 480px) { .q-ticks { gap: 4px; } }

.q-tick {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-height: 80px; padding: 6px 2px 4px;
  background: none; border: 0; border-radius: var(--r-xs);
  cursor: pointer; text-align: center;
  transition: background var(--dur-2) var(--ease), flex-grow var(--dur-2) var(--ease);
}
.q-tick.is-best { flex-grow: 1.95; }
.q-tick.is-second { flex-grow: 1.6; }
@media (hover: hover) and (pointer: fine) {
  .q-tick:hover { background: var(--navy-050); }
}
.q-tick:first-child { align-items: flex-start; text-align: left; }
.q-tick:last-child { align-items: flex-end; text-align: right; }

/* One 30px band holds every tick name, so a 12px label and a 24px one
   share the same optical centre line and nothing shifts on re-rank. */
.q-tick__name {
  position: relative; max-width: 100%;
  display: flex; align-items: center; justify-content: center; min-height: 30px;
  font-size: 11px; font-weight: 500; line-height: 1.2;
  letter-spacing: -.005em; color: var(--text-muted); white-space: nowrap;
  transition: color var(--dur-2) var(--ease);
}
.q-tick:first-child .q-tick__name { justify-content: flex-start; }
.q-tick:last-child .q-tick__name { justify-content: flex-end; }
.q-tick__name::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 1px;
  height: 2px; border-radius: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: center;
  transition: transform var(--dur-2) var(--ease);
}
.q-tick.is-selected .q-tick__name { color: var(--ink); font-weight: 700; }
.q-tick.is-selected .q-tick__name::after { transform: scaleX(1); }

.q-tick.is-best .q-tick__name {
  font-size: clamp(16px, 4.2vw, 24px); font-weight: 700;
  line-height: 1.08; letter-spacing: -.028em; color: var(--ink);
}
.q-tick.is-second .q-tick__name { font-size: 13px; font-weight: 700; color: var(--ink); }

.q-tick__cap { font-size: 11px; font-weight: 500; color: var(--text-muted); line-height: 1.3; }
.q-tick__price {
  font-size: 11px; font-weight: 700; color: var(--navy);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap;
}

@media (min-width: 480px) {
  .q-tick__name { font-size: 12.5px; }
  .q-tick.is-second .q-tick__name { font-size: 15px; }
  .q-tick__cap { font-size: 12px; }
  .q-tick__price { font-size: 12.5px; letter-spacing: -.015em; }
}

.q-why {
  margin: 0; padding: 13px 15px;
  background: var(--silver-100); border-radius: var(--r-sm);
  font-size: 14px; line-height: 1.5; color: var(--q-ink-2);
}
.q-why strong { color: var(--ink); font-weight: 700; }

/* ── Continue ───────────────────────────────────────────────────────── */

.q-actions { margin-top: 26px; }

.q-cta {
  position: relative; isolation: isolate; overflow: hidden;
  display: block; width: 100%; height: 50px;
  padding: 0; border: 0; border-radius: var(--r-sm);
  background: var(--navy); color: var(--white);
  font-size: 16px; font-weight: 600; letter-spacing: -.011em; cursor: pointer;
  transition: background 300ms var(--q-ease-out), color 300ms var(--q-ease-out),
              opacity var(--dur-2) var(--ease), transform var(--dur-1) var(--ease);
}
.q-cta:active { transform: scale(.99); }
.q-cta.is-disabled { opacity: .45; cursor: not-allowed; }
.q-cta.is-busy { pointer-events: none; }

.q-cta__dot {
  position: absolute; left: 24px; top: 50%; z-index: -1;
  width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; background: var(--navy);
  opacity: 0;
  transition: transform 300ms ease-out, opacity 300ms ease-out;
}
.q-cta__face {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  transition: transform 300ms ease-out, opacity 300ms ease-out;
}
.q-cta__face .icon { width: 17px; height: 17px; }
.q-cta__face--hover { opacity: 0; transform: translateX(-24px); color: var(--white); }
.q-cta.is-busy .q-cta__face { opacity: 0; }

.q-cta__spinner {
  position: absolute; top: 50%; left: 50%;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: var(--white); border-radius: 50%;
  opacity: 0;
}
.q-cta.is-busy .q-cta__spinner { opacity: 1; animation: q-spin 620ms linear infinite; }
@keyframes q-spin { to { transform: rotate(360deg); } }

.q-hint {
  margin: 10px 0 0; font-size: 13px; font-weight: 600;
  color: #c2373b; text-align: center;
}

/* Desktop rests pale and floods with navy ink on hover. */
@media (min-width: 1024px) {
  .q-cta {
    height: 56px; font-size: 18px;
    background: var(--silver-100); color: var(--ink);
  }
  .q-cta__spinner { border-color: rgba(11, 26, 51, .22); border-top-color: var(--ink); }
  .q-cta.is-busy { background: var(--navy); }
  .q-cta.is-busy .q-cta__spinner { border-color: rgba(255, 255, 255, .35); border-top-color: var(--white); }
}
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  .q-cta:not(.is-disabled):not(.is-busy):hover { color: var(--white); }
  .q-cta:not(.is-disabled):not(.is-busy):hover .q-cta__dot { opacity: 1; transform: scale(110); }
  .q-cta:not(.is-disabled):not(.is-busy):hover .q-cta__face--rest { opacity: 0; transform: translateX(40px); }
  .q-cta:not(.is-disabled):not(.is-busy):hover .q-cta__face--hover { opacity: 1; transform: translateX(0); }
}

/* ── Sent ───────────────────────────────────────────────────────────── */

.q-done { text-align: center; animation: q-enter 320ms var(--ease) both; }
.q-done .q-title:focus { outline: none; }
.q-done .lede { margin-inline: auto; }
.q-done__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; margin-bottom: 18px;
  border-radius: 50%; background: var(--navy-100); color: var(--navy);
}
.q-done__mark .icon { width: 26px; height: 26px; stroke-width: 2.1; }

.q-recap { margin: 26px 0 0; padding: 0; text-align: left; border-top: 1px solid var(--line); }
.q-recap > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; padding: 11px 2px; border-bottom: 1px solid var(--line);
}
.q-recap dt { font-size: 13px; color: var(--text-muted); flex: none; }
.q-recap dd { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--ink); text-align: right; }

.q-done__actions {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px;
}

/* ── Summary strip ──────────────────────────────────────────────────── */

/* Fixed three-up facts plus the price, so nothing reflows into ragged
   rows as the shipment description grows. */
.q-summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "facts price" "note note";
  align-items: center; gap: 6px 18px;
  margin-top: 14px; padding: 15px 19px;
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
}
.q-summary[hidden] { display: none; }
.q-summary__facts {
  grid-area: facts;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 14px; margin: 0; min-width: 0;
}
.q-summary__fact { min-width: 0; }
.q-summary__fact dt {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
}
.q-summary__fact dd {
  margin: 2px 0 0; font-size: 13.5px; font-weight: 600; color: var(--ink);
  line-height: 1.35; letter-spacing: -.008em; overflow-wrap: anywhere;
}
.q-summary__amount {
  grid-area: price; text-align: right;
  margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.025em;
  color: var(--navy); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.q-summary__caption {
  grid-area: note; text-align: right;
  margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--text-muted);
}

/* Narrow: facts two-up, then the total under a rule like a receipt. */
@media (max-width: 519px) {
  .q-summary {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "facts" "price" "note";
    gap: 0;
  }
  .q-summary__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
  .q-summary__amount {
    margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line);
  }
  .q-summary__caption { text-align: left; margin-top: 3px; }
}

.q-legal {
  margin: 18px auto 0; max-width: 52ch;
  font-size: 12.5px; line-height: 1.55; color: var(--text-muted); text-align: center;
}
.q-legal a { color: var(--navy); font-weight: 600; white-space: nowrap; }

/* ── Reduced motion ─────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .q-card.is-animating .q-block,
  .q-done { animation: none; }
  .q-cta__dot { display: none; }
}