/* Voltux — de openbare installateurspagina's (fase 5, 2026-10-15).
   Twee pagina's delen dit bestand, want ze delen hun hele omlijsting en al hun
   formulieronderdelen:
     installateur-worden.php    aanmelden (site/site-installateur-worden.js)
     installateur-papieren.php  papieren uploaden met de link uit de mail (…-papieren.js)
   Eén bestand in plaats van twee: anders staat dezelfde 150 regels kop, achtergrond, velden en
   knoppen twee keer, en loopt het na de eerste wijziging uit elkaar.

   ⭐ ZELFSTANDIG. Deze pagina staat los van het portaal (keuze gebruiker 2026-10-15) en gebruikt
   dus GEEN werknemer-inlog.css. Ze gebruikt ook de navbar en footer van de site niet: die zijn
   Nederlands, en deze pagina is als enige openbare pagina vijftalig — een half vertaalde pagina
   is in dit project nooit de bedoeling. Alles wat ze nodig heeft staat hier.

   Wat ze wél deelt met de rest van Voltux: de tokens uit voltux-variables.css (kleur, Inter,
   schaduw) en bij Arabisch werknemer-rtl.css voor Cairo en de leesrichting. Zo ziet dit er uit
   als Voltux, zonder aan het portaal te hangen.

   En bewust geen smalle kaart van 440px zoals de inlogpagina: een formulier van drie stappen
   daarin proppen is exact de fout die bij de bodkaart "de woorden zitten aan elkaar" opleverde
   (PLATFORM.md §9.6).

   Afspraken, zodat alles op het oog klopt:
     maatlat        8 · 12 · 16 · 20 · 24 · 28 · 32 — en niets daartussen
     kaart          radius 24 (20 op een klein scherm), rand dark-200, padding 32/28
     veld           hoogte 52, radius 14, tekst 16px (iOS zoomt onder 16 in)
     label → veld   7     veld → veld      18     onderdeel → onderdeel   28
     regelhoogte    1.6 voor lopende tekst, 1.25 voor koppen
     kleur          alleen tokens uit voltux-variables.css, nooit een los hexgetal
     richting       alleen logische eigenschappen (inline-start/end), zodat Arabisch
                    (rechts → links) dezelfde regels gebruikt als de rest */

* { margin: 0; padding: 0; box-sizing: border-box; }

.wa-body {
    min-height: 100vh;
    min-height: 100dvh;
    font-family: var(--font-sans);
    color: var(--dark-900);
    /* Dezelfde zachte groene gloed als de inlogpagina: het is één merk, ook als de pagina's
       los van elkaar staan. */
    background:
        radial-gradient(900px 480px at 50% -120px, rgba(29, 158, 117, 0.14), transparent 70%),
        var(--dark-50);
    -webkit-font-smoothing: antialiased;
}

.wa-pagina {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding: max(20px, env(safe-area-inset-top)) 16px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.wa-pagina > main { display: flex; flex-direction: column; gap: 24px; }

/* ══════════ Kop: logo + talen ══════════ */
.wa-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; }
.wa-logo img { display: block; height: 30px; width: auto; }

/* Losse chips en geen pil met vijf vakjes: een pil die afbreekt ziet stuk uit op een telefoon */
.wa-taal { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.wa-taal a {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 13px;
    border-radius: 999px;
    background: var(--white);
    border: 1px solid var(--dark-200);
    box-shadow: var(--shadow-sm);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--dark-500);
    text-decoration: none;
    white-space: nowrap;
}
/* Arabisch heeft zijn eigen letter nodig, ook als de pagina zelf Nederlands is */
.wa-taal a[lang="ar"] { font-family: 'Cairo', 'Segoe UI', Tahoma, 'Noto Sans Arabic', 'Geeza Pro', sans-serif; font-size: 14.5px; }
.wa-taal a:hover { color: var(--dark-900); }
.wa-taal a.actief { background: var(--dark-900); border-color: var(--dark-900); color: var(--white); }

.wa-voet { text-align: center; color: var(--dark-400); font-size: 12.5px; }

/* ══════════ Kop ══════════ */
.wa-hero { display: flex; flex-direction: column; gap: 12px; padding-top: 8px; }
.wa-pil {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--green-50);
    color: var(--green-600);
    font-size: 12.5px;
    font-weight: 700;
}
.wa-hero h1 {
    font-size: 34px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.7px;
    color: var(--dark-900);
}
.wa-intro { font-size: 16.5px; line-height: 1.65; color: var(--dark-500); max-width: 58ch; }

/* ══════════ Waarom meedoen ══════════ */
.wa-waarom {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}
.wa-waarom li {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px;
    border: 1px solid var(--dark-200);
    border-radius: 18px;
    background: var(--white);
    box-shadow: var(--shadow-sm);
}
.wa-waarom-icoon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--green-50);
    color: var(--green-600);
}
.wa-waarom-icoon i { font-size: 20px; }
.wa-waarom strong { font-size: 15px; font-weight: 700; color: var(--dark-900); line-height: 1.35; }
.wa-waarom small { font-size: 13.5px; line-height: 1.6; color: var(--dark-500); }

/* ══════════ De kaart met het formulier ══════════ */
.wa-kaart {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 32px 28px;
    border: 1px solid var(--dark-200);
    border-radius: 24px;
    background: var(--white);
    box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
}

/* ── Voortgang: tekst én een balk van drie stukken. Geen bolletjes met lijntjes:
      die stonden op de boekpagina scheef zodra een label afbrak. ── */
