/*
 * Secure Booking page — NeuroClarity brand styling (issue #120).
 *
 * A standalone, public checkout page that visually matches the live
 * NeuroClarity reference (/secure-booking-gadss4). It deliberately does NOT
 * reuse the post-diagnosis-care patient shell (Fraunces/IBM Plex) — the issue
 * requires NeuroClarity brand guidelines (Lora + Lato; Soft Parchment / Slate /
 * Terracotta), so the tokens below mirror NeuroClarity-Website/tailwind.config.ts
 * and the branding guide rather than the app shell.
 *
 * Layout: two columns on desktop (left product card, right form), stacked into
 * one column on mobile with the form first-class — the page is mobile-usability
 * critical per the issue. There is no site nav, footer, or any link off-page.
 */

:root {
  /* NeuroClarity brand palette (Wiki/branding/neuroclarity.md). */
  --nc-bg: #fef9f0;          /* Soft Parchment — page background */
  --nc-vellum: #f4f1de;      /* Warm Vellum — card/surface fill */
  --nc-slate: #264653;       /* Slate — headings, structural anchor */
  --nc-terracotta: #d06c52;  /* Terracotta — CTA, accents, checkmarks */
  --nc-terracotta-hover: #b9543b;
  --nc-ink: #3a3c41;         /* Payness Grey — body text */
  --nc-line: rgba(38, 70, 83, 0.22);       /* Soft field/divider border */
  --nc-line-strong: rgba(38, 70, 83, 0.4);

  --nc-font-serif: 'Lora', Georgia, serif;
  --nc-font-sans: 'Lato', system-ui, -apple-system, sans-serif;

  --nc-radius-field: 8px;
  --nc-radius-card: 12px;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--nc-bg);
  color: var(--nc-ink);
  font-family: var(--nc-font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Page scaffold --------------------------------------------------- */

.sb-page {
  min-height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 56px 24px 96px;
}

.sb-shell {
  width: 100%;
  max-width: 1120px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
  align-items: start;
}

@media (min-width: 920px) {
  .sb-shell {
    grid-template-columns: minmax(0, 1fr) 471px;
    gap: 72px;
  }
  .sb-page {
    padding: 80px 40px 120px;
    align-items: flex-start;
  }
}

/* ---- Left column: product description -------------------------------- */

.sb-product {
  max-width: 560px;
}

.sb-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 8px;
  background: rgba(38, 70, 83, 0.5);
  color: var(--nc-bg);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.sb-badge i {
  font-size: 14px;
}

.sb-title {
  font-family: var(--nc-font-serif);
  font-weight: 600;
  color: var(--nc-slate);
  font-size: clamp(34px, 4.4vw, 44px);
  line-height: 1.12;
  margin: 18px 0 0;
}

.sb-subtitle {
  font-family: var(--nc-font-serif);
  font-weight: 400;
  color: var(--nc-slate);
  font-size: clamp(18px, 1.6vw, 22px);
  margin: 8px 0 0;
}

.sb-subtitle .sb-dot {
  color: var(--nc-terracotta);
}

.sb-includes-label {
  margin: 28px 0 10px;
  font-size: 16px;
  color: var(--nc-ink);
}

.sb-includes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.sb-includes li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--nc-ink);
}

.sb-includes .sb-check {
  color: var(--nc-terracotta);
  font-weight: 700;
  flex: 0 0 auto;
  line-height: 1.4;
}

.sb-total {
  margin: 30px 0 0;
  font-family: var(--nc-font-serif);
  font-weight: 700;
  font-size: 26px;
  color: var(--nc-slate);
}

.sb-security {
  margin: 16px 0 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 430px;
}

.sb-security i {
  color: var(--nc-slate);
  font-size: 18px;
  margin-top: 1px;
}

.sb-security p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--nc-ink);
}

/* ---- Right column: the form ----------------------------------------- */

.sb-form {
  width: 100%;
}

/* Signed-in banner — a quiet "recognized" strip above the form for a logged-in
   customer, in a muted sage (a distinct semantic tone, not the terracotta CTA). */
