/* ===== Cookiebar ===== */
#cookie-banner{
  position:fixed;
  inset:auto 0 0 0;
  background:#0b0f15;                 /* sluit aan op je site */
  color:#e5e7eb;
  padding:18px 16px 20px;              /* ruimte voor content */
  box-shadow:0 -10px 30px rgba(0,0,0,.35);
  z-index:9999;
  font:14px/1.5 Poppins, system-ui, sans-serif;
  display:flex; align-items:center; justify-content:center;
  border-top:1px solid rgba(255,255,255,.06);
  overflow:visible;                    /* belangrijk voor ::before die erboven uitkomt */
}

/* De auto die boven de balk “hangt” */
#cookie-banner::before{
  content:"";
  position:absolute;
  left:50%;
  bottom:100%;                         /* exact tegen de bovenrand van de balk */
  transform:translate(-50%, 10px);     /* 10px omlaag zodat hij de balk zacht overlapt */
  width:clamp(260px, 40vw, 560px);     /* responsief */
  aspect-ratio: 2.2 / 1;               /* benaderde verhouding van jouw image */
  background:url('/dylan/assets/cookiebar.jpg') center / contain no-repeat;
  pointer-events:none;
  filter:
    drop-shadow(0 10px 20px rgba(0,0,0,.45))  /* mooie schaduw op de balk */
    drop-shadow(0 2px 6px rgba(0,0,0,.35));
  z-index:10000;                        /* boven alles in de balk */
}

/* licht verloop achter content voor leesbaarheid als auto erover valt op kleine schermen */
#cookie-banner::after{
  content:"";
  position:absolute; inset:0 0 auto 0; height:60%;
  background:linear-gradient(180deg, rgba(11,15,21,0) 0%, rgba(11,15,21,.85) 60%, rgba(11,15,21,1) 100%);
  pointer-events:none;
  z-index:0;
}

.cb-wrap{
  max-width:980px; width:100%;
  margin:0 auto;
  display:grid; gap:12px;
  position:relative; z-index:1;        /* boven de gradient-layer */
}

.cb-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between; }
.cb-title{ font-weight:700; }
.cb-links a{ color:#93c5fd; text-decoration:underline; }

/* knoppen in jouw stijl */
.cb-btn{ border:0; border-radius:10px; padding:10px 14px; cursor:pointer; font-weight:600; }
.cb-accept{ background:#10b981; color:#062b1f; }
.cb-deny{ background:#374151; color:#fff; }
.cb-save{ background:#7464f3; color:#fff; }

/* checkboxes */
.cb-cat{ display:flex; gap:8px; align-items:center; }
.cb-cat input{ width:18px; height:18px; }

/* mobiel: iets compacter en auto kleiner */
@media (max-width:640px){
  #cookie-banner{ padding:16px 12px 18px; }
  #cookie-banner::before{
    transform:translate(-50%, 6px);
    width:clamp(220px, 70vw, 420px);
  }
}

/* respecteer het hidden attribuut */
#cookie-banner[hidden]{
  display:none !important;
}