/* Gekopieerd uit NorthByte Lab, effect E401 (lab/effecten/E401-stappenformulier-met-voortgang, 04-10-2026). */
/* ==========================================================================
   E401 · Stappenformulier met voortgang
   Een lang aanvraagformulier in vier korte stappen, met genummerde stippen en
   een balk die meegroeit. Elke stap schuift in vanuit de richting waarin je gaat.
   Alleen transform en opacity bewegen. Zonder JavaScript staan alle stappen
   onder elkaar als één gewoon formulier.
   Instellen op .e401 met CSS-variabelen:
     --e401-accent   kleur van balk, stippen en knop (standaard #ff7a3d)
     --e401-vlak     achtergrond van velden en tegels (standaard rgba(255,255,255,.06))
     --e401-lijn     randkleur                        (standaard rgba(255,255,255,.16))
     --e401-fout     kleur van foutmeldingen          (standaard #ff9c8a)
     --e401-duur     duur van een stapwissel          (standaard 420ms)
   ========================================================================== */

.e401 { position: relative; }

/* ----- Voortgang: stippen met een balk erachter ----- */
.e401-kop { position: relative; margin-bottom: 28px; }
html:not(.js) .e401 [data-alleen-js] { display: none; }
.e401-stippen {
  position: relative; display: grid; grid-template-columns: repeat(var(--e401-n, 4), 1fr);
  margin: 0; padding: 0; list-style: none; text-align: center;
}
.e401-stippen li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 8px; font-size: 13px; line-height: 1.2; color: var(--e401-zacht, rgba(255, 255, 255, .6)); }
.e401-nr {
  position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--e401-bg, #0f1b2d); border: 2px solid var(--e401-lijn, rgba(255, 255, 255, .16));
  font-weight: 700; font-size: 14px;
}
.e401-nr::after {
  /* vinkje voor een afgeronde stap: twee balkjes, alleen transform */
  content: ""; position: absolute; left: 10px; top: 9px; width: 12px; height: 7px;
  border-left: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor;
  transform: rotate(-45deg) scale(0); opacity: 0;
}
.e401-stippen li.is-nu { color: inherit; }
.e401-stippen li.is-nu .e401-nr { border-color: var(--e401-accent, #ff7a3d); color: var(--e401-accent, #ff7a3d); }
.e401-stippen li.is-klaar { color: inherit; }
.e401-stippen li.is-klaar .e401-nr { background: var(--e401-accent, #ff7a3d); border-color: var(--e401-accent, #ff7a3d); color: var(--e401-op-accent, #1a0f08); }
.e401-stippen li.is-klaar .e401-nr span { opacity: 0; }
.e401-stippen li.is-klaar .e401-nr::after { transform: rotate(-45deg) scale(1); opacity: 1; }

.e401-balk {
  position: absolute; z-index: 0; top: 16px; height: 2px;
  left: calc(100% / var(--e401-n, 4) / 2); right: calc(100% / var(--e401-n, 4) / 2);
  background: var(--e401-lijn, rgba(255, 255, 255, .16)); overflow: hidden;
}
.e401-balk span {
  position: absolute; inset: 0; background: var(--e401-accent, #ff7a3d);
  transform: scaleX(var(--e401-p, 0)); transform-origin: 0 50%;
}
.e401-teller { margin: 0 0 4px; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--e401-zacht, rgba(255, 255, 255, .6)); }
html:not(.js) .e401-teller { display: none; }

/* ----- Stappen ----- */
.e401-deel { margin: 0; padding: 0; border: 0; min-width: 0; }
html:not(.js) .e401-deel + .e401-deel { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--e401-lijn, rgba(255, 255, 255, .16)); }
.e401-legend { padding: 0; margin-bottom: 18px; font-size: clamp(22px, 3vw, 28px); font-weight: 600; line-height: 1.15; letter-spacing: -.02em; }
.e401-legend:focus { outline: none; }
.e401-legend:focus-visible { outline: 2px solid var(--e401-accent, #ff7a3d); outline-offset: 4px; }
.e401-vraag { margin: 18px 0 10px; font-weight: 600; font-size: 15px; }
.e401-vraag:first-of-type { margin-top: 0; }

.e401-tegels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.e401-tegel { position: relative; display: block; cursor: pointer; }
.e401-tegel input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.e401-tegel span {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 12px 14px; border-radius: 12px;
  background: var(--e401-vlak, rgba(255, 255, 255, .06)); border: 1.5px solid var(--e401-lijn, rgba(255, 255, 255, .16));
  font-size: 15px; line-height: 1.3;
}
.e401-tegel span::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--e401-lijn, rgba(255, 255, 255, .3)); background: transparent;
}
.e401-tegel input[type="checkbox"] + span::before { border-radius: 5px; }
.e401-tegel input:checked + span { border-color: var(--e401-accent, #ff7a3d); background: var(--e401-vlak-aan, rgba(255, 122, 61, .12)); }
.e401-tegel input:checked + span::before { border-color: var(--e401-accent, #ff7a3d); background: var(--e401-accent, #ff7a3d); box-shadow: inset 0 0 0 3px var(--e401-bg, #0f1b2d); }
.e401-tegel input:focus-visible + span { outline: 2px solid var(--e401-accent, #ff7a3d); outline-offset: 2px; }

.e401-velden { display: grid; gap: 14px; }
@media (min-width: 600px) { .e401-velden { grid-template-columns: 1fr 1fr; } .e401-velden .e401-breed { grid-column: 1 / -1; } }
.e401-veld label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 600; }
.e401-veld input, .e401-veld select {
  display: block; width: 100%; min-height: 50px; padding: 12px 14px; margin: 0;
  font: inherit; font-size: max(16px, 1rem); color: inherit;
  background: var(--e401-vlak, rgba(255, 255, 255, .06)); border: 1.5px solid var(--e401-lijn, rgba(255, 255, 255, .16)); border-radius: 10px;
}
.e401-veld select option { color: #111; }
.e401-veld input:focus, .e401-veld select:focus { outline: 2px solid var(--e401-accent, #ff7a3d); outline-offset: 1px; border-color: transparent; }
.e401-veld input[aria-invalid="true"] { border-color: var(--e401-fout, #ff9c8a); }

.e401-fout { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--e401-fout, #ff9c8a); }
.e401-fout:empty { display: none; }

.e401-overzicht { display: grid; gap: 0; margin: 0 0 8px; }
.e401-overzicht:empty { display: none; }
.e401-overzicht div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; padding: 12px 0; border-bottom: 1px solid var(--e401-lijn, rgba(255, 255, 255, .16)); }
.e401-overzicht dt { font-size: 13px; color: var(--e401-zacht, rgba(255, 255, 255, .6)); }
.e401-overzicht dd { margin: 0; grid-column: 1; font-weight: 500; overflow-wrap: anywhere; }
.e401-overzicht button { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 6px 2px; border: 0; background: none; color: var(--e401-accent, #ff7a3d); font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.e401-nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-top: 26px; }
.e401-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 24px; border-radius: 999px;
  border: 1.5px solid var(--e401-accent, #ff7a3d); background: var(--e401-accent, #ff7a3d); color: var(--e401-op-accent, #1a0f08);
  font: inherit; font-weight: 700; font-size: 16px; cursor: pointer;
}
.e401-knop-rand { background: transparent; color: inherit; border-color: var(--e401-lijn, rgba(255, 255, 255, .25)); }
.e401-knop:focus-visible { outline: 2px solid var(--e401-accent, #ff7a3d); outline-offset: 3px; }
.e401-knop[hidden] { display: none; }
.e401-knop svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.e401-verstuur { margin-top: 18px; }
.e401-status { margin: 16px 0 0; padding: 14px 16px; border-radius: 12px; background: var(--e401-vlak-aan, rgba(255, 122, 61, .12)); line-height: 1.5; }
.e401-status:empty { display: none; }

@media (prefers-reduced-motion: no-preference) {
  html:not([data-rm]) .e401-balk span { transition: transform var(--e401-duur, 420ms) cubic-bezier(.65, 0, .35, 1); }
  html:not([data-rm]) .e401-nr::after { transition: transform .3s cubic-bezier(.3, 1.6, .5, 1) .15s, opacity .2s ease .15s; }
  html:not([data-rm]) .e401-deel.e401-in-vooruit { animation: e401-vooruit var(--e401-duur, 420ms) cubic-bezier(.2, .8, .2, 1) both; }
  html:not([data-rm]) .e401-deel.e401-in-terug { animation: e401-terug var(--e401-duur, 420ms) cubic-bezier(.2, .8, .2, 1) both; }
  html:not([data-rm]) .e401-knop { transition: transform .15s ease; }
  html:not([data-rm]) .e401-knop:active { transform: scale(.97); }
}
@keyframes e401-vooruit { from { opacity: 0; transform: translate3d(32px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes e401-terug { from { opacity: 0; transform: translate3d(-32px, 0, 0); } to { opacity: 1; transform: none; } }