/* De gedeelde huisstijl van snelrepareren.nl.
   Hier staan de kleuren, de basisopmaak, de kop en de voettekst. Alles wat een
   pagina daarnaast nodig heeft, staat in die pagina zelf en overschrijft dit,
   omdat het eigen style-blok na dit bestand komt.

   Gemaakt door bouwvoorbereiding/generatoren/gedeelde_stijl.py. */

:root{--groen-50:#F0FDF4;--groen-100:#DCFCE7;--groen-200:#BBF7D0;--groen-300:#86EFAC;--groen-500:#22C55E;--groen:#008934;--groen-800:#007B2E;--marine:#0B1F4E;--marine-100:#E8ECF5;--marine-200:#C5CEE3;--inkt:#111827;--inkt-2:#4A5878;--inkt-3:#616A76;--lijn:#E3E6EE;--vlak:#F6F8FA;--amber:#B45309;--amber-soft:#FEF3C7;--rood:#B91C1C;--rood-soft:#FEE2E2;color-scheme:light}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--inkt);font-family:'Outfit',system-ui,sans-serif;font-size:16px;line-height:1.55}
a{color:inherit}

/* Waar je bent als je met het toetsenbord door de pagina loopt. De browser
   tekent zelf een dun lijntje, maar dat is op de groene vlakken nauwelijks te
   zien, en het verdwijnt overal waar een element zijn eigen focusstijl zet.
   :where() geeft deze regel geen gewicht, dus een component die het zelf regelt
   (de tegels in de kiezer) wint gewoon. Marine haalt over het hele verloop 3,64
   tot 11,33 en op wit 15,91; de norm voor zoiets is 3, dus een kleur volstaat en
   hoeft er niets om te schakelen. */
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--marine);outline-offset:2px}

.num{font-variant-numeric:tabular-nums}
.schets{background:var(--amber-soft);color:var(--amber);font-size:13px;font-weight:600;text-align:center;padding:8px 16px}
.top{display:flex;align-items:center;gap:24px;padding:16px 32px;max-width:1160px;margin:0 auto}
.logo{font-weight:800;font-size:20px;letter-spacing:-.02em;color:var(--marine);text-decoration:none}
.logo i{font-style:normal;color:var(--groen)}
.top nav{display:flex;gap:22px;font-size:15px;color:var(--inkt-2)}
/* Rijen met losse links (de navigatie, de kruimels, de voettekst) hadden een
   klikvlak van 17 tot 23 pixels hoog, terwijl de toegankelijkheidspagina 24 bij
   24 belooft. De breedte was altijd ruim genoeg; het ging alleen om de hoogte.
   Met inline-flex en een minimale hoogte wordt het vlak groter zonder dat de
   tekst verspringt. Links MIDDEN IN EEN ZIN blijven zoals ze zijn: die kun je
   niet oprekken zonder de regelafstand te slopen, en de richtlijn zondert ze
   met zoveel woorden uit. */
