/* Cookie-free pill — sticky bottom-right notice that the site sets no
   tracking cookies. One-time dismiss persists in localStorage as
   ug_cookie_free_dismissed. Mounts hidden and is revealed by JS to avoid
   an SSR flash for users who already dismissed it.

   z-index strategy (ugdk-cfp):
   - .cookie-pill sidder på z-index 50: over almindeligt page-content
     (standkort SVG = 5, omraade-page = lokal stack) men under modals
     og overlays (palette / playground-modal = 9999+).
   - Hele pill-containeren får pointer-events: none så den IKKE blokerer
     taps på underliggende UI; kun selve teksten, linket og dismiss-knappen
     genaktiverer pointer-events: auto. Det fikser overlap-bug'en på
     /standkort/ (interaktive stand-bokse) og /kunder/ (orange CTA).
   - På mobile flyttes pillen til at være kompakt (ikke fuld bredde) og
     placeret højre-i-bunden så den ikke dækker primær CTA. */

.cookie-pill {
  position: fixed;
  right: var(--space-m);
  bottom: var(--space-m);
  z-index: 50;
  display: none;
  align-items: center;
  gap: var(--space-s);
  max-width: calc(100vw - 2 * var(--space-m));
  padding: var(--space-s) var(--space-s) var(--space-s) var(--space-m);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  font-size: 0.8125rem;
  line-height: 1.3;
  color: var(--text);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 240ms ease, transform 240ms ease;
  /* Pillen selv blokerer ikke pointer-events — kun de specifikke
     interaktive elementer (link + dismiss) gør. Det betyder tomme
     områder ved pillens kanter sender taps videre til underliggende UI. */
  pointer-events: none;
}

.cookie-pill.is-visible {
  display: inline-flex;
}

.cookie-pill.is-shown {
  opacity: 1;
  transform: translateY(0);
}

.cookie-pill__text {
  white-space: nowrap;
  /* Tekst er ikke interaktiv — lad taps gå igennem til underliggende UI.
     pointer-events: none arves fra parent, men vi sætter det eksplicit
     for clarity. */
  pointer-events: none;
}

.cookie-pill__link {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
  /* Re-aktivér pointer-events specifikt for det interaktive element. */
  pointer-events: auto;
}

.cookie-pill__link:hover,
.cookie-pill__link:focus-visible {
  color: var(--text);
}

.cookie-pill__dismiss {
  /* wa-button appearance=plain override: lad host-farve + bg vinde. */
  --wa-color-on-quiet: var(--text-muted);
  --wa-color-neutral-on-quiet: var(--text-muted);
  --wa-color-fill-quiet: transparent;
  --wa-color-neutral-fill-quiet: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--text-muted);
  cursor: pointer;
  flex: 0 0 auto;
  /* Re-aktivér pointer-events specifikt for dismiss-knappen. */
  pointer-events: auto;
}

.cookie-pill__dismiss:hover,
.cookie-pill__dismiss:focus-visible {
  --wa-color-on-quiet: var(--text);
  --wa-color-neutral-on-quiet: var(--text);
}

.cookie-pill__dismiss:hover,
.cookie-pill__dismiss:focus-visible {
  background: var(--surface-hover);
  color: var(--text);
}

.cookie-pill__dismiss svg {
  width: 0.875rem;
  height: 0.875rem;
}

/* ── Mobile (≤ 480px) ─────────────────────────────────────────────────
   Tidligere strakte pillen sig fra left til right på mobile og dækkede
   hele bunden — det skjulte primær CTA på /kunder/ og blokerede mobil-
   zone-kort på /standkort/. Vi gør den i stedet kompakt og placeret
   højre-i-bunden, så indhold venstre for pillen er fuldt synligt og
   tappable. */
@media (max-width: 480px) {
  .cookie-pill {
    /* Hold pillen kompakt — ikke fuld bredde. */
    right: var(--space-s);
    bottom: var(--space-s);
    left: auto;
    max-width: calc(100vw - 2 * var(--space-s));
    padding: 6px 6px 6px var(--space-s);
    gap: 6px;
    font-size: 0.7rem;
  }

  .cookie-pill__text {
    /* Tillad wrap så pillen ikke bliver bredere end nødvendigt — men
       behold den i en linje når der er plads. */
    white-space: normal;
  }

  /* På meget små mobile dropper vi link-teksten "Læs mere" og lader
     dismiss-knappen være den primære affordance. Linket bliver i stedet
     den klikbare tekst. */
  .cookie-pill__dismiss {
    width: 1.5rem;
    height: 1.5rem;
  }
}

/* ── Ekstra small (≤ 360px) — fold pillen til et lille badge ──────────
   På meget små viewports skal pillen være helt diskret, så den ikke
   dækker noget primært. */
@media (max-width: 360px) {
  .cookie-pill {
    font-size: 0.65rem;
    padding: 4px 6px 4px 10px;
  }
}

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