/* ================================================================
 * Bondgenoot — components/cookie-banner.css (cluster C C2 fase F056)
 * /assets/css/components/cookie-banner.css
 *
 * Bottom-bar banner met perkament-stijl. Past bij de nieuwe warm-
 * parchment thema. Werkt no-JS (form-submit), JS hijackt voor
 * smooth-hide.
 * ================================================================ */

.bg-cookie-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-banner);
    background:
        linear-gradient(180deg, var(--bg-parchment-1) 0%, var(--bg-parchment-2) 100%);
    color: var(--text-on-parchment);
    border-top: 2px solid var(--gold);
    box-shadow:
        0 -8px 24px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.50);
    animation: bg-cookie-banner-up var(--t-slow) var(--ease-out);
}

.bg-cookie-banner::before {
    content: "";
    position: absolute;
    top: -2px; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--gold-deep) 12%,
        var(--gold) 50%,
        var(--gold-deep) 88%,
        transparent 100%);
    pointer-events: none;
}

.bg-cookie-banner.is-hiding {
    animation: bg-cookie-banner-down var(--t-normal) var(--ease-out) forwards;
}

@keyframes bg-cookie-banner-up {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}
@keyframes bg-cookie-banner-down {
    from { transform: translateY(0);    opacity: 1; }
    to   { transform: translateY(100%); opacity: 0; }
}

.bg-cookie-banner__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-4) var(--space-5);
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--space-5);
    align-items: center;
}

@media (max-width: 960px) {
    .bg-cookie-banner__inner {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }
}

.bg-cookie-banner__tekst { min-width: 0; }

.bg-cookie-banner__titel {
    margin: 0 0 6px;
    color: var(--gold-deep);
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.bg-cookie-banner__tekst p {
    margin: 0;
    color: var(--text-on-parchment);
    font-size: 0.92rem;
    line-height: 1.5;
}

.bg-cookie-banner__tekst a {
    color: var(--gold-deep);
    text-decoration: underline;
    text-decoration-color: rgba(184, 137, 61, 0.55);
    text-underline-offset: 2px;
    font-weight: 600;
}
.bg-cookie-banner__tekst a:hover {
    color: var(--accent-ink);
    text-shadow: none;
}

.bg-cookie-banner__keuzes {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: stretch;
}

.bg-cookie-banner__opties {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    border: 0;
}

.bg-cookie-banner__optie {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-on-parchment);
    font-size: 0.88rem;
    cursor: pointer;
    user-select: none;
}

.bg-cookie-banner__optie input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: var(--gold-deep);
    cursor: pointer;
    margin: 0;
}

.bg-cookie-banner__optie--vast {
    color: var(--text-on-parchment-muted);
    cursor: default;
}

.bg-cookie-banner__optie em {
    color: var(--text-on-parchment-faint);
    font-style: italic;
}

.bg-cookie-banner__knoppen {
    display: flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.bg-cookie-banner__knop {
    flex: 1 1 auto;
    min-width: 110px;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    cursor: pointer;
    transition: all var(--t-fast) var(--ease-out);
    border: 1px solid transparent;
    text-align: center;
}

.bg-cookie-banner__knop--primair {
    background: linear-gradient(180deg, var(--gold-bright) 0%, var(--gold) 100%);
    color: var(--bg-deepest);
    border-color: rgba(0, 0, 0, 0.18);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.20);
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.40);
}
.bg-cookie-banner__knop--primair:hover {
    background: linear-gradient(180deg, var(--gold-pale) 0%, var(--gold-bright) 100%);
    transform: translateY(-1px);
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.bg-cookie-banner__knop--secundair {
    /* F214 (R031): "Weiger/Alleen noodzakelijk" moet EVEN prominent zijn als
       "Accepteer alles" — niet een zwakke outline. Solide, contrastrijke
       parkament-knop met dezelfde gewicht/grootte als de primaire knop. */
    background: linear-gradient(180deg, var(--parchment-light, #f3e7c9) 0%, var(--parchment, #e8d8b0) 100%);
    color: var(--text-on-parchment);
    border-color: var(--gold-deep);
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.bg-cookie-banner__knop--secundair:hover {
    background: linear-gradient(180deg, #f8efd6 0%, #efe0bd 100%);
    transform: translateY(-1px);
    box-shadow:
        0 6px 12px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.50);
}

.bg-cookie-banner__knop--ghost {
    background: transparent;
    color: var(--gold-deep);
    border-color: var(--gold-deep);
}
.bg-cookie-banner__knop--ghost:hover {
    background: rgba(184, 137, 61, 0.10);
    color: var(--accent-ink);
    transform: translateY(-1px);
}

@media (max-width: 480px) {
    .bg-cookie-banner__inner { padding: var(--space-3); }
    .bg-cookie-banner__knoppen { flex-direction: column; }
    .bg-cookie-banner__knop { min-width: 0; }
}