/*
 * Baner zgód.
 *
 * Jeden znacznik `dialog` w dwóch stanach.
 *
 * Bez skryptu zostaje **pas na górze strony**: nie zasłania niczego, nie łapie
 * ogniska, przewija się razem z treścią. To stan zapasowy i zarazem w pełni
 * sprawny baner.
 *
 * Ze skryptem `showModal()` podnosi go do **okna na środku** z przyciemnionym
 * tłem. Wtedy przeglądarka sama wyłącza tło z obsługi, zamyka w oknie ognisko
 * i wiąże klawisz Escape - i dopiero to czyni warstwę na wierzchu poprawną.
 * Warstwa przyklejona bez tych trzech rzeczy zostawia osobę obsługującą serwis
 * klawiaturą w niewidocznym tle, po którym chodzi ogniskiem na oślep.
 *
 * Wartości są bezwzględne, nie odziedziczone po motywie - motyw jest dziś
 * tymczasowy i zostanie podmieniony.
 */

.wpr-zgody {
	--wpr-granat: #1b3f8f;
	--wpr-glebia: #0e2154;
	--wpr-linia:  #dfe5f0;
	--wpr-slaby:  #4a5568;

	/*
	 * Zdjęcie własnych stylów przeglądarki dla `dialog`: bez tego pas
	 * zapasowy dostaje `position: absolute`, obramowanie i szerokość
	 * dopasowaną do treści, czyli wygląda jak pudełko rzucone na stronę.
	 */
	position: static;
	display: block;
	width: auto;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;

	background: #f2f5fa;
	border-bottom: 3px solid var(--wpr-granat);
	font: 400 16px/1.6 'Segoe UI', system-ui, sans-serif;
	color: var(--wpr-glebia);
}

.wpr-zgody *,
.wpr-zgody *::before,
.wpr-zgody *::after { box-sizing: border-box; }

.wpr-zgody__ramka {
	max-width: 900px;
	margin: 0 auto;
	padding: 22px 20px 24px;
}

/* ------------------------------------------------ stan okna na środku --- */

.wpr-zgody--okno {
	position: fixed;
	inset: 0;
	width: min(660px, calc(100vw - 32px));
	max-height: calc(100vh - 48px);
	margin: auto;
	overflow-y: auto;
	background: #fff;
	border: 0;
	border-top: 4px solid var(--wpr-granat);
	border-bottom: 0;
	border-radius: 12px;
	box-shadow: 0 24px 60px rgba(14, 33, 84, .3);
}

.wpr-zgody--okno::backdrop { background: rgba(14, 33, 84, .55); }

.wpr-zgody--okno .wpr-zgody__ramka {
	max-width: none;
	padding: 26px 28px 28px;
}

/* Tło nie przewija się pod otwartym oknem. */
html:has(.wpr-zgody--okno[open]) { overflow: hidden; }

/* ------------------------------------------------------------- treść --- */

.wpr-zgody__tytul {
	margin: 0 0 10px;
	font-size: 20px;
	line-height: 1.3;
	color: var(--wpr-glebia);
}

/* Nagłówek dostaje ognisko przy otwarciu okna, ale nie jest przyciskiem -
   obwódka wokół samego tytułu myliłaby. */
.wpr-zgody__tytul:focus { outline: none; }

/* Bez ograniczenia szerokości wiersza. Ramka banera ma 900 pikseli, więc
   limit 70 znaków zostawiał w niej pusty pas po prawej - ta sama wada co
   w Strefie przy komunikacie i zajawce. Szerokość wiersza ogranicza tu
   `.wpr-zgody__ramka`, czyli pudełko. */
.wpr-zgody__tresc {
	margin: 0 0 12px;
}

.wpr-zgody a { color: var(--wpr-granat); }

/*
 * Przyjęcie i odrzucenie muszą wyglądać tak samo. Różnica wielkości, koloru
 * albo kontrastu między nimi jest wskazywana przez EROD jako powód
 * nieważności zgody, więc jedna reguła obsługuje oba przyciski i nie ma
 * osobnego wariantu „główny".
 */
.wpr-zgody__przyciski {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 16px 0 4px;
}