.sb-signedin {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
  margin-bottom: 18px;
  border-radius: var(--nc-radius-field);
  background: rgba(91, 125, 91, 0.09);
  border: 1px solid rgba(91, 125, 91, 0.24);
  font-size: 13.5px;
}
.sb-signedin-check {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #5b7d5b;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.sb-signedin-text {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
  color: var(--nc-slate);
}
.sb-signedin-email {
  display: block;
  margin-top: 1px;
  font-size: 12.5px;
  color: var(--nc-slate);
  opacity: 0.6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sb-signedin-out {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--nc-terracotta);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 2px;
  border-radius: 6px;
  white-space: nowrap;
}
.sb-signedin-out:hover {
  text-decoration: underline;
}
.sb-signedin-out:focus-visible {
  outline: 2px solid var(--nc-terracotta);
  outline-offset: 1px;
}

/* Test-card helper — shown above the Stripe Payment Element ONLY under a
   pk_test_ publishable key (local/staging). Dashed border + chip so it reads
   as a dev aid, not product UI. */
.sb-testcard {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  border-radius: var(--nc-radius-field);
  border: 1px dashed rgba(58, 60, 65, 0.35);
  background: rgba(58, 60, 65, 0.04);
  font-size: 12.5px;
  color: var(--nc-slate);
}
.sb-testcard-chip {
  flex: none;
  padding: 2px 7px;
  border-radius: 5px;
  background: #3a3c41;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
}
/* Shared clickable-label style for both the Stripe test-card strip's number
   and the dev-autofill strip's button. */
.sb-testcard-copy {
  flex: none;
  border: 0;
  background: transparent;
  color: var(--nc-terracotta);
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 2px;
  border-radius: 6px;
  white-space: nowrap;
}
.sb-testcard-copy:hover {
  text-decoration: underline;
}
/* The Stripe test-card NUMBER specifically reads better in monospace; the
   dev-autofill button (sb-dev-autofill-btn) keeps the plain style above. */
#sb-testcard-copy {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
/* Description text in the dev-autofill strip (fills the middle, wraps cleanly). */
.sb-testcard-text {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
}

/* Staff session: the notice is the ONLY visible child of the form — every
   field, attestation, and the submit button are hidden (not just disabled;
   a page of greyed fields still read as a form to fill in). */
.sb-form--staff > :not(#sb-staffnotice) {
  display: none;
}

/* Inline sign-in panel — shown above the submit button when /submit reports
   the email already has an established account. A quiet slate-tinted card:
   informational, not an error (nothing is wrong; they just have an account). */
.sb-signin-panel {
  position: relative; /* anchors the absolutely-placed pairing field */
  margin: 0 0 16px;
  padding: 16px;
  border-radius: var(--nc-radius-card);
  border: 1px solid rgba(38, 70, 83, 0.28);
  background: rgba(38, 70, 83, 0.05);
}
.sb-signin-panel.sb-hidden {
  display: none;
}
/* Password-manager pairing field: present in the DOM (managers ignore
   display:none) but visually and interactively removed. */
.sb-signin-username {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  border: 0;
  padding: 0;
}
.sb-signin-title {
  font-family: var(--nc-font-serif);
  font-weight: 600;
  font-size: 17px;
  color: var(--nc-slate);
  margin-bottom: 4px;
}
.sb-signin-text {
  margin: 0 0 12px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--nc-ink);
}
.sb-signin-text strong {
  overflow-wrap: anywhere;
}
.sb-signin-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.sb-signin-reset {
  font-size: 12.5px;
  color: var(--nc-terracotta);
  text-decoration: underline;
}
.sb-signin-reset:hover {
  text-decoration: none;
}
.sb-signin-btn {
  border: 0;
  border-radius: 999px;
  background: var(--nc-terracotta);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  padding: 10px 22px;
  cursor: pointer;
}
.sb-signin-btn:hover:not(:disabled) {
  background: var(--nc-terracotta-hover);
}
.sb-signin-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Staff notice — same strip layout as .sb-signedin but in a warning amber:
   a staff (admin/clinician) session cannot book and must sign out first. */
