/* ===========================================================================
   De toestemmingsbalk. Zie toestemming.js voor wanneer hij verschijnt.

   Onderaan en over de volle breedte, niet als venster in het midden: die
   laatste dekt de pagina en dwingt een antwoord voor je gelezen hebt waar je
   bent. Alle drie de knoppen (weigeren, keuze bewaren, aanvaarden) zien er
   sinds 7 september 2026 op verzoek bewust hetzelfde uit, ook qua omranding:
   niet enkel weigeren/aanvaarden zoals eerst (dat was al geen smaak maar de
   eis dat een keuze vrij is), maar alle drie, inclusief de middelste. Er
   stond hier een gestippelde rand op de middelste knop om hem als "de
   bevestigknop" te laten opvallen; die asymmetrie is er nu bewust uit.

   Het gele accent gebruikt uitsluitend --accent2 uit pagina.css (het enige
   geel op de hele site, zie de toelichting daar vóór je hier een andere
   gele tint zou toevoegen). Op de twee decoratieve plekken hieronder (de
   bovenrand van het paneel, de onderstreping van de link) is dat dezelfde
   soort bewust-lage-contrast-toepassing als bij .langbanner/.sheet__back
   elders: geen bedieningselement, dus geen 3:1-eis, en dus geen "donkere"
   variant nodig om dat op te lossen.
   =========================================================================== */
.toestemming {
  position: fixed;
  left: var(--gutter); right: var(--gutter); bottom: var(--gutter);
  z-index: 80;
  max-width: 640px;
  margin: 0 auto;
  padding: 26px 28px 22px;
  border-radius: 22px;
  background: var(--surface, #f4f1ea);
  color: var(--text-primary);
  border: 1px solid var(--rule);
  /* De bovenrand krijgt het gele accent, de andere drie randen blijven de
     neutrale --rule hierboven: één gekleurde kant leest als een moment van
     aandacht, alle vier zou als een kader lezen. */
  border-top: 4px solid var(--accent2);
  box-shadow: 0 24px 64px rgba(27, 25, 24, 0.22);
  font-size: var(--size-small);
  line-height: 1.55;
}
.toestemming__kop {
  margin: 0 0 6px;
  font-size: var(--size-h3);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}
.toestemming__kop:focus-visible { outline: 3px solid var(--shu-deep); outline-offset: 4px; }
.toestemming__tekst { margin: 0 0 18px; color: var(--text-body); }

.toestemming__keuzes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
/* Elke keuze als een eigen lichte kaart in plaats van een kaal vakje op de
   paneelkleur: dat maakt "dit zijn twee losse beslissingen" leesbaarder dan
   een aaneengesloten lijst, en geeft de aanraakzone op mobiel meteen mee. */
.toestemming__keuze {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  padding: 12px 14px;
  border-radius: 14px;
  /* Bewust een vaste, palet-onafhankelijke tint (niet --surface-tint: die
     ligt in vrijwel elk palet te dicht bij de paneelkleur zelf, want dat
     paneel gebruikt zijn eigen vaste --surface-terugval, niet het palet).
     Een doorschijnend zwart geeft in elk palet hetzelfde, zichtbare beetje
     onderscheid tussen een keuzerij en de paneelbodem eromheen. */
  background: rgba(27, 25, 24, 0.05);
  transition: background-color 200ms var(--ease);
}
.toestemming__keuze:hover { background: rgba(27, 25, 24, 0.07); }
.toestemming__keuze:has(input:disabled) { cursor: default; }
.toestemming__keuze input {
  /* 18 en niet 13: een vakje dat je op een telefoon moet raken hoort raakbaar
     te zijn, en het staat naast tekst van 14 tot 15. */
  width: 18px; height: 18px; margin: 2px 0 0; flex: none;
  accent-color: var(--shu-deep);
}
.toestemming__keuze input:disabled { opacity: 0.55; cursor: default; }
.toestemming__keuze-tekst { display: flex; flex-direction: column; gap: 2px; }
.toestemming__keuze-uitleg { color: var(--text-body); }

.toestemming__knoppen { display: flex; flex-wrap: wrap; gap: 10px; }
.toestemming__knop {
  flex: 1 1 auto;
  min-height: 46px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1.5px solid var(--btn-bg, #1b1918);
  background: transparent;
  color: var(--text-primary);
  font: inherit; font-size: var(--size-small); font-weight: 500;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
  transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease);
}
.toestemming__knop:hover { background: rgba(27, 25, 24, 0.06); }
.toestemming__knop:focus-visible { outline: 3px solid var(--shu-deep); outline-offset: 2px; }

/* Sinds 8 september 2026: een omkadering voor twee links (cookiebeleid,
   privacybeleid) in plaats van één. De marge staat nu op de omkadering, niet
   meer op de link zelf, zodat beide links op dezelfde hoogte staan in plaats
   van elk hun eigen bovenmarge te duwen. */
.toestemming__links {
  display: flex; flex-wrap: wrap;
  column-gap: 20px; row-gap: 4px;
  margin-top: 14px;
}
.toestemming__link {
  display: inline-block;
  color: var(--text-accent); text-decoration: underline;
  text-decoration-color: var(--accent2);
  text-underline-offset: 3px;
}

@media (max-width: 560px) {
  .toestemming { padding: 20px 18px 16px; }
  .toestemming__knop { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .toestemming__knop, .toestemming__keuze { transition: none; }
}