/* Blue World contactformulier, 1:1 met de live CF7-pagina. Self-contained (eigen fonts + tokens). */
@font-face {
  font-family: 'bwregular';
  src: url('../fonts/Arlon-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'bwsemibold';
  src: url('../fonts/Arlon-SemiBold.woff2') format('woff2');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

.bw-contact {
  --bw-indigo: #2b3494;   /* exact uit de live DOM (icoon + knop) */
  --bw-text: #3a3a4a;
  --bw-border: #ebecf5;
  --bw-error: #d43a3a;
  --bw-radius: 8px;
  font-family: bwregular, system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--bw-text);
  width: 100%;
  max-width: 720px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 20px;
  box-shadow: rgba(33, 35, 38, 0.2) 5px 5px 70px 0;
  padding: 28px 30px 24px;
}
.bw-contact, .bw-contact *, .bw-contact *::before, .bw-contact *::after { box-sizing: border-box; }
.bw-contact[x-cloak], .bw-contact [x-cloak] { display: none !important; }

.bw-contact-form { display: flex; flex-direction: column; gap: 13px; }
.bw-contact-row { display: block; }

/* Veld-card: wit, dunne lichtgrijze rand, icoon links + transparante input. */
.bw-contact-field {
  display: flex;
  align-items: center;
  gap: 11px;
  background: #fff;
  border: 1px solid var(--bw-border);
  border-radius: var(--bw-radius);
  padding: 8px 13px;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.bw-contact-field--area { align-items: flex-start; }
.bw-contact-field:focus-within { border-color: var(--bw-indigo); box-shadow: 0 0 0 3px rgba(43, 52, 148, .10); }
.bw-contact-field:has(.bw-contact-input[aria-invalid="true"]) { border-color: var(--bw-error); }

.bw-contact-icon { color: var(--bw-indigo); display: inline-flex; flex: 0 0 auto; }
.bw-contact-field--area .bw-contact-icon { margin-top: 8px; }
.bw-contact-icon svg { display: block; width: 16px; height: 16px; }

.bw-contact-input {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: none;
  font: inherit;
  font-size: 15px;
  color: var(--bw-text);
  padding: 6px 0;
}
.bw-contact-input::placeholder { color: #9a9aa7; opacity: 1; font-size: 15px; }
textarea.bw-contact-input { min-height: 118px; resize: vertical; line-height: 1.5; }

.bw-contact-error { color: var(--bw-error); font-size: 13px; margin: 6px 2px 0; }
.bw-contact-formerror { color: var(--bw-error); font-size: 14px; margin: 0; }

/* Privacy-checkbox in dezelfde rustige stijl. */
.bw-contact-check { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; line-height: 1.5; cursor: pointer; }
.bw-contact-check input { margin: 2px 0 0; width: 16px; height: 16px; accent-color: var(--bw-indigo); flex: 0 0 auto; }
.bw-contact-check a { color: var(--bw-indigo); text-decoration: underline; }

/* Verzendknop: tekst-stijl indigo, links onderaan (geen gevulde achtergrond). */
.bw-contact-actions { margin-top: 2px; }
.bw-contact-submit {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 0;
  padding: 6px 2px;
  font-family: bwsemibold, bwregular, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--bw-indigo);
  cursor: pointer;
  border-radius: 4px;
}
.bw-contact-submit:hover { text-decoration: underline; }
.bw-contact-submit:disabled { opacity: .6; cursor: default; text-decoration: none; }
.bw-contact-submit:focus-visible { outline: 3px solid rgba(43, 52, 148, .4); outline-offset: 2px; }

.bw-contact-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.bw-contact-turnstile { margin: 4px 0; }

/* Bedankscherm */
.bw-contact-success { text-align: center; padding: 18px 8px; }
.bw-contact-success-check {
  width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--bw-indigo); color: #fff; font-size: 28px;
  display: flex; align-items: center; justify-content: center;
}
.bw-contact-success-title { font-family: bwsemibold, system-ui, sans-serif; font-size: 22px; margin: 0 0 8px; color: var(--bw-indigo); }
.bw-contact-success-ref { font-size: 15px; margin: 0 0 6px; }

@media (max-width: 559px) {
  .bw-contact { padding: 22px 18px; border-radius: 16px; }
}