/* ==========================================================================
   SD Body — Gravity Forms bridge.

   Gravity Forms enqueues its own stylesheet after the theme's, so a handful of
   the approved design's rules lose. Those are re-asserted here (this file is
   enqueued after GF's), scoped to .checker so nothing else is affected. The rest
   of the checker styling comes from site.css unchanged.
   ========================================================================== */

/* Gravity Forms renders choice fields as <fieldset><legend>; the approved markup
   used a plain <li> and <label>, so the browser's default fieldset border and
   legend cut-out show up as a stray box and rules either side of the heading.
   Reset them to behave like the block and label the design expects. */
.checker fieldset{
  border:0;
  margin:0;
  padding:0;
  min-width:0;
}

.checker legend.gfield_label{
  display:block;
  float:none;
  width:100%;
  padding:0;
  margin:0 0 6px;
}

/* Gender tabs — GF's button reset overrides .chk-tab in site.css. */
.checker .chk-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  max-width:520px;
  margin:0 auto 34px;
  border:1px solid var(--navy);
  padding:6px;
  background:var(--mist);
}

.checker .chk-tab,
.checker button.chk-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px 20px;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  cursor:pointer;
  font:inherit;
  font-weight:600;
  font-size:1.05rem;
  letter-spacing:.03em;
  text-transform:none;
  color:var(--navy);
  transition:background-color .25s var(--ease-quart),color .25s;
}

.checker .chk-tab .cg-ic{font-size:1.35rem;line-height:1;color:var(--teal);transition:color .25s}

.checker .chk-tab:hover,
.checker button.chk-tab:hover{background:rgba(46,106,121,.10);color:var(--navy)}

