/* ==========================================================================
   Baner zgody na Google Analytics (layouts/_consent, lib/consent.js).
   Desktop: pływająca karta w lewym dolnym rogu. Telefon: arkusz nad dolną nawigacją.
   Strona odtwarzania (albo baner zachodzący na player): smukły pasek przy dolnej krawędzi.
   Wejście 220 ms translateY(16px)+opacity, wyjście 150 ms; reduced motion: samo przenikanie.
   ========================================================================== */
.consent {
  position: fixed;
  z-index: 250; /* nad tabbarem i podglądem kart, pod toastami */
  left: 24px;
  bottom: 24px;
  width: min(420px, calc(100vw - 48px));
  display: grid;
  gap: 12px;
  padding: 18px 18px 16px;
  background: rgba(14, 16, 24, .96);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  opacity: 1;
  transform: translateY(0);
  transition: opacity 220ms var(--ease-out), transform 220ms var(--ease-out);
}
@starting-style {
  .consent { opacity: 0; transform: translateY(16px); }
}
.consent[hidden] { display: none; }
.consent.is-leaving { opacity: 0; transform: translateY(8px); transition-duration: var(--dur-1); }
.consent.is-instant { transition: none; }
.consent:focus { outline: none; }
.consent:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
html.no-js .consent, html.legacy-js .consent { display: none; } /* bez modułów JS przyciski i tak by nie działały, a GA nigdy się nie ładuje */

.consent__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.consent__title {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--text);
}
.consent__title::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 12px var(--accent-glow);
  vertical-align: .12em;
}
.consent__more { display: none; flex: none; font-size: var(--fs-sm); font-weight: 600; color: var(--accent-hi); text-decoration: underline; text-underline-offset: 3px; }
.consent__text { font-size: var(--fs-sm); line-height: 1.55; color: var(--text-muted); text-wrap: pretty; }
.consent__text a { color: var(--accent-hi); text-decoration: underline; text-underline-offset: 3px; }

