/* Webcircuit — Fluent Forms-aanvraagformulier in de stijl van het ontwerp (wc-veld / wc-verzendknop).
   Staat binnen .wc-contact__formulier (de groene kaart uit het ontwerp). */

.wc-ff { align-items: stretch; }
.wc-ff .fluentform,
.wc-ff form { width: 100%; margin: 0; }
.wc-ff .fluentform * { font-family: "Poppins", sans-serif; box-sizing: border-box; }

/* Twee kolommen (voornaam/achternaam, e-mail/telefoon) */
.wc-ff .ff-t-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; margin: 0; }
.wc-ff .ff-t-container .ff-t-cell { width: auto !important; padding: 0 !important; }
.wc-ff .ff-el-group { margin: 0 0 32px; }

/* Labels zoals wc-tekst-p-7 */
.wc-ff .ff-el-input--label { margin-bottom: 10px; padding: 0; }
.wc-ff .ff-el-input--label label { font-size: 16px; font-weight: 400; line-height: 1.5em; color: var(--wc-inkt, #171717); }
.wc-ff .ff-el-input--label.ff-el-is-required.asterisk-right label::after { color: var(--wc-groen, #20ad96); margin-left: 4px; }

/* Velden zoals .wc-contact__vak-3 (wit, lichtgroene rand, 8px hoeken) */
.wc-ff .ff-el-form-control {
  width: 100%;
  padding: 20px 16px;
  font-size: 16px;
  line-height: 1.5em;
  color: var(--wc-inkt, #171717);
  background: var(--wc-wit, #fff);
  border: 1px solid var(--wc-kleur-9, #d2f1ea);
  border-radius: 8px;
  box-shadow: none;
  transition: border-color .2s;
}
.wc-ff .ff-el-form-control::placeholder { color: var(--wc-kleur-8, #6b7280); opacity: 1; }
.wc-ff .ff-el-form-control:focus { outline: none; border-color: #29d6b9; box-shadow: none; }
.wc-ff .ff-el-form-control:focus-visible { outline: 2px solid #29d6b9; outline-offset: 1px; }
.wc-ff textarea.ff-el-form-control { min-height: 180px; resize: vertical; }
.wc-ff select.ff-el-form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2320ad96' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 18px;
  padding-right: 48px;
}

/* Privacy-akkoord */
.wc-ff .wc-ff-privacy .ff-el-form-check-label { display: flex !important; gap: 12px; align-items: flex-start; margin: 0; font-size: 14px; line-height: 1.5; color: var(--wc-kleur-16, #4b5563); }
.wc-ff .wc-ff-privacy .ff_tc_checkbox { flex: 0 0 auto; display: block; padding-top: 2px; }
.wc-ff .wc-ff-privacy .ff_t_c { display: block !important; flex: 1 1 auto; margin: 0 !important; padding: 0 !important; }
.wc-ff .wc-ff-privacy input[type=checkbox] { position: static; width: 18px; height: 18px; margin: 0; accent-color: var(--wc-groen, #20ad96); }
.wc-ff .wc-ff-privacy a { color: var(--wc-groen, #20ad96); text-decoration: underline; }

/* Foutmeldingen */
.wc-ff .ff-el-is-error .ff-el-form-control { border-color: #d92d20; }
.wc-ff .error.text-danger,
.wc-ff .ff-el-is-error .error { margin-top: 6px; font-size: 14px; color: #d92d20; }
.wc-ff .ff-errors-in-stack { margin-top: 16px; color: #d92d20; }

/* Verzendknop zoals .wc-verzendknop (groene pil, rechts) */
.wc-ff .ff_submit_btn_wrapper { margin: 0; text-align: right; }
.wc-ff .ff-btn-submit,
.wc-ff button.wc-ff-knop {
  min-width: 120px;
  padding: 12px 24px;
  border: 0;
  border-radius: 1000px;
  background: var(--wc-groen, #20ad96) !important;
  color: var(--wc-wit, #fff) !important;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5em;
  cursor: pointer;
  transition: transform .15s, background-color .2s;
}
.wc-ff .ff-btn-submit:hover { transform: scale(.975); background: #1c9a86 !important; }
.wc-ff .ff-btn-submit:active { transform: scale(.9); }
.wc-ff .ff-btn-submit:focus-visible { outline: 2px solid #171717; outline-offset: 3px; }
.wc-ff .ff-btn-submit[disabled] { opacity: .5; cursor: default; }

/* Bevestiging na versturen */
.wc-ff .ff-message-success { margin: 0; padding: 0; border: 0; box-shadow: none; background: none; font-size: 18px; line-height: 1.5; color: var(--wc-inkt, #171717); }
.wc-ff-melding { margin: 0; font-size: 16px; line-height: 1.5; color: var(--wc-inkt, #171717); }

@media (max-width: 809.98px) {
  .wc-ff .ff-t-container { grid-template-columns: 1fr; }
  .wc-ff .ff_submit_btn_wrapper { text-align: left; }
  .wc-ff .ff-btn-submit { width: 100%; }
}
.wc-ff .wc-ff-privacy .ff_t_c a { display: inline !important; }