.checker .chk-tab.sel,
.checker button.chk-tab.sel{background:var(--teal);color:#fff}
.checker .chk-tab.sel .cg-ic{color:#fff}

/* GF wraps HTML fields in a list item that would add its own spacing. */
.checker .gfield--type-html.chk-tabs-field{padding:0;margin:0}

/* The results panel is a GF HTML field; keep it flush with the grid above it. */
.checker .gfield--type-html.chk-results{padding:0}

/* GF's own paging buttons already carry .btn from the theme filters; make sure
   its default width and radius do not leak through. */
.checker .gform_page_footer .btn,
.checker .gform_footer .btn{border-radius:0;width:auto}

/* Fine print under the form. */
.checker .lf-fine{margin:14px 0 0;padding:0}

/* ============================================================
   Lab panel assessment.

   Same story as the checker above: Gravity Forms draws choice fields as a
   <fieldset><legend>, which the approved design never had, and its own reset is
   dequeued. These rules are scoped to .la-shell.
   ============================================================ */

.la-shell fieldset{
  border:0;
  margin:0;
  padding:0;
  min-width:0;
}

.la-shell legend.gfield_label{
  display:block;
  float:none;
  width:100%;
  padding:0;
}

/* The questions are all required — every step refuses to advance without an
   answer — so an asterisk on each one is noise on what should read as a
   conversation. The contact fields below the result keep theirs. */
.la-shell .la-field .gfield_required{display:none}

/* The question hint is body copy here, as it is in the approved build; the
   compact help-text rule further down would flatten its line-height. */
.la-shell .la-field > .gfield_description{line-height:1.7}

/* One grid for the whole page of fields: questions span the full width, and the
   three follow-up contact fields sit side by side under the result. */
.la-shell .gform_fields{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.la-shell .gform_fields > .gfield{grid-column:1 / -1}
.la-shell .gform_fields > .la-lead-field{grid-column:span 1}

/* The follow-up block reads as a separate offer, not a footnote to the result. */
.la-shell .la-lead-intro{
  margin-top:10px;
  padding-top:26px;
  border-top:1px solid rgba(28,40,67,.14);
}
.la-shell .la-lead-intro h3{
  font-family:"Prata",Georgia,serif;
  font-weight:400;
  font-size:1.4rem;
  color:var(--navy);
  margin:0 0 6px;
}
.la-shell .la-lead-intro p{
  color:var(--gray-sm);
  font-size:15px;
  margin:0;
}

/* GF's own paging buttons already carry .btn from the theme filters. */
.la-shell .gform_page_footer .btn,
.la-shell .gform_footer .btn{border-radius:0;width:auto}
.la-shell .gform_footer{margin-top:20px}
.la-shell .lf-fine{margin:14px 0 0;padding:0}

@media (max-width:900px){
  .la-shell .gform_fields{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .la-shell .gform_fields{grid-template-columns:1fr}
}

/* ============================================================
   Validation and field help — every form, everywhere.

   The theme dequeues Gravity Forms' stylesheets so the design owns
   presentation, which also removes GF's own validation styling: the
   messages fall back to the browser default (large, serif, black).
   These rules give them the design's type scale and a clear error
   colour, and mark the field that needs attention.
   ============================================================ */

:root{
  --sdb-error:#b3261e;
  --sdb-error-bg:#fdf3f2;
}

/* The summary box above the form. */
.gform_wrapper .gform_validation_errors{
  margin:0 0 20px;
  padding:14px 16px;
  background:var(--sdb-error-bg);
  border:1px solid var(--sdb-error);
  border-left-width:3px;
}
.gform_wrapper .gform_validation_errors > h2,
.gform_wrapper .gform_validation_errors > .gform_submission_error{
  margin:0;
  font-family:"Poppins",system-ui,sans-serif;
  font-size:15px;
  font-weight:600;
  line-height:1.5;
  color:var(--sdb-error);
  letter-spacing:0;
  text-transform:none;
}
.gform_wrapper .gform_validation_errors ol{margin:8px 0 0;padding-left:1.1em}
.gform_wrapper .gform_validation_errors li,
.gform_wrapper .gform_validation_errors a{
  font-size:14px;
  line-height:1.5;
  color:var(--sdb-error);
}

/* Per-field message under the input. GF gives it .gfield_description too, so
   these selectors are deliberately more specific than the help-text rule. */
.gform_wrapper .gfield_validation_message.gfield_description,
.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message{
  margin:6px 0 0;
  padding:0;
  background:none;
  border:0;
  font-family:"Poppins",system-ui,sans-serif;
  font-size:13.5px;
  font-weight:500;
  line-height:1.45;
  color:var(--sdb-error);
}

/* The field itself. */
.gform_wrapper .gfield_error .gfield_label,
.gform_wrapper .gfield_error .gform-field-label{color:var(--sdb-error)}
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea{border-color:var(--sdb-error)}
.gform_wrapper .gfield_error input:focus,
.gform_wrapper .gfield_error select:focus,
.gform_wrapper .gfield_error textarea:focus{box-shadow:0 0 0 3px rgba(179,38,30,.15)}

/* Field help text, e.g. the phone format hint. */
.gform_wrapper .gfield_description,
.gform_wrapper .ginput_complex label,
.gform_wrapper .instruction{
  margin:6px 0 0;
  padding:0;
  font-family:"Poppins",system-ui,sans-serif;
  font-size:13px;
  line-height:1.45;
  color:var(--gray-sm);
}

/* The checker's question hint is body copy in the approved build: site.css sets
   its size and centring and lets it inherit the body's 1.7 line-height. The
   compact help-text rule above would flatten it to 1.45 and lose 7px of height
   against the static page, so the inherited value is restored here. */
.checker .gfield--type-checkbox > .gfield_description{line-height:1.7}

/* The required legend, if a form ever shows one. */
.gform_wrapper .gform_required_legend{
  font-size:13px;
  color:var(--gray-sm);
  margin:0 0 14px;
}

/* GF's icon font is dequeued with its stylesheets, so its glyphs would render
   as a placeholder box. The colour and wording carry the meaning. */
.gform_wrapper .gform-icon{display:none}
.gform_wrapper .gform_validation_errors > h2{display:flex;gap:8px;align-items:baseline}

/* ---- Gender radio ----------------------------------------------------------
   The gender choice is a real Gravity Forms radio now, so Gravity Forms owns
   which symptom list is shown and the hidden one is neither validated nor
   saved. It is styled as the same segmented control the approved design drew
   with buttons: the input itself is taken out of the flow and the label
   becomes the control, so a keyboard focus ring still lands on it. */
.checker .chk-gender-field{max-width:520px;margin:0 auto 34px}
.checker .chk-gender-field > .gfield_label{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.checker .chk-gender-field .gfield_description{
  text-align:center;margin:10px 0 0;
}
.checker .chk-gender-field .gfield_radio{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--navy);padding:6px;background:var(--mist);
}
.checker .chk-gender-field .gchoice{margin:0;padding:0;display:block}
.checker .chk-gender-field input[type="radio"]{
  position:absolute;opacity:0;width:1px;height:1px;
}
.checker .chk-gender-field label{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 20px;margin:0;cursor:pointer;
  font-family:"Poppins",system-ui,sans-serif;font-weight:600;font-size:1.05rem;
  letter-spacing:.03em;color:var(--navy);text-align:center;
  transition:background-color .25s var(--ease-quart),color .25s;
}
.checker .chk-gender-field label:hover{color:var(--teal)}
.checker .chk-gender-field input[type="radio"]:checked + label{
  background:var(--teal);color:#fff;
}
.checker .chk-gender-field input[type="radio"]:focus-visible + label{
  outline:3px solid var(--sky);outline-offset:-3px;
}