/* Baner zgód — Norwit / toolsa.eu. Wyłącznie tokeny systemu (01-fundamenty/tokens.css).
   Audyt zgodności: 21-cookies/README.md. */

.tszg-schowany { display: none !important; }

.tszg {
  position: fixed; inset: auto 0 0 0; z-index: 1100;
  display: flex; justify-content: flex-start;
  padding: var(--space-4); pointer-events: none; font-size: var(--size-ui);
}

/* container-type: układ stopki zależy od szerokości KARTY, nie okna — ten sam
   komponent siedzi w motywie PrestaShopa i w Nuxcie, w różnych kontekstach */
.tszg__karta {
  container-type: inline-size; pointer-events: auto;
  /* Komponent stoi w dwóch różnych frontach — krój i kolor deklaruje sam,
     zamiast liczyć na to, co odziedziczy po stronie gospodarza. */
  font-family: var(--font-body); color: var(--text-default);
  width: min(560px, 100%); background: var(--surface-base);
  border: 1px solid var(--border-card); border-radius: var(--radius-card);
  box-shadow: var(--shadow-overlay);
  max-height: calc(100vh - var(--space-8));
  display: flex; flex-direction: column; overflow: hidden;
}

/* pasek marki: jedyne miejsce na czerwień — nigdy na przycisku wyboru */
.tszg__akcent { height: 3px; background: var(--action-primary); flex: none; }

.tszg__ciało { padding: var(--space-5); overflow: auto; }
.tszg__tekst { margin: 0; line-height: 1.6; color: var(--text-default); }
.tszg__tekst a {
  color: var(--text-accent); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.tszg__tekst a:hover { color: var(--action-primary-hover); }

.tszg__stopka {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-top: 1px solid var(--border-divider);
  background: var(--surface-subtle); flex: none;
}

.tszg__btn {
  font: inherit; font-family: var(--font-condensed); font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; font-size: var(--size-ui);
  min-height: 44px; padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control); cursor: pointer;
  border: 1px solid transparent; line-height: 1.2;
  transition: background var(--motion-fast) var(--motion-easing);
}

/* Dwie równe kolumny siatki: identyczna szerokość I wysokość na każdej szerokości
   karty. Nierówna waga przycisku wyboru to wzorzec zwodniczy — CNIL ukarał za to
   Google (150 mln €) i Facebooka (60 mln €). */
.tszg__btn--wybor {
  min-width: 0; background: var(--neutral-12);
  color: var(--text-on-dark-high); border-color: var(--neutral-12);
}
.tszg__btn--wybor:hover { background: var(--surface-dark-raised); }

/* trzecia akcja zawsze w osobnym rzędzie, na pełną szerokość */
.tszg__btn--drugorzedny {
  grid-column: 1 / -1; background: transparent; color: var(--text-secondary);
  border-color: var(--border-strong); text-transform: none;
  font-family: var(--font-body); letter-spacing: 0;
}
.tszg__btn--drugorzedny:hover { background: var(--surface-sunken); color: var(--text-default); }

/* pierścień fokusu wg fundamentów: 2 px + offset 2 px, red.8, na wszystkim interaktywnym */
.tszg__btn:focus-visible,
.tszg__przelacznik input:focus-visible + .tszg__tor,
.tszg__wroc:focus-visible,
.tszg__ikona:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

.tszg__naglowek {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-3); margin: 0 0 var(--space-4);
}
.tszg__tytul {
  font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .04em;
  font-weight: 600; font-size: var(--size-ui); margin: 0;
}
.tszg__wroc {
  font: inherit; font-size: var(--size-ui-sm); background: none; border: 0;
  padding: var(--space-1); color: var(--text-secondary); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}

.tszg__grupa { border-top: 1px solid var(--border-divider); padding: var(--space-4) 0; }
.tszg__grupa:first-of-type { border-top: 0; padding-top: 0; }
.tszg__wiersz { display: flex; gap: var(--space-4); align-items: flex-start; justify-content: space-between; }
/* Motyw ma tylko IBM Plex Sans 400 — wyróżniamy krojem zwężonym, nie sztucznym
   pogrubieniem (fundament 02: nigdy inne wagi niż wymienione). */
.tszg__nazwa {
  font-family: var(--font-condensed); font-weight: 600; letter-spacing: .02em;
  font-size: var(--size-0); margin: 0 0 var(--space-1);
}
.tszg__cel { margin: 0; color: var(--text-secondary); font-size: var(--size-ui-sm); line-height: 1.55; max-width: 44ch; }
/* Nazwy odbiorców danych mają być czytelne, nie schowane — wymienienie ich z nazwy
   to wymóg polityki Google w sprawie zgody użytkownika z UE. Krój zwężony, bo
   IBM Plex Sans jest w motywie tylko w wadze 400. */
.tszg__kto {
  margin: var(--space-2) 0 0; font-size: var(--size-caption);
  font-family: var(--font-condensed); font-weight: 600; letter-spacing: .02em;
  color: var(--text-default);
}

/* przełącznik 52×32 — powyżej progu 24×24 z WCAG 2.5.8.
   Promień: radius.control, bo radius.pill jest w sklepie zakazany (fundament 03 §2). */
.tszg__przelacznik { flex: none; position: relative; display: inline-flex; align-items: center; cursor: pointer; padding: 6px; }
.tszg__przelacznik input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.tszg__etykieta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tszg__tor {
  width: 52px; height: 32px; border-radius: var(--radius-control);
  background: var(--neutral-7); border: 1px solid var(--border-input); position: relative;
  transition: background var(--motion-fast) var(--motion-easing);
}
.tszg__tor::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px;
  background: var(--white); box-shadow: var(--shadow-raised);
  border-radius: var(--radius-control);
  transition: transform var(--motion-fast) var(--motion-easing);
}
.tszg__przelacznik input:checked + .tszg__tor { background: var(--neutral-12); border-color: var(--neutral-12); }
.tszg__przelacznik input:checked + .tszg__tor::after { transform: translateX(20px); }
.tszg__zawsze { flex: none; font-size: var(--size-caption); color: var(--text-secondary); white-space: nowrap; align-self: center; }

/* Ikona powrotu — geometria 1:1 z produkcyjnym .tsfab__btn--gora.
   Trapez na elemencie interaktywnym: świadome odstępstwo od fundamentu 03 §3,
   decyzja Magdy 2026-08-31 (produkcja i tak ma tak zbudowane FAB-y). */
.tszg__ikona {
  position: fixed; left: var(--space-4); bottom: var(--space-5); z-index: 1090;
  width: 70px; height: 56px; display: flex; align-items: center; justify-content: center;
  padding: 0; border: 0; background: none; cursor: pointer; color: var(--action-primary);
  -webkit-tap-highlight-color: transparent;
  /* drop-shadow, bo box-shadow nie podąża za clip-path; wartości = shadow.raised */
  filter: drop-shadow(0 1px 2px rgba(29,29,26,.06)) drop-shadow(0 2px 8px rgba(29,29,26,.08));
}
.tszg__ikona-ramka {
  position: absolute; inset: 0; background: var(--action-primary);
  clip-path: polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
}
.tszg__ikona-lico {
  position: absolute; inset: 2px; background: var(--surface-base);
  clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  transition: background var(--motion-fast) var(--motion-easing);
}
.tszg__ikona:hover { color: var(--white); }
.tszg__ikona:hover .tszg__ikona-lico { background: var(--action-primary); }
.tszg__ikona svg {
  position: relative; width: 22px; height: 22px; stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 575.98px) {
  .tszg { padding: var(--space-2); }
  .tszg__karta { width: 100%; }
  .tszg__ciało { padding: var(--space-4); }
  .tszg__stopka { padding: var(--space-3) var(--space-4); }
}

