/* ═══════════════════════════════════════════════════════════════════════
   terms-assent.css — Website Terms assent checkbox (2026-08-18)

   Pairs with resources/views/components/terms-assent.blade.php and
   public/terms-assent.js.

   Conspicuousness is a legal property here, not a taste call: Berman v.
   Freedom Financial Network, 30 F.4th 849 (9th Cir. 2022) rejected notice
   set in "tiny gray font" next to larger competing text. So this file
   deliberately does NOT inherit the host form's fine-print styling — it
   sets its own full-contrast colour and 14px size, and it is loaded LAST in
   the CSS chain so page-scoped fine-print rules cannot shrink or fade it.

   Selectors are scoped to .vshr-assent and carry no !important, except the
   two colour/size declarations that exist purely to defeat inherited
   fine-print rules on host pages (documented inline).
   ═══════════════════════════════════════════════════════════════════════ */

.vshr-assent {
  margin: 14px 0 0;
  text-align: left;
}

.vshr-assent--center {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.vshr-assent__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  margin: 0;
}

/* Native control, sized up for touch. No custom-painted box: a real
   checkbox keeps keyboard, screen-reader, and forced-colors behaviour. */
.vshr-assent__box {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: #1366A0;
  cursor: pointer;
}

/* Self-defence against host form CSS. Every lead form on the site styles
   its text fields with a container-scoped `... input {}` rule, and any such
   rule outranks the class above and turns this native checkbox into a
   full-width bordered text box (site.css `.cb-panel .cb-form input` did
   exactly that in the callback panel, 2026-09-11; that rule is now scoped,
   but the component must not depend on every host remembering to). This
   selector is (0,3,1), and terms-assent.css is loaded last, so the checkbox
   stays a checkbox no matter what the host declares for its inputs. */
.vshr-assent input[type="checkbox"].vshr-assent__box,
.vshr-assent input[type="checkbox"].vshr-assent__box:focus,
.vshr-assent input[type="checkbox"].vshr-assent__box.is-invalid {
  -webkit-appearance: auto;
  appearance: auto;
  display: inline-block;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  max-width: 18px;
  max-height: 18px;
  padding: 0;
  margin: 2px 0 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* !important on colour and size: several host pages wrap this component in
   a fine-print container (.hs-form-privacy, .nac-note, .qqm-fine-print)
   whose rules would otherwise render the assent at 11-12.5px in muted grey
   — exactly the presentation Berman held insufficient. */
.vshr-assent__text {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px !important;
  line-height: 1.55;
  color: #2D4356 !important;
  font-weight: 400;
  opacity: 1 !important;
}

.vshr-assent__text a {
  color: #1366A0;
  font-weight: 600;
  text-decoration: underline;
  /* Keep the document name whole: in a 320px host (the callback panel) the
     sentence wrapped as "Website Terms of / Use." with a one-word widow. */
  white-space: nowrap;
}

.vshr-assent__text a:hover,
.vshr-assent__text a:focus-visible {
  color: #0F4E7C;
}

.vshr-assent__box:focus-visible {
  outline: 2px solid #1366A0;
  outline-offset: 2px;
}

/* Error state — shown by terms-assent.js when a submit is blocked. */
.vshr-assent__err {
  margin: 8px 0 0 28px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px !important;
  line-height: 1.5;
  color: #B3261E !important;
  font-weight: 600;
  opacity: 1 !important;
}

.vshr-assent__err[hidden] {
  display: none;
}

.vshr-assent.is-invalid .vshr-assent__box {
  outline: 2px solid #B3261E;
  outline-offset: 2px;
}

/* On dark form panels the host sets light text; keep contrast without
   letting the component disappear into the panel. */
.iq-form .vshr-assent__text,
.lq-glass-panel .vshr-assent__text,
.lq-gate-form .vshr-assent__text {
  color: inherit !important;
}

.iq-form .vshr-assent__text a,
.lq-glass-panel .vshr-assent__text a,
.lq-gate-form .vshr-assent__text a {
  color: inherit;
  text-decoration: underline;
}

@media (max-width: 520px) {
  .vshr-assent__text {
    font-size: 13.5px !important;
  }
}

/* ── click-wrap notice ────────────────────────────────────────────────────
   Used on the lighter lead captures that do NOT carry the checkbox (owner
   decision 2026-08-18): the one-line name/email/phone bars and the two email
   subscribes. The wording ties the click to assent ("By clicking X you agree
   to our Website Terms of Use"), which is the half of the Berman test that
   actually does the work. The other half is conspicuousness, which is what
   these rules protect: no opacity fade, no sub-13px type, underlined link.
   Do not restyle this back into fine print. */
.vshr-clickwrap {
  font-size: 13px !important;
  line-height: 1.55 !important;
  opacity: 1 !important;
}

.vshr-clickwrap a {
  text-decoration: underline;
  font-weight: 600;
}