/*
 * Toestemmingsbanner voor cookies.
 *
 * Onderaan het scherm, over de inhoud heen maar zonder die te blokkeren: geen
 * donkere overlay en geen focusval. De site blijft leesbaar terwijl de vraag
 * openstaat. Dat is een bewuste keuze — een banner die de site gijzelt tot je
 * "accepteren" klikt, levert geen vrije toestemming op.
 */

.wc-cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 600; /* boven de chatwidget (200/500): de vraag mag niet bedekt raken */
    background: var(--wc-canvas, #FAFAF9);
    border-top: 1px solid var(--wc-stone-border, #E7E5E4);
    box-shadow: 0 -8px 32px rgba(28, 25, 23, 0.10);
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    animation: wcCookieIn 0.3s ease-out;
}

@keyframes wcCookieIn {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .wc-cookie-banner { animation: none; }
}

.wc-cookie-banner__inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
}

.wc-cookie-banner__title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--wc-ink, #1C1917);
    margin: 0 0 4px;
    line-height: 1.3;
}

.wc-cookie-banner__text {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--wc-stone, #746D68);
    margin: 0;
    max-width: 68ch;
}

.wc-cookie-banner__text a {
    color: var(--wc-ink, #1C1917);
    text-decoration: underline;
}

.wc-cookie-banner__actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

/*
 * Beide knoppen krijgen exact dezelfde vorm, breedte en gewicht.
 *
 * Dit is geen smaakkwestie. Een gevulde, donkere "accepteren" naast een lichte
 * outline-"weigeren" is het patroon waar de Autoriteit Persoonsgegevens op wijst:
 * als de ene keuze zichtbaar aantrekkelijker gemaakt is, is de toestemming niet
 * vrij gegeven en daarmee aanvechtbaar. Wie dit later herstijlt: houd ze gelijk.
 */
.wc-cookie-banner__actions .wc-btn,
.wc-cookie-banner__actions .wc-btn--primary,
.wc-cookie-banner__actions .wc-btn--secondary {
    white-space: nowrap;
    /* Gelijke breedte, ongeacht welke tekst er langer is. */
    flex: 1 1 0;
    min-width: 200px;
    justify-content: center;
    background: transparent;
    color: var(--wc-ink, #1C1917);
    border: 1px solid var(--wc-ink, #1C1917);
    font-weight: 500;
}

.wc-cookie-banner__actions .wc-btn:hover,
.wc-cookie-banner__actions .wc-btn--primary:hover,
.wc-cookie-banner__actions .wc-btn--secondary:hover {
    background: var(--wc-ink, #1C1917);
    color: var(--wc-canvas, #FAFAF9);
}

@media (max-width: 720px) {
    .wc-cookie-banner__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .wc-cookie-banner__actions .wc-btn {
        flex: 1;
        min-width: 0;
    }
}

/*
 * De knop in het cookiebeleid waarmee je je keuze opnieuw kunt maken.
 */
.wc-cookie-reset {
    margin: 8px 0 24px;
}

/*
 * Zolang de cookievraag openstaat, houden we Mira weg.
 *
 * De chatwidget opent zichzelf na tien seconden en zit rechtsonder — precies
 * waar de banner staat. Twee dingen tegelijk vragen is niet alleen rommelig,
 * het maakt de cookiekeuze ook makkelijker om per ongeluk weg te klikken.
 */
.wc-cookie-vraag-open .floating-chat-widget {
    display: none;
}