/* =========================================================
   Cookiemelding — Berrens & van Eijk
   Gebruikt de bestaande kleur-/typografievariabelen uit style.css
   (dit bestand moet ná style.css worden geladen).
   ========================================================= */

/* ---------- Banner (onderin het scherm) ---------- */
.cookie-banner{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:500;
  background:var(--black);
  color:#EDE8DD;
  border-top:1px solid var(--line-dark);
  padding:24px 0;
}
.cookie-banner[hidden]{display:none;}
.cookie-banner-inner{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}
.cookie-banner-text{flex:1 1 420px;max-width:640px;}
.cookie-banner-title{
  font-family:'Cormorant Garamond',serif;
  font-weight:600;
  font-size:1.15rem;
  color:#fff;
  margin:0 0 6px;
}
.cookie-banner-text p{
  font-size:13.5px;
  color:#C9BFA8;
  margin:0 0 8px;
  line-height:1.55;
}
.cookie-banner-text p:last-child{margin-bottom:0;}
.cookie-banner-link a{color:#fff;text-decoration:underline;}
.cookie-banner-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  flex:0 0 auto;
}
.cookie-banner-actions .btn{padding:12px 20px;font-size:12.5px;white-space:nowrap;}

@media (max-width:680px){
  .cookie-banner{padding:20px 0;}
  .cookie-banner-inner{flex-direction:column;align-items:stretch;gap:18px;}
  .cookie-banner-actions{flex-direction:column;}
  .cookie-banner-actions .btn{width:100%;justify-content:center;}
}

/* ---------- Voorkeuren (modaal venster) ---------- */
.cookie-modal{
  position:fixed;inset:0;
  z-index:600;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
}
.cookie-modal[hidden]{display:none;}
.cookie-modal-overlay{
  position:absolute;inset:0;
  background:rgba(11,11,10,0.6);
}
.cookie-modal-panel{
  position:relative;
  background:var(--cream-card);
  color:var(--ink);
  max-width:520px;
  width:100%;
  max-height:86vh;
  overflow-y:auto;
  padding:36px 36px 30px;
  border-radius:var(--radius);
  box-shadow:var(--shadow-lift);
}
.cookie-modal-close{
  position:absolute;top:16px;right:16px;
  background:none;border:0;cursor:pointer;
  font-size:22px;line-height:1;color:var(--gray-600);
  padding:6px;
  font-family:'Inter',sans-serif;
}
.cookie-modal-close:hover{color:var(--ink);}
.cookie-modal-panel h2{
  font-size:1.5rem;
  margin-bottom:12px;
  padding-right:24px;
}
.cookie-modal-intro{font-size:14px;color:var(--gray-600);margin:0 0 24px;}
.cookie-category{
  border-top:1px solid var(--line);
  padding:18px 0;
}
.cookie-category:first-of-type{border-top:none;padding-top:0;}
.cookie-category-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:6px;
}
.cookie-category-name{
  font-weight:600;
  font-size:14.5px;
  color:var(--ink);
}
.cookie-category p{font-size:13px;color:var(--gray-600);margin:0;}
.cookie-toggle-locked{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--gray-400);
  white-space:nowrap;
}

.cookie-switch{position:relative;display:inline-block;width:42px;height:24px;flex:0 0 auto;}
.cookie-switch input{
  position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;
}
.cookie-switch-track{
  position:absolute;inset:0;
  background:var(--line);
  border-radius:12px;
  transition:background .2s ease;
  pointer-events:none;
}
.cookie-switch-track::before{
  content:"";
  position:absolute;top:3px;left:3px;
  width:18px;height:18px;
  background:#fff;
  border-radius:50%;
  transition:transform .2s ease;
  box-shadow:0 1px 3px rgba(0,0,0,0.25);
}
.cookie-switch input:checked + .cookie-switch-track{background:var(--gold);}
.cookie-switch input:checked + .cookie-switch-track::before{transform:translateX(18px);}
.cookie-switch input:focus-visible + .cookie-switch-track{outline:2px solid var(--gold);outline-offset:2px;}

.cookie-modal-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
.cookie-modal-actions .btn{font-size:12px;padding:12px 16px;flex:1 1 auto;justify-content:center;}

body.cookie-modal-open{overflow:hidden;}

/* Voorkomt overlap tussen de WhatsApp-knop en de cookiebanner: beide zijn fixed
   aan de onderkant van het scherm. Zolang de banner zichtbaar is (nog geen
   keuze gemaakt), verbergen we de WhatsApp-knop; die keert terug zodra een
   keuze is gemaakt. */
body.cookie-banner-active .whatsapp-float{display:none;}

@media (max-width:560px){
  .cookie-modal-panel{padding:28px 22px 24px;}
  .cookie-modal-actions{flex-direction:column;}
}

/* ---------- Footerlink "Cookievoorkeuren wijzigen" ---------- */
footer .foot-link-btn{
  background:none;
  border:0;
  padding:0;
  margin:0;
  font:inherit;
  font-size:13.5px;
  text-decoration:none;
  color:#D8CFB8;
  cursor:pointer;
  text-align:left;
  transition:color .3s;
}
footer .foot-link-btn:hover{color:#fff;}
/* Op dashboard.html staat de knop los als direct kind van .footer-bottom i.p.v. in .foot-links */
footer .footer-bottom > .foot-link-btn{
  font-size:12.5px;
  font-family:'IBM Plex Mono',monospace;
  color:#7A7364;
}
footer .footer-bottom > .foot-link-btn:hover{color:#D8CFB8;}