/* Baner zgód na pomiar (cookies). Wartości literalne zamiast var() —
   plik jest współdzielony przez stronę główną i podstrony, które mają
   różne zestawy tokenów. Estetyka = ciemny panel strony (kuźnia). */

.ogniwo-zgody {
  position: fixed;
  inset: auto 16px 16px 16px;
  z-index: 100000;
  margin: 0 auto;
  max-width: 700px;
  background: #181512;
  color: #f1eadf;
  border: 1px solid rgba(241, 234, 223, 0.26);
  border-radius: 2px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
  padding: 20px 22px;
  /* FALA 2: było 0.92rem = 14,72 px — stopień spoza skali strony. 14,5 px to
     najliczniejszy stopień tekstu na podstronach (48 elementów). */
  /* 0.90625rem = 14,5 px przy bazie 16 px. Rem, nie px — inaczej opis przestaje
     reagować na powiększenie pisma ustawione przez użytkownika, a tytuł banera (1rem)
     nadal reaguje, co rozjeżdża hierarchię. */
  font-size: 0.90625rem;
  line-height: 1.55;
}

.ogniwo-zgody[hidden] { display: none; }

.ogniwo-zgody__tytul {
  margin: 0 0 6px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* max-width: bez limitu tekst szedł na 87 znaków w wierszu na 720 px.
   36em = 72 znaki przy realnej szerokości znaku 0,50 em. */
.ogniwo-zgody__opis { margin: 0 0 14px; color: #b7afa4; max-width: 36em; }

.ogniwo-zgody__opis a {
  color: #f1eadf;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.ogniwo-zgody__akcje {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.ogniwo-zgody__akcje button {
  font: inherit;
  cursor: pointer;
  border-radius: 2px;
  padding: 10px 18px;
  border: 1px solid rgba(241, 234, 223, 0.26);
  background: transparent;
  color: #f1eadf;
  /* Tempo kanoniczne (było 0.15s ease — obce i tempo, i krzywa).
     Krzywa wpisana wprost, bo ten arkusz jest samodzielny: nie definiuje własnego :root
     i nie ma gwarancji, że dokument, który go załaduje, dostarczy --ease. Dziś dostarcza
     go każda z 46 stron, więc var(--ease) też by zadziałał — to zabezpieczenie na przyszłość,
     nie konieczność. (Zmienne CSS działają przez cały dokument, nie w obrębie pliku.) */
  transition: background 0.2s cubic-bezier(0.2, 0.75, 0.2, 1), color 0.2s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.ogniwo-zgody__akcje button:hover { background: rgba(241, 234, 223, 0.08); }

.ogniwo-zgody__akcje .ogniwo-zgody__glowny {
  background: #f1eadf;
  color: #0a0908;
  border-color: #f1eadf;
  font-weight: 700;
}

.ogniwo-zgody__akcje .ogniwo-zgody__glowny:hover { background: #fffaf1; }

.ogniwo-zgody__szczegoly { margin: 0 0 14px; }

.ogniwo-zgody__szczegoly[hidden] { display: none; }

.ogniwo-zgody__kategoria {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 0;
  border-top: 1px solid rgba(241, 234, 223, 0.14);
}

.ogniwo-zgody__kategoria input {
  margin-top: 4px;
  width: 16px;
  height: 16px;
  accent-color: #ff5a1f;
  flex: none;
}

.ogniwo-zgody__kategoria strong { display: block; }

.ogniwo-zgody__kategoria small { color: #928a80; display: block; }

@media (max-width: 560px) {
  .ogniwo-zgody { inset: auto 8px 8px 8px; padding: 16px; }
  .ogniwo-zgody__akcje button { flex: 1 1 auto; }
}

/* ── PRZEGLĄD 2026-08-17: kompakt na niskich viewportach ─────────────────────
   Zmierzone: przy 720×800 baner (199 px) przykrywał 100% wysokości hero-CTA,
   przy 390×844 — 32 px. Baner musi się pokazać (zgody), ale na niskich oknach
   ma zabierać mniej: ciaśniejsze pole, mniejszy opis, przyciski w wierszu.
   Wysokość ~199→~150 px; treść i przyciski bez zmian. */
@media (max-height: 850px) {
  .ogniwo-zgody {
    padding: 12px 16px;
    font-size: 0.8125rem;
    line-height: 1.45;
    max-height: 40vh;
    overflow-y: auto;
  }
  .ogniwo-zgody__tytul { margin-bottom: 4px; font-size: 0.9375rem; }
  .ogniwo-zgody__opis { margin-bottom: 10px; }
  .ogniwo-zgody__akcje { gap: 8px; }
  .ogniwo-zgody__akcje button { padding: 8px 14px; }
}

/* ── Decyzja Mateusza 2026-08-18: wariant minimalny na telefonach ────────────
   Zmierzone (projekt vs stan): @720×800 zasłanianie hero-CTA 59→4 px,
   wysokość banera 155→103 px; @390 wysokość 200→120 px. Pełna treść zgód
   i trzy przyciski BEZ ZMIAN — zmienia się wyłącznie forma: jednoliniowy
   pasek przyklejony do dołu, przyciski w jednym rzędzie. */
@media (max-width: 720px) {
  .ogniwo-zgody {
    inset: auto 0 0 0;
    max-width: none;
    border-left: 0; border-right: 0; border-bottom: 0;
    border-radius: 0;
    padding: 10px 14px 12px;
    font-size: 0.78125rem;
    line-height: 1.4;
  }
  .ogniwo-zgody__tytul { display: inline; margin: 0 6px 0 0; font-size: 0.8125rem; }
  .ogniwo-zgody__opis { display: inline; margin: 0; }
  .ogniwo-zgody__akcje { margin-top: 8px; gap: 6px; flex-wrap: nowrap; }
  .ogniwo-zgody__akcje button { flex: 1 1 0; padding: 8px 6px; font-size: 0.78125rem; white-space: nowrap; }
}