/* ==========================================================================
   SDBody — 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 — and the date of birth — 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
   with rules either side of the heading. GF's own reset is dequeued, so this
   does it, and it is global rather than per-section because every form on the
   site now carries a date field. First in the file so the per-section rules
   below can still adjust their own spacing. */
.gform_wrapper fieldset{
  border:0;
  padding:0;
  min-width:0;
  margin-inline:0;
}

/* Only the choice fields drop their block margin: they sit in a grid or a
   stack that owns the rhythm. The date of birth is an ordinary field that
   happens to be built from a fieldset, so it keeps the standard spacing the
   inputs above and below it use. */
.checker fieldset,
.la-shell fieldset{
  margin:0;
}

.gform_wrapper legend.gfield_label{
  display:block;
  float:none;
  width:100%;
  padding: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.

   The fieldset reset these fields need is global, at the top of this file.
   What is left here is the spacing this section wants.
   ============================================================ */

.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
   contact fields on the details step pair up two to a row. Two columns rather
   than three because the date of birth needs the width for its three inputs. */
.la-shell .gform_fields{
  display:grid;
  grid-template-columns:repeat(2,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:620px){
  .la-shell .gform_fields{grid-template-columns:1fr}
  .la-shell .gform_fields > .la-lead-field{grid-column:1 / -1}
}

/* ============================================================
   Date of birth — every form, everywhere.

   Every lead form collects a birthday, for the Zenoti integration. Gravity
   Forms lays its month / day / year boxes out with the .gform-grid-* classes
   that live in the form theme stylesheets this theme dequeues, so without this
   the three boxes stack into a column. Matched on the field type rather than an
   ID or a form, so any date field added later behaves the same.
   ============================================================ */
.gform_wrapper .gfield--type-date .ginput_complex{
  display:flex;
  gap:10px;
}
.gform_wrapper .gfield--type-date .ginput_complex > .gform-grid-col{
  flex:1 1 0;
  min-width:0;
}
.gform_wrapper .gfield--type-date .ginput_complex input{width:100%}

/* Gravity Forms builds the three boxes as <input type="number">, so browsers
   hang a stepper off each one. Nobody arrives at a birth year by clicking up
   forty times, and the arrows crowd the two-character month and day boxes. */
.gform_wrapper .gfield--type-date .ginput_complex input[type="number"]{
  -moz-appearance:textfield;
  appearance:textfield;
}
.gform_wrapper .gfield--type-date .ginput_complex input::-webkit-outer-spin-button,
.gform_wrapper .gfield--type-date .ginput_complex input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  appearance:none;
  margin:0;
}

/* ============================================================
   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;
}