/* ============================================================
   VIPS V2 — Public Parking Registration (re-theme of legacy markup)
   Depends on v2.css tokens + v2-public.css (modal). Light & dark aware.
   Everything is scoped under .public-reg-main so the V2 nav/footer
   (which also use .btn) stay untouched.
   ============================================================ */
.hidden { display: none !important; }

/* ---- account zone lookup (logged-in entry) ---- */
.account-zone-entry { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-1); padding: clamp(18px, 3vw, 24px); margin-bottom: 20px; }
.account-zone-entry__panel { max-width: 540px; }
.account-zone-entry__panel > label { display: block; font-size: 13px; font-weight: 600; color: var(--text-heading); margin-bottom: 8px; }
/* search box — same look as the hero lookup (leading magnifier + orange go) */
.account-zone-entry__lookup { display: flex; gap: 10px; align-items: stretch; max-width: 560px; }
.account-zone-entry .lookup-input { position: relative; flex: 1; display: flex; align-items: center; gap: 12px; background: var(--surface); border: 1.5px solid var(--border-control); border-radius: var(--r-m); height: 56px; padding: 0 16px; cursor: text; transition: border-color .15s, box-shadow .15s; }
.account-zone-entry .lookup-input:focus-within { border-color: var(--brand); box-shadow: var(--focus-ring); }
.account-zone-entry .lookup-input.has-error { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(179,36,20,.22); }
.account-zone-entry .lookup-input__ic { width: 20px; height: 20px; color: var(--text-muted); flex: none; }
.account-zone-entry .lookup-input input { flex: 1; border: 0; outline: none; background: transparent; font-family: var(--font-mono); font-size: 16px; letter-spacing: .04em; color: var(--text-heading); min-width: 0; }
.account-zone-entry .lookup-input input::placeholder { color: var(--text-muted); font-family: var(--font-sans); letter-spacing: 0; }
.account-zone-entry .lookup-loader { position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border: 2px solid var(--line); border-top-color: var(--brand-strong); border-radius: 50%; display: none; animation: regspin .7s linear infinite; }
.account-zone-entry .lookup-input.is-loading .lookup-loader { display: block; }
.account-zone-entry .lookup-btn { flex: none; width: 56px; height: 56px; border-radius: var(--r-m); background: var(--brand-strong); color: #fff; border: 0; cursor: pointer; display: grid; place-items: center; transition: background .15s; }
.account-zone-entry .lookup-btn:hover { background: var(--brand-hover); }
.account-zone-entry .lookup-btn svg { width: 22px; height: 22px; }
.account-zone-entry .lookup-error { display: none; margin-top: 12px; background: var(--danger-bg); border: 1px solid var(--danger-line); color: var(--danger); border-radius: var(--r-m); padding: 10px 13px; font-size: 13px; line-height: 1.45; }
.account-zone-entry .lookup-error.show { display: block; }
.account-zone-entry__helper { margin: 14px 0 0; font-size: 13px; color: var(--text-secondary); }
.account-zone-entry__helper a { color: var(--brand-strong); font-weight: 600; text-decoration: none; }
.account-zone-entry__helper a:hover { color: var(--brand-hover); }

/* padding-block, not the four-value shorthand. The shorthand's `0` for the horizontal sides also
   applied when this element is the app shell's .app-main-body, wiping out the shell's gutter and
   leaving the card flush against the sidebar. Standalone pages get their horizontal inset from
   .reg-shell below, so this rule never needed to set it. */
.public-reg-main { padding-block: clamp(22px, 4vw, 40px) clamp(48px, 7vw, 80px); }
.reg-shell { max-width: 1040px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 28px); }
.public-reg-page-card { display: flex; flex-direction: column; gap: 20px; }

/* ---- shared card / form atoms (scoped) ---- */
.public-reg-main .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 600; font-size: 14px; line-height: 1;
  height: 46px; padding: 0 20px; border-radius: var(--r-s); border: 1.5px solid transparent;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s; text-decoration: none;
}
.public-reg-main .btn.btn-sm { height: 42px; padding: 0 16px; font-size: 13.5px; }
.public-reg-main .btn.primary { background: var(--brand-strong); color: #fff; border-color: var(--brand-strong); }
.public-reg-main .btn.primary:hover { background: var(--brand-hover); border-color: var(--brand-hover); }
.public-reg-main .btn.ghost { background: var(--surface); color: var(--text-heading); border-color: var(--border-control); }
.public-reg-main .btn.ghost:hover { background: var(--surface-2); }
.public-reg-main .btn:disabled { opacity: .5; cursor: not-allowed; }
.public-reg-main .btn-ghost { background: none; border: 0; color: var(--brand-strong); font-weight: 600; font-size: 13.5px; cursor: pointer; padding: 0 6px; }
.public-reg-main .btn-ghost:hover { color: var(--brand-hover); }
.public-reg-main .btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.public-reg-main .btn.is-loading::after { content: ""; position: absolute; width: 17px; height: 17px; top: 50%; left: 50%; margin: -8.5px 0 0 -8.5px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: regspin .7s linear infinite; }
@keyframes regspin { to { transform: rotate(360deg); } }

.public-reg-main .text-box {
  width: 100%; height: 48px; border: 1.5px solid var(--border-control); border-radius: var(--r-m);
  background: var(--surface); color: var(--text-heading); font-family: var(--font-sans); font-size: 15px;
  padding: 0 14px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.public-reg-main .text-box::placeholder { color: var(--text-muted); }
.public-reg-main .text-box:focus { border-color: var(--brand); box-shadow: var(--focus-ring); }
.public-reg-main .text-box[readonly] { background: var(--surface-2); color: var(--text-secondary); cursor: default; }
.public-reg-main .field-group.has-error .text-box { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(179,36,20,.22); }

.public-reg-main .form-field { display: flex; flex-direction: column; gap: 7px; }
.public-reg-main .form-field > label { font-size: 13px; font-weight: 600; color: var(--text-heading); }
.public-reg-main .req { color: var(--danger); margin-left: 2px; }
.public-reg-main .field-error { color: var(--danger); font-size: 12.5px; line-height: 1.4; display: none; }
.public-reg-main .field-error.show, .public-reg-main .field-error:not(:empty) { display: block; }
.public-reg-main .field-hint { font-size: 12.5px; color: var(--text-muted); line-height: 1.5; margin: 0; }
.public-reg-main .auto-fill-note { font-size: 12.5px; color: var(--success); margin-top: 4px; }
.form-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ---- intro ---- */
.public-reg-intro { display: grid; grid-template-columns: 1.5fr .9fr; gap: 20px; align-items: stretch;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: clamp(20px, 3vw, 28px); box-shadow: var(--sh-1); }
.public-reg-kicker { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-strong); margin: 0 0 8px; }
.public-reg-title { font-size: clamp(22px, 3vw, 30px); letter-spacing: -.02em; color: var(--text-heading); margin: 0 0 8px; }
.public-reg-sub { font-size: 14px; color: var(--text-secondary); line-height: 1.55; margin: 0; }
.public-reg-zone-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.public-reg-zone-card strong { font-size: 15px; color: var(--text-heading); }
.public-reg-zone-card span { font-size: 12.5px; color: var(--text-secondary); }
.reg-ppo-badge { align-self: flex-start; display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .03em;
  color: var(--brand-strong); background: var(--brand-tint); border: 1px solid var(--brand-line); border-radius: var(--r-pill); padding: 4px 11px; }

/* ---- banners ---- */
.public-zone-missing { background: var(--warning-bg); border: 1px solid var(--warning-line); color: var(--warning); border-radius: var(--r-m); padding: 13px 16px; font-size: 13.5px; line-height: 1.5; }
.public-account-banner { background: var(--success-bg); border: 1px solid var(--success-line); color: var(--success); border-radius: var(--r-m); padding: 13px 16px; font-size: 13.5px; line-height: 1.5; }

/* ---- generic section card ---- */
.account-zone-review, .public-access-card, .reg-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-1);
}

