/*
 * Client questionnaires (resources/views/web/questionnaire/show.blade.php).
 *
 * Upstream has no questionnaire page, so it reuses the Free Website Checkup
 * layout (website-checkup.css) and the Free Estimate chips (estimate.css).
 * Only the heading and help line of a checkbox/radio question had no rule;
 * their declarations are copied from `.checkup-fields label`,
 * `.checkup-fields label em` and `.checkup-help`.
 *
 * Kept outside web-assets/ so `frontend:sync` cannot overwrite it.
 */
.questionnaire-page .questionnaire-group {
  display: grid;
  gap: 10px;
}

.questionnaire-page .questionnaire-group-label {
  color: #183060;
  font-size: 13px;
  font-weight: 700;
}

.questionnaire-page .questionnaire-group-label em {
  color: rgba(11, 18, 32, 0.46);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}

.questionnaire-page .questionnaire-help {
  color: rgba(11, 18, 32, 0.56);
  font-size: 13px;
  font-weight: 500;
}

.questionnaire-page .questionnaire-group .checkup-error {
  margin: 0;
}

/* The questionnaire page carries the Free Estimate body class, and
   estimate.css paints every .form-status green. An error must be red, so
   these rules win on the page's own class. */
.questionnaire-page .checkup-status.is-error,
.questionnaire-page .form-status.is-error {
  color: #b10b2d;
}

.questionnaire-page .checkup-status.is-visible,
.questionnaire-page .form-status.is-visible {
  opacity: 1;
}

/* Green only while the form reports progress ("Sending your request…"). */
.questionnaire-page .checkup-status:not(.is-error),
.questionnaire-page .form-status:not(.is-error) {
  color: #1f7a56;
}

.questionnaire-page [data-lead-form] [aria-invalid="true"] {
  border-color: #b10b2d;
  background: #fff6f7;
}

.questionnaire-page .lead-field-error {
  color: #b10b2d;
}

/* The Terms and Privacy links under the button. They sit in grey fine print,
   so they carry the site's blue and an underline to read as links. */
.questionnaire-page .checkup-privacy a {
  color: var(--blue, #183060);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color var(--t, 0.2s ease);
}

.questionnaire-page .checkup-privacy a:hover,
.questionnaire-page .checkup-privacy a:focus-visible {
  color: #cd0f36;
}

/* The red star on a question that must be answered. Optional questions carry
   nothing, so the star is the only marker on the form. */
.questionnaire-page .required-mark {
  margin-left: 3px;
  color: #cd0f36;
  font-weight: 700;
}