/* Herroepingsformulier (plugin Mailbox Herroepingsfunctie) in de huisstijl van de site.
   Zelfde velden en knop als het contactformulier (contact.css). */

.herroeping .mb-herr { max-width: 40rem; }
.herroeping .mb-herr h3 { font-family: "Manrope", sans-serif; font-size: 1.25rem; margin: 0 0 .5rem; }

.herroeping .mb-herr-field { margin: 0 0 1.25rem; border: 0; padding: 0; }
.herroeping .mb-herr-field > label,
.herroeping .mb-herr-field legend {
  display: block; font-weight: 700; font-size: .9375rem; font-family: "Manrope", sans-serif;
  color: var(--inkt); margin-bottom: .375rem; padding: 0;
}
.herroeping .mb-herr-field input[type="text"],
.herroeping .mb-herr-field input[type="email"],
.herroeping .mb-herr-field textarea {
  font: inherit; font-size: 1rem; color: var(--inkt);
  background: var(--creme-op); border: 1px solid var(--zand); border-radius: 12px;
  padding: .75rem .875rem; width: 100%; line-height: 1.5;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.herroeping .mb-herr-field textarea { resize: vertical; min-height: 6rem; }
.herroeping .mb-herr-field input:focus,
.herroeping .mb-herr-field textarea:focus {
  outline: none; border-color: var(--rood);
  box-shadow: 0 0 0 3px rgba(224, 62, 26, .18);
}

/* Keuze product/dienst: gewone radio's naast elkaar. */
.herroeping fieldset.mb-herr-field label { display: inline-flex; align-items: center; gap: .5rem; margin-right: 1.5rem; font-weight: 400; }
.herroeping fieldset.mb-herr-field input[type="radio"] { accent-color: var(--rood); width: 1.125rem; height: 1.125rem; }

.herroeping .mb-herr-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: .5rem; }
.herroeping .mb-herr-actions button {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .625rem 1.375rem; border-radius: var(--pil);
  font-family: "Manrope", sans-serif; font-size: 19px; font-weight: 800;
  background: var(--rood); color: var(--creme-op);
  border: 2px solid transparent; cursor: pointer;
}
.herroeping .mb-herr-actions button:hover { background: var(--rood-op); }
.herroeping .mb-herr-back { font-weight: 700; color: var(--inkt); text-decoration: underline; text-underline-offset: 3px; }

/* Stap 2: overzicht van de ingevulde gegevens. */
.herroeping .mb-herr-summary {
  list-style: none; margin: 1rem 0 1.5rem; padding: 1.25rem 1.5rem;
  background: var(--creme-op); border: 1px solid var(--zand); border-radius: 12px;
}
.herroeping .mb-herr-summary li + li { margin-top: .375rem; }

/* Foutmeldingen en bevestiging. */
.herroeping .mb-herr-errors {
  margin: 0 0 1.25rem; padding: 1rem 1.25rem; border-radius: 12px;
  background: rgba(224, 62, 26, .08); border: 1px solid var(--rood); color: var(--inkt);
}
.herroeping .mb-herr-thanks {
  padding: 1.25rem 1.5rem; border-radius: 12px;
  background: var(--creme-op); border: 1px solid var(--zand);
}