/*
 * Zelfscan vlootelektrificatie - minimale reset.
 * De volledige styling zit inline in scan.js (1-op-1 uit ontwerp/Zelfscan.dc.html).
 */
html, body { margin: 0; padding: 0; }
body {
    background: #fff;
    font-family: "Trebuchet MS", sans-serif;
    color: #1C1C1B;
    -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }
button { font-family: "Trebuchet MS", sans-serif; }
input  { font-family: "Trebuchet MS", sans-serif; }
a         { color: #c4151c; }
a:hover   { color: #4b1014; }

/* Timerbalk-animatie voor het duidingscherm */
@keyframes duidingLoop {
    from { width: 0; }
    to   { width: 100%; }
}

/* Hover-states en transities (designupdate september 2026). Inline styles
   kennen geen :hover, vandaar klassen met !important. Regel: gevuld gaat rood
   naar donkerrood, outline gaat wit naar rood, tekstlink gaat grijs naar rood,
   keuzekaart krijgt een rode rand. Nooit naar zwart. */
.zs-vol, .zs-lijn, .zs-tekst, .zs-kaart {
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
/* Alleen op apparaten met een echte muisaanwijzer. Op een touchscreen blijft
   :hover na een tik hangen, waardoor er steeds een antwoord rood omkaderd
   leek te staan. */
@media (hover: hover) and (pointer: fine) {
    .zs-vol:hover   { background: #4b1014 !important; }
    .zs-lijn:hover  { background: #c4151c !important; border-color: #c4151c !important; color: #fff !important; }
    .zs-tekst:hover { color: #c4151c !important; }
    .zs-kaart:hover { border-color: #c4151c !important; }
}
button:disabled { cursor: not-allowed; opacity: .7; }

/* Toetsenbordfocus blijft zichtbaar en krijgt niet de hover-behandeling */
button:focus-visible, input:focus-visible, a:focus-visible {
    outline: 3px solid #1C1C1B;
    outline-offset: 3px;
}

/* Mobiele weergave. De styling zit inline in scan.js (1-op-1 uit het ontwerp),
   dus alles wat hier anders moet is een override met !important. De klassen in
   scan.js zijn alleen aanhaakpunten en veranderen niets aan de desktopweergave. */
@media (max-width: 640px) {
    /* Alle antwoorden onder elkaar, niet in twee kolommen, en net als de rest
       tot de rand van de container. */
    .zs-opties { grid-template-columns: 1fr !important; padding-left: 0 !important; padding-right: 0 !important; }

    /* De keuze Nederlands of Vlaams bedrijf onder elkaar. Zonder dit krimpen de
       twee knoppen mee en blijven ze naast elkaar staan. De flex-basis van
       220px uit het ontwerp geldt in een kolom voor de hoogte, vandaar dat de
       knoppen hier op automatische hoogte gaan. */
    .zs-landkeuze { flex-direction: column !important; }
    .zs-landkeuze > button { flex: 0 0 auto !important; width: 100% !important; }

    /* Antwoordtegels iets minder hoog, zodat er meer in beeld past zonder dat
       de tikdoelen te klein worden. */
    .zs-kaart { min-height: 64px !important; padding: 16px 18px !important; }

    /* Teksten en knoppen buiten het donkerrode kader lopen door tot de rand
       van de container: geen zijmarge. */
    .zs-blok       { padding-left: 0 !important; padding-right: 0 !important; }
    .zs-blok-marge { margin-left: 0 !important; margin-right: 0 !important; }

    /* Invulvelden van het slotformulier onder elkaar in plaats van naast elkaar. */
    .zs-velden { grid-template-columns: 1fr !important; }
}

@media (prefers-reduced-motion: reduce) {
    .zs-vol, .zs-lijn, .zs-tekst, .zs-kaart { transition-duration: 0s; }
}