.wa-voortgang { display: flex; flex-direction: column; gap: 12px; }
.wa-voortgang-tekst { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.wa-voortgang-tekst strong { font-size: 19px; font-weight: 800; letter-spacing: -0.2px; color: var(--dark-900); }
.wa-voortgang-tekst span { font-size: 13px; font-weight: 600; color: var(--dark-400); white-space: nowrap; }
.wa-balk { list-style: none; display: flex; gap: 6px; }
.wa-balk li {
    flex: 1;
    height: 5px;
    border-radius: 999px;
    background: var(--dark-100);
    transition: background 0.25s;
}
.wa-balk li.actief, .wa-balk li.klaar { background: var(--green-500); }

/* ── Een stap ── */
.wa-stap { display: flex; flex-direction: column; gap: 18px; }
.wa-stap[hidden] { display: none; }
.wa-rij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.wa-rij-adres { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }

.wa-veld { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.wa-veld label { font-size: 14px; font-weight: 600; color: var(--dark-700); }
.wa-optioneel { font-weight: 500; color: var(--dark-400); font-size: 13px; }

.wa-veld input[type="text"],
.wa-veld input[type="email"],
.wa-veld input[type="tel"] {
    width: 100%;
    height: 52px;
    padding-inline: 16px;
    border: 1.5px solid var(--dark-200);
    border-radius: 14px;
    background: var(--white);
    color: var(--dark-900);
    font: inherit;
    font-size: 16px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.wa-veld input::placeholder { color: var(--dark-300); }
.wa-veld input:focus { border-color: var(--green-500); box-shadow: 0 0 0 4px rgba(29, 158, 117, 0.12); }
.wa-veld input.fout { border-color: var(--error-500); }
/* Latijnse velden (e-mail, telefoon, postcode) staan op dir="ltr", maar horen wél aan de
   kant waar de zin begint — in het Arabisch dus rechts. */
.wa-veld input[dir="ltr"] { text-align: start; }
:root[dir="rtl"] .wa-veld input[dir="ltr"] { text-align: right; }

.wa-hint { font-size: 13px; line-height: 1.6; color: var(--dark-500); }
.wa-hint-blok {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 14px;
    background: var(--dark-50);
}
.wa-hint-blok i { font-size: 17px; color: var(--dark-400); flex-shrink: 0; margin-top: 1px; }
.wa-privacy a { color: var(--green-600); font-weight: 600; }

/* ── Het gevonden adres ── */
.wa-adres {
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 52px;
    padding: 12px 16px;
    border: 1.5px dashed var(--dark-200);
    border-radius: 14px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--dark-400);
}
.wa-adres i { font-size: 19px; flex-shrink: 0; }
.wa-adres.gevonden {
    border-style: solid;
    border-color: var(--green-200);
    background: var(--green-50);
    color: var(--green-600);
    font-weight: 600;
}
.wa-adres.mis { border-color: var(--error-500); background: var(--error-50); color: var(--error-500); }

/* ── Pillen: een rij korte keuzes waarvan er één aan staat. Stond hier voor "hoe ver wil je
      rijden?" (verwijderd 2026-10-20) en wordt nu gebruikt voor Nederland / buitenland bij een
      diploma. De vormgeving van de knopjes zelf staat verderop onder .wa-pil-keuze. ── */
.wa-pillen { display: flex; flex-wrap: wrap; gap: 8px; }

/* ══════════ Stap 3 ══════════ */
.wa-blok { display: flex; flex-direction: column; gap: 14px; }
.wa-blok h2 { font-size: 18px; font-weight: 800; letter-spacing: -0.2px; color: var(--dark-900); }

.wa-keuzes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.wa-keuze input { position: absolute; opacity: 0; width: 0; height: 0; }
.wa-keuze-kaart {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 0 14px;
    border: 1.5px solid var(--dark-200);
    border-radius: 14px;
    background: var(--white);
    font-size: 15px;
    font-weight: 600;
    color: var(--dark-700);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.wa-keuze-kaart > i:first-child { font-size: 21px; color: var(--dark-400); flex-shrink: 0; }
.wa-keuze-kaart > span { flex: 1; min-width: 0; }
.wa-keuze-vink {
    font-size: 18px;
    color: var(--green-500);
    opacity: 0;
    transition: opacity 0.15s;
}
.wa-keuze-kaart:hover { border-color: var(--dark-300); }
.wa-keuze input:checked + .wa-keuze-kaart { border-color: var(--green-500); background: var(--green-50); }
.wa-keuze input:checked + .wa-keuze-kaart > i:first-child { color: var(--green-600); }
.wa-keuze input:checked + .wa-keuze-kaart .wa-keuze-vink { opacity: 1; }
.wa-keuze input:focus-visible + .wa-keuze-kaart { box-shadow: 0 0 0 4px rgba(29, 158, 117, 0.12); }

/* ── De verzekering: geen gewone hint. Zonder die polis kan hij niet werken, dus mag het
      opvallen — maar amber en niet rood: het is een voorwaarde, geen foutmelding. ── */
.wa-let-op {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    border: 1px solid var(--amber-200);
    border-radius: 14px;
    background: var(--amber-50);
    font-size: 14px;
    line-height: 1.6;
    color: var(--amber-600);
}
.wa-let-op i { font-size: 20px; flex-shrink: 0; margin-top: 1px; }
.wa-let-op strong { display: block; font-weight: 800; margin-bottom: 2px; }

/* ── De verklaring ── */
.wa-eed {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px;
    border: 1.5px solid var(--dark-200);
    border-radius: 18px;
    background: var(--dark-50);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.wa-eed input { position: absolute; opacity: 0; width: 0; height: 0; }
.wa-eed-zegel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--white);
    border: 1px solid var(--dark-200);
    color: var(--dark-400);
}
.wa-eed-zegel i { font-size: 21px; }
.wa-eed-tekst { flex: 1; min-width: 0; font-size: 14.5px; line-height: 1.6; color: var(--dark-700); }
.wa-eed-label {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--dark-400);
    margin-bottom: 4px;
}
.wa-eed-vink {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    border-radius: 8px;
    border: 1.5px solid var(--dark-300);
    background: var(--white);
    color: transparent;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.wa-eed-vink i { font-size: 16px; }
.wa-eed:hover { border-color: var(--dark-300); }
.wa-eed:has(input:checked) { border-color: var(--green-500); background: var(--green-50); }
.wa-eed:has(input:checked) .wa-eed-zegel { border-color: var(--green-200); color: var(--green-600); }
.wa-eed:has(input:checked) .wa-eed-vink { background: var(--green-500); border-color: var(--green-500); color: var(--white); }
.wa-eed:has(input:focus-visible) { box-shadow: 0 0 0 4px rgba(29, 158, 117, 0.12); }
.wa-eed.fout { border-color: var(--error-500); }

/* ══════════ Fout, Turnstile, navigatie ══════════ */
.wa-fout {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(153, 27, 27, 0.18);
    border-radius: 14px;
    background: var(--error-50);
    color: var(--error-500);
    font-size: 14px;
    line-height: 1.5;
}
.wa-fout[hidden] { display: none; }
.wa-turnstile:empty { display: none; }

.wa-nav { display: flex; align-items: center; gap: 12px; }
.wa-nav-vul { flex: 1; }
.wa-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 54px;
    padding: 0 26px;
    border: 0;
    border-radius: 14px;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.wa-knop i { font-size: 20px; }
.wa-knop[hidden] { display: none; }
.wa-knop-primair { background: var(--green-500); color: var(--white); box-shadow: var(--shadow-green); }
.wa-knop-primair:hover { background: var(--green-600); }
.wa-knop-primair:disabled { opacity: 0.6; cursor: wait; }
.wa-knop-stil { background: var(--dark-100); color: var(--dark-600); padding-inline: 20px; }
.wa-knop-stil:hover { background: var(--dark-200); color: var(--dark-900); }
/* De pijlen wijzen in het Arabisch de andere kant op */
:root[dir="rtl"] .wa-knop i { transform: scaleX(-1); }

/* ══════════ Klaar ══════════ */
.wa-klaar { align-items: center; text-align: center; gap: 16px; }
.wa-klaar[hidden] { display: none; }
.wa-klaar-cirkel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--green-50);
    color: var(--green-600);
}
.wa-klaar-cirkel i { font-size: 36px; }
.wa-klaar h2 { font-size: 24px; line-height: 1.25; font-weight: 800; letter-spacing: -0.4px; color: var(--dark-900); }
.wa-klaar-tekst { font-size: 16px; line-height: 1.65; color: var(--dark-600); max-width: 48ch; }
.wa-klaar .wa-hint { max-width: 48ch; }

