/* ==========================================================================
   ActiveCampaign-formulieren (form 31 = ebook, form 33 = inspiratiemail)
   passend maken bij de huisstijl. AC injecteert bij het laden zijn eigen
   <style>, vandaar !important — dat komt anders steeds als laatste en wint.

   Aanpak: AC's eigen titel/tekst en veldlabels wegwerken (de pagina heeft al
   een eigen kop + tekst erboven staan), en voornaam + e-mail + knop weer op
   één rij zetten — net als de oorspronkelijke, simpele inschrijfregel.
   ========================================================================== */

._form_31, ._form_33 {
  font-family: var(--font-body) !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  text-align: center !important;
}

/* AC's eigen titel + omschrijving weg — die staan al (mooier) in de pagina zelf. */
._form_31 ._form_element._field_header,
._form_33 ._form_element._field_header,
._form_31 ._form_element._field_html,
._form_33 ._form_element._field_html {
  display: none !important;
}

/* Uitzondering: AC hergebruikt hetzelfde blok-type voor de bedank-tekst na
   verzenden — die moet, ondanks de regel hierboven, wél zichtbaar zijn.
   Deze selector is specifieker (4 klassen i.p.v. 3) en wint daardoor alsnog,
   ook met !important aan beide kanten. */
._form_31 ._form-thank-you ._form_element._field_html,
._form_33 ._form-thank-you ._form_element._field_html {
  display: block !important;
}

/* De bedank-melding krijgt een eigen volle regel onder de invulrij, in
   plaats van in dezelfde flex-rij als de velden te proberen passen —
   dat laatste veroorzaakte de "verspringende" velden. */
._form_31 ._form-thank-you,
._form_33 ._form-thank-you {
  display: block !important;
  width: 100% !important;
  flex-basis: 100% !important;
  text-align: center !important;
  margin-top: 0.85rem !important;
}

/* Labels tonen boven beide velden — klein, boven het veld — zodat altijd
   duidelijk is wat waar moet, ook nadat iemand is begonnen te typen. */
._form_31 ._form-label, ._form_33 ._form-label {
  display: block !important;
  text-align: left !important;
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  color: var(--tekst-zacht) !important;
  margin-bottom: 0.25rem !important;
}
._form_31 .field-required, ._form_33 .field-required {
  color: var(--kleur-roestbruin) !important;
}

/* Velden + knop weer op één rij, gecentreerd, zoals de oorspronkelijke opmaak */
._form_31 ._form-content, ._form_33 ._form-content {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 0.6rem !important;
}
._form_31 ._form_element, ._form_33 ._form_element {
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  flex: 0 1 auto !important;
}
._form_31 ._field-wrapper, ._form_33 ._field-wrapper {
  width: auto !important;
}
._form_31 input[type="text"], ._form_33 input[type="text"],
._form_31 input[type="email"], ._form_33 input[type="email"] {
  font-family: var(--font-body) !important;
  font-size: 0.92rem !important;
  border: 1px solid var(--lijn) !important;
  border-radius: 50px !important;
  padding: 0.55rem 1.1rem !important;
  color: var(--tekst) !important;
  background: #fff !important;
  min-width: 200px !important;
  width: auto !important;
  box-sizing: border-box !important;
}
._form_31 ._button-wrapper, ._form_33 ._button-wrapper {
  margin: 0 !important;
  width: auto !important;
  flex: 0 0 auto !important;
}
/* Onzichtbaar "schaduwlabel" — exact dezelfde afmetingen als ._form-label
   hierboven, zodat de knop altijd op dezelfde hoogte als de invulvelden
   uitkomt. Robuuster dan een vaste margin-top, want die brak af zodra de
   labels op een andere breedte anders afbraken (zoals op deze pagina). */
._form_31 ._button-wrapper::before, ._form_33 ._button-wrapper::before {
  content: "\00a0";
  display: block;
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.25rem !important;
}
._form_31 ._submit, ._form_33 ._submit {
  font-family: var(--font-body) !important;
  background: var(--kleur-staalblauw) !important;
  border: 0 !important;
  border-radius: 50px !important;
  padding: 0.55rem 1.6rem !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  box-shadow: none !important;
  outline: none !important;
  width: auto !important;
  transition: background-color 0.2s ease !important;
}

/* Form 31 (ebook) heeft twee velden die de standaardopmaak niet dekt:
   - "Mijn interesse is: Persoonlijk/Bedrijfsmatig" (veld-class _x00610444) — helemaal weg.
   - "JA, houd me op de hoogte..." (veld-class _field25) — blijft, maar kleiner/subtieler.
   Let op: dit zijn AC's eigen gegenereerde veld-classes; als Tanja dit veld in AC
   verwijdert en opnieuw aanmaakt, kan de class-naam veranderen. */
._form_31 ._x00610444 {
  display: none !important;
}
._form_31 ._field25 ._form-label,
._form_31 ._field25 legend {
  display: none !important;
}
._form_31 ._field25 label {
  font-family: var(--font-body) !important;
  font-size: 0.78rem !important;
  font-weight: 400 !important;
  color: var(--tekst-zacht) !important;
  line-height: 1.4 !important;
}
._form_31 ._field25 ._row {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.4rem !important;
  margin-top: 0.3rem !important;
}
._form_31 ._field25 input[type="checkbox"] {
  margin-top: 0.2rem !important;
  flex-shrink: 0 !important;
}
._form_31 ._submit:hover, ._form_33 ._submit:hover {
  background: var(--kleur-roestbruin) !important;
}
._form_31 ._form-branding, ._form_33 ._form-branding {
  display: none !important;
}
._form_31 ._error-inner, ._form_33 ._error-inner {
  font-family: var(--font-body) !important;
  font-size: 0.8rem !important;
}

@media (max-width: 560px) {
  ._form_31 ._form-content, ._form_33 ._form-content { flex-direction: column; align-items: stretch; }
  ._form_31 input[type="text"], ._form_33 input[type="text"],
  ._form_31 input[type="email"], ._form_33 input[type="email"] { width: 100% !important; }
  ._form_31 ._submit, ._form_33 ._submit { width: 100% !important; }
  ._form_31 ._button-wrapper::before, ._form_33 ._button-wrapper::before { content: none !important; }
  ._form_31 ._button-wrapper, ._form_33 ._button-wrapper { margin-top: 0.6rem !important; }
}