/* ============================================================
   COLLECTORS CERTIFIED GRADING — submit.css
   Submission Wizard (submit.html + js/submit.js). Builds on
   style.css tokens and reuses the pf-* shell/panels + .btn /
   .bt-switch components. All new selectors are wiz- prefixed and
   scoped so no other page is affected. Dark theme — matches the
   site accent, NOT the mockup's blue/teal buttons.
   ============================================================ */

/* ---------------- header ---------------- */
.wiz-head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.wiz-subtitle { color: var(--muted); font-size: 15px; margin-top: 6px; }
.wiz-signout {
  font-size: 12.5px; color: var(--dim); font-weight: 600;
  border: 1px solid rgba(166, 196, 224, .2); background: rgba(166, 196, 224, .05);
  border-radius: 999px; padding: 8px 16px; cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.wiz-signout:hover { border-color: var(--cyan); color: var(--cyan); }

.wiz-loading { text-align: center; color: var(--dim); padding: 60px 20px; font-size: 14px; }
.wiz-error { color: #F76F72; }

/* ---------------- global alert ---------------- */
.wiz-alert {
  margin: 0 0 20px; padding: 12px 16px; border-radius: 12px;
  background: rgba(247, 111, 114, .1); border: 1px solid rgba(247, 111, 114, .4);
  color: #ffd7d8; font-size: 13.5px; line-height: 1.5;
}
.wiz-alert[hidden] { display: none; }
/* D103.6 — the same banner in its OUTAGE flavour: something upstream is down and the
   customer did nothing wrong, so it is amber-quiet rather than refusal-red. */
.wiz-alert.wiz-alert-soft {
  background: rgba(255, 209, 102, .1); border-color: rgba(255, 209, 102, .4);
  color: #FFE7B0;
}

/* ---------------- step bar ---------------- */
.wiz-steps {
  display: flex; align-items: center; gap: 12px; list-style: none;
  padding: 0; margin: 0 0 24px; flex-wrap: wrap;
}
.wiz-step { display: flex; align-items: center; gap: 10px; }
.wiz-step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  font-family: var(--font-mark); font-size: 14px; font-weight: 700;
  color: var(--dim); background: rgba(6, 16, 25, .6);
  border: 1px solid rgba(166, 196, 224, .25); transition: all .2s;
}
.wiz-step-name {
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--dim); transition: color .2s;
}
.wiz-step.is-active .wiz-step-num {
  color: #04121f; background: var(--grad); border-color: transparent;
  box-shadow: 0 0 18px rgba(54, 212, 249, .35);
}
.wiz-step.is-active .wiz-step-name { color: var(--text); }
.wiz-step.is-done .wiz-step-num {
  color: var(--green); border-color: rgba(61, 214, 140, .5); background: rgba(61, 214, 140, .1);
  font-size: 0;
}
.wiz-step.is-done .wiz-step-num::after {
  content: ''; width: 14px; height: 14px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%233DD68C" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center/contain no-repeat;
}
.wiz-step.is-done .wiz-step-name { color: var(--muted); }
.wiz-step-sep { flex: 0 1 46px; height: 1px; background: rgba(166, 196, 224, .25); }

/* ---------------- panel shell ---------------- */
.wiz-panel { padding: 26px 28px; margin-bottom: 0; }
.wiz-panel-head {
  font-family: var(--font-display); font-size: 26px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; margin-bottom: 6px; outline: none;
}
.wiz-panel-head:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; border-radius: 6px; }
.wiz-sub { color: var(--dim); font-size: 13.5px; margin-bottom: 20px; }
.wiz-subhead {
  font-family: var(--font-display); font-size: 16px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
  margin: 22px 0 4px;
}
.wiz-lead { color: var(--dim); font-size: 13px; line-height: 1.55; margin-bottom: 14px; }
.wiz-lead b { color: var(--muted); }
/* D153 — #wizInboundLead ships hidden (only the dealer road writes one), and the
   Delivery step's own leads come and go. Explicit, per the D112 trap. */
.wiz-lead[hidden] { display: none; }
.wiz-divider { border: none; border-top: 1px dashed rgba(166, 196, 224, .16); margin: 24px 0; }

/* ---------------- fields + grid ---------------- */
.wiz-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; }
.wiz-grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 16px; margin-bottom: 22px; }
.wiz-col-2 { grid-column: 1 / -1; }
/* D134: the manual-entry Card Information block reads in rows of three, matching the
   staff grading station. Three columns only survive a desktop-width finder box, so it
   steps down to two on a tablet and one on a phone rather than squeezing eight fields
   into a strip nobody can type in. Declared here (not in the shared responsive block
   below) so the base rule and both step-downs stay together and in cascade order. */
