/* ==========================================================================
   Order flow (order.html, vfs.html, retake.html)
   ========================================================================== */
/* Light brand band behind the header, running on far enough that the step card overlaps it. */
.page-order { --band-h: 176px;
  background:
    radial-gradient(34% 160px at 88% 0, rgba(21, 101, 216, .14), transparent 70%) top / 100% var(--band-h) no-repeat,
    radial-gradient(30% 140px at 6% 100%, rgba(14, 165, 160, .15), transparent 70%) top / 100% var(--band-h) no-repeat,
    linear-gradient(180deg, #EDF4FF, #F1F9FB) top / 100% var(--band-h) no-repeat,
    var(--paper); }
@media (max-width: 640px) { .page-order { --band-h: 150px; } }
/* padding-top: the status-bar inset in standalone / installed mode (viewport-fit=cover), as .site-header. */
.checkout-header { position: sticky; top: 0; z-index: 50; padding-top: var(--safe-t); background: transparent; border-bottom: 1px solid rgba(10, 31, 61, .06); transition: background-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.checkout-header.is-scrolled { background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--line); box-shadow: 0 8px 24px -18px rgba(10, 31, 61, .4); }
.checkout-header .container { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.secure-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--success); background: var(--success-bg); border: 1px solid var(--success-line); padding: 6px 11px; border-radius: var(--r-pill); }
.header-price { text-align: right; line-height: 1.1; }
.header-price strong { font-size: 18px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.header-price span { display: block; font-size: 11px; color: var(--text-3); }
/* 16px: iOS zooms the page into any control with smaller text, and never zooms back. */
.currency-select { min-height: 40px; padding: 6px 30px 6px 10px; font-size: 16px; font-weight: 600; border-radius: var(--r-pill); background-position: right 8px center; background-size: 16px; width: auto; }
@media (max-width: 560px) { .secure-pill span { display: none; } .checkout-header .brand-name { display: none; } .header-price span { font-size: 10px; } .header-price strong { font-size: 16px; } }
.page-order .container { padding-left: max(var(--gutter), env(safe-area-inset-left)); padding-right: max(var(--gutter), env(safe-area-inset-right)); }
/* Phone landscape: the sticky header would take a fifth of the screen. */
@media (orientation: landscape) and (max-height: 500px) {
  .checkout-header { position: relative; }
  .checkout-header .container { height: 52px; }
  .stepper { margin: 12px 0 14px; padding: 10px 4px; }
}

/* Stepper */
/* Progress stepper: icon on top, label + sub-label below, connector line between steps */
.stepper { display: grid; grid-template-columns: repeat(4, 1fr); margin: 30px 0 28px; list-style: none; padding: 18px 8px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl, 20px); box-shadow: 0 20px 44px -26px rgba(10, 31, 61, .55), var(--sh-1); }
.stepper li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--text-3); min-width: 0; }
.stepper li:not(:last-child)::after { content: ''; position: absolute; top: 23px; left: calc(50% + 34px); right: calc(-50% + 34px); height: 2px; border-radius: 2px; background: var(--line-2); transition: background var(--t-slow) var(--ease); }
.stepper li[data-state="done"]:not(:last-child)::after { background: linear-gradient(90deg, var(--accent), var(--accent-3)); }
.step-ic { position: relative; z-index: 1; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 2px solid var(--line-2); color: var(--text-3); transition: background var(--t-slow) var(--ease), box-shadow var(--t-slow) var(--ease), border-color var(--t-slow) var(--ease), color var(--t-slow) var(--ease); }
.step-ic .icon { width: 21px; height: 21px; }
.step-ic .ic-done { display: none; }
.stepper li[data-state="active"] .step-ic { background: var(--grad); border-color: transparent; color: #fff; box-shadow: 0 0 0 6px var(--brand-50), 0 10px 22px -8px rgba(21, 101, 216, .6); }
.stepper li[data-state="done"] .step-ic { background: var(--accent); border-color: var(--accent); color: #fff; }
.stepper li[data-state="done"] .ic-main { display: none; }
.stepper li[data-state="done"] .ic-done { display: inline-block; }
.step-txt { display: grid; gap: 2px; min-width: 0; }
.step-txt b { font: 700 14.5px/1.25 var(--font-display); color: var(--text-2); }
.step-txt small { font-size: 12.5px; line-height: 1.3; color: var(--text-3); }
.stepper li[data-state="active"] .step-txt b { color: var(--ink); }
.stepper li[data-state="done"] .step-txt b { color: var(--accent-ink); }
@media (max-width: 640px) {
  .stepper { padding: 14px 4px 12px; margin: 20px 0 22px; }
  .step-ic { width: 40px; height: 40px; }
  .step-ic .icon { width: 18px; height: 18px; }
  .stepper li:not(:last-child)::after { top: 19px; left: calc(50% + 27px); right: calc(-50% + 27px); }
  .stepper li[data-state="active"] .step-ic { box-shadow: 0 0 0 4px var(--brand-50); }
  .step-txt b { font-size: 12px; }
  .step-txt small { display: none; }
}

.order-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; padding-bottom: 64px; }
@media (max-width: 980px) { .order-grid { grid-template-columns: minmax(0, 1fr); } }
.step-panel { animation: panel-in var(--t-slow) var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } }
.panel-head { margin-bottom: 22px; }
.panel-head h1, .panel-head h2 { margin-top: 6px; }
.panel-head p { margin-top: 8px; }
.step-nav { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.step-nav > .btn-primary { min-width: min(168px, 100%); margin-left: auto; }
.step-nav > .btn { max-width: 100%; white-space: normal; text-align: center; line-height: 1.2; }
/* Phones: Back + Continue stack full width (no squeezed labels, two big targets), the way forward on top,
   like the retake page's .retake-nav (core.css). */
@media (max-width: 560px) {
  .step-nav:not(.retake-nav) { flex-direction: column-reverse; align-items: stretch; }
  .step-nav:not(.retake-nav) > span:empty { display: none; }
  .step-nav:not(.retake-nav) > .btn { width: 100%; min-width: 0; margin-left: 0; }
}
.page-msg { margin: -8px 0 20px; }
.page-msg .btn, .summary-error .btn, #cardMount .callout .btn { margin-left: 6px; vertical-align: middle; }

.spec-card { display: grid; grid-template-columns: 92px 1fr; gap: 18px; padding: 18px; border-radius: var(--r-lg); background: linear-gradient(135deg, var(--accent-50), var(--surface) 70%); border: 1px solid var(--accent-100); margin-top: 22px; }
.spec-thumb { aspect-ratio: var(--ar, 35 / 45); width: 100%; align-self: center; border-radius: 6px; background: var(--bg, #fff); border: 1px solid var(--line-2); position: relative; overflow: hidden; box-shadow: var(--sh-2); }
.spec-card h3 { font-size: 16px; }
.spec-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 13.5px; color: var(--text-2); }
.spec-facts span { display: inline-flex; gap: 6px; align-items: center; }
.spec-notes { margin-top: 10px; font-size: 13px; color: var(--accent-ink); display: grid; gap: 3px; padding-left: 18px; }
@media (max-width: 420px) { .spec-card { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 14px; } }

/* Aside summary */
.order-aside { position: sticky; top: calc(84px + var(--safe-t)); display: grid; gap: 16px; }
@media (max-width: 980px) { .order-aside { position: static; order: 2; } }
.aside-card { padding: 20px; }
.aside-doc { display: flex; gap: 14px; align-items: center; }
.aside-doc .spec-thumb { width: 52px; flex: none; }
.aside-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.aside-total strong { font-size: 24px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.trust-list { list-style: none; padding: 0; display: grid; gap: 10px; font-size: 14px; color: var(--text-2); }
.trust-list li { display: flex; gap: 10px; align-items: flex-start; }
.trust-list .icon { color: var(--success); margin-top: 2px; }

/* Photo step */
.req-checklist { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.req-checklist li { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); font-size: 13px; font-weight: 550; color: var(--text-2); line-height: 1.3; }
.req-checklist .icon { color: var(--ink-3); width: 20px; height: 20px; }
@media (max-width: 640px) { .req-checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.consents { display: grid; gap: 12px; margin: 20px 0; padding: 16px 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.consents .check { font-size: 14.5px; }
.dropzone { position: relative; display: grid; place-items: center; text-align: center; gap: 10px; padding: clamp(28px, 5vw, 48px) 20px; border: 2px dashed var(--line-2); border-radius: var(--r-xl); background: var(--surface); transition: border-color var(--t), background var(--t); }
.dropzone.is-drag { border-color: var(--accent); background: var(--accent-50); }
.dropzone .ring { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--ink-3); margin-bottom: 4px; }
.dropzone .ring .icon { width: 30px; height: 30px; }
.dropzone h3 { font-size: 19px; }
.dropzone .cluster { justify-content: center; margin-top: 8px; }
.dropzone.is-disabled { opacity: .55; }

/* A fixed-width stage column: an 'auto' one sized itself from the one-line caption and squeezed the
   controls under the summary aside (981–1140px) and out of the card (761–790px). */
#editorWrap { container: editor / inline-size; }
.editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: start; }
@container editor (min-width: 600px) { .editor { grid-template-columns: minmax(0, 360px) minmax(250px, 1fr); } }
.crop-wrap { display: grid; justify-items: center; min-width: 0; }
.crop-stage { position: relative; border-radius: var(--r); overflow: hidden; touch-action: none; cursor: grab; background: #1b1f27; box-shadow: 0 0 0 1px rgba(11, 22, 38, .2), var(--sh-2); user-select: none; -webkit-user-select: none; }
.crop-stage.is-dragging { cursor: grabbing; }
.crop-stage:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.crop-canvas, .crop-guides { position: absolute; inset: 0; width: 100%; height: 100%; }
.crop-guides { pointer-events: none; }
.crop-guides .g-label { font: 600 11.5px var(--font); fill: #5EEAD4; paint-order: stroke; stroke: rgba(0, 0, 0, .55); stroke-width: 3px; letter-spacing: .02em; }
.crop-busy { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 12px; border-radius: 12px; background: rgba(5, 9, 16, .74); color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.3; text-align: center; pointer-events: none; }
.crop-caption { font-size: 12.5px; color: var(--text-3); margin: 10px auto 0; text-align: center; max-width: 34ch; text-wrap: balance; }
.editor-side { display: grid; gap: 16px; align-content: start; min-width: 0; }
.editor-side .btn-block { white-space: normal; line-height: 1.25; padding-block: 10px; text-align: center; }
.meter { padding: 14px 16px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); }
.meter-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; font-weight: 600; }
.meter-bar { position: relative; height: 10px; margin: 12px 0 6px; border-radius: 99px; background: var(--surface-3); container-type: inline-size; }
.meter-band { position: absolute; top: 0; bottom: 0; background: var(--success-line); border-radius: 99px; }
/* Positioned by --pos (0–100, % of the bar; 1cqw = 1% of .meter-bar) and moved with transform, so dragging the
   photo never animates layout. An inline style.left still places it (without the animation). */
.meter-dot { position: absolute; top: 50%; left: 0; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: var(--warning); border: 3px solid #fff; box-shadow: var(--sh-2); transform: translateX(calc(var(--pos, 0) * 1cqw)); transition: transform var(--t) var(--ease), background-color var(--t); }
.meter-dot.ok { background: var(--success); }
.meter-scale { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--text-3); }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; background: var(--warning-bg); color: var(--warning); border: 1px solid var(--warning-line); }
.pill.ok { background: var(--success-bg); color: var(--success); border-color: var(--success-line); }
.pill .icon { width: 13px; height: 13px; }
.control { display: grid; gap: 6px; }
.control-row { display: flex; align-items: center; gap: 10px; }
.control-row > .btn { flex: none; }
.control-row > input[type="range"] { flex: 1 1 auto; width: auto; min-width: 0; }
.control label { font-size: 13px; font-weight: 600; color: var(--text-2); display: flex; justify-content: space-between; }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; outline: none; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 99px; background: var(--surface-3); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 99px; background: var(--surface-3); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -7px; border-radius: 50%; background: var(--brand); border: 3px solid #fff; box-shadow: var(--sh-2); cursor: pointer; }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--brand); border: 3px solid #fff; box-shadow: var(--sh-2); cursor: pointer; }
input[type="range"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
@media (pointer: coarse) {
  .control-row > .btn-icon, .editor-side .btn-sm { --bh: 44px; }
  input[type="range"] { height: 44px; }
  input[type="range"]::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -11px; }
  input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; }
  .editor .switch, .currency-select { min-height: 44px; }
  .page-msg .btn-sm, .summary-error .btn-sm, #cardMount .btn-sm, .msg-actions .btn-sm { --bh: 44px; }
}
.editor-actions { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
/* Narrow editor (phones; also 981–1140px beside the summary): the controls run past the bottom of the screen,
   so the actions bar sticks to the bottom of the viewport while the editor is on screen. One row of two equal
   buttons whose labels may wrap (two lines at 360px); icons go below 420px. --bleed = .card-body padding
   (core.css), so the bar spans the card edge to edge. */
#editorWrap { --bleed: clamp(20px, 3vw, 32px); }
@container editor (max-width: 599px) {
  #editorWrap > .editor-actions { position: sticky; bottom: 0; z-index: 2; flex-wrap: nowrap; align-items: stretch; gap: 8px; margin: 20px calc(-1 * var(--bleed)) 0; padding: 10px var(--bleed) max(10px, var(--safe-b)); background: var(--surface); box-shadow: 0 -1px 0 var(--line), 0 -10px 20px -14px rgba(10, 31, 61, .35); }
  #editorWrap > .editor-actions > .btn { flex: 1 1 0; min-width: 0; white-space: normal; text-wrap: balance; line-height: 1.2; text-align: center; padding: 6px 12px; }
  #editorWrap > .editor-actions > .btn-primary { --bh: 52px; }
}
@container editor (max-width: 419px) { #editorWrap > .editor-actions > .btn .icon { display: none; } }
/* Keyboard focus is scrolled clear of that bar, never under it. */
html:has(#editorWrap:not([hidden])) { scroll-padding-bottom: 96px; }

.checking { display: grid; justify-items: center; gap: 14px; padding: 40px 20px; text-align: center; }
.checking .spinner { --s: 40px; color: var(--ink-3); border-width: 3px; }
.check-steps { list-style: none; padding: 0; display: grid; gap: 6px; font-size: 14px; color: var(--text-3); text-align: left; }
.check-steps li.done { color: var(--success); }
.check-steps li.active { color: var(--ink); font-weight: 600; }

.report-head { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border-radius: var(--r-lg); margin-bottom: 20px; }
.report-head.pass { background: var(--success-bg); border: 1px solid var(--success-line); color: #14532D; }
.report-head.fail { background: var(--danger-bg); border: 1px solid var(--danger-line); color: #7F1D1D; }
.report-head.warn { background: var(--warning-bg); border-color: var(--warning-line); color: #713F12; }
.report-head .icon { width: 26px; height: 26px; flex: none; }
.report-head h3 { color: inherit; font-size: 17px; }
.report-head p { font-size: 14px; margin-top: 2px; }
.report-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 20px; }
@media (max-width: 720px) { .report-grid { grid-template-columns: minmax(0, 1fr); } }
.preview-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.preview-box { text-align: center; }
.preview-box .lbl { font-size: 12px; font-weight: 650; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 8px; display: flex; justify-content: center; align-items: center; gap: 6px; }
.preview-box canvas, .preview-box img { width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line-2); background: #fff; box-shadow: var(--sh-1); }
.preview-note { font-size: 12px; color: var(--text-3); margin-top: 6px; }
.colour-toggle { display: flex; width: 100%; margin-top: 10px; }
.colour-toggle button { flex: 1; min-height: 36px; padding: 7px 10px; font-size: 13px; white-space: nowrap; }
.check-list-ui { list-style: none; padding: 0; display: grid; gap: 2px; }
.check-list-ui li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.check-list-ui li:last-child { border-bottom: 0; }
.check-list-ui .st { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; margin-top: 1px; }
.check-list-ui .st .icon { width: 12px; height: 12px; stroke-width: 3; }
.check-list-ui .pass .st { background: var(--success-bg); color: var(--success); }
.check-list-ui .warn .st { background: var(--warning-bg); color: var(--warning); }
.check-list-ui .fail .st { background: var(--danger-bg); color: var(--danger); }
.check-list-ui .detail { display: block; font-size: 12.5px; color: var(--text-3); }
.issue-list { display: grid; gap: 10px; margin-bottom: 16px; }
.issue { display: grid; grid-template-columns: 28px 1fr; gap: 10px; padding: 12px 14px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--danger-line); }
.issue .icon { color: var(--danger); width: 22px; height: 22px; }
.issue strong { display: block; font-size: 14.5px; }
.issue span { font-size: 13.5px; color: var(--text-2); }
.sheet-preview { padding: 10px; background: var(--surface-2); border-radius: var(--r); border: 1px solid var(--line); }
.sheet-preview canvas { width: 100%; height: auto; background: #fff; border-radius: 4px; box-shadow: var(--sh-1); }

/* Checkout step */
.fieldset { border: 0; padding: 0; margin: 0 0 22px; }
.fieldset legend { font-size: 15px; font-weight: 700; margin-bottom: 12px; display: flex; gap: 8px; align-items: center; }
.options { display: grid; gap: 10px; }
.option .features { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 13px; color: var(--text-2); list-style: none; padding: 0; }
.option .features li { display: inline-flex; gap: 5px; align-items: center; }
.option .features .icon { color: var(--success); width: 14px; height: 14px; }
.coupon-row { display: flex; gap: 8px; }
.coupon-row .input { text-transform: uppercase; letter-spacing: .04em; }
.coupon-summary { cursor: pointer; padding-block: 6px; }
/* Touch targets for controls whose base rules come after the coarse-pointer block above (equal specificity). */
@media (pointer: coarse) {
  .coupon-summary { padding-block: 12px; }
  .colour-toggle button { min-height: 44px; }
}
.coupon-row + .error-text { margin-top: 6px; }
.coupon-msg { font-size: 13px; margin-top: 6px; }
.coupon-msg:empty { display: none; }
.coupon-msg.is-ok { color: var(--success); font-weight: 600; }
.coupon-msg.is-info { color: var(--text-2); }
.summary { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); transition: opacity var(--t); }
.summary.is-updating { opacity: .6; }
.summary.is-stale .summary-row, .summary.is-stale .summary-total { opacity: .5; }
.summary-error { border: 0; border-radius: 0; border-bottom: 1px solid var(--danger-line); }
.sk-line { display: inline-block; height: 14px; }
.sk-total { display: inline-block; height: 26px; }
/* Same height as the Stripe card + name fields, so nothing jumps when they arrive. */
.pay-skeleton { display: grid; gap: 6px; }
.pay-skeleton .sk-label { height: 14px; width: 110px; margin-top: 3px; }
.pay-skeleton .sk-field { height: 50px; border-radius: var(--r); }
.pay-skeleton .sk-field + .sk-label { margin-top: 10px; }
.pay-skeleton .sk-hint { height: 13px; width: 150px; margin-block: 2px; } /* the "As shown on your card" hint */
.pay-box.is-free #walletBtn, .pay-box.is-free #walletDivider { display: none; }
#walletBtn { min-height: 52px; }
#walletBtn.is-disabled { opacity: .55; }
.step-panel.is-paying .option:has(input:disabled) { opacity: .7; }
.terms-check + .error-text { margin-top: -6px; }
#payMsg p { margin: 0; }
.msg-actions { --gap: 8px; margin-top: 10px; }
.finishing { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 8px 0; }
.finishing .spinner { --s: 36px; color: var(--ink-3); border-width: 3px; }
.finishing .callout { text-align: left; max-width: 560px; }
.success-note { max-width: 520px; margin: 18px auto 0; text-align: left; }
.summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 18px; font-size: 14.5px; border-bottom: 1px solid var(--line); }
.summary-row span:last-child { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.summary-row.discount span:last-child { color: var(--success); }
.summary-total { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 18px; background: var(--surface-2); }
.summary-total strong { font-size: 24px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.summary-meta { font-size: 12.5px; color: var(--text-3); padding: 0 18px 14px; background: var(--surface-2); }
.pay-box { margin-top: 22px; display: grid; gap: 14px; }
.pay-divider { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--text-3); }
.pay-divider::before, .pay-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.stripe-field { min-height: 50px; padding: 15px 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.stripe-field:hover { border-color: var(--line-3); }
.stripe-field.StripeElement--focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(21, 101, 216, .14); }
.stripe-field.StripeElement--invalid, .stripe-field[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 4px rgba(192, 38, 45, .12); }
.mock-card { display: grid; grid-template-columns: 1fr 120px 100px; gap: 10px; }
@media (max-width: 520px) { .mock-card { grid-template-columns: 1fr 1fr; } .mock-card .span-all { grid-column: 1 / -1; } }
.mock-card .span-all { grid-column: 1 / -1; }
.test-cards { font-size: 12.5px; color: var(--text-3); display: flex; flex-wrap: wrap; gap: 6px 10px; }
.test-cards button { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); text-decoration: underline dotted; }
.pay-btn { --bh: 56px; font-size: 17px; }
.pay-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 16px; font-size: 12.5px; color: var(--text-3); }
.pay-trust span { display: inline-flex; gap: 5px; align-items: center; }
.tracker { list-style: none; padding: 0; display: grid; gap: 8px; margin-top: 16px; }
.tracker li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); font-size: 14.5px; font-weight: 550; color: var(--text-3); transition: color var(--t), background-color var(--t), border-color var(--t); }
.tracker li .st { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); flex: none; }
.tracker li .st .icon { width: 13px; height: 13px; stroke-width: 3; }
.tracker li.active { color: var(--ink); border-color: var(--info-line); background: var(--info-bg); }
.tracker li.active .st { background: transparent; color: var(--info); }
.tracker li.done { color: var(--success); border-color: var(--success-line); background: var(--success-bg); }
.tracker li.done .st { background: var(--success); color: #fff; }
.tracker li.error { color: var(--danger); border-color: var(--danger-line); background: var(--danger-bg); }

/* Success */
.success { text-align: center; padding: clamp(28px, 5vw, 48px) clamp(18px, 4vw, 40px); }
.success-emblem { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto 18px; background: var(--success-bg); color: var(--success); box-shadow: 0 0 0 10px rgba(21, 122, 62, .06); animation: pop .5s var(--ease); }
.success-emblem .icon { width: 34px; height: 34px; stroke-width: 2.4; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
.next-steps { counter-reset: ns; list-style: none; padding: 0; display: grid; gap: 12px; text-align: left; max-width: 460px; margin: 26px auto 0; }
.next-steps li { counter-increment: ns; display: grid; grid-template-columns: 30px 1fr; gap: 12px; font-size: 14.5px; color: var(--text-2); }
.next-steps li::before { content: counter(ns); width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--line); font-weight: 700; font-size: 13px; color: var(--ink); }
.next-steps strong { color: var(--text); }

/* ── Camera dialog ────────────────────────────────────────────────────── */
/* width:100% (not 100vw, which runs under a desktop scrollbar); displayed only while open, so a closed
   dialog is never laid out as a full-screen black box before camera.js removes it. */
.camera-dialog { position: fixed; inset: 0; border: 0; padding: 0; margin: 0; width: 100%; height: 100%; height: 100dvh; max-width: none; max-height: none; background: #070B12; color: #fff; --cam-chrome: 230px; }
.camera-dialog[open] { display: flex; flex-direction: column; }
.camera-dialog:not([open]) { display: none; }
@media (max-width: 420px) { .camera-dialog { --cam-chrome: 262px; } }
.camera-dialog::backdrop { background: #070B12; }
.cam-top { display: flex; justify-content: space-between; align-items: center; padding: max(12px, var(--safe-t)) max(16px, var(--safe-r)) 12px max(16px, var(--safe-l)); }
.cam-title { display: inline-flex; gap: 8px; align-items: center; font-weight: 650; font-size: 15px; color: rgba(255, 255, 255, .85); }
.camera-dialog .btn-ghost { color: rgba(255, 255, 255, .8); }
.camera-dialog .btn-ghost:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.cam-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: rgba(255, 255, 255, .8); cursor: pointer; }
.cam-toggle input { accent-color: var(--accent-3); width: 16px; height: 16px; }
.cam-stage { position: relative; flex: 1 1 auto; min-height: 0; margin: 0 auto; width: min(100% - 24px, calc((100dvh - var(--cam-chrome)) * .75)); aspect-ratio: 3 / 4; max-height: calc(100dvh - var(--cam-chrome)); border-radius: 18px; overflow: hidden; background: #000; }
.cam-stage video { width: 100%; height: 100%; object-fit: cover; }
.cam-stage video.mirrored { transform: scaleX(-1); }
.cam-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.cam-oval { stroke: rgba(255, 255, 255, .85); stroke-dasharray: 8 7; transition: stroke var(--t); }
.cam-oval.ok { stroke: #34D399; stroke-dasharray: none; }
.cam-hint { position: absolute; left: 12px; right: 12px; bottom: 16px; width: fit-content; margin-inline: auto; padding: 9px 16px; border-radius: 18px; background: rgba(5, 9, 16, .72); backdrop-filter: blur(8px); font-weight: 600; font-size: 15px; line-height: 1.3; text-align: center; text-wrap: balance; }
.cam-count { position: absolute; inset: 0; display: grid; place-items: center; font: 800 120px/1 var(--font); color: #fff; text-shadow: 0 6px 30px rgba(0, 0, 0, .5); opacity: 0; transform: scale(.8); transition: opacity .25s var(--ease), transform .25s var(--ease); pointer-events: none; }
.cam-count.show { opacity: 1; transform: scale(1); }
.cam-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; transition: opacity .3s; }
.cam-flash.go { opacity: .85; transition: none; }
.cam-checks { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; padding: 14px 16px 0; list-style: none; }
.cam-checks li { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .55); transition: color var(--t), background-color var(--t), border-color var(--t); }
.cam-checks li .icon { width: 12px; height: 12px; opacity: .35; stroke-width: 3; }
.cam-checks li.ok { background: rgba(52, 211, 153, .14); border-color: rgba(52, 211, 153, .45); color: #6EE7B7; }
.cam-checks li.ok .icon { opacity: 1; }
.cam-actions { display: flex; justify-content: center; padding: 18px 0; padding-bottom: max(18px, env(safe-area-inset-bottom)); }
.cam-shutter { width: 76px; height: 76px; border-radius: 50%; border: 4px solid #fff; display: grid; place-items: center; transition: transform var(--t-fast); }
.cam-shutter span { width: 58px; height: 58px; border-radius: 50%; background: #fff; transition: background var(--t); }
.cam-shutter:active span { background: var(--accent-3); }
.cam-shutter:disabled { opacity: .4; }
/* The permission/no-camera message replaces the viewfinder: give it room and let it scroll ('safe'
   centring keeps the top reachable when it overflows). */
.camera-dialog[open]:has(.cam-error) { display: flex; }
.cam-stage:has(.cam-error) { aspect-ratio: auto; width: min(100% - 32px, 520px); height: auto; max-height: none; max-width: none; flex: 1 1 auto; margin: 0 auto max(16px, env(safe-area-inset-bottom)); overflow-y: auto; background: rgba(255, 255, 255, .04); }
.cam-error { position: relative; min-height: 100%; display: grid; place-content: safe center; justify-items: center; gap: 12px; padding: 24px 16px; text-align: center; }
.cam-error .btn { white-space: normal; }
.cam-error h2 { color: var(--accent-3); }
.cam-error p { color: rgba(255, 255, 255, .7); max-width: 32ch; }
/* Phone landscape: viewfinder at full height on the left, controls beside it (was a 98×130px stage). */
@media (orientation: landscape) and (max-height: 560px) {
  .camera-dialog[open] { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "stage top" "stage checks" "stage actions"; column-gap: 16px; padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); }
  .cam-top { grid-area: top; padding: 4px 0 0; }
  .cam-stage { grid-area: stage; height: calc(100dvh - 16px); width: auto; max-width: 60vw; max-height: none; margin: 0; align-self: center; }
  .cam-checks { grid-area: checks; align-content: center; justify-content: flex-start; padding: 6px 0; overflow-y: auto; }
  .cam-checks li { font-size: 11.5px; padding: 3px 8px; }
  .cam-actions { grid-area: actions; padding: 4px 0 max(8px, env(safe-area-inset-bottom)); }
  .cam-shutter { width: 64px; height: 64px; }
  .cam-shutter span { width: 48px; height: 48px; }
  .cam-hint { font-size: 13px; padding: 7px 12px; bottom: 10px; }
  .cam-count { font-size: 88px; }
}

.order-footer { padding-top: 24px; padding-bottom: max(40px, calc(env(safe-area-inset-bottom) + 24px)); text-align: center; font-size: 13px; color: var(--text-3); }

/* 3-D Secure (sandbox) */
.tds { text-align: center; }
.tds .bank { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }