:root {
  /* Base neutrals — matched to the Re-Ignite (midnight + teal/mint) palette */
  --base--base-50:  #ffffff;  /* white          */
  --base--base-100: #eef0f2;  /* --t3-soft — used as input background */
  --base--base-400: #5c6573;  /* ink-500        */
  --base--base-500: #121221;  /* midnight / ink */

  --core--black:       #000;
  --core--white:       var(--base--base-50);
  --core--transparent: #fff0;

  /* Brand accents — corrected to Re-Ignite values (teal primary, mint secondary) */
  --accent-1--accent-1-500: #2e93ad;  /* teal — focus border / alt accent */
  --accent-2--accent-2-500: #2e93ad;  /* teal — CTA / submit button       */
  --xd--xd-yellow: #61ae98;           /* mint (unused; kept for parity)    */

  /* Utility strokes */
  --utility--border-color:    #d6d6d6;
  --utility--border-color-80: #d6d6d6cc;
  --utility--border-color-20: #d6d6d633;

  /* Radii */
  --radius-small:   8px;
  --radius-medium:  12px;
  --radius-x-large: 24px;

  /* Typography — Jost matches the rest of the page (--font-poppins) */
  --font-primary:   "Jost", system-ui, sans-serif;
  --font-secondary: var(--font-primary);

  /* Form semantic tokens */
  --form-text-color:             var(--base--base-100);
  --form-input-text-color:       var(--base--base-500);
  --form-button-text-color:      var(--base--base-50);
  --form-accent-color:           var(--accent-2--accent-2-500);
  --form-bullet-outline:         var(--utility--border-color);
  --form-stroke-color:           var(--utility--border-color);
  --form-background-color:       var(--core--transparent);
  --form-input-background-color: var(--base--base-100);
  --_form-properties---primary--form-input-background-color: var(--base--base-100);
  --_form-properties---primary--form-input-text-color: var(--base--base-500);
  --_form-properties---primary--form-accent-color: #2e93ad;
  --_form-properties---size--form-button-font-size: 16px;
  --_form-properties---primary--form-button-text-color: var(--base--base-50);
  --_form-properties---size--form-button-radius: 12rem;
  --_form-properties---size--form-button-padding: 16px;
  --_form-properties---size--form-input-border-radius: 14px;
  --_form-properties---primary--form-accent-color: var(--accent-2--accent-2-500);
  --_form-properties---primary--form-bullet-outline: #d6d6d6;

  --form-alt-text-color:              var(--base--base-100);
  --form-alt-accent-color:            var(--accent-1--accent-1-500);
  --form-alt-stroke-color:            var(--base--base-100);
  --form-alt-background-color:        var(--base--base-500);
  --form-alt-input-background-color:  var(--core--transparent);
  --form-alt-button-text-color:       var(--base--base-500);

  /* Form shape — updated to match .t3-fld / .t3-btn */
  --form-input-border-radius:      14px;
  --form-input-area-border-radius: 14px;
  --form-button-padding:           13px 13px 13px 26px;
  --form-button-radius:            999px;  /* pill     */
  --form-button-font-size:         1rem;
}

/* ==========================================================================
   AC Form visual overrides — emulate .t3-formcard / .t3-fld / .t3-btn--gold
   ========================================================================== */

/* 0. Force the site typeface (Jost) over AC's injected webfont (Outfit) */
._form_25,
._form_25 * {
  font-family: var(--font-primary) !important;
}

/* 1. Strip the default AC wrapper so our .t3-formcard card contains everything */
._form_25 ._form,
._form_25 ._form-inner,
._form_25 ._form-content {
  background:  transparent !important;
  box-shadow:  none !important;
  border:      none !important;
  padding:     0 !important;
  margin:      0 !important;
}

/* 2. Field-level spacing — matches .t3-fld { margin-bottom: 11px } */
._form_25 ._form_element {
  margin-bottom: 11px;
  padding: 0;
}

._form_25 ._field-wrapper {
  margin: 0;
}

/* 3. Inputs — matches .t3-fld input */
._form_25 ._form_element input[type="text"],
._form_25 ._form_element input[type="email"],
._form_25 ._form_element input[type="tel"],
._form_25 ._form_element input[type="number"],
._form_25 ._form_element textarea {
  width: 100%;
  background: var(--form-input-background-color);
  border: 1px solid transparent;
  border-radius: var(--form-input-border-radius);
  padding: 14px 16px;
  font: 400 15px/1 var(--font-primary);
  font-family: var(--font-primary) !important;
  color: var(--form-input-text-color) !important;
  box-shadow: none;
  outline: none;
  transition: border-color 260ms, background 260ms;
}

._form_25 ._form_element input::placeholder,
._form_25 ._form_element textarea::placeholder {
  color: #8a909b; /* ink-300 */
}

._form_25 ._form_element input:focus,
._form_25 ._form_element textarea:focus {
  background: #fff;
  border-color: var(--accent-1--accent-1-500);
}

/* 4. Submit button — matches .t3-btn--gold.t3-btn--lg.t3-btn--block (teal + white) */
._form_25 ._submit {
  width: 100%;
  background: var(--form-accent-color);
  color: #fff; /* white — matches the Re-Ignite teal CTA */
  border: none;
  border-radius: var(--form-button-radius);
  padding: var(--form-button-padding);
  font: 600 var(--form-button-font-size)/1 var(--font-primary);
  letter-spacing: 0.2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 260ms;
  margin-top: 6px;
  box-shadow: none;
  text-align: left;
  -webkit-appearance: none;
}

._form_25 ._submit:hover {
  background: #256a7b; /* teal-pressed */
}

/* Circular arrow badge — mirrors .t3-btn .arw */
._form_25 ._submit::after {
  content: "›";
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  line-height: 1;
  flex: none;
  transition: transform 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

._form_25 ._submit:hover::after {
  transform: translateX(3px);
}

/* 5. Error messages */
._form_25 ._error-inner {
  font: 400 12px/1.4 var(--font-primary);
  color: #b3413a;
  padding: 4px 0;
  background: transparent;
  border: none;
}

._form_25 ._error-inner p { margin: 0; }

/* 6. Remove default AC shadow/border (from the supplied form snippet) */
[id^="form"], ._form { box-shadow: none !important; border: none !important; }
._form-inner { box-shadow: none !important; }

/* 7. Hide the pre-selected treatment field (field[13]) entirely — it stays in the
   DOM with "Invisalign" preset and submits, it's just not shown. CSS :has() is the
   reliable mechanism because AC re-renders the form and clobbers JS-applied inline
   styles; the supplied ._field13 media query never matched AC's generated classes. */
._form_25 ._form_element:has(input[name="field[13]"]) { display: none !important; }
@media (max-width: 568px) { ._field13 { display: none !important; } }

/* 8. Privacy-policy lightbox overlay (from the supplied form snippet) */
.lightbox_overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.75); z-index: 99999999999; display: none;
}
.lightbox_overlay iframe {
  height: 90vh; width: 90vw; position: absolute; top: 50%; left: 50%;
  margin-left: -45vw; margin-top: -45vh; z-index: 999999999999;
  background-color: #fff; border: none; box-shadow: 0 0 20px #000;
}
.lightbox_overlay .close-policy {
  position: absolute; top: 24px; right: 24px; z-index: 9999999999999; cursor: pointer;
}
