/* Cookiebanner */
.bb-cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; padding: 12px; display: flex; justify-content: center; pointer-events: none; }
.bb-cookie__card { pointer-events: auto; width: min(720px, 100%); background: var(--bb-white); border: 2px solid var(--border-card); border-radius: var(--radius-xl); box-shadow: 0 20px 50px rgba(6, 69, 48, 0.28); padding: 20px 22px; max-height: calc(100vh - 24px); overflow-y: auto; animation: bb-cookie-in 320ms var(--ease-out) both; }
@keyframes bb-cookie-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.bb-cookie__top { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.bb-cookie__icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bb-mint); color: var(--bb-green-forest); }
.bb-cookie__card h2 { margin: 0 0 6px; font-size: 21px; }
.bb-cookie__card p { margin: 0; font-size: var(--fs-small); color: var(--fg-2); line-height: 1.55; text-wrap: pretty; }
.bb-cookie__card a { color: var(--bb-green-forest); font-weight: 700; }
.bb-cookie__cats { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bb-cookie__cat { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; background: var(--bb-cream); border: 2px solid var(--border-card); border-radius: var(--radius-lg); padding: 12px 14px; cursor: pointer; }
.bb-cookie__cat.is-vast { cursor: default; opacity: 0.9; }
.bb-cookie__cat input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--bb-green-forest); }
.bb-cookie__cat b { display: block; font-size: var(--fs-small); color: var(--bb-green-dark); }
.bb-cookie__cat b em { font-style: normal; font-weight: 400; color: var(--fg-muted); }
.bb-cookie__cat .d { display: block; margin-top: 2px; font-size: var(--fs-caption); color: var(--fg-2); line-height: 1.5; }
.bb-cookie__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.bb-cookie__btn { min-height: 46px; }
.bb-cookie__link { min-height: 44px; padding: 8px 4px; border: 0; background: none; font: 700 var(--fs-small) var(--font-body); color: var(--bb-green-forest); text-decoration: underline; cursor: pointer; }
.bb-cookie__link:hover { color: var(--bb-green-dark); }
.bb-cookie__settings { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: none; }
.bb-cookie__settings:hover { text-decoration: underline; }
/* 'Alles accepteren' is de voorkeurskeuze en moet de aandacht trekken. Die knop
   staat daarom in het vet en twee pixels groter dan de andere knoppen, op mobiel
   zowel als op de desktop. De andere knoppen in de melding zijn 16 pixels, en op
   schermen tot 720 pixels 15, dus deze wordt 18 respectievelijk 17. */
.bb-cookie__acts .bb-cookie__btn.bb-btn--yellow { font-size: 18px; font-weight: 700; }
@media (max-width: 720px) {
  .bb-cookie__acts .bb-cookie__btn.bb-btn--yellow { font-size: 18px; }
}

/* Op mobiel staan de knoppen onder elkaar en zijn zij allemaal exact even breed: de
   rij wordt één kolom over de volle breedte van de kaart, en elke knop vult die
   kolom. Zo lopen zij op elk telefoonformaat precies gelijk, ongeacht hoe lang de
   knopteksten zijn. */
@media (max-width: 619px) {
  .bb-cookie__acts { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .bb-cookie__acts > * { width: 100%; justify-content: center; text-align: center; }
}
@media (min-width: 620px) { .bb-cookie { padding: 20px; } .bb-cookie__card { padding: 24px 28px; } }
@media (prefers-reduced-motion: reduce) { .bb-cookie__card { animation: none; } }