.sb-staffnotice {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px 16px;
  margin-bottom: 18px;
  border-radius: var(--nc-radius-field);
  background: rgba(179, 125, 47, 0.09);
  border: 1px solid rgba(179, 125, 47, 0.32);
  font-size: 13.5px;
}
.sb-staffnotice-icon {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #b37d2f;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.sb-field {
  margin-bottom: 14px;
}

/* Progressive reveal on the "For my dependent" path: until the legal-custody
   question is answered it reshapes the whole form, so `sb-gate-custody` (added
   to the form by _applyCustody while the question is pending) hides everything
   below it — every child of the dependent section EXCEPT the custody question
   and its note, plus every form section that follows the dependent section.
   Only the "who is this for?" selector and the custody Yes/No stay visible. */
.sb-gate-custody #sb-dependent-section > :not(#sb-custody-field):not(#sb-custody-no-note),
.sb-gate-custody #sb-dependent-section ~ * {
  display: none !important;
}

/* The comp-code field sits between the attestation checkboxes and the submit
   button — a section boundary, not another field in the same group. The
   attestation rows carry no bottom margin (the block's own padding used to end
   the form there), so without this the label butts straight against the "18+"
   checkbox at 0px while every other field has 14px of air. Restores the form's
   rhythm and reads the code as its own step. */
.sb-coupon-field {
  margin-top: 18px;
}

/* ---- Complimentary-evaluation banner -------------------------------------
   The applied-invitation state for a comp code. Deliberately NOT styled like a
   promo/discount row: no strikethrough price, no "you saved", no badge shouting
   a percentage. It borrows the .sb-signedin banner's quiet sage confirmation
   language — the register is "you were invited and we know", not "bargain".
   Sage (not terracotta) keeps it calm: terracotta is the CTA/error accent, and
   this is neither. */
.sb-invite {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: var(--nc-radius-field);
  background: rgba(91, 125, 91, 0.09);
  border: 1px solid rgba(91, 125, 91, 0.24);
}
.sb-invite-mark {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #5b7d5b;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  /* Nudge onto the first line's baseline (the block is two lines tall). */
  margin-top: 1px;
}
.sb-invite-text {
  flex: 1;
  min-width: 0;
  line-height: 1.35;
  color: var(--nc-slate);
  font-size: 13.5px;
}
.sb-invite-sub {
  display: block;
  margin-top: 2px;
  color: rgba(38, 70, 83, 0.72);
  font-size: 12.5px;
}

.sb-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* City / State / ZIP on one line. City and State get the room (state names +
   city names are long); ZIP is short. */
.sb-row--three {
  grid-template-columns: 1.4fr 1.3fr 0.9fr;
}

/* "Your Dependent Information" sub-section heading. */
.sb-section-heading {
  font-family: var(--nc-font-serif);
  font-weight: 600;
  color: var(--nc-slate);
  font-size: 18px;
  margin: 4px 0 14px;
}

.sb-label {
  display: block;
  margin-bottom: 7px;
  font-size: 14px;
  color: var(--nc-ink);
}

.sb-label .sb-req {
  color: var(--nc-terracotta);
  margin-left: 2px;
}

.sb-input,
.sb-select {
  width: 100%;
  height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--nc-line);
  border-radius: var(--nc-radius-field);
  background: var(--nc-bg);
  color: var(--nc-ink);
  font-family: var(--nc-font-sans);
  font-size: 14px;
  line-height: 1.25;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  appearance: none;
  -webkit-appearance: none;
}

.sb-input::placeholder {
  color: var(--nc-ink);
  font-weight: 300;
}

.sb-input:focus,
.sb-select:focus {
  outline: none;
  border-color: var(--nc-terracotta);
  box-shadow: 0 0 0 1px var(--nc-terracotta);
}

/* Suppress the browser autofill tint (Chrome forces a blue background on
   -webkit-autofill) so filled fields keep the Soft Parchment look. The huge
   inset box-shadow repaints the fill; the long transition defeats the late
   re-tint Chrome applies after first paint. */
.sb-input:-webkit-autofill,
.sb-input:-webkit-autofill:hover {
  -webkit-text-fill-color: var(--nc-ink);
  -webkit-box-shadow: 0 0 0 1000px var(--nc-bg) inset;
  box-shadow: 0 0 0 1000px var(--nc-bg) inset;
  caret-color: var(--nc-ink);
  transition: background-color 9999s ease-in-out 0s;
}

