/* HCP Sign Up — Formstack embed re-skin (SERB-273)
   --------------------------------------------------------------------------
   Loaded only on /Professional/Contact-Us/Request-Information, AFTER
   hcp_signup_redesign.css. Re-skins the live Formstack (Intellistack) embed to
   match the SERB-273 redesign WITHOUT rebuilding the form, so Formstack keeps
   handling submission, validation, and reCAPTCHA.

   The embed uses `?no_style_strict=1`, so Formstack omits its custom theme
   stylesheet entirely. The form therefore arrives with only browser
   (user-agent) default styling, which any author rule beats — so these rules
   need no `!important`, EXCEPT the two that fight inline styles the renderer
   writes directly onto field cells (display + grid-column; see notes below).
   We scope everything under `#signUpPage .fsForm` for clarity and to avoid
   leaking into the rest of the page.

   Selector notes:
   - Formstack tags elements with stable `fs*` classes (`.fsLabel`,
     `.fsSubmitButton`, `.fsFieldSelect`, …). Target those, never the
     styled-components hashes (they change on every Formstack build — and with
     no_style_strict they aren't applied anyway).
   - Design tokens (--vg-*) are inherited from `.vg-hcp` in
     hcp_signup_redesign.css. */

/* ---------- Hide Formstack's own title/subtitle ----------
   The embed renders an H3 "Sign up for updates" + H4 "Please complete…" in
   their own grid cell. The page already shows the redesign H1 + intro, so hide
   the whole cell (via :has) to avoid both a duplicate heading and an empty grid
   gap; the plain h3/h4 rule is a fallback.

   SERB-341: `!important` is required here. The renderer writes `display: flex`
   as an INLINE style on the title cell, which out-specifies a plain
   `display: none` — so the cell only collapsed to height 0 instead of leaving
   the grid, and `row-gap` still reserved a phantom ~30px track above the first
   field row. `!important` removes the cell from the grid entirely, closing that
   gap to match Figma (subheader sits ~51px above row 1, not ~82px). */
#signUpPage .fsForm .fsSection > *:has(h3),
#signUpPage .fsForm .fsSection > *:has(h4) { display: none !important; }
#signUpPage .fsForm h3,
#signUpPage .fsForm h4 { display: none; }

/* ---------- Re-hide what no_style_strict exposed ----------
   The stripped theme used to hide internal scaffolding; we must keep it hidden.
   The `hostname` spam honeypot is the only field rendered as a radio group
   (this form has no legitimate radio fields), so hide any field cell holding
   radios. It stays in the DOM but unfillable by humans — preserving the
   anti-spam behavior. Do NOT remove the field from the form.

   `!important` is required here (and only here + the grid-column rule below):
   the renderer writes `display: flex` as an INLINE style on each field cell, and
   inline styles beat stylesheet rules without it. */
#signUpPage .fsForm .fsFieldCell:has(input[type="radio"]) { display: none !important; }

/* The form ends with a field-less cell carrying the honeypot-setting script.
   It renders as an empty ~8px grid row, which (with the section row-gap) added a
   phantom ~38px band between the "I Accept" row and the Submit button. Collapse
   it so the button sits the Figma 30px below the checkbox (SERB-346). Guarded by
   :not(:has(input,select,textarea)) so a real trailing field is never hidden. */
#signUpPage .fsForm .fsSection > .fsFieldCell:last-child:not(:has(input, select, textarea)) {
  display: none !important;
}

/* Stray fieldset legends ("I Accept Required field", …) — the visible label
   comes from .fsOptionLabel, so the legend is redundant. Hide it accessibly. */
#signUpPage .fsForm legend {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

/* ---------- Form shell ---------- */
#signUpPage .fsForm {
  max-width: 1342px;
  margin: 0;
  padding: 0;
  background: transparent;
  font-family: var(--vg-font-book);
}

/* ---------- Field grid ----------
   no_style_strict drops Formstack's grid too, so we define the two-up layout. */
#signUpPage .fsForm .fsSection {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 64px;
  row-gap: 30px;
  align-items: start;
}

/* Cells without a text/select input (section headings, the privacy paragraph,
   the "I Accept" checkbox group) span the full width; text fields and dropdowns
   stay in their column. `!important` beats the renderer's inline
   `grid-column: span 1` (see the honeypot note above). */
#signUpPage .fsForm .fsSection > .fsFieldCell:not(:has(input[type="text"], input[type="email"], input[type="tel"], select)) {
  grid-column: 1 / -1 !important;
}

#signUpPage .fsForm .fsFieldCell {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
}

/* ---------- Labels ---------- */
#signUpPage .fsForm .fsLabel {
  font-family: var(--vg-font-book);
  font-size: 16px;
  line-height: 21px;
  font-weight: normal;
  color: var(--vg-text);
  margin: 0 0 8px;
  padding: 0;
}

