/* CYF demo-wizard. Zelfde vormtaal als het formulier in de hero van de sectorpagina's.
   Alle regels staan binnen .cyfd, zodat de wizard niets op de pagina beinvloedt. */

.cyfd {
  --cyfd-paper: #0a1633;
  --cyfd-ink: #ffffff;
  --cyfd-ink2: #dce4f5;
  --cyfd-mute: #93a2c6;
  --cyfd-b300: #8fb4ff;
  --cyfd-b500: #2e72f0;
  --cyfd-b800: #03278a;
  --cyfd-lijn: rgba(255, 255, 255, 0.14);
  --cyfd-lijn-zacht: rgba(255, 255, 255, 0.08);
  --cyfd-vlak: rgba(255, 255, 255, 0.04);
  --cyfd-fout: #f5a524;
  --cyfd-std: cubic-bezier(0.4, 0, 0.2, 1);

  position: relative;
  color: var(--cyfd-ink);
  background: var(--cyfd-paper);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: clamp(22px, 2.4vw, 32px);
  box-shadow: 0 40px 90px rgba(2, 8, 26, 0.6);
  overflow: hidden;
  font-family: Archivo, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  box-sizing: border-box;
}
.cyfd *,
.cyfd *::before,
.cyfd *::after { box-sizing: border-box; }

/* Zachte lichtval linksboven, zoals de achtergrond van de homepage. */
.cyfd::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(70% 60% at 0% 0%, rgba(46, 114, 240, 0.14), transparent 65%);
}
.cyfd > * { position: relative; }