/* ---- zone review ---- */
.account-zone-review { padding: clamp(20px, 3vw, 28px); display: flex; flex-direction: column; gap: 18px; }
.account-zone-review__head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.account-zone-review__kicker { font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-strong); margin: 0 0 6px; }
.account-zone-review__head h3 { font-size: 18px; color: var(--text-heading); margin: 0 0 6px; letter-spacing: -.01em; }
.account-zone-review__head p { font-size: 13.5px; color: var(--text-secondary); margin: 0; max-width: 62ch; line-height: 1.55; }
.account-zone-review__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.account-zone-review__details { border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; align-self: start; }
.account-zone-review__row { display: flex; justify-content: space-between; gap: 12px; padding: 11px 14px; font-size: 13.5px; }
.account-zone-review__row + .account-zone-review__row { border-top: 1px solid var(--line); }
.account-zone-review__row span { color: var(--text-secondary); }
.account-zone-review__row strong { color: var(--text-heading); text-align: right; font-weight: 600; }
/* one single card — notice sits directly in the card (no nested box) */
.account-zone-review__notes { padding: 0; }
.account-zone-review__notes h4 { font-size: 18px; color: var(--text-heading); margin: 0 0 16px; letter-spacing: -.01em; }
.account-zone-review__note-list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 15px; }
.account-zone-review__note-list li { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.account-zone-review__note-list li::marker { color: var(--brand-strong); font-weight: 600; }
.account-zone-review__note-list strong { display: block; font-size: 15px; color: var(--text-heading); margin-bottom: 3px; }
.account-zone-review__actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

/* zone-review shown as a MODAL (account flow): scrollable body + sticky footer */
.zone-review-modal { max-width: 720px; max-height: 88vh; max-height: 88dvh; display: flex; flex-direction: column; overflow: hidden; }
.zone-review-modal > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.zone-review-modal__body { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.zone-review-modal__body > * { flex: 0 0 auto; }   /* don't let the scroll body collapse children */
/* property details = a proper colored card inside the popup (not dull) */
.zone-review-modal__body .account-zone-review__details { align-self: stretch; background: var(--brand-tint); border: 1px solid var(--brand-line); }
.zone-review-modal__body .account-zone-review__row { padding: 12px 16px; }
.zone-review-modal__body .account-zone-review__row + .account-zone-review__row { border-top: 1px solid var(--brand-line); }
.zone-review-modal__body .account-zone-review__row span { color: var(--brand-strong); font-weight: 600; }
.zone-review-modal__body .account-zone-review__row strong { color: var(--text-heading); font-weight: 600; font-size: 14px; }
.zone-review-modal__intro { font-size: 13.5px; color: var(--text-secondary); margin: 0; line-height: 1.55; }
.zone-review-modal__foot { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; padding: 14px 20px; border-top: 1px solid var(--line); background: var(--surface); }

/* ---- notice merged into the intro card: ONE card, fixed-height scroll body,
        action buttons always pinned at the bottom ---- */
.public-reg-intro .account-zone-review {
  grid-column: 1 / -1;
  background: none; border: 0; border-radius: 0; box-shadow: none;
  margin-top: 4px; padding: 18px 0 0; border-top: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 0;
  max-height: 56vh; min-height: 0;
}
.public-reg-intro .account-zone-review__notes { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0; }
.public-reg-intro .account-zone-review__note-list {
  flex: 1; min-height: 0; overflow-y: auto; padding-right: 10px;
  scrollbar-width: thin; scrollbar-color: var(--brand-line) transparent;
}
.public-reg-intro .account-zone-review__note-list::-webkit-scrollbar { width: 8px; }
.public-reg-intro .account-zone-review__note-list::-webkit-scrollbar-thumb { background: var(--brand-line); border-radius: 8px; }
.public-reg-intro .account-zone-review__actions {
  flex: none; margin-top: 0; padding-top: 16px; border-top: 1px solid var(--line); background: var(--surface);
}

/* ---- access (login / signup) ---- */
.public-access-card { padding: clamp(20px, 3vw, 28px); }
.public-access-head h2 { font-size: 18px; color: var(--text-heading); margin: 0 0 6px; letter-spacing: -.01em; }
.public-access-head p { font-size: 13.5px; color: var(--text-secondary); margin: 0 0 18px; line-height: 1.55; }
.access-tabs { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px; gap: 4px; margin-bottom: 18px; }
.access-tab { border: 0; background: none; padding: 8px 18px; border-radius: var(--r-pill); font-weight: 600; font-size: 13.5px; color: var(--text-secondary); cursor: pointer; transition: background .15s, color .15s; }
.access-tab.is-active { background: var(--brand-strong); color: #fff; }
.access-panel { display: none; }
.access-panel.active { display: block; }
.public-access-actions { margin-top: 16px; }

/* ---- wizard card ---- */
.reg-header { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; padding: clamp(20px, 3vw, 26px) clamp(20px, 3vw, 28px); border-bottom: 1px solid var(--line); }
.reg-title-block h2 { font-size: 19px; color: var(--text-heading); margin: 0 0 6px; letter-spacing: -.01em; }
.reg-title-block p { font-size: 13.5px; color: var(--text-secondary); margin: 0; max-width: 62ch; line-height: 1.55; }
.reg-steps { display: flex; gap: 10px; padding: 16px clamp(20px, 3vw, 28px); border-bottom: 1px solid var(--line); background: var(--surface-2); flex-wrap: wrap; }
.reg-step { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-muted); }
.reg-step-index { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--surface); border: 1.5px solid var(--line); font-size: 12px; font-weight: 700; color: var(--text-muted); flex: none; }
.reg-step-label { font-weight: 600; }
.reg-step.is-active { color: var(--text-heading); }
.reg-step.is-active .reg-step-index { background: var(--brand-strong); border-color: var(--brand-strong); color: #fff; }
.reg-step.is-complete { color: var(--text-secondary); }
.reg-step.is-complete .reg-step-index { background: var(--success); border-color: var(--success); color: #fff; }

.reg-section { display: none; padding: clamp(20px, 3vw, 28px); }
.reg-section.active { display: block; }
.reg-section > h3 { font-size: 17px; color: var(--text-heading); margin: 0 0 6px; letter-spacing: -.01em; }
.reg-section > .helper { font-size: 13.5px; color: var(--text-secondary); margin: 0 0 18px; line-height: 1.55; }
.form-section { padding: 18px 0; border-top: 1px solid var(--line); }
.form-section:first-of-type { border-top: 0; padding-top: 4px; }
.form-section > h3 { font-size: 14.5px; color: var(--text-heading); margin: 0 0 12px; }

/* radio pills + terms */
.inline-radio { display: flex; flex-wrap: wrap; gap: 10px; }
.radio-pill { display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--border-control); border-radius: var(--r-pill); padding: 9px 16px; cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--text-secondary); background: var(--surface); transition: border-color .15s, background .15s, color .15s; }
.radio-pill input { accent-color: var(--brand-strong); margin: 0; width: 15px; height: 15px; }
.radio-pill:has(input:checked) { border-color: var(--brand-strong); background: var(--brand-tint); color: var(--brand-strong); }
/* A parking type whose window is closed right now: visible but not on offer. */
.radio-pill--closed { opacity: .45; cursor: not-allowed; }
.radio-pill--closed input { pointer-events: none; }

/* ---- property notices: the admin's own notes, one click away ---- */
.reg-notices-link { margin: 0 0 12px; font-size: 13px; }
.reg-notices-link a { color: var(--brand-strong); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.user-notes-modal { max-width: 640px; width: min(640px, calc(100vw - 32px)); }
.user-notes-modal .modal-body { max-height: 60vh; overflow-y: auto; }
.user-note { padding: 14px 0; border-bottom: 1px solid var(--line); }
.user-note:last-child { border-bottom: 0; }
/* Admin-authored HTML arrives with its own inline styles — keep it contained. */
.user-note__html { font-size: 13.5px; line-height: 1.6; color: var(--text-heading); overflow-wrap: break-word; }
.user-note__html img { max-width: 100%; height: auto; }
.user-note__validity { font-size: 12px; color: var(--text-muted); margin: 6px 0 0; }
.user-note__pics { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; }
.user-note__pics figure { margin: 0; max-width: 180px; }
.user-note__pics img { max-width: 100%; border-radius: var(--r-s); border: 1px solid var(--line); }
.user-note__pics figcaption { font-size: 11.5px; color: var(--text-muted); margin-top: 4px; }

/* ---- what's left to register: the banner nobody can say they didn't see ---- */
.reg-quota-banner { display: flex; gap: 12px; align-items: flex-start; background: var(--brand-tint);
  border: 1px solid var(--brand-line); border-radius: var(--r-m); padding: 12px 16px; margin-bottom: 18px; }
.reg-quota-banner > svg { flex: none; width: 18px; height: 18px; color: var(--brand-strong); margin-top: 2px; }
.reg-quota-banner__lines { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.reg-quota-banner__lines p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--text-heading); }
.reg-quota-banner__lines p strong { color: var(--brand-strong); }
.reg-quota-banner__lines p.quota-exhausted strong { color: var(--danger, #c0392b); }
.reg-quota-banner__lines p.quota-note { font-size: 12px; color: var(--text-secondary); }
.public-terms-pill { align-items: flex-start; border-radius: var(--r-m); font-weight: 500; color: var(--text-secondary); line-height: 1.5; }
.public-terms-pill input { margin-top: 2px; }
.public-terms-pill:has(input:checked) { color: var(--text); }
.public-terms-pill a { color: var(--brand-strong); text-decoration: underline; text-underline-offset: 2px; }

/* date + Now — unified compact field with the "Now" button inside (vertical separator) */
.dt-field { display: flex; align-items: stretch; height: 44px; min-width: 0; background: var(--surface);
  border: 1.5px solid var(--border-control); border-radius: var(--r-m); overflow: hidden;
  transition: border-color .15s, box-shadow .15s; }
.dt-field:focus-within { border-color: var(--brand); box-shadow: var(--focus-ring); }
.field-group.has-error .dt-field { border-color: var(--danger); box-shadow: 0 0 0 3px rgba(179,36,20,.22); }
.dt-field__input { flex: 1 1 auto; min-width: 0; width: 100%; border: 0; background: transparent;
  font-family: var(--font-sans); font-size: 14px; color: var(--text-heading); padding: 0 12px; outline: none; }
.dt-field__input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .7; }
.dt-field__now { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 0;
  border-left: 1.5px solid var(--line); background: var(--surface-2); padding: 0 14px;
  font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; white-space: nowrap;
  transition: color .15s, background .15s; }
.dt-field__now:hover { color: var(--brand-strong); background: var(--brand-tint); }
.dt-field__now svg { width: 15px; height: 15px; flex: none; }
/* compact "To" field to match the height/scale of the unified From field */
.public-reg-main .text-box.dt-to { height: 44px; font-size: 14px; }

/* duration */
.duration-section { margin-top: 14px; }
.duration-meta { font-size: 12.5px; color: var(--text-muted); margin: 0 0 10px; }
.duration-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.duration-pill { border: 1.5px solid var(--line); background: var(--surface); border-radius: var(--r-m); padding: 11px 10px; font-size: 13px; font-weight: 600; color: var(--text-heading); cursor: pointer; text-align: center; transition: border-color .15s, background .15s, color .15s; }
.duration-pill:hover { border-color: var(--brand-line); }
.duration-pill.active { border-color: var(--brand-strong); background: var(--brand-tint); color: var(--brand-strong); }
.duration-empty { font-size: 13px; color: var(--text-muted); }
#expiryText { font-size: 13px; font-weight: 600; color: var(--text-heading); margin: 10px 0 0; }

/* spots */
.spot-grid-panel { display: flex; flex-direction: column; gap: 14px; }
.spot-types, .spot-levels { display: flex; flex-wrap: wrap; gap: 8px; }
.spot-type-pill, .spot-level-pill { border: 1.5px solid var(--line); background: var(--surface); border-radius: var(--r-pill); padding: 7px 14px; font-size: 12.5px; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: all .15s; }
.spot-type-pill.is-active, .spot-level-pill.is-active { border-color: var(--brand-strong); background: var(--brand-tint); color: var(--brand-strong); }
.spot-legend { display: flex; flex-wrap: wrap; gap: 14px; font-size: 12px; color: var(--text-secondary); }
.spot-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.spot-legend-item::before { content: ""; width: 12px; height: 12px; border-radius: 4px; border: 1.5px solid var(--line); background: var(--surface); }
.spot-legend-item.is-available::before { border-color: var(--brand-line); background: var(--surface); }
.spot-legend-item.is-selected::before { border-color: var(--brand-strong); background: var(--brand-strong); }
.spot-legend-item.is-taken::before { border-color: var(--line); background: var(--surface-3); }
.spot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 10px; }
.spot-tile { border: 1.5px solid var(--line); background: var(--surface); border-radius: var(--r-m); padding: 10px 8px; cursor: pointer; text-align: center; display: flex; flex-direction: column; gap: 2px; transition: border-color .15s, background .15s; }
.spot-tile:hover { border-color: var(--brand-line); }
.spot-label { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--text-heading); }
.spot-sub { font-size: 10.5px; color: var(--text-muted); }
.spot-tile.is-selected { border-color: var(--brand-strong); background: var(--brand-tint); }
.spot-tile.is-selected .spot-label { color: var(--brand-strong); }
.spot-tile.is-taken, .spot-tile.is-disabled { background: var(--surface-2); color: var(--text-disabled); cursor: not-allowed; opacity: .65; }

