/*
 * Przelacznik roli przy rejestracji na „Moje konto".
 *
 * Paleta ta sama co czat i panele (z aplikacji): #A00037 / #5C0021 / #14100F /
 * #F4F2EE / #E9E4DF. Wszystko pod `.dwr`, zeby nie wejsc w szablony
 * WooCommerce — one maja wlasne, dosc agresywne reguly na formularzach.
 */

.dwr,
.dwr * {
	box-sizing: border-box;
}

.dwr {
	/*
	 * Wypelnienie pigulki na `#7A0029`, nie `#A00037`.
	 *
	 * `#A00037` to akcent marki i sprawdza sie tam, gdzie jest go malo —
	 * na cienkiej kresce, na 22-pikselowej plakietce. Wylany na duza plame
	 * robi sie rozowawy i lekki. `#7A0029` to ten sam kolor po wcisnieciu
	 * (`accentPressed` z palety aplikacji), wiec zostajemy w systemie,
	 * a plama nabiera ciezaru.
	 */
	--dwr-akcent: #7a0029;
	--dwr-akcent-jasny: #a00037;
	--dwr-akcent-ciemny: #5c0021;
	--dwr-akcent-miekki: #fbe9ef;
	--dwr-atrament: #14100f;
	--dwr-szary: #6f6763;
	--dwr-linia: #e9e4df;
	--dwr-papier: #f4f2ee;

	/*
	 * ZERO marginesu na dole — i to nie jest przeoczenie.
	 *
	 * Pod przelacznikiem stoi juz pole formularza WooCommerce, ktore ma wlasny
	 * `margin-top`. Kazda wartosc dodana tutaj SUMUJE sie z tamta i wlasnie stad
	 * brala sie dziura, ktorej nie dalo sie wyrownac zmniejszaniem: odejmowalem
	 * od jednego z dwoch odstepow, a widac bylo ich sume.
	 *
	 * Odstep nad przelacznikiem daje naglowek kolumny, pod — pole formularza.
	 * Sekcja nie dokłada wlasnego ani z gory, ani z dolu.
	 */
	margin: 0;
	font-family: inherit;
	color: var(--dwr-atrament);
}

/*
 * Pola WooCommerce zaraz po przelaczniku maja czasem zerowy `margin-top`
 * (zalezy od motywu i wersji Woo). Gwarantujemy jeden, konkretny odstep —
 * ten sam, ktory dzieli kolejne pola formularza miedzy soba.
 */
.dwr + .form-row,
.dwr + .woocommerce-form-row {
	margin-top: 18px !important;
}

/*
 * Dwie pigulki obok siebie, obie widoczne NARAZ.
 *
 * O to chodzilo w zgloszeniu: „zeby rodzice nie przegapili". Lista rozwijana
 * pokazuje jedna opcje i dopiero klikniecie zdradza, ze jest druga — czyli
 * dokladnie ten przypadek, w ktorym rodzic zaklada sobie konto ucznia.
 */
/*
 * TOR PRZELACZNIKA.
 *
 * Wysokosc pigulki jest USTALONA (`min-height`), a nie wyliczana z interlinii —
 * i to jest sedno poprawki. Dwie wczesniejsze proby („wyrownaj padding",
 * „zdejmij odstep linii tekstu z etykiety") celowaly w pojedyncze zrodla luzu
 * pod pigulka i za kazdym razem zostawalo cos jeszcze: wysokosc liczona z
 * `font-size × line-height` zalezy od kroju pisma, ktory moze sie zmienic wraz
 * z motywem, a tekst i tak siada na linii bazowej wewnatrz swojego wiersza.
 *
 * Tu nie ma juz czego wyrownywac: tor centruje zawartosc (`align-items:
 * center`), pigulka ma stala wysokosc i sama centruje napis, a `line-height: 1`
 * zamyka temat odstepow miedzywierszowych. Odstep nad i pod jest ten sam
 * niezaleznie od kroju, rozmiaru pisma i motywu.
 */
.dwr-przelacznik {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px;
	background: var(--dwr-papier);
	border: 1px solid var(--dwr-linia);
	border-radius: 999px;
	max-width: 360px;
}