/* Poniżej 400 px karty etykiety łamałyby się na dwie linie — wtedy jeden pod drugim,
   nadal identyczne. Kolejność z DOM: „Odrzuć" nigdy nie ląduje na końcu. */
@container (max-width: 400px) {
  .tszg__stopka { grid-template-columns: 1fr; }
}

/* ── Ruch ─────────────────────────────────────────────────────────────────
   Język wzięty z nagłówka i strony głównej, nie wymyślony:
   wciśnięcie = drobna skala w dół przy motion.fast (.hd-mob-kafel:active scale(.97),
   .hd-mob-jezyk:active scale(.95)), pojawianie = opacity + translateY(8px)
   przy motion.base (.tsfab__btn--gora). Fundament 03 §7 zabrania pulsowania
   bez zmiany stanu i animowanych poświat — nic takiego tu nie ma.
   prefers-reduced-motion zeruje tokeny ruchu, więc wszystko poniżej znika samo. */

.tszg__karta { animation: tszg-wejscie var(--motion-base) var(--motion-easing) both; }
@keyframes tszg-wejscie { from { opacity: 0; transform: translateY(8px); } }

.tszg__btn { transition: background var(--motion-fast) var(--motion-easing), transform var(--motion-fast) var(--motion-easing); }
.tszg__btn--wybor:active { transform: scale(.97); }
.tszg__btn--drugorzedny:active { transform: scale(.97); }
.tszg__wroc:active { transform: scale(.95); }

.tszg__ikona { transition: transform var(--motion-fast) var(--motion-easing); animation: tszg-wejscie var(--motion-base) var(--motion-easing) both; }
.tszg__ikona:active { transform: scale(.95); }

.tszg__przelacznik:active .tszg__tor { transform: scale(.97); }
.tszg__tor { transition: background var(--motion-fast) var(--motion-easing), transform var(--motion-fast) var(--motion-easing); }

/* Zmiana warstwy: karta płynnie zmienia wysokość (JS podaje wartości docelowe),
   a treść przenika. Wysokość animujemy, bo karta stoi przy dolnej krawędzi
   i rośnie w górę — skok o 300 px byłby szarpnięciem. */
.tszg__karta--przejscie { transition: height var(--motion-base) var(--motion-easing); overflow: hidden; }
.tszg__ciało { transition: opacity var(--motion-fast) var(--motion-easing); }
.tszg__ciało--gasnie { opacity: 0; }

/* W trakcie zmiany wysokości treść jest chwilowo wyższa od karty, więc overflow:auto
   pokazywał suwak na ułamek sekundy i zaraz go chował — treść mrugała. Na czas
   przejścia przewijanie wewnętrzne gasimy; wraca po dojechaniu do pełnej wysokości. */
.tszg__karta--przejscie .tszg__ciało { overflow: hidden; }

/* Na telefonie lewy dolny róg zajmuje kolumna motywu `.tsfab--lewy` z przyciskiem telefonu.
   Ma SZTYWNE 56 px wysokości i dolną krawędź 24 px od dołu okna (zmierzone na produkcji,
   375×812) — mieści dokładnie jeden przycisk, więc dostawienie się do środka ją rozwala.
   Ikona zgód staje NAD nią, z tym samym odstępem 12 px co między przyciskami motywu. */
@media (max-width: 767px) {
  .tszg__ikona { bottom: calc(24px + 56px + 12px); }
}

/* Motyw rysuje czerwony pierścień na WSZYSTKIM, co dostanie fokus
   (`:focus-visible{outline:2px solid var(--action-primary)}`). Karta ma `tabindex="-1"`
   i dostaje fokus programowo przy otwarciu ikoną — jest pojemnikiem, nie kontrolką,
   więc obrys jej się nie należy. Pierścienie zostają tam, gdzie mają być: na przyciskach,
   przełącznikach i linkach. */
.tszg__karta:focus, .tszg__karta:focus-visible { outline: none; }