/* ============================================================================
   herroeping.css — de wettelijke herroepingsfunctie
   (views/herroeping.ejs en views/herroeping-bevestigd.ejs)

   Wordt altijd samen met paginas.css geladen (routes/herroeping.js), want de
   banier, het honeypot-veld, .melding, .stappen en .modelformulier komen daar
   vandaan. Hier staat alleen wat deze twee pagina's er nog bij nodig hebben.
   Tokens uit stijl.css: niets daarvan overschrijven.
   ========================================================================== */

/* ----- Het formulier -------------------------------------------------------- */
.herroep-formulier {
  background: var(--kleur-zwembad);
  border-radius: var(--radius-kaart);
  padding: clamp(1.25rem, 4vw, 1.75rem);
  margin-block: 1.5rem 2rem;
}
.herroep-formulier .veld:last-of-type { margin-bottom: 1.25rem; }
/* Invoervelden staan hier op een gekleurde ondergrond, dus wit maken ze
   herkenbaar als vak waar je in typt. */
.herroep-formulier input[type="text"],
.herroep-formulier input[type="email"],
.herroep-formulier textarea {
  background: var(--kleur-wit);
}
/* Een bestelnummer lees je karakter voor karakter over uit een mail. Iets meer
   letterafstand scheelt vergissingen tussen 0 en O. */
#herroep-bestelnummer {
  font-family: var(--font-kop);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
#herroep-bestelnummer::placeholder { letter-spacing: normal; text-transform: none; }

/* "optioneel" achter een label: de klant moet in één oogopslag zien dat hij
   geen reden hoeft op te geven. Dat is geen detail maar de kern van de regeling. */
.veld__optioneel {
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--kleur-aqua);
  margin-left: 0.35rem;
}

/* De bevestigingsknop mag niet wegvallen: dit is de functie waar de hele pagina
   om draait. Vol breed op een telefoon, netjes op maat vanaf tablet. */
.herroep-knop {
  width: 100%;
  margin-bottom: 0.5rem;
}
@media (min-width: 560px) {
  .herroep-knop { width: auto; }
}

/* ----- Het bewijsstuk op de bevestigingspagina ------------------------------ */
/* Het tijdstip bepaalt of de klant binnen zijn bedenktijd zat. Vandaar dat het
   hier het grootste element op de pagina is en niet ergens in een zin verstopt zit. */
.herroep-bewijs {
  background: var(--kleur-zwembad);
  border-left: 6px solid var(--kleur-aqua);
  border-radius: var(--radius-kaart);
  padding: 1.25rem 1.5rem;
  margin-block: 1.5rem 2rem;
}
.herroep-bewijs__label {
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--kleur-aqua);
  margin-bottom: 0.35rem;
}
.herroep-bewijs__tijd {
  font-family: var(--font-kop);
  font-weight: 600;
  font-size: clamp(1.25rem, 4vw, 1.6rem);
  line-height: 1.25;
  color: var(--kleur-navy);
  margin-bottom: 0.35rem;
}
.herroep-bewijs__bij {
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}
.herroep-bewijs p:last-child { margin-bottom: 0; }

/* ----- Kleine losse regels en de knoprij onderaan --------------------------- */
.herroep-klein {
  font-size: 0.9rem;
  opacity: 0.85;
}
.herroep-knoprij {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}