/*
 * Banneret ligger i bunden og daekker ikke siden.
 *
 * En modal der spaerrer indholdet, indtil der er sagt ja, er et pres - og et
 * samtykke givet under pres er ikke frit. Derfor ingen baggrundsoverlay og
 * ingen fastlaast scroll: man kan laese siden faerdig foerst.
 *
 * "Necessary only" og "Accept all" staar med samme vaegt i layoutet.
 */

.np-consent {
  position: fixed;
  z-index: 999999;
  inset-inline: 0;
  bottom: 0;
  padding: 16px;
  display: flex;
  /* Ude i hoejre hjoerne, ikke midt i synsfeltet. */
  justify-content: flex-end;
  pointer-events: none;
}

.np-consent[hidden] {
  display: none;
}

.np-consent__box {
  pointer-events: auto;
  width: 100%;
  max-width: 420px;
  padding: 20px;
  border-radius: 14px;
  background: #11161f;
  color: #e8edf5;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  font-size: 14px;
  line-height: 1.55;
}

.np-consent__title {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.np-consent__text {
  margin: 0 0 14px;
  color: #c3cddb;
}

.np-consent__link {
  color: #7fb4ff;
  text-decoration: underline;
}

.np-consent__options {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
  padding: 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
}

.np-consent__options[hidden] {
  display: none;
}

.np-consent__option {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 10px;
  align-items: start;
  cursor: pointer;
}

.np-consent__option--locked {
  cursor: default;
  opacity: 0.75;
}

.np-consent__option input {
  margin: 3px 0 0;
  width: 16px;
  height: 16px;
  accent-color: #3b82f6;
}

.np-consent__option strong {
  display: block;
  color: #fff;
  font-weight: 600;
}

.np-consent__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.np-consent__btn {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.np-consent__btn[hidden] {
  display: none;
}

.np-consent__btn--ghost {
  background: transparent;
  color: #e8edf5;
  border-color: rgba(255, 255, 255, 0.28);
}

.np-consent__btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
}

.np-consent__btn--primary {
  background: #3b82f6;
  color: #fff;
}

.np-consent__btn--primary:hover {
  background: #2f6fd8;
}

.np-consent__btn:focus-visible,
.np-consent-open:focus-visible {
  outline: 2px solid #7fb4ff;
  outline-offset: 2px;
}

/* Knappen der henter banneret tilbage. Diskret, men til at finde. */
.np-consent-open {
  appearance: none;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: 7px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: #11161f;
  color: #c3cddb;
}

/*
 * I sidens egen sidefod, i det almindelige flow.
 *
 * Knappen stod foer fast i hoejre hjoerne. En fast knap kan ikke undgaa at
 * daekke noget - den foelger med ned over alt hvad der ruller forbi under den.
 * Maalt paa /nimble-security/ ved 390 px laa den oven paa broedtekst ved 76 af
 * 165 scrollpositioner, og ved alle bredder, ogsaa 1280, laa den oven paa
 * YouTube-afspillerens egne knapper i nederste hoejre hjoerne, dvs. fuldskaerm.
 * Derfor staar den nu i sidefoden, hvor den ikke kan daekke noget.
 */
.np-consent-open--inline {
  align-self: center;
  background: transparent;
  /* Tager sidefodens egen daempede farve, saa den ikke raaber op. */
  color: inherit;
}

/* Finder scriptet ingen sidefod, lander den sidst i dokumentet - stadig i
   flowet, aldrig oven paa noget. */
.np-consent-open--standalone {
  display: block;
  margin: 24px auto;
}

.np-consent-open[hidden] {
  display: none;
}

.np-consent-open:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 600px) {
  .np-consent {
    padding: 10px;
  }

  /* Paa telefon er der ikke et hjoerne at staa i - saa fylder den bredden. */
  .np-consent__box {
    max-width: none;
    padding: 16px;
  }

  .np-consent__actions {
    justify-content: stretch;
  }

  .np-consent__btn {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .np-consent__btn {
    transition: none;
  }
}