.cyfd__mono {
  font-family: "Martian Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── kop en stappen ─────────────────────────────────────────────────── */

.cyfd__kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.cyfd__eyebrow { color: var(--cyfd-b300); display: block; }
.cyfd__titel {
  margin: 8px 0 6px;
  font-size: clamp(25px, 2.6vw, 33px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: #fff;
  overflow-wrap: normal;
  word-break: keep-all;
}
.cyfd__sub { margin: 6px 0 0; color: var(--cyfd-mute); font-size: 14px; }
.cyfd__teller {
  flex: 0 0 auto;
  border: 1px solid rgba(143, 180, 255, 0.35);
  border-radius: 100px;
  padding: 6px 11px;
  color: var(--cyfd-b300);
}

/* Stappenbalk: streep met bolletjes, zoals de stepper op de homepage. */
.cyfd__stepper { display: flex; align-items: flex-start; margin: 24px 0 26px; padding: 0 2px; }
.cyfd__stap { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 9px; position: relative; }
.cyfd__lijnvak {
  position: absolute; top: 8px; left: 50%; width: 100%; height: 2px;
  background: var(--cyfd-lijn-zacht); overflow: hidden;
}
.cyfd__stap:last-child .cyfd__lijnvak { display: none; }
.cyfd__lijnvak i {
  display: block; height: 100%; width: 0; background: var(--cyfd-b500);
  transition: width 0.55s cubic-bezier(0.19, 1, 0.22, 1);
}
.cyfd__stap[data-af="ja"] .cyfd__lijnvak i { width: 100%; }
.cyfd__bol {
  width: 18px; height: 18px; border-radius: 50%; flex: none; z-index: 1;
  border: 2px solid var(--cyfd-lijn-zacht); background: var(--cyfd-paper);
  display: grid; place-items: center;
  transition: border-color 0.35s var(--cyfd-std), background 0.35s var(--cyfd-std), box-shadow 0.35s var(--cyfd-std);
}
.cyfd__bol svg { width: 9px; height: 9px; opacity: 0; stroke: #fff; transition: opacity 0.2s var(--cyfd-std); }
.cyfd__stap[data-nu="ja"] .cyfd__bol { border-color: var(--cyfd-b500); box-shadow: 0 0 0 5px rgba(46, 114, 240, 0.16); }
.cyfd__stap[data-af="ja"] .cyfd__bol { border-color: var(--cyfd-b500); background: var(--cyfd-b500); }
.cyfd__stap[data-af="ja"] .cyfd__bol svg { opacity: 1; }
.cyfd__stapnaam { font-size: 10.5px; color: var(--cyfd-mute); text-align: center; transition: color 0.35s var(--cyfd-std); }
.cyfd__stap[data-nu="ja"] .cyfd__stapnaam,
.cyfd__stap[data-af="ja"] .cyfd__stapnaam { color: var(--cyfd-ink2); }

/* Samenvattingsregel bovenaan de latere stappen. */
.cyfd__samen {
  background: rgba(46, 114, 240, 0.1);
  border: 1px solid rgba(143, 180, 255, 0.3);
  border-radius: 12px;
  padding: 12px 15px;
  margin-bottom: 18px;
  font-size: 13.5px;
  color: var(--cyfd-ink2);
}
.cyfd__samen b { color: #fff; font-weight: 600; }

/* Overgang bij het wisselen van stap. */
@keyframes cyfd-erin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.cyfd__wissel { animation: cyfd-erin 0.45s cubic-bezier(0.19, 1, 0.22, 1) both; }

/* ── velden ─────────────────────────────────────────────────────────── */

.cyfd__rij { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.cyfd__veld { margin-bottom: 14px; min-width: 0; }
.cyfd__veld label,
.cyfd__legenda { display: block; font-size: 12.5px; font-weight: 600; color: var(--cyfd-ink2); margin-bottom: 6px; }
.cyfd__ster { color: var(--cyfd-b300); }

.cyfd input[type="text"],
.cyfd input[type="email"],
.cyfd input[type="tel"],
.cyfd textarea {
  width: 100%;
  background: var(--cyfd-vlak);
  border: 1px solid var(--cyfd-lijn);
  border-radius: 8px;
  color: #fff;
  font: inherit;
  font-size: 14.5px;
  padding: 11px 13px;
  outline: none;
  transition: border-color 0.2s var(--cyfd-std), background 0.2s var(--cyfd-std), box-shadow 0.2s var(--cyfd-std);
}
.cyfd select {
  width: 100%;
  background: var(--cyfd-vlak);
  border: 1px solid var(--cyfd-lijn);
  border-radius: 8px;
  color: #fff;
  font: inherit;
  font-size: 14.5px;
  padding: 11px 36px 11px 13px;
  outline: none;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238FB4FF' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 15px;
  transition: border-color 0.2s var(--cyfd-std), background-color 0.2s var(--cyfd-std), box-shadow 0.2s var(--cyfd-std);
}
.cyfd select:hover { border-color: rgba(255, 255, 255, 0.26); }
.cyfd select:focus {
  border-color: var(--cyfd-b300);
  background-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(143, 180, 255, 0.2);
}
/* De lijst zelf tekent het systeem, die moet leesbaar blijven op wit. */
.cyfd select option { background: #0a1633; color: #fff; }

.cyfd textarea { min-height: 84px; resize: vertical; }
.cyfd input::placeholder,
.cyfd textarea::placeholder { color: rgba(255, 255, 255, 0.34); }
.cyfd input:hover,
.cyfd textarea:hover { border-color: rgba(255, 255, 255, 0.26); }
.cyfd input:focus,
.cyfd textarea:focus {
  border-color: var(--cyfd-b300);
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 0 3px rgba(143, 180, 255, 0.2);
}
.cyfd [data-fout="ja"] { border-color: var(--cyfd-fout) !important; }

.cyfd__hulp { margin: 5px 0 0; font-size: 12px; color: var(--cyfd-mute); }
.cyfd__hulp[data-toon="fout"] { color: var(--cyfd-fout); }
.cyfd__hulp[data-toon="goed"] { color: #6ee7a8; }

/* ── keuzeknoppen ───────────────────────────────────────────────────── */

.cyfd__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cyfd__chip { position: relative; cursor: pointer; }
.cyfd__chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.cyfd__chip span {
  display: inline-block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--cyfd-ink2);
  background: var(--cyfd-vlak);
  border: 1px solid var(--cyfd-lijn);
  border-radius: 100px;
  padding: 7px 13px;
  transition: background 0.2s var(--cyfd-std), color 0.2s var(--cyfd-std), border-color 0.2s var(--cyfd-std);
}
.cyfd__chip:hover span { border-color: rgba(255, 255, 255, 0.3); }
.cyfd__chip input:checked + span { background: #fff; color: var(--cyfd-b800); border-color: #fff; font-weight: 600; }
.cyfd__chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(143, 180, 255, 0.35); }

/* Meerdere keuzes tegelijk: geen witte pil maar het huisaccent met een vinkje,
   zodat meteen te zien is dat er meer dan een aan mag staan. */
.cyfd__chip--multi span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  padding: 11px 16px;
}
.cyfd__vak {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  flex: none;
  border: 1.5px solid rgba(220, 231, 255, 0.34);
  display: grid;
  place-items: center;
  transition: background 0.18s var(--cyfd-std), border-color 0.18s var(--cyfd-std);
}
.cyfd__vak svg { width: 10px; height: 10px; opacity: 0; transition: opacity 0.14s var(--cyfd-std); }
.cyfd__chip--multi input:checked + span {
  background: var(--cyfd-b500);
  border-color: var(--cyfd-b500);
  color: #fff;
}
.cyfd__chip--multi input:checked + span .cyfd__vak { background: #fff; border-color: #fff; }
.cyfd__chip--multi input:checked + span .cyfd__vak svg { opacity: 1; stroke: var(--cyfd-b800); }

/* ── kalender ───────────────────────────────────────────────────────── */

.cyfd__kalender { background: var(--cyfd-vlak); border: 1px solid var(--cyfd-lijn); border-radius: 10px; padding: 14px; }
.cyfd__maand { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.cyfd__maand b { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; text-transform: capitalize; }
.cyfd__pijl {
  background: none;
  border: 1px solid var(--cyfd-lijn);
  color: #fff;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  transition: border-color 0.2s var(--cyfd-std), background 0.2s var(--cyfd-std);
}
.cyfd__pijl:hover:not(:disabled) { border-color: var(--cyfd-b300); background: rgba(255, 255, 255, 0.06); }
.cyfd__pijl:disabled { opacity: 0.3; cursor: default; }

.cyfd__weekdagen,
.cyfd__dagen { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cyfd__weekdagen span {
  text-align: center;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyfd-mute);
  padding: 4px 0;
}
.cyfd__dag {
  aspect-ratio: 1 / 1;
  min-height: 34px;
  border: 1px solid transparent;
  background: none;
  color: var(--cyfd-ink2);
  border-radius: 8px;
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  transition: background 0.15s var(--cyfd-std), border-color 0.15s var(--cyfd-std), color 0.15s var(--cyfd-std);
}
.cyfd__dag:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08); border-color: var(--cyfd-lijn); }
.cyfd__dag:disabled { color: rgba(255, 255, 255, 0.18); cursor: default; }
.cyfd__dag[data-gekozen="ja"] { background: #fff; color: var(--cyfd-b800); font-weight: 700; border-color: #fff; }
.cyfd__dag[data-vandaag="ja"]:not([data-gekozen="ja"]) { border-color: rgba(143, 180, 255, 0.45); }

/* ── tijdvakken ─────────────────────────────────────────────────────── */

.cyfd__sloten { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
.cyfd__slot {
  background: var(--cyfd-vlak);
  border: 1px solid var(--cyfd-lijn);
  color: var(--cyfd-ink2);
  border-radius: 8px;
  padding: 9px 6px;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  transition: background 0.2s var(--cyfd-std), color 0.2s var(--cyfd-std), border-color 0.2s var(--cyfd-std);
}
.cyfd__tot {
  font-family: "Martian Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.04em;
  font-weight: 400;
  color: var(--cyfd-mute);
}
.cyfd__slot[data-gekozen="ja"] .cyfd__tot { color: rgba(3, 39, 138, 0.7); }
.cyfd__slot:hover { border-color: rgba(255, 255, 255, 0.3); }
.cyfd__slot[data-gekozen="ja"] { background: #fff; color: var(--cyfd-b800); border-color: #fff; font-weight: 600; }
.cyfd__leeg { color: var(--cyfd-mute); font-size: 13.5px; padding: 10px 0; }

/* ── samenvatting ───────────────────────────────────────────────────── */

.cyfd__vat {
  background: var(--cyfd-vlak);
  border: 1px solid var(--cyfd-lijn);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
  font-size: 13.5px;
}
.cyfd__vat div { display: flex; gap: 10px; padding: 3px 0; }
.cyfd__vat dt { flex: 0 0 96px; color: var(--cyfd-mute); }
.cyfd__vat dd { margin: 0; font-weight: 600; }

/* ── akkoord en knoppen ─────────────────────────────────────────────── */

.cyfd__akkoord { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--cyfd-ink2); margin: 4px 0 16px; }
.cyfd__akkoord input { margin: 2px 0 0; accent-color: var(--cyfd-b500); width: 16px; height: 16px; flex: 0 0 auto; }
.cyfd__akkoord a { color: var(--cyfd-b300); }

.cyfd__voet { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.cyfd__knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.015em;
  padding: 13px 22px;
  min-height: 48px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.25s var(--cyfd-std), color 0.25s var(--cyfd-std), border-color 0.25s var(--cyfd-std), opacity 0.2s;
}
.cyfd__knop--door { flex: 1; background: #fff; color: var(--cyfd-b800); }
.cyfd__knop--door:hover:not(:disabled) { background: var(--cyfd-b300); }
.cyfd__knop--terug { background: none; border-color: var(--cyfd-lijn); color: var(--cyfd-ink2); }
.cyfd__knop--terug:hover { border-color: rgba(255, 255, 255, 0.34); color: #fff; }
.cyfd__knop:disabled { opacity: 0.55; cursor: default; }

.cyfd__melding { margin: 0 0 12px; font-size: 13.5px; color: var(--cyfd-fout); }
.cyfd__klein { margin: 12px 0 0; font-size: 12px; color: var(--cyfd-mute); text-align: center; }

/* ── klaar ──────────────────────────────────────────────────────────── */

.cyfd__klaar { text-align: center; padding: clamp(14px, 3vw, 30px) 0; }
.cyfd__vink {
  width: 54px; height: 54px; margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(110, 231, 168, 0.14);
  color: #6ee7a8;
  display: grid; place-items: center;
  font-size: 26px;
}
.cyfd__klaar h3 { margin: 0 0 8px; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.cyfd__klaar p { margin: 0 auto; max-width: 40ch; color: var(--cyfd-mute); font-size: 14px; }

/* ── laden ──────────────────────────────────────────────────────────── */

.cyfd__laden { display: flex; align-items: center; gap: 10px; color: var(--cyfd-mute); font-size: 13.5px; padding: 8px 0; }
.cyfd__spin {
  width: 15px; height: 15px; flex: 0 0 auto;
  border: 2px solid rgba(255, 255, 255, 0.22);
  border-top-color: var(--cyfd-b300);
  border-radius: 50%;
  animation: cyfd-draai 0.7s linear infinite;
}
@keyframes cyfd-draai { to { transform: rotate(360deg); } }

.cyfd__verborgen { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 620px) {
  .cyfd__rij { grid-template-columns: 1fr; }
  .cyfd__stapnaam { font-size: 9.5px; }
  .cyfd__chip--multi span { font-size: 13.5px; padding: 10px 14px; }
  .cyfd { padding: 20px; border-radius: 12px; }
  /* Knoppen onder elkaar in plaats van naast elkaar.
     Naast elkaar kregen ze allebei de helft, en "Demo aanvragen" past dan niet op
     een regel: die knop brak in tweeen en werd 75px hoog naast 51px voor "Vorige"
     (Nick, 5 oktober 2026, "de witte knop is te hoog"). Onder elkaar heeft elke
     knop de volle breedte, dus past elke tekst op een regel en zijn ze gelijk hoog.
     De hoofdactie staat onderaan, het dichtst bij de duim. */
  .cyfd__voet { flex-direction: column; align-items: stretch; gap: 8px; }
  .cyfd__knop { width: 100%; white-space: nowrap; }
  .cyfd__knop--door { flex: none; order: 2; }
  .cyfd__knop--terug { flex: none; order: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cyfd * { transition: none !important; animation: none !important; }
}

/* ── Bevestiging dat de aanvraag binnen is ──────────────────────────────
   Komt de bezoeker van het korte formulier, dan is dit het eerste dat hij
   ziet. Structuur uit een vlak en niet uit een dun lijntje, zodat het ook
   op een telefoon meteen als "gelukt" leest. */
.cyfd__ontvangen {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  margin: 0 0 clamp(20px, 2.4vw, 28px);
  padding: 16px 18px;
  background: #0d2a63;
  border: 1px solid rgba(143, 180, 255, 0.34);
  border-radius: 12px;
}
.cyfd__ontvangen-vink {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cyfd-b500);
  color: #fff;
}
.cyfd__ontvangen-vink svg { width: 17px; height: 17px; display: block; }
.cyfd__ontvangen-kop {
  margin: 2px 0 0;
  font-size: clamp(16px, 1.5vw, 18.5px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #fff;
}
.cyfd__ontvangen-tekst {
  margin: 5px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--cyfd-b300);
}
@media (max-width: 480px) {
  .cyfd__ontvangen { grid-template-columns: 28px minmax(0, 1fr); gap: 11px; padding: 14px 15px; }
  .cyfd__ontvangen-vink { width: 28px; height: 28px; }
  .cyfd__ontvangen-vink svg { width: 14px; height: 14px; }
  .cyfd__ontvangen-tekst { font-size: 13px; }
}