.wpr-zgody__wybor {
	flex: 1 1 200px;
	padding: 12px 20px;
	background: var(--wpr-granat);
	border: 2px solid var(--wpr-granat);
	border-radius: 6px;
	font: inherit;
	font-weight: 600;
	color: #fff;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.wpr-zgody__wybor:hover { background: var(--wpr-glebia); border-color: var(--wpr-glebia); }

.wpr-zgody__wybor--lekki {
	display: inline-block;
	flex: 0 0 auto;
	background: #fff;
	color: var(--wpr-granat);
}

.wpr-zgody__wybor--lekki:hover { background: #fff; color: var(--wpr-glebia); }

.wpr-zgody__szczegoly { margin-top: 18px; }

.wpr-zgody__rozwin {
	display: inline-block;
	padding: 4px 0;
	font-weight: 600;
	color: var(--wpr-granat);
	cursor: pointer;
}

.wpr-zgody__lista {
	margin: 14px 0 18px;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--wpr-linia);
}

.wpr-zgody__kategoria {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 4px 12px;
	padding: 14px 2px;
	border-bottom: 1px solid var(--wpr-linia);
}

.wpr-zgody__kategoria input {
	width: 20px;
	height: 20px;
	margin: 3px 0 0;
}

.wpr-zgody__kategoria label { cursor: pointer; }

.wpr-zgody__kategoria label span {
	display: block;
	margin-top: 2px;
	font-size: 15px;
	color: var(--wpr-slaby);
}

/* Kategoria niezbędna jest wyłączona z wyboru - kursor ma to pokazać. */
.wpr-zgody__kategoria input:disabled,
.wpr-zgody__kategoria input:disabled + label { cursor: default; }

/*
 * Ognisko rysowane osobno i grubo. Domyślna obwódka przeglądarki ginie na
 * granatowym przycisku, a po banerze idzie się klawiaturą od razu po otwarciu
 * okna.
 */
.wpr-zgody :is(button, a, input, summary):focus-visible {
	outline: 3px solid #0e2154;
	outline-offset: 2px;
}

/* Na wąskim ekranie okno siada na dole i zajmuje pełną szerokość - środek
   ekranu przy klawiaturze ekranowej bywa poza widokiem. */
@media (max-width: 600px) {
	.wpr-zgody--okno {
		inset: auto 0 0;
		width: 100%;
		max-height: 85vh;
		margin: 0;
		border-radius: 12px 12px 0 0;
	}

	.wpr-zgody__wybor { flex-basis: 100%; }
}

/* --------------------------------------------- znak w rogu ekranu --- */

/*
 * Wejście w ustawienia zgód, widoczne na każdej stronie po podjęciu decyzji.
 *
 * Zmienne z `.wpr-zgody` tu nie sięgają - znak jest osobnym elementem, poza
 * banerem - więc kolory są wpisane wprost.
 */
.wpr-zgody-znak {
	position: fixed;
	left: 20px;
	bottom: 20px;
	z-index: 9990;
	display: inline-flex;
	align-items: center;
	height: 48px;
	padding: 0 12px;
	border-radius: 24px;
	background: #1b3f8f;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(14, 33, 84, .35);
	font: 600 15px/1 'Segoe UI', system-ui, sans-serif;
}

.wpr-zgody-znak:hover { background: #0e2154; color: #fff; }

.wpr-zgody-znak__ikona {
	flex: none;
	width: 24px;
	height: 24px;
}

/*
 * Napis zwężony do zera, ale nadal w treści odnośnika. `display: none`
 * wyjęłoby go z drzewa dostępności i odnośnik zostałby bez nazwy.
 */
.wpr-zgody-znak__opis {
	max-width: 0;
	margin-left: 0;
	overflow: hidden;
	white-space: nowrap;
	transition: max-width .18s ease, margin-left .18s ease;
}

.wpr-zgody-znak:hover .wpr-zgody-znak__opis,
.wpr-zgody-znak:focus-visible .wpr-zgody-znak__opis {
	max-width: 200px;
	margin-left: 10px;
}

.wpr-zgody-znak:focus-visible {
	outline: 3px solid #0e2154;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.wpr-zgody-znak__opis { transition: none; }
}

/* ------------------------------------------------------- zastępnik --- */

.wpr-zgody-zastepnik {
	max-width: 680px;
	margin: 24px 0;
	padding: 24px;
	background: #f2f5fa;
	border: 1px dashed #1b3f8f;
	border-radius: 8px;
	font: 400 16px/1.6 'Segoe UI', system-ui, sans-serif;
	color: #0e2154;
}

.wpr-zgody-zastepnik p { margin: 0 0 10px; }
.wpr-zgody-zastepnik p:last-child { margin-bottom: 0; }