/* ============================================
   HAEvn AECT — Email My Score (inline form)
   Styles the aect_email_score webform when it's
   rendered inline inside .haevn-aect-layout, in
   place of the score-summary right panel.
   ============================================ */

/* Right-side panel hosting the email form. Sits inside .haevn-aect-layout
   alongside the existing left intro panel — no need for a custom shell.
   Override the base .haevn-aect-right vertical margins (60px top/bottom)
   so the form aligns flush with the layout's inner padding. */
.haevn-aect-right--email {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  margin-bottom: 0;
}

/* Tighten the gap between the top bar (Back / Complete! / X) and the
   "Required fields*" hint to match Figma 10068-15503. */
.haevn-aect-right--email .haevn-aect-top {
  margin-bottom: 8px;
}

.haevn-aect-email-form-host {
  flex: 1 1 auto;
}

.haevn-aect-email-loading,
.haevn-aect-email-error {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 17px;
  line-height: 21px;
  color: #535459;
  text-align: center;
  padding: 24px 0;
}

.haevn-aect-email-error {
  color: #FF0004;
}

/* "Required fields *" hint at the top of the form. Per DONI-457, 4px
   above the hint and 20px below it (gap to the FIRST NAME row). */
.aect-email-score-form [id^="edit-processed-text-fields-required"] {
  font-family: 'Proxima Nova', sans-serif;
  font-size: 16px;
  line-height: 20px;
  color: #535459;
  margin: 4px 0 20px 0;
  padding: 0;
}

.aect-email-score-form [id^="edit-processed-text-fields-required"] span::after {
  content: " *";
  color: #DA0004;
}

/* Per DONI-457: red asterisks after "United States" (cert checkbox) and
   "Your Privacy Choices" (participation-agreement checkbox) — wrap the
   literal "*" in `<span class="aect-required-asterisk">*</span>` in the
   webform yaml and color it here. */
.aect-email-score-form .aect-required-asterisk {
  color: #DA0004;
}

/* Form labels. */
.aect-email-score-form label {
  font-family: 'Proxima Nova', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 21px;
  color: #535459;
  text-transform: uppercase;
  margin-bottom: 12px;
  display: block;
}

/* The "Which of the following best describes you?" label is rendered
   in sentence case per Figma 10068-15503 — override the uppercase
   default applied to all field labels on this form. */
.aect-email-score-form .form-item-what-best-describes-you > label,
.aect-email-score-form .js-form-item-what-best-describes-you > label {
  text-transform: none;
  font-weight: 600;
  color: #535459;
}

.aect-email-score-form .form-required::after {
  content: " *";
  color: #DA0004;
  background-image: none;
}

/* Checkbox titles already include a literal "*" (per Figma 10108-6576),
   so suppress the auto-injected one. */
.aect-email-score-form .form-type-checkbox .form-required::after {
  content: none;
}

/* Cohesion-theme draws an icomoon icon-font overlay on
   `form .form-type-checkbox label::after` (dark purple #3F2A56,
   absolute-positioned over the native checkbox). The required-label
   suppression rule above hides it for cert/consent checkboxes (which
   carry `.form-required`), but the per-option labels inside the new
   "Which best describes you?" fieldset are not individually required,
   so the overlay leaks through and shows up as a dark check on top
   of the native blue checked checkbox. Suppress for ALL checkbox
   labels in this form. */
.aect-email-score-form .form-type-checkbox label::after {
  content: none !important;
  display: none !important;
}

/* Cohesion-theme adds a stray "*" on the SELECT prefix decorator
   (form .form-item-what-best-describes-you .input-decorator::after).
   Figma doesn't have it — the dropdown label already shows the
   required marker. */
.aect-email-score-form .form-item-what-best-describes-you .input-decorator::after,
.aect-email-score-form .input-decorator::after {
  content: none !important;
}

/* Cohesion-theme styles `form .form-type-select label::after` as an
   absolutely-positioned overlay (their custom dropdown chevron, anchored
   bottom:0 right:0 of the label). When the same `::after` element also
   gets `content: "*"` from `form-required::after` for required fields,
   the asterisk renders at the panel's bottom-right edge instead of inline
   next to the label text. Reset the positioning so the `*` stays inline. */
.aect-email-score-form .form-type-select label::after {
  position: static !important;
  display: inline !important;
  width: auto !important;
  height: auto !important;
  font-size: inherit !important;
  color: #DA0004 !important;
  background: none !important;
  pointer-events: auto !important;
}

