/**
 * galvanize-forms.css — minimal, on-brand styling for the real Galvanize lead
 * forms ([galv_form] / FormRenderer).
 *
 * ⚠ INTERIM. W1b (visible field set) + the Subash comp are not locked yet. This
 * is a clean functional baseline so the W2 E2E can run and the form is usable;
 * the final designed skin replaces this file (the renderer + adapter + class
 * names stay stable). Brand values are scoped locally (not relying on the nav
 * :root vars, which only load on chromed pages).
 */

.galv-form {
  --gf-blue: #3b5bff;
  --gf-navy: #13217c;
  --gf-border: #d6d9e6;
  --gf-radius: 12px;

  box-sizing: border-box;
  max-width: 420px;
  margin: 0 auto;
  padding: 1.5rem;
  border: 1px solid var(--gf-border);
  border-radius: var(--gf-radius);
  background: #fff;
  box-shadow: 0 2px 12px rgba(19, 33, 124, 0.07);
  font-family: inherit;
}

.galv-form *,
.galv-form *::before,
.galv-form *::after {
  box-sizing: border-box;
}

.galv-form__heading {
  margin: 0 0 0.25rem;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--gf-navy);
}

.galv-form__intro {
  margin: 0 0 1.1rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #555;
}

.galv-form__fields {
  display: grid;
  gap: 0.85rem;
}

.galv-form__field {
  display: grid;
  gap: 0.3rem;
}

.galv-form__field label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #333;
}

.galv-form__field input {
  width: 100%;
  padding: 0.65rem 0.75rem;
  font-size: 1rem;
  color: #1a1a1a;
  background: #fff;
  border: 1px solid var(--gf-border);
  border-radius: 8px;
}

.galv-form__field input:focus {
  outline: none;
  border-color: var(--gf-blue);
  box-shadow: 0 0 0 3px rgba(59, 91, 255, 0.15);
}

/* ── Select + Textarea — interim W1b styling (matches input look) ── */
.galv-form__field select,
.galv-form__field textarea {
  width: 100%;
  padding: 0.65rem 0.75rem;
  font-size: 1rem;
  font-family: inherit;
  color: #1a1a1a;
  background: #fff;
  border: 1px solid var(--gf-border);
  border-radius: 8px;
  /* 44px min touch target */
  min-height: 44px;
}

.galv-form__field select:focus,
.galv-form__field textarea:focus {
  outline: none;
  border-color: var(--gf-blue);
  box-shadow: 0 0 0 3px rgba(59, 91, 255, 0.15);
}

.galv-form__field select {
  /* Restore native arrow on all browsers; appearance: auto is safest for
     interim styling — Subash comp will restyle the arrow in the final skin. */
  appearance: auto;
  cursor: pointer;
}

.galv-form__field textarea {
  resize: vertical;
  line-height: 1.4;
}

.galv-form__consent {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  line-height: 1.4;
  color: #555;
}

.galv-form__consent input {
  margin-top: 0.15rem;
  flex: 0 0 auto;
}

/* Disclosure micro-copy for implicit-consent forms (newsletter). */
.galv-form__note {
  margin: 0.15rem 0 0;
  font-size: 0.75rem;
  line-height: 1.4;
  color: #777;
}

