/* cookie.css — Cookiemelding NRIT (hoort bij /system/js/cookie.js)
   Laadvolgorde: bootstrap.min.css → nrit.css → cookie.css
   Gebruikt de variabelen uit nrit.css (kleuren, fonts). */

.nrit-cookie-banner {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1080;
  width: calc(100% - 2.5rem);
  max-width: 420px;
  padding: 1.5rem 1.5rem 1.25rem;
  background: var(--nrit-wit, #fff);
  border: 1px solid var(--nrit-lijn-kader, #ece6dc);
  border-top: 4px solid var(--nrit-oranje, #EF7D0C);
  border-radius: var(--bs-border-radius, .375rem);
  box-shadow: 0 18px 44px rgba(31, 26, 23, .18);
  font-family: var(--nrit-font-ui, system-ui, sans-serif);
  color: var(--nrit-inkt, #1f1a17);
  animation: nrit-cookie-in .25s ease-out;
}

@keyframes nrit-cookie-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .nrit-cookie-banner { animation: none; }
}

/* Merkbalk-accent zoals boven de header (4 kleuren) */
.nrit-cookie-banner::before {
  content: '';
  position: absolute;
  inset: -4px 0 auto 0;
  height: 4px;
  border-radius: var(--bs-border-radius, .375rem) var(--bs-border-radius, .375rem) 0 0;
  background: linear-gradient(90deg,
    var(--nrit-oranje)  0 25%,
    var(--nrit-cyaan)   25% 50%,
    var(--nrit-groen)   50% 75%,
    var(--nrit-magenta) 75% 100%);
}

.nrit-cookie-banner__sluiten {
  position: absolute;
  top: .625rem;
  right: .625rem;
  width: 2rem;
  height: 2rem;
  display: flex; align-items: center; justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--nrit-grijs, #6b6259);
  font-size: .9375rem;
  line-height: 1;
  cursor: pointer;
}
.nrit-cookie-banner__sluiten:hover { background: var(--nrit-vlak, #f1ebe1); color: var(--nrit-inkt, #1f1a17); }

.nrit-cookie-banner__titel {
  margin: 0 2rem .5rem 0;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--nrit-oranje-donker, #B35600);
}

.nrit-cookie-banner__tekst {
  margin: 0 0 1rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--nrit-inkt-2, #4a423b);
}
.nrit-cookie-banner__tekst a {
  color: var(--nrit-inkt, #1f1a17);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.nrit-cookie-banner__tekst a:hover { color: var(--nrit-oranje-donker, #B35600); }

/* Instellingenpaneel */
.nrit-cookie-instellingen { margin-bottom: 1rem; }

.nrit-cookie-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 0;
  border-top: 1px solid var(--nrit-lijn, #e8e1d6);
}
.nrit-cookie-cat:last-child { border-bottom: 1px solid var(--nrit-lijn, #e8e1d6); }

.nrit-cookie-cat__naam { font-size: .875rem; font-weight: 600; }
.nrit-cookie-cat__omschrijving { font-size: .8125rem; line-height: 1.4; color: var(--nrit-grijs, #6b6259); }
.nrit-cookie-cat__vast {
  flex: none;
  font-size: .75rem;
  font-weight: 600;
  color: var(--nrit-groen-donker, #2E7A37);
  white-space: nowrap;
}

/* Bootstrap-switch in NRIT-kleur */
.nrit-cookie-cat .form-switch .form-check-input {
  width: 2.5rem;
  height: 1.375rem;
  margin: 0;
  float: none;
  cursor: pointer;
  border-color: var(--nrit-lijn-sterk, #ddd4c6);
}
.nrit-cookie-cat .form-switch .form-check-input:checked {
  background-color: var(--nrit-oranje, #EF7D0C);
  border-color: var(--nrit-oranje, #EF7D0C);
}
.nrit-cookie-cat .form-switch .form-check-input:focus {
  box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
  border-color: var(--nrit-oranje, #EF7D0C);
}

/* Knoppen */
.nrit-cookie-banner__acties {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
}
.nrit-cookie-banner__acties .btn { --bs-btn-padding-y: .5rem; --bs-btn-padding-x: 1rem; --bs-btn-font-size: .8125rem; }

.nrit-cookie-instellingen-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .5rem .25rem;
  border: 0;
  background: transparent;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--nrit-inkt, #1f1a17);
  cursor: pointer;
}
.nrit-cookie-instellingen-btn:hover { color: var(--nrit-oranje-donker, #B35600); }
.nrit-cookie-instellingen-btn__icon { display: inline-block; transition: transform .2s ease; }
.nrit-cookie-instellingen-btn.is-open .nrit-cookie-instellingen-btn__icon { transform: rotate(180deg); }

.nrit-cookie-banner button:focus-visible {
  outline: 2px solid var(--nrit-oranje, #EF7D0C);
  outline-offset: 2px;
}

/* Mobiel: over de volle breedte onderaan */
@media (max-width: 575.98px) {
  .nrit-cookie-banner {
    right: .75rem;
    bottom: .75rem;
    width: calc(100% - 1.5rem);
    padding: 1.25rem 1.125rem 1rem;
  }
  .nrit-cookie-instellingen-btn { margin-left: 0; }
}

@media print {
  .nrit-cookie-banner { display: none !important; }
}