/**
 * BP | Zgody - wygląd banera.
 *
 * JEDNOSTKI: `rem`, bo podstawa jest ustawiona przez motyw
 * (`html { font-size: 62.5% }`, czyli 1rem = 10px przy 1440 px).
 * Piksel zostaje tam, gdzie skalowanie jest niepożądane: włos ramki,
 * cień, promień zaokrąglenia.
 *
 * KOLORY ze zmiennych motywu, z wartościami zapasowymi. Baner ma
 * wyglądać jak część strony, a nie jak wklejone okienko - a jednocześnie
 * musi być czytelny na witrynie, która tych zmiennych nie ma
 * (np. zaraz po przenosinach, zanim motyw dojedzie).
 *
 * TEKST NIE SCHODZI PONIŻEJ 1.6rem. Standard wizualny, punkt 7.
 * Baner zgód jest jednym z najczęściej łamiących tę zasadę elementów
 * na stronach - drobny druk jest tu domyślnym odruchem i jest błędem.
 */

/* --- nakładka ------------------------------------------------------- *
 *
 * Przyciemnienie strony pod oknem. Nie jest ozdobnikiem: okno stojące
 * na środku musi być odróżnialne od treści, inaczej czyta się je jak
 * kolejną sekcję i klika bez świadomości, że się decyduje.
 *
 * NIE REAGUJE NA KLIKNIĘCIE. Zamknięcie okna kliknięciem obok nie jest
 * zgodą - wytyczne EROD mówią o tym wprost - a okno zamknięte bez wyboru
 * wyglądałoby jak wybór.
 */

.bpz-nakladka {
	position: fixed;
	z-index: 99985;
	inset: 0;
	background: rgba(2, 6, 23, .62);
	animation: bpz-wejscie .18s ease both;
}

.bpz-nakladka[hidden] {
	display: none;
}

/* Zablokowane przewijanie strony pod oknem. */
body.bpz-bez-przewijania {
	overflow: hidden;
}