/* saved plate / contact picker */
.saved-plate-picker { position: relative; }
.saved-plate-trigger { border: 1.5px dashed var(--border-control); background: var(--surface); border-radius: var(--r-m); padding: 8px 12px; font-size: 12.5px; font-weight: 600; color: var(--brand-strong); cursor: pointer; width: 100%; text-align: left; }
.saved-plate-trigger:hover { border-color: var(--brand-strong); }
/* inset "Saved" trigger inside the plate field (same pattern as the "Now" button) */
.dt-field__saved { color: var(--brand-strong); }
.dt-field__saved:hover { color: var(--brand-strong); background: var(--brand-tint); }
.dt-field__saved.hidden { display: none; }
/* dropdown overlays below the field instead of pushing the layout */
.saved-plate-panel { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 30;
  border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); box-shadow: var(--sh-2); padding: 10px; flex-direction: column; gap: 8px; }
.saved-plate-picker.is-open .saved-plate-panel { display: flex; }
.saved-plate-list { display: flex; flex-direction: column; gap: 4px; max-height: 180px; overflow-y: auto; }
.saved-plate-item { border: 1px solid var(--line); background: var(--surface); border-radius: var(--r-s); padding: 8px 10px; font-size: 13px; color: var(--text-heading); cursor: pointer; text-align: left; }
.saved-plate-item:hover { background: var(--brand-tint); border-color: var(--brand-line); }
.saved-plate-empty { font-size: 12.5px; color: var(--text-muted); padding: 8px 4px; }

