/* ============================================================
   WYVERN FREIGHT — GET A QUOTE
   Structure of the live quote form (wyvernfreight.com/contact/, 2026-10-05):
   one white card, a 01 | 02 step tab bar, an Intercity | Cross-border switch,
   fields in a two-column grid, dropdowns for every choice. Drawn with this
   site's tokens: field style from the Integrity Line (legal.css .int-f /
   .int-sel), cut-corner buttons, ink for active states (red is reserved for
   the Get a Quote button).
   Source: tools/quote/quote.css (copied by make-quote.cjs).
   ============================================================ */
/* `hidden` must win over the grid/flex display rules below (and legal.css .int-f) */
.q-page [hidden]{display:none !important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- page + card ----------
   Light grey ground, white card starting below the banner (live form; Carbon: no shadows).
   The card spans the container: left edge = logo, right edge = Get a Quote. */
.q-page{background:var(--hover)}
.q-page .int-c{padding-top:var(--s-9);padding-bottom:var(--s-10)}
.q-page .int-c > .q-col{grid-column:1 / -1;display:block}
.q-col > .q-form,.q-col > .q-done{background:var(--canvas);padding:0 48px 48px}
.q-col > .q-done{padding:40px 48px;border-top:3px solid var(--ok)}

/* Banner photo: keep the two staff and the forklift in frame */
.q-hero .doc-hero-img img{transform:none;object-position:62% 18%}

/* ---------- step tab bar (live: "01 Contact & route | 02 Shipment details") ---------- */
.q-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 -48px;padding:0;list-style:none;border-bottom:1px solid var(--line)}
.q-tab{display:flex;align-items:center;gap:12px;min-height:64px;margin:0;padding:0 48px;
  position:relative;text-align:left;font:500 15px/1.2 var(--sans);color:var(--muted);transition:color var(--t-fast) var(--ease)}