/*
 * ETYKIETA KWALIFIKOWANA PRZEZ `.dwr` — i to nie jest ozdobnik.
 *
 * ==================================================================
 * TU LEZALA PRZYCZYNA „ZA DUZO SZAREGO NA DOLE"
 * ==================================================================
 *
 * Przelacznik stoi na „Moje konto", gdzie `body` ma klase
 * `woocommerce-account`. Motyw ma w `woocommerce-custom.css` regule:
 *
 *     .woocommerce form .form-row label,
 *     .woocommerce-account label {
 *         display: block;
 *         margin-bottom: 8px;
 *         line-height: 1.4;
 *         ...
 *     }
 *
 * `.woocommerce-account label` ma swoistosc 0,1,1 i BIJE `.dwr-opcja` (0,1,0).
 * Czyli: `display: flex` nigdy nie wchodzil, `margin: 0` nigdy nie wchodzil,
 * a kazda etykieta dostawala 8 px marginesu pod spodem. Stad oba objawy naraz —
 * luz zbierajacy sie pod pigulka ORAZ tor wyzszy od pigulki o te 8 px, przez co
 * przy `border-radius: 999px` tor wygladal na slabiej zaokraglony niz pigulka.
 *
 * Poprzednie dwie proby („wyrownaj padding", „zdejmij interlinie z etykiety")
 * nie mogly zadzialac, bo celowaly we wlasne reguly, ktore i tak przegrywaly
 * kaskade. Nie chodzilo o wartosc, tylko o to, ze regula w ogole nie wchodzila.
 *
 * To trzeci raz w tym projekcie, gdy selektor motywu z jednym elementem
 * przebija sama klase — patrz `assets/cennik-2026/baner.css` (tytul banera
 * na czarno) i `assets/deeply-web/panel.css` (naglowki panelu rodzica).
 * Kwalifikacja przez rodzica daje 0,2,0 i zamyka temat.
 */
.dwr .dwr-opcja {
	display: flex;
	flex: 1 1 0;
	margin: 0;
	padding: 0;
	line-height: 1;
	font-size: inherit;
	cursor: pointer;
}

.dwr .dwr-opcja .dwr-pigulka {
	flex: 1 1 auto;
}

/*
 * Prawdziwy `input` schowany, ale NIE `display: none` — element wyjety
 * z drzewa dostepnosci przestaje istniec dla klawiatury i czytnika ekranu.
 * Zostaje wiec na miejscu, przezroczysty, i to on dostaje fokus.
 */
.dwr-opcja input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* =====================================================================
 * OSWIADCZENIE O WIEKU I AKCEPTACJA DOKUMENTOW
 *
 * Stoi tuz nad przyciskiem rejestracji, w tym samym rzucie oka. Pole ma byc
 * czytelne, a nie schowane drobnym drukiem: to warunek dokonania rejestracji
 * w rozumieniu Regulaminu, nie przypis.
 * ================================================================== */

.dwr-zgoda {
	margin: 18px 0 6px !important;
}

.dwr-zgoda-etykieta {
	display: flex !important;
	align-items: flex-start;
	gap: 11px;
	margin: 0 !important;
	cursor: pointer;
	font-weight: 400 !important;
}

/*
 * Prawdziwy kwadracik, nie podmieniony obrazkiem — pole wyboru w formularzu
 * prawnym ma wygladac jak pole wyboru i dzialac z klawiatura bez sztuczek.
 * `accent-color` barwi je marka bez rysowania wlasnej kontrolki.
 */
.dwr-zgoda-etykieta input[type="checkbox"] {
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: #7a0029;
	cursor: pointer;
}

.dwr-zgoda-tekst {
	font-size: 14px;
	line-height: 1.5;
	color: #3d4147;
}

.dwr-zgoda-tekst a {
	color: #7a0029;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.dwr-zgoda-tekst a:hover {
	color: #5c0021;
}

.dwr-gwiazdka {
	color: #a00037;
}