@keyframes bpz-wejscie {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* --- okno ----------------------------------------------------------- *
 *
 * OKNO NA ŚRODKU, nie w rogu. Decyzja o zgodzie jest decyzją, a nie
 * powiadomieniem - i ma tak wyglądać. W rogu ekranu baner konkuruje
 * z treścią i bywa zamykany odruchowo, bez czytania.
 */

.bpz {
	position: fixed;
	z-index: 99990;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	pointer-events: none;
}

.bpz[hidden] {
	display: none;
}

.bpz__okno {
	display: flex;
	flex-direction: column;
	width: min(86rem, 100%);

	/*
	 * `dvh`, nie `vh`: na telefonie pasek adresu chowa się przy
	 * przewijaniu i `vh` przez chwilę wskazuje wysokość sprzed zmiany.
	 * Okno wystawałoby wtedy poza ekran razem z przyciskami.
	 */
	max-height: calc(100dvh - 4rem);
	overflow: hidden;
	pointer-events: auto;
	background: var(--bp-biel, #fff);
	border: 1px solid var(--bp-ramka-lekka, #e2e8f0);
	border-radius: 1.6rem;
	box-shadow: 0 20px 60px rgba(2, 6, 23, .28);
	font-family: var(--bp-pismo, system-ui, -apple-system, 'Segoe UI', sans-serif);
	color: var(--bp-tekst, #1e293b);
	animation: bpz-okno-wejscie .22s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes bpz-okno-wejscie {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* --- zakładki ------------------------------------------------------- */

.bpz__zakladki {
	display: flex;
	flex: 0 0 auto;
	border-bottom: 1px solid var(--bp-ramka-lekka, #e2e8f0);
}

.bpz-zakladka {
	flex: 1 1 0;
	padding: 1.8rem 1.2rem;
	font: inherit;
	font-size: 1.6rem;
	font-weight: 500;
	color: var(--bp-tekst-2, #475569);
	background: none;
	border: 0;

	/*
	 * Kreska pod aktywną zakładką rysowana ramką dolną, która jest
	 * PRZEZROCZYSTA na nieaktywnych. Gdyby dochodziła dopiero przy
	 * aktywnej, napis przeskakiwałby o 3 px przy każdym przełączeniu.
	 */
	border-bottom: 3px solid transparent;
	margin-bottom: -1px;
	cursor: pointer;
	transition: color .15s ease, border-color .15s ease;
}

.bpz-zakladka:hover {
	color: var(--bp-czern, #020617);
}

.bpz-zakladka--aktywna {
	color: var(--bp-akcent-tekst, var(--bp-akcent, #2563eb));
	border-bottom-color: var(--bp-akcent, #2563eb);
}

.bpz-zakladka:focus-visible {
	outline: 2px solid var(--bp-akcent, #2563eb);
	outline-offset: -2px;
}

/*
 * Panele: przewija się zawartość, nie całe okno razem z zakładkami.
 *
 * WYŚCIÓŁKA 3.6rem, nie 2.6rem. Okno z ciasną wyściółką wygląda jak
 * komunikat systemowy, a nie jak część strony - a to jest element,
 * przy którym odwiedzający ma się zatrzymać i przeczytać. Oddech
 * dookoła treści robi tu więcej niż jakikolwiek inny zabieg.
 */
.bpz__glowna,
.bpz__kategorie,
.bpz__opis {
	padding: 4.4rem;

	/*
	 * `min-height: 0` jest tu konieczne, choć wygląda na zbędne.
	 * Element kolumny flex domyślnie nie kurczy się poniżej swojej
	 * treści, więc bez tego panel z rozwiniętymi tabelami rozpycha okno
	 * zamiast się przewijać - a wtedy stopka wyjeżdża poza dolną
	 * krawędź ekranu razem z przyciskami.
	 */
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.bpz__glowna {
	padding-top: 4rem;
}

.bpz__opis {
	font-size: 1.6rem;
	line-height: 1.6;
	color: var(--bp-tekst-2, #475569);
}

.bpz__podtytul {
	margin: 0 0 .6rem;
	font-size: 1.7rem;
	font-weight: 600;
	color: var(--bp-czern, #020617);
}

.bpz__opis p {
	margin: 0 0 1.8rem;
}

.bpz__opis p:last-child {
	margin-bottom: 0;
}

.bpz__opis a {
	color: var(--bp-akcent-tekst, var(--bp-akcent, #2563eb));
	text-underline-offset: .3rem;
}

.bpz__tytul {
	margin: 0 0 1.2rem;
	font-size: 2.2rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--bp-czern, #020617);
}

.bpz__tresc {
	margin: 0 0 2.8rem;
	font-size: 1.6rem;
	line-height: 1.65;
	color: var(--bp-tekst-2, #475569);
}

.bpz__tresc a {
	color: var(--bp-akcent-tekst, var(--bp-akcent, #2563eb));
	text-underline-offset: .3rem;
}

/*
 * „Odrzuć wszystkie" wpisane w zdanie.
 *
 * `<button>` udający odnośnik: element wykonuje decyzję, więc musi być
 * przyciskiem dla czytnika ekranu i dla klawiatury, a wyglądać ma jak
 * część zdania. Stąd zerowanie wszystkiego, co przeglądarka daje
 * przyciskom, i podkreślenie z powrotem.
 *
 * `font: inherit` MUSI tu być: bez tego przycisk bierze systemowy krój
 * i rozmiar, i w środku akapitu widać go jak wklejkę z innego pisma.
 */
.bpz-odrzuc {
	padding: 0;
	font: inherit;
	color: var(--bp-akcent-tekst, var(--bp-akcent, #2563eb));
	background: none;
	border: 0;
	cursor: pointer;

	/*
	 * BEZ PODKREŚLENIA W SPOCZYNKU - ma wyglądać dokładnie tak samo
	 * jak odnośnik do polityki obok. Dwa elementy o tej samej roli
	 * w jednym zdaniu, różniące się podkreśleniem, wyglądają jak błąd
	 * składu.
	 *
	 * PODKREŚLENIE WRACA PRZY NAJECHANIU I PRZY OGNISKU. Sam kolor nie
	 * wystarcza jako jedyny sygnał, że coś jest klikalne - osoba
	 * nierozróżniająca barw nie ma z czego tego odczytać. Podkreślenie
	 * na najechaniu jest tanim sposobem, żeby ten sygnał jednak był.
	 */
	text-decoration: none;
	text-underline-offset: .3rem;
}

.bpz-odrzuc:hover,
.bpz-odrzuc:focus-visible {
	text-decoration: underline;
}

.bpz-odrzuc:focus-visible {
	outline: 2px solid var(--bp-akcent, #2563eb);
	outline-offset: 2px;
}

/* --- przyciski ------------------------------------------------------ *
 *
 * „Akceptuj wszystkie" i „Odrzuć wszystkie" mają JEDNĄ klasę i JEDEN
 * wygląd. To nie jest kwestia gustu: wytyczne EROD o dark patterns
 * wymagają, żeby odrzucenie było tak samo widoczne jak akceptacja.
 * Gdyby ktoś kiedyś chciał tu wyróżnić akceptację - nie wolno.
 *
 * `flex: 1 1 18rem` daje im równą szerokość i zwija je pod siebie
 * na wąskim ekranie, zamiast ścinać przycisk odrzucenia poza ekran.
 */

.bpz__akcje {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
}

/*
 * PARA PRZYCISKÓW PÓŁ NA PÓŁ.
 *
 * Siatka o dwóch równych kolumnach, nie `flex` z rozciąganiem: `flex`
 * dzieli miejsce po odjęciu treści, więc dłuższy napis dostawałby
 * szerszy przycisk. Przy „Dostosuj opcje" i „Akceptuj wszystkie"
 * różnica byłaby widoczna i wyglądałaby na przypadek.
 *
 * `minmax(0, 1fr)`, nie `1fr`: domyślnie kolumna siatki nie zwęża się
 * poniżej swojej treści i przy długim napisie para wychodziłaby poza okno.
 */
.bpz__akcje--para {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1.2rem;
}

/*
 * KSZTAŁT I PISMO PRZYCISKÓW Z MOTYWU (od 2.5.0). Na stronie z motywem
 * Brand Perspective przyciski baneru mają ten sam kształt, pismo i kolory
 * co każdy przycisk strony (`--bp-btn-...` z „Dostosuj -> Przyciski").
 * Gdzie motywu nie ma, zostają wartości po przecinku - wygląd sprzed 2.5.0.
 */
.bpz-btn {
	flex: 1 1 18rem;
	padding: var(--bp-btn-wysciolka, 1.4rem 2.4rem);
	font: inherit;
	font-family: var(--bp-btn-pismo, inherit);
	font-size: var(--bp-btn-rozmiar, var(--bp-btn-rozmiar-domyslny, 1.6rem));
	font-weight: var(--bp-btn-grubosc, 500);
	letter-spacing: var(--bp-btn-odstep-liter, normal);
	text-transform: var(--bp-btn-litery, none);
	line-height: 1.2;
	text-align: center;
	border: 1px solid transparent;
	border-radius: var(--bp-btn-promien, 1rem);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.bpz-btn--glowny {
	color: var(--bp-btn-napis, var(--bp-biel, #fff));
	background: var(--bp-btn-tlo, var(--bp-akcent, #2563eb));
	background-image: var(--bp-btn-gradient, none);
}

.bpz-btn--glowny:hover,
.bpz-btn--glowny:focus {
	color: var(--bp-btn-napis-hover, var(--bp-biel, #fff));
	background: var(--bp-btn-tlo-hover, var(--bp-akcent-ciemny, #1e40af));
}

/* Drugi przycisk baneru = przycisk konturowy motywu. */
.bpz-btn--lekki {
	flex: 0 1 auto;
	color: var(--bp-btn-kontur-napis, var(--bp-tekst-2, #475569));
	background: transparent;
	border-color: var(--bp-btn-kontur-kreska, var(--bp-ramka, #cbd5e1));
}

.bpz-btn--lekki:hover,
.bpz-btn--lekki:focus {
	color: var(--bp-btn-kontur-napis-hover, var(--bp-akcent, #2563eb));
	background: var(--bp-btn-kontur-tlo-hover, transparent);
	border-color: var(--bp-btn-kontur-kreska, var(--bp-akcent, #2563eb));
}

.bpz-btn:focus-visible,
.bpz-uchwyt:focus-visible,
.bpz-odnosnik:focus-visible {
	outline: 2px solid var(--bp-akcent, #2563eb);
	outline-offset: 2px;
}

/* --- kategorie ------------------------------------------------------ */

.bpz__kategorie[hidden],
.bpz__opis[hidden],
.bpz__glowna[hidden] {
	display: none;
}

.bpz-kat {
	padding: 1.8rem 0;
	border-bottom: 1px solid var(--bp-ramka-lekka, #e2e8f0);
}

.bpz-kat:first-child {
	padding-top: 0;
}

.bpz-kat__wiersz {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.6rem;
}

/*
 * ROZWIJANIE I PRZEŁĄCZNIK TO DWA OSOBNE ELEMENTY.
 *
 * Gdyby cała nazwa rozwijała listę i jednocześnie była etykietą pola
 * wyboru, jedno kliknięcie robiłoby obie rzeczy - użytkownik zmieniałby
 * zgodę, chcąc tylko zajrzeć, czego ona dotyczy. To jest dokładnie ten
 * rodzaj przypadkowej zgody, którego przepis zabrania.
 */
.bpz-kat__rozwin {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	padding: 0;
	font: inherit;
	font-size: 1.7rem;
	font-weight: 500;
	color: var(--bp-czern, #020617);
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
}

.bpz-kat__grot {
	flex: 0 0 auto;
	color: var(--bp-tekst-2, #475569);
	transition: transform .18s ease;
}

.bpz-kat__rozwin--otwarte .bpz-kat__grot {
	transform: rotate(180deg);
}

.bpz-kat__licznik {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.4rem;
	padding: .2rem .8rem;
	font-size: 1.4rem;
	font-weight: 500;
	color: var(--bp-tekst-2, #475569);
	background: var(--bp-tlo-2, #f1f5f9);
	border-radius: 999px;
}

/* --- przełącznik ---------------------------------------------------- *
 *
 * Suwak zamiast kwadracika. Nie chodzi o modę: przy czterech pozycjach
 * jedna pod drugą suwak pokazuje stan z odległości, a kwadracik trzeba
 * obejrzeć. Pole wyboru zostaje pod spodem i to ono niesie stan -
 * suwak jest tylko jego obrazem, więc klawiatura i czytnik ekranu
 * działają bez ani jednej linii dodatkowego kodu.
 */

.bpz-kat__przelacznik {
	position: relative;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}

.bpz-kat__pole {
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.bpz-kat__suwak {
	display: block;
	width: 4.4rem;
	height: 2.4rem;
	background: var(--bp-ramka, #cbd5e1);
	border-radius: 999px;
	transition: background-color .18s ease;
}

.bpz-kat__suwak::after {
	content: '';
	display: block;
	width: 1.8rem;
	height: 1.8rem;
	margin: .3rem;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(2, 6, 23, .3);
	transition: transform .18s ease;
}

.bpz-kat__pole:checked + .bpz-kat__suwak {
	background: var(--bp-akcent, #2563eb);
}

.bpz-kat__pole:checked + .bpz-kat__suwak::after {
	transform: translateX(2rem);
}

/* Zablokowany „niezbędne" - widać, że jest włączony i że się nie rusza. */
.bpz-kat__pole:disabled + .bpz-kat__suwak {
	background: var(--bp-akcent, #2563eb);
	opacity: .45;
}

.bpz-kat__pole:disabled {
	cursor: default;
}

.bpz-kat__pole:focus-visible + .bpz-kat__suwak {
	outline: 2px solid var(--bp-akcent, #2563eb);
	outline-offset: 2px;
}

.bpz-kat__opis {
	margin: .8rem 0 0 2.6rem;
	font-size: 1.6rem;
	line-height: 1.55;
	color: var(--bp-tekst-2, #475569);
}

/* --- tabela ciasteczek w polityce (skrót wtyczki) ------------------- */

/*
 * Ramka tabeli w polityce przewija się sama. Arkusz strony polityki nie
 * zawsze jest wczytany (polityka na szablonie motywu), a wtedy tabela
 * szersza niż telefon rozpychała cały dokument i strona przewijała się
 * w bok razem z nagłówkiem. Ta reguła działa niezależnie od szablonu.
 */
.bpz-tabela-ramka {
	max-width: 100%;
	overflow-x: auto;
}

/* --- lista ciasteczek w kategorii ----------------------------------- */

.bpz-kat__tabela {
	margin: 1.4rem 0 0 2.6rem;

	/*
	 * Tabela przewija się w swoim pudełku, nie rozpycha okna.
	 * Cztery kolumny z celem zapisanym zdaniem nie zmieszczą się
	 * na telefonie i nie ma sensu udawać, że się zmieszczą.
	 */
	overflow-x: auto;
}

.bpz-kat__tabela[hidden] {
	display: none;
}

/*
 * `table-layout: fixed` - SZEROKOŚCI KOLUMN Z ARKUSZA, NIE Z TREŚCI.
 *
 * Przy układzie automatycznym przeglądarka dzieli szerokość według
 * zawartości, a jedna długa wartość zabiera resztę kolumnom. Tak zginęła
 * kolumna „Jak długo": nazwa `bpZachowanieSesja, bpZachowanieNagr
 * (pamięć sesji)` miała zakaz łamania, rozpychała pierwszą kolumnę
 * i wypychała ostatnią poza widoczny obszar.
 *
 * Przy układzie stałym cztery kolumny mają z góry ustalone proporcje
 * i żadna wartość nie może zabrać miejsca sąsiadce, niezależnie od tego,
 * co wpiszemy do listy ciasteczek w przyszłości.
 */
.bpz-kat__tabela table {
	width: 100%;

	/*
	 * Poniżej tej szerokości kolumny robiłyby się nieczytelne - wtedy
	 * tabela przewija się w swoim pudełku (`overflow-x` wyżej), zamiast
	 * ściskać treść do dwóch liter na wiersz.
	 */
	min-width: 46rem;
	table-layout: fixed;
	border-collapse: collapse;
	font-size: 1.4rem;
	line-height: 1.5;
}

.bpz-kat__tabela col.bpz-kol-nazwa    { width: 30%; }
.bpz-kat__tabela col.bpz-kol-dostawca { width: 22%; }
.bpz-kat__tabela col.bpz-kol-cel      { width: 30%; }
.bpz-kat__tabela col.bpz-kol-czas     { width: 18%; }

.bpz-kat__tabela th,
.bpz-kat__tabela td {
	padding: .8rem 1.2rem .8rem 0;
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--bp-ramka-lekka, #e2e8f0);

	/*
	 * Nazwy ciasteczek i adresy domen nie mają spacji, w których dałoby
	 * się je złamać. Bez tego wychodzą poza swoją kolumnę i nachodzą
	 * na sąsiednią - przy układzie stałym komórka nie rozszerzy się,
	 * żeby je pomieścić.
	 */
	overflow-wrap: anywhere;
}

.bpz-kat__tabela th {
	font-weight: 600;
	color: var(--bp-czern, #020617);
}

.bpz-kat__tabela td {
	color: var(--bp-tekst-2, #475569);
}

/*
 * Nazwa techniczna pismem o stałej szerokości, ale BEZ zakazu łamania.
 * Zakaz miał trzymać nazwę w jednej linii i to jest ładne przy `_ga`,
 * a szkodliwe przy nazwie na pięćdziesiąt znaków.
 */
.bpz-kat__tabela code {
	font-size: 1.3rem;
	color: var(--bp-czern, #020617);
	overflow-wrap: anywhere;
}

.bpz-kat__pusto {
	margin: 1.2rem 0 0 2.6rem;
	font-size: 1.5rem;
	color: var(--bp-tekst-2, #475569);
}

/* --- stopka okna ---------------------------------------------------- *
 *
 * Trzeci element kolumny okna, obok zakładek i przewijanego panelu.
 * NIE `position: sticky` wewnątrz panelu - to była poprzednia wersja
 * i miała widoczną wadę: wyściółka panelu ma własne tło, więc przy
 * rozwiniętych tabelach spod przycisków wystawał pas przewijającej się
 * treści. Pasek wyglądał jak przyklejony w powietrzu, a nie jak dół okna.
 *
 * `flex: 0 0 auto` - stopka nigdy się nie kurczy. Przy niskim oknie ma
 * ustąpić panel, nie przyciski: element bez przycisku zgody jest gorszy
 * niż element z uciętą treścią.
 */
.bpz__stopka {
	flex: 0 0 auto;
	padding: 2rem 4.4rem;
	background: var(--bp-biel, #fff);
	border-top: 1px solid var(--bp-ramka-lekka, #e2e8f0);
}

.bpz__stopka[hidden] {
	display: none;
}

/* --- trwały dostęp do ustawień -------------------------------------- *
 *
 * Art. 7 ust. 3 RODO: wycofanie zgody ma być tak samo łatwe jak jej
 * udzielenie. Uchwyt przy dolnej krawędzi jest dostępny z KAŻDEJ
 * podstrony jednym kliknięciem - odnośnik w stopce wymagałby najpierw
 * dojechania do stopki.
 *
 * `z-index` niższy niż baner, żeby przy otwartym banerze nie sterczał
 * nad nim.
 */

/*
 * KÓŁECZKO Z CIASTECZKIEM W LEWYM DOLNYM ROGU.
 *
 * Było tu pasek z napisem „Ustawienia zgód" przyklejony do krawędzi.
 * Napis widoczny przez cały czas przypomina o sobie przez cały czas,
 * a to element, do którego wraca się raz na kilka miesięcy albo nigdy.
 *
 * Rozmiar 4.4rem, czyli 44 px przy podstawie 10 px. To nie jest liczba
 * z estetyki: 44 px to minimalny cel dotykowy, poniżej którego trafienie
 * palcem zaczyna być loterią. Ikona w środku 22 px - połowa kółka,
 * reszta to oddech.
 */

.bpz-uchwyt {
	--bpz-tlo-uchwytu: var(--bp-biel, #fff);

	/*
	 * ROZMIAR I ODSTĘP OD KRAWĘDZI - JEDNO MIEJSCE REGULACJI.
	 *
	 * Obie wartości jako zmienne, bo obie bywają nadpisywane z zewnątrz:
	 * rozmiar, gdy na stronie stoi obok inny przycisk przypięty do dołu
	 * i mają być równe; odstęp, gdy nad dolną krawędzią stoi pasek innej
	 * wtyczki i kółko musi się ponad niego podnieść.
	 *
	 * Wcześniej wysokość tamtego paska była wpisana w ten arkusz na
	 * sztywno. Po jego wyłączeniu kółko zostawało uniesione nad pustką
	 * i wyglądało, jakby wisiało w powietrzu - a arkusz tej wtyczki
	 * nie ma prawa wiedzieć, co robi inna.
	 */
	--bpz-uchwyt-rozmiar: 4.4rem;
	--bpz-uchwyt-dol: 1.8rem;

	position: fixed;
	z-index: 99980;

	/*
	 * ODSUNIĘTE OD OBU KRAWĘDZI, nie przyklejone.
	 * Kółko dotykające krawędzi wygląda na obcięte, a na telefonie
	 * wchodzi w obszar gestu „wstecz".
	 */
	bottom: calc(var(--bpz-uchwyt-dol) + env(safe-area-inset-bottom, 0px));
	left: var(--bpz-uchwyt-dol);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--bpz-uchwyt-rozmiar);
	height: var(--bpz-uchwyt-rozmiar);
	padding: 0;

	color: var(--bp-tekst-2, #475569);
	background: var(--bpz-tlo-uchwytu);
	border: 1px solid var(--bp-ramka-lekka, #e2e8f0);
	border-radius: 50%;

	/*
	 * Cień w pikselach, nie w `rem`. Cień ma wyglądać tak samo
	 * na każdym progu szerokości - to grubość kreski, a nie wymiar,
	 * który ma się skalować razem z typografią.
	 */
	box-shadow: 0 2px 10px rgba(2, 6, 23, .12);

	cursor: pointer;
	opacity: .9;
	transition: opacity .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
	-webkit-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

/*
   IKONA LICZONA W PROCENTACH KÓŁKA, nie w pikselach.

   Znacznik SVG ma wpisane `width` i `height` w atrybutach, więc przy
   większym kółku zostawałaby przy swoim rozmiarze i pływała pośrodku
   pustego koła. Połowa średnicy odtwarza dotychczasowe proporcje
   i trzyma je przy każdym rozmiarze.
*/
.bpz-uchwyt__ikona {
	display: block;
	flex: 0 0 auto;
	width: 50%;
	height: 50%;
}

.bpz-uchwyt:hover,
.bpz-uchwyt:focus {
	color: var(--bp-akcent-tekst, var(--bp-akcent, #2563eb));
	opacity: 1;
	transform: translateY(-2px);
	box-shadow: 0 4px 14px rgba(2, 6, 23, .18);
}

/*
 * Przy otwartym banerze kółeczko znika.
 *
 * Sam niższy `z-index` nie wystarcza: na szerokim ekranie baner stoi
 * w prawym dolnym rogu, więc kółko w lewym byłoby obok niego widoczne
 * i podpowiadało drugie wejście do tego samego okna.
 */
.bpz:not([hidden]) ~ .bpz-uchwyt,
body.bpz-otwarty .bpz-uchwyt {
	opacity: 0;
	pointer-events: none;
}

/* Wersja wstawiana skrótem w treści - zwykły odnośnik, nie przycisk. */
.bpz-odnosnik {
	padding: 0;
	font: inherit;
	color: var(--bp-akcent-tekst, var(--bp-akcent, #2563eb));
	background: none;
	border: 0;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: .3rem;
}

/* --- telefon -------------------------------------------------------- */

@media (max-width: 600px) {

	/*
	 * Na telefonie okno siada przy dolnej krawędzi, a nie na środku -
	 * kciuk sięga tam, a przyciski mają być pod kciukiem.
	 */
	.bpz {
		align-items: flex-end;
		padding: 0;
	}

	.bpz__okno {
		width: 100%;
		max-height: 88dvh;
		border-right: 0;
		border-bottom: 0;
		border-left: 0;
		border-radius: 1.6rem 1.6rem 0 0;
	}

	.bpz__glowna,
	.bpz__kategorie,
	.bpz__opis {
		padding: 2.6rem 2.2rem calc(2.6rem + env(safe-area-inset-bottom, 0px));
	}

	/*
	 * Stopka trzyma TEN SAM margines boczny co panel nad nią. Bez tej
	 * reguły brała wyściółkę komputerową (4.4rem) i przyciski były
	 * o 40 px węższe niż treść, do której się odnoszą - widać to
	 * od razu, bo krawędzie nie stoją w jednej linii.
	 *
	 * `safe-area-inset-bottom` dotyczy teraz stopki, a nie panelu:
	 * to ona jest ostatnim elementem przy krawędzi ekranu, więc to
	 * pod nią wypada pasek gestów iPhone'a.
	 */
	.bpz__stopka {
		padding: 1.6rem 2.2rem calc(1.6rem + env(safe-area-inset-bottom, 0px));
	}

	.bpz__kategorie {
		padding-bottom: 2.6rem;
	}

	/*
	 * Para przycisków na telefonie schodzi jeden pod drugi. Dwa przyciski
	 * obok siebie na 360 px dają napisy łamane na dwie linie i przyciski
	 * na 40 px szerokości tekstu - nieczytelne i trudne do trafienia.
	 * Kolejność zostaje: „Dostosuj opcje" wyżej, akceptacja niżej,
	 * czyli bliżej kciuka.
	 */
	.bpz__akcje--para {
		grid-template-columns: minmax(0, 1fr);
	}

	.bpz-zakladka {
		padding: 1.5rem .6rem;
		font-size: 1.5rem;
	}

	/*
	 * Opis kategorii i tabela wracają pod lewą krawędź. Wcięcie 2.6rem
	 * miało wyrównać je do nazwy, ale na wąskim ekranie zabiera jedną
	 * ósmą szerokości i tabela robi się nieczytelna.
	 */
	.bpz-kat__opis,
	.bpz-kat__tabela,
	.bpz-kat__pusto {
		margin-left: 0;
	}

	/*
	 * Przyciski na pełną szerokość, jeden pod drugim - ale W TEJ SAMEJ
	 * KOLEJNOŚCI i tej samej wielkości. Zepchnięcie „Odrzuć wszystkie"
	 * pod zagięcie ekranu jest dokładnie tym wzorcem, który wytyczne
	 * o dark patterns wskazują jako wadliwy.
	 */
	.bpz-btn {
		flex: 1 1 100%;
	}

	/*
	 * NA TELEFONIE KÓŁKO JEST WIĘKSZE.
	 *
	 * Na wąskim ekranie jest celem palca, a nie kursora - i zwykle stoi
	 * naprzeciw drugiego przypiętego przycisku (telefon, komunikator),
	 * który tę wielkość ma. Kółko mniejsze od sąsiada w drugim rogu
	 * wygląda przy nim jak coś, o czym zapomniano.
	 *
	 * NIE PODNOSIMY GO JUŻ PONAD PASEK INNEJ WTYCZKI. Wysokość tamtego
	 * paska była tu wpisana na sztywno; po jego wyłączeniu kółko zostawało
	 * uniesione nad pustką. Strona, która ma u dołu własny pasek, podnosi
	 * kółko zmienną `--bpz-uchwyt-dol` w swojej warstwie.
	 */
	.bpz-uchwyt {
		--bpz-uchwyt-rozmiar: 5.6rem;
	}
}

@media (prefers-reduced-motion: reduce) {

	.bpz-btn,
	.bpz-uchwyt {
		transition: none;
	}

	/* Kółeczko nie unosi się przy najechaniu - zostaje sam kolor. */
	.bpz-uchwyt:hover,
	.bpz-uchwyt:focus {
		transform: none;
	}
}