/* ============================================================================
   cookiebanner.css — de toestemmingsbalk uit includes/analytics_fns.php.

   Apart bestand (en niet in app.css) omdat app.php zijn eigen stijl meebrengt
   en app.css niet inlaadt; zo ziet de banner er overal hetzelfde uit. Om
   dezelfde reden staan er overal terugvalwaarden achter de var()'s.
   ============================================================================ */

.ck-banner {
    position: fixed; z-index: 9000; left: 16px; right: 16px; bottom: 16px;
    max-width: 780px; margin: 0 auto;
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    background: #fff; border: 1px solid var(--line-5, #e0ddd3); border-radius: 14px;
    padding: 16px 18px; box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
    font-family: var(--body, 'Figtree', system-ui, sans-serif);
}
.ck-banner[hidden] { display: none; }

.ck-tekst { flex: 1 1 320px; min-width: 0; }
.ck-kop {
    display: block; font-size: 15px; font-weight: 800;
    color: var(--ink, #1a1814); margin-bottom: 4px;
}
.ck-tekst p {
    margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted, #5c584f);
}
.ck-tekst a { color: var(--green-text, #15803d); font-weight: 600; text-decoration: underline; }

.ck-acties { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Weigeren en accepteren zijn even zichtbaar en even groot: de wet vraagt dat
   weigeren niet moeilijker mag zijn dan aanvaarden. */
.ck-btn {
    font-family: inherit; font-weight: 700; font-size: 14px; line-height: 1;
    padding: 12px 20px; border-radius: 10px; border: 1px solid transparent;
    cursor: pointer; transition: filter .12s ease, transform .12s ease;
}
.ck-btn:hover { filter: brightness(1.05); }
.ck-btn:active { transform: translateY(1px); }
.ck-btn-ja  { background: var(--green, #16a34a); color: #fff; }
.ck-btn-nee { background: transparent; color: var(--ink, #1a1814); border-color: var(--line-5, #e0ddd3); }

/* Op mobiel onder elkaar, allebei over de volle breedte — anders staan de
   knoppen te klein naast elkaar geperst. */
@media (max-width: 640px) {
    .ck-banner { left: 10px; right: 10px; bottom: 10px; padding: 14px 16px; gap: 14px; }
    .ck-acties { width: 100%; }
    .ck-btn { flex: 1 1 0; padding: 13px 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .ck-btn { transition: none; }
}