/* Website header (top bar + main bar) – shared by the website, booking page and customer account */
.s-topbar, .s-head { --text: #0f172a; --muted: #64748b; --line: #e2e8f0; --soft: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif; line-height: 1.5; }
.s-topbar *, .s-head * { box-sizing: border-box; }
.s-topbar .s-wrap, .s-head .s-wrap { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
.s-head { position: sticky; top: 0; z-index: 10; background: #fff; border-bottom: 1px solid var(--line); }
.s-head .s-wrap { display: flex; align-items: center; gap: 20px; min-height: 68px; flex-wrap: wrap; }
.s-logo { font-weight: 800; font-size: 1.3rem; color: var(--text); text-decoration: none; }
.s-logo img { max-height: 48px; display: block; }
.s-nav { display: flex; gap: 18px; align-items: center; margin-left: auto; flex-wrap: wrap; }
.s-nav a { color: var(--text); text-decoration: none; font-weight: 600; }
.s-nav a.on, .s-nav a:hover { color: var(--brand); }
.s-phone { font-weight: 800; color: var(--text); text-decoration: none; }
.s-head-dark { background: #1e293b; border-bottom: 0; }
.s-head-dark .s-logo, .s-head-dark .s-nav a, .s-head-dark .s-phone { color: #fff; }
.s-head-dark .s-nav a:not(.s-btn) { padding: 6px 10px; border-radius: 6px; }
.s-head-dark .s-nav > a:not(.s-btn):hover, .s-head-dark .s-nav a.on { background: rgba(255,255,255,.1); color: #fff; }
.s-head-dark .s-dd-menu a { color: #334155; }
/* Header: top bar + light navigation (LaunchControl / garage style) */
:root { --accent: var(--brand); }
.s-topbar { background: #fff; border-bottom: 1px solid #e5e7eb; font-size: .92rem; }
.s-topbar .s-wrap { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 46px; flex-wrap: wrap; }
.s-tb-left, .s-tb-right { display: flex; align-items: center; gap: 28px; }
.s-tb-right { gap: 16px; }
.s-topbar a { color: #334155; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.s-topbar a:hover { color: var(--accent); }
.s-topbar svg { color: #64748b; } .s-topbar a:hover svg { color: var(--accent); }
.s-tb-lbl { color: #94a3b8; }
.s-head.s-head-light { background: #fafafa; border-bottom: 1px solid #eef0f3; box-shadow: none; }
.s-head.s-head-light .s-wrap { min-height: 88px; flex-wrap: nowrap; gap: 24px; }
.s-head.s-head-light .s-logo { color: #0f172a; }
.s-head.s-head-light .s-logo img { max-height: 62px; }
.s-head.s-head-light .s-nav { margin: 0 auto; gap: 6px; flex-wrap: nowrap; }
.s-head.s-head-light .s-nav > a, .s-head.s-head-light .s-dd > a { color: #0f172a; font-size: 1.05rem; font-weight: 500; padding: 10px 12px; border-radius: 0; background: none; position: relative; display: inline-flex; align-items: center; gap: 4px; }
.s-head.s-head-light .s-nav > a::after, .s-head.s-head-light .s-dd > a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -2px; height: 3px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transition: transform .15s; }
.s-head.s-head-light .s-nav a.on::after, .s-head.s-head-light .s-nav > a:hover::after, .s-head.s-head-light .s-dd:hover > a::after { transform: scaleX(1); }
.s-head.s-head-light .s-nav a.on { font-weight: 600; }
.s-book { margin-left: auto; background: var(--accent); color: #fff !important; text-decoration: none; font-weight: 700; font-size: 1.05rem; padding: 14px 30px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 35%, transparent); transition: transform .15s, filter .15s; }
.s-book:hover { filter: brightness(1.08); transform: translateY(-1px); }
.s-head-dark .s-book { box-shadow: none; padding: 10px 22px; }
.s-dd { position: relative; }
.s-dd-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 10px; background: #fff; border: 1px solid #e5e7eb; border-radius: 14px; box-shadow: 0 20px 40px rgba(15,23,42,.14);
  padding: 18px; display: none; grid-template-columns: repeat(3, minmax(170px, 1fr)); gap: 14px 22px; min-width: 620px; z-index: 30; }
.s-dd-menu::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
.s-dd:hover .s-dd-menu, .s-dd:focus-within .s-dd-menu { display: grid; }
.s-dd-col { display: flex; flex-direction: column; gap: 2px; }
.s-dd-col strong { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--accent); margin-bottom: 4px; }
.s-dd-col a { color: #334155 !important; text-decoration: none; padding: 4px 0; font-size: .92rem; }
.s-dd-col a:hover { color: var(--accent) !important; }
.s-dd-all { grid-column: 1 / -1; color: var(--accent) !important; font-weight: 700; text-decoration: none; border-top: 1px solid #eef0f3; padding-top: 10px; }
.s-burger { display: none; border: 0; background: none; color: inherit; cursor: pointer; margin-left: auto; }
.s-head-dark .s-dd > a { color: #fff; text-decoration: none; font-weight: 600; padding: 6px 10px; display: inline-flex; gap: 4px; align-items: center; }
@media (max-width: 980px) {
  .s-tb-lbl { display: none; } .s-tb-left { gap: 16px; }
  .s-head.s-head-light .s-wrap { flex-wrap: wrap; min-height: 70px; }
  .s-burger { display: inline-flex; }
  .s-head .s-nav { display: none !important; width: 100%; flex-direction: column; align-items: stretch; margin: 0 0 12px !important; }
  .s-head.open .s-nav { display: flex !important; }
  .s-head.s-head-light .s-nav > a::after, .s-head.s-head-light .s-dd > a::after { display: none; }
  .s-dd-menu { position: static; transform: none; min-width: 0; grid-template-columns: 1fr; box-shadow: none; margin: 0 0 8px; }
  .s-dd:hover .s-dd-menu { display: none; } .s-head.open .s-dd:focus-within .s-dd-menu { display: grid; }
  .s-book { order: 2; margin-left: 0; padding: 10px 18px; font-size: .95rem; }
  .s-head.s-head-light .s-logo img { max-height: 46px; }
}
@media (max-width: 560px) { .s-topbar .s-wrap { justify-content: center; } .s-tb-left a:nth-child(2) { display: none; } }
@media (max-width: 980px) {
  .s-head .s-logo { order: 0; }
  .s-head .s-book { order: 1; margin-left: auto; padding: 9px 16px; font-size: .9rem; }
  .s-head .s-burger { order: 2; margin-left: 4px; }
  .s-head .s-nav { order: 3; }
}
@media (max-width: 380px) { .s-head .s-logo { font-size: 1.05rem; } .s-head.s-head-light .s-logo img { max-height: 38px; } }
/* Menu button: always visible against the bar colour */
.s-burger { width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 10px; border: 1px solid rgba(15,23,42,.15) !important; color: #0f172a; }
.s-head-dark .s-burger { color: #fff; border-color: rgba(255,255,255,.35) !important; }
.s-head.open .s-burger { background: rgba(127,127,127,.15) !important; }
@media (max-width: 980px) {
  .s-head-dark .s-nav > a, .s-head-dark .s-dd > a { color: #fff; padding: 12px 6px; }
  .s-head-dark.open .s-nav { border-top: 1px solid rgba(255,255,255,.12); padding-top: 6px; }
}

/* ---- Shared customer UI: GB plate, vehicle card, MOT status, steps, modal ---- */
.vx-ui, .vx-modal { --vx: var(--brand, var(--primary, #a01e1e)); }
.vx-plate { flex: 1; display: flex; align-items: stretch; border: 3px solid #111; border-radius: 10px; overflow: hidden; background: #f5c400; min-width: 0; min-height: 64px; }
.vx-band { background: #2337b4; color: #fff; width: 58px; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: .78rem; font-family: -apple-system, "Segoe UI", Arial, sans-serif; }
.vx-band b { font-weight: 800; font-size: .95rem; line-height: 1; }
.vx-plate input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; text-align: center; font: 800 1.9rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace !important; letter-spacing: .14em; text-transform: uppercase; padding: 10px 8px !important; color: #111 !important; }
.vx-plate input::placeholder { color: rgba(0,0,0,.42); }
.vx-plate input:focus { outline: none; }
.vx-plate:focus-within { box-shadow: 0 0 0 4px color-mix(in srgb, var(--vx) 25%, transparent); }
.vx-plate-row { display: flex; gap: 14px; align-items: stretch; }
.vx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 0; border-radius: 10px; padding: 0 30px; min-height: 52px; background: var(--vx); color: #fff !important; font: inherit; font-weight: 700; font-size: 1.05rem; cursor: pointer; text-decoration: none; white-space: nowrap; }
.vx-btn:hover { filter: brightness(1.08); }
.vx-btn:disabled, .vx-btn.dim { background: color-mix(in srgb, var(--vx) 45%, #fff); cursor: default; filter: none; }
.vx-btn.ghost { background: #fff; color: #374151 !important; border: 1px solid #d1d5db; }
.vx-btn.ghost:hover { background: #f9fafb; filter: none; }
.vx-btn.wide { width: 100%; }
.vx-plate-row .vx-btn { min-width: 150px; }
@media (max-width: 560px) { .vx-plate-row { flex-direction: column; } .vx-plate input { font-size: 1.5rem !important; } }
.vx-sep { border: 0; border-top: 1px solid #e5e7eb; margin: 22px 0; }
.vx-veh { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; border: 1px solid #d1d5db; border-radius: 14px; padding: 18px 22px; background: #fff; }
.vx-veh small { display: block; color: #6b7280; margin-top: 2px; }
.vx-mini { display: inline-block; background: #f5c400; border: 2px solid #111; border-radius: 6px; padding: 2px 10px; font: 800 1.1rem/1.3 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; color: #111; }
.vx-vname { margin: 10px 0 0; font-size: 1.25rem; font-weight: 500; color: #111827; }
.vx-vname span { color: #6b7280; }
.vx-edit { border: 0; background: none; color: var(--vx); font: inherit; font-weight: 600; font-size: 1.05rem; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 4px; }
.vx-mot { display: flex; align-items: flex-start; gap: 14px; margin-top: 16px; padding: 16px 20px; border-radius: 12px; border: 1px solid #bbf7d0; background: #f0fdf4; color: #16a34a; }
.vx-mot > div { flex: 1; } .vx-mot strong { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; }
.vx-mot em { font-style: normal; font-weight: 500; font-size: .9rem; background: #dcfce7; color: #166534; border-radius: 6px; padding: 2px 9px; }
.vx-mot small { display: block; color: #6b7280; margin-top: 3px; } .vx-mot small b { color: #4b5563; }
.vx-mot > span { font-weight: 500; white-space: nowrap; }
.vx-mot.soon { border-color: #fde68a; background: #fffbeb; color: #b45309; } .vx-mot.soon em { background: #fef3c7; color: #92400e; }
.vx-mot.bad { border-color: #fecaca; background: #fef2f2; color: #dc2626; } .vx-mot.bad em { background: #fee2e2; color: #991b1b; }
.vx-err { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; border-radius: 10px; padding: 10px 14px; margin: 12px 0 0; }
.vx-label { display: block; font-weight: 600; color: #374151; margin: 0 0 8px; }
.vx-label i, .vx-req { color: #dc2626; font-style: normal; }
.vx-title { font-size: 2rem; margin: 0 0 6px; color: #111827; letter-spacing: -.02em; }
.vx-sub { color: #6b7280; margin: 0 0 24px; font-size: 1.08rem; }
.vx-link { border: 0; background: none; padding: 0; color: var(--vx); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
/* numbered stepper (modal) */
.vx-stepper { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.vx-stepper span { display: inline-flex; align-items: center; gap: 10px; color: #6b7280; font-weight: 500; white-space: nowrap; }
.vx-stepper span i { width: 32px; height: 32px; border-radius: 50%; background: #d1d5db; color: #4b5563; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-weight: 600; }
.vx-stepper span.on { color: #111827; } .vx-stepper span.on i, .vx-stepper span.done i { background: var(--vx); color: #fff; }
.vx-stepper b { flex: 1; min-width: 16px; height: 2px; background: #d1d5db; }
@media (max-width: 640px) { .vx-stepper span:not(.on) em { display: none; } }
.vx-stepper em { font-style: normal; }
/* progress bar (booking) */
.vx-progress { display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: 12px; margin: 26px 0 14px; }
.vx-progress i { height: 8px; border-radius: 99px; background: #d1d5db; transition: background .2s; }
.vx-progress i.on { background: var(--vx); }
.vx-stepno { text-align: center; color: #6b7280; margin: 0 0 26px; }
/* modal */
.vx-modal { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(17,24,39,.55); backdrop-filter: blur(3px); }
.vx-modal[hidden] { display: none; }
.vx-dialog { background: #fff; border-radius: 24px; width: min(720px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; box-shadow: 0 30px 80px rgba(0,0,0,.35); color: #111827; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Arial, sans-serif; }
.vx-dhead { display: flex; justify-content: space-between; align-items: center; padding: 22px 30px; border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; background: #fff; z-index: 1; border-radius: 24px 24px 0 0; }
.vx-dhead span { letter-spacing: .16em; font-weight: 700; color: #6b7280; font-size: .9rem; text-transform: uppercase; }
.vx-x { border: 0; background: none; cursor: pointer; color: #4b5563; padding: 4px; display: inline-flex; }
.vx-dbody { padding: 26px 30px 30px; }
@media (max-width: 560px) { .vx-dbody { padding: 20px 18px 24px; } .vx-dhead { padding: 18px; } .vx-title { font-size: 1.6rem; } }
.vx-back { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; color: #6b7280; font: inherit; font-size: 1.05rem; cursor: pointer; padding: 0; margin-bottom: 22px; }
.vx-back.box { border: 1px solid #d1d5db; border-radius: 10px; padding: 12px 20px; color: #374151; }
.vx-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.vx-fields .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .vx-fields { grid-template-columns: 1fr; } }
.vx-fields input, .vx-fields textarea, .vx-fields select { width: 100%; box-sizing: border-box; border: 1px solid #d1d5db; border-radius: 10px; padding: 13px 16px; font: inherit; font-size: 1rem; background: #fff; color: #111827; }
.vx-fields textarea { min-height: 150px; resize: vertical; }
.vx-fields input:focus, .vx-fields textarea:focus { outline: none; border-color: var(--vx); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vx) 18%, transparent); }
.vx-tel { display: flex; gap: 12px; }
.vx-tel span { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #d1d5db; border-radius: 10px; padding: 0 12px; flex: 0 0 auto; }
.vx-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.vx-choice { display: grid; gap: 12px; }
.vx-choice button, .vx-choice a { display: flex; align-items: center; gap: 16px; text-align: left; border: 1px solid #e5e7eb; border-radius: 14px; padding: 16px 18px; background: #fff; cursor: pointer; font: inherit; color: #111827; }
.vx-choice button:hover, .vx-choice a:hover { border-color: var(--vx); background: color-mix(in srgb, var(--vx) 5%, #fff); }
.vx-choice i { width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, var(--vx) 12%, #fff); color: var(--vx); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.vx-choice strong { display: block; font-size: 1.08rem; } .vx-choice small { color: #6b7280; }
.vx-sum { border: 1px solid #e5e7eb; border-radius: 14px; overflow: hidden; }
.vx-sum div { display: grid; grid-template-columns: 150px 1fr auto; gap: 12px; padding: 14px 18px; border-bottom: 1px solid #f3f4f6; align-items: start; }
.vx-sum div:last-child { border-bottom: 0; }
.vx-sum dt { color: #6b7280; } .vx-sum dd { margin: 0; white-space: pre-line; color: #111827; }
@media (max-width: 560px) { .vx-sum div { grid-template-columns: 1fr auto; } .vx-sum dt { grid-column: 1 / -1; } }
.vx-done { text-align: center; padding: 20px 0 6px; }
.vx-done svg { color: #16a34a; }
.vx-done h3 { font-size: 1.6rem; margin: 10px 0 6px; }
body.vx-lock { overflow: hidden; }

.vx-choice a { text-decoration: none; }
.vx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vx-chips input { position: absolute; opacity: 0; pointer-events: none; }
.vx-chips span { display: inline-block; padding: 9px 16px; border: 1px solid #d1d5db; border-radius: 99px; cursor: pointer; font-weight: 500; background: #fff; }
.vx-chips input:checked + span { background: var(--vx); border-color: var(--vx); color: #fff; }
.vx-chips input:focus-visible + span { outline: 2px solid var(--vx); outline-offset: 2px; }
.vx-modal [hidden], .vx-ui [hidden] { display: none !important; }