/* review summary */
.review-summary { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px 18px; }
.review-summary-head h3 { font-size: 14.5px; color: var(--text-heading); margin: 0 0 4px; }
.review-summary-head p { font-size: 12.5px; color: var(--text-secondary); margin: 0 0 14px; }
.review-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.review-item { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); padding: 11px 13px; display: flex; flex-direction: column; gap: 3px; }
.review-label { font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); }
.review-value { font-size: 14px; color: var(--text-heading); font-weight: 600; word-break: break-word; }
.review-edit-btn { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: var(--r-s); border: 1px solid var(--line); background: var(--surface); color: var(--text-muted); cursor: pointer; display: grid; place-items: center; padding: 0; }
.review-edit-btn:hover { color: var(--brand-strong); border-color: var(--brand-line); background: var(--brand-tint); }
.review-edit-btn svg { width: 14px; height: 14px; }
.review-item:has(.review-edit-btn) .review-value { padding-right: 28px; }

/* payment */
.pay-charge-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px 18px; }
.pay-charge-card__label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.pay-summary-line { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; color: var(--text-secondary); padding: 5px 0; }
.pay-summary-line span:last-child { font-family: var(--font-mono); color: var(--text-heading); }
.pay-summary-line.total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; font-size: 15px; font-weight: 600; color: var(--text-heading); }
.pay-summary-line.total span:last-child { color: var(--brand-strong); font-size: 16px; }

/* ============================================================
   Review & pay modal — redesigned permit summary
   ============================================================ */
.pay-modal { max-width: 660px; }
.pay-modal__body { gap: 14px; padding-top: 18px; }
.pay-modal__foot .btn { min-width: 120px; justify-content: center; }

