/**
 * Pasek zgód i panel ustawień cookies.
 *
 * Ten sam system co reszta sklepu: kremowa karta, włoskowate linie, brak
 * cieni pod kartami, etykiety wersalikami. Pasek nie przykrywa treści na
 * stałe: siedzi u dołu okna i zwalnia miejsce po decyzji.
 *
 * Kolory biorą się z tokenów motywu. Gdyby wtyczka trafiła na inny motyw,
 * wartości zapasowe po przecinku trzymają czytelność.
 */

.gp-ciasteczka[hidden] {
  display: none !important;
}

/* --------------------------------------------------------------- PASEK */
.gp-ciasteczka-pasek {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 900;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  padding: 20px 24px;
  background-color: var(--gp-kolor-karta-pole, #FFFDF8);
  border-top: 1px solid var(--gp-kolor-obrys, #E2D9CC);
}

.gp-ciasteczka-tresc {
  flex: 1 1 420px;
  min-width: 0;
}

.gp-ciasteczka-etykieta {
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gp-kolor-tekst-pomocniczy, #756D64);
}

.gp-ciasteczka-opis {
  margin: 0;
  /* BEZ `max-width`. Zdjete 2026-09-09: akapit zajmowal 72 procent szerokosci
     paska i zostawial pusty pas po prawej, przez co zdanie lamalo sie wczesniej,
     niz musialo. Wlasciciel zglaszal to dwa razy. Waskosc kolumny w tym pasku
     robi siatka (`gp-ciasteczka-tresc`), nie ograniczenie na akapicie. */
  font-size: 14px;
  line-height: 1.6;
  color: var(--gp-kolor-tekst-drugi, #57514A);
  /* Przeglądarka wyrównuje wtedy długość wierszy i nie zostawia sierot,
     czyli jednego słowa w ostatnim wierszu. Tam, gdzie nie jest wspierane,
     nic się nie psuje: to tylko lepszy podział tego samego tekstu. */
  text-wrap: pretty;
}

/* Każde zdanie zaczyna własny wiersz. Nie łamiemy przez `<br>`, bo na wąskim
   ekranie zdanie i tak musi się zawinąć: blok pozwala mu się zawinąć, ale nie
   pozwala zacząć w połowie poprzedniego. */
.gp-ciasteczka-zdanie {
  display: block;
}

.gp-ciasteczka-odnosnik {
  color: var(--gp-kolor-akcent, #AE4826);
  text-decoration: none;
  font-weight: 600;
}

.gp-ciasteczka-odnosnik:hover,
.gp-ciasteczka-odnosnik:focus-visible {
  text-decoration: underline;
}

/* Odmowa ma być tak samo łatwa jak zgoda: oba przyciski tej samej wielkości,
   obok siebie, bez wyszarzania tego, którego wolelibyśmy uniknąć. */
.gp-ciasteczka-przyciski {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

/* RÓWNE PRZYCISKI, NIE „PRAWIE RÓWNE" (2026-09-08).
   Przy `min-width: 190px` przycisk zgody rozpychał się treścią do 207 px,
   a odmowa zostawała na 190. Siedemnaście pikseli różnicy to już przewaga
   wizualna jednej opcji, czyli dokładnie to, czego wytyczne zakazują.
   Złapała to brama `sprawdz-ciasteczka.js`, nie oko. */
.gp-ciasteczka-przyciski .gp-btn-primary,
.gp-ciasteczka-przyciski .gp-btn-secondary,
.gp-ciasteczka-panel-przyciski .gp-btn-primary,
.gp-ciasteczka-panel-przyciski .gp-btn-secondary {
  width: 212px;
  justify-content: center;
  text-align: center;
}

.gp-ciasteczka-ustawienia {
  padding: 0;
  border: 0;
  background: none;
  color: var(--gp-kolor-tekst-drugi, #57514A);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.gp-ciasteczka-ustawienia:hover,
.gp-ciasteczka-ustawienia:focus-visible {
  color: var(--gp-kolor-akcent, #AE4826);
}

/* --------------------------------------------------------------- PANEL */
.gp-ciasteczka-panel {
  position: fixed;
  inset: 0;
  z-index: 950;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background-color: var(--gp-kolor-nakladka, rgba(35, 32, 27, 0.40));
}

.gp-ciasteczka-panel[hidden] {
  display: none;
}

.gp-ciasteczka-panel-karta {
  width: 100%;
  max-width: 560px;
  max-height: 86vh;
  overflow-y: auto;
  padding: 28px;
  background-color: var(--gp-kolor-karta-pole, #FFFDF8);
  border: 1px solid var(--gp-kolor-obrys, #E2D9CC);
  border-radius: var(--gp-promien-karta, 12px);
}

.gp-ciasteczka-panel-tytul {
  margin: 0 0 8px;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 600;
  color: var(--gp-kolor-tekst-glowny, #23201B);
}

.gp-ciasteczka-panel-opis {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gp-kolor-tekst-pomocniczy, #756D64);
}

.gp-ciasteczka-kategoria {
  padding: 16px 0;
  border-top: 1px solid var(--gp-kolor-obrys, #E2D9CC);
}

.gp-ciasteczka-nazwa {
  font-size: 15px;
  font-weight: 600;
  color: var(--gp-kolor-tekst-glowny, #23201B);
}

.gp-ciasteczka-kategoria-opis {
  margin: 6px 0 0 32px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gp-kolor-tekst-drugi, #57514A);
}

/* Kategoria włączona na stałe: znacznik zostaje ZAZNACZONY w pełnym kolorze,
   bo wygaszony kwadracik z ledwo widocznym znakiem czytało się jak pole
   puste i nieaktywne, czyli dokładnie odwrotnie, niż jest. Że nie da się go
   odznaczyć, mówi `disabled` i zdanie „są włączone zawsze" pod spodem. */
.gp-ciasteczka-kategoria .gp-opcja-wyboru input[type="checkbox"]:disabled + .gp-znacznik-kwadrat {
  opacity: 1;
  cursor: default;
}

.gp-ciasteczka-kategoria input:disabled ~ .gp-ciasteczka-nazwa {
  color: var(--gp-kolor-tekst-glowny, #23201B);
}

.gp-ciasteczka-panel-przyciski {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--gp-kolor-obrys, #E2D9CC);
}

@media (max-width: 767px) {
  .gp-ciasteczka-pasek {
    gap: 16px;
    padding: 16px;
  }

  .gp-ciasteczka-przyciski,
  .gp-ciasteczka-panel-przyciski {
    width: 100%;
  }

  .gp-ciasteczka-przyciski .gp-btn-primary,
  .gp-ciasteczka-przyciski .gp-btn-secondary,
  .gp-ciasteczka-panel-przyciski .gp-btn-primary,
  .gp-ciasteczka-panel-przyciski .gp-btn-secondary {
    flex: 1 1 100%;
    min-width: 0;
  }

  .gp-ciasteczka-ustawienia {
    width: 100%;
    text-align: center;
  }
}

/* --------------------------------------------------------------------------
   TELEFON: PASEK ZGOD ZAJMOWAL 37 PROCENT EKRANU, poprawione 2026-09-10.

   Zmierzone przy 390 px: 308 px wysokosci, czyli ponad jedna trzecia widoku.
   Pasek zaslanial to, na co uzytkownik wlasnie patrzy, i wymuszal decyzje,
   zanim cokolwiek zobaczyl. Glowna przyczyna: kazdy z trzech przyciskow
   dostawal `flex: 1 1 100%`, wiec staly jeden pod drugim.

   Dwa przyciski decyzji ida teraz obok siebie, Ustawienia zostaja osobno
   jako odnosnik, a etykieta i odstepy sa mniejsze. Tresc zostaje bez zmian:
   zgoda ma byc czytelna, a nie schowana.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .gp-ciasteczka-pasek {
    gap: 10px;
    padding: 12px 14px;
  }

  .gp-ciasteczka-etykieta {
    font-size: 10px;
    margin-bottom: 4px;
  }

  .gp-ciasteczka-opis {
    font-size: 13px;
    line-height: 1.5;
  }

  .gp-ciasteczka-przyciski {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Dwie decyzje obok siebie. Trzeci element to odnosnik, nie decyzja. */
  .gp-ciasteczka-przyciski .gp-btn-primary,
  .gp-ciasteczka-przyciski .gp-btn-secondary {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    padding-left: 10px;
    padding-right: 10px;
    font-size: 13px;
  }

  .gp-ciasteczka-ustawienia {
    flex: 1 1 100%;
    width: auto;
    text-align: center;
    font-size: 13px;
    padding: 2px 0 0;
  }
}

/*
 * Etykieta „PLIKI COOKIES” w pasku zgod miala 10 px na telefonie, czyli
 * ponizej najmniejszego rozmiaru w skali projektu (11 px). Zmierzone
 * 2026-09-10 na 360 i 390 px. To naglowek komunikatu o zgodzie, wiec ma byc
 * czytelny bez zblizania ekranu.
 */
@media (max-width: 991px) {
  .gp-ciasteczka-etykieta {
    font-size: 11px;
  }
}