/* ActiveCampaign embedded form (de-ientes account, form id 25) restyled to match
   the .t3-formcard it sits inside. Every selector is scoped to ._form_25 so the
   rest of the page is untouched.

   Field map for form 25, confirmed against the saved live page in uploads/:
     fullname / email / phone   visible text inputs
     field[13]  treatment type  hidden + pre-set by sept-offer.jsx
     field[14]  location        hidden + pre-set by sept-offer.jsx
     field[39]  contact pref    visible (Phone / WhatsApp)
     field[124] utm_medium      hidden, filled by utm-tracker.js
     field[125] utm_term        hidden, filled by utm-tracker.js
     field[126] utm_campaign    hidden, filled by utm-tracker.js
     field[127] utm_content     hidden, filled by utm-tracker.js
     field[128] utm_source      hidden, filled by utm-tracker.js
     field[2]   spam honeypot   must stay empty - never write to it            */

/* AC's own theme variables. Repointing these does most of the visual work,
   including the radio bullets, which AC styles itself. */
._form_25 {
  --_form-properties---primary--form-text-color: var(--t3-ink);
  --_form-properties---primary--form-input-text-color: var(--t3-ink);
  --_form-properties---primary--form-input-background-color: var(--t3-soft);
  --_form-properties---primary--form-button-text-color: var(--green-900);
  --_form-properties---primary--form-accent-color: var(--t3-gold);
  --_form-properties---primary--form-bullet-outline: rgba(20, 53, 42, .28);
  --_form-properties---size--primary-font-family: var(--font-poppins);
  --_form-properties---size--form-input-border-radius: 14px;
  --_form-properties---size--form-input-area-border-radius: 14px;
  --_form-properties---size--form-button-font-size: 16px;
  --_form-properties---size--form-button-radius: 999px;
  --_form-properties---size--form-button-padding: 9px;
}

/* 1. Strip AC's wrapper chrome - .t3-formcard is already the card ---------- */
._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;
  width: 100% !important;
  max-width: none !important;
  font-family: var(--font-poppins) !important;
}

/* 2. Hide the treatment and location blocks up front. sept-offer.jsx also
      hides them, but doing it here too stops them flashing into view in the
      gap between AC injecting the form and the script running.
      _x50509081 / _x59408601 are the crm_form-header rows, _x26037926 /
      _x72520897 the radio fieldsets. Hashes are specific to form 25. */
._form_25 ._x50509081,
._form_25 ._x26037926,
._form_25 ._x59408601,
._form_25 ._x72520897 { display: none !important; }

/* 3. Field spacing, matching .t3-fld --------------------------------------- */
._form_25 ._form_element { margin: 0 0 11px; padding: 0; width: 100%; }
._form_25 ._field-wrapper { margin: 0; }
._form_25 ._form_element._clear { clear: none; }

/* The UTM fields and the spam honeypot are zero-height wrappers around hidden
   inputs, but AC still gives each one a bottom margin - six of them stacked up
   put 60px of dead space above the disclaimer. display:none does not stop a
   hidden input being submitted, so collapsing them is safe. */
._form_25 ._form_element:has(> input[type="hidden"]) { display: none !important; }

/* Labels are redundant - the placeholders carry the same text */
._form_25 ._form_element > label._form-label { display: none !important; }

/* 4. Text inputs, matching .t3-fld input ---------------------------------- */
._form_25 input[type="text"],
._form_25 input[type="email"],
._form_25 input[type="tel"],
._form_25 textarea {
  width: 100%;
  background: var(--t3-soft);
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 14px 16px;
  font: 400 15px/1 var(--font-poppins);
  color: var(--t3-ink);
  box-shadow: none;
  transition: border-color var(--dur-base), background var(--dur-base);
}
._form_25 input::placeholder,
._form_25 textarea::placeholder { color: var(--ink-300); opacity: 1; }
._form_25 input:focus,
._form_25 textarea:focus {
  outline: none;
  background: var(--t3-card);
  border-color: var(--t3-accent);
}

