/* Injected into the HeyFlow widget's (open) shadow root by /check/index.html.
   Scope: layout fixes for the embed only. HeyFlow theme colours stay as set in HeyFlow. */

/* 1. Let the widget size to its content and let popovers (state dropdown) overflow the card. */
article.heyflow-widget-root { height: auto !important; }
article.heyflow-widget-root,
article.heyflow-widget-root > body,
.main, form, section { overflow: visible !important; }
/* The card supplies the white + rounded corners; HeyFlow's square white body must not poke out. */
article.heyflow-widget-root > body, .main, form, section, footer { background: transparent !important; }
.select-dropdown { z-index: 50 !important; }
/* HeyFlow's template footer (empty link list) switches on from screen 5 and adds a 40px dead strip. */
.footer-container:not(:has(a[href])) { display: none !important; }

/* 2. One font everywhere: the host page's system stack (HeyFlow loads Inter for headings only). */
article.heyflow-widget-root, article.heyflow-widget-root * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif !important;
}

/* 3. Vertical rhythm: question sits close to its answers, even padding top and bottom. */
.main { padding: 4px 0 20px !important; }
.rich-text:not(.simple-checkbox-text) { padding: 18px 0 4px !important; }
.rich-text:not(.simple-checkbox-text) :is(h1, h2, h3) {
  margin: 0 0 6px !important;
  font-size: 23px !important;
  line-height: 1.22 !important;
  letter-spacing: -0.015em !important;
  font-weight: 800 !important;
  text-wrap: balance;
}
.rich-text:not(.simple-checkbox-text) p { margin: 0 !important; font-size: 15px !important; line-height: 1.45 !important; text-wrap: pretty; }
.multiple-choice-block > div > div { padding: 12px 0 4px !important; }

/* 4. Answer buttons: a chevron so they read as tappable, consistent min height, text never under the chevron. */
.multiple-choice-option label { min-height: 56px; position: relative; }
.multiple-choice-option .label-container { padding-right: 30px !important; }
.multiple-choice-option label::after {
  content: ""; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px;
  border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  transform: translateY(-50%) rotate(-45deg); opacity: .55; pointer-events: none;
}

/* 5. Field borders. HeyFlow paints an empty required field brand-red as soon as the screen opens
   (reads as an error before the user typed). Empty = neutral grey, focus = navy ring; the inline
   error message still shows on a failed submit. */
input:focus, select:focus, textarea:focus { outline: none !important; }
section .input .input-wrapper input:placeholder-shown:not(:focus) { border-color: #e5e7eb !important; }
section .input .input-wrapper input:focus,
section .input .input-wrapper input:focus:placeholder-shown {
  border-color: #0f2a4a !important;
  box-shadow: 0 0 0 3px rgba(15, 42, 74, .14) !important;
}

/* 6. Contact screen CTA: one line on a 350px button. */
button { white-space: normal !important; text-overflow: clip !important; }
.generic-button.submit .label { font-size: 18px !important; line-height: 1.25 !important; letter-spacing: -0.005em; }
.generic-button.submit { padding: 16px 14px !important; min-height: 58px; }

/* 7. Consent: checkbox top-aligned with the first line, one tidy panel, readable small print. */
.simple-checkbox { padding-top: 6px !important; padding-bottom: 10px !important; }
.simple-checkbox-content { align-items: flex-start !important; }
.simple-checkbox .label-container { align-items: flex-start !important; padding-left: 10px !important; }
.simple-checkbox-text { padding: 0 !important; }
.simple-checkbox span.checkbox {
  flex: none !important; width: 22px !important; height: 22px !important; min-width: 22px !important;
  border-radius: 5px !important; border: 2px solid #6b7280 !important; margin-top: 0 !important;
}
.simple-checkbox-text p { margin: 0 !important; font-size: 12.5px !important; line-height: 1.5 !important; color: #4b5563 !important; }