#signUpPage .fsForm .fsRequiredMarker { color: var(--vg-text); }

/* ---------- Text / email / tel inputs ---------- */
#signUpPage .fsForm input[type="text"],
#signUpPage .fsForm input[type="email"],
#signUpPage .fsForm input[type="tel"],
#signUpPage .fsForm input[type="number"] {
  width: 100%;
  height: 49px;
  border: 1px solid var(--vg-dark-blue);
  border-radius: 4px;
  background: #fff;
  padding: 0 12px;
  font-family: var(--vg-font-book);
  font-size: 16px;
  line-height: normal;
  color: var(--vg-text);
}

/* ---------- Select / dropdown ---------- */
#signUpPage .fsForm select {
  width: 100%;
  height: 49px;
  border: 1px solid var(--vg-dark-blue);
  border-radius: 4px;
  background-color: #fff;
  padding: 0 36px 0 12px;
  font-family: var(--vg-font-book);
  font-size: 22px;
  line-height: 27px;
  color: var(--vg-dark-blue);
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2312365E' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

/* ---------- Focus state ---------- */
#signUpPage .fsForm input:focus,
#signUpPage .fsForm select:focus {
  outline: 2px solid var(--vg-link);
  outline-offset: 1px;
}

/* ---------- Section heading / long-text fields (e.g. "Read and accept…") ---------- */
#signUpPage .fsForm .fsFieldCell:not(:has(input, select)) .fsLabel {
  font-family: var(--vg-font-book);
  color: var(--vg-dark-blue);
}

/* "Read and accept before clicking submit." is rendered as a bare <h5> with no
   fs* class, so it falls through to main_style.css (Gotham-Black, 14px, gray).
   SERB-341: Figma shows it as Gotham Book 24px/27px in dark blue, normal weight.
   Pin every property explicitly — inherited HCP typography can't be trusted (see
   src/CLAUDE.md). The 14px bottom margin matches the Figma gap to the privacy
   paragraph below it. */
#signUpPage .fsForm h5 {
  margin: 0 0 14px;
  padding: 0;
  font-family: var(--vg-font-book);
  font-size: 24px;
  line-height: 27px;
  font-weight: normal;
  color: var(--vg-dark-blue);
}

/* ---------- "I Accept" checkbox ---------- */
/* SERB-341: the consent block (heading + privacy paragraph) and the checkbox are
   two separate grid cells, so the 30px section row-gap plus the paragraph's own
   bottom space left ~40px between them — Figma wants ~22px. Pull the checkbox
   cell up to close the difference (no `!important` needed; the renderer's inline
   style sets display/grid-column, not margin). */
#signUpPage .fsForm .fsFieldCell:has(input[type="checkbox"]) {
  margin-top: -18px;
}

#signUpPage .fsForm input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0 8px 0 0;
  accent-color: var(--vg-dark-blue);
  flex-shrink: 0;
}
#signUpPage .fsForm .fsOptionLabel {
  display: flex;
  align-items: center;
  font-family: var(--vg-font-book);
  font-size: 16px;
  line-height: 21px;
  color: var(--vg-text);
}

/* ---------- Validation error state (SERB-325) ----------
   Reworked to match the Figma error frame (node 4071:7153) per Caroline's
   "skin it all in CSS, don't fight Formstack" direction. Formstack still owns
   WHEN a field is flagged (it adds .fsInvalidInput on a failed submit); we only
   restyle the result, and we HIDE the Formstack error chrome that Figma doesn't
   want — the per-field "Required field" labels, the "(1 of 1)" summary copy, and
   the run-on list of field-name jump links — replacing the summary with our own
   copy. Brand red is #F81437 (Figma "Red"); the "!" disc is #FF3C3C, both straight
   from the Figma assets. no_style_strict means these need no !important except
   where they must out-rank the per-field rule that shares the StyledErrorBanner
   prefix (see below). */

/* Per-field "Required field" message: Figma shows NO text under a field — just
   the red border + "!" icon — so hide it. These containers carry .fsValidationError
   AND (confusingly) the StyledErrorBanner-sc prefix, so `!important` is needed to
   beat the summary-banner rule further down that matches via that shared prefix. */
#signUpPage .fsForm .fsValidationError { display: none !important; }

/* Invalid field — red border (Figma: brand red, white field, no pink tint).
   Qualified with input/select so it ties the base navy-border rules on specificity
   and wins on source order (it comes later). */
#signUpPage .fsForm input.fsInvalidInput,
#signUpPage .fsForm select.fsInvalidInput {
  border: 2px solid #F81437;
  background-color: #fff;
}

/* Red "!" icon (24x24) inside the field, ~14px from the right edge, vertically
   centered — matches Figma. The disc is #FF3C3C with a white "!" so it reads
   correctly on the white field. */