.pay-permit { border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; background: var(--surface); }
.pay-permit__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 15px 18px; background: var(--brand-tint); border-bottom: 1px solid var(--brand-line); }
.pay-permit__loc { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pay-permit__loc strong { font-size: 15px; color: var(--text-heading); letter-spacing: -.01em; }
.pay-permit__loc span { font-size: 13px; color: var(--text-secondary); }
.pay-permit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.pay-cell { background: var(--surface); padding: 12px 18px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pay-cell__label { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.pay-cell__value { font-size: 13.5px; font-weight: 600; color: var(--text-heading); word-break: break-word; line-height: 1.35; }
.pay-methods { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.pay-method-pill { border: 1.5px solid var(--line); background: var(--surface); border-radius: var(--r-m); padding: 10px 18px; font-size: 13.5px; font-weight: 600; color: var(--text-heading); cursor: pointer; transition: all .15s; }
.pay-method-pill.active { border-color: var(--brand-strong); background: var(--brand-tint); color: var(--brand-strong); }
.pay-details-card { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r-m); padding: 16px 18px; }
.pay-details-card h4 { font-size: 14px; color: var(--text-heading); margin: 0 0 6px; }
.pay-free-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--success-bg); color: var(--success); border: 1px solid var(--success-line); border-radius: var(--r-pill); padding: 5px 12px; font-size: 12.5px; font-weight: 600; }

/* wizard footer */
/* non-sticky, no background bar — buttons sit below the content like the confirmation step */
.reg-footer { display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; padding: 4px clamp(20px, 3vw, 28px) clamp(20px, 3vw, 28px); border-top: none; background: transparent; }
.reg-footer-left { font-size: 13px; color: var(--text-secondary); font-weight: 600; margin-right: auto; }
.reg-footer-actions { display: flex; gap: 10px; }

/* ---- confirmation (hidden until all 3 steps are complete) ---- */
.reg-confirm { display: none; }
.reg-confirm.active { display: block; }
/* The permit card (Views/Shared/_PermitCard) is styled ONLY by private-confirmation-share.css.
   A full copy of its styles used to live here too, and because this file loads after that one,
   the copy won on every wizard page — so the confirmation a driver saw after registering was a
   cramped 11px version of the card the /permit QR page shows at its designed size. What remains
   below is the one genuine user of these class names: Find-PPO-ID's result grid, scoped to its
   own card so it can never reach the shared one again. */
.confirm-card-v3 .confirm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-m); overflow: hidden; }
.confirm-card-v3 .confirm-row { background: var(--surface); padding: 11px 14px; display: flex; flex-direction: column; gap: 2px; }
.confirm-card-v3 .confirm-row strong { font-size: 11px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); }
.confirm-card-v3 .confirm-row span { font-size: 13.5px; color: var(--text-heading); font-weight: 500; word-break: break-word; }
.confirm-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* ---- validation modal text (modal itself comes from v2-public.css) ---- */
.validation-modal-text { color: var(--text-secondary); font-size: 14px; line-height: 1.55; margin: 0; white-space: pre-line; }

/* ============================================================
   Account (profile) registration — full-width left-aligned + compact
   ============================================================ */
/* Inside the app shell the gutter comes from .app-main-body (v2-shell.css) and the width from the
   shared .reg-shell rule there, so this only has to drop .reg-shell's own standalone page gutter -
   otherwise the two stack.
   An earlier fix here also set `max-width:none; margin:0`, on the belief that .app-main-body
   carried no horizontal padding. It does carry it - just from v2-account/permits/usage, none of
   which this page loads. So the card lost its gutter AND its width limit at once, and ended up
   full-bleed against the sidebar. The gutter now lives in one place, so this cannot recur. */
.app-main-body .reg-shell { padding-left: 0; padding-right: 0; }
.public-reg-main .public-reg-page-card { gap: 16px; }
/* compact */
.reg-section { padding: clamp(16px, 2.4vw, 22px); }
.form-section { padding: 14px 0; }
.reg-section > .helper { margin-bottom: 14px; }
.form-section > h3 { margin-bottom: 10px; }
/* section titles ("Select your parking type", "Spot selection") match the field labels */
.public-reg-main .form-section > h3 { font-size: 13px; font-weight: 600; color: var(--text-heading); }
.form-grid-2col { gap: 14px; }
.reg-header { padding: clamp(16px, 2.4vw, 22px) clamp(18px, 2.6vw, 24px); }
.reg-steps { padding: 14px clamp(18px, 2.6vw, 24px); }
.reg-footer { padding: 6px clamp(18px, 2.6vw, 24px) clamp(16px, 2.4vw, 22px); }
/* wizard header: property + sub street + zone id (no title/desc) */
.reg-header__zone { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.reg-header__zone strong { font-size: 16px; color: var(--text-heading); letter-spacing: -.01em; }
.reg-header__zone span { font-size: 13px; color: var(--text-secondary); }

/* ============================================================
   Natural-flow registration card — every step flows like the
   confirmation screen: no fixed height, no internal scroll,
   buttons sit below the content (not sticky, no background bar).
   ============================================================ */
.public-reg-main .reg-card { display: flex; flex-direction: column; max-width: 680px; }
/* the horizontal confirmation needs more room than the input form */
.public-reg-main .reg-card.is-confirm { max-width: 960px; }
.public-reg-main .reg-card .reg-section.active { flex: none; overflow: visible; }
/* tighter single-column inputs so the narrow card reads cleanly */
.public-reg-main .reg-section .form-grid-2col { max-width: 620px; }

/* ============================================================
   Step 1 — web "checkout" layout: form on the left, the payment
   summary as a sticky card on the right with its own Pay button.
   Mobile keeps the current single-column flow (everything stacks).
   ============================================================ */
.reg-pay-cta { display: none; }                 /* only shown inside the desktop sticky panel */
.reg-pay-btn { width: 100%; justify-content: center; font-size: 15px; }
.reg-pay-cta__note { font-size: 11.5px; color: var(--text-muted); text-align: center; margin: 9px 0 0; line-height: 1.45; }

@media (min-width: 861px) {
  /* the two-pane step needs more room than the narrow single-column form */
  .public-reg-main .reg-card { max-width: 980px; }
  .reg-split { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 26px; align-items: start; }
  .reg-split__main { min-width: 0; }
  .reg-split__main > .form-section:first-child { padding-top: 0; }
  .reg-split__main .form-grid-2col { max-width: none; }
  /* sticky payment summary */
  .reg-split__side { position: sticky; top: 18px; }
  .reg-pay-panel { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--sh-1); padding: 4px 16px 16px; }
  .reg-pay-panel > .form-section { padding: 14px 0; }
  .reg-pay-panel > .form-section:first-child > h3 { margin-top: 6px; }
  /* keep visa billing fields readable in the narrow column */
  .reg-split__side .form-grid-2col { grid-template-columns: 1fr; max-width: none; }
  .reg-pay-cta { display: block; margin-top: 2px; }
  /* the sticky panel carries the Pay action — hide the wizard footer on step 1 */
  body.page-public--registration .reg-card:not(.is-confirm) .reg-footer { display: none; }
}

