/**
 * HubSpot-formulieren in de huisstijl.
 *
 * De embeds zetten hun eigen HTML in de pagina (de hsfc-klassen hieronder),
 * met een neutrale HubSpot-look. Alles staat achter [data-hs-form], zodat we
 * alleen onze eigen embeds raken en niets anders op de pagina.
 *
 * HubSpot waarschuwt dat externe CSS een formulier kan breken. Daarom blijft
 * dit bij typografie, kleur, afstand en randen — geen display, geen positie,
 * geen ingrepen in de structuur die HubSpot zelf opbouwt.
 */

/* Onze eigen regels voor smalle schermen mogen hier niet binnenkomen:
   a { min-height: 44px; display: inline-flex } duwt de opmaak uit elkaar. */
[data-hs-form] a { min-height: 0; display: inline; align-items: normal; }
[data-hs-form] * { white-space: normal; }
/* HubSpot zet zijn eigen lettertype diep in het formulier; dit haalt het
   overal terug naar de huisstijl. */
[data-hs-form] .hsfc-Form, [data-hs-form] .hsfc-Form *,
[data-hs-form] .hs-form, [data-hs-form] .hs-form * {
  font-family: Montserrat, system-ui, sans-serif !important;
}

[data-hs-form] {
  --hsf-ink: #01203F;
  --hsf-blue: #0344DC;
  --hsf-soft: #F3F7FF;
  --hsf-muted: rgba(1, 32, 63, .62);
  --hsf-line: rgba(1, 32, 63, .12);
  --hsf-alarm: #FF3A00;
  font-family: Montserrat, system-ui, sans-serif;
  color: var(--hsf-ink);
}

/* Het V4-embed brengt zijn eigen thema mee — Outfit, een oranje knop, andere
   hoeken — en dat wint van gewone regels. Daarom staan de visuele eigenschappen
   hieronder op !important. Alleen typografie, kleur, ruimte en randen; aan de
   structuur die HubSpot opbouwt raken we niets, zoals hun waarschuwing vraagt. */
[data-hs-form] .hsfc-Step__Content,
[data-hs-form] .hsfc-Form { font-family: inherit; }

/* Rijen en velden */
[data-hs-form] .hsfc-Row + .hsfc-Row { margin-top: 14px; }

[data-hs-form] .hsfc-FieldLabel {
  font-family: Montserrat, system-ui, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  color: var(--hsf-muted) !important;
  margin-bottom: 6px !important;
}
[data-hs-form] .hsfc-FieldLabel__RequiredIndicator { color: var(--hsf-alarm); }

