/* Keizer Karel cookiemelding — gedeelde opmaak. Per site alleen de variabelen in :root aanpassen (kk-site.css). */
:root {
    --kk-primary: #252a31;        /* knoppen, titels */
    --kk-primary-hover: #000;
    --kk-accent: #888;            /* lijn bovenaan, focus, schakelaar aan */
    --kk-soft: #f4f4f4;           /* categorieblokken, footer */
    --kk-soft-2: #e8e8e8;         /* randen, hover */
    --kk-text: #252a31;
    --kk-muted: #5b5f66;
    --kk-font: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --kk-font-head: var(--kk-font);
    --kk-radius-btn: 4px;
    --kk-radius-box: 12px;
    --kk-btn-transform: none;
}

#cc-main {
    --cc-font-family: var(--kk-font);
    --cc-bg: #fff;
    --cc-primary-color: var(--kk-text);
    --cc-secondary-color: var(--kk-muted);

    --cc-btn-primary-bg: var(--kk-primary);
    --cc-btn-primary-color: #fff;
    --cc-btn-primary-border-color: var(--kk-primary);
    --cc-btn-primary-hover-bg: var(--kk-primary-hover);
    --cc-btn-primary-hover-color: #fff;
    --cc-btn-primary-hover-border-color: var(--kk-primary-hover);

    --cc-btn-secondary-bg: var(--kk-soft);
    --cc-btn-secondary-color: var(--kk-primary);
    --cc-btn-secondary-border-color: var(--kk-soft-2);
    --cc-btn-secondary-hover-bg: var(--kk-soft-2);
    --cc-btn-secondary-hover-color: var(--kk-primary-hover);
    --cc-btn-secondary-hover-border-color: var(--kk-soft-2);

    --cc-btn-border-radius: var(--kk-radius-btn);
    --cc-modal-border-radius: var(--kk-radius-box);
    --cc-separator-border-color: var(--kk-soft-2);
    --cc-link-color: var(--kk-primary);
    --cc-overlay-bg: rgba(20, 20, 24, .45);

    --cc-toggle-on-bg: var(--kk-primary);
    --cc-toggle-off-bg: #b5b5ba;
    --cc-toggle-readonly-bg: var(--kk-soft-2);
    --cc-toggle-on-knob-bg: #fff;
    --cc-toggle-off-knob-bg: #fff;
    --cc-toggle-enabled-icon-color: var(--kk-primary);
    --cc-toggle-disabled-icon-color: #b5b5ba;
    --cc-toggle-readonly-knob-bg: #fff;
    --cc-toggle-readonly-knob-icon-color: var(--kk-primary);

    --cc-cookie-category-block-bg: var(--kk-soft);
    --cc-cookie-category-block-border: var(--kk-soft-2);
    --cc-cookie-category-block-hover-bg: var(--kk-soft-2);
    --cc-cookie-category-block-hover-border: var(--kk-soft-2);
    --cc-cookie-category-expanded-block-bg: transparent;
    --cc-cookie-category-expanded-block-hover-bg: var(--kk-soft);

    --cc-footer-bg: var(--kk-soft);
    --cc-footer-color: var(--kk-muted);
    --cc-footer-border-color: var(--kk-soft-2);
}

/* Sommige sites zetten iets als 'iframe, svg { height: 408px }' — hier terugzetten */
#cc-main svg {
    height: auto !important;
    max-width: none;
}
#cc-main .cm {
    box-shadow: 0 18px 50px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .08);
    border-top: 4px solid var(--kk-accent);
    max-width: 26rem;
}
#cc-main .pm {
    border-top: 4px solid var(--kk-accent);
}
#cc-main .cm__title,
#cc-main .pm__title {
    font-family: var(--kk-font-head) !important;
    font-weight: 700 !important;
    font-size: 21px !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--kk-primary) !important;
    margin: 0;
}
#cc-main .cm__desc,
#cc-main .pm__section-desc {
    line-height: 1.6;
}
#cc-main .cm__btn,
#cc-main .pm__btn {
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: var(--kk-btn-transform);
    min-height: 44px;
}
#cc-main .cm__btn[data-role="show"] {
    background: transparent;
    border-color: transparent;
    color: var(--kk-primary);
    text-transform: none;
    letter-spacing: 0;
    text-decoration: underline;
    text-decoration-color: var(--kk-accent);
    text-underline-offset: 4px;
}
#cc-main .cm__btn[data-role="show"]:hover {
    background: transparent;
    border-color: transparent;
    color: var(--kk-primary-hover);
}
#cc-main .pm__badge {
    background: var(--kk-soft-2);
    color: var(--kk-primary);
}

/* Knop linksonder om de keuze te wijzigen */
#kk-cc-revisit {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 980;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 2px solid var(--kk-accent);
    border-radius: 50%;
    background: var(--kk-primary);
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .15s ease, box-shadow .15s ease;
}
#kk-cc-revisit svg {
    width: 22px;
    height: 22px !important;
}
#kk-cc-revisit:hover,
#kk-cc-revisit:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
    outline: none;
}
#kk-cc-revisit:focus-visible {
    box-shadow: 0 0 0 3px var(--kk-accent);
}
.show--consent #kk-cc-revisit,
.show--preferences #kk-cc-revisit {
    display: none;
}
@media print {
    #kk-cc-revisit { display: none; }
}