.top nav a{text-decoration:none;display:inline-flex;align-items:center;min-height:24px}
.top nav a:hover{color:var(--inkt)}
.btn-groen{background:var(--groen);color:#fff}
.btn-groen:hover{background:var(--groen-800)}
.btn-lijn{background:#fff;color:var(--groen);border-color:var(--groen)}
.kruimels{font-size:13px;color:var(--inkt-3);padding:16px 0 0}
.kruimels a{text-decoration:none;display:inline-flex;align-items:center;min-height:24px}
.kruimels span{margin:0 6px}
footer .jur{display:flex;flex-wrap:wrap;gap:18px;margin-bottom:12px}
footer .jur a{text-decoration:none;color:var(--inkt-2);font-weight:600;display:inline-flex;align-items:center;min-height:24px}
footer .jur a:hover{color:var(--groen)}

/* Een element met het hidden-attribuut hoort weg te zijn, ook als een klas er
   display:flex of display:grid op zet. Zonder !important wint die klas, en dan
   staat er een leeg kader op het scherm waarvan niemand begrijpt waar het
   vandaan komt. */
[hidden]{display:none !important}

/* ---------- gedeelde onderdelen van een winkel ----------

   Het erkenningsmerkje, de betaalmerkjes en de sterren. De opmaak stond drie
   keer los in drie pagina's, en die drie kopieen liepen al uit elkaar: het
   vakje om het logo was 28 pixels op de plaatspagina en 32 in de kiezer, de
   tekst 12,5 tegen 13, het Apple-beeldmerk 17 tegen 19. Dezelfde winkel zag er
   dus per pagina anders uit, en dat is precies wat wij hier aan het rechtzetten
   waren. De opmaak hoort bij de code die het uitstuurt, en die staat in
   data/winkels.js, dus staat de opmaak hier: een keer, voor alle pagina's. */

/* Het merkje: het logo links, de tekst rechts (variant M2). Het logo vervangt
   de merknaam, dus er staat niet twee keer "Apple". */
.merkje{display:inline-flex;align-items:center;gap:10px;border:1.5px solid var(--lijn);background:#fff;
  border-radius:14px;padding:7px 13px 7px 8px;margin:0 6px 6px 0}
.merkje .ic{display:grid;place-items:center;flex:none;width:auto;min-width:32px;height:32px;
  padding:0 8px;border:1px solid var(--lijn);border-radius:9px;background:#fff}
.merkje .ic svg{width:16px;height:16px}
.merkje .tk b{font-size:13px;font-weight:800;color:var(--inkt);line-height:1.2}
/* Apple is een vierkant beeldmerk, Samsung een woordmerk dat drie keer zo breed
   is als hoog. Ze delen alleen een hoogte; de breedte volgt uit de verhouding.
   Een woordmerk in een vierkant vakje wordt onleesbaar klein. */
.merkje .ic svg.lg{display:block;width:auto;height:auto}
.merkje .ic svg.lg-appel{height:19px;color:#000}
.merkje .ic svg.lg-samsung{height:16px}

.betaalrij{display:inline-flex;flex-wrap:wrap;gap:6px;vertical-align:middle}
.betaalmerk{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--lijn);
  border-radius:8px;padding:3px 8px;font-size:12px;font-weight:600;color:var(--inkt-2);background:#fff}
.betaalmerk svg{width:15px;height:15px;flex:none}

/* Het cijfer van Google als sterren. Twee rijen op elkaar: de onderste leeg, de
   bovenste vol en afgesneden op het percentage. Zo klopt een 8,7 op de pixel in
   plaats van afgerond naar vier of vijf hele sterren. Allebei flex, want met
   inline-block hangen ze aan de basislijn en lopen ze bij de kleinste
   verschuiving uit elkaar. De namen beginnen met "sterren" omdat .leeg op de
   kiezer al de lege staat van de winkellijst is. */
.sterren{position:relative;display:inline-flex;line-height:1;vertical-align:-2px}
.sterren .sterrenleeg,.sterren .sterrenvol{display:flex}
.sterren .sterrenleeg{color:var(--marine-100)}
.sterren .sterrenvol{position:absolute;left:0;top:0;overflow:hidden;color:#F5B50A}
.sterren svg{width:15px;height:15px;display:block;flex:none}

/* ---------- minder beweging ----------

   De toegankelijkheidspagina belooft: "Animaties zijn klein en kort, en zetten
   zichzelf uit als je in je systeem hebt aangegeven dat je minder beweging
   wilt." Dat werd nergens gelezen. Vijftig pagina's hebben een animatie of een
   overgang, en `html{scroll-behavior:smooth}` hierboven laat de pagina ook nog
   glijden bij een sprong naar een anker.

   Wie deze instelling aanzet, doet dat vaak omdat beweging misselijk maakt of
   duizelig, dus dit is geen kleinigheid. Wij zetten alles stil in plaats van op
   nul: een animatie die nul milliseconden duurt vuurt zijn afloop nog wel af, en
   code die op dat einde wacht blijft dus gewoon werken. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- klikvlak van losstaande links ----------

   Een link die op zichzelf staat (een actielink, een terugverwijzing, een
   inhoudsopgave) is een knop in ander jasje en hoort dus een klikvlak van
   minstens 24 pixels hoog te hebben. Ze waren 15 tot 23. Met :where() weegt
   deze regel nul, dus elke pagina kan hem gewoon overschrijven en er verandert
   niets aan de kleuren of de letters; alleen het vlak wordt groter.

   Links MIDDEN IN EEN ZIN staan hier expres niet bij. Die kun je niet oprekken
   zonder de regelafstand te verpesten, en de richtlijn zondert ze ook uit. */
:where(.link,.terug,.mail,.inhoud a,.uitloggen,.later,.score .bron a,.meta a,footer a){
  display:inline-flex;align-items:center;min-height:24px}

/* ---------- de overslaanlink ----------

   Elke pagina begint met zes navigatielinks. Wie met het toetsenbord werkt,
   moest daar op ELKE pagina doorheen voor hij bij de inhoud was. Deze link
   staat er nu als eerste en springt eroverheen.

   Hij is onzichtbaar tot je hem met de tab-toets bereikt. Niet met display:none
   of visibility:hidden, want dan haalt hij ook geen focus meer; hij staat buiten
   beeld en komt tevoorschijn zodra hij aan de beurt is. */
.naar-inhoud{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--marine);color:#fff;font-weight:600;font-size:15px;
  padding:12px 20px;border-radius:0 0 14px 0;text-decoration:none;
}
.naar-inhoud:focus{left:0}
main:focus{outline:none}

/* ----------------------------------------------------------------------------
   Aanvraagvenster (verzoekDialoog): velden netjes en mobiel-vriendelijk.

   Het gedeelde .veld staat elders op max-width:300px (voor formulieren met twee
   kolommen naast elkaar). In dit venster staat elk veld op een eigen regel en
   hoort het de volle breedte te vullen, gelijk met de keuzechips en de knoppen.
   Deze selectors zijn specifieker dan het inline .veld, dus ze winnen ongeacht
   de laadvolgorde. font-size 16px voorkomt de auto-inzoom van iOS bij focus.
---------------------------------------------------------------------------- */
.mdlg .veld{position:relative;display:block;flex:none;max-width:none;margin:12px 0 0}
.mdlg .veld input{width:100%;box-sizing:border-box;padding:22px 14px 8px;margin:0;
  border:1.5px solid var(--lijn);border-radius:12px;
  font:inherit;font-size:16px;color:var(--inkt);background:#fff}
.mdlg .veld input:focus{outline:none;border-color:var(--groen);
  box-shadow:0 0 0 4px var(--groen-100,#DCFCE7)}
.mdlg .veld span{position:absolute;left:14px;top:16px;font-size:16px;color:var(--inkt-3);
  transition:top .15s,font-size .15s;pointer-events:none}
.mdlg .veld input:focus+span,
.mdlg .veld input:not(:placeholder-shown)+span{top:7px;font-size:11px;color:var(--groen);font-weight:600}
/* De keuzeblokken, chips en vinkjes van het aanvraagvenster. Deze stonden alleen
   inline in de reparatiekiezer; hier compleet in basis.css, zodat het venster ook
   klopt op pagina's die het pas later gebruiken (de plaatspagina). Anders toont de
   fieldset zijn standaardrand en blijven de radioknoppen zichtbaar.

   De chips (wanneer / hoe wil je antwoord) zijn exact even breed en even hoog:
   flex:1 1 0 verdeelt de ruimte gelijk, min-width:0 laat een langer label binnen
   de chip afbreken, en de span vult de chip en centreert de tekst. */
.mdlg .vzblok{border:0;padding:0;margin:16px 0 0}
.mdlg .vzblok legend{padding:0;font-size:12.5px;font-weight:700;color:var(--inkt-2);margin-bottom:7px}
.mdlg .vzblok .vzrij{display:flex;gap:6px;flex-wrap:nowrap}
.mdlg .vzblok .vzkeus{flex:1 1 0;min-width:0;display:flex}
.mdlg .vzblok .vzkeus input{position:absolute;opacity:0;width:0;height:0}
.mdlg .vzblok .vzkeus span{flex:1;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:10px 6px;min-height:46px;line-height:1.2;
  border:1.5px solid var(--lijn);border-radius:12px;background:#fff;
  font-size:13.5px;color:var(--inkt);cursor:pointer}
.mdlg .vzblok .vzkeus input:checked+span{border-color:var(--groen);
  background:var(--groen-100,#DCFCE7);color:var(--groen-800);font-weight:600}
.mdlg .vzblok .vzkeus input:focus-visible+span{outline:2px solid var(--groen);outline-offset:2px}
.mdlg .vzblok .vzvink{display:flex;align-items:center;gap:9px;padding:11px;
  border:1.5px solid var(--lijn);border-radius:12px;margin-bottom:6px;font-size:14px;cursor:pointer}
.mdlg .vzblok .vzvink input{width:17px;height:17px;padding:0;margin:0;border:0;accent-color:var(--groen);flex:none}
.mdlg .knoppen{margin-top:18px}