/* Keep the terracotta focus ring visible on an autofilled field. */
.sb-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--nc-bg) inset, 0 0 0 1px var(--nc-terracotta);
  box-shadow: 0 0 0 1000px var(--nc-bg) inset, 0 0 0 1px var(--nc-terracotta);
}

/* Placeholder state for native selects (nothing chosen yet) — differentiate
   from a real selection by weight, per the branding guide. */
.sb-select.sb-empty {
  font-weight: 300;
}

/* Native select chevron (custom, since appearance is stripped). */
.sb-select-wrap {
  position: relative;
}

.sb-select-wrap::after {
  content: '';
  position: absolute;
  right: 16px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--nc-slate);
  border-bottom: 2px solid var(--nc-slate);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
  opacity: 0.7;
}

.sb-select {
  padding-right: 38px;
  cursor: pointer;
}

/* Date of birth — Month (select) | Day | Year */
.sb-dob {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 12px;
  align-items: start;
}

/* ---- Checkboxes ------------------------------------------------------ */

.sb-checks {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sb-check-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  cursor: pointer;
}

.sb-check-row input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  border: 1px solid var(--nc-line-strong);
  border-radius: 5px;
  background: var(--nc-bg);
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.sb-check-row input[type='checkbox']:checked {
  background: var(--nc-terracotta);
  border-color: var(--nc-terracotta);
}

.sb-check-row input[type='checkbox']:checked::after {
  content: '';
  position: absolute;
  /* Center the tick on the box regardless of box size: place its origin at the
     box center and pull back by half its own size, then rotate. top is nudged a
     hair above 50% because the rotated glyph's ink sits low, so true-center of
     its bounding box reads slightly low to the eye. */
  left: 50%;
  top: 47%;
  width: 5px;
  height: 10px;
  border-right: 2px solid var(--nc-bg);
  border-bottom: 2px solid var(--nc-bg);
  transform: translate(-50%, -50%) rotate(45deg);
}

.sb-check-row p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--nc-ink);
}

.sb-check-row strong {
  font-weight: 700;
}

/* ---- Conditional instruction / info blocks --------------------------- */

.sb-info {
  /* Uniform vertical margin (matches the 14px field rhythm) so the block is
     evenly spaced from the custody question above and the patient fields below
     — not flush against them. */
  margin: 14px 0;
  padding: 18px 20px;
  border-radius: var(--nc-radius-card);
  background: var(--nc-vellum);
  font-size: 14px;
  line-height: 1.5;
  color: var(--nc-ink);
}

.sb-info p {
  margin: 0;
}

.sb-info p + p {
  margin-top: 10px;
}

/* ---- Eligibility block (ineligible state) ---------------------------- */

.sb-blocked {
  margin-top: 18px;
  padding: 20px 22px;
  border-radius: var(--nc-radius-card);
  background: var(--nc-vellum);
  border: 1px solid var(--nc-line);
}

.sb-blocked h3 {
  font-family: var(--nc-font-serif);
  font-weight: 600;
  color: var(--nc-slate);
  font-size: 20px;
  margin: 0 0 10px;
}

.sb-blocked p {
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--nc-ink);
}

.sb-blocked a {
  color: var(--nc-terracotta);
  font-weight: 600;
  text-decoration: none;
}

.sb-blocked a:hover {
  text-decoration: underline;
}

/* ---- Submit button + disclosure ------------------------------------- */

.sb-submit {
  width: 100%;
  height: 50px;
  /* 20px group break — matches the gap above the attestations, so the form
     reads as a deliberate 14px (field) / 20px (group) rhythm. */
  margin-top: 20px;
  border: none;
  border-radius: var(--nc-radius-field);
  background: var(--nc-terracotta);
  color: var(--nc-bg);
  font-family: var(--nc-font-sans);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}

.sb-submit:hover {
  background: var(--nc-slate);
}

.sb-submit:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.sb-disclosure {
  margin: 14px 2px 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--nc-ink);
}

