/* ==========================================================================
   Cookiebanner Cammaert EVR BV
   Gedeeld door de Figma-pagina's (assets/v2/style.css) en de oude pagina's
   (assets/style.css), dus alle kleuren staan hier zelf en niet in een var
   die maar in een van de twee stylesheets bestaat.
   Vormtaal volgt het ontwerp: radius 7, rode driehoek zoals in de hero,
   Boldonse voor de kop, Inter voor de tekst, geen skew.
   ========================================================================== */

.cc{
  --cc-maroon:#500C0C;
  --cc-red:#D80C0C;
  --cc-ink:#000;
  --cc-body:#686868;
  --cc-lijn:#E2DEDE;
  position:fixed;left:20px;bottom:20px;z-index:900;
  width:min(460px,calc(100vw - 40px));
  background:#fff;border-radius:7px;
  box-shadow:0 18px 50px rgba(0,0,0,.22);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  color:var(--cc-body);
  overflow:hidden;
  animation:cc-in .28s ease-out both;
}
@keyframes cc-in{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.cc:focus{outline:none}

/* rode hoek rechtsboven, echo van de hero-driehoeken */
.cc::before{
  content:"";position:absolute;top:0;right:0;width:74px;height:74px;
  background:var(--cc-red);clip-path:polygon(0 0,100% 0,100% 100%);
  pointer-events:none;
}

.cc-body{position:relative;padding:26px 26px 0}
.cc h2{
  margin:0 0 14px;padding-right:58px;
  font-family:'Boldonse',Impact,system-ui,sans-serif;font-weight:400;
  font-size:19px;line-height:1.3;color:var(--cc-ink);
}
.cc p{margin:0;font-size:15px;line-height:1.6;color:var(--cc-body)}
.cc a{color:var(--cc-red);text-decoration:underline;text-underline-offset:3px}
.cc a:hover{text-decoration-thickness:2px}

/* ---------------------------------------------------------------- knoppen */
.cc-acties{display:flex;flex-wrap:wrap;gap:10px;padding:22px 26px 26px}
.cc-btn{
  flex:1 1 auto;min-width:132px;
  display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:0 18px;border:1px solid transparent;border-radius:7px;
  font-family:inherit;font-size:15px;font-weight:700;line-height:1;
  cursor:pointer;transition:background-color .15s,color .15s,border-color .15s;
}
.cc-btn--ja{background:var(--cc-red);color:#fff}
.cc-btn--ja:hover{background:#b80a0a}
.cc-btn--nee{background:#fff;color:var(--cc-maroon);border-color:var(--cc-maroon)}
.cc-btn--nee:hover{background:#faf4f4}
.cc-btn--meer{
  flex:1 1 100%;min-width:0;height:auto;padding:2px 0;
  background:none;color:var(--cc-body);font-weight:400;font-size:14px;
  text-decoration:underline;text-underline-offset:3px;
}
.cc-btn--meer:hover{color:var(--cc-red)}

/* ---------------------------------------------------------------- keuzes */
.cc-keuzes{margin:22px 0 0;border-top:1px solid var(--cc-lijn)}
.cc-keuze{
  display:grid;grid-template-columns:1fr 46px;column-gap:16px;align-items:start;
  padding:18px 0;border-bottom:1px solid var(--cc-lijn);
}
.cc-keuze h3{
  margin:0 0 6px;font-family:inherit;font-size:15px;font-weight:700;
  line-height:1.3;color:var(--cc-ink);
}
.cc-keuze p{font-size:14px;line-height:1.5}

/* schakelaar */
.cc-schakel{position:relative;width:46px;height:26px;flex:0 0 auto;margin-top:2px}
.cc-schakel input{
  position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;
}
.cc-schakel span{
  position:absolute;inset:0;background:#CFCACA;border-radius:13px;
  transition:background-color .18s;pointer-events:none;
}
.cc-schakel span::after{
  content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;
  background:#fff;border-radius:50%;box-shadow:0 1px 3px rgba(0,0,0,.25);
  transition:transform .18s;
}
.cc-schakel input:checked+span{background:var(--cc-red)}
.cc-schakel input:checked+span::after{transform:translateX(20px)}
.cc-schakel input:focus-visible+span{outline:3px solid var(--cc-red);outline-offset:3px}
.cc-schakel input:disabled{cursor:default}
.cc-schakel input:disabled+span{background:var(--cc-maroon);opacity:.45}

.cc-btn:focus-visible,.cc a:focus-visible{outline:3px solid var(--cc-red);outline-offset:3px}

/* voorkeurenweergave: scrollbaar op korte schermen, met de laatste rij niet
   vlak tegen de rand zodat het niet lijkt of de tekst afgekapt is */
.cc[data-weergave="voorkeuren"] .cc-body{max-height:min(72vh,600px);overflow-y:auto;
  padding-bottom:6px;overscroll-behavior:contain}
.cc[data-weergave="voorkeuren"] .cc-keuze:last-child{border-bottom:0}

/* voetlink om de banner opnieuw te openen */
.cookie-link{
  background:none;border:0;padding:0;margin:0;
  font:inherit;color:inherit;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;
}
.cookie-link:hover{text-decoration-thickness:2px}
/* in de voet staat de knop naast twee gewone links, die daar niet onderlijnd
   zijn; onderlijnen blijft voorbehouden aan de knop in een lopende zin */
.foot-bottom .cookie-link{text-decoration:none}
.foot-bottom .cookie-link:hover,.foot-bottom a:hover{text-decoration:underline;
  text-underline-offset:3px}

@media (max-width:600px){
  .cc{left:10px;right:10px;bottom:10px;width:auto}
  .cc-body{padding:22px 20px 0}
  .cc-acties{padding:18px 20px 22px}
  .cc-btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  .cc{animation:none}
  .cc-schakel span,.cc-schakel span::after,.cc-btn{transition:none}
}