/**
 * De toestemmingsvraag. Bewust los van het thema: dit moet leesbaar zijn op
 * elke site, ook een met een eigenzinnige stijl. Donkere modus wordt gevolgd,
 * want een wit venster op een donkere site is onaangenaam.
 *
 * Uitgangspunt in de opmaak: weigeren moet net zo makkelijk zijn als
 * accepteren. De knoppen staan daarom naast elkaar en even groot; alleen de
 * kleur verschilt.
 */
.wsc-consent {
    --wsc-vlak: #ffffff;
    --wsc-tekst: #14161b;
    --wsc-zacht: #5b6472;
    --wsc-rand: #e3e7ed;
    --wsc-ja: #14161b;
    --wsc-ja-tekst: #ffffff;
    --wsc-aan: #3aab5c;
    position: fixed;
    z-index: 2147483000;
    color: var(--wsc-tekst);
    font-size: 14px;
    line-height: 1.55;
    font-family: inherit;
}

@media (prefers-color-scheme: dark) {
    .wsc-consent {
        --wsc-vlak: #1b1e24;
        --wsc-tekst: #f2f4f7;
        --wsc-zacht: #a8b0bd;
        --wsc-rand: #333a45;
        --wsc-ja: #f2f4f7;
        --wsc-ja-tekst: #14161b;
    }
}

.wsc-consent--venster {
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(10, 12, 16, .55);
}
.wsc-consent--balk {
    left: 16px;
    right: 16px;
    bottom: 16px;
}

.wsc-consent__paneel {
    background: var(--wsc-vlak);
    border: 1px solid var(--wsc-rand);
    border-radius: 14px;
    padding: 22px 24px;
    width: 100%;
    max-width: 540px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
    max-height: 85vh;
    overflow-y: auto;
}
.wsc-consent--balk .wsc-consent__paneel {
    max-width: 900px;
    margin: 0 auto;
}

.wsc-consent__titel { margin: 0 0 8px; font-size: 18px; line-height: 1.3; }
.wsc-consent__tekst { margin: 0 0 10px; color: var(--wsc-zacht); }
.wsc-consent__link { color: inherit; text-decoration: underline; font-size: 13px; }

.wsc-consent__lijst { margin: 16px 0; border-top: 1px solid var(--wsc-rand); }
.wsc-consent__rij {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px solid var(--wsc-rand);
    cursor: pointer;
}
.wsc-consent__rijtekst { display: block; }
.wsc-consent__uitleg { display: block; color: var(--wsc-zacht); font-size: 13px; margin-top: 2px; }

/* De schakelaar. Een echte checkbox eronder, zodat toetsenbord en
   schermlezers gewoon werken. */
.wsc-consent__schakel { position: relative; flex: 0 0 auto; width: 40px; height: 23px; margin-top: 2px; }
.wsc-consent__schakel input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.wsc-consent__knopje {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--wsc-rand);
    transition: background .15s ease;
    pointer-events: none;
}
.wsc-consent__knopje:before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: var(--wsc-vlak);
    transition: transform .15s ease;
}
.wsc-consent__schakel input:checked + .wsc-consent__knopje { background: var(--wsc-aan); }
.wsc-consent__schakel input:checked + .wsc-consent__knopje:before { transform: translateX(17px); }
.wsc-consent__schakel input:disabled + .wsc-consent__knopje { background: var(--wsc-aan); opacity: .45; }
.wsc-consent__schakel input:focus-visible + .wsc-consent__knopje { outline: 2px solid currentColor; outline-offset: 2px; }

.wsc-consent__knoppen { display: flex; gap: 8px; flex-wrap: wrap; }
.wsc-consent__knop {
    flex: 1 1 auto;
    border: 1px solid var(--wsc-rand);
    background: transparent;
    color: inherit;
    border-radius: 9px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}
.wsc-consent__knop--ja { background: var(--wsc-ja); color: var(--wsc-ja-tekst); border-color: var(--wsc-ja); }
.wsc-consent__knop:hover { filter: brightness(1.08); }

.wsc-consent__voet {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--wsc-rand);
    font-size: 11.5px;
    color: var(--wsc-zacht);
    text-align: right;
    letter-spacing: .01em;
}
.wsc-consent__merk { color: inherit; font-weight: 700; text-decoration: none; }
.wsc-consent__merk:hover { text-decoration: underline; }

.wsc-consent-open { overflow: hidden; }

/* Terugkeerknop, zodat een keuze altijd te herzien is. */
.wsc-consent-penning {
    position: fixed;
    left: 16px;
    bottom: 16px;
    z-index: 2147482000;
    border: 1px solid rgba(128, 128, 128, .35);
    background: rgba(255, 255, 255, .92);
    color: #14161b;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}
@media (prefers-color-scheme: dark) {
    .wsc-consent-penning { background: rgba(27, 30, 36, .92); color: #f2f4f7; }
}

@media (max-width: 560px) {
    .wsc-consent__paneel { padding: 18px 16px; }
    .wsc-consent__knop { flex: 1 1 100%; }
}