/* SMS opt-in (Twilio toll-free). Sits directly under the phone field, so it is
   wrapped in a faint slate-tinted panel (same tone as .sb-testcard) that groups
   it as a note ABOUT the phone number rather than a stray checkbox floating
   between two inputs. Tight to the phone above, with a clear gap below so it
   never crowds the next field's label. */
.sb-sms-consent {
  margin: 12px 0 24px;
  padding: 15px 16px;
  border: 1px solid var(--nc-line);
  border-radius: var(--nc-radius-field);
  background: rgba(38, 70, 83, 0.04);
}

/* Slightly smaller than a field label so the panel reads as fine print, and a
   touch tighter than the 20px attestation checkbox to match the denser panel. */
.sb-sms-consent .sb-check-row p {
  font-size: 13.5px;
  line-height: 1.4;
}

/* Keep the standard 20px checkbox — its :checked checkmark geometry is tuned
   for that size, so a smaller box would leave the tick off-center. The
   disclosure spans the panel's FULL width (no left indent under the checkbox
   text), so it sits with even padding on both sides of the panel. */
.sb-sms-consent .sb-disclosure {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.5;
  opacity: 0.9;
}

/* Small helper text under a field (e.g. the editable account-setup email). */
.sb-field-hint {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--nc-ink);
}

/* Email typo-guard "Did you mean …?" hint (issue #120). Advisory, not an error,
   so it reads in a calm slate rather than the terracotta error tone. The
   suggested address is a borderless inline button (underlined) so it's an
   obvious one-tap correction. */
.sb-email-suggest {
  display: block;
  margin-top: 5px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--nc-slate);
}
.sb-email-suggest-btn {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--nc-terracotta);
  text-decoration: underline;
  cursor: pointer;
}
.sb-email-suggest-btn:hover {
  text-decoration: none;
}
.sb-email-suggest-btn:focus-visible {
  outline: 2px solid var(--nc-terracotta);
  outline-offset: 2px;
  border-radius: 3px;
}

/* Payment-step email echo-back (issue #120): confirms where the sign-in link
   goes, with an inline "Edit" that returns to the form. Sits under the amount. */
.sb-pay-echo {
  /* Bottom margin gives the payment-method tiles room to breathe below the
     "link will be sent to …" echo, rather than butting right up against it. */
  margin: 12px 0 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--nc-ink);
}
.sb-pay-echo strong {
  color: var(--nc-slate);
  word-break: break-all;
}
.sb-pay-echo-edit {
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: var(--nc-terracotta);
  text-decoration: underline;
  cursor: pointer;
}
.sb-pay-echo-edit:hover {
  text-decoration: none;
}
.sb-pay-echo-edit:focus-visible {
  outline: 2px solid var(--nc-terracotta);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---- Inline validation ---------------------------------------------- */

.sb-input.sb-error,
.sb-select.sb-error {
  border-color: var(--nc-terracotta);
  border-width: 2px;
}

.sb-error-msg {
  display: none;
  margin-top: 4px;
  font-size: 12px;
  color: var(--nc-terracotta);
}

.sb-error-msg.visible {
  display: block;
}

/* ---- Request-a-consult callout (incomplete acknowledgements) ---------- */

/* Shown under the attestation error when the customer can't affirm all the
   required acknowledgements. A soft terracotta-tinted card so it reads as a
   helpful offer, not another error. */
.sb-consult {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: var(--nc-radius-field);
  background: var(--nc-vellum);
  border: 1px solid var(--nc-terracotta);
}

.sb-consult p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--nc-ink);
}

.sb-consult-contact {
  margin-top: 4px !important;
}

/* Each contact method sits on its own line so the phone number / email never
   wrap mid-value; a hair of spacing keeps them scannable without a full
   paragraph gap. !important overrides the base ".sb-consult p { margin: 0 }". */
.sb-consult-line {
  margin-top: 2px !important;
}