.dwr-pigulka {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	/* Stala wysokosc zamiast wyliczanej z interlinii — patrz komentarz przy
	   `.dwr-przelacznik`. Poziomy padding zostaje, pionowego nie ma wcale. */
	min-height: 42px;
	padding: 0 16px;
	border-radius: 999px;
	background: transparent;
	color: var(--dwr-szary);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	transition: background 0.15s ease, color 0.15s ease;
}

.dwr-opcja:hover .dwr-pigulka {
	color: var(--dwr-akcent);
}

.dwr-opcja input:checked + .dwr-pigulka {
	background: var(--dwr-akcent);
	color: #fff;
}

/* Obrys fokusu na pigulce, skoro sam `input` jest niewidoczny. */
.dwr-opcja input:focus-visible + .dwr-pigulka {
	outline: 3px solid var(--dwr-akcent-ciemny);
	outline-offset: 2px;
}

/*
 * Notatka pokazuje sie WYLACZNIE przy rodzicu — czysty CSS, bez JavaScriptu.
 *
 * Bez ramki i bez tla: rozowe pudelko pod przelacznikiem dokladalo trzeci
 * prostokat do sekcji, ktora ma byc lekka. Zostaje sam tekst, z kreska
 * po lewej jako jedynym znakiem, ze to komentarz do wyboru wyzej.
 */
.dwr-podpowiedz {
	display: none;
	margin: 10px 0 0;
	padding: 2px 0 2px 11px;
	border-left: 2px solid var(--dwr-akcent-jasny);
	color: var(--dwr-szary);
	font-size: 13.5px;
	line-height: 1.45;
}

.dwr:has(.dwr-opcja input[value="parent"]:checked) .dwr-podpowiedz-parent {
	display: block;
}

/*
 * Zapasowo dla przegladarek bez `:has()`: notatka zostaje schowana.
 * Domyslnym wyborem jest uczen, ktory notatki nie ma — wiec stan poczatkowy
 * jest poprawny, a jedyna strata to brak podpowiedzi po przelaczeniu.
 */
@supports not selector(:has(*)) {
	.dwr-podpowiedz {
		display: none;
	}
}

@media (max-width: 420px) {
	.dwr-przelacznik {
		max-width: none;
	}

	.dwr-pigulka {
		padding: 0 10px;
		font-size: 14px;
	}
}

/* =====================================================================
 * „MOJE KONTO" NA TELEFONIE
 *
 * Dwie osobne dolegliwosci, obie z tego samego zrodla — ukladu dwukolumnowego
 * WooCommerce, ktory na waskim ekranie zwija sie do jednej kolumny, ale
 * zachowuje marginesy policzone dla dwoch:
 *
 *   1. karty logowania i rejestracji dostawaly duze marginesy boczne, przez co
 *      pola byly sciesnione na srodku,
 *   2. po zwinieciu do jednej kolumny znikal odstep MIEDZY nimi — logowanie
 *      i rejestracja sklejaly sie w jeden blok.
 *
 * Reguly sa scisle ograniczone do `#customer_login` (kontener Woo na tej
 * stronie) i do waskich ekranow, wiec nie ruszaja ukladu na komputerze
 * ani zadnej innej strony.
 * ================================================================== */

@media (max-width: 768px) {
	#customer_login.u-columns,
	#customer_login {
		display: block;
		margin-left: 0;
		margin-right: 0;
	}

	#customer_login > div,
	#customer_login .u-column1,
	#customer_login .u-column2,
	#customer_login .col-1,
	#customer_login .col-2 {
		width: 100%;
		max-width: none;
		float: none;
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
	}

	/* Odstep miedzy kolumna logowania a rejestracji — po zwinieciu do jednej
	   kolumny jest to odstep PIONOWY i musi istniec, bo inaczej dwie karty
	   stykaja sie krawedziami. */
	#customer_login > div + div,
	#customer_login .u-column2 {
		margin-top: 28px;
	}

	/* Formularze na pelna szerokosc — bez zapasu na nieistniejaca druga kolumne. */
	#customer_login .woocommerce-form {
		padding-left: 18px;
		padding-right: 18px;
	}
}