/* Cohesion-theme renders a custom check visual via
   `form .form-type-checkbox label::before` — we use the native
   checkbox here, so suppress that pseudo-element. */
.aect-email-score-form .form-type-checkbox label::before {
  display: none !important;
}

/* Inputs and select. */
.aect-email-score-form input[type="text"],
.aect-email-score-form input[type="email"],
.aect-email-score-form select {
  height: 56px;
  border: 1px solid #535459;
  border-radius: 0;
  padding: 12px 24px;
  font-family: 'Proxima Nova', sans-serif;
  font-size: 17px;
  line-height: 21px;
  color: #535459;
  width: 100%;
  background: #fff;
  box-sizing: border-box;
}

.aect-email-score-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path fill='none' stroke='%23535459' stroke-width='2' d='M9 13l7 7 7-7'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 56px;
}

.aect-email-score-form input:focus,
.aect-email-score-form select:focus {
  outline: none;
  border-color: #A20067;
  box-shadow: 0 0 14px rgba(162, 0, 103, 0.3);
}

.aect-email-score-form .webform-flexbox {
  gap: 16px;
  margin-top: 0;
}

/* Per DONI-457: the FIRST NAME / LAST NAME flexbox sits directly below
   the "Required fields *" hint. Cohesion-theme applies a default top
   margin to .js-form-wrapper / .form-item siblings; strip it so the
   gap between the hint and the first input row is exactly the 20px
   margin-bottom set on the hint above. */
.aect-email-score-form [id^="edit-processed-text-fields-required"] + .webform-flexbox,
.aect-email-score-form [id^="edit-processed-text-fields-required"] + .js-form-wrapper,
.aect-email-score-form [id^="edit-processed-text-fields-required"] + div {
  margin-top: 0;
  padding-top: 0;
}

.aect-email-score-form .webform-flexbox > .form-item,
.aect-email-score-form .webform-flexbox > .webform-flex {
  flex: 1;
}

/* Checkboxes — grid layout: row 1 = checkbox + label side by side,
   row 2 = full-width inline error message. */
.aect-email-score-form .form-type-checkbox {
  display: grid;
  grid-template-columns: 24px 1fr;
  column-gap: 16px;
  row-gap: 4px;
  align-items: start;
  padding-top: 4px;
}

/* Cohesion-theme sets `opacity: 0` on .form-checkbox globally, expecting
   a custom styled visual elsewhere. We want the native checkbox here. */
.aect-email-score-form .form-type-checkbox input[type="checkbox"],
.aect-email-score-form input.form-checkbox {
  grid-column: 1;
  grid-row: 1;
  width: 24px;
  height: 24px;
  border: 1px solid #535459;
  background: #fff;
  margin: 2px 0 0;
  appearance: auto;
  opacity: 1;
}

.aect-email-score-form .form-type-checkbox label {
  grid-column: 2;
  grid-row: 1;
  font-size: 14px;
  line-height: 16px;
  color: #757575;
  text-transform: none;
  font-weight: 400;
  margin: 0;
}

.aect-email-score-form .form-type-checkbox label a {
  color: #3F2A56;
  text-decoration: underline;
}

.aect-email-score-form .form-type-checkbox label a:hover,
.aect-email-score-form .form-type-checkbox label a:active {
  color: #A20067;
}

/* "Which of the following best describes you?" — rendered as a
   <fieldset class="checkboxes--wrapper"><legend>…</legend>…</fieldset>
   group rather than the bare <div> wrapper used for the single cert /
   consent checkboxes. iOS Safari leaks the native fieldset/legend chrome
   (ridge border, notched legend) and the per-option <input>s can pick up
   a different native checkmark rendering than the bare cert checkbox.
   Reset the chrome and pin the inner inputs to the same appearance as
   the standalone checkboxes so the visuals match. Also add 3rem space
   above/below the group per design. */
.aect-email-score-form .js-webform-type-checkboxes,
.aect-email-score-form fieldset.checkboxes--wrapper {
  margin: 3rem 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;
}

.aect-email-score-form fieldset.checkboxes--wrapper > legend,
.aect-email-score-form fieldset.checkboxes--wrapper .fieldset-legend {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  float: none;
  font-family: 'Proxima Nova', sans-serif;
  font-size: 17px;
  line-height: 21px;
  color: #535459;
  text-transform: none;
  font-weight: 600;
  -webkit-appearance: none;
  appearance: none;
}

.aect-email-score-form fieldset.checkboxes--wrapper input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: auto;
  opacity: 1;
  accent-color: auto;
}

