/* Cookiemelding, naar die van instnt.nl: een kaart linksonder in plaats van
   een venster dat de pagina blokkeert. De site is ook zonder keuze te lezen.
   In de kleuren van de footer, zodat hij bij elk thema past. */
.cb {
  position: fixed;
  z-index: 2000;
  left: 20px;
  bottom: 20px;
  width: min(400px, calc(100vw - 40px));
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border-radius: 20px;
  background: var(--footer-bg, #2c3e50);
  color: #ffffff;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  animation: cb-in 0.4s ease-out both;
}

.cb[hidden],
.cb [hidden] {
  display: none;
}

@keyframes cb-in {
  from { opacity: 0; transform: translateY(16px); }
}

.cb__kop {
  margin: 0;
  font-family: 'Baloo 2', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
}

.cb__tekst {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--footer-text, #ecf0f1);
}

.cb__tekst a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cb__soorten {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cb__soort {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.07);
  cursor: pointer;
}

.cb__soort input {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.cb__soort span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 0.9rem;
}

.cb__soort small {
  font-size: 0.82rem;
  line-height: 1.45;
  color: #c9d3dc;
}

.cb__knoppen,
.cb__standaard {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cb__standaard {
  flex: 1 1 100%;
}

.cb__knop {
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: #c9d3dc;
  font: 600 0.9rem/1 inherit;
  cursor: pointer;
}

.cb__knop:hover {
  color: #ffffff;
}

/* Accepteren en weigeren zien er hetzelfde uit: geen van beide is de
   "goede" keuze */
.cb__knop--vol {
  flex: 1 1 0;
  background: #ffffff;
  color: var(--footer-bg, #2c3e50);
}

.cb__knop--vol:hover {
  background: #e3e9f0;
  color: var(--footer-bg, #2c3e50);
}

.cb__knop:focus-visible,
.cb-open:focus-visible {
  outline: 2px solid var(--accent-color, #4fc3f7);
  outline-offset: 2px;
}

.cb-open {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}

@media (max-width: 560px) {
  .cb {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
  }
}