[data-hs-form] .hsfc-TextInput,
[data-hs-form] textarea.hsfc-TextInput,
[data-hs-form] .hsfc-DropdownInput {
  font-family: Montserrat, system-ui, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: var(--hsf-ink) !important;
  background: var(--hsf-soft) !important;
  border: 1px solid transparent !important;
  border-radius: 14px !important;
  padding: 13px 15px !important;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
[data-hs-form] .hsfc-TextInput::placeholder { color: rgba(1, 32, 63, .38); }
[data-hs-form] .hsfc-TextInput:focus,
[data-hs-form] .hsfc-DropdownInput:focus {
  outline: none;
  background: #ffffff !important;
  border-color: var(--hsf-blue) !important;
  box-shadow: 0 0 0 3px rgba(3, 68, 220, .12) !important;
}

/* Telefoonveld: de vlag hoort bij hetzelfde vak als het invoerveld */
[data-hs-form] .hsfc-PhoneInput {
  background: var(--hsf-soft) !important;
  border-radius: 14px !important;
  border: 1px solid transparent !important;
}
[data-hs-form] .hsfc-PhoneInput .hsfc-TextInput {
  background: transparent !important;
  border-radius: 0 14px 14px 0 !important;
}
[data-hs-form] .hsfc-PhoneInput__FlagAndCaret { border-radius: 14px 0 0 14px; }

/* Keuzelijsten */
[data-hs-form] .hsfc-DropdownOptions {
  font-family: Montserrat, system-ui, sans-serif !important;
  border-radius: 14px !important;
  border: 1px solid var(--hsf-line) !important;
  box-shadow: 0 18px 40px rgba(2, 52, 175, .14) !important;
  overflow: hidden;
}
[data-hs-form] .hsfc-DropdownOptions__List__ListItem { font-size: 14px; }
[data-hs-form] .hsfc-DropdownOptions__List__ListItem--selected,
[data-hs-form] .hsfc-DropdownOptions__List__ListItem:hover { background: var(--hsf-soft); }

/* Verstuurknop: dezelfde pil als de rest van de site */
[data-hs-form] .hsfc-Button {
  font-family: Montserrat, system-ui, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  letter-spacing: -0.012em !important;
  color: #ffffff !important;
  background: var(--hsf-blue) !important;
  border: 0 !important;
  border-radius: 61px !important;
  padding: 14px 26px !important;
  min-height: 46px !important;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(3, 68, 220, .28) !important;
  transition: background 200ms ease, box-shadow 200ms ease, transform 200ms cubic-bezier(.22, 1, .36, 1);
}
[data-hs-form] .hsfc-Button:hover { background: #0239b8; transform: translateY(-1px); }
[data-hs-form] .hsfc-Button:disabled { opacity: .55; box-shadow: none; transform: none; cursor: default; }

[data-hs-form] .hsfc-NavigationRow { margin-top: 18px; }

/* Meldingen */
[data-hs-form] .hsfc-ErrorAlert,
[data-hs-form] .hsfc-FieldError,
[data-hs-form] [class*="Error"] { font-family: inherit; font-size: 12.5px; color: var(--hsf-alarm); }

/* Bedanktscherm na verzending */
[data-hs-form] .hsfc-DoneMessage,
[data-hs-form] [class*="DoneMessage"] {
  font-family: Montserrat, system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--hsf-ink) !important;
}

/* Op een donkere kaart blijft de tekst leesbaar */
[data-hs-form][data-hs-form-dark] { --hsf-ink: #ffffff; --hsf-muted: rgba(255, 255, 255, .72); }
[data-hs-form][data-hs-form-dark] .hsfc-TextInput,
[data-hs-form][data-hs-form-dark] .hsfc-PhoneInput { background: rgba(255, 255, 255, .1); color: #ffffff; }
[data-hs-form][data-hs-form-dark] .hsfc-TextInput::placeholder { color: rgba(255, 255, 255, .5); }
[data-hs-form][data-hs-form-dark] .hsfc-TextInput:focus { background: rgba(255, 255, 255, .16); }

@media (max-width: 620px) {
  [data-hs-form] .hsfc-Button { width: 100%; }
}

/* ---------------------------------------------------------------------------
 * De klassieke embed (hbspt.forms.create) gebruikt andere klassen dan het
 * nieuwe developer-script. Formulieren die via de API zijn aangemaakt komen
 * alleen door die route, dus die opmaak staat hier — zelfde huisstijl.
 * ------------------------------------------------------------------------- */

[data-hs-form] .hs-form { font-family: inherit; color: var(--hsf-ink); }

[data-hs-form] .hs-form-field { margin-bottom: 14px; }
[data-hs-form] .hs-form-field > label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--hsf-muted);
  margin-bottom: 6px;
}
[data-hs-form] .hs-form-required { color: var(--hsf-alarm); margin-left: 2px; }

[data-hs-form] .hs-input {
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 500;
  color: var(--hsf-ink);
  background: var(--hsf-soft);
  border: 1px solid transparent;
  border-radius: 14px;
  padding: 13px 15px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
[data-hs-form] textarea.hs-input { min-height: 96px; resize: vertical; }
[data-hs-form] .hs-input::placeholder { color: rgba(1, 32, 63, .38); }
[data-hs-form] .hs-input:focus {
  outline: none;
  background: #ffffff;
  border-color: var(--hsf-blue);
  box-shadow: 0 0 0 3px rgba(3, 68, 220, .12);
}
[data-hs-form] .hs-input.invalid { border-color: var(--hsf-alarm); }

[data-hs-form] .hs-button,
[data-hs-form] input[type="submit"].hs-button {
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: #ffffff;
  background: var(--hsf-blue);
  border: 0;
  border-radius: 61px;
  padding: 14px 26px;
  min-height: 46px;
  width: auto;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(3, 68, 220, .28);
  transition: background 200ms ease, box-shadow 200ms ease, transform 200ms cubic-bezier(.22, 1, .36, 1);
}
[data-hs-form] .hs-button:hover { background: #0239b8; transform: translateY(-1px); }

[data-hs-form] .hs-error-msgs,
[data-hs-form] .hs-error-msg {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  font-size: 12.5px;
  color: var(--hsf-alarm);
}
[data-hs-form] .hs_error_rollup { margin-top: 10px; }

[data-hs-form] .submitted-message,
[data-hs-form] .hs-richtext {
  font-family: inherit;
  font-size: 15px;
  line-height: 1.6;
  color: var(--hsf-ink);
}

/* HubSpot zet verborgen velden wél in de DOM; die horen geen ruimte te pakken. */
[data-hs-form] .hs-form-field.hs-fieldtype-text > label + .input > input[type="hidden"] { display: none; }
[data-hs-form] .hs_preferred_language,
[data-hs-form] .hs_lead_source_page { display: none !important; }

[data-hs-form][data-hs-form-dark] .hs-input { background: rgba(255, 255, 255, .1); color: #ffffff; }
[data-hs-form][data-hs-form-dark] .hs-input::placeholder { color: rgba(255, 255, 255, .5); }

@media (max-width: 620px) {
  [data-hs-form] .hs-button { width: 100%; }
}

/* De velden staan in groepjes van drie in HubSpot, en de klassieke embed zet
   die naast elkaar met floats — in een smalle kaart worden dat drie kolommen
   van 150px. Eén veld per regel leest beter en past overal. */
[data-hs-form] .form-columns-1,
[data-hs-form] .form-columns-2,
[data-hs-form] .form-columns-3 {
  display: flex;
  flex-direction: column;
  gap: 0;
}
[data-hs-form] .form-columns-1 > .hs-form-field,
[data-hs-form] .form-columns-2 > .hs-form-field,
[data-hs-form] .form-columns-3 > .hs-form-field {
  float: none !important;
  width: 100% !important;
  margin-right: 0 !important;
}
[data-hs-form] .hs-form-field > .input { margin-right: 0 !important; }
[data-hs-form] .hs-form .hs-input { width: 100% !important; }
[data-hs-form] .hs-form textarea.hs-input { min-height: 104px; }
[data-hs-form] .hs_submit { margin-top: 4px; }

/* De verstuurknop midden in de kaart, zodat hij niet los in een hoek hangt. */
[data-hs-form] .hsfc-NavigationRow,
[data-hs-form] .hsfc-NavigationRow__Buttons {
  display: flex !important;
  justify-content: center !important;
}
[data-hs-form] .hs_submit,
[data-hs-form] .hs_submit .actions {
  display: flex;
  justify-content: center;
}