/* Nudge the per-option label text down 4px so it aligns with the
   optical center of the 24px checkbox (cert/consent rows already
   read correctly without this — their wrappers carry slightly
   different vertical metrics). Per-option labels also use 17px /
   21px (form body-copy size), not the 14px small-print used by
   the cert/consent disclaimer labels. */
.aect-email-score-form fieldset.checkboxes--wrapper .form-type-checkbox label {
  padding-top: 4px;
  font-size: 17px;
  line-height: 21px;
}

/* Inline custom errors (from the webform's JS pattern; only fires when
   ajax=false on the form). */
.aect-email-score-form .custom-error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-family: 'Proxima Nova', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 21px;
}

.aect-email-score-form .custom-error .error-text {
  color: #FF0004;
}

.aect-email-score-form .form-type-checkbox + .custom-error {
  font-size: 14px;
  line-height: 16px;
  margin-left: 40px;
}

/* Drupal core inline_form_errors per-field error message. */
.aect-email-score-form .form-item--error-message,
.aect-email-score-form fieldset.checkboxes--wrapper.error > .fieldset-wrapper > div:first-child:not(.form-checkboxes) {
  font-family: 'Proxima Nova', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 21px;
  color: #FF0004;
  margin-top: 12px;
  padding: 0;
  background: none;
  border: 0;
}

.aect-email-score-form .form-item--error-message::before,
.aect-email-score-form .form-item--error-message::after {
  content: none;
  display: none;
}

.aect-email-score-form .form-item--error-message strong {
  font-weight: 400;
}

/* Smaller error text under checkboxes per Figma — full-width row 2 of
   the checkbox grid, indented to align with the label column. */
.aect-email-score-form .form-type-checkbox .form-item--error-message {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: 14px;
  line-height: 16px;
  margin: 0;
  padding-left: 40px;
}

.aect-email-score-form .form-type-checkbox + .form-item--error-message {
  font-size: 14px;
  line-height: 16px;
  margin-top: 4px;
  margin-left: 40px;
}

/* Suppress the page-level summary error block — Figma only shows
   per-field errors, not the consolidated top alert. */
.aect-email-score-form .messages--error,
.aect-email-score-form .messages.error,
.aect-email-score-form .messages-list__item--error {
  display: none;
}

/* Red border on inputs in error state. */
.aect-email-score-form input[aria-invalid="true"],
.aect-email-score-form select[aria-invalid="true"] {
  border-color: #FF0004;
}

/* Submit button. */
.aect-email-score-form .form-actions,
.aect-email-score-form .webform-actions {
  display: flex;
  justify-content: center;
  margin-top: 24px;
}

.aect-email-score-form .form-submit,
.aect-email-score-form button[type="submit"] {
  background: #A20067;
  color: #fff;
  font-family: 'Proxima Nova', sans-serif;
  font-weight: 700;
  font-size: 19px;
  line-height: 25px;
  text-transform: none;
  border: 0;
  padding: 12px 24px;
  border-radius: 25px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.aect-email-score-form .form-submit.button--primary::after,
.aect-email-score-form .form-submit::after,
.aect-email-score-form button[type="submit"]::after {
  content: "" !important;
  display: inline-block !important;
  width: 16px !important;
  height: 16px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6,3 11,8 6,13'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  position: static !important;
  flex-shrink: 0;
}

.aect-email-score-form .form-submit:hover,
.aect-email-score-form button[type="submit"]:hover {
  background: #800052;
}

/* Match the focus-visible style used by other AECT buttons
   (.haevn-aect-btn, .haevn-aect-back, .haevn-aect-close, .haevn-aect-option)
   so keyboard users get a consistent ring. */
.aect-email-score-form .form-submit:focus-visible,
.aect-email-score-form button[type="submit"]:focus-visible {
  text-decoration: underline;
  outline: 1px solid #000;
  outline-offset: 2px;
}

/* Confirmation state — replaces the form area after successful submit. */
.aect-email-score-form .aect-email-score-confirmation {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px;
  text-align: center;
}

.aect-email-score-form .aect-email-score-confirmation .aect-icon {
  width: 100px;
  height: 112px;
  margin-bottom: 24px;
  background: url("/modules/custom/haevn_patient_tool/assets/thank-you-icon.png") center / contain no-repeat;
}

.aect-email-score-form .aect-email-score-confirmation .aect-thanks-title,
.aect-email-score-form .aect-email-score-confirmation .aect-thanks-body {
  font-family: 'Proxima Nova', sans-serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 21px;
  color: #535459;
  margin: 0;
}