/* ============================================================
   NFN GEÏNTEGREERDE STYLING (Update: Paarse Headers & Oranje Buttons)
   ============================================================ */

/* BASIS TYPOGRAFIE & SPACING */
body,
input,
select,
textarea,
button {
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
}

form {
  max-width: 850px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}

/* NFN Paars voor alle koppen en titels */
h1,
h2,
h3,
.section-title {
  font-weight: 800 !important;
  color: #5d1e79 !important;
  margin-bottom: .75rem !important;
}

p,
label {
  font-size: 1rem !important;
  line-height: 1.5 !important;
  color: #333 !important;
}

/* Meer ruimte tussen secties */
section,
.form-section,
fieldset {
  margin-bottom: 2.5rem !important;
  border: none !important;
}

/* INVOERVELDEN */
input[type="text"],
input[type="email"],
input[type="date"],
input[type="tel"],
input[type="password"],
select,
textarea {
  width: 100% !important;
  padding: 14px 16px !important;
  border: 1px solid #ccd5e0 !important;
  border-radius: 8px !important;
  margin-top: .2rem !important;
  background: #fff !important;
  font-size: 1rem !important;
  transition: border-color .2s, box-shadow .2s;
}

/* Focus op velden kleurt nu mee met de koppen */
input:focus,
select:focus,
textarea:focus {
  border-color: #5d1e79 !important;
  box-shadow: 0 0 0 3px rgba(93, 30, 121, 0.1) !important;
  outline: none !important;
}

/* Verplichte velden marker */
label.required::after {
  content: " *";
  color: #f26419 !important;
  /* Oranje accent voor verplichte velden */
  font-weight: bold;
}

/* RADIO / CHECKBOX OPTIES */
input[type="radio"],
input[type="checkbox"] {
  accent-color: #f26419 !important;
  /* Oranje voor de vinkjes */
  transform: scale(1.2);
  margin-right: .5rem;
}

/* Keuze 'kaarten' (bijv. lidmaatschapstype) */
.choice-block,
.option-card {
  border: 1px solid #dbe3ee !important;
  border-radius: 10px !important;
  padding: 1.25rem !important;
  margin-bottom: .75rem !important;
  cursor: pointer !important;
  transition: all .2s ease !important;
  background: #fff;
}

.choice-block:hover,
.option-card:hover {
  border-color: #f26419 !important;
  /* Oranje rand bij hover */
  background: #fffaf7;
}

.option-card.selected,
.choice-block.selected {
  border-color: #f26419 !important;
  background: #fff5ef !important;
  /* Zacht oranje gloed bij selectie */
  border-width: 2px !important;
}

/* NFN CTA KNOPPEN (Oranje met paarse hover) */
button[type="submit"],
button.primary,
input[type="submit"] {
  width: 100% !important;
  padding: 16px 30px !important;
  font-size: 1.1rem !important;
  background: #f26419 !important;
  /* De nieuwe oranje buttonkleur */
  border: none !important;
  border-radius: 50px !important;
  color: white !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  margin-top: 1.5rem !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all .3s ease;
}

button[type="submit"]:hover,
button.primary:hover {
  background: #5d1e79 !important;
  /* Switch naar paars bij hover voor interactie */
  box-shadow: 0 4px 12px rgba(242, 100, 25, 0.3) !important;
  transform: translateY(-1px);
}

/* FORMULIERSECTIES */
.form-group,
.form-field {
  margin-bottom: 1.5rem !important;
}

.form-group label,
.form-field label {
  font-weight: 700 !important;
  margin-bottom: .4rem !important;
  display: block;
}

/* VISUELE HIËRARCHIE: De paarse accentlijn */
.section-title {
  font-size: 1.4rem !important;
  border-left: 5px solid #5d1e79 !important;
  padding-left: 1rem;
}

/* INFO / FEEDBACK BLOCKS */
.info-box {
  background: #f7f0fa !important;
  border-left: 4px solid #5d1e79 !important;
  padding: 1.25rem !important;
  border-radius: 6px !important;
  margin-bottom: 1.5rem !important;
}

/* FORMULIER CONTAINER */
.form-container,
.form-wrapper {
  background: #fff !important;
  padding: 2.5rem !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .05) !important;
  border: 1px solid #eee;
}

/* MOBIEL OPTIMALISATIE */
@media (max-width: 600px) {
  form {
    padding: 1rem !important;
  }

  .form-container,
  .form-wrapper {
    padding: 1.5rem !important;
  }
}