/* cookies.css - cookiemodal op de publieke site (Figma Cookiemodal
   5960:7647 desk 440 / 5960:8111 tab 400 / 5960:8548 mob 320, overlay
   5961:19424-26). Tokens uit home.css waar die geladen is; fallbacks
   voor login en wachtwoord-herstellen. Gecentreerde kaart, geen balk.
   Radius is Maat/Kaart/Radius 14px. Accepteren is Kleur/Vlak/Actie
   (inktblauw), scoped via .knop.actie - globale .knop op de site blijft
   mer-rood Primair. Schaduw/Modal. */
.cookiebar-hoek{
  position:fixed;inset:0;z-index:80;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  box-sizing:border-box;
  background:color-mix(in srgb, var(--vlak--omgekeerd) 55%, transparent);
}
.cookiebar{
  box-sizing:border-box;
  display:flex;flex-direction:column;align-items:stretch;gap:8px;
  width:440px;max-width:100%;
  padding:24px;
  background:var(--vlak--kaart);
  border-radius:var(--maat-kaart-radius);
  box-shadow:var(--stijl-schaduw-modal),
             0 0 0 var(--maat-lijn-1) var(--rand--standaard);
}
.cookiebar-tekst{
  display:flex;flex-direction:column;gap:8px;
  margin:0;width:100%;
  font:var(--font-gewicht) var(--schaal-pg-sm)/var(--schaal-pg-sm-regel) var(--font-2);
  color:var(--tekst--gedempt);
}
.cookiebar-tekst p{margin:0}
.cookiebar-knoppen{
  display:flex;align-items:center;justify-content:flex-end;
  flex-wrap:nowrap;gap:8px;width:100%;
}
/* Zelfde .knop / .knop.omlijnd als home.css, scoped zodat login geen
   globale knop-class hoeft. Label-md 16/24, knop-radius 10, hoogte 40.
   Breedtes uit Figma: Weigeren 111, Accepteren 127. Nooit krimpen.
   Accepteren: .knop.actie = Kleur/Vlak/Actie, niet mer-rood Primair. */
.cookiebar .knop{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  box-sizing:border-box;flex:0 0 auto;
  height:40px;padding:0 20px;
  font:var(--font-gewicht) var(--schaal-label-md)/var(--schaal-label-md-regel) var(--font-2);
  border:0;border-radius:var(--maat-knop-radius);cursor:pointer;
  transition:background .15s;white-space:nowrap;
}
.cookiebar .knop.actie{
  width:127px;min-width:127px;
  background:var(--vlak--secundair);color:var(--tekst--omgekeerd);
}
.cookiebar .knop.actie:hover{background:var(--vlak--secundair-hover)}
.cookiebar .knop.actie:focus-visible{outline:var(--maat-lijn-focus) solid var(--vlak--secundair);outline-offset:2px}
.cookiebar .knop.omlijnd{
  width:111px;min-width:111px;
  background:var(--vlak--kaart);color:var(--tekst--standaard);
  border:var(--maat-lijn-1) solid var(--rand--standaard);font-weight:var(--font-gewicht);font-size:var(--schaal-label-md);
}
.cookiebar .knop.omlijnd:hover{background:var(--vlak--pagina)}
.cookiebar .knop.omlijnd:focus-visible{outline:var(--maat-lijn-focus) solid var(--rand--standaard);outline-offset:2px}

@media(max-width:860px){
  .cookiebar{width:400px}
}
@media(max-width:640px){
  .cookiebar-hoek{padding:16px}
  .cookiebar{width:320px;padding:16px}
}