.galv-form__submit {
  width: 100%;
  margin-top: 1.1rem;
  padding: 0.8rem 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  background: var(--gf-blue);
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.galv-form__submit:hover {
  background: var(--gf-navy);
}

.galv-form__submit:disabled {
  opacity: 0.65;
  cursor: default;
}

.galv-form__status {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.4;
}

.galv-form__status.is-error {
  color: #b00020;
}

.galv-form__status.is-success {
  color: #137333;
  font-weight: 600;
}

/* Honeypot — visually + AT hidden, but still submitted if a bot fills it. */
.galv-form__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── Footer newsletter (the wired comp placeholder, sitewide) ──
   The footer keeps its own comp styling (nav-footer.css); we only add the
   honeypot hide + status feedback, in light tones for the dark footer. */
.footer-newsletter-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.footer-newsletter-form .galv-form__status {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.8rem;
  color: #cdd3ea;
}

.footer-newsletter-form .galv-form__status.is-success {
  color: #8affc0;
  font-weight: 600;
}

.footer-newsletter-form .galv-form__status.is-error {
  color: #ffb3b3;
}

/* =============================================================
   v4 CONSULTATION FORM CARD SKIN
   Verbatim from form_comp_reference.html (Subash, 2026-05-20).
   Lifted: :root design tokens (scoped locally — not relying on
   nav :root); .consultation-form card rules; shared .field /
   .fieldrow / .btn-submit / .consent-row rules (scoped to
   .consultation-form to avoid bleeding into other form cards).
   Responsive block at bottom mirrors comp's @media 768px rules.
   CARD ONLY — .consultation-section / .consultation-wrapper /
   .consultation-left are NOT emitted by FormRenderer; they live
   in the host Bricks template.
   Font: Inter + Poppins loaded via Google Fonts link in the comp
   head; same link is added by galvanize-core nav enqueue
   (loaded sitewide). If the nav font link is absent on a given
   page the form inherits the body font stack gracefully.
   ============================================================= */

/* ── Design tokens (scoped; not relying on nav :root) ── */
.consultation-form {
  --bg-navy: #13217c;
  --primary-blue: #3b5bff;
  --accent-blue: #e6ebff;
  --text-white: #fffdfe;
  --text-dark: #333333;
  --text-muted: #6b7280;
  --text-label: #333333;
  --border: #808080;
  --border-hover: #3b5bff;
  --border-focus: #3b5bff;
  --error: #dc2626;
  --error-bg: #fef2f2;
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
  --radius-input: 10px;
  --radius-form: 16px;
  --shadow-form: 0 20px 60px rgba(13, 23, 89, 0.18);
  --transition-fast: 0.15s ease;
  --transition-med: 0.25s ease;
}

/* ── Card shell ── */
/* [data-galv-form-id] raises specificity to (0,0,2,0) so host-page resets like
   `body.galv-about *{padding:0}` (0,0,1,1) can't zero the card padding. */
.consultation-form[data-galv-form-id] {
  background: var(--accent-blue);
  border-radius: 20px;
  padding: 24px 24px;
  box-shadow: var(--shadow-form);
  font-family: var(--font-body);
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

.consultation-form *,
.consultation-form *::before,
.consultation-form *::after {
  box-sizing: border-box;
}

/* ── Card heading + sub ── */
.consultation-form h4 {
  font-family: var(--font-heading);
  font-size: 26px;
  line-height: 36px;
  font-weight: 600;
  color: var(--primary-blue);
  margin: 0 0 6px;
}

.consultation-form .sub {
  font-size: 14px;
  color: #808080;
  margin: 0 0 22px;
}

/* ── Field rows ── */
.consultation-form .fieldrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.consultation-form .fieldrow.single {
  grid-template-columns: 1fr;
}

/* ── Individual field ── */
.consultation-form .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
}

.consultation-form .field label {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-label);
  letter-spacing: 0.01em;
}

.consultation-form .field label .req {
  color: var(--error);
  margin-left: 2px;
}

.consultation-form .field label .optional {
  color: var(--text-muted);
  font-weight: 400;
  margin-left: 2px;
  font-size: 11px;
}

.consultation-form .field input,
.consultation-form .field select,
.consultation-form .field textarea {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  padding: 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-input);
  background: #fff;
  color: var(--text-dark);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  width: 100%;
  /* Match the comp: form controls render at line-height:normal (measured comp
     input=46px / select=43px). Set explicitly so the live theme's larger body
     line-height can't inherit in and inflate the control. Textarea overrides to
     1.5 in its own rule below (comp-verbatim, multi-line readability). */
  line-height: normal;
  height: auto;
  min-height: 0;
}

.consultation-form .field input::placeholder,
.consultation-form .field textarea::placeholder {
  color: #aab0bd;
  font-weight: 400;
  font-size: 16px;
}

