:root{
  --bg:#0b0f19;     /* paginabg (donker) */
  --card:#121826;   /* panel */
  --text:#e6e7ea;   /* hoofdtekst */
  --muted:#9aa3b2;  /* subtiele tekst */
  --brand:#22c55e;  /* groen */
  --brand-2:#ffffff;/* wit */
  --ok:#22c55e;
  --danger:#ef4444;
  --border:rgba(148,163,184,.18);
  --ring:rgba(34,197,94,.45);
  --shadow:0 20px 60px rgba(0,0,0,.5);
  --radius:16px;
}

/* zachte glow achter de banner */
.ribbon{
  position:fixed; inset:auto -20vw 0 -20vw; height:180px; z-index:9998;
  background:
    radial-gradient(1000px 200px at 20% 0%, rgba(34,197,94,.35), transparent 60%),
    radial-gradient(1000px 200px at 80% 0%, rgba(255,255,255,.25), transparent 60%);
  pointer-events:none; filter:blur(14px);
}

/* ===== popup-only: verberg de onderbalk ===== */
.cookie-banner{ display:none !important; }

/* (oude banner styles blijven staan voor het geval je later wil switchen) */
.cookie-card{
  width:min(980px,94vw);
  backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--border); border-radius:22px; box-shadow:var(--shadow);
}
.cookie-inner{display:grid; grid-template-columns:auto 1fr auto; gap:1rem; align-items:center; padding:1rem 1.25rem}
.cookie-icon{width:52px; height:52px; display:grid; place-items:center; background:rgba(34,197,94,.16); border:1px solid var(--border); border-radius:14px}
.cookie-copy{line-height:1.45}
.cookie-copy p{margin:.25rem 0; color:var(--text)}
.cookie-copy a{color:var(--brand); text-decoration:underline}
.cookie-actions{display:flex; gap:.5rem; flex-wrap:wrap}