.wa-al-account { text-align: center; font-size: 14.5px; color: var(--dark-500); }
.wa-al-account a { color: var(--green-600); font-weight: 700; text-decoration: none; }
.wa-al-account a:hover { text-decoration: underline; }

/* ══════════ Smal ══════════ */
@media (max-width: 720px) {
    .wa-waarom { grid-template-columns: minmax(0, 1fr); }
    .wa-waarom li { flex-direction: row; align-items: flex-start; gap: 12px; flex-wrap: wrap; padding: 16px; }
    .wa-waarom-icoon { width: 34px; height: 34px; border-radius: 10px; }
    .wa-waarom strong { flex: 1; min-width: 0; align-self: center; }
    .wa-waarom small { flex-basis: 100%; }
}
@media (max-width: 560px) {
    .wa-hero h1 { font-size: 27px; letter-spacing: -0.5px; }
    .wa-intro { font-size: 15.5px; }
    .wa-kaart { gap: 24px; padding: 24px 20px; border-radius: 20px; }
    .wa-rij, .wa-rij-adres, .wa-keuzes { grid-template-columns: minmax(0, 1fr); }
    .wa-voortgang-tekst { flex-direction: column; align-items: flex-start; gap: 4px; }
    .wa-voortgang-tekst strong { font-size: 18px; }
    .wa-nav { flex-wrap: wrap; }
    .wa-nav-vul { display: none; }
    .wa-knop { flex: 1; min-width: 0; padding-inline: 16px; }
    .wa-knop-primair { order: -1; flex-basis: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
   installateur-papieren.php — de papieren uploaden met de link uit de mail
   ══════════════════════════════════════════════════════════════════════════ */

/* Hoeveel papieren zijn er binnen? Dezelfde balk als de stappen, andere betekenis:
   hier is het geen voortgang door een formulier maar door een lijst. */
.wa-teller { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--dark-500); }
.wa-teller strong { color: var(--dark-900); }

.wa-papieren { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.wa-papier {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1.5px solid var(--dark-200);
    border-radius: 18px;
    background: var(--white);
    transition: border-color 0.15s, background 0.15s;
}
.wa-papier-icoon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--dark-50);
    color: var(--dark-400);
}
.wa-papier-icoon i { font-size: 21px; }
.wa-papier-tekst { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 3px; }
.wa-papier-naam { font-size: 15px; font-weight: 700; color: var(--dark-900); line-height: 1.35; overflow-wrap: anywhere; }
.wa-papier-uitleg { font-size: 13px; line-height: 1.55; color: var(--dark-500); }