.sb-consult a {
  color: var(--nc-terracotta);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.sb-consult a:hover {
  text-decoration: underline;
}

.sb-hidden {
  display: none !important;
}

/* ---- Success screen (post-submit placeholder) ------------------------ */

.sb-success {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
}

.sb-success i {
  color: var(--nc-terracotta);
  font-size: 44px;
}

.sb-success h2 {
  font-family: var(--nc-font-serif);
  font-weight: 600;
  color: var(--nc-slate);
  font-size: 28px;
  margin: 18px 0 10px;
}

.sb-success p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--nc-ink);
}

/* Quiet sub-line under the "Payment received" copy naming the email address
   the follow-up will be sent to. Smaller and muted so it supports, rather than
   competes with, the reassurance paragraph above it. */
.sb-success .sb-paid-email {
  margin-top: 10px;
  font-size: 14px;
  /* Softened slate (matches the --nc-line tint pattern) so the address reads as
     a supporting note rather than primary body copy. */
  color: rgba(38, 70, 83, 0.7);
}

.sb-success .sb-portal-btn {
  display: inline-block;
  width: auto;
  margin-top: 22px;
  padding: 0 32px;
  line-height: 50px;
  text-decoration: none;
}

/* ---- Payment step (renders in the right column after submit) --------- */

.sb-pay-title {
  font-family: var(--nc-font-serif);
  font-weight: 600;
  color: var(--nc-slate);
  font-size: 26px;
  margin: 0 0 4px;
}

.sb-pay-sub {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--nc-ink);
}

/* Order summary card above the card fields. */
.sb-pay-summary {
  margin-bottom: 20px;
  padding: 16px 18px;
  border-radius: var(--nc-radius-card);
  background: var(--nc-vellum);
}

/* Amount-only variant (issue #211): just the price due, above the Stripe
   control — the left product card carries the full breakdown + total. */
.sb-pay-summary--amount-only {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
}

.sb-pay-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.sb-pay-summary-row span:first-child {
  font-size: 15px;
  color: var(--nc-slate);
  font-weight: 700;
}

.sb-pay-amt {
  font-family: var(--nc-font-serif);
  font-weight: 700;
  font-size: 22px;
  color: var(--nc-slate);
  white-space: nowrap;
}

.sb-pay-summary-note {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--nc-ink);
}

/* Card number field with a brand icon on the right. */
.sb-card-input {
  position: relative;
}

.sb-card-input .sb-input {
  padding-right: 46px;
}

.sb-card-brand {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: var(--nc-slate);
  opacity: 0.7;
  pointer-events: none;
}

/* "Payment received" confirmation chip on the password step. */
.sb-paid-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 7px 14px;
  border-radius: 8px;
  background: rgba(38, 70, 83, 0.08);
  color: var(--nc-slate);
  font-size: 13px;
  font-weight: 700;
}

.sb-paid-badge i {
  color: var(--nc-terracotta);
  font-size: 15px;
}

/* Card decline / payment error banner. */
.sb-pay-error {
  margin-bottom: 16px;
  padding: 12px 16px;
  border-radius: var(--nc-radius-field);
  background: rgba(208, 108, 82, 0.1);
  border: 1px solid var(--nc-terracotta);
  color: var(--nc-ink);
  font-size: 13px;
  line-height: 1.45;
}

/* Lock + "secured" reassurance below the Pay button. */
.sb-secure-note {
  margin: 12px 2px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--nc-ink);
}

.sb-secure-note i {
  color: var(--nc-slate);
  font-size: 13px;
}

/* In-window "back to details" link (no off-page navigation). */
.sb-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  background: none;
  border: none;
  padding: 0;
  font-family: var(--nc-font-sans);
  font-size: 13px;
  color: var(--nc-ink);
  cursor: pointer;
  transition: color 0.18s ease;
}

.sb-back:hover {
  color: var(--nc-terracotta);
}

/* ---- Mobile form-field sizing (branding guide) ----------------------- */

@media (max-width: 600px) {
  .sb-input,
  .sb-select {
    height: 40px;
    font-size: 13px;
  }
  .sb-row {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  /* City / State / ZIP is too tight three-across on a phone: give City the full
     width and let State + ZIP share the row below it. Must follow the .sb-row
     rule above so it wins at equal specificity. */
  .sb-row--three {
    grid-template-columns: 1fr 1fr;
  }
  .sb-row--three > :first-child {
    grid-column: 1 / -1;
  }
}

/* ---- Payment-step consent gate (issue #120) -------------------------- */

/* The required "I have read and agree…" acknowledgement above the Pay button.
   Reuses the attestation checkbox look (.sb-check-row) but sits inline with a
   linked label that opens the legal modal. */
.sb-pay-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 18px;
}

