/* A block of confirmations on the concluding signup forms.
 *
 * Two instances, and they must read as siblings: the mandatory contract
 * confirmations and the optional advertising consent. Same surface, same
 * frame — what separates them is the heading and, for the optional one,
 * quieter type. §2 of the law firm's instructions requires the optional
 * box to be clearly set apart from the mandatory fields; a labelled box
 * of its own does that better than a rule ever did, because "Optional"
 * is then a property of a thing rather than a caption floating above
 * the fold.
 */
.consent-block {
  --consent-block-bg: var(--tblr-bg-surface-secondary);
  --consent-block-border: var(--gxp-slate-200);
  --consent-block-check-size: 1.25rem;
  --consent-block-label-color: var(--tblr-body-color);

  padding: 1rem 1.25rem;
  margin-block-end: 1rem;
  background-color: var(--consent-block-bg);
  border: 1px solid var(--consent-block-border);
  border-radius: var(--tblr-border-radius-lg);
}

/* The optional block differs in weight, not in kind: same box, quieter
   text. Only variables — the structure is inherited. */
.consent-block--optional {
  --consent-block-label-color: var(--tblr-secondary);
}

.consent-block__heading {
  margin-block-end: 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gxp-slate-500);
}

/* These boxes carry the contract; a visitor who cannot see them cannot
 * see what they are agreeing to. Their visibility is no longer this
 * block's concern: since DEF-82 every .form-check-input draws its
 * boundary with --gxp-control-border (theme.css), which meets WCAG 2.1
 * SC 1.4.11 on this surface too. Only the size is local.
 */
.consent-block .form-check-input {
  width: var(--consent-block-check-size);
  height: var(--consent-block-check-size);
  margin-inline-end: 0.25rem;
}

.consent-block .form-check {
  align-items: start;
  gap: 0.25rem;
  padding-block: 0.25rem;
}

.consent-block .form-check-label {
  color: var(--consent-block-label-color);
}

.consent-block--optional .form-check-label {
  font-size: 0.875rem;
}

/* The concluding signup steps opt into this width (content_for
 * :container_width). Wider than the 30rem auth default so the prescribed
 * legal texts do not stack into an endless column — but not so wide that
 * the small print runs past a comfortable line length.
 *
 * Two class names on purpose: .container is already on the element, so
 * .container.container-consent outranks Tabler's .container-tight by
 * specificity rather than by stylesheet order.
 */
.container-consent {
  --consent-container-max: 42rem;
}

.container.container-consent {
  max-width: var(--consent-container-max);
}