.btn{
  appearance:none; border:1px solid var(--border); background:transparent; color:var(--text);
  padding:.7rem 1.05rem; border-radius:999px; font-weight:700; cursor:pointer;
  transition:.18s transform,.18s box-shadow;
}
.btn:hover{transform:translateY(-1px)}
.btn:focus{outline:2px solid transparent; box-shadow:0 0 0 4px var(--ring)}
.btn-primary{background:var(--brand); border-color:transparent; color:#111}
.btn-secondary{background:var(--brand-2); border-color:transparent; color:#111}
.btn-danger{background:transparent; border-color:rgba(239,68,68,.45); color:#fecaca}
.btn-neutral{background:transparent}

.progress{height:2px; background:linear-gradient(90deg,var(--brand),var(--brand-2)); opacity:.7}

/* ====== Bootstrap-safe modal/backdrop (prefixed) ====== */
.cc-backdrop{
  position:fixed; inset:0; background:rgba(2,6,23,.6);
  display:none; z-index:1055; /* iets boven Bootstrap .modal-backdrop (1050) */
}
.cc-backdrop[aria-hidden="false"]{display:block}

.cc-modal{
  position:fixed; inset:0; display:grid; place-items:center; pointer-events:none;
  z-index:1060; /* boven Bootstrap .modal (1055) */
}
.cc-modal[aria-hidden="false"]{pointer-events:auto}

/* modal panel en inhoud */
.panel{
  width:min(760px,94vw); max-height:90vh; overflow:auto;
  background:var(--card); border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow);
}
.panel header{display:flex; gap:.75rem; align-items:center; padding:1rem 1.25rem; border-bottom:1px solid var(--border)}
.panel h2{margin:0; font-size:1.15rem}
.panel main{padding:1rem 1.25rem; display:grid; gap:1rem}
.panel footer{padding:1rem 1.25rem; border-top:1px solid var(--border); display:flex; gap:.5rem; flex-wrap:wrap; justify-content:flex-end}

.badge{display:inline-flex; align-items:center; gap:.5rem; background:rgba(34,197,94,.12); border:1px solid rgba(34,197,94,.28); color:#d1fae5; padding:.35rem .6rem; border-radius:999px; font-size:.8rem}

.category{border:1px solid var(--border); border-radius:14px; padding:1rem; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)); display:grid; gap:.5rem}
.category h3{margin:0; font-size:1rem}
.muted{color:var(--muted); font-size:.95rem}

/* switches */
.switch{position:relative; display:inline-block; width:54px; height:30px}
.switch input{opacity:0; width:0; height:0}
.slider{position:absolute; cursor:pointer; inset:0; background:#334155; border-radius:999px; transition:.2s}
.slider:before{
  content:""; position:absolute; height:24px; width:24px; left:3px; top:3px;
  background:linear-gradient(180deg,#fff,#e5e7eb); border-radius:50%; transition:.2s; box-shadow:0 2px 4px rgba(0,0,0,.25)
}
input:checked + .slider{background:linear-gradient(90deg,var(--ok),#86efac)}
input:checked + .slider:before{transform:translateX(24px)}
input:disabled + .slider{background:#475569; opacity:.7}

/* responsive */
@media (max-width:860px){
  .cookie-inner{grid-template-columns:1fr; gap:.75rem}
  .cookie-actions{justify-content:stretch}
  .btn{flex:1}
  .cookie-icon{justify-self:start}
}
/* Zet de cookie-overlay ver boven andere overlays (Bootstrap, plugins) */
.cc-backdrop{ z-index:19999; }
.cc-modal{ z-index:20000; pointer-events:none; }  /* container vangt niks */
.cc-modal[aria-hidden="false"] .panel{ pointer-events:auto; } /* alleen paneel klikbaar */

/* fallback variabelen als ze niet bestaan */
:root{
  --card: var(--card, rgba(20,25,35,.9));
  --text: var(--text, #e6e7ea);
  --border: var(--border, rgba(148,163,184,.18));
  --brand: var(--brand, #22c55e);
  --shadow: var(--shadow, 0 20px 60px rgba(0,0,0,.5));
}

/* floating cookie knop linksonder */
.cookie-fab{
  position: fixed;
  left: 18px;
  bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1rem;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  backdrop-filter: saturate(140%) blur(8px);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--shadow);
  z-index: 17000; /* onder je modal (20000) maar boven content */
  transform: translateZ(0);
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease;
}
.cookie-fab:hover{ transform: translateY(-1px); border-color: rgba(34,197,94,.45); box-shadow: 0 12px 28px rgba(0,0,0,.4); }
.cookie-fab:focus{ outline: 2px solid transparent; box-shadow: 0 0 0 4px rgba(34,197,94,.45); }

.cookie-fab__icon{
  width: 28px; height: 30px; flex: 0 0 auto;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.25));
}
.cookie-fab__label{ line-height: 1; }

/* op kleine schermen compact (alleen icoon, groter) */
@media (max-width: 640px){
  .cookie-fab{ padding: .85rem; border-radius: 999px; }
  .cookie-fab__label{ display: none; }
  .cookie-fab__icon{ width: 26px; height: 26px; }
}

/* ===== Donkere, ondoorzichtige popup ===== */

/* backdrop iets donkerder */
.cc-backdrop{
  background: rgba(6, 10, 18, .82); /* was .6 */
}

/* hoofdpanel: volledig ondoorzichtig donker */
.cc-modal .panel{
  background: #0f1422;              /* geen transparantie meer */
  border: 1px solid rgba(148,163,184,.25);
  box-shadow: 0 24px 80px rgba(0,0,0,.7);
}

/* header & footer met subtiele scheiding en vaste bg */
.cc-modal .panel header,
.cc-modal .panel footer{
  background: #0b1020;              /* iets donkerder dan panel */
  border-color: rgba(148,163,184,.22);
}

/* titels/tekst contrastrijk */
.cc-modal .panel h2,
.cc-modal .panel h3{ color: #e9edf7; }
.cc-modal .panel .muted{ color: #9aa3b2; }

/* categoriekaarten ondoorzichtig met subtiele gloed */
.cc-modal .category{
  background: #121a2e;              /* geen gradient/transparantie */
  border: 1px solid rgba(148,163,184,.2);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
}

/* switch-rail iets donkerder zodat toggle beter afsteekt */
.cc-modal .switch .slider{
  background: #2a344a;
}
.cc-modal input:checked + .slider{
  background: linear-gradient(90deg, var(--ok,#22c55e), #86efac);
}

/* knoppen: primaire groen, secundair wit, alles goed leesbaar */
.cc-modal .btn{
  color: #e9edf7;
  border-color: rgba(148,163,184,.24);
}
.cc-modal .btn-primary{
  background: var(--brand,#22c55e);
  border-color: transparent;
  color: #0b0f19;
}
.cc-modal .btn-secondary{
  background: #ffffff;
  border-color: transparent;
  color: #111827;
}
.cc-modal .btn:hover{
  transform: translateY(-1px);
}

/* badge in header iets zachter */
.cc-modal .badge{
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.3);
  color: #d7fbe3;
}


/* (optioneel) maak footer-knoppen extra klikbaar */
.panel footer .btn{ pointer-events:auto; }
/* hard-hide fallback */
.cc-backdrop[aria-hidden="true"]{ display:none !important; }
.cc-modal[aria-hidden="true"]{ display:none !important; }