/* =============================================================================
   Global: global/cookie-banner.css
   Own cookie banner (inc/tracking.php softwareshaker_cookie_banner(), js/global.js): a card bottom left,
   "Alles accepteren" and "Alles weigeren" equally prominent, "Zelf kiezen" opens the categories.
   After a choice only the round cookie button stays (bottom left), which opens the banner again.
   Loaded on every page, without blocking the first paint (inc/enqueue.php).
============================================================================= */

.cookie_consent [hidden] {display:none!important;}

/* Banner card */
.cookie_banner {position:fixed;left:24px;bottom:24px;z-index:10000;display:flex;flex-direction:column;gap:16px;width:min(440px, calc(100vw - 48px));max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow-y:auto;padding:24px;border:1px solid #e7e7e7;border-radius:16px;background:#fff;box-shadow:0 24px 60px -18px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.06);color:var(--textColor);overscroll-behavior:contain;scrollbar-width:thin;animation:cookieBannerIn .3s cubic-bezier(.2,.8,.2,1);}
.cookie_banner_title {margin:0;font-family:var(--font-bold);font-weight:var(--font-weight-bold);font-size:18px;line-height:1.3;color:var(--textColor);}
.cookie_banner_text {margin:-6px 0 0;font-size:14px;line-height:1.6;color:var(--textColor);}
.cookie_banner_text a {color:var(--textColorRed);text-decoration:underline;text-underline-offset:2px;}
.cookie_banner_text a:hover {text-decoration:none;}

/* Categories ("Zelf kiezen") */
.cookie_prefs fieldset {margin:0;padding:0;border:0;}
.cookie_cat {padding:14px 0;border-top:1px solid #ececec;}
.cookie_cat:last-child {padding-bottom:0;}
.cookie_cat_head {display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;}
.cookie_cat_name {font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);font-size:15px;line-height:1.3;}
.cookie_cat_always {margin-left:6px;font-family:var(--font-regular);font-weight:var(--font-weight-regular);font-size:13px;color:var(--textColortwo);}
.cookie_cat_text {margin:6px 0 0;font-size:13.5px;line-height:1.5;color:var(--textColor);}
.cookie_cat_cookies {margin:4px 0 0;font-size:12.5px;line-height:1.5;color:var(--textColortwo);overflow-wrap:anywhere;}
.cookie_cat:has(:disabled) .cookie_cat_head {cursor:default;}

/* Switch */
.cookie_switch {position:relative;flex:none;width:42px;height:24px;margin:0;border-radius:999px;background:#c4c4c4;cursor:pointer;appearance:none;-webkit-appearance:none;transition:background-color .2s ease;}
.cookie_switch::before {content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s ease;}
.cookie_switch:checked {background:var(--backgrondColorRed);}
.cookie_switch:checked::before {transform:translateX(18px);}
.cookie_switch:disabled {cursor:default;opacity:.5;}
.cookie_switch:focus-visible {outline:2px solid var(--backgrondColorRed);outline-offset:2px;}

/* Buttons: accept and reject side by side, the same size */
.cookie_banner_actions {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
.cookie_btn {display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:8px 16px;border:1px solid transparent;border-radius:5px;font-family:var(--font-bold);font-weight:var(--font-weight-bold);font-size:14px;line-height:1.2;text-align:center;cursor:pointer;transition:background-color .2s ease, border-color .2s ease, color .2s ease;}
.cookie_btn--accept {border-color:var(--backgrondColorRed);background:var(--backgrondColorRed);color:#fff;}
.cookie_btn--accept:hover {border-color:#B81A1A;background:#B81A1A;}
.cookie_btn--reject {border-color:var(--backgrondColorBlack);background:var(--backgrondColorBlack);color:#fff;}
.cookie_btn--reject:hover {border-color:#111214;background:#111214;}
.cookie_btn--save {grid-column:1 / -1;border-color:var(--textColor);background:#fff;color:var(--textColor);}
.cookie_btn--save:hover {background:var(--backgrondColorGray);}
.cookie_btn--prefs {grid-column:1 / -1;justify-self:center;min-height:32px;padding:4px 8px;background:none;color:var(--textColor);font-family:var(--font-semibold);font-weight:var(--font-weight-semibold);text-decoration:underline;text-underline-offset:3px;}
.cookie_btn--prefs:hover {text-decoration:none;}
.cookie_btn:focus-visible {outline:2px solid var(--backgrondColorRed);outline-offset:2px;}

/* Cookie button after a choice */
.cookie_badge {position:fixed;left:24px;bottom:24px;z-index:9998;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid #e7e7e7;border-radius:50%;background:#fff;box-shadow:0 8px 24px -8px rgba(0,0,0,.3);color:var(--textColor);cursor:pointer;transition:transform .2s ease, color .2s ease;}
.cookie_badge:hover {color:var(--backgrondColorRed);transform:translateY(-2px);}
.cookie_badge:focus-visible {outline:2px solid var(--backgrondColorRed);outline-offset:2px;}

@keyframes cookieBannerIn {from {opacity:0;transform:translateY(16px);} to {opacity:1;transform:none;}}

@media (prefers-reduced-motion:reduce) {
    .cookie_banner {animation:none;}
    .cookie_switch, .cookie_switch::before, .cookie_badge {transition:none;}
}

/* Mobile: full width at the bottom; the cookie button above the sticky demo button */
@media(max-width:768px) {
    .cookie_banner {left:12px;right:12px;bottom:12px;width:auto;max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);padding:20px;}
    .cookie_badge {left:12px;bottom:12px;}
    body:not(.page-template-template-contact):has(.sticky_cta) .cookie_badge {bottom:70px;}
}

@media(max-width:360px) {
    .cookie_banner_actions {grid-template-columns:minmax(0,1fr);}
}