.consultation-form .field input:hover,
.consultation-form .field select:hover,
.consultation-form .field textarea:hover {
  border-color: var(--border-hover);
}

.consultation-form .field input:focus,
.consultation-form .field select:focus,
.consultation-form .field textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  background-color: #fdfdff;
}

.consultation-form .field textarea {
  resize: vertical;
  /* 60px target (Subash): with rows=1 + border-box, this min-height sets the box
     to 60px. The old ~97px was the rows=3 default, not this min-height. */
  min-height: 60px;
  line-height: 1.5;
}

/* Custom select chevron (comp verbatim) */
.consultation-form .field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23333333' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  cursor: pointer;
}

/* ── Consent row ── */
.consultation-form .consent-row {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted);
  margin: -10px 0 10px;
  line-height: 1.55;
  align-items: flex-start;
  cursor: pointer;
}

.consultation-form .consent-row input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--primary-blue);
}

/* ── Submit button (comp .btn-submit verbatim) ── */
/* The button carries both .btn-submit (v4 styling) and .galv-form__submit
   (adapter selector). Specificity: .consultation-form .btn-submit wins over
   the generic .galv-form__submit rule from the interim skin. */
.consultation-form .btn-submit {
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-radius: var(--radius-input);
  background: var(--primary-blue);
  color: var(--text-white);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
}

.consultation-form .btn-submit:hover {
  background: var(--bg-navy);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(19, 33, 124, 0.32);
}

.consultation-form .btn-submit:active {
  background: var(--bg-navy);
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(19, 33, 124, 0.20);
}

.consultation-form .btn-submit:disabled,
.consultation-form .btn-submit.loading {
  background: #9aa3b8;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.consultation-form .btn-submit.loading .btn-text {
  opacity: 0;
}

@keyframes galvf-spin { to { transform: rotate(360deg); } }

.consultation-form .btn-submit.loading::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: galvf-spin 0.7s linear infinite;
}

/* ── Status feedback (adapter .galv-form__status) ── */
.consultation-form .galv-form__status {
  display: block;
  margin-top: 0.75rem;
  font-size: 0.9rem;
  line-height: 1.4;
}

.consultation-form .galv-form__status.is-error {
  color: var(--error);
}

.consultation-form .galv-form__status.is-success {
  color: #137333;
  font-weight: 600;
}

/* ── Fields wrapper — hidden on success (adapter hideInputs) ── */
/* .galv-form__fields hidden rule is already in the adapter JS (fields.hidden = true);
   no extra CSS needed beyond the shared rule above. */

/* ── Multiselect dropdown — verbatim from comp, scoped to .consultation-form ──
   Source: form_comp_reference.html .multiselect* rules (subash 2026-05-20/21).
   Reusable pattern shared by Form 5 (events) and Form 6 Step 2 (countries).
   --accent-blue-soft is defined here as a local var since it lives in the comp's
   :root but is not in the .consultation-form token block above. */
.consultation-form {
  --accent-blue-soft: #f1f4ff;
}

.consultation-form .multiselect {
  position: relative;
  width: 100%;
}

.consultation-form .multiselect-trigger {
  /* match existing .field select visual: same padding, border, radius, chevron */
  width: 100%;
  display: flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  padding: 12px 40px 12px 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-input);
  background: #fff
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23333333' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>")
    no-repeat right 16px center;
  color: var(--text-dark);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
  line-height: 1.3;
}

.consultation-form .multiselect-trigger:hover { border-color: var(--border-hover); }

.consultation-form .multiselect-trigger:focus {
  outline: none;
  border-color: var(--border-focus);
  background-color: #fdfdff;
}

.consultation-form .multiselect.is-open .multiselect-trigger {
  border-color: var(--border-focus);
  background-color: #fdfdff;
}

.consultation-form .multiselect-trigger-text.is-placeholder { color: #aab0bd; }

.consultation-form .multiselect-trigger-count {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--primary-blue);
  background: var(--accent-blue);
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.consultation-form .multiselect-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 20;
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(20, 30, 80, 0.12);
  max-height: 280px;
  overflow-y: auto;
}