.wiz-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 16px; }
@media (max-width: 860px) { .wiz-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .wiz-grid3 { grid-template-columns: 1fr; } }
.wiz-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.wiz-field label {
  font-size: 11.5px; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; color: var(--dim);
}
.wiz-field-note { text-transform: none; letter-spacing: 0; color: var(--dim); opacity: .8; font-weight: 500; }
.wiz-req { color: var(--cyan); }
.wiz-field input, .wiz-field select {
  width: 100%; font: 14px var(--font-body); color: var(--text);
  background: rgba(6, 16, 25, .72); border: 1px solid rgba(166, 196, 224, .2);
  border-radius: 10px; padding: 10px 12px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.wiz-field select {
  cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%2394ADC4" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px;
}
.wiz-field input:focus, .wiz-field select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(54, 212, 249, .15); }
.wiz-field input:disabled, .wiz-field select:disabled { opacity: .55; cursor: not-allowed; }
.wiz-field input.wiz-invalid, .wiz-field select.wiz-invalid { border-color: #F76F72; box-shadow: 0 0 0 3px rgba(247, 111, 114, .15); }
.wiz-field input::placeholder { color: var(--dim); opacity: .7; }
.wiz-caps { text-transform: uppercase; }
.wiz-caps::placeholder { text-transform: none; }
.wiz-hint { font-size: 11.5px; color: var(--dim); line-height: 1.4; }
/* D116 — an inline REFUSAL under a field (PO Box), at the hint's type scale but in the
   error colour. Needs both classes: .wiz-error alone is declared earlier in the sheet,
   so at equal specificity .wiz-hint's dim would win the cascade. */
.wiz-hint.wiz-error { color: #F76F72; margin-top: 6px; }

/* textarea (delivery instructions) — matches the field inputs */
.wiz-field textarea {
  width: 100%; font: 14px var(--font-body); color: var(--text);
  background: rgba(6, 16, 25, .72); border: 1px solid rgba(166, 196, 224, .2);
  border-radius: 10px; padding: 10px 12px; outline: none; resize: vertical;
  min-height: 78px; line-height: 1.5;
  transition: border-color .2s, box-shadow .2s;
}
.wiz-field textarea:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(54, 212, 249, .15); }
.wiz-field textarea::placeholder { color: var(--dim); opacity: .7; }
.wiz-instr-field { margin-top: 16px; }

.wiz-check {
  display: flex; align-items: center; gap: 10px; margin-top: 14px;
  font-size: 13.5px; color: var(--muted); cursor: pointer;
}
.wiz-check input { width: 17px; height: 17px; accent-color: var(--cyan); cursor: pointer; flex-shrink: 0; }

/* ---------------- finder (card editor) ---------------- */
.wiz-finder {
  border: 1px solid rgba(166, 196, 224, .16); border-radius: 16px;
  padding: 20px 22px; background: rgba(6, 16, 25, .38); margin-bottom: 24px;
}
.wiz-finder-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.wiz-finder-head h3 {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
}
.wiz-mode {
  display: inline-flex; gap: 3px; padding: 3px; border-radius: 999px;
  background: rgba(6, 16, 25, .6); border: 1px solid rgba(166, 196, 224, .15);
}
.wiz-mode-btn {
  font-family: var(--font-body); font-size: 12px; font-weight: 600;
  padding: 6px 14px; border-radius: 999px; border: none; cursor: pointer;
  background: transparent; color: var(--dim); transition: background .2s, color .2s;
}
.wiz-mode-btn:hover { color: var(--text); }
.wiz-mode-btn.is-on { background: var(--grad); color: #04121f; }
.wiz-mode-btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.wiz-preview {
  font-family: var(--font-display); font-size: 14px; font-weight: 600;
  letter-spacing: .6px; color: var(--cyan);
  background: rgba(54, 212, 249, .06); border: 1px solid rgba(54, 212, 249, .2);
  border-radius: 10px; padding: 8px 12px; margin-bottom: 16px; overflow-wrap: anywhere;
}
.wiz-block { margin-bottom: 16px; }
.wiz-block:last-of-type { margin-bottom: 0; }
.wiz-block-shared { border-top: 1px dashed rgba(166, 196, 224, .14); padding-top: 16px; }
.wiz-cat-note {
  margin-top: 12px; font-size: 12.5px; color: #FFD166; line-height: 1.5;
  border-left: 3px solid rgba(255, 209, 102, .5); padding-left: 12px;
}
.wiz-finder-actions { margin-top: 18px; display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
/* Cancel edit-in-place — returns the Add-a-Card box to add mode (shown only while editing) */
.wiz-cancel-edit {
  font-size: 13px; font-weight: 600; color: var(--dim);
  background: none; border: none; cursor: pointer; padding: 8px 12px; transition: color .2s;
}
.wiz-cancel-edit:hover { color: var(--cyan); }
.wiz-cancel-edit[hidden] { display: none; }

/* Order Type (D64) — order-level Standard | Rush picker at the top of Submit Cards */
.wiz-ordertype {
  margin-bottom: 22px; padding: 16px 18px; border-radius: 14px;
  background: rgba(6, 16, 25, .38); border: 1px solid rgba(166, 196, 224, .16);
}
.wiz-ordertype .wiz-hint { margin-top: 8px; }
/* D153 — the hint is the LOCK's reason line: nothing is written under the dropdown
   until the order has content, so the empty state has to hide. Nothing here sets
   display, but the D112 trap says never rely on that. (D138's turnaround line and its
   .wiz-turn- namespace stood here until D153 removed the render.) */
.wiz-ordertype .wiz-hint[hidden] { display: none; }
/* D153 — the locked Order Type picker. `.wiz-field select:disabled`'s .55 opacity is
   right for a control that has nothing to say; this one is still stating the order's
   type, so it borrows D84's declared-value lock instead — full contrast, muted text,
   dashed border, not-allowed cursor. background-COLOR only: the chevron is a separate
   background-image and the shorthand would take it away. */
.wiz-ordertype select.wiz-locked:disabled {
  opacity: 1; cursor: not-allowed; color: var(--muted);
  background-color: rgba(6, 16, 25, .5); border-style: dashed;
}

/* declared-value $ prefix (mirrors the inventory modal's .cc-hf-price) */
.wiz-price { position: relative; display: flex; align-items: center; }
.wiz-price i {
  position: absolute; left: 12px; color: var(--dim); font-style: normal;
  font-family: var(--font-mark); font-size: 14px; pointer-events: none;
}
.wiz-price input { padding-left: 24px; }

/* ---------------- type-ahead card search ---------------- */
.wiz-cardsearch { margin-bottom: 4px; }
.wiz-typeahead { position: relative; }
.wiz-ta-panel {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
  max-height: 320px; overflow-y: auto;
  background: #0b1a28; border: 1px solid rgba(54, 212, 249, .3);
  border-radius: 12px; padding: 6px; box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}
.wiz-ta-panel[hidden] { display: none; }
.wiz-ta-list { display: flex; flex-direction: column; gap: 2px; }
.wiz-ta-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; cursor: pointer;
  padding: 9px 12px; border-radius: 8px; border: 1px solid transparent;
  background: transparent; color: var(--text); transition: background .15s, border-color .15s;
}
.wiz-ta-item:hover, .wiz-ta-item:focus-visible {
  background: rgba(54, 212, 249, .1); border-color: rgba(54, 212, 249, .35); outline: none;
}
.wiz-ta-name { font: 14px var(--font-body); overflow-wrap: anywhere; }
.wiz-ta-sub { font: 12px var(--font-body); color: var(--dim); }
.wiz-ta-years { flex-shrink: 0; font: 12px var(--font-mark); color: var(--dim); font-variant-numeric: tabular-nums; }
.wiz-ta-empty { font-size: 13px; color: var(--dim); padding: 12px; line-height: 1.5; }
.wiz-ta-head {
  display: flex; align-items: center; gap: 10px; padding: 4px 6px 8px;
  margin-bottom: 4px; border-bottom: 1px dashed rgba(166, 196, 224, .18);
}
.wiz-ta-back {
  flex-shrink: 0; font: 600 12px var(--font-body); color: var(--cyan); cursor: pointer;
  background: rgba(54, 212, 249, .08); border: 1px solid rgba(54, 212, 249, .3);
  border-radius: 999px; padding: 4px 10px; transition: background .2s;
}
.wiz-ta-back:hover { background: rgba(54, 212, 249, .16); }
.wiz-ta-head-name {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase; color: var(--muted); overflow-wrap: anywhere;
}

/* selected-card chip */
.wiz-chip {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(54, 212, 249, .08); border: 1px solid rgba(54, 212, 249, .35);
}
.wiz-chip[hidden] { display: none; }
.wiz-chip-title {
  flex: 1; min-width: 0; font-family: var(--font-display); font-size: 14px; font-weight: 600;
  letter-spacing: .5px; color: var(--cyan); overflow-wrap: anywhere;
}
.wiz-chip-clear {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px; cursor: pointer;
  font-size: 16px; line-height: 1; color: var(--dim);
  background: rgba(166, 196, 224, .08); border: 1px solid rgba(166, 196, 224, .25);
  transition: border-color .2s, color .2s, background .2s;
}
.wiz-chip-clear:hover { border-color: #F76F72; color: #F76F72; background: rgba(247, 111, 114, .1); }

.wiz-search-hint { font-size: 12px; color: var(--dim); line-height: 1.4; }
.wiz-search-hint[hidden] { display: none; }

/* entry-mode panes (Card search vs Manual entry) — toggled by .wiz-mode in the head */
.wiz-mode-pane { margin-bottom: 4px; }
.wiz-mode-pane[hidden] { display: none; }

/* manual fallback (legacy — kept for older markup) */
.wiz-manual-toggle {
  display: inline-block; margin: 6px 0 0; padding: 4px 2px;
  font: 600 12.5px var(--font-body); color: var(--dim);
  background: none; border: none; cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px; transition: color .2s;
}
.wiz-manual-toggle:hover { color: var(--cyan); }
.wiz-manual { margin-top: 12px; }
.wiz-manual[hidden] { display: none; }
.wiz-declared-row { margin-top: 16px; margin-bottom: 0; }

/* D121: CARD THICKNESS sits directly under Service Type. It needs the same
   margin-top the rows around it carry, because .wiz-declared-row above it ends with
   margin-bottom:0 - without this the two rows touch and the thickness label crowds
   the select above it.
   The [hidden] rule is the D112 lesson, kept even though nothing hides this row
   today: .wiz-grid2 sets display:grid, which BEATS the hidden attribute, so any row
   that ever gains [hidden] without a companion rule silently stays on screen. */
.wiz-holder-row { margin-top: 16px; margin-bottom: 0; }
.wiz-holder-row[hidden] { display: none; }

/* D82: CCG Cert Number — Reholder cards only. .wiz-grid2 sets display:grid,
   which beats the [hidden] attribute, so the hidden rule has to be explicit. */
.wiz-reholder-row { margin-top: 16px; margin-bottom: 0; }
.wiz-reholder-row[hidden] { display: none; }

/* phone: country-code select + number input */
.wiz-phone { display: flex; gap: 8px; align-items: stretch; }
.wiz-phone .wiz-phone-cc { flex: 0 0 auto; width: auto; min-width: 110px; }
.wiz-phone .wiz-phone-num { flex: 1 1 auto; width: auto; min-width: 0; }

/* future-facing note under return method */
.wiz-delivery-note {
  margin: 12px 0 0; font-size: 12px; color: var(--dim); line-height: 1.5;
  border-left: 3px solid rgba(54, 212, 249, .35); padding-left: 12px;
}

/* ---------------- queue ---------------- */
.wiz-queue-head { display: flex; align-items: baseline; gap: 10px; margin: 4px 0 12px; }
.wiz-queue-head h3 {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
}
.wiz-queue-count { font-size: 13px; color: var(--dim); font-family: var(--font-mark); }
.wiz-queue { display: flex; flex-direction: column; gap: 10px; }
.wiz-queue-empty { color: var(--dim); font-size: 13px; padding: 14px 0; }
.wiz-queue-empty[hidden] { display: none; }
.wiz-q-row {
  display: flex; flex-direction: column; gap: 12px;
  border: 1px solid rgba(166, 196, 224, .14); border-radius: 14px;
  padding: 12px 14px; background: rgba(6, 16, 25, .4);
}
.wiz-q-main { display: flex; align-items: center; gap: 14px; }
.wiz-q-thumb {
  flex-shrink: 0; width: 34px; height: 48px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(54, 212, 249, .06); border: 1px solid rgba(54, 212, 249, .2); color: var(--cyan);
}
.wiz-q-thumb svg { width: 20px; height: auto; }
.wiz-q-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wiz-q-title {
  font-family: var(--font-display); font-size: 14.5px; font-weight: 600; letter-spacing: .4px;
  color: var(--text); overflow-wrap: anywhere;
}
.wiz-q-meta { font-size: 12px; color: var(--dim); }
.wiz-q-qty { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.wiz-q-qty label { font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; color: var(--dim); }
.wiz-q-qty input {
  width: 62px; font: 14px var(--font-mark); color: var(--text); text-align: center;
  background: rgba(6, 16, 25, .72); border: 1px solid rgba(166, 196, 224, .2);
  border-radius: 8px; padding: 8px 6px; outline: none;
}
.wiz-q-qty input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(54, 212, 249, .15); }
.wiz-q-remove {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  font-size: 18px; line-height: 1; color: var(--dim);
  background: rgba(166, 196, 224, .06); border: 1px solid rgba(166, 196, 224, .2);
  transition: border-color .2s, color .2s, background .2s;
}
.wiz-q-remove:hover { border-color: #F76F72; color: #F76F72; background: rgba(247, 111, 114, .08); }

/* read-only per-card facts (category · service · declared) — edited via the Edit button (D64) */
.wiz-q-facts { font-size: 12px; color: var(--dim); line-height: 1.5; overflow-wrap: anywhere; }
.wiz-q-dot { color: rgba(166, 196, 224, .38); margin: 0 1px; }

/* row actions: Edit (reopen in the Add-a-Card box) + Remove */
.wiz-q-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.wiz-q-edit {
  flex-shrink: 0; font: 600 12px var(--font-body); color: var(--cyan); cursor: pointer;
  background: rgba(54, 212, 249, .08); border: 1px solid rgba(54, 212, 249, .3);
  border-radius: 999px; padding: 6px 14px; transition: background .2s, color .2s, border-color .2s;
}
.wiz-q-edit:hover { background: rgba(54, 212, 249, .16); }
.wiz-q-edit:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* D82: a queue row's own message — a missing / rejected cert number is pinned to
   the card it belongs to instead of only living in the page-level alert */
.wiz-q-err { font-size: 12.5px; color: #ffd7d8; line-height: 1.5; overflow-wrap: anywhere; }
.wiz-q-row.has-cert-error {
  border-color: rgba(247, 111, 114, .55);
  background: linear-gradient(170deg, rgba(247, 111, 114, .1), rgba(6, 16, 25, .4));
}

/* the row being edited is held + highlighted while its card sits in the Add-a-Card box */
.wiz-q-row.is-editing {
  border-color: rgba(54, 212, 249, .6);
  background: linear-gradient(170deg, rgba(20, 146, 253, .14), rgba(87, 218, 249, .03));
  box-shadow: 0 0 22px rgba(20, 146, 253, .14);
}
.wiz-q-row.is-editing .wiz-q-edit {
  background: var(--grad); color: #04121f; border-color: transparent; cursor: default;
}

/* ---------------- save-draft toast ---------------- */
.wiz-toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 200;
  max-width: min(92vw, 430px); margin: 0;
  padding: 13px 20px; border-radius: 12px;
  font: 600 13.5px var(--font-body); color: var(--text); text-align: center;
  background: linear-gradient(180deg, rgba(20, 40, 58, .98), rgba(10, 22, 33, .98));
  border: 1px solid rgba(54, 212, 249, .45);
  box-shadow: 0 14px 36px rgba(4, 12, 20, .6);
  opacity: 0; transform: translateX(-50%) translateY(10px); pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.wiz-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
.wiz-toast[hidden] { display: none; }

/* ---------------- panel actions ---------------- */
.wiz-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-top: 26px;
}
.wiz-actions-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wiz-next { min-width: 200px; }
.wiz-next:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.wiz-next:disabled:hover { transform: none; }
.wiz-savedraft {
  font-size: 13px; font-weight: 600; color: var(--dim);
  background: none; border: none; cursor: pointer; padding: 6px 4px; transition: color .2s;
}
.wiz-savedraft:hover { color: var(--cyan); }
.wiz-back-link, .wiz-back {
  display: inline-flex; align-items: center; gap: 6px;
}
.wiz-back-link {
  margin-bottom: 14px; font-family: var(--font-body); font-size: 13px; font-weight: 600;
  color: var(--dim); background: none; border: none; cursor: pointer; padding: 4px 2px; transition: color .2s;
}
.wiz-back-link:hover { color: var(--cyan); }

/* ---------------- delivery choices ---------------- */
.wiz-choices { display: flex; flex-direction: column; gap: 12px; }
/* D90/D112: .wiz-choices sets display:flex and .wiz-choice does too, and BOTH beat
   the [hidden] attribute (same trap as .wiz-reholder-row above) — the companion
   rules have to be explicit. D90 wrote one for #wizInbound alone, so every hide
   added afterwards was silently a no-op: the dealer's return-address pair, the
   prepaid road's return-method pair, and the two cards the declared-value ceiling
   withdraws (prepaid inbound, Insured Shipping) all stayed on screen and clickable.
   These two rules are what makes `el.hidden = true` mean something on this step;
   scope them to the group and the card rather than to any one id, so the next hide
   works the day it is written. */
.wiz-choices[hidden] { display: none; }
.wiz-choice[hidden] { display: none; }
.wiz-choice {
  position: relative; display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 18px; border-radius: 14px; cursor: pointer;
  background: rgba(6, 16, 25, .5); border: 1px solid rgba(166, 196, 224, .15);
  transition: border-color .2s, background .2s, box-shadow .2s;
}
.wiz-choice:hover { border-color: rgba(54, 212, 249, .5); }
.wiz-choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.wiz-choice.is-on {
  border-color: rgba(54, 212, 249, .6);
  background: linear-gradient(170deg, rgba(20, 146, 253, .16), rgba(87, 218, 249, .04));
  box-shadow: 0 0 22px rgba(20, 146, 253, .14);
}
.wiz-choice:focus-within { outline: 2px solid var(--cyan); outline-offset: 2px; }
.wiz-choice-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.wiz-choice-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: .5px; color: var(--text); }
.wiz-choice-sub { font-size: 12.5px; color: var(--dim); line-height: 1.5; }
.wiz-choice-check {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid rgba(166, 196, 224, .35); margin-top: 2px; transition: all .2s;
}
.wiz-choice.is-on .wiz-choice-check {
  border-color: var(--cyan);
  background: radial-gradient(circle at center, var(--cyan) 0 5px, transparent 6px);
}
.wiz-fedex { max-width: 340px; margin-top: 14px; }
.wiz-fedex[hidden] { display: none; }

/* ---- D85 delivery option cards: each card owns the panel beneath it ----
   The prepaid rate pair and the drop-off location list are nested inside
   #wizInbound so they read as part of the card they belong to; a hairline rail
   on the left does the "nested under" work without another box. */
.wiz-ratepanel, .wiz-droppanel {
  margin: -2px 0 2px 30px; padding: 14px 0 4px 18px;
  border-left: 2px solid rgba(54, 212, 249, .35);
}
.wiz-ratepanel[hidden], .wiz-droppanel[hidden] { display: none; }
/* D103.4 — the own road's return-rate panel names the leg it is pricing (the prepaid
   panel needs no head: it sits directly under the option that says what it buys). */
.wiz-ratepanel-head, .wiz-droppanel-head {
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px;
}
.wiz-droppanel-sort { color: var(--dim); font-weight: 600; letter-spacing: .5px; }
.wiz-droppanel .wiz-hint { margin-top: 10px; }
.wiz-droplist.wiz-invalid { outline: 1px solid rgba(247, 111, 114, .7); outline-offset: 6px; border-radius: 14px; }
/* location rows read "{Name} — {Address} · {n} mi" on one line */
.wiz-drop .wiz-choice-title { font-family: var(--font-body); font-size: 13.5px; letter-spacing: 0; line-height: 1.5; }
.wiz-drop-addr { color: var(--dim); font-weight: 500; }
.wiz-drop-mi { color: var(--cyan); font-family: var(--font-mark); font-weight: 600; white-space: nowrap; }
/* rate rows carry the whole sentence in the title (carrier, price, ETA, insurance) */
.wiz-rate .wiz-choice-title { font-family: var(--font-body); font-size: 13.5px; letter-spacing: 0; line-height: 1.5; }
.wiz-insure-line { font-size: 12.5px; color: var(--dim); line-height: 1.5; margin: 0; }

/* ---- D85 Cloud Card Vault teaser (all delivery variants) ---- */
.wiz-vault {
  margin-top: 24px; padding: 16px 18px; border-radius: 14px;
  background: linear-gradient(170deg, rgba(20, 146, 253, .12), rgba(87, 218, 249, .03));
  border: 1px solid rgba(54, 212, 249, .3);
}
.wiz-vault-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wiz-vault-title {
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase; color: var(--text);
}
.wiz-vault-badge {
  font: 700 10.5px var(--font-body); letter-spacing: .6px; text-transform: uppercase;
  color: #FFD166; background: rgba(255, 209, 102, .12);
  border: 1px solid rgba(255, 209, 102, .45); border-radius: 999px; padding: 3px 10px;
}
.wiz-vault-sub { font-size: 13px; color: var(--muted); margin: 6px 0 0; line-height: 1.5; }
.wiz-vault-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.wiz-vault-list li {
  position: relative; padding-left: 20px; font-size: 12.5px; color: var(--dim); line-height: 1.5;
}
.wiz-vault-list li::before {
  content: ''; position: absolute; left: 0; top: 5px; width: 11px; height: 11px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%2336D4F9" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>') center/contain no-repeat;
}
.wiz-vault-check { margin-top: 14px; }

/* ---------------- checkout layout (panels 3 + 4) ---------------- */
.wiz-checkout-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  gap: 24px; align-items: start;
}
.wiz-checkout-main { min-width: 0; }

/* ---------------- order summary ---------------- */
.wiz-summary { position: sticky; top: 100px; }
.wiz-summary-panel { padding: 22px 22px 24px; margin-bottom: 0; }
.wiz-summary-title {
  font-family: var(--font-display); font-size: 19px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; margin-bottom: 14px;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.wiz-summary-count { font-size: 12px; color: var(--dim); font-family: var(--font-mark); letter-spacing: 0; text-transform: none; font-weight: 500; }

/* ---- D85 Order Summary rail (Delivery + Review + Payment) ----
   One line per SERVICE ("Full Graded x 12" / "$22.99/ea") instead of the old
   card-by-card list.
   D86: the Order Type box + its "View Submission" pill are retired — the type
   is a plain text line above the service lines. The rush/bulk tint stays on
   the VALUE alone, so the signal survives without the boxed treatment. */
.wiz-osum-order {
  margin: 0 0 14px; font-size: 12.5px; color: var(--dim);
}
.wiz-osum-order[hidden] { display: none; }
.wiz-osum-order-val { font-weight: 700; color: var(--text); }
.wiz-osum-order.is-rush .wiz-osum-order-val { color: var(--cyan); }
/* Bulk (D81) — amber, matching the staff portal's bulk chip */
.wiz-osum-order.is-bulk .wiz-osum-order-val { color: #FFD166; }

.wiz-osum-lines { display: flex; flex-direction: column; gap: 11px; }
.wiz-osum-line { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: baseline; }
.wiz-osum-name {
  grid-column: 1; font-family: var(--font-display); font-size: 13px; font-weight: 600;
  letter-spacing: .3px; color: var(--text); overflow-wrap: anywhere;
}
.wiz-osum-amt { grid-column: 2; grid-row: 1; font-family: var(--font-mark); font-size: 13px; }
.wiz-osum-meta { grid-column: 1 / -1; font-size: 11.5px; color: var(--dim); }
.wiz-sum-empty { color: var(--dim); font-size: 12.5px; padding: 4px 0; }

/* Discount Code box — D86: the Review rail only (it left the Delivery rail) */
.wiz-discount { display: flex; gap: 8px; margin: 16px 0 4px; }
/* the mockup's APPLY affordance */
.wiz-discount .wiz-apply { text-transform: uppercase; letter-spacing: .6px; }
.wiz-discount input {
  flex: 1; min-width: 0; font: 13px var(--font-body); color: var(--text);
  background: rgba(6, 16, 25, .72); border: 1px solid rgba(166, 196, 224, .2);
  border-radius: 10px; padding: 9px 12px; outline: none;
}
.wiz-discount input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(54, 212, 249, .15); }
.wiz-discount .btn { flex-shrink: 0; }
.wiz-discount-msg { font-size: 12px; color: #FFD166; margin-top: 6px; }
.wiz-discount-msg[hidden] { display: none; }

.wiz-totals { margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(166, 196, 224, .18); }
.wiz-total-row {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  font-size: 13.5px; color: var(--muted); padding: 5px 0;
}
.wiz-total-row b { font-family: var(--font-mark); color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.wiz-total-note { display: block; font-size: 11px; color: var(--dim); font-weight: 400; margin-top: 2px; }
/* Cloud Card add-on line in the order summary — subtle accent so it reads as an add-on */
.wiz-cc-row {
  margin-top: 8px; padding: 8px 11px; border-radius: 9px;
  background: linear-gradient(170deg, rgba(20, 146, 253, .12), rgba(87, 218, 249, .03));
  border: 1px solid rgba(54, 212, 249, .3);
}
.wiz-cc-row b { color: var(--cyan); }
/* Rush service line (D64) — its own row, split out of the server subtotal for display */
.wiz-rush-row b { color: var(--cyan); }
.wiz-grand {
  margin-top: 8px; padding-top: 14px; border-top: 1px solid rgba(166, 196, 224, .22);
}
.wiz-grand span { font-family: var(--font-display); font-size: 15px; letter-spacing: .8px; text-transform: uppercase; color: var(--text); }
.wiz-grand b {
  font-family: var(--font-mark); font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------------- payment ---------------- */
.wiz-brands { display: flex; gap: 8px; margin-bottom: 16px; align-items: center; }
.wiz-brand {
  height: 30px; width: auto; display: block; border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .28); flex: none;
}

.wiz-testnote {
  font-size: 12.5px; color: var(--muted); line-height: 1.5; margin-bottom: 20px;
  background: rgba(255, 209, 102, .09); border: 1px solid rgba(255, 209, 102, .38);
  border-radius: 10px; padding: 11px 14px;
}
.wiz-testnote b { color: #FFD166; }
.wiz-testtag { color: #FFD166; font-weight: 600; }
/* D106.1 — on a real gateway the same line is reassurance, not a caution flag, so it
   drops the amber and reads as the quiet note it is. */
.wiz-testnote.is-live {
  background: rgba(54, 212, 249, .06); border-color: rgba(54, 212, 249, .22);
}
.wiz-testtag.is-live { color: var(--muted); font-weight: 500; }

.wiz-field-error {
  margin: 0 0 16px; padding: 11px 14px; border-radius: 10px;
  background: rgba(247, 111, 114, .1); border: 1px solid rgba(247, 111, 114, .42);
  color: #ffd7d8; font-size: 13px; line-height: 1.5;
}
.wiz-field-error[hidden] { display: none; }

.wiz-pay { font-size: 16px; margin-top: 20px; }
.wiz-pay:disabled { opacity: .6; cursor: wait; }
.wiz-legal { font-size: 11.5px; color: var(--dim); line-height: 1.55; margin-top: 14px; }

/* ---------------- client-side tokenization boundary (js/payment-tokenize.js) ----------------
   The card panel renders with its own pt-* classes, styled by the shared css/payment.css so it
   looks identical here and on cc-checkout. Only the mount container + owned-field spacing is
   page-specific; Name on card + Billing ZIP (.wiz-card-owned) stay ours, just below. */
.wiz-card-mount { margin-bottom: 0; }
.wiz-card-owned { margin-top: 16px; }
#wizNewCard[hidden] { display: none; }

/* ---------------- express wallet checkout (Apple Pay / Google Pay — D160) ----------------
   The buttons themselves are NOT drawn here any more: js/wallet-pay.js renders Apple's own
   button (-webkit-appearance) and Google's own (client.createButton), both styled by the
   shared css/payment.css wp-* rules — the hand-drawn S10 lookalikes and their "coming soon"
   note went with the stub they belonged to. This page only owns the ZONE: the wrapper that
   holds the wallet mount and the "or pay with card" divider, hidden until a wallet button
   ACTUALLY rendered. The [hidden] companion is the D112 scar: nothing here sets display on
   the zone, but the rule stands anyway so no later display rule can silently pin it open. */
.wiz-wallet-zone { display: block; margin-bottom: 4px; }
.wiz-wallet-zone[hidden] { display: none; }

/* "or pay with card" divider (only rendered as part of the wallet zone) */
.wiz-or {
  display: flex; align-items: center; gap: 12px; margin: 18px 0;
  font-family: var(--font-display); font-size: 11.5px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; color: var(--dim);
}
.wiz-or::before, .wiz-or::after { content: ''; flex: 1; height: 1px; background: rgba(166, 196, 224, .2); }
.wiz-or[hidden] { display: none; }

/* ---------------- Cloud Card cross-sell (#cc-addon) ---------------- */
#cc-addon[hidden] { display: none; }
.wiz-addon {
  margin: 20px 0 6px; padding: 18px 18px 16px; border-radius: 14px;
  background: linear-gradient(170deg, rgba(20, 146, 253, .10), rgba(87, 218, 249, .03));
  border: 1px solid rgba(54, 212, 249, .3);
}
.wiz-addon-head { cursor: default; }
.wiz-addon-title {
  display: flex; align-items: center; gap: 9px; font-family: var(--font-display);
  font-size: 17px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--text);
}
.wiz-addon-logo { width: 26px; height: 26px; flex: none; }
.wiz-addon-brand {
  background: var(--grad, linear-gradient(90deg, #1492FD, #57DAF9));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.wiz-addon-sub { display: block; font-size: 12.5px; color: var(--dim); line-height: 1.5; margin-top: 3px; }
.wiz-addon-body { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.wiz-addon-tiers { display: flex; gap: 8px; flex-wrap: wrap; }
.wiz-addon-tier {
  flex: 1 1 0; min-width: 96px; display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px; border-radius: 11px; cursor: pointer; text-align: left;
  background: rgba(6, 16, 25, .5); border: 1px solid rgba(166, 196, 224, .2);
  color: var(--muted); transition: border-color .2s, background .2s, color .2s;
}
.wiz-addon-tier:hover { border-color: rgba(54, 212, 249, .5); color: var(--text); }
/* selected tier — strong blue highlight + glow, modeled on the delivery .wiz-choice.is-on */
.wiz-addon-tier.is-selected {
  border-color: var(--cyan); color: var(--text);
  background: linear-gradient(170deg, rgba(20, 146, 253, .18), rgba(87, 218, 249, .05));
  box-shadow: 0 0 22px rgba(20, 146, 253, .18), inset 0 0 0 1px rgba(54, 212, 249, .5);
}
.wiz-addon-tier:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.wiz-addon-tier b { font-family: var(--font-display); font-size: 15px; letter-spacing: .5px; text-transform: uppercase; }
.wiz-addon-tier-price { font-family: var(--font-mark); font-size: 13px; font-weight: 600; color: var(--cyan); font-variant-numeric: tabular-nums; }
.wiz-addon-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wiz-addon-billing { display: inline-flex; }
.wiz-addon-billing .bt-opt { padding: 8px 18px; font-size: 13px; }
/* D88 — the add-on is a purchase, not a trial: the chip states when it is billed */
.wiz-addon-today {
  font-family: var(--font-display); font-size: 13px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; color: var(--cyan);
}
.wiz-addon-price { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.wiz-addon-price b { color: var(--text); font-weight: 600; }
.wiz-addon-price[hidden] { display: none; }
.wiz-addon-vip { margin-top: 14px; font-size: 12px; color: var(--dim); line-height: 1.5; }

/* ---------------- delivery: progressive reveal + disclaimer ---------------- */
.wiz-delivery-lead { font-size: 14px; color: var(--muted); margin-bottom: 16px; }
#wizDeliveryRest[hidden] { display: none; }
/* D153 — Return Shipping Method hides on the two roads with no method to elect
   (prepaid, drop-off). The div carries no display rule of its own, so [hidden] would
   win unaided; written out anyway because the D112 trap is that a display rule added
   later turns a working hide into a silent no-op. */
#wizReturnMethod[hidden] { display: none; }

.wiz-disclaimer {
  margin-top: 20px; padding: 16px 18px; border-radius: 14px;
  background: rgba(255, 209, 102, .06); border: 1px solid rgba(255, 209, 102, .34);
}
.wiz-disclaimer[hidden] { display: none; }
.wiz-disclaimer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wiz-disclaimer-head .wiz-subhead { margin-top: 0; }
.wiz-disclaimer-check {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid rgba(61, 214, 140, .5); background-color: rgba(61, 214, 140, .12);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%233DD68C" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>');
  background-repeat: no-repeat; background-position: center; background-size: 15px;
}
.wiz-disclaimer-check[hidden] { display: none; }
.wiz-disclaimer-body { margin: 10px 0 4px; }
.wiz-disclaimer-body p { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-bottom: 9px; }
.wiz-disclaimer-body p:last-child { margin-bottom: 0; }
.wiz-disclaimer-agree { margin-top: 12px; }

/* ---------------- shipping rates + insurance disclosure ---------------- */
.wiz-rate { align-items: center; }
.wiz-rates-msg { font-size: 13px; color: var(--dim); padding: 12px 2px; line-height: 1.5; }
/* D103.6 — a carrier OUTAGE is not a refusal of the customer's request: it reads as the
   same quiet hint the missing-address gate uses, with a retry they can press, instead of
   the red banner that sends them hunting for a field they filled in correctly. */
.wiz-rates-retry {
  margin-left: 6px; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--cyan); text-decoration: underline;
}
.wiz-rates-retry:hover { text-decoration: none; }
.wiz-insure { margin-top: 14px; }
.wiz-insure-amt { color: var(--dim); font-weight: 400; }
.wiz-compliance {
  margin-top: 10px; font-size: 12px; color: #FFD166; line-height: 1.5;
  border-left: 3px solid rgba(255, 209, 102, .5); padding-left: 12px;
}
/* D103.7 — why an option is missing from the list above it: the order's declared value
   is past what a carrier will insure. Same amber "read this" voice as the compliance
   note, since both are a rule the customer did not choose and cannot argue with. */
.wiz-limit-note {
  margin: 14px 0 0; font-size: 12.5px; color: #FFD166; line-height: 1.5;
  border-left: 3px solid rgba(255, 209, 102, .5); padding-left: 12px;
}
.wiz-limit-note[hidden] { display: none; }

/* ---------------- address book + save ---------------- */
.wiz-addrbook { margin-bottom: 14px; }
.wiz-addrbook[hidden] { display: none; }
.wiz-saveaddr { margin-top: 14px; }
/* D103.3 — the separate-return reveal is a stacked field group of its own, so it
   opens with the same top gap every other one does (.wiz-subhead's 22px). Without
   it, "Select a Return Address" sat against the bottom edge of the radio card that
   revealed it, reading as part of the card. */
#wizRetAddrBlock { margin-top: 22px; }
/* D112 — the DEALER's single address block lands in #wizAddrDealerSlot, directly
   under the same radio pair, and needs the same gap for the same reason: without it
   "Select a saved address" sat against the bottom edge of the card that revealed it.
   A hidden block is display:none, so the gap goes with it. */
#wizAddrDealerSlot > * { margin-top: 22px; }

/* ---------------- review (checkout step 3) ---------------- */
.wiz-review-sec {
  border: 1px solid rgba(166, 196, 224, .14); border-radius: 14px;
  padding: 14px 16px; margin-bottom: 12px; background: rgba(6, 16, 25, .4);
}
.wiz-review-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wiz-review-head .wiz-subhead { margin: 0; }
.wiz-review-edit {
  flex-shrink: 0; font: 600 12px var(--font-body); color: var(--cyan); cursor: pointer;
  background: rgba(54, 212, 249, .08); border: 1px solid rgba(54, 212, 249, .3);
  border-radius: 999px; padding: 4px 12px; transition: background .2s;
}
.wiz-review-edit:hover { background: rgba(54, 212, 249, .16); }
.wiz-review-edit:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.wiz-review-body { margin-top: 8px; font-size: 13.5px; color: var(--muted); line-height: 1.6; overflow-wrap: anywhere; }
.wiz-review-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.wiz-review-cards li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: .3px; color: var(--text);
}
.wiz-review-qty { flex-shrink: 0; font-family: var(--font-mark); font-size: 12px; color: var(--dim); font-weight: 500; }
.wiz-review-empty { font-size: 13px; color: var(--dim); }
.wiz-sum-edit { margin-left: auto; }

/* review: Order Type rush chip (D64) */
.wiz-review-rush {
  display: inline-block; margin-left: 6px; font-family: var(--font-mark);
  font-size: 12.5px; font-weight: 600; color: var(--cyan);
}
/* D138 — the Settings turnaround for the chosen order type, under the type name */
.wiz-review-turn { display: block; margin-top: 3px; font-size: 12px; color: var(--dim); }

/* review: card lines — title with the Reholder cert number beneath it (D82) */
.wiz-review-cardname { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wiz-review-cert {
  font-family: var(--font-mark); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0; color: var(--dim);
}

/* review: bulk category lines (D81) — category + its facts, quantity on the right */
.wiz-review-bulkcat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.wiz-review-bulkmeta {
  font-family: var(--font-body); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0; color: var(--dim);
}
.wiz-review-bulknote { margin-top: 10px; font-size: 12px; color: var(--dim); line-height: 1.5; }

/* review: shipping terms agreed-state + delivery instructions */
.wiz-review-termline { margin-top: 8px; font-size: 13px; color: var(--muted); }
.wiz-review-termline b { color: var(--text); font-weight: 700; }
.wiz-review-instr {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  background: rgba(255, 209, 102, .06); border: 1px solid rgba(255, 209, 102, .3);
  font-size: 12.5px; line-height: 1.5; color: var(--muted); white-space: pre-wrap;
}
.wiz-review-instr-label {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .5px;
  text-transform: uppercase; color: #FFD166; margin-bottom: 3px;
}

/* ---------------- responsive ---------------- */
@media (max-width: 980px) {
  .wiz-checkout-layout { grid-template-columns: 1fr; }
  .wiz-summary { position: static; order: -1; }
}
@media (max-width: 560px) {
  .wiz-grid, .wiz-grid2 { grid-template-columns: 1fr; }
  .wiz-panel { padding: 20px 16px; }
  /* D85: the nested rate / drop-off panels keep the rail but lose the indent */
  .wiz-ratepanel, .wiz-droppanel { margin-left: 0; padding-left: 12px; }
  .wiz-finder { padding: 16px 14px; }
  .wiz-steps { gap: 8px; }
  .wiz-step-name { display: none; }
  .wiz-step-sep { flex-basis: 24px; }
  .wiz-actions { flex-direction: column-reverse; align-items: stretch; }
  .wiz-actions-right { flex-direction: column-reverse; align-items: stretch; }
  .wiz-next { width: 100%; min-width: 0; }
  .wiz-savedraft { text-align: center; padding: 10px; }
  .wiz-q-main { flex-wrap: wrap; }
  .wiz-q-qty { margin-left: auto; }
}

/* ---- D64.1 Order Subtotal bubble (Submit Cards, right rail) ----
   Live per-card pricing beside the entry form + queue so the customer
   sees each card's service cost before checkout. Sticky on desktop;
   stacks under the queue on small screens. */
.wiz-p1-cols { display: flex; gap: 22px; align-items: flex-start; }
.wiz-p1-main { flex: 1 1 auto; min-width: 0; }
.wiz-subtotal {
  flex: 0 0 250px; position: sticky; top: 96px;
  background: rgba(6,16,25,.55); border: 1px solid rgba(166,196,224,.16);
  border-radius: 14px; padding: 16px 16px 14px;
}
.wiz-sub-head {
  font-family: var(--font-display); font-size: 13.5px; font-weight: 700;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted);
  margin: 0 0 12px;
}
.wiz-sub-empty { color: var(--dim); font-size: 12.5px; margin: 0; line-height: 1.5; }
.wiz-sub-lines { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.wiz-sub-line { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; align-items: baseline; }
.wiz-sub-card {
  grid-column: 1; font-size: 12px; font-weight: 700; letter-spacing: .3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wiz-sub-amt { grid-column: 2; grid-row: 1; font-family: var(--font-mark); font-size: 12.5px; }
.wiz-sub-meta { grid-column: 1 / -1; color: var(--dim); font-size: 11.5px; line-height: 1.4; }
.wiz-sub-rush .wiz-sub-card, .wiz-sub-rush .wiz-sub-amt { color: var(--cyan); }
.wiz-sub-total {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1px solid rgba(166,196,224,.18); padding-top: 11px; font-weight: 700;
}
.wiz-sub-total b { font-family: var(--font-mark); font-size: 15.5px; }
.wiz-sub-note { color: var(--dim); font-size: 11px; margin: 9px 0 0; line-height: 1.5; }
@media (max-width: 860px) {
  .wiz-p1-cols { flex-direction: column; }
  .wiz-subtotal { position: static; width: 100%; flex: none; }
}

/* ---- D81 BULK category builder (Order Type = Bulk) ----
   Replaces the add-a-card box + queue on Submit Cards. Rows reuse the shared
   .wiz-field controls in a compact grid. D84: the per-card cap that used to
   render here as an amber notice now lives in the Declared Value Terms modal
   at the bottom of this file. */
#wizCardFlow[hidden], .wiz-bulk[hidden] { display: none; }
.wiz-bulk {
  border: 1px solid rgba(166, 196, 224, .16); border-radius: 16px;
  padding: 20px 22px; background: rgba(6, 16, 25, .38); margin-bottom: 24px;
}
.wiz-bulk-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 10px;
}
.wiz-bulk-head h3 {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase;
}
.wiz-bulk-count { font-size: 13px; color: var(--dim); font-family: var(--font-mark); }
/* the clause + cap notice read like printed policy text — Verdana, not the
   site display faces */
.wiz-bulk-clause {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 12px; color: var(--muted); line-height: 1.6; margin-bottom: 8px;
  border-left: 3px solid rgba(54, 212, 249, .45); padding-left: 12px;
}
.wiz-bulk-clause[hidden] { display: none; }
.wiz-bulk-lead {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 11.5px; color: var(--dim); line-height: 1.55; margin-bottom: 14px;
}

.wiz-bulk-rows { display: flex; flex-direction: column; gap: 14px; }
.wiz-bulk-row {
  border: 1px solid rgba(166, 196, 224, .14); border-radius: 14px;
  padding: 14px 16px; background: rgba(6, 16, 25, .4);
}
.wiz-bulk-grid {
  display: grid; gap: 12px 14px;
  grid-template-columns: minmax(0, 1.2fr) 92px 118px minmax(0, 1.4fr) minmax(0, 1.2fr);
  align-items: start;
}
/* every label reserves the same two-line height, bottom-aligned — a wrapping
   label ("Total Declared Value (USD)") can never push its box below the row */
.wiz-bulk-grid .wiz-field label {
  display: flex; align-items: flex-end; gap: 3px; min-height: 30px;
}
.wiz-bulk-row input, .wiz-bulk-row select {
  width: 100%; font: 14px var(--font-body); color: var(--text);
  background: rgba(6, 16, 25, .72); border: 1px solid rgba(166, 196, 224, .2);
  border-radius: 10px; padding: 10px 12px; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.wiz-bulk-row select {
  cursor: pointer; appearance: none; -webkit-appearance: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%2394ADC4" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>');
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px;
}
.wiz-bulk-row input:focus, .wiz-bulk-row select:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(54, 212, 249, .15); }
.wiz-bulk-row input.wiz-invalid, .wiz-bulk-row select.wiz-invalid { border-color: #F76F72; box-shadow: 0 0 0 3px rgba(247, 111, 114, .15); }
.wiz-bulk-declared .wiz-price input { padding-left: 24px; }
/* the mandated placeholder is a full sentence — shrink it so it reads in the field */
.wiz-bulk-declared input::placeholder { font-size: 11.5px; color: var(--dim); opacity: .8; }
/* D84 — read-only until the declared value terms are agreed: it still reads as a
   real field (it is about to become one), just dimmed and pointer-cued */
.wiz-bulk-row input.wiz-bulk-locked {
  cursor: pointer; color: var(--muted);
  background: rgba(6, 16, 25, .5); border-style: dashed;
}

.wiz-bulk-rowfoot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-top: 10px;
}
.wiz-bulk-rowerr { flex: 1 1 240px; min-width: 0; font-size: 12.5px; color: #ffd7d8; line-height: 1.5; }
.wiz-bulk-rowerr[hidden] { display: none; }
.wiz-bulk-remove {
  flex-shrink: 0; margin-left: auto; font: 600 12px var(--font-body); color: var(--dim); cursor: pointer;
  background: rgba(166, 196, 224, .06); border: 1px solid rgba(166, 196, 224, .2);
  border-radius: 999px; padding: 6px 14px; transition: border-color .2s, color .2s, background .2s;
}
.wiz-bulk-remove:hover:not(:disabled) { border-color: #F76F72; color: #F76F72; background: rgba(247, 111, 114, .08); }
.wiz-bulk-remove:disabled { opacity: .4; cursor: not-allowed; }

.wiz-bulk-error {
  margin-top: 14px; padding: 12px 15px; border-radius: 12px;
  background: rgba(247, 111, 114, .1); border: 1px solid rgba(247, 111, 114, .42);
  color: #ffd7d8; font-size: 13px; line-height: 1.6;
}
.wiz-bulk-error[hidden] { display: none; }
.wiz-bulk-actions { margin-top: 16px; display: flex; justify-content: flex-start; }

@media (max-width: 1080px) {
  .wiz-bulk-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); }
}
@media (max-width: 620px) {
  .wiz-bulk { padding: 16px 14px; }
  .wiz-bulk-grid { grid-template-columns: 1fr; }
  .wiz-bulk-remove { width: 100%; }
}

/* ---- D84 Declared Value Terms modal ----
   The wizard's own dialog (the site sign-in modal's affordances — overlay,
   panel, corner close — under wiz- names so main.js never touches it). Policy
   lines are Verdana like the rest of the wizard's printed terms. */
.wiz-modal-overlay {
  position: fixed; inset: 0; z-index: 220;
  background: rgba(4, 10, 16, .7); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}
.wiz-modal-overlay.open { opacity: 1; visibility: visible; }
.wiz-modal {
  position: relative; width: 100%; max-width: 470px;
  background: linear-gradient(170deg, #14283c, #0a1826);
  border: 1px solid rgba(166, 196, 224, .2);
  border-radius: 24px; padding: 34px 30px 28px;
  transform: translateY(20px) scale(.97); transition: transform .3s;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .6), var(--shadow-glow);
  max-height: calc(100vh - 48px); overflow-y: auto;
}
.wiz-modal-overlay.open .wiz-modal { transform: translateY(0) scale(1); }
.wiz-modal-close {
  position: absolute; top: 16px; right: 16px;
  background: rgba(166, 196, 224, .08); border: none; color: var(--muted);
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 13px;
  transition: background .2s;
}
.wiz-modal-close:hover { background: rgba(166, 196, 224, .2); }
.wiz-modal-title {
  font-family: var(--font-display); font-size: 21px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; padding-right: 40px; margin-bottom: 16px;
}
.wiz-modal-body {
  border-left: 3px solid rgba(255, 209, 102, .5); padding-left: 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.wiz-modal-line {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 12px; color: var(--muted); line-height: 1.6; margin: 0;
}
.wiz-modal-line b { color: #FFD166; font-weight: 700; }
/* D103.3 — the shipping-terms gate CLONES its copy from the disclaimer block (one
   text on the page, no drift), so those paragraphs arrive without a class: give
   them the same treatment .wiz-modal-line gets. */
#wizShipTermsBody p {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 12px; color: var(--muted); line-height: 1.6; margin: 0;
}
.wiz-modal-agree { margin-top: 18px; }
.wiz-modal-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 12px; flex-wrap: wrap; margin-top: 20px;
}
.wiz-modal-cancel {
  font: 600 13px var(--font-body); color: var(--dim); cursor: pointer;
  background: rgba(166, 196, 224, .06); border: 1px solid rgba(166, 196, 224, .2);
  border-radius: 999px; padding: 9px 18px; transition: border-color .2s, color .2s, background .2s;
}
.wiz-modal-cancel:hover { color: var(--text); border-color: rgba(166, 196, 224, .4); }
.wiz-modal-actions .btn:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 480px) {
  .wiz-modal { padding: 28px 20px 22px; border-radius: 18px; }
  .wiz-modal-actions { justify-content: stretch; }
  .wiz-modal-actions .wiz-modal-cancel, .wiz-modal-actions .btn { flex: 1 1 auto; text-align: center; }
}

/* ---------------- D89 — dealer Customer Info (dealers only) ----------------
   The section a DEALER sees instead of the delivery options: their own record
   of whose cards these are. Everything reuses the step's existing field/grid
   styling; only the spacing and the "for me" disabled state are new. */
.wiz-dealer-grid { margin-top: 16px; }
/* The "for me" switch carries a second, muted line under its label, so the row is
   no longer one line of text: the box has to sit against the FIRST line instead of
   floating in the middle of the pair (.wiz-check centres it). */
.wiz-dealer-self { align-items: flex-start; }
.wiz-dealer-self input { margin-top: 1px; }
.wiz-dealer-self-copy { display: flex; flex-direction: column; gap: 4px; }
/* display:flex above would beat [hidden] on this span — its companion */
.wiz-dealer-self-copy[hidden] { display: none; }
.wiz-dealer-self-note { max-width: 62ch; }
.wiz-dealer-hint { margin-top: 14px; }
/* checked "This order is for me" really disables the fields (the base rule
   covers input/select only — the note is a textarea) */
.wiz-field textarea:disabled { opacity: .55; cursor: not-allowed; resize: none; }
.wiz-dealer-grid.is-off .wiz-field label { opacity: .6; }
/* D90: "This order is for me" now HIDES the four fields (they were only
   disabled) — .wiz-grid sets display:grid, so [hidden] needs its companion. */
#wizDealerFields[hidden] { display: none; }