/* Eigen cookiebanner; maten gemeten op het origineel. Zie scripts/herbouw/COOKIES.md */
.cookie-scherm { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,.7); display: grid; place-items: center; }
.cookie-venster { outline: none; width: 525px; max-width: 100%; max-height: calc(100vh - 20px); overflow-y: auto; display: grid; gap: 10px; padding: 15px 20px; background: #fff; color: #222; border-radius: 12px; box-shadow: 0 10px 20px rgba(0,0,0,.19), 0 6px 6px rgba(0,0,0,.23); }
.cookie-kop { display: grid; grid-template-columns: 100px 1fr 100px; align-items: center; margin-bottom: 10px; }
.cookie-logo { width: 100px; height: auto; }
.cookie-titel { margin: 0; font-size: 15px; font-weight: 500; line-height: 19.2px; text-align: center; }
.cookie-sluit { justify-self: end; width: 20px; height: 20px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 30px; font-weight: 700; line-height: 16px; }
.cookie-tekst { margin: 0 0 5px; font-size: 12px; line-height: 18px; }
.cookie-categorie { background: rgba(239,239,239,.5); margin-bottom: 10px; }
.cookie-categorie:last-child { margin-bottom: 0; }
.cookie-categorie-kop { display: grid; grid-template-columns: 1fr auto 15px; align-items: center; gap: 10px; padding: 10px; }
.cookie-categorie-naam { font-size: 14px; font-weight: 500; line-height: 19.2px; }
.cookie-altijd { font-size: 12px; font-weight: 500; color: #008000; }
.cookie-uitleg { padding: 0 10px 10px; font-size: 12px; line-height: 18px; }
.cookie-schakelaar { position: relative; display: block; width: 28px; height: 15px; }
.cookie-schakelaar input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cookie-schakelaar span { position: absolute; inset: 0; border-radius: 10px; background: #acacac; pointer-events: none; transition: background .15s; }
.cookie-schakelaar span::after { content: ""; position: absolute; left: 2px; top: 2px; width: 11px; height: 11px; border-radius: 10px; background: #fff; transition: transform .15s; }
.cookie-schakelaar input:checked + span { background: #030303; }
.cookie-schakelaar input:checked + span::after { transform: translateX(13px); }
.cookie-uitklap { width: 15px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; line-height: 0; }
.cookie-uitklap svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.4; transition: transform .15s; }
.cookie-uitklap[aria-expanded="true"] svg { transform: rotate(180deg); }
.cookie-knoppen { display: flex; gap: 10px; margin-top: 10px; }
.cookie-knop { flex: 1 1 0; white-space: nowrap; min-height: 45px; padding: 10px; font-family: inherit; font-size: 15px; font-weight: 500; line-height: 20px; text-align: center; border: 1px solid #333; border-radius: 3px; background: #fff; color: #333; cursor: pointer; }
.cookie-knop--ja { background: #f7e61c; border-color: #f7e61c; color: #030303; font-weight: 700; }
.cookie-knop--ja:hover, .cookie-knop--bewaren:hover { background: #e8d70f; border-color: #e8d70f; }
.cookie-knop--nee { border-color: #fff; }
/* Optiesweergave: "Voorkeuren bewaren" is daar de hoofdactie, de
   alles-of-niets-knoppen worden secundair (zij negeren de vakjes). */
.cookie-knop--bewaren { background: #f7e61c; border-color: #f7e61c; color: #030303; font-weight: 700; }
.cookie-knoppen--opties .cookie-knop--ja { background: #fff; border-color: #333; color: #333; font-weight: 500; }
.cookie-knoppen--opties .cookie-knop--ja:hover { background: #f2f2f2; border-color: #333; }
.cookie-knop--nee:hover, .cookie-knop--nee:focus-visible { text-decoration: underline; }
.cookie-knop:focus-visible, .cookie-sluit:focus-visible, .cookie-uitklap:focus-visible, .cookie-schakelaar input:focus-visible + span { outline: 2px solid #030303; outline-offset: 2px; }
.cookie-links { display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 21px; }
.cookie-links a { font-size: 12px; line-height: 14px; color: #444; text-decoration: underline; }
/* Klein rond tabje linksonder: de keuze is bewaard, dus de cookie-UI
   hoort uit de weg (de eerdere brede witte knop las als een banner die
   niet wegging). */
.cookie-beheer {
    position: fixed; left: 14px; bottom: 14px; z-index: 9998;
    width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
    background: #030303; color: #f7e61c;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(3, 3, 3, .35);
}
.cookie-beheer svg { width: 22px; height: 22px; fill: currentColor; }
@media (hover: hover) { .cookie-beheer:hover { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .cookie-beheer:hover { transform: none; } }
.cookie-beheer:focus-visible { outline: 2px solid #030303; outline-offset: 2px; }
@media (max-width: 767px) {
    .cookie-kop { grid-template-columns: 140px 1fr 20px; }
    .cookie-logo { width: 140px; }
}
@media (max-width: 768px) {
    .cookie-venster { width: 100%; gap: 2px; }
    .cookie-kop, .cookie-knoppen { margin: 0; }
    .cookie-knoppen { flex-direction: column; }
}