.q-tab + .q-tab{border-left:1px solid var(--line)}
.q-tab-n{display:inline-grid;place-items:center;min-width:30px;height:26px;padding:0 6px;background:var(--hover);
  font:500 12px/1 var(--mono);letter-spacing:.04em;color:var(--muted);transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.q-tab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.q-tab::before{display:none !important} /* no list bullets from base styles */
.q-tab.is-on{color:var(--ink)}
.q-tab.is-on::after{transform:none}
.q-tab.is-on .q-tab-n,.q-tab.is-done .q-tab-n{background:var(--ink);color:#fff}

/* ---------- steps ---------- */
.q-form{display:grid;grid-template-columns:minmax(0,1fr)}
/* minmax(0,1fr): the auto track grew to its widest child and pushed the card past a 320px screen */
.q-step{margin:0;padding:40px 0 0;border:0;min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:28px}
.q-js .q-step{display:none}
.q-js .q-step.is-on{display:grid;animation:qIn .35s cubic-bezier(.32,.72,0,1)}
@keyframes qIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* Without JS both steps show, one after the other */
.q-form:not(.q-js) .q-step + .q-step{margin-top:40px;border-top:1px solid var(--line)}
.q-form:not(.q-js) [data-next]{display:none}
.q-head{display:grid;gap:8px}
.q-h{font:500 clamp(26px,2.2vw,32px)/1.15 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.q-h:focus{outline:none}
.q-intro{margin:0;font:400 15px/1.5 var(--sans);color:var(--muted)}

/* ---------- Intercity | Cross-border switch (two departments) ---------- */
.q-switch{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--line-strong)}
.q-switch label{position:relative;cursor:pointer}
.q-switch label + label{border-left:1px solid var(--line-strong)}
.q-switch input{position:absolute;opacity:0;pointer-events:none}
.q-switch span{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 16px;font:500 15px/1.2 var(--sans);color:var(--ink-2);
  transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.q-switch label:hover span{background:var(--hover)}
.q-switch input:checked + span{background:var(--ink);color:#fff}
.q-switch input:focus-visible + span{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- two-column field grid (live layout) ---------- */
.q-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-flow:row dense;gap:22px 24px;align-items:start}
/* grid items may shrink below their content (long border-post summaries) */
.q-grid > *,.q-end > *{min-width:0}
.q-page .int-f{grid-template-columns:minmax(0,1fr)} /* the field's own column must not grow with its content */
.q-span{grid-column:1 / -1}
.q-page .int-f textarea{min-height:120px}
/* Departure | Destination: two columns with the same fields, so rows line up */
.q-ends{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 24px}
.q-end{display:grid;gap:22px;align-content:start}
.q-sub{margin:0;padding-bottom:10px;border-bottom:1px solid var(--line);font:500 var(--fs-label)/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
/* Empty dropdowns read as placeholders, like the text fields */
.q-page .int-sel select:has(option[value=""]:checked){color:var(--subtle)}
.q-page .int-sel option{color:var(--ink)}
/* Intercity: the destination country follows the departure country */
.q-page .int-f select:disabled{background:var(--hover);color:var(--muted);cursor:not-allowed;opacity:1}

/* Phone: dialling code + number in one field (live). The native select sits on top of a
   short "+27" readout, so the list keeps full country names. */
.q-phone{display:grid;grid-template-columns:96px minmax(0,1fr);border:1px solid var(--line-field);border-radius:0;background:var(--canvas);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.q-phone:hover{border-color:var(--muted)}
.q-phone:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(29,78,216,.18)}
.q-phone:has([aria-invalid="true"]){border-color:var(--red)}
.q-dial{position:relative;display:flex;align-items:center;gap:8px;padding:0 14px;border-right:1px solid var(--line)}
.q-dial-v{font:500 16px/1 var(--sans);color:var(--ink)}
.q-dial svg{color:var(--muted)}
.q-page .q-dial select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
.q-page .q-phone input{border:0;height:46px;box-shadow:none !important;background:transparent}

/* Border posts: multi-select dropdown (live). Closed it looks like the other dropdowns. */
.q-ms{position:relative}
.q-ms-btn{appearance:none;-webkit-appearance:none;display:flex;align-items:center;gap:12px;width:100%;height:48px;padding:0 16px 0 14px;text-align:left;cursor:pointer;
  border:1px solid var(--line-field);border-radius:0;background:var(--canvas);font:400 16px/1.2 var(--sans);color:var(--ink);
  transition:border-color var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease)}
.q-ms-v{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.q-ms-v.is-empty{color:var(--subtle)}
.q-ms-btn svg{flex:none;color:var(--muted);transition:transform var(--t-fast) var(--ease)}
.q-ms-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.q-ms-btn:hover{border-color:var(--muted)}
.q-ms-btn:focus-visible,.q-ms-btn[aria-expanded="true"]{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(29,78,216,.18)}
.q-ms-btn[aria-invalid="true"]{border-color:var(--red)}
.q-ms-list{position:absolute;z-index:20;left:0;right:0;top:calc(100% + 4px);max-height:300px;overflow-y:auto;padding:6px 0;
  background:var(--canvas);border:1px solid var(--ink);box-shadow:var(--shadow-overlay)}
.q-ms-list label{display:flex;align-items:center;gap:12px;min-height:42px;padding:0 14px;cursor:pointer;font:400 15px/1.3 var(--sans);
  letter-spacing:0;text-transform:none;color:var(--ink)}
.q-ms-list label:hover{background:var(--hover)}
.q-ms-list input{flex:none;width:18px;height:18px;margin:0;accent-color:var(--ink);cursor:pointer}
/* the three general answers sit apart from the named posts */
.q-ms-list label:nth-last-child(4){margin-top:6px;border-top:1px solid var(--line);padding-top:6px;min-height:48px}

/* ---------- consent + step navigation ---------- */
.q-consent{margin:0;font:400 14px/1.55 var(--sans);color:var(--muted)}
.q-consent a,.q-done a{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px;overflow-wrap:anywhere}
.q-consent a:hover,.q-done a:hover{text-decoration-color:var(--ink)}
/* Form footer, Maersk order (user 2026-10-25): filled primary first on the left, outlined Save draft, then plain Back */
.q-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:12px;padding-top:28px;border-top:1px solid var(--line)}
.q-nav .btn-t.q-back{margin-left:12px}   /* plain Back only; an outlined Back sits at the normal 12px gap */
.q-back{appearance:none;-webkit-appearance:none;border:0;background:none;cursor:pointer}

/* ---------- email ready ---------- */
.q-done:focus{outline:none}
.q-done h2{font:500 clamp(24px,2vw,30px)/1.15 var(--sans);letter-spacing:-.02em;color:var(--ink)}
.q-done p{margin-top:12px;font:400 16px/1.6 var(--sans);color:var(--ink-2)}
.q-done-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:24px}
.q-done-acts > .btn-t{margin-left:12px}
.q-done-acts .btn-t{appearance:none;border:0;background:none;cursor:pointer}
.q-copied{font:500 14px/1.4 var(--sans) !important;color:var(--ok) !important}
.q-copied:empty{display:none}

/* ---------- required / optional markers (Baymard: mark both) ---------- */
.q-page .int-f .opt{margin-left:2px;font:400 13px/1 var(--sans);letter-spacing:0;text-transform:none;color:var(--muted)}

/* ---------- error summary (GOV.UK pattern): top of the step, links to each field ---------- */
.q-errsum{padding:20px 24px;border:2px solid var(--red);background:var(--canvas)}
.q-errsum:focus{outline:3px solid var(--focus);outline-offset:2px}
.q-errsum-h{margin:0 0 10px;font:500 19px/1.3 var(--sans);color:var(--ink)}
.q-errsum-list{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.q-errsum-list li::before{display:none !important}
.q-errsum-list a{font:500 15px/1.45 var(--sans);color:var(--red);text-decoration:underline;text-underline-offset:3px}
.q-errsum-list a:hover{color:var(--red-press)}
.q-errsum-list a:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ---------- check your request (GOV.UK check answers) ---------- */
.q-col > .q-review{display:grid;gap:24px;background:var(--canvas);padding:40px 48px 48px}
.q-review:focus{outline:none}
.q-rev-body{display:grid;gap:28px}
.q-rev-top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.q-rev-top h3{margin:0;font:500 var(--fs-label)/1.2 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.q-rev-sec dl{margin:0}
.q-rev-sec dl > div{display:grid;grid-template-columns:minmax(140px,1fr) minmax(0,2fr);gap:4px 24px;padding:12px 0;border-bottom:1px solid var(--line)}
.q-rev-sec dt{font:500 15px/1.5 var(--sans);color:var(--muted)}
.q-rev-sec dd{margin:0;font:400 16px/1.5 var(--sans);color:var(--ink);overflow-wrap:anywhere;white-space:pre-line}

/* ---------- confirmation: reference + what happens next ---------- */
.q-ref{padding:14px 18px;background:var(--hover);border-left:3px solid var(--ok)}
.q-ref strong{font:500 17px/1.4 var(--mono);letter-spacing:.04em;color:var(--ink)}
.q-next-h{margin-top:24px;font:500 18px/1.3 var(--sans);color:var(--ink)}
.q-next{margin:10px 0 0;padding-left:22px;display:grid;gap:6px;font:400 16px/1.6 var(--sans);color:var(--ink-2)}

@media (prefers-reduced-motion:reduce){
  .q-js .q-step.is-on{animation:none}
  .q-tab::after{transition:none}
}

/* ---------- tablet + phone ---------- */
@media (max-width:899px){
  .q-hero .doc-hero-img img{object-position:66% 40%}
  .q-page .int-c{padding-top:48px;padding-bottom:72px}
  .q-col > .q-form{padding:0 20px 28px}
  .q-col > .q-done{padding:28px 20px}
  .q-col > .q-review{padding:28px 20px}
  .q-tabs{margin:0 -20px}
  .q-tab{padding:0 20px;min-height:56px;font-size:14px;gap:10px}
  .q-step{padding-top:28px;gap:24px}
  /* The floating back-to-top button covered the buttons; each step is short on a phone */
  body:has(.q-page) .to-top,body:has(.q-page) .to-track{display:none}
}
@media (max-width:699px){
  .q-grid,.q-ends{grid-template-columns:minmax(0,1fr)}
  .q-tab{flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:10px 16px;font-size:13px;line-height:1.25}
  .q-tabs{margin:0 -20px}
  /* Back above, full-width Submit below */
  .q-nav{flex-direction:column;align-items:stretch}
  .q-nav .btn-p{width:100%}
  .q-nav .q-back{align-self:center;margin-left:0}
  .q-rev-sec dl > div{grid-template-columns:minmax(0,1fr)}
}