/* 5. The contact-preference block (field[39]) ----------------------------- */
/* AC ships its own font (Outfit) and a much larger mobile heading size, both
   scoped to the generated form id, so these need !important to land. */
._form_25 .crm_form-header {
  font: 400 13px/1.5 var(--font-poppins) !important;
  color: var(--ink-500) !important;
  margin: 4px 0 8px !important;
}
/* AC scopes its own fieldset rule to the generated form id (#_form_<hash>_),
   which outranks a class selector - hence !important. Two columns to match
   .t3-fld--row. */
._form_25 ._form-fieldset {
  border: none;
  margin: 0;
  padding: 0;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 11px !important;
}
._form_25 ._form-fieldset > legend { display: none !important; }
._form_25 ._checkbox-radio label,
._form_25 ._checkbox-radio span {
  font: 400 14px/1.4 var(--font-poppins) !important;
  color: var(--t3-ink) !important;
  cursor: pointer;
}

/* 6. Submit button, matching .t3-btn--gold.t3-btn--lg.t3-btn--block ------- */
._form_25 ._button-wrapper { margin: 6px 0 0; padding: 0; width: 100%; }
._form_25 ._submit {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--t3-gold);
  color: var(--green-900);
  border: none;
  border-radius: 999px;
  padding: 9px 10px 9px 26px;
  font: 600 16px/1 var(--font-poppins);
  letter-spacing: .2px;
  text-align: left;
  cursor: pointer;
  height: auto;
  box-shadow: none;
  -webkit-appearance: none;
  transition: transform var(--dur-fast) var(--ease-in-out), background var(--dur-base);
}
/* Stands in for the .arw span the React buttons use */
._form_25 ._submit::after {
  content: "";
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 999px;
  background: rgba(20, 53, 42, .16)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2314352a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M9 6l6 6-6 6'/></svg>")
    no-repeat center;
  transition: transform var(--dur-base) var(--ease-in-out);
}
._form_25 ._submit:hover { opacity: 1; }
._form_25 ._submit:hover::after { transform: translateX(3px); }
._form_25 ._submit:active { transform: translateY(1px); }

/* 7. Validation errors ---------------------------------------------------- */
._form_25 ._error-inner {
  font: 400 12px/1.4 var(--font-poppins);
  color: var(--error-500);
  background: transparent;
  border: none;
  padding: 4px 0 0;
}
._form_25 ._error-inner p { margin: 0; }
._form_25 ._error-arrow { display: none; }

/* 8. Privacy disclaimer --------------------------------------------------- */
._form_25 .p-disclaimer {
  font: 400 12px/1.5 var(--font-poppins);
  color: var(--ink-300);
  margin: 12px 0 0;
  text-align: center;
}
._form_25 .p-disclaimer a {
  color: var(--ink-500);
  text-decoration: underline;
  cursor: pointer;
  transition: opacity var(--dur-base);
}
._form_25 .p-disclaimer a:hover { opacity: .7; }

/* 9. AC's success state - visible only if the redirect is slow or blocked -- */
._form_25 ._form-thank-you {
  font: 500 16px/1.5 var(--font-poppins);
  color: var(--t3-ink);
  text-align: center;
  padding: 24px 0;
}

/* 10. Privacy policy lightbox -------------------------------------------- */
.lightbox_overlay {
  position: fixed; inset: 0;
  background: rgba(20, 53, 42, .72);
  z-index: 2147483000;
  display: none;
}
.lightbox_overlay iframe {
  position: absolute; top: 50%; left: 50%;
  width: 90vw; height: 90vh;
  margin: -45vh 0 0 -45vw;
  background: #fff;
  border: none;
  border-radius: 12px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .6);
}
.lightbox_overlay .close-policy {
  position: absolute; top: 3vh; right: 3vw;
  cursor: pointer;
}