/*
 * Cookiebanner van site-core (partials/consent-banner). Eigen huisstijl via CSS-variabelen, bv. in de layout:
 *   :root { --consent-accent: #7563ff; --consent-radius: 16px; --consent-font: inherit; }
 * Zonder variabelen volgt hij de variabelen van site-core (--primary, --bg, --text, --border, --radius).
 */
.consent {
    --c-bg: var(--consent-bg, var(--bg, #fff));
    --c-text: var(--consent-text, var(--text, #18181b));
    --c-muted: var(--consent-muted, #52525b);
    --c-accent: var(--consent-accent, var(--primary, #18181b));
    --c-on-accent: var(--consent-on-accent, #fff);
    --c-border: var(--consent-border, var(--border, #e4e4e7));
    --c-radius: var(--consent-radius, var(--radius, 10px));
    --c-overlay: var(--consent-overlay, rgba(9, 9, 11, .72));
    position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
    padding: max(16px, env(safe-area-inset-top, 0px)) 16px max(16px, env(safe-area-inset-bottom, 0px));
    background: var(--c-overlay); overflow-y: auto; overscroll-behavior: contain;
    font-family: var(--consent-font, inherit); color: var(--c-text);
}
.consent[hidden] { display: none; }
.consent__panel { width: min(640px, 100%); padding: clamp(20px, 4vw, 32px); display: grid; gap: 20px; background: var(--c-bg); color: var(--c-text);
    border-radius: var(--c-radius); box-shadow: 0 10px 30px rgba(0, 0, 0, .15); text-align: left; }
.consent__title { font-size: clamp(22px, 4vw, 28px); line-height: 1.2; margin: 0 0 8px; color: inherit; }
.consent__text { margin: 0; font-size: 15px; line-height: 1.6; }
.consent__more { color: inherit; text-decoration: underline; }
.consent__details { display: grid; gap: 10px; }
.consent__details[hidden] { display: none; }
.consent__option { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; padding: 12px; border: 1px solid var(--c-border);
    border-radius: var(--c-radius); font-size: 14px; line-height: 1.5; cursor: pointer; }
.consent__option strong { display: block; font-size: 15px; }
.consent__option span { color: var(--c-muted); }
.consent__option strong { color: var(--c-text); }
.consent__option input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--c-accent); }
.consent__option input:disabled { cursor: not-allowed; }
/* Weigeren en accepteren even groot en even opvallend (weigeren net zo makkelijk als accepteren) */
.consent__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.consent__actions--3 { grid-template-columns: 1fr 1fr 1fr; }
.consent__btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 10px 16px;
    border: 2px solid var(--c-accent); border-radius: var(--c-radius); background: var(--c-accent); color: var(--c-on-accent);
    font: inherit; font-weight: 600; line-height: 1.2; text-align: center; cursor: pointer; }
.consent__btn--secondary { background: transparent; color: var(--c-text); }
.consent__btn[hidden] { display: none; }
.consent__btn:focus-visible, .consent-fab:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; }
@media (max-width: 520px) { .consent__actions, .consent__actions--3 { grid-template-columns: 1fr; } }
html:not(.consent-chosen):has(.consent:not([hidden]):not(.consent--inline)) { overflow: hidden; }
.consent-chosen .consent { display: none; }
/* Balk onderin (juridische pagina's of instelling "balk"): niet blokkerend, de pagina blijft leesbaar */
.consent--inline { inset: auto 0 0 0; background: none; padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px)); pointer-events: none; }
.consent--inline .consent__panel { width: min(760px, 100%); pointer-events: auto; border: 1px solid var(--c-border); }
.consent-fab {
    position: fixed; z-index: 80; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
    background: var(--consent-bg, var(--bg, #fff)); color: var(--consent-accent, var(--primary, #18181b));
    border: 1px solid var(--consent-border, var(--border, #e4e4e7)); box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
}
.consent-fab[hidden] { display: none; }
@media print { .consent, .consent-fab { display: none !important; } }