.consultation-form .multiselect.is-open .multiselect-panel { display: flex; }

.consultation-form .multiselect-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  font-size: 14px;
  color: var(--text-dark);
}

.consultation-form .multiselect-option:hover { background: var(--accent-blue-soft); }

.consultation-form .multiselect-option input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--primary-blue);
  flex-shrink: 0;
  margin: 0;
}

.consultation-form .multiselect-option-label {
  flex: 1;
  font-weight: 500;
  line-height: 1.35;
}

.consultation-form .multiselect-option:has(input:checked) {
  background: var(--accent-blue);
  border-color: var(--primary-blue);
}

/* ── Phone country-code widget — verbatim from comp, scoped to .consultation-form ──
   Source: form_comp_reference.html .phone-field rules (subash 2026-05-20).
   The cc <select> is intentionally nameless (no `name=` attr) so it does NOT
   serialize into the Nova payload. The JS (applyPhoneCC) merges the dial code
   into the visible tel input value on submit. */
.consultation-form .phone-field { display: flex; gap: 8px; }
.consultation-form .phone-field select {
  flex: 0 0 130px;
  padding-right: 8px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23333333' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
}
.consultation-form .phone-field input { flex: 1; }

/* ── Responsive (verbatim from comp @media 768px block) ── */
@media (max-width: 768px) {
  .consultation-form[data-galv-form-id] {
    padding: 28px 22px;
  }

  .consultation-form h4 {
    font-size: 20px;
    line-height: 28px;
  }

  .consultation-form .fieldrow {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* =============================================================
   v4 CARD SKINS — callback-lite / gate / voucher / events / newsletter
   Ported from form_comp_reference (Subash 2026-05-20). CARD ONLY — the host
   partials own the section wrappers. The approved .consultation-form block
   above is intentionally untouched; these cards share the common field /
   button / consent rules via the .galv-v4card class FormRenderer adds to every
   non-consultation v4 card. Per-card chrome (shell, badge) is scoped to the
   specific card class, and each card's padding is qualified with
   [data-galv-form-id] (0,0,2,0) so host resets like body.galv-ebook *{padding:0}
   (0,0,1,1) can't zero it.
   ============================================================= */

/* ── Shared tokens (scoped to card root; not relying on nav :root) ── */
.galv-v4card {
  --bg-navy: #13217c;
  --primary-blue: #3b5bff;
  --accent-blue: #e6ebff;
  --accent-blue-soft: #f1f4ff;
  --text-white: #fffdfe;
  --text-dark: #333333;
  --text-muted: #6b7280;
  --text-label: #333333;
  --border: #808080;
  --border-hover: #3b5bff;
  --border-focus: #3b5bff;
  --error: #dc2626;
  --success: #10b981;
  --magenta: #cc00cc;
  --font-heading: 'Poppins', sans-serif;
  --font-body: 'Inter', sans-serif;
  --radius-input: 10px;
  --radius-pill: 100px;
  --shadow-form: 0 20px 60px rgba(13, 23, 89, 0.18);
  --shadow-card: 0 12px 40px rgba(19, 33, 124, 0.10);
  --transition-fast: 0.15s ease;
  font-family: var(--font-body);
  color: var(--text-dark);
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}
.galv-v4card *,
.galv-v4card *::before,
.galv-v4card *::after { box-sizing: border-box; }

/* ── Card shells (padding defended via [data-galv-form-id]) ── */
.callback-lite-card[data-galv-form-id],
.events-form[data-galv-form-id] {
  background: var(--accent-blue);
  border-radius: 20px;
  padding: 24px 24px;
  box-shadow: var(--shadow-form);
}
.gate-wrapper[data-galv-form-id] {
  position: relative;
  background: var(--accent-blue);
  border-radius: 20px;
  padding: 24px 24px;
  box-shadow: var(--shadow-card);
}
.gate-wrapper[data-galv-form-id]::before {
  content: "Free Download";
  position: absolute;
  top: -14px;
  left: 32px;
  background: var(--magenta);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.voucher-form[data-galv-form-id] {
  background: linear-gradient(180deg, var(--accent-blue) 0%, var(--accent-blue-soft) 100%);
  border-radius: 20px;
  padding: 28px 24px;
  border: 1.5px solid #d4dcff;
}
.newsletter-form[data-galv-form-id] {
  max-width: 520px;
  background: var(--accent-blue);
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--shadow-card);
}

/* ── Inline email + CTA widget (Subash Forms-v2 2026-06-24) ──────────────────
   Compact single-row opt-in: email field flexes, magenta CTA beside it; stacks
   < 560px. Used by the voucher hero (voucher_request) + newsletter (both
   placements). render_inline_card() emits .galv-form__fields as the flex row;
   the hidden consent_email, honeypot + .galv-form__status ride outside it.
   Label is sr-only — the form sits on dark heroes AND a white section, so the
   placeholder carries the field (Ram 2026-06-25). Values ported from Subash's
   reference (voucher_pages_hero_form / newsletter_form, 2026-06-24). */
.galv-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.email-code-row { width: 100%; max-width: 720px; margin: 0 auto; }

.email-code-row .galv-form__fields {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  width: 100%;
}

.email-code-row .field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.email-code-row .field input {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  height: 44px;
  padding: 0 14px;
  border: 1.5px solid #808080;
  border-radius: 10px;
  background: #fffdfe;
  color: #333333;
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.email-code-row .field input::placeholder { color: #aab0bd; }
.email-code-row .field input:hover { border-color: #3b5bff; }
.email-code-row .field input:focus {
  outline: none;
  border-color: #3b5bff;
  background-color: #fdfdff;
}

/* Magenta CTA — Subash's design colour; structural specs mirror .btn-submit. */
.email-code-row .btn-email-code {
  height: 44px;
  padding: 0 20px;
  border: none;
  border-radius: 10px;
  background: #cc00cc;
  color: #fffdfe;
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.email-code-row .btn-email-code:hover {
  background: #a600a6;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(204, 0, 204, 0.30);
}
.email-code-row .btn-email-code:active {
  background: #8f008f;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(204, 0, 204, 0.22);
}
.email-code-row .btn-email-code:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(204, 0, 204, 0.18);
}
.email-code-row .btn-email-code:disabled {
  background: #9aa3b8;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Status — light backing pill so the dark success/error text (from the generic
   .galv-form__status.is-* rules) stays readable on BOTH the dark heroes and the
   white newsletter why-section. */
.email-code-row .galv-form__status:not(:empty) {
  margin-top: 10px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255, 253, 254, 0.92);
  display: inline-block;
}

@media (max-width: 560px) {
  .email-code-row .galv-form__fields { flex-direction: column; gap: 10px; align-items: stretch; }
  .email-code-row .btn-email-code { width: 100%; }
}

/* Subash Forms-v3 (2026-06-25) */
/* Voucher hero: spacing below the form before the next hero content. */
body.galv-voucher .email-code-row .galv-form__fields { padding-bottom: 60px; }
/* Desktop only: cap the magenta CTA so it doesn't stretch (mobile stays full-width). */
@media (min-width: 561px) { .email-code-row .btn-email-code { max-width: 180px; } }

/* Subash Forms-v4 (2026-06-25) — voucher mobile spacing refinements. */
/* Email-code hero: trim mobile bottom spacing 60px → 40px (desktop stays 60px). */
@media (max-width: 560px) {
  body.galv-voucher .email-code-row .galv-form__fields { padding-bottom: 40px; }
}
/* Consultation form: tighten mobile card padding 28px 22px → 20px. Applied
   site-wide per Subash v4 follow-up (2026-06-25) — overrides the comp-verbatim
   28/22 in the responsive block above (later source order, equal specificity). */
@media (max-width: 768px) {
  .consultation-form[data-galv-form-id] { padding: 20px 20px; }
}

/* ── Heading + sub (render_v4_card emits <h4> + .sub) ── */
.galv-v4card h4 {
  font-family: var(--font-heading);
  font-size: 26px;
  line-height: 36px;
  font-weight: 600;
  color: var(--primary-blue);
  margin: 0 0 6px;
}
.galv-v4card .sub {
  font-size: 14px;
  color: #808080;
  margin: 0 0 22px;
  line-height: 1.55;
}

/* ── Field rows + fields ── */
.galv-v4card .fieldrow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.galv-v4card .fieldrow.single { grid-template-columns: 1fr; }
.galv-v4card .field { display: flex; flex-direction: column; gap: 6px; position: relative; }
.galv-v4card .field label {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--text-label);
  letter-spacing: 0.01em;
}
.galv-v4card .field label .req { color: var(--error); margin-left: 2px; }
.galv-v4card .field input,
.galv-v4card .field select,
.galv-v4card .field textarea {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 400;
  padding: 0 14px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-input);
  background: #fff;
  color: var(--text-dark);
  width: 100%;
  line-height: normal;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.galv-v4card .field input,
.galv-v4card .field select {
  height: 44px;
}
.galv-v4card .field textarea {
  height: auto;
  min-height: 60px;
  padding: 10px 14px;
}
.galv-v4card .field input::placeholder,
.galv-v4card .field textarea::placeholder { color: #aab0bd; font-weight: 400; }
.galv-v4card .field input:hover,
.galv-v4card .field select:hover,
.galv-v4card .field textarea:hover { border-color: var(--border-hover); }
.galv-v4card .field input:focus,
.galv-v4card .field select:focus,
.galv-v4card .field textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  background-color: #fdfdff;
}
/* Custom select chevron */
.galv-v4card .field select,
.galv-v4card .phone-field select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5L6 6.5L11 1.5' stroke='%23333333' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
/* Phone country-code widget */
.galv-v4card .phone-field { display: flex; gap: 8px; }
.galv-v4card .phone-field select { flex: 0 0 130px; padding-right: 8px; }
.galv-v4card .phone-field input { flex: 1; }

/* ── Consent row ── */
.galv-v4card .consent-row {
  display: flex;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted);
  margin: 18px 0 22px;
  line-height: 1.55;
  align-items: flex-start;
}
.galv-v4card .consent-row input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--primary-blue);
}
.galv-v4card .consent-row a { color: var(--primary-blue); text-decoration: underline; font-weight: 500; }