/* Verplicht of niet: een woord, geen rood kruis. Het is informatie, geen fout. */
.wa-nodig { font-size: 11.5px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--amber-600); }

/* Binnen, maar nog niet nagekeken. Dit is de eerlijke tussenstand: hij heeft zijn deel
   gedaan en wij moeten nog kijken — en pas na goedkeuring ziet de klant het. */
.wa-papier.wacht { border-color: var(--blue-200); background: var(--blue-50); }
.wa-papier.wacht .wa-papier-icoon { background: var(--white); color: var(--blue-600); }
.wa-papier.klaar { border-color: var(--green-200); background: var(--green-50); }
.wa-papier.klaar .wa-papier-icoon { background: var(--white); color: var(--green-600); }

.wa-stand { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; }
.wa-stand-wacht { color: var(--blue-600); }
.wa-stand-klaar { color: var(--green-600); }
.wa-stand i { font-size: 16px; }

/* De knop is een label om een <input type="file"> heen: die input zelf is in elke browser
   anders en niet te stijlen. */
.wa-kies { position: relative; flex-shrink: 0; }
/* Expliciet, ook al zet deze regel zelf geen `display`: zodra iemand hier ooit een display-waarde
   bij zet, verbergt het `hidden`-attribuut de knop niet meer — en dat valt niemand op. */
.wa-kies[hidden] { display: none; }
.wa-kies input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.wa-kies-knop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 44px;
    padding: 0 16px;
    border: 1.5px solid var(--dark-200);
    border-radius: 12px;
    background: var(--white);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--dark-700);
    white-space: nowrap;
}
.wa-kies input:focus-visible + .wa-kies-knop { box-shadow: 0 0 0 4px rgba(29, 158, 117, 0.12); }
.wa-kies:hover .wa-kies-knop { border-color: var(--dark-300); color: var(--dark-900); }
.wa-kies.bezig .wa-kies-knop { opacity: 0.6; }

/* Geldig tot: alleen bij papieren die verlopen. Smal, want het is een datum. */
.wa-datum { display: flex; flex-direction: column; gap: 5px; flex-shrink: 0; }
.wa-datum label { font-size: 12px; font-weight: 600; color: var(--dark-500); }
.wa-datum input[type="date"] {
    height: 44px;
    padding-inline: 12px;
    border: 1.5px solid var(--dark-200);
    border-radius: 12px;
    background: var(--white);
    color: var(--dark-900);
    font: inherit;
    font-size: 15px;
    outline: none;
}
.wa-datum input:focus { border-color: var(--green-500); box-shadow: 0 0 0 4px rgba(29, 158, 117, 0.12); }

/* Een regel met een eigen melding, zodat een mislukte upload van één papier niet de hele
   pagina rood maakt. */
.wa-papier-fout { flex-basis: 100%; font-size: 13px; line-height: 1.5; color: var(--error-500); }
.wa-papier-fout[hidden] { display: none; }