#signUpPage .fsForm input.fsInvalidInput {
  padding-right: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23FF3C3C'/%3E%3Crect x='10.2' y='4.5' width='3.6' height='9' rx='1.8' fill='%23fff'/%3E%3Ccircle cx='12' cy='16.8' r='1.8' fill='%23fff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 24px 24px;
}

/* The "I am a/an" select also gets the "!" icon in Figma — layer it to the LEFT
   of the existing dropdown chevron (two stacked background images). */
#signUpPage .fsForm select.fsInvalidInput {
  padding-right: 64px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23FF3C3C'/%3E%3Crect x='10.2' y='4.5' width='3.6' height='9' rx='1.8' fill='%23fff'/%3E%3Ccircle cx='12' cy='16.8' r='1.8' fill='%23fff'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2312365E' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: right 40px center, right 14px center;
  background-size: 24px 24px, 12px 8px;
}

/* ---------- Error summary banner ----------
   Formstack renders <div class="StyledErrorBanner-sc…"> at the top of the form
   (the prefix is stable; the hashed suffix changes per build). It keeps this
   element — plus one per-field placeholder — in the DOM as an always-present
   EMPTY aria-live container, and only fills them on a failed submit; the
   `:not(:empty)` gate keeps the rule from firing on initial load (otherwise the
   page opens covered in red — the SERB-325 reopen regression). `:not(.fsValidationError)`
   excludes the per-field messages, which share the prefix.

   Figma shows NO box — just a "!" icon + one bold red sentence on white. Formstack's
   own content is the "(1 of 1)" copy + a run-on list of field-name links, neither
   wanted. So we (1) paint our icon + inject the Figma copy via ::before, and
   (2) clip Formstack's content off-screen rather than display:none it, so the
   aria-live region still announces which fields failed to screen readers. */
#signUpPage .fsForm [class*="StyledErrorBanner-sc"]:not(.fsValidationError):not(:empty) {
  position: relative;
  display: block;
  margin: 0 0 24px;
  padding: 0 0 0 38px;
  min-height: 24px;
  border: 0;
  background: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23FF3C3C'/%3E%3Crect x='10.2' y='4.5' width='3.6' height='9' rx='1.8' fill='%23fff'/%3E%3Ccircle cx='12' cy='16.8' r='1.8' fill='%23fff'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left top;
  background-size: 24px 24px;
  /* Formstack programmatically focuses the summary on submit (tabindex=-1) for
     a11y; suppress the resulting blue browser focus ring. */
  outline: none;
}
/* Clip Formstack's own banner content off-screen — visually gone, still in the
   a11y tree so the aria-live announcement survives. */
#signUpPage .fsForm [class*="StyledErrorBanner-sc"]:not(.fsValidationError):not(:empty) > * {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
/* Our replacement copy (Figma: Gotham Bold 24px/26px, brand red). */
#signUpPage .fsForm [class*="StyledErrorBanner-sc"]:not(.fsValidationError):not(:empty)::before {
  content: "Please review the current page and fill in valid responses for each field:";
  display: block;
  font-family: var(--vg-font-bold);
  font-weight: bold;
  font-size: 24px;
  line-height: 26px;
  color: #F81437;
}

/* On error, hide the page subheader so the red banner takes its place — Figma
   replaces "Please complete the following information:" with the alert rather
   than stacking them. :has() lets the page-level intro react to the banner state. */
#signUpPage:has(.fsForm [class*="StyledErrorBanner-sc"]:not(.fsValidationError):not(:empty)) .vg-hcp__intro {
  display: none;
}

/* ---------- Submit button (blue, redesign style) + centering ---------- */
#signUpPage .fsForm .fsSubmit,
#signUpPage .fsForm .fsSubmit > div {
  display: flex;
  justify-content: center;
  padding: 0;
}
/* SERB-346: Figma puts 30px between the "I Accept" row and the button. The
   margin-top must live on ONE level only — the old rule set it on both .fsSubmit
   AND its inner > div, stacking to ~56px (and the trailing dead cell hidden
   below added more). */
#signUpPage .fsForm .fsSubmit { margin-top: 30px; }
#signUpPage .fsForm .fsSubmit > div { margin-top: 0; }
#signUpPage .fsForm .fsSubmitButton {
  min-width: 147px;
  height: 44px;
  padding: 0 24px;
  border: 0;
  border-radius: 4px;
  background: var(--vg-link);
  color: #fff;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: bold;
  font-size: 16px;
  line-height: 21px;
  cursor: pointer;
  transition: background 0.2s ease;
}
#signUpPage .fsForm .fsSubmitButton:hover { background: #2a679c; }
#signUpPage .fsForm .fsSubmitButton:focus {
  outline: 2px solid var(--vg-dark-blue);
  outline-offset: 2px;
}

/* ---------- Responsive: collapse to one column ---------- */
@media (max-width: 991px) {
  #signUpPage .fsForm .fsSection {
    grid-template-columns: 1fr;
    row-gap: 24px;
  }
}