/* ── Scoped consent-row margins (per Subash v1 review — do not edit global rule above) ── */
.gate-wrapper[data-galv-form-id] .consent-row { margin: -10px 0 20px; }
.callback-lite-card[data-galv-form-id] .consent-row { margin: -10px 0 20px; }
.events-form[data-galv-form-id] .consent-row { margin: -10px 0 0; }

/* ── Scoped sub-text margin (events only) ── */
.events-form[data-galv-form-id] .sub { margin: -20px 0 0; }

/* ── Submit button (.btn-submit beats the global interim .galv-form__submit) ── */
.galv-v4card .btn-submit {
  width: 100%;
  padding: 14px 20px;
  border: none;
  border-radius: var(--radius-input);
  background: var(--primary-blue);
  color: var(--text-white);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.galv-v4card .btn-submit:hover {
  background: var(--bg-navy);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(19, 33, 124, 0.32);
}
.galv-v4card .btn-submit:active { background: var(--bg-navy); transform: translateY(0); }
.galv-v4card .btn-submit:disabled { background: #9aa3b8; cursor: not-allowed; transform: none; box-shadow: none; }

/* ── Implicit-consent note (voucher / newsletter) ── */
.galv-v4card .galv-form__note {
  font-size: 12px;
  color: var(--text-muted);
  margin: 10px 0 0;
  line-height: 1.5;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .galv-v4card .fieldrow { grid-template-columns: 1fr; gap: 12px; }
  .callback-lite-card[data-galv-form-id],
  .events-form[data-galv-form-id] { padding: 28px 22px; }
  .gate-wrapper[data-galv-form-id] { padding: 32px 24px; }
  .galv-v4card h4 { font-size: 20px; line-height: 28px; }
}