/* ---- step 3: horizontal confirmation card (only visible when active) ---- */
.reg-section--confirm { flex-direction: column; gap: 18px; }
.reg-section--confirm.active { display: flex; }

.confirm-card-v3 { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); box-shadow: var(--sh-1); overflow: hidden; }

/* header: icon + titles + property/sub street | confirmation code top-right */
.confirm-v3__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 20px clamp(18px, 2.4vw, 26px); background: linear-gradient(180deg, var(--success-bg), transparent);
  border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.confirm-v3__head-main { display: flex; align-items: flex-start; gap: 14px; min-width: 0; }
.confirm-v3__icon { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--success); color: #fff; display: grid; place-items: center; box-shadow: 0 4px 12px -3px var(--success-line); }
.confirm-v3__icon svg { width: 24px; height: 24px; }
.confirm-v3__titles { min-width: 0; }
.confirm-v3__titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.confirm-v3__titlerow h2 { font-size: clamp(19px, 2.4vw, 23px); letter-spacing: -.02em; color: var(--text-heading); margin: 0; }
.confirm-v3__property { margin: 5px 0 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.confirm-v3__property strong { font-size: 15px; color: var(--text-heading); font-weight: 600; }
.confirm-v3__property span { font-size: 13px; color: var(--text-secondary); }
.confirm-v3__property span::before { content: "·"; margin-right: 8px; color: var(--text-muted); }
.confirm-v3__code { flex: none; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.confirm-v3__code-label { font-size: 10.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.confirm-v3__code-val { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--brand-strong); background: var(--brand-tint); border: 1px solid var(--brand-line); border-radius: var(--r-pill); padding: 5px 14px; }

/* type chip — colored by parking type */
.type-chip { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 4px 11px; border-radius: var(--r-pill); background: rgba(37,99,235,.12); color: #2563eb; border: 1px solid rgba(37,99,235,.28); }
.type-chip.is-visitor { background: rgba(37,99,235,.12); color: #2563eb; border-color: rgba(37,99,235,.28); }
.type-chip.is-resident { background: var(--success-bg); color: var(--success); border-color: var(--success-line); }
.type-chip.is-staff { background: rgba(124,58,237,.12); color: #7c3aed; border-color: rgba(124,58,237,.28); }

/* body: info grid (4 per row) on the left, QR on the right */
.confirm-v3__body { display: grid; grid-template-columns: 1fr auto; gap: clamp(20px, 3vw, 34px); padding: clamp(18px, 2.4vw, 26px); align-items: center; }
.confirm-v3__info { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 22px; }
.confirm-stat { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.confirm-stat__label { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); }
.confirm-stat__value { font-size: 14px; font-weight: 600; color: var(--text-heading); word-break: break-word; line-height: 1.35; }
.confirm-stat__value--paid { color: var(--success); }
.confirm-v3__qr { flex: none; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-left: clamp(0px, 2vw, 18px); border-left: 1px solid var(--line); }
.dummy-qr { width: 156px; height: 156px; border: 1px solid var(--line); border-radius: var(--r-m); padding: 8px; background: #fff; box-shadow: var(--sh-1); }
.confirm-v3__qr-hint { font-size: 12px; color: var(--text-secondary); margin: 0; text-align: center; }

.reg-section--confirm .confirm-actions { justify-content: flex-end; }

/* button spinner (used in the payment modal) */
.btn-spinner { display: inline-block; width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; vertical-align: -2px; margin-right: 7px; animation: regspin .7s linear infinite; }

/* ---- spot selection — clear available / selected / taken colors ---- */
.spot-legend-item::before { content: ""; width: 13px; height: 13px; border-radius: 4px; border: 1.5px solid var(--line); background: var(--surface); }
.spot-legend-item.is-available::before { border-color: var(--success-line); background: var(--success-bg); }
.spot-legend-item.is-selected::before { border-color: var(--brand-strong); background: var(--brand-strong); }
.spot-legend-item.is-taken::before { border-color: var(--danger-line); background: var(--danger-bg); }
.spot-tile { border-color: var(--success-line); background: var(--success-bg); }
.spot-tile .spot-label { color: var(--success); }
.spot-tile:hover { border-color: var(--success); }
.spot-tile.is-selected { border-color: var(--brand-strong); background: var(--brand-strong); }
.spot-tile.is-selected .spot-label, .spot-tile.is-selected .spot-sub { color: #fff; }
.spot-tile.is-taken, .spot-tile.is-disabled { border-color: var(--danger-line); background: var(--danger-bg); cursor: not-allowed; opacity: 1; }
.spot-tile.is-taken .spot-label, .spot-tile.is-disabled .spot-label { color: var(--danger); }
.spot-tile.is-taken .spot-sub, .spot-tile.is-disabled .spot-sub { color: var(--danger); opacity: .7; }

/* ---- responsive ---- */
@media (max-width: 760px) {
  .public-reg-intro { grid-template-columns: 1fr; }
  .account-zone-review__grid { grid-template-columns: 1fr; }
  .form-grid-2col { grid-template-columns: 1fr; }
  .confirm-card-v3 .confirm-grid { grid-template-columns: 1fr; }
  .confirm-v3__body { grid-template-columns: 1fr; }
  .confirm-v3__info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* QR moves to the top on mobile */
  .confirm-v3__qr { order: -1; border-left: none; border-bottom: 1px solid var(--line); padding-left: 0; padding-bottom: 16px; }
  .confirm-v3__code { text-align: left; align-items: flex-start; }
  /* equal, full-width action buttons */
  .confirm-actions { flex-direction: column; align-items: stretch; }
  .confirm-actions .btn { width: 100%; }
  .pay-permit__grid { grid-template-columns: 1fr; }
  /* mobile stepper: show only the current step (number + title) — one at a time */
  .reg-steps { gap: 8px; align-items: center; }
  .reg-step { display: none; }
  .reg-step.is-active { display: flex; flex: 1; min-width: 0; gap: 8px; }
  .reg-step.is-active .reg-step-label { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ============================================================
   Private registration — components that exist only on the
   private New Registration page (unit/plate suggestions, the
   multi-plate chip list, the "Now" chip, wallet panel, select
   control, and the confirmation share + save-my-spot blocks).
   Re-themed onto V2 tokens to match the public registration.
   ============================================================ */

/* input + addon button (plate add / confirm-share copy) */
.input-with-addon { display: flex; align-items: stretch; gap: 8px; }
.input-with-addon .text-box { flex: 1 1 auto; min-width: 0; }
.input-with-addon .btn { flex: none; white-space: nowrap; }
.input-with-addon--tight { gap: 0; border: 1.5px solid var(--border-control); border-radius: var(--r-m);
  background: var(--surface); overflow: hidden; }
.input-with-addon--tight:focus-within { border-color: var(--brand); box-shadow: var(--focus-ring); }
.input-with-addon--tight .text-box { border: 0; box-shadow: none; border-radius: 0; }
.input-with-addon--tight .text-box:focus { box-shadow: none; }

/* compact "Now" chip beside the datetime input */
.btn-now { flex: none; display: inline-flex; align-items: center; gap: 6px; border: 0;
  border-left: 1.5px solid var(--line); background: var(--surface-2); padding: 0 14px;
  font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; white-space: nowrap;
  transition: color .15s, background .15s; }
.btn-now:hover { color: var(--brand-strong); background: var(--brand-tint); }
.btn-now .now-icon { font-size: 14px; }

/* "+ Add plate" brand button */
.btn.orange { background: var(--brand-strong); color: #fff; border: 1px solid var(--brand-strong); }
.btn.orange:hover { background: var(--brand-hover); border-color: var(--brand-hover); }

/* suggestion dropdowns (unit / plate / spot) */
.input-with-suggestions, .plate-field-wrapper { position: relative; }
.suggestions { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m);
  box-shadow: var(--sh-2); max-height: 230px; overflow-y: auto; display: none; }
.suggestions:not(:empty) { display: block; }
.suggest-row { padding: 9px 12px; font-size: 13px; color: var(--text-secondary); cursor: pointer;
  border-bottom: 1px solid var(--line); background: var(--surface); }
.suggest-row:last-child { border-bottom: 0; }
.suggest-row:hover { background: var(--surface-2); color: var(--text-heading); }

/* multi-plate chip list */
.plate-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.plate-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border-radius: var(--r-pill);
  background: var(--brand-tint); color: var(--brand-strong); border: 1px solid var(--brand-line);
  font-size: 12.5px; font-weight: 600; }
.plate-chip button { border: 0; background: transparent; cursor: pointer; font-size: 13px; line-height: 1;
  color: inherit; padding: 0; }

/* expiry row */
.expiry-row { margin-top: 12px; }
.expiry-row-label { display: block; }

/* wallet panel inside the payment summary */
.pay-wallet-panel { margin-top: 6px; padding-top: 10px; border-top: 1px dashed var(--line); }
.pay-wallet-warning { margin-top: 8px; font-size: 12.5px; font-weight: 600; color: var(--danger); }

/* select control (visa billing country) */
.select-box { width: 100%; height: 46px; border: 1.5px solid var(--border-control); border-radius: var(--r-m);
  background: var(--surface); color: var(--text); font: inherit; font-size: 14px; padding: 0 12px; cursor: pointer; }
.select-box:focus { border-color: var(--brand); box-shadow: var(--focus-ring); outline: none; }

/* inline note / warning (duration quota) */
.note { font-size: 13px; border-radius: var(--r-m); padding: 10px 12px; }
.note.warning { background: var(--warning-bg); border: 1px solid var(--warning-line); color: var(--warning); }

/* confirmation: share link + save-my-spot */
.confirm-share { margin-top: 16px; }
.confirm-share-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.save-spot-panel { margin-top: 14px; border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface-2); padding: 14px; }
.save-spot-panel h4 { margin: 0 0 6px; font-size: 14px; color: var(--text-heading); }
.save-spot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0; }
.save-spot-row { margin-top: 10px; }
.btn.navy { background: var(--navy); color: #fff; border: 1px solid var(--navy); }
.btn.navy:hover { filter: brightness(1.15); }
.btn.navy-ghost { background: transparent; color: var(--text-secondary); border: 1.5px solid var(--line); }
.btn.navy-ghost:hover { border-color: var(--brand-line); color: var(--brand-strong); }

@media (max-width: 620px) {
  .save-spot-grid { grid-template-columns: 1fr; }
}

/* plate field: let the input+Saved dt-field flex beside the "+ Add plate" button */
.input-with-addon .dt-field { flex: 1 1 auto; min-width: 0; }

/* Unit & plates: narrower unit, wider licence-plate column */
.form-grid-2col.reg-unit-plate-grid { grid-template-columns: 0.7fr 1.3fr; }
@media (max-width: 620px) {
  .form-grid-2col.reg-unit-plate-grid { grid-template-columns: 1fr; }
}

/* base-rate qualifier in the payment summary */
.pay-summary-line .pay-rate-unit { font-weight: 500; font-size: 11px; color: var(--text-muted); }

/* ============================================================
   Visa payment modal (billing -> review -> process)
   ============================================================ */
.visa-pay-modal { max-width: 600px; }
.visa-pay-modal .visa-pay-view { display: none; }
.visa-pay-modal .visa-pay-view.is-active { display: block; }
.visa-review-block { margin-top: 16px; }
.visa-review-block h4 { margin: 0 0 10px; font-size: 13px; color: var(--text-heading); }
.visa-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.visa-review-grid .pay-cell { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
@media (max-width: 520px) { .visa-review-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Bolder modal copy — the validation & payment modals read too
   light otherwise (text was weight 400 in a muted colour).
   ============================================================ */
.modal-body { color: var(--text); }
.modal .modal-intro,
.modal .validation-modal-text { color: var(--text); font-weight: 500; }
.modal .field-hint { color: var(--text-secondary); font-weight: 500; }
.modal .pay-summary-line { font-weight: 500; color: var(--text); }
.modal .pay-summary-line.total { font-weight: 700; color: var(--text-heading); }
.modal .pay-cell__label { font-weight: 600; color: var(--text-muted); }
.modal .pay-cell__value { font-weight: 600; color: var(--text-heading); }
.modal .form-field label { font-weight: 600; }

/* The engine's own verdict (quota, sharing, prohibition, pay-and-park) is the single most
   important sentence on this step — a resident acts on it. It was rendered in the muted amber
   the .note atom carries, which read as an aside. It is now the heading colour, weighted, on a
   tinted panel with an accent edge so it reads as the answer rather than a footnote. */
.note.warning#quotaMessage,
#quotaMessage.note.warning {
  color: var(--text-heading);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.55;
  padding: 12px 14px;
  border-left: 4px solid var(--warning);
  background: var(--warning-bg);
  border-radius: var(--r-m);
}

/* ============================================================
   Card billing modal — the Stripe card field
   The card number, expiry and CVC do not fit a half-width column, so this field spans the billing
   grid. It used to try to say so with an inline grid-column while sitting inside the Address
   field's div, where there was no grid for it to span.
   .text-box is a 48px input with no vertical padding, and Stripe mounts an iframe inside it, so
   the box centres its contents instead of letting the iframe sit on the top edge.
   ============================================================ */
.visa-pay-modal #cardElementGroup { grid-column: 1 / -1; }
.visa-pay-modal #stripeCardElement {
  height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 14px;
}
.visa-pay-modal #stripeCardElement .StripeElement { width: 100%; }

/* ============================================================
   Confirmation — the per-plate permit rows

   Was a wall of inline style attributes, which is why it read as unfinished next to the rest of
   the page: hardcoded hairlines, ad-hoc type sizes and opacity instead of the type scale and the
   tokens, and no dark mode.

   The QR must stay dark-on-white to scan, so the white tile is a wrapper and the image itself is
   never rounded — rounding a QR clips the corner finder patterns a scanner looks for.
   ============================================================ */
.permit-results { margin-top: 18px; display: flex; flex-direction: column; gap: 12px; }
.permit-results__title {
  margin: 0; font-size: 15px; font-weight: 600; color: var(--text-heading);
  display: flex; align-items: baseline; gap: 8px;
}
.permit-results__title span {
  font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text-muted);
}

.permit-result {
  display: flex; align-items: center; gap: 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l);
  padding: 14px 16px; box-shadow: var(--sh-1);
}
.permit-result__qr {
  flex: none; display: grid; place-items: center;
  background: #fff;                       /* never themed: the code has to stay scannable */
  border: 1px solid var(--line); border-radius: var(--r-m); padding: 6px;
}
.permit-result__qr img { display: block; width: 72px; height: 72px; border-radius: 0; }

.permit-result__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.permit-result__plate {
  margin: 0; font-size: 16px; font-weight: 600; letter-spacing: -.01em;
  color: var(--text-heading); overflow-wrap: anywhere;
}
.permit-result__code {
  margin: 0; font-family: var(--font-mono); font-size: 13px; color: var(--brand-strong);
}
.permit-result__window {
  margin: 0; font-size: 12.5px; color: var(--text-secondary);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.permit-result__arrow { color: var(--text-muted); }
.permit-result__cta { flex: none; }

@media (max-width: 560px) {
  .permit-result { flex-wrap: wrap; gap: 12px; }
  .permit-result__body { flex-basis: calc(100% - 100px); }
  .permit-result__cta { width: 100%; justify-content: center; }
}

/* ============================================================
   Public confirmation — match the private flow exactly

   Both flows already render the SAME permit card, from the same _PermitCard partial, at the same
   820px with the same padding and radius. What differed was everything around it.

   Private puts its confirmation OUTSIDE the wizard card (.reg-confirm is a sibling of #regWizard),
   so once you have registered, the wizard is gone and the permit card is the page. Public keeps
   its confirmation INSIDE the card as another step panel, so the permit card was drawn framed by a
   second card, under the property header and a step indicator whose next step does not exist —
   and inset by the panel's own 22px, which is why the two screens did not line up.

   The card already gets .is-confirm on the confirmation step, so the chrome is dropped there
   rather than restructuring the markup: same result, and the wizard keeps its single DOM.
   ============================================================ */
.public-reg-main .reg-card.is-confirm {
  background: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
  /* Private's confirmation spans the shell; matching that is what makes the two identical. */
  max-width: none;
}
/* The wizard's own furniture belongs to the wizard, not to the receipt. */
.public-reg-main .reg-card.is-confirm > .reg-header,
.public-reg-main .reg-card.is-confirm > .reg-steps { display: none; }
/* The panel's step padding would inset the permit card; private has none. */
.public-reg-main .reg-card.is-confirm > .reg-section--confirm { padding: 0; }

/* ============================================================
   Card billing dialog — header and footer chrome

   The generic modal chrome in v2.css is written as DIRECT children: `.modal > header` and
   `.modal > footer`. This dialog wraps each step in a .visa-pay-view, so its header and footer are
   grandchildren and neither rule ever reached them. Both rendered with no padding, no divider, no
   gap and no alignment — the title hard against the top-left corner, and Cancel / Continue crowded
   into the bottom-left with their edges on the modal's own edge.

   Same values as the generic rule, so this dialog matches every other modal on the site rather
   than being separately invented. The header is a flex row because it carries an amount badge
   opposite its title, which the plain rule does not account for.
   ============================================================ */
.visa-pay-modal .visa-pay-view > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
  font-size: 18px;
  font-weight: 600;
  color: var(--text-heading);
}
.visa-pay-modal .visa-pay-view > footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  flex-wrap: wrap;
  padding: 2px 20px 20px;
}
@media (max-width: 560px) {
  /* Stacked, primary action nearest the thumb — the same treatment the generic modal gets. */
  .visa-pay-modal .visa-pay-view > footer { flex-direction: column-reverse; }
  .visa-pay-modal .visa-pay-view > footer .btn { width: 100%; }
}