/* Toestemmingsbanner voor Google Analytics (zie assets/js/toestemming.js).
   Weigeren en Akkoord zijn bewust even groot en even zwaar: de AP eist dat
   weigeren net zo makkelijk is als toestemmen. Daarom hier geen lime, want
   lime is in de huisstijl het signaal voor de gewenste actie. */
.toestemming {
  position: fixed;
  left: 16px;
  bottom: 16px;
  z-index: 1000;
  max-width: 420px;
  padding: 20px 22px 18px;
  background: var(--pitch);
  color: #fff;
  border-radius: 4px var(--radius-lg) 4px 4px; /* één ronde hoek rechtsboven, zoals het logo */
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: var(--shadow-lg);
  font-family: var(--font-body);
}
.toestemming[hidden] { display: none !important; }
.toestemming-titel {
  margin: 0 0 6px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.3;
}
.toestemming-uitleg {
  margin: 0 0 16px;
  font-size: .92rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
}
.toestemming-uitleg a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.toestemming-knoppen { display: flex; gap: 10px; }
.toestemming-knop {
  flex: 1 1 0;
  min-height: 44px;
  padding: 10px 16px;
  border: 1.5px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font: 600 .95rem/1 var(--font-head);
  cursor: pointer;
}
.toestemming-knop:hover { background: rgba(255, 255, 255, .1); }
.toestemming-knop:focus-visible { outline: 2px solid var(--mist); outline-offset: 2px; }

@media (max-width: 520px) {
  .toestemming { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}