/* --- Ustawienia --- */
.consent__panel { border-top: 1px solid var(--line); }
.consent__options { border: 0; padding: 0; min-width: 0; }
.consent__option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.consent__option:has(:disabled) { cursor: default; }
.consent__option-name { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.consent__option-desc { display: block; margin-top: 2px; font-size: var(--fs-xs); line-height: 1.45; color: var(--text-muted); }

.consent__switch {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: none;
  width: 40px;
  height: 24px;
  margin: 0;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  cursor: pointer;
  transition: background-color var(--dur-2) ease;
}
.consent__switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
  transition: transform var(--dur-2) var(--ease-out), background-color var(--dur-2) ease;
}
.consent__switch:checked { background: var(--accent); box-shadow: none; }
.consent__switch:checked::before { transform: translateX(16px); background: var(--accent-ink); }
.consent__switch:disabled { opacity: .5; cursor: default; }
.consent__switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* --- Przyciski: „Akceptuję” i „Odrzucam” identyczne (bez dark patterns) --- */
.consent__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; }
.consent__settings {
  margin-right: auto;
  min-height: 36px;
  padding: 0 2px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--dur-2) ease;
}
/* Otwarty panel: przełącznik „Ustawienia” znika (fokus idzie na przełącznik analityki), zostają trzy równe przyciski. */
.consent__settings[aria-expanded="true"] { display: none; }
@media (min-width: 768px) {
  .consent__actions:has([data-consent-save]:not([hidden])) { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .consent__actions:has([data-consent-save]:not([hidden])) .consent__choice { min-width: 0; }
}
.consent__choice {
  min-width: 104px;
  background: var(--surface-2);
  border: 1px solid var(--line-strong);
  color: var(--text);
}
.consent__choice[hidden] { display: none; }
/* Zgoda wyróżniona bursztynem; „Odrzucam” ma ten sam rozmiar i pełny kontrast tekstu — nie chowamy go. */
.consent__choice.btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}
@media (hover: hover) and (pointer: fine) {
  .consent__settings:hover { color: var(--text); }
  .consent__choice:hover { background: #262b42; border-color: rgba(255, 255, 255, .3); }
  .consent__choice.btn--primary:hover { background: var(--accent-hi); border-color: var(--accent-hi); }
}

/* --- Telefon: arkusz nad dolną nawigacją --- */
@media (max-width: 767px) {
  .consent {
    left: 0;
    right: 0;
    bottom: var(--tabbar-h);
    width: auto;
    padding: 18px 16px 14px;
    border-width: 1px 0 0;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-shadow: 0 -18px 40px -16px rgba(0, 0, 0, .7);
  }
  .is-bare .consent { bottom: 0; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .consent__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .consent__choice { min-width: 0; }
  .consent__choice[data-consent-save] { grid-column: 1 / -1; }
  .consent__settings { grid-column: 1 / -1; grid-row: 3; justify-self: center; margin: 0; min-height: 32px; }
}

/* --- Smukły pasek: strona odtwarzania albo baner zachodzący na player --- */
.page-watch .consent, .consent.consent--slim {
  left: 0;
  right: 0;
  bottom: 0;
  width: auto;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 20px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  border-width: 1px 0 0;
  border-radius: 0;
  box-shadow: 0 -12px 32px -16px rgba(0, 0, 0, .7);
}
.page-watch .consent .consent__text, .consent--slim .consent__text { display: none; }
.page-watch .consent .consent__more, .consent--slim .consent__more { display: inline; }
.page-watch .consent .consent__head, .consent--slim .consent__head { justify-content: flex-start; }
.page-watch .consent .consent__title, .consent--slim .consent__title { font-size: var(--fs-sm); }
.page-watch .consent .consent__panel, .consent--slim .consent__panel { grid-column: 1 / -1; grid-row: 2; }
.page-watch .consent .consent__actions, .consent--slim .consent__actions { flex-wrap: nowrap; }
.page-watch .consent .consent__settings, .consent--slim .consent__settings { margin-right: 4px; }
@media (max-width: 767px) {
  .page-watch .consent, .consent.consent--slim { grid-template-columns: 1fr; padding-top: 12px; }
  .page-watch .consent .consent__panel, .consent--slim .consent__panel { grid-row: auto; }
  .page-watch .consent .consent__actions, .consent--slim .consent__actions { grid-template-columns: 1fr 1fr; }
  .page-watch .consent .consent__settings, .consent--slim .consent__settings { margin: 0; min-height: 28px; }
}

/* --- Ruch: reduced motion = samo przenikanie --- */
@media (prefers-reduced-motion: reduce) {
  .consent, .consent.is-leaving { transform: none; }
  @starting-style { .consent { opacity: 0; transform: none; } }
  .consent__switch, .consent__switch::before { transition: none; }
}

/* Link w stopce */
.footer__consent { color: var(--text); font-weight: 500; font-size: inherit; text-align: left; }
@media (hover: hover) and (pointer: fine) {
  .footer__consent:hover { color: var(--accent-hi); }
}

/* Przycisk wyglądający jak link (np. „tutaj” w polityce prywatności) */
.link-button { font: inherit; color: var(--accent-hi); text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   Bramka przy pierwszej wizycie (lib/consent.js → html.consent-gate):
   strona przyciemniona i lekko rozmyta, karta na środku; po wyborze (oba przyciski!)
   treść wraca w 320 ms. Strona odtwarzania nigdy nie dostaje bramki (player YouTube).
   ========================================================================== */
html.consent-gate { overflow: hidden; }
html.consent-gate body > *:not(#consent):not(.skip-link) {
  opacity: .22;
  filter: blur(6px) saturate(80%);
  pointer-events: none;
  user-select: none;
}
html.is-revealing body > *:not(#consent):not(.skip-link) {
  transition: opacity 320ms var(--ease-out), filter 320ms var(--ease-out);
}
.consent.consent--gate {
  left: 50%;
  top: 50%;
  bottom: auto;
  width: min(480px, calc(100vw - 32px));
  padding: 24px 22px 20px;
  gap: 14px;
  transform: translate(-50%, -50%);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 0 1px rgba(245, 165, 36, .14);
  transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
}
@starting-style {
  .consent.consent--gate { opacity: 0; transform: translate(-50%, -48%) scale(.97); }
}
.consent.consent--gate.is-leaving { opacity: 0; transform: translate(-50%, -50%) scale(.98); transition-duration: 180ms; }
.consent--gate .consent__title { font-size: var(--fs-lg); }
.consent--gate .consent__actions { display: grid; grid-template-columns: 1fr 1fr; }
.consent--gate .consent__settings { grid-column: 1 / -1; order: 3; justify-self: center; }
.consent--gate .consent__choice { min-height: 48px; }
@media (max-width: 600px) {
  html.consent-gate body > *:not(#consent):not(.skip-link) { filter: none; } /* blur na całej stronie jest drogi na telefonie */
  .consent.consent--gate { top: auto; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); }
  @starting-style { .consent.consent--gate { opacity: 0; transform: translate(-50%, 16px); } }
  .consent.consent--gate.is-leaving { transform: translate(-50%, 8px); }
}
@media (prefers-reduced-motion: reduce) {
  html.consent-gate body > *:not(#consent):not(.skip-link) { filter: none; }
  .consent.consent--gate, .consent.consent--gate.is-leaving { transform: translate(-50%, -50%); }
  @starting-style { .consent.consent--gate { transform: translate(-50%, -50%); } }
}
@media (prefers-reduced-motion: reduce) and (max-width: 600px) {
  .consent.consent--gate, .consent.consent--gate.is-leaving { transform: translateX(-50%); }
  @starting-style { .consent.consent--gate { transform: translateX(-50%); } }
}
/* Ciemna nakładka pod kartą bramki — na telefonie (bez blur) to ona „chowa” stronę. */
html.consent-gate body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 240; /* pod banerem (250) */
  background: radial-gradient(120% 90% at 50% 60%, rgba(7, 8, 13, .55), rgba(7, 8, 13, .85));
  pointer-events: none;
}