/* Zelf een certificaat toevoegen */
.wa-blok-kop { font-size: 18px; font-weight: 800; letter-spacing: -0.2px; color: var(--dark-900); }
.wa-toevoegen { display: flex; flex-direction: column; gap: 12px; padding-top: 4px; }
.wa-toevoegen-rij { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.wa-toevoegen-rij .wa-veld { flex: 1; min-width: 180px; }

@media (max-width: 560px) {
    .wa-papier { padding: 14px; }
    .wa-kies, .wa-kies-knop, .wa-datum { width: 100%; }
    .wa-datum input[type="date"] { width: 100%; }
    .wa-papier-tekst { min-width: 100%; }
}

/* ── Afgekeurd papier (migration 064, 2026-10-18) ──────────────────────────
   Een derde stand naast "wacht" en "klaar": het kantoor kon dit papier niet goedkeuren en
   hij moet een nieuwe sturen. Met de reden erbij — zonder te zeggen wát er mis is stuurt hij
   dezelfde fout opnieuw (keuze gebruiker). */
.wa-stand-afgekeurd {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--danger-600, #c0392b);
}

.wa-papier-reden {
    display: block;
    margin-top: 4px;
    padding: 7px 10px;
    border-radius: 8px;
    background: var(--error-50, #fee2e2);
    color: #991b1b;
    font-size: 13px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.wa-papier.afgekeurd { border-color: rgba(192, 57, 43, 0.35); }
.wa-papier.afgekeurd .wa-papier-icoon { background: var(--error-50, #fee2e2); color: var(--danger-600, #c0392b); }

/* Zijn eigen papier weghalen: een stille knop, geen rode waarschuwing — het is gewoon
   opruimen, en de bevestiging staat in de JavaScript. */
.wa-weg {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--dark-200, #e2e8f0);
    border-radius: 10px;
    background: transparent;
    color: var(--dark-400, #94a3b8);
    font-size: 18px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.wa-weg:hover { background: var(--error-50, #fee2e2); color: var(--danger-600, #c0392b); border-color: rgba(192, 57, 43, 0.35); }
.wa-weg:disabled { opacity: 0.5; cursor: default; }

/* ── Een goedgekeurd papier waarvan de datum ontbreekt (2026-10-19) ────────
   Van vóór de regel dat de datum verplicht is. Het veld blijft daarom staan op een papier
   dat verder klaar is: anders kan niemand die datum ooit nog aanvullen — het kantoor ziet
   het veld niet en hij mag er niet meer aan. Invullen mag, wijzigen niet (de server bewaakt
   dat in api-installateur-papieren.php). */
.wa-datum-mist input { border-color: var(--danger-600, #c0392b); }
.wa-datum-nodig {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 600;
    color: var(--danger-600, #c0392b);
}

/* "optioneel" bij een keurmerkregel die nog leeg is (migration 065, 2026-10-19). Rustiger dan
   .wa-nodig: die regel is een aanbod ("heb je ook VCA?"), geen opdracht. */
.wa-optioneel-merk {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--dark-400, #94a3b8);
}

/* Het logo van een keurmerk in plaats van een algemeen icoon (2026-10-19). Hetzelfde vakje,
   maar wit met een dun randje: een logo op het grijze blokje oogt als een fout plaatje, en een
   wit logo op wit zou zweven zonder rand. */
.wa-papier-icoon img { width: 26px; height: 26px; object-fit: contain; display: block; }
.wa-merk-vak,
.wa-papier.wacht .wa-merk-vak,
.wa-papier.klaar .wa-merk-vak,
.wa-papier.afgekeurd .wa-merk-vak {
    background: var(--white);
    border: 1px solid var(--dark-200, #e2e8f0);
}

/* ══════════════════════════════════════════════════════════════════════════
   AANMELDPAGINA — HERBOUWD 2026-10-19
   De pagina is geen wizard meer maar één landingspagina met één echt <form>. Alles hieronder
   is nieuw; de oude stap- en voortgangsregels hierboven blijven staan voor
   installateur-papieren.php, dat dezelfde bouwstenen gebruikt.
   ⚠️ .wa-pil bestond TWEE keer voor twee verschillende dingen (de badge in de hero én de
   radioknoppen voor de afstand). De radio's heten hier daarom .wa-pil-keuze.
   ══════════════════════════════════════════════════════════════════════════ */

/* De pagina mag breder: er staat nu uitleg omheen in plaats van alleen velden. */
.wa-pagina-breed { max-width: 860px; }

.wa-hero-knop { margin-top: 18px; }
.wa-hero-knop .wa-knop { text-decoration: none; }

/* ── Hoe het werkt ───────────────────────────────────────────────────────── */
.wa-uitleg, .wa-geld, .wa-eisen, .wa-faq {
    background: var(--white);
    border: 1px solid var(--dark-100);
    border-radius: 20px;
    padding: 24px;
}
.wa-uitleg h2, .wa-geld h2, .wa-eisen h2, .wa-faq h2 {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.2px;
    color: var(--dark-900);
    margin-bottom: 16px;
}

.wa-stappenlijst { display: grid; gap: 14px; list-style: none; padding: 0; margin: 0; }
@media (min-width: 721px) { .wa-stappenlijst { grid-template-columns: 1fr 1fr; gap: 16px 24px; } }
.wa-stappenlijst li { display: flex; align-items: flex-start; gap: 12px; }
.wa-stapnr {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--green-50);
    color: var(--green-700);
    font-size: 13px;
    font-weight: 800;
}
.wa-stapinhoud { display: flex; flex-direction: column; gap: 3px; }
.wa-stapinhoud strong { font-size: 15px; font-weight: 700; color: var(--dark-900); display: inline-flex; align-items: center; gap: 6px; }
.wa-stapinhoud strong i { font-size: 18px; color: var(--green-600); }
.wa-stapinhoud small { font-size: 13.5px; line-height: 1.55; color: var(--dark-500); }

/* ── Hoe wij verdienen ───────────────────────────────────────────────────── */
.wa-geld-uitleg { font-size: 14.5px; line-height: 1.6; color: var(--dark-600); margin-bottom: 16px; }

/* Het rekenvoorbeeld. Geen percentage (dat spreken we per installateur af), wél wat hij
   overhoudt — dat is het getal waar hij op zit te wachten. */
.wa-rekenvoorbeeld {
    display: flex;
    flex-direction: column;
    gap: 1px;
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
    background: var(--dark-100);
    border-radius: 14px;
    overflow: hidden;
}
.wa-rekenvoorbeeld li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    padding: 12px 14px;
    background: var(--dark-50);
}
.wa-rv-label {
    flex: 0 0 auto;
    min-width: 140px;
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--dark-400);
}
.wa-rv-tekst { flex: 1; min-width: 200px; font-size: 14.5px; line-height: 1.55; color: var(--dark-700); }
.wa-rekenvoorbeeld .wa-rv-uit { background: var(--green-50); }
.wa-rekenvoorbeeld .wa-rv-uit .wa-rv-label { color: var(--green-700); }
.wa-rekenvoorbeeld .wa-rv-uit .wa-rv-tekst { font-weight: 700; color: var(--green-700); }

.wa-nee { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; padding: 0; margin: 0; }
.wa-nee li { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--dark-600); }
.wa-nee i { font-size: 17px; color: var(--danger-600, #c0392b); }

/* ── Wat we van je vragen ────────────────────────────────────────────────── */
.wa-eisen ul { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; margin: 0; }
.wa-eisen li { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; line-height: 1.55; color: var(--dark-600); }
.wa-eisen i { flex: 0 0 auto; font-size: 18px; color: var(--green-600); margin-top: 1px; }

/* ── Het formulier ───────────────────────────────────────────────────────── */
.wa-formulier { display: flex; flex-direction: column; gap: 28px; }
.wa-formulier[hidden] { display: none; }

/* Een <fieldset> brengt eigen rand en marges mee; die willen we hier niet. */
.wa-formulier .wa-blok { border: 0; margin: 0; padding: 0; min-width: 0; }
.wa-formulier legend {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0;
    margin-bottom: 14px;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.2px;
    color: var(--dark-900);
}
.wa-bloknr {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--green-500);
    color: var(--white);
    font-size: 14px;
    font-weight: 800;
}

/* De fout onder het veld zelf: hij hoeft niet naar beneden te zoeken wat er mis is. */
.wa-veldfout {
    display: block;
    margin-top: 5px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.45;
    color: var(--danger-600, #c0392b);
}
.wa-veld input.fout,
.wa-veld select.fout { border-color: var(--danger-600, #c0392b); }

/* Alle fouten bij elkaar, vlak boven de knop: bij het versturen wil je ze in één keer zien. */
.wa-foutlijst {
    padding: 14px 16px;
    border-radius: 14px;
    background: var(--error-50, #fee2e2);
    border: 1px solid rgba(192, 57, 43, 0.3);
    color: #8c2f23;
}
.wa-foutlijst[hidden] { display: none; }
.wa-foutlijst strong { display: block; font-size: 14px; margin-bottom: 6px; }
.wa-foutlijst ul { margin: 0; padding-inline-start: 18px; display: flex; flex-direction: column; gap: 4px; }
.wa-foutlijst a { color: #8c2f23; font-size: 13.5px; }

/* Het logo van een keurmerk in het keuzevak: hetzelfde plaatje dat de klant later bij zijn bod
   ziet, dus hij weet meteen waar hij een vinkje voor zet. */
.wa-keuze-logo { width: 26px; height: 26px; object-fit: contain; display: block; }

/* De radioknoppen voor de afstand. Zelfde vorm als .wa-pil hierboven, maar met een eigen naam:
   .wa-pil was óók de badge in de hero, en twee dingen met één klasse gaan een keer mis. */
.wa-pil-keuze { position: relative; }
.wa-pil-keuze input { position: absolute; opacity: 0; width: 0; height: 0; }
.wa-pil-keuze span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 62px;
    padding: 9px 14px;
    border: 1.5px solid var(--dark-200);
    border-radius: 999px;
    background: var(--white);
    font-size: 14px;
    font-weight: 700;
    color: var(--dark-600);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.wa-pil-keuze span:hover { border-color: var(--dark-300); }
.wa-pil-keuze input:checked + span { border-color: var(--green-500); background: var(--green-50); color: var(--green-700); }
.wa-pil-keuze input:focus-visible + span { box-shadow: 0 0 0 4px rgba(29, 158, 117, 0.12); }


/* Het adresvak zoekt nu echt; vandaar een eigen stand voor "we zijn bezig". */
.wa-adres.bezig { color: var(--dark-500); }

/* ── Versturen ───────────────────────────────────────────────────────────── */
.wa-verstuurbalk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.wa-knop-groot { padding-block: 15px; font-size: 16px; }
.wa-verstuur-hint { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--dark-500); }
.wa-verstuur-hint i { font-size: 16px; }

/* ── Klaar ───────────────────────────────────────────────────────────────── */
.wa-klaar-stappen {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 16px auto 0;
    padding-inline-start: 20px;
    max-width: 420px;
    text-align: start;
    font-size: 14px;
    line-height: 1.55;
    color: var(--dark-600);
}

/* ── Veelgestelde vragen ─────────────────────────────────────────────────── */
.wa-faq-item { border-top: 1px solid var(--dark-100); }
.wa-faq-item:first-of-type { border-top: 0; }
.wa-faq-item summary {
    cursor: pointer;
    padding: 13px 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--dark-900);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.wa-faq-item summary::-webkit-details-marker { display: none; }
.wa-faq-item summary::before {
    content: '+';
    flex: 0 0 auto;
    width: 20px;
    font-size: 18px;
    font-weight: 400;
    color: var(--green-600);
}
.wa-faq-item[open] summary::before { content: '−'; }
.wa-faq-item p { padding: 0 0 14px 28px; font-size: 14px; line-height: 1.6; color: var(--dark-600); }

/* ── Teamgrootte: vier staande kaarten (2026-10-19, was een <select>) ──────────────────────
   Bewust een ANDERE vorm dan de vakgebiedkaarten erboven. Die zijn liggend en zijn vinkjes
   (meerdere mogen), dit is staand en is één keuze — datzelfde groene vinkje op dezelfde
   liggende kaart zou die twee groepen op elkaar laten lijken terwijl ze zich anders gedragen.
   Erft verder alles van .wa-keuze-kaart, dus de rand, het groen bij gekozen en de focusring
   blijven overal op het formulier gelijk. */
.wa-keuzes-team { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wa-keuzes-team .wa-keuze-kaart {
    position: relative;
    /* ⚠️ Zonder dit is de kaart alleen zo hoog als haar eigen inhoud. "Meer dan 10 personen"
       loopt over twee regels en maakt de rij 99px hoog, terwijl de andere drie op 96px
       blijven staan — drie pixels die je niet benoemt maar wel ziet, als een rij die niet
       uitlijnt. Het label is het grid-item en rekt al mee; de kaart hoort dat te volgen. */
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 96px;
    padding: 14px 10px;
    text-align: center;
    line-height: 1.3;
}
.wa-keuzes-team .wa-keuze-kaart > i:first-child { font-size: 26px; }
/* De basiskaart zet flex:1 op de tekst; staand zou die dan rekken en het icoon wegdrukken. */
.wa-keuzes-team .wa-keuze-kaart > span { flex: 0 1 auto; width: 100%; font-size: 13.5px; }
/* Het vinkje in de hoek: in het midden zou het de tekst scheef trekken zodra het verschijnt. */
.wa-keuzes-team .wa-keuze-vink {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    font-size: 15px;
}

/* ⚠️ Deze regel MOET na de media query van 560px staan die .wa-keuzes op één kolom zet:
   .wa-keuzes-team weegt even zwaar, dus de laatste wint. Vier naast elkaar wordt te smal voor
   "Meer dan 10 personen" lang voordat het scherm 560px is; twee naast elkaar leest op een
   telefoon prettiger dan vier onder elkaar. */
@media (max-width: 720px) {
    .wa-keuzes-team { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ══════════════════════════════════════════════════════════════════════════
   installateur-aanmelden.php — het formulier in stappen (nieuw 2026-10-20)
   Het verhaal staat op installateur-worden.php; hier wordt alleen ingevuld.
   ══════════════════════════════════════════════════════════════════════════ */

/* De kop van een stap. Dit is een <h1>: op deze pagina is de stap waar hij in zit het
   onderwerp van de pagina, en niet de productnaam. */
.wa-stap-kop {
    margin: 0;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.3px;
    color: var(--dark-900);
}
.wa-stap-uit {
    margin: -8px 0 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--dark-500);
}
/* Een tussenkopje binnen één stap, bijvoorbeeld boven het vestigingsadres. Geen <h2>: het
   hoort bij de stap en mag de koppenstructuur niet opsplitsen. */
.wa-stap-tussenkop {
    margin: 4px 0 -8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--dark-700);
}

/* Drie velden naast elkaar: postcode, huisnummer en toevoeging. De toevoeging is het
   smalste vak, want er past "A" of "bis" in en verder niets. */
.wa-rij-adres { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr) minmax(0, 0.7fr); }
/* Diplomanaam krijgt de ruimte, het jaartal heeft aan vier tekens genoeg. */
.wa-rij-diploma { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }

/* ── Het bericht dat de papieren per e-mail komen ──────────────────────────
   Hier stonden tot 2026-10-20 vier vinkjes voor de keurmerken. Die zeiden niets wat het
   kantoor niet toch al ziet (migration 065 zet ze bij iedereen vast in het dossier), maar
   wat er WEL toe doet is dat hij weet wat er hierna gebeurt. Blauwgroen en niet amber: dit
   is een mededeling, geen waarschuwing. */
.wa-bericht {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--green-200);
    border-radius: 16px;
    background: var(--green-50);
}
.wa-bericht-cirkel {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--white);
    color: var(--green-600);
    font-size: 22px;
}
.wa-bericht strong { display: block; font-size: 15px; color: var(--dark-900); margin-bottom: 4px; }
.wa-bericht p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--dark-600); }

/* ── Een gewoon vinkje met uitleg (niet de twee handtekeningen: die zijn .wa-eed) ──────── */
.wa-vink { position: relative; display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.wa-vink[hidden] { display: none; }
.wa-vink input { position: absolute; opacity: 0; width: 0; height: 0; }
.wa-vink-vak {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border: 1.5px solid var(--dark-200);
    border-radius: 7px;
    background: var(--white);
    color: var(--white);
    font-size: 15px;
    transition: background 0.15s, border-color 0.15s;
}
.wa-vink-vak i { opacity: 0; transition: opacity 0.15s; }
.wa-vink input:checked + .wa-vink-vak { background: var(--green-500); border-color: var(--green-500); }
.wa-vink input:checked + .wa-vink-vak i { opacity: 1; }
.wa-vink input:focus-visible + .wa-vink-vak { box-shadow: 0 0 0 4px rgba(29, 158, 117, 0.12); }
.wa-vink-tekst { display: flex; flex-direction: column; gap: 2px; }
.wa-vink-tekst strong { font-size: 14.5px; font-weight: 600; color: var(--dark-800); }
.wa-vink-tekst small { font-size: 12.5px; line-height: 1.55; color: var(--dark-400); }

/* ── De diploma's ──────────────────────────────────────────────────────────
   Elk diploma is een eigen kaart, want hij mag er meer dan één opgeven en ze worden ook
   apart beoordeeld. De omlijsting is er zodat bij drie diploma's nog te zien is welk veld
   bij welk papier hoort — zonder die lijn wordt het één lange kolom met vakjes. */
.wa-opl-lijst { display: flex; flex-direction: column; gap: 14px; padding: 0; margin: 0; list-style: none; }
.wa-opl {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    border: 1.5px solid var(--dark-100);
    border-radius: 16px;
    background: var(--white);
}
.wa-opl.fout { border-color: var(--danger-600, #c0392b); }
.wa-opl-kop { display: flex; align-items: center; gap: 10px; }
.wa-opl-nr {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--green-50);
    color: var(--green-700);
    font-size: 13px;
    font-weight: 800;
}
/* De weggooiknop staat ernaast en niet in de hoek: in de hoek valt hij op een telefoon
   samen met de rand van de kaart erboven. */
.wa-opl-weg {
    margin-inline-start: auto;
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--dark-400);
    font-size: 18px;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.wa-opl-weg:hover { background: var(--error-50, #fee2e2); color: var(--danger-600, #c0392b); }
.wa-opl-weg[hidden] { display: none; }

/* Het select-vakje: dezelfde maat en rand als een tekstveld, anders springt de rij waarin
   ze naast elkaar staan uit elkaar. */
.wa-veld select {
    min-height: 52px;
    padding: 0 14px;
    border: 1.5px solid var(--dark-200);
    border-radius: 14px;
    background: var(--white);
    font: inherit;
    font-size: 15px;
    color: var(--dark-900);
    cursor: pointer;
}
.wa-veld select:focus-visible {
    outline: none;
    border-color: var(--green-500);
    box-shadow: 0 0 0 4px rgba(29, 158, 117, 0.12);
}

/* ── De startkaart op de uitlegpagina ──────────────────────────────────────
   De tweede knop naar het formulier, ná "wat we van je vragen": daar besluit iemand te
   beginnen, en dan hoort er geen scrollen tussen te zitten. */
.wa-start { align-items: center; text-align: center; gap: 14px; }
.wa-start h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.2px; color: var(--dark-900); }
.wa-start-tekst { max-width: 46ch; font-size: 15px; line-height: 1.6; color: var(--dark-500); }

@media (max-width: 560px) {
    /* Postcode, huisnummer en toevoeging blijven náást elkaar — ze horen bij één adres, en
       drie volle regels voor zeven tekens leest slechter dan drie smalle vakjes. */
    .wa-rij-adres { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 0.8fr); gap: 10px; }
    .wa-rij-diploma { grid-template-columns: minmax(0, 1fr); }
    .wa-stap-kop { font-size: 19px; }
    .wa-opl { padding: 14px 12px; }
}

/* ⚠️ `hidden` werkt NIET vanzelf op .wa-veld, en dat is gemeten (2026-10-20): de browser zet
   [hidden] op display:none in zijn eigen stylesheet, maar .wa-veld zet display:flex, en een
   regel uit dit bestand wint altijd van de browser. Zonder onderstaande regel stond "In welk
   land?" ook bij een Nederlands diploma open — zichtbaar, leeg, en door de JavaScript
   leeggehouden, dus een vakje dat om invoer vraagt die nergens heen gaat.
   Dezelfde valkuil zit op elke klasse hier die display zet; .wa-stap, .wa-knop, .wa-vink en
   .wa-keuze-kaart hebben daarom allemaal hun eigen [hidden]-regel. */
.wa-veld[hidden] { display: none; }

/* ⚠️ De invoervakken van het adres onderaan uitlijnen (gemeten 2026-10-20). Een label dat op
   een smal scherm over twee regels breekt, duwde zijn eigen invoervak naar beneden terwijl de
   twee ernaast bleven staan — het zag eruit alsof dat veld was weggezakt. De velden hebben
   altijd naast elkaar gestaan; alleen de vakken stonden niet op één lijn. Met end liggen ze
   dat altijd, hoe lang een label ook wordt. */
.wa-rij-adres { align-items: end; }

/* ══════════ Papieren: kiezen → datum → uploaden (2026-10-20) ══════════
   ⚠️ DE DRIE DINGEN DIE BIJ ELKAAR HOREN STAAN NU IN ÉÉN BLOK. Het datumvak, "Bestand kiezen"
   en de nieuwe knop Uploaden stonden los in een flex-regel met flex-wrap; zodra de ruimte krap
   werd zakte eerst de knop en daarna het datumvak onder de tekst, elk op een eigen regel. Als
   groep wikkelen ze samen en blijven ze op één lijn. */
.wa-papier-acties {
    display: flex;
    /* ⚠️ nowrap: de drie horen ALS GROEP te wikkelen, niet los van elkaar. Met wrap ging het
       datumvak alvast op een eigen regel staan zodra de ruimte krap werd, en stonden de twee
       knoppen eronder — precies de verspreiding die we weghaalden. Zo wijkt het hele blok naar
       de regel onder de tekst en blijft het één geheel. Onder 560px mag het wél wikkelen: daar
       is het blok volle breedte (zie de media query verderop). */
    flex-wrap: nowrap;
    align-items: flex-end;   /* het label boven het datumvak maakt dat vak hoger dan de knoppen */
    gap: 10px;
    margin-inline-start: auto;
}
.wa-datum[hidden], .wa-knop[hidden], .wa-gekozen[hidden] { display: none; }

/* De knop is kleiner dan de knoppen op het aanmeldformulier: hij staat in een regel naast een
   datumvak van 44px, niet alleen onderaan een pagina. */
.wa-knop-klein { height: 44px; padding: 0 18px; font-size: 14.5px; border-radius: 12px; }
.wa-knop-klein i { font-size: 18px; }

/* Wat hij gekozen heeft, vóórdat het weggaat. Op een eigen regel onder de knoppen: een
   bestandsnaam kan lang zijn en mag de knoppen niet wegduwen. */
.wa-gekozen {
    flex-basis: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 12px;
    background: var(--green-50);
    border: 1px solid var(--green-200);
    color: var(--green-700);
    font-size: 13.5px;
    font-weight: 600;
}
.wa-gekozen > i { flex: 0 0 auto; font-size: 17px; }
.wa-gekozen-naam { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.wa-gekozen-weg {
    flex: 0 0 auto;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--green-700);
    font-size: 16px;
    cursor: pointer;
}
.wa-gekozen-weg:hover { background: var(--white); color: var(--danger-600, #c0392b); }

@media (max-width: 560px) {
    /* Op een telefoon de volle breedte, maar nog steeds als één blok onder elkaar — niet
       verspreid tussen de tekst door. */
    .wa-papier-acties { width: 100%; margin-inline-start: 0; flex-wrap: wrap; }
    .wa-papier-acties .wa-datum,
    .wa-papier-acties .wa-kies,
    .wa-papier-acties .wa-kies-knop,
    .wa-papier-acties .wa-knop { width: 100%; }
    /* ⚠️ De aanmeldpagina zet op smalle schermen .wa-knop-primair op order:-1 en flex-basis:100%,
       zodat daar de hoofdknop bovenaan de navigatiebalk komt. Dat is een regel voor DIE balk,
       maar hij raakt elke primaire knop — ook deze. Gevolg, gemeten op 375px: "Uploaden" sprong
       boven het datumveld en "Bestand kiezen", dus de knop die als laatste hoort te komen stond
       als eerste. Hier terugzetten naar de normale volgorde. */
    .wa-papier-acties .wa-knop-primair { order: 0; flex: 0 0 auto; }
}