/* Formulieren (Fluent Forms binnen de donkerblauwe formulierblokken). Stijl 1:1 uit het design. */
.formbox { background: var(--wm-navy); color: #fff; border-radius: 30px; padding: clamp(24px, 3.6vw, 40px); box-shadow: 0 26px 60px rgba(2,67,94,.28); }
.formbox__title { margin: 0; font-size: clamp(26px, 3.2vw, 42px); line-height: 1.06; font-weight: 800; letter-spacing: -.02em; }
.formbox__title--sm { font-size: clamp(24px, 2.8vw, 34px); }
.formbox__intro { margin: 14px 0 0; font-size: 18px; line-height: 1.7; color: rgba(255,255,255,.92); }
.formbox .fluentform { margin-top: 24px; }

/* Velden (bron: label + veld in een kolom met gap 8px, velden onderling gap 14px) */
.formbox .ff-el-group { margin-bottom: 14px; }
.formbox .ff-el-input--label label { display: block; margin: 0 0 8px; font-size: 18px; font-weight: 700; color: #fff; }
.formbox .ff-el-input--label.asterisk-right label:after { color: var(--wm-sand); }
.formbox .fluentform .ff-el-form-control,
.formbox .fluentform input[type="text"], .formbox .fluentform input[type="email"], .formbox .fluentform input[type="tel"],
.formbox .fluentform input[type="number"], .formbox .fluentform input[type="url"], .formbox .fluentform textarea, .formbox .fluentform select {
  width: 100%; padding: 16px 20px; border-radius: 16px; border: 2px solid rgba(255,255,255,.24);
  background: rgba(255,255,255,.08); color: #fff; font-family: inherit; font-size: 18px; font-weight: 500; line-height: 1.4;
  transition: border-color .25s ease, background .25s ease; box-shadow: none; height: auto; -webkit-appearance: none; appearance: none;
}
.formbox .fluentform .ff-el-form-control::placeholder, .formbox .fluentform textarea::placeholder { color: rgba(255,255,255,.5); }
.formbox .fluentform .ff-el-form-control:focus, .formbox .fluentform textarea:focus { border-color: var(--wm-sand); background: rgba(255,255,255,.14); outline: none; }
.formbox .fluentform textarea { resize: vertical; }
/* Geen spinner-knopjes bij numerieke velden */
.formbox .fluentform input[type="number"]::-webkit-inner-spin-button, .formbox .fluentform input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.formbox .fluentform input[type="number"] { -moz-appearance: textfield; }

/* Akkoord-checkbox */
.formbox .ff-el-form-check { margin: 0; }
.formbox .ff-el-form-check label, .formbox .ff-el-form-check-label {
  display: flex; align-items: flex-start; gap: 12px; font-size: 18px; line-height: 1.55; color: rgba(255,255,255,.92); cursor: pointer; font-weight: 400;
}
.formbox .ff-el-form-check-label a { color: var(--wm-sand); font-weight: 700; }
.formbox .fluentform input[type="checkbox"], .formbox .fluentform .ff-el-form-check-input { width: 22px; height: 22px; margin: 3px 16px 0 0 !important; accent-color: var(--wm-sand); flex: 0 0 auto; }
.formbox .ff-el-tc .ff-el-form-check-label { display: flex; align-items: flex-start; gap: 0; }
.formbox .ff-el-tc { display: flex; }

/* Verzendknop */
.formbox .ff-btn-submit, .formbox button[type="submit"] {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 6px;
  padding: 18px 32px; border: 0; border-radius: 999px; background: var(--wm-sand); color: var(--wm-navy);
  font-family: inherit; font-size: 19px; font-weight: 800; cursor: pointer; line-height: normal;
  transition: transform .25s var(--wm-ease), box-shadow .25s ease;
}
.formbox .ff-btn-submit:hover, .formbox button[type="submit"]:hover { background: var(--wm-sand); color: var(--wm-navy); transform: translateY(-4px); box-shadow: 0 20px 44px rgba(232,220,116,.35); }

/* Meldingen */
.formbox .ff-message-success { margin-top: 18px; padding: 18px 22px; border-radius: 16px; background: rgba(23,162,174,.25); border: 2px solid rgba(23,162,174,.6); color: #fff; font-size: 18px; }
.formbox .ff-el-is-error .ff-el-form-control { border-color: var(--wm-coral); }
.formbox .error, .formbox .ff-errors-in-stack { color: var(--wm-sand); font-size: 16px; margin-top: 6px; }
.formbox .ff_submit_btn_wrapper { margin-top: 6px; }

/* Placeholder als er (nog) geen formulier is gekoppeld */
.formbox__placeholder { margin-top: 24px; padding: 18px 22px; border-radius: 16px; border: 2px dashed rgba(255,255,255,.3); color: rgba(255,255,255,.75); font-size: 16px; }