.sb-pay-consent input[type='checkbox'] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border: 1px solid var(--nc-line-strong);
  border-radius: 5px;
  background: var(--nc-bg);
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.sb-pay-consent input[type='checkbox']:checked {
  background: var(--nc-terracotta);
  border-color: var(--nc-terracotta);
}

.sb-pay-consent input[type='checkbox']:checked::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border-right: 2px solid var(--nc-bg);
  border-bottom: 2px solid var(--nc-bg);
  transform: rotate(45deg);
}

.sb-pay-consent-text {
  font-size: 14px;
  line-height: 1.45;
  color: var(--nc-ink);
}

.sb-pay-consent-text label {
  cursor: pointer;
}

/* The legal-doc opener inside the consent line. */
.sb-legal-link {
  color: var(--nc-terracotta);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.sb-legal-link:hover {
  color: var(--nc-terracotta-hover);
}

/* ---- Legal modal ----------------------------------------------------- */

.sb-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.sb-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(38, 70, 83, 0.5);
}

.sb-modal-card {
  position: relative;
  z-index: 1;
  width: min(680px, 100%);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  background: var(--nc-bg);
  border-radius: var(--nc-radius-card);
  box-shadow: 0 24px 60px rgba(38, 70, 83, 0.28);
}

.sb-modal-close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: none;
  background: transparent;
  color: var(--nc-slate);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
}

.sb-modal-close:hover {
  background: var(--nc-vellum);
}

.sb-modal-title {
  margin: 0;
  padding: 20px 52px 14px 24px;
  font-family: var(--nc-font-serif);
  font-size: 22px;
  color: var(--nc-slate);
  border-bottom: 1px solid var(--nc-line);
}

.sb-modal-body {
  overflow-y: auto;
  padding: 8px 24px 24px;
  color: var(--nc-ink);
}

.sb-modal-body h3 {
  margin: 22px 0 4px;
  font-family: var(--nc-font-serif);
  font-size: 18px;
  color: var(--nc-slate);
}

.sb-modal-body h4 {
  margin: 14px 0 3px;
  font-size: 14px;
  font-weight: 700;
  color: var(--nc-slate);
}

.sb-modal-body p,
.sb-modal-body li {
  font-size: 13.5px;
  line-height: 1.55;
  margin: 6px 0;
}

.sb-modal-body ul {
  margin: 6px 0;
  padding-left: 20px;
}

.sb-legal-eff {
  font-style: italic;
  color: var(--nc-slate);
}

.sb-legal-contact {
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid var(--nc-line);
  font-size: 12.5px;
  color: var(--nc-slate);
}

@media (max-width: 600px) {
  .sb-modal-title { font-size: 19px; padding: 18px 48px 12px 18px; }
  .sb-modal-body { padding: 8px 18px 20px; }
}

/* ---- Legal-custody question + instruction blocks (issue #120) -------- */

.sb-radio-group {
  display: flex;
  gap: 24px;
  margin-top: 2px;
}

.sb-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--nc-ink);
  cursor: pointer;
}

.sb-radio input[type='radio'] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--nc-line-strong);
  border-radius: 50%;
  background: var(--nc-bg);
  cursor: pointer;
  position: relative;
  transition: border-color 0.15s ease;
}

.sb-radio input[type='radio']:checked {
  border-color: var(--nc-terracotta);
}

.sb-radio input[type='radio']:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 4px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--nc-terracotta);
}

/* Contextual instruction copy revealed by the custody answer. */
.sb-instruct {
  margin: 4px 0 14px;
  padding: 12px 14px;
  background: var(--nc-vellum);
  border-radius: var(--nc-radius-field);
  border: 1px solid var(--nc-line);
}

.sb-instruct p {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--nc-ink);
}

.sb-instruct p:last-child {
  margin-bottom: 0;
}