/*
 * ELTECH - formularz krokowy (Card Step)
 *
 * Kazda regula zaczyna sie od .elf. To nie jest kosmetyka, tylko warunek
 * dzialania: wtyczka ma trafic na cudzy motyw, a motywy stylują globalnie
 * input, button, label i naglowki. Selektor zakotwiczony w .elf wygrywa
 * specyficznoscia z regula motywu na sam "input", a jednoczesnie nie wypuszcza
 * naszych stylow na reszte strony. Jedyny wyjatek, z uzasadnieniem, to sekcja
 * "Kolumna motywu ELTECH" przed wersjami waskimi.
 *
 * Kolory ida przez zmienne CSS. Podmiana motywu (jasny/ciemny) albo koloru
 * akcentu z shortcode'u to nadpisanie zmiennej, nie przepisywanie regul.
 */

/* === Zmienne i motywy ==================================================== */

.elf {
	--elf-akcent: #d42027;
	--elf-akcent-tekst: #ffffff;

	/*
	 * Odcienie akcentu liczy color-mix, zeby zmiana jednej zmiennej w
	 * shortcode (akcent="#0a66c2") przemalowala takze obramowania, tla
	 * zaznaczenia i stan hover. Kazda taka wlasciwosc ma nad soba zapasowa
	 * deklaracje w szarosci - przegladarka bez color-mix pokaze stonowana,
	 * ale poprawna wersje zamiast przezroczystego tla.
	 */
	--elf-akcent-mocny: color-mix(in srgb, var(--elf-akcent) 82%, #000);
	--elf-akcent-tlo: color-mix(in srgb, var(--elf-akcent) 7%, transparent);
	--elf-akcent-tlo-mocne: color-mix(in srgb, var(--elf-akcent) 14%, transparent);
	--elf-akcent-ramka: color-mix(in srgb, var(--elf-akcent) 45%, transparent);
	--elf-akcent-pierscien: color-mix(in srgb, var(--elf-akcent) 22%, transparent);

	--elf-tekst: #101828;
	--elf-tekst-2: #475467;
	--elf-tekst-3: #8792a5;

	--elf-tlo: #ffffff;
	--elf-tlo-2: #f7f8fa;
	--elf-tlo-3: #eef0f4;

	--elf-ramka: #e3e6ec;
	--elf-ramka-2: #cfd4dd;

	--elf-blad: #d92d20;
	--elf-blad-tlo: #fef3f2;
	--elf-sukces: #067647;
	--elf-sukces-tlo: #ecfdf3;

	--elf-r-karta: 20px;
	--elf-r-pole: 12px;
	--elf-r-kafel: 14px;

	--elf-cien: 0 1px 2px rgba(16, 24, 40, 0.04), 0 12px 32px -12px rgba(16, 24, 40, 0.14);
	--elf-cien-kafel: 0 1px 2px rgba(16, 24, 40, 0.05);
	--elf-cien-uniesiony: 0 8px 24px -8px rgba(16, 24, 40, 0.18);

	--elf-krok: 220ms cubic-bezier(0.22, 0.61, 0.36, 1);

	color: var(--elf-tekst);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	/* Formularz nigdy nie rozpycha kontenera, w ktorym stoi. */
	margin: 0 auto;
	max-width: 880px;
	/* Dlugi adres e-mail w podsumowaniu albo nazwa pliku bez spacji nie moga
	   wystawac poza ramke na waskim ekranie. */
	overflow-wrap: break-word;
	text-align: left;
	width: 100%;
}

.elf[data-motyw="ciemny"] {
	--elf-tekst: #f2f4f7;
	--elf-tekst-2: #c4cad4;
	--elf-tekst-3: #98a2b3;

	--elf-tlo: #16181d;
	--elf-tlo-2: #1d2027;
	--elf-tlo-3: #262a33;

	--elf-ramka: #2e333d;
	--elf-ramka-2: #3d434f;

	--elf-blad-tlo: #2a1615;
	--elf-sukces-tlo: #10241a;

	--elf-cien: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 40px -16px rgba(0, 0, 0, 0.6);
	--elf-cien-kafel: 0 1px 2px rgba(0, 0, 0, 0.25);
	--elf-cien-uniesiony: 0 10px 28px -10px rgba(0, 0, 0, 0.55);
}

/* Motyw "auto" idzie za ustawieniem systemu uzytkownika. */
@media (prefers-color-scheme: dark) {
	.elf[data-motyw="auto"] {
		--elf-tekst: #f2f4f7;
		--elf-tekst-2: #c4cad4;
		--elf-tekst-3: #98a2b3;

		--elf-tlo: #16181d;
		--elf-tlo-2: #1d2027;
		--elf-tlo-3: #262a33;

		--elf-ramka: #2e333d;
		--elf-ramka-2: #3d434f;

		--elf-blad-tlo: #2a1615;
		--elf-sukces-tlo: #10241a;

		--elf-cien: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 40px -16px rgba(0, 0, 0, 0.6);
		--elf-cien-kafel: 0 1px 2px rgba(0, 0, 0, 0.25);
		--elf-cien-uniesiony: 0 10px 28px -10px rgba(0, 0, 0, 0.55);
	}
}

/* === Reset w obrebie formularza ========================================== */

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

.elf h2,
.elf h3,
.elf h4,
.elf p,
.elf ol,
.elf ul,
.elf dl,
.elf dd,
.elf fieldset,
.elf legend {
	margin: 0;
	padding: 0;
}

.elf ol,
.elf ul {
	list-style: none;
}

/*
 * Znacznik listy kasujemy TAKZE na samych <li>, nie tylko na liscie.
 *
 * list-style-type jest dziedziczony, a wartosc ustawiona WPROST na elemencie
 * bije dziedziczona - niezaleznie od specyficznosci selektorow. Motyw, ktory
 * pisze "ol li { list-style: decimal }" (a tak robi wiekszosc starszych
 * motywow), wygrywa wiec z regula powyzej, nie majac w selektorze ani jednej
 * klasy. Sama podbijana specyficznosc nic by tu nie dala.
 *
 * Objawem sa numery "2." "3." "4." wypisane miedzy pigulkami paska krokow:
 * to markery <li>, ktore przy ukladzie poziomym (flex) laduja tuz obok
 * poprzedniej pigulki. Pierwszego nie widac, bo wypada poza lewa krawedz paska.
 *
 * "margin: 0" z tego samego powodu: motywy lubia odstepy miedzy pozycjami list,
 * a nasze listy (pliki, kraje) trzymaja odstepy wlasnym "gap".
 */
.elf ol > li,
.elf ul > li {
	list-style: none;
	margin: 0;
}

/*
 * Druga warstwa, dla pozycji, ktore markery psuja najbardziej: pigulek paska
 * krokow i rozwijanej listy krajow.
 *
 * Regula wyzej wystarcza, dopoki selektor motywu nie ma wiekszej
 * specyficznosci (".entry-content ol li" ma dokladnie taka sama, wiec
 * o wyniku decyduje kolejnosc wczytania arkuszy - a tej wtyczka nie kontroluje).
 * Element o "display: block" nie ma markera W OGOLE, bo przestaje byc pozycja
 * listy w sensie renderowania - i tego nie odwroci zadna regula "list-style".
 *
 * Uklad sie nie zmienia: pigulki i tak sa elementami kontenera flex (te sa
 * blokowane przez przegladarke), a pozycje listy krajow to zwykle bloki
 * z paddingiem. Pozycje listy plikow maja "display: flex" z wlasnej reguly
 * i z tego samego powodu markera nie dostana.
 *
 * Dopisujac nowa liste do formularza, dopisz jej pozycje tutaj.
 */
.elf .elf-pigulka,
.elf .elf-kraj__grupa,
.elf .elf-kraj__pozycja {
	display: block;
}

.elf fieldset {
	border: 0;
	min-width: 0;
}

.elf button {
	font: inherit;
	color: inherit;
}

/*
 * Naglowek i stopka karty to <header> i <footer>, a te motywy stylują
 * globalnie, majac na mysli naglowek i stopke CALEJ strony. Na eltech.com.pl
 * stopka karty dostawala stad 48 px marginesu od spodu (pusty bialy pas pod
 * przyciskami, jeszcze w ramce karty - margines elementu flex nie zapada sie)
 * i czcionke zmniejszona do 0.706em. Padding ustawiaja reguly samych
 * elementow nizej i to one wygrywaja z motywem.
 */
.elf header,
.elf footer {
	clear: none;
	font-size: inherit;
	line-height: inherit;
	margin: 0;
}

/*
 * Atrybut hidden musi wygrywac z naszymi wlasnymi regulami display.
 * Przegladarka ma wbudowane [hidden] { display: none }, ale ta regula przegrywa
 * specyficznoscia z ".elf .elf-btn { display: inline-flex }" - bez tej linijki
 * przycisk "Wyslij" i komunikaty bledow byly widoczne mimo ustawionego hidden.
 * Skrypt steruje widocznoscia wylacznie przez hidden, wiec to jedno miejsce
 * decyduje o calej mechanice pokazywania krokow.
 *
 * Drugi selektor dotyczy calej karty: przy kilku wersjach jezykowych chowany
 * jest sam korzen .elf, a nie cos w jego srodku. Regula przegladarki by tu
 * wystarczyla, ale dowolne "div { display: ... }" z motywu ja przebija -
 * i obie wersje jezykowe stanelyby jedna pod druga.
 */
.elf [hidden],
.elf[hidden] {
	display: none !important;
}

.elf .elf-ikona {
	display: block;
	flex: none;
	height: 20px;
	width: 20px;
}

/* Pulapka na boty - musi byc niewidoczna, ale nie display:none, bo czesc
   botow pomija pola faktycznie ukryte. */
.elf .elf-hp {
	height: 0;
	left: -9999px;
	overflow: hidden;
	position: absolute;
	width: 0;
}

.elf .elf-ukryte {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

/* === Karta =============================================================== */

.elf .elf-karta {
	background: var(--elf-tlo);
	border: 1px solid var(--elf-ramka);
	border-radius: var(--elf-r-karta);
	box-shadow: var(--elf-cien);
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
}

.elf .elf-karta__szapka {
	background: var(--elf-tlo-2);
	border-bottom: 1px solid var(--elf-ramka);
	padding: 28px 32px 20px;
}

/*
 * Gorna belka karty: sama etykieta marki. Flagi przeniosly sie nizej, obok
 * paska postepu, wiec belka nie musi juz byc wysoka na przycisk z flaga -
 * zostaje jedna linijka tekstu i mniejszy odstep pod nia.
 */
.elf .elf-szapka__gora {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-bottom: 6px;
}

.elf .elf-nadtytul {
	align-items: center;
	color: var(--elf-akcent);
	display: flex;
	font-size: 12px;
	font-weight: 600;
	gap: 6px;
	letter-spacing: 0.08em;
	/* Etykieta bywa dluga ("ELTECH - zaopatrzenie techniczne"), flagi maja
	   stala szerokosc - to napis ustepuje miejsca, nie one. */
	min-width: 0;
	text-transform: uppercase;
}

/* === Przelacznik jezyka ================================================== */

.elf .elf-jezyki {
	display: flex;
	/* Flagi nie zwezaja sie razem z paskiem postepu - sciesniona flaga
	   przestaje byc rozpoznawalna, a o to w niej chodzi. To pasek ustepuje
	   miejsca, nie one. */
	flex: none;
	gap: 4px;
}

.elf .elf-jezyk {
	align-items: center;
	background: transparent;
	border: 1px solid transparent;
	border-radius: 6px;
	cursor: pointer;
	display: flex;
	line-height: 0;
	padding: 3px;
	transition: border-color var(--elf-krok), opacity var(--elf-krok);
}

/*
 * Jezyk nieaktywny jest przygaszony, ale nie na tyle, zeby wygladal na
 * wylaczony - to jedyna wskazowka, ze da sie go kliknac.
 */
.elf .elf-jezyk[aria-pressed="false"] {
	opacity: 0.45;
}

.elf .elf-jezyk[aria-pressed="false"]:hover {
	opacity: 1;
}

.elf .elf-jezyk[aria-pressed="true"] {
	border-color: var(--elf-ramka-2);
	cursor: default;
}

.elf .elf-jezyk:focus-visible {
	box-shadow: 0 0 0 3px var(--elf-akcent-pierscien);
	outline: none;
}

/*
 * Ramka wokol samej flagi, nie wokol przycisku: bialy pas flagi polskiej
 * zlewa sie z tlem karty i bez obrysu flaga wyglada jak sam czerwony
 * prostokat. Obrys idzie do wewnatrz (inset), zeby nie zmieniac rozmiaru.
 */
.elf .elf-flaga {
	border-radius: 2px;
	box-shadow: inset 0 0 0 1px rgba(16, 24, 40, 0.18);
	display: block;
	height: 15px;
	/* Klikniecie ma zawsze trafic w przycisk, nigdy w sam obrazek - inaczej
	   obsluga zdarzenia musi szukac rodzica, a starsze przegladarki nie znaja
	   closest() na elementach SVG. */
	pointer-events: none;
	width: 24px;
}

.elf[data-motyw="ciemny"] .elf-flaga {
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
}

@media (prefers-color-scheme: dark) {
	.elf[data-motyw="auto"] .elf-flaga {
		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24);
	}
}

.elf .elf-nadtytul .elf-ikona {
	flex: none;
	height: 14px;
	width: 14px;
}

.elf .elf-tytul {
	font-size: 30px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.15;
}

.elf .elf-podtytul {
	color: var(--elf-tekst-2);
	font-size: 15px;
	margin-top: 8px;
	max-width: 56ch;
}

/* === Pasek postepu ======================================================= */

.elf .elf-postep {
	margin-top: 18px;
}

/*
 * Domyslnie nad paskiem nie ma nic: nadtytul jest pusty, a tytul i podtytul
 * karty ustawia sie dopiero atrybutem shortcode'u. Odstep od gory szapki daje
 * wtedy jej wlasny padding i margines byl tylko pustym miejscem.
 */
.elf .elf-karta__szapka > .elf-postep:first-child {
	margin-top: 0;
}

/*
 * Pasek i flagi w jednym wierszu.
 *
 * Pasek jest tu elementem rozciagliwym, wiec sam skraca sie o szerokosc flag,
 * a przy jednym jezyku (brak flag) idzie przez cala szerokosc karty - jeden
 * uklad obsluguje oba przypadki.
 *
 * min-width: 0 jest konieczne: element flex ma domyslnie minimalna szerokosc
 * rowna swojej zawartosci i bez tego pasek nie oddalby flagom miejsca
 * na waskim ekranie, tylko wypchnalby je poza karte.
 */
.elf .elf-postep__wiersz {
	align-items: center;
	display: flex;
	gap: 12px;
}

.elf .elf-postep__wiersz .elf-postep__tor {
	flex: 1 1 auto;
	min-width: 0;
}

.elf .elf-postep__opis {
	align-items: center;
	color: var(--elf-tekst-3);
	display: flex;
	font-size: 13px;
	justify-content: space-between;
	margin-bottom: 8px;
}

.elf .elf-postep__licznik strong {
	color: var(--elf-tekst);
	font-weight: 600;
}

.elf .elf-postep__tor {
	background: var(--elf-tlo-3);
	border-radius: 99px;
	height: 5px;
	overflow: hidden;
	width: 100%;
}

.elf .elf-postep__wypelnienie {
	background: #d42027;
	background: linear-gradient(90deg, var(--elf-akcent), var(--elf-akcent-mocny));
	border-radius: 99px;
	display: block;
	height: 100%;
	transition: width 320ms cubic-bezier(0.22, 0.61, 0.36, 1);
	width: 0;
}

.elf .elf-pigulki {
	display: flex;
	gap: 4px;
	margin-top: 14px;
	/* Na waskim ekranie pigulki jada w poziomie zamiast lamac sie na trzy
	   rzedy i rozpychac szapke. */
	overflow-x: auto;
	padding-bottom: 2px;
	scrollbar-width: none;
}

.elf .elf-pigulki::-webkit-scrollbar {
	display: none;
}

.elf .elf-pigulka {
	flex: none;
}

.elf .elf-pigulka__btn {
	align-items: center;
	background: transparent;
	border: 0;
	border-radius: 99px;
	color: var(--elf-tekst-3);
	cursor: default;
	display: flex;
	font-size: 13px;
	gap: 7px;
	padding: 5px 10px 5px 5px;
	transition: background var(--elf-krok), color var(--elf-krok);
	white-space: nowrap;
}

.elf .elf-pigulka__nr {
	align-items: center;
	background: var(--elf-tlo-3);
	border-radius: 99px;
	color: var(--elf-tekst-3);
	display: flex;
	flex: none;
	font-size: 12px;
	font-weight: 600;
	height: 22px;
	justify-content: center;
	transition: background var(--elf-krok), color var(--elf-krok);
	width: 22px;
}

.elf .elf-pigulka__check {
	display: none;
	height: 13px;
	width: 13px;
}

/* Krok aktualny */
.elf .elf-pigulka[data-stan="aktywny"] .elf-pigulka__btn {
	background: var(--elf-akcent-tlo);
	color: var(--elf-tekst);
	font-weight: 600;
}

.elf .elf-pigulka[data-stan="aktywny"] .elf-pigulka__nr {
	background: #d42027;
	background: var(--elf-akcent);
	color: var(--elf-akcent-tekst);
}

/* Krok juz wypelniony - klikalny, wraca do niego jednym kliknieciem */
.elf .elf-pigulka[data-stan="zrobiony"] .elf-pigulka__btn {
	color: var(--elf-tekst-2);
	cursor: pointer;
}

.elf .elf-pigulka[data-stan="zrobiony"] .elf-pigulka__btn:hover {
	background: var(--elf-tlo-3);
}

.elf .elf-pigulka[data-stan="zrobiony"] .elf-pigulka__nr {
	background: var(--elf-akcent-tlo-mocne);
	color: var(--elf-akcent);
}

.elf .elf-pigulka[data-stan="zrobiony"] .elf-pigulka__cyfra {
	display: none;
}

.elf .elf-pigulka[data-stan="zrobiony"] .elf-pigulka__check {
	display: block;
}

/* === Etapy =============================================================== */

.elf .elf-karta__tresc {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	/*
	 * Krok krotszy od wysokosci minimalnej dostaje tyle samo miejsca nad soba,
	 * co pod soba. Bez tego "Start" (dwa kafelki) i "Obszar" u klienta
	 * indywidualnego (trzy kafelki) wisialy u gory, a cala reszta pola
	 * zostawala pusta.
	 */
	justify-content: center;
	/* Stala wysokosc minimalna trzyma stopke w miejscu przy przechodzeniu
	   miedzy krotkim a dlugim krokiem - inaczej przycisk "Dalej" ucieka spod
	   kursora. */
	min-height: 340px;
	padding: 28px 32px;
}

/*
 * Po wyslaniu stopki nie ma, wiec nie ma tez czego stabilizowac. Krotkie
 * potwierdzenie rozciagniete na wysokosc najdluzszego kroku wygladaloby jak
 * puste pole - klase dokleja skrypt razem z pokazaniem ekranu.
 */
.elf .elf-karta__tresc--sukces {
	min-height: 0;
	padding-bottom: 40px;
	padding-top: 40px;
}

.elf .elf-etap:focus {
	outline: none;
}

.elf .elf-etap__tytul {
	font-size: 21px;
	font-weight: 650;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.elf .elf-etap__opis {
	color: var(--elf-tekst-2);
	font-size: 14.5px;
	margin-top: 6px;
	max-width: 62ch;
}

.elf .elf-etap > .elf-grupa,
.elf .elf-etap > .elf-sekcja,
.elf .elf-etap > .elf-pole,
.elf .elf-etap > .elf-zgody {
	margin-top: 22px;
}

@keyframes elf-wejscie {
	from {
		opacity: 0;
		transform: translateX(14px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes elf-wejscie-wstecz {
	from {
		opacity: 0;
		transform: translateX(-14px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.elf .elf-etap--wchodzi {
	animation: elf-wejscie 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.elf .elf-etap--wchodzi-wstecz {
	animation: elf-wejscie-wstecz 260ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* === Karty wyboru ======================================================== */

.elf .elf-grupa__legenda {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 10px;
}

.elf .elf-grupa--rozdzielona {
	border-top: 1px solid var(--elf-ramka);
	margin-top: 24px;
	padding-top: 20px;
}

.elf .elf-wybory {
	display: grid;
	gap: 10px;
}

.elf .elf-wybory--duze {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.elf .elf-wybory--siatka {
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.elf .elf-wybory--dwie {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.elf .elf-wybor {
	/* Podpis w pionie na srodku ikony. Przy wyrownaniu do gory jednoliniowa
	   etykieta wisiala przy gornej krawedzi kwadratu z ikona i kazdy kafelek
	   wygladal, jakby czegos pod nim brakowalo. */
	align-items: center;
	background: var(--elf-tlo);
	border: 1.5px solid var(--elf-ramka);
	border-radius: var(--elf-r-kafel);
	box-shadow: var(--elf-cien-kafel);
	cursor: pointer;
	display: flex;
	gap: 12px;
	padding: 14px;
	position: relative;
	transition: border-color var(--elf-krok), box-shadow var(--elf-krok),
		background var(--elf-krok), transform var(--elf-krok);
}

/*
 * Karta wyboru klienta: ikona i podpis obok siebie, cala para wysrodkowana.
 * Ustawienie w kolumnie (ikona nad podpisem) robilo z dwoch kart wysokie
 * kafle z duza pustka w srodku, odkad znikly zdania wyjasniajace.
 */
.elf .elf-wybor--duzy {
	flex-direction: row;
	gap: 14px;
	justify-content: center;
	padding: 22px 20px;
}

/*
 * Kafelek bez ikony - rodzaj narzedzi przy regeneracji (VHM / HSS). Oba to
 * narzedzia skrawajace, wiec ta sama ikona na obu wygladalaby jak pomylka.
 * Etykieta idzie na srodek, zeby dwa kafelki obok siebie byly symetryczne.
 */
.elf .elf-wybor--tekst {
	justify-content: center;
	padding: 18px 14px;
	text-align: center;
}

.elf .elf-wybor:hover {
	border-color: var(--elf-ramka-2);
	box-shadow: var(--elf-cien-uniesiony);
	transform: translateY(-1px);
}

/* Pole radio/checkbox zostaje w DOM (klawiatura, czytniki ekranu), ale nie
   jest widoczne - rolę zaznaczenia przejmuje cala karta. */
.elf .elf-wybor__input {
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 1px;
}

.elf .elf-wybor__input:focus-visible ~ .elf-wybor__tresc {
	text-decoration: underline;
}

.elf .elf-wybor:has(.elf-wybor__input:focus-visible) {
	box-shadow: 0 0 0 3px var(--elf-akcent-pierscien);
	outline: none;
}

.elf .elf-wybor:has(.elf-wybor__input:checked) {
	background: var(--elf-akcent-tlo);
	border-color: #d42027;
	border-color: var(--elf-akcent);
}

.elf .elf-wybor__ikona {
	align-items: center;
	background: var(--elf-tlo-2);
	border-radius: 10px;
	color: var(--elf-tekst-2);
	display: flex;
	flex: none;
	height: 40px;
	justify-content: center;
	transition: background var(--elf-krok), color var(--elf-krok);
	width: 40px;
}

.elf .elf-wybor--duzy .elf-wybor__ikona {
	border-radius: 12px;
	height: 48px;
	width: 48px;
}

.elf .elf-wybor--duzy .elf-wybor__ikona .elf-ikona {
	height: 24px;
	width: 24px;
}

.elf .elf-wybor:has(.elf-wybor__input:checked) .elf-wybor__ikona {
	background: var(--elf-akcent-tlo-mocne);
	color: var(--elf-akcent);
}

.elf .elf-wybor__tresc {
	display: block;
	/* flex-basis 0 zamiast auto: w kafelku z zawijaniem (ten prowadzacy poza
	   formularz) tekst ma sie skurczyc obok ikony, a nie zeskoczyc pod nia. */
	flex: 1 1 0;
	min-width: 0;
}

.elf .elf-wybor__etykieta {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

.elf .elf-wybor--duzy .elf-wybor__etykieta {
	font-size: 17px;
}

/*
 * Znacznik w rogu kafelka. Zostala z niego jedna rzecz: strzalka na kafelku,
 * ktory wyprowadza z formularza (Reklamacja).
 *
 * BYL TU TEZ PTASZEK pokazywany po zaznaczeniu - usuniety. Stal w prawym gornym
 * rogu, nad trescia kafelka, wiec przy dluzszych etykietach ("Wzorcowanie /
 * kalibracja narzedzi pomiarowych") zachodzil na tekst. Zaznaczenie widac i bez
 * niego: kafelek dostaje kolor akcentu na ramce, tle i ikonie.
 */
.elf .elf-wybor__znacznik {
	align-items: center;
	color: var(--elf-tekst-3);
	display: flex;
	height: 20px;
	justify-content: center;
	position: absolute;
	right: 12px;
	top: 12px;
	width: 20px;
}

.elf .elf-wybor__znacznik .elf-ikona {
	height: 13px;
	width: 13px;
}

/*
 * Zapas dla przegladarek bez :has() (Firefox < 121). Skrypt dokleja klase
 * .elf-wybor--wybrany do etykiety przy kazdej zmianie zaznaczenia, wiec
 * ponizsze reguly robia dokladnie to samo, tylko bez selektora rodzica.
 */
.elf .elf-wybor--wybrany {
	background: var(--elf-akcent-tlo);
	border-color: #d42027;
	border-color: var(--elf-akcent);
}

.elf .elf-wybor--wybrany .elf-wybor__ikona {
	background: var(--elf-akcent-tlo-mocne);
	color: var(--elf-akcent);
}

/* === Chipsy ============================================================== */


/* === Pola formularza ===================================================== */

.elf .elf-sekcja + .elf-sekcja {
	border-top: 1px solid var(--elf-ramka);
	margin-top: 24px;
	padding-top: 20px;
}

.elf .elf-sekcja__tytul {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 12px;
}

.elf .elf-siatka {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.elf .elf-pole {
	min-width: 0;
}

.elf .elf-pole--szerokie {
	grid-column: 1 / -1;
}

.elf .elf-pole__etykieta {
	color: var(--elf-tekst-2);
	display: block;
	font-size: 13.5px;
	font-weight: 600;
	margin-bottom: 6px;
}

.elf .elf-gwiazdka {
	color: var(--elf-akcent);
}

.elf .elf-input,
.elf .elf-select {
	-webkit-appearance: none;
	appearance: none;
	background: var(--elf-tlo);
	border: 1px solid var(--elf-ramka-2);
	border-radius: var(--elf-r-pole);
	color: var(--elf-tekst);
	display: block;
	font-family: inherit;
	font-size: 15px;
	line-height: 1.4;
	margin: 0;
	padding: 11px 14px;
	transition: border-color var(--elf-krok), box-shadow var(--elf-krok);
	width: 100%;
}

.elf .elf-select {
	/* Strzalka rysowana tlem - natywna znika razem z appearance:none, a jej
	   wyglad i tak roznil sie miedzy systemami. */
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238792a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-position: right 12px center;
	background-repeat: no-repeat;
	padding-right: 38px;
}

.elf .elf-input::placeholder {
	color: var(--elf-tekst-3);
}

.elf .elf-input:focus,
.elf .elf-select:focus {
	border-color: #d42027;
	border-color: var(--elf-akcent);
	box-shadow: 0 0 0 3px var(--elf-akcent-pierscien);
	outline: none;
}

.elf .elf-input[aria-invalid="true"] {
	background: var(--elf-blad-tlo);
	border-color: var(--elf-blad);
}

.elf .elf-textarea {
	min-height: 120px;
	resize: vertical;
}

.elf .elf-zlaczone {
	display: flex;
}

.elf .elf-zlaczone .elf-select--waski {
	border-bottom-right-radius: 0;
	border-right: 0;
	border-top-right-radius: 0;
	padding-right: 30px;
	width: 84px;
}

.elf .elf-zlaczone .elf-select--kierunkowy {
	/* Kierunkowy bywa czteroznakowy ("+995", "+423"); prefiks VAT ma zawsze
	   dwa znaki, wiec tamtemu polu wystarcza mniej. */
	width: 98px;
}

.elf .elf-zlaczone .elf-input {
	border-bottom-left-radius: 0;
	border-top-left-radius: 0;
}

/* === Kraj numeru VAT ===================================================== */

/*
 * Nadbudowa nad lista prefiksow: waski przycisk z samym kodem, a pod nim panel
 * z wyszukiwarka i pelnymi nazwami krajow. Wszystko siedzi w tym samym
 * .elf-zlaczone, co pole numeru - stad position: relative, wzgledem ktorego
 * ustawia sie panel.
 */
.elf .elf-kraj {
	position: relative;
}

/*
 * Przycisk podszywa sie pod liste (te same klasy .elf-select), wiec dziedziczy
 * ramke, strzalke i szerokosc. Zostaje wyrownanie tekstu - <button> centruje
 * go domyslnie, a <select> trzyma przy lewej krawedzi.
 */
.elf .elf-kraj__przycisk {
	cursor: pointer;
	text-align: left;
}

.elf .elf-kraj__panel {
	background: var(--elf-tlo);
	border: 1px solid var(--elf-ramka-2);
	border-radius: var(--elf-r-pole);
	box-shadow: var(--elf-cien-uniesiony);
	left: 0;
	padding: 8px;
	position: absolute;
	top: calc(100% + 6px);
	/* Panel jest szerszy od przycisku - musi pomiescic "BA - Bosnia
	   i Hercegowina" - ale nie moze wyjsc poza karte na telefonie. */
	min-width: 260px;
	max-width: min(320px, 100%);
	width: max-content;
	z-index: 20;
}

.elf .elf-kraj__szukaj {
	font-size: 14px;
	padding: 8px 12px;
}

.elf .elf-kraj__lista {
	list-style: none;
	margin: 8px 0 0;
	/* Osiem pozycji na raz. Wiecej i lista zaslania pole, do ktorego wraca
	   uwaga zaraz po wyborze. */
	max-height: 248px;
	overflow-y: auto;
	padding: 0;
}

.elf .elf-kraj__grupa {
	color: var(--elf-tekst-3);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	padding: 10px 10px 4px;
	text-transform: uppercase;
}

.elf .elf-kraj__grupa:first-child {
	padding-top: 2px;
}

.elf .elf-kraj__pozycja {
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
	padding: 7px 10px;
}

/*
 * Jedno wyroznienie dla myszy i dla klawiatury. Pozycje sa <li>, wiec nie maja
 * wlasnego :hover z przegladarki ani fokusu - stan prowadzi skrypt.
 */
.elf .elf-kraj__pozycja:hover,
.elf .elf-kraj__pozycja--aktywna {
	background: var(--elf-tlo-3);
}

.elf .elf-kraj__pozycja[aria-selected="true"] {
	color: var(--elf-akcent);
	font-weight: 600;
}

.elf .elf-kraj__brak {
	color: var(--elf-tekst-3);
	font-size: 13px;
	padding: 10px;
	text-align: center;
}

.elf .elf-pole__podpowiedz {
	color: var(--elf-tekst-3);
	font-size: 12.5px;
	margin-top: 5px;
}

.elf .elf-blad {
	align-items: center;
	color: var(--elf-blad);
	display: flex;
	font-size: 12.5px;
	font-weight: 500;
	gap: 5px;
	margin-top: 6px;
}

.elf .elf-blad::before {
	background: currentColor;
	border-radius: 99px;
	content: "";
	flex: none;
	height: 5px;
	width: 5px;
}

/*
 * Komunikat o nieudanej wysylce. Stoi w stopce karty, a nie przy polu, bo nie
 * dotyczy zadnego konkretnego pola - to odpowiedz serwera na cale zgloszenie.
 * Stad ramka i tlo: przy samym czerwonym tekscie latwo go przeoczyc, a jest to
 * jedyny moment, w ktorym uzytkownik traci wpisane dane, jesli go zignoruje.
 */
.elf .elf-blad--wysylka {
	background: var(--elf-blad-tlo);
	border: 1px solid color-mix(in srgb, var(--elf-blad) 30%, transparent);
	border-radius: var(--elf-r-pole);
	font-size: 13.5px;
	margin: 16px 0 0;
	padding: 10px 14px;
}

/* === Zalaczniki ========================================================= */

.elf .elf-zrzutnia {
	align-items: center;
	background: var(--elf-tlo-2);
	border: 1.5px dashed var(--elf-ramka-2);
	border-radius: var(--elf-r-kafel);
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 26px 20px;
	text-align: center;
	transition: border-color var(--elf-krok), background var(--elf-krok);
}

.elf .elf-zrzutnia:hover,
.elf .elf-zrzutnia--nad {
	background: var(--elf-akcent-tlo);
	border-color: #d42027;
	border-color: var(--elf-akcent);
}

.elf .elf-zrzutnia__ikona {
	color: var(--elf-tekst-3);
	margin-bottom: 4px;
}

.elf .elf-zrzutnia--nad .elf-zrzutnia__ikona,
.elf .elf-zrzutnia:hover .elf-zrzutnia__ikona {
	color: var(--elf-akcent);
}

.elf .elf-zrzutnia__ikona .elf-ikona {
	height: 26px;
	width: 26px;
}

.elf .elf-zrzutnia__tytul {
	font-size: 14.5px;
	font-weight: 600;
}

.elf .elf-zrzutnia__opis {
	color: var(--elf-tekst-3);
	font-size: 12.5px;
}

.elf .elf-pliki:not(:empty) {
	display: grid;
	gap: 8px;
	margin-top: 10px;
}

.elf .elf-plik {
	align-items: center;
	background: var(--elf-tlo-2);
	border: 1px solid var(--elf-ramka);
	border-radius: 10px;
	display: flex;
	gap: 10px;
	padding: 9px 12px;
}

.elf .elf-plik__ikona {
	color: var(--elf-tekst-3);
	flex: none;
}

.elf .elf-plik__nazwa {
	flex: 1 1 auto;
	font-size: 13.5px;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.elf .elf-plik__rozmiar {
	color: var(--elf-tekst-3);
	flex: none;
	font-size: 12.5px;
}

.elf .elf-plik__usun {
	background: transparent;
	border: 0;
	border-radius: 8px;
	color: var(--elf-tekst-3);
	cursor: pointer;
	display: flex;
	flex: none;
	padding: 4px;
	transition: background var(--elf-krok), color var(--elf-krok);
}

.elf .elf-plik__usun:hover {
	background: var(--elf-blad-tlo);
	color: var(--elf-blad);
}


/* === Zgody ============================================================== */

.elf .elf-zgody {
	display: grid;
	gap: 12px;
}

.elf .elf-zgoda {
	align-items: flex-start;
	cursor: pointer;
	display: flex;
	gap: 11px;
	position: relative;
}

.elf .elf-zgoda__input {
	height: 1px;
	opacity: 0;
	position: absolute;
	width: 1px;
}

.elf .elf-zgoda__ptaszek {
	align-items: center;
	background: var(--elf-tlo);
	border: 1.5px solid var(--elf-ramka-2);
	border-radius: 6px;
	color: transparent;
	display: flex;
	flex: none;
	height: 20px;
	justify-content: center;
	margin-top: 1px;
	transition: background var(--elf-krok), border-color var(--elf-krok), color var(--elf-krok);
	width: 20px;
}

.elf .elf-zgoda__ptaszek .elf-ikona {
	height: 13px;
	width: 13px;
}

.elf .elf-zgoda:has(.elf-zgoda__input:checked) .elf-zgoda__ptaszek,
.elf .elf-zgoda--wybrany .elf-zgoda__ptaszek {
	background: #d42027;
	background: var(--elf-akcent);
	border-color: #d42027;
	border-color: var(--elf-akcent);
	color: var(--elf-akcent-tekst);
}

.elf .elf-zgoda:has(.elf-zgoda__input:focus-visible) .elf-zgoda__ptaszek {
	box-shadow: 0 0 0 3px var(--elf-akcent-pierscien);
}

.elf .elf-zgoda__tresc {
	color: var(--elf-tekst-2);
	font-size: 13.5px;
	line-height: 1.5;
}

.elf .elf-zgoda__tresc strong {
	color: var(--elf-tekst);
}

.elf .elf-klauzula {
	border-top: 1px solid var(--elf-ramka);
	padding-top: 12px;
}

.elf .elf-klauzula summary {
	color: var(--elf-tekst-3);
	cursor: pointer;
	font-size: 12.5px;
	list-style: revert;
}

.elf .elf-klauzula__tresc {
	color: var(--elf-tekst-3);
	font-size: 12.5px;
	margin-top: 8px;
}

.elf .elf-klauzula__tresc ol {
	list-style: decimal;
	margin-top: 6px;
	padding-left: 18px;
}

/*
 * Jedyna lista we wtyczce, ktora MA byc numerowana. Numer wraca jawnie na <li>,
 * bo reset na poczatku pliku kasuje markery wprost na pozycjach - wartosc
 * odziedziczona po <ol> juz by go nie przywrocila.
 */
.elf .elf-klauzula__tresc ol > li {
	list-style: decimal;
}

.elf .elf-klauzula__tresc li {
	margin-bottom: 4px;
}

/* === Stopka i przyciski ================================================= */

.elf .elf-karta__stopka {
	align-items: center;
	background: var(--elf-tlo-2);
	border-top: 1px solid var(--elf-ramka);
	display: flex;
	gap: 12px;
	padding: 18px 32px;
}

.elf .elf-karta__stopka .elf-btn--glowny {
	margin-left: auto;
}

.elf .elf-btn {
	align-items: center;
	border: 1px solid transparent;
	border-radius: 10px;
	cursor: pointer;
	display: inline-flex;
	flex: none;
	font-size: 15px;
	font-weight: 600;
	gap: 8px;
	justify-content: center;
	padding: 11px 20px;
	transition: background var(--elf-krok), border-color var(--elf-krok),
		box-shadow var(--elf-krok), transform var(--elf-krok);
	white-space: nowrap;
}

.elf .elf-btn:focus-visible {
	box-shadow: 0 0 0 3px var(--elf-akcent-pierscien);
	outline: none;
}

.elf .elf-btn--glowny {
	background: #d42027;
	background: var(--elf-akcent);
	color: var(--elf-akcent-tekst);
}

.elf .elf-btn--glowny:hover {
	background: var(--elf-akcent-mocny);
	box-shadow: var(--elf-cien-uniesiony);
}

.elf .elf-btn--glowny:active {
	transform: translateY(1px);
}

.elf .elf-btn--cichy {
	background: transparent;
	border-color: var(--elf-ramka-2);
	color: var(--elf-tekst-2);
}

.elf .elf-btn--cichy:hover {
	background: var(--elf-tlo-3);
	color: var(--elf-tekst);
}

.elf .elf-btn[disabled] {
	cursor: default;
	opacity: 0.55;
}

.elf .elf-btn[disabled]:hover {
	box-shadow: none;
	transform: none;
}

/* Kreciolek widoczny tylko na czas wysylki. */
.elf .elf-spinner {
	animation: elf-obrot 700ms linear infinite;
	border: 2px solid rgba(255, 255, 255, 0.35);
	border-radius: 99px;
	border-top-color: #fff;
	display: none;
	height: 15px;
	width: 15px;
}

.elf .elf-btn--wysyla .elf-spinner {
	display: block;
}

@keyframes elf-obrot {
	to {
		transform: rotate(360deg);
	}
}

/* === Ekran potwierdzenia ================================================ */

.elf .elf-sukces {
	padding: 16px 0 8px;
	text-align: center;
}

.elf .elf-sukces__znak {
	align-items: center;
	background: var(--elf-sukces-tlo);
	border-radius: 99px;
	color: var(--elf-sukces);
	display: inline-flex;
	height: 62px;
	justify-content: center;
	margin-bottom: 18px;
	width: 62px;
}

.elf .elf-sukces__znak .elf-ikona {
	height: 30px;
	stroke-width: 2.2;
	width: 30px;
}

.elf .elf-sukces__tytul {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.elf .elf-sukces__opis {
	color: var(--elf-tekst-2);
	font-size: 14.5px;
	margin: 8px auto 0;
	max-width: 52ch;
}

/*
 * Numer zgloszenia. Plakietka, a nie kolejne zdanie: ma sie rzucac w oczy
 * i dac przepisac albo zaznaczyc myszka, bo po to jest.
 */
.elf .elf-sukces__numer {
	align-items: center;
	background: var(--elf-tlo-2);
	border: 1px solid var(--elf-ramka);
	border-radius: 99px;
	display: inline-flex;
	gap: 8px;
	margin-top: 16px;
	padding: 8px 18px;
}

.elf .elf-sukces__numer-etykieta {
	color: var(--elf-tekst-3);
	font-size: 12.5px;
}

.elf .elf-sukces__numer-wartosc {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	/* Numer bywa przepisywany z ekranu - cyfry o stalej szerokosci czyta sie
	   pewniej, a "0" nie myli sie z "O". */
	font-variant-numeric: tabular-nums;
	-webkit-user-select: all;
	user-select: all;
}

.elf .elf-plakietka {
	border-radius: 8px;
	display: inline-block;
	font-size: 12.5px;
	margin-top: 24px;
	padding: 8px 14px;
}

.elf .elf-plakietka--demo {
	background: #fffaeb;
	border: 1px solid #fedf89;
	color: #93370d;
}

.elf[data-motyw="ciemny"] .elf-plakietka--demo {
	background: #2b2113;
	border-color: #56401f;
	color: #f5d68a;
}

.elf .elf-sukces .elf-btn {
	display: flex;
	margin: 18px auto 0;
}

/* === Kafelek prowadzacy poza formularz =================================== */

/*
 * Reklamacja jest linkiem, a nie polem wyboru, wiec karta bywa znacznikiem
 * <a> albo <button>. Oba przynosza wlasne domyslne style przegladarki -
 * podkreslenie, wysrodkowany tekst, wezsza czcionke - i trzeba je zgasic,
 * zeby kafelek wygladal identycznie jak sasiedzi.
 */
.elf a.elf-wybor,
.elf button.elf-wybor {
	color: inherit;
	font: inherit;
	text-align: left;
	text-decoration: none;
	width: 100%;
}

.elf .elf-wybor--zewnetrzny {
	/* Przerywana ramka niesie te sama informacje co ikona w rogu: to wyjscie
	   na bok, a nie kolejny krok formularza. */
	border-style: dashed;
}

.elf .elf-wybor--zewnetrzny:hover {
	border-color: var(--elf-akcent-ramka);
}

/*
 * Klasa zostaje, choc nie ma juz czego nadpisywac po ptaszku: to po niej widac
 * w szablonie, ze to znacznik odnosnika, a nie znak zaznaczenia. Sam wyglad
 * opisuje regula bazowa .elf-wybor__znacznik.
 */
.elf .elf-wybor--zewnetrzny:hover .elf-wybor__znacznik--link {
	color: var(--elf-akcent);
}

/* === Pobieranie danych firmy z GUS ======================================= */

.elf .elf-gus {
	margin-bottom: 18px;
}

.elf .elf-gus__stan {
	align-items: center;
	color: var(--elf-tekst-3);
	display: flex;
	font-size: 12.5px;
	gap: 7px;
	margin-top: 10px;
}

.elf .elf-gus__stan::before {
	background: currentColor;
	border-radius: 99px;
	content: "";
	flex: none;
	height: 6px;
	width: 6px;
}

.elf .elf-gus__stan--ok {
	color: var(--elf-sukces);
}

/* Pole uzupelnione z rejestru - wyroznienie znika, gdy uzytkownik je poprawi,
   zeby kolor nie klamal o zrodle danych. */
.elf .elf-input--z-gus {
	background: var(--elf-sukces-tlo);
	border-color: #cfd4dd;
	border-color: color-mix(in srgb, var(--elf-sukces) 35%, transparent);
}

/* === Opis sprawy i zalaczniki obok siebie ================================ */

/*
 * Proporcja 3:1. Zalaczniki nie potrzebuja polowy szerokosci - potrzebuja byc
 * widoczne w tym samym spojrzeniu co pole tekstowe, a nie pod nim.
 */
.elf .elf-opis-ukl {
	display: grid;
	gap: 14px;
	grid-template-columns: 3fr 1fr;
}

.elf .elf-opis-ukl__tekst {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.elf .elf-opis-ukl__pliki {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

/* Lista dodanych plikow biegnie pod obiema kolumnami - nazwy plikow nie
   zmieszczilyby sie w waskiej kolumnie bez przycinania w polowie slowa. */
.elf .elf-opis-ukl__lista {
	grid-column: 1 / -1;
}

.elf .elf-opis-ukl .elf-textarea {
	flex: 1 1 auto;
}

/* Wersja waska: zostaje ikona i dwa krotkie napisy. */
.elf .elf-zrzutnia--waska {
	flex: 1 1 auto;
	gap: 2px;
	justify-content: center;
	padding: 16px 12px;
}

.elf .elf-zrzutnia--waska .elf-zrzutnia__tytul {
	font-size: 13.5px;
}

.elf .elf-zrzutnia--waska .elf-zrzutnia__opis {
	font-size: 11.5px;
	line-height: 1.35;
}

/* === Rozwijanie danych adresowych ======================================== */

.elf .elf-rozwin {
	align-items: center;
	background: transparent;
	border: 0;
	color: var(--elf-tekst-2);
	cursor: pointer;
	display: flex;
	font-size: 13px;
	font-weight: 600;
	gap: 6px;
	margin-top: 12px;
	padding: 4px 0;
}

.elf .elf-rozwin:hover {
	color: var(--elf-akcent);
}

.elf .elf-rozwin__strzalka {
	height: 16px;
	transition: transform var(--elf-krok);
	width: 16px;
}

.elf .elf-rozwin--otwarty .elf-rozwin__strzalka {
	transform: rotate(180deg);
}

.elf .elf-rozwin + .elf-siatka {
	margin-top: 12px;
}

/* === Drobiazgi =========================================================== */

.elf .elf-grupa__dopisek {
	color: var(--elf-tekst-3);
	font-weight: 400;
}

/*
 * Naglowek kroku "Zakres" stoi POZA grupami kafelkow - nie kazda sprawa je ma
 * (przy vendingu i wzorcowaniu zostaje sam opis z zalacznikami), a naglowek
 * musi byc widoczny zawsze. Odstep nad nim jest taki sam, jaki .elf-grupa
 * bierze w kroku, a grupy pod nim swojego juz nie dokladaja: robi to
 * margines dolny samego naglowka.
 */
.elf .elf-legenda-zakresu {
	margin-top: 22px;
}

/*
 * Krok 3 nie ma wlasnego tytulu (elf_kroki() zostawia go pustym), wiec naglowek
 * zakresu jest pierwszy w sekcji i jego gorny margines to czyste puste miejsce
 * - odstep od gory daje juz padding karty.
 *
 * Widac to najbardziej przy sprawach bez kafelkow (uwagi, vending,
 * wzorcowanie): tresc kroku jest krotka, a karta srodkuje ja w pionie, wiec te
 * 22 px ladowalo w calosci nad naglowkiem i robilo z pozoru srodkowanego bloku
 * blok zsuniety w dol.
 */
.elf .elf-etap > .elf-legenda-zakresu:first-child {
	margin-top: 0;
}

.elf .elf-legenda-zakresu ~ .elf-grupa {
	margin-top: 0;
}

/*
 * Obie grupy schowane = sprawa bez kafelkow. Naglowek stalby wtedy 10 px nad
 * linia oddzielajaca opis i wygladalaby ona jak jego podkreslenie.
 * Selektor celuje w to dokladnie: reaguje tylko wtedy, gdy PRZED opisem stoja
 * dwie ukryte grupy, a nie gdy ukryta jest jedna z nich.
 */
.elf .elf-grupa[hidden] + .elf-grupa[hidden] + .elf-pole--rozdzielone {
	margin-top: 18px;
}

.elf .elf-pole--rozdzielone {
	border-top: 1px solid var(--elf-ramka);
	padding-top: 20px;
}

/* === Kolumna motywu ELTECH ============================================== */

/*
 * Jedyna regula w tym pliku, ktora nie zaczyna sie od .elf - i jedyna, ktora
 * dotyka czegos poza formularzem. Klase .elf-strona dostaje <body> tylko tej
 * strony, w ktorej tresci stoi shortcode (elf_klasa_strony() w
 * includes/shortcode.php), wiec reszty witryny to nie rusza.
 *
 * Motyw eltech.com.pl sklada strone Kontakt z dwoch kolumn: tresc w .leftCol
 * (40% szerokosci) i miejsce na stary formularz w .rightCol (55%). Stary
 * formularz jest schowany, ale kolumna na tresc zostala waska: nasz formularz
 * dostawal 480 px z 1200 px (400 px na ekranie ponizej 1240 px) i stal na
 * lewej polowie strony obok pustego miejsca. Rozciagamy wiec .leftCol na cala
 * szerokosc; pusta .rightCol ma zerowa wysokosc i niczego nie przykrywa.
 * Formularz trzyma dalej swoje 880 px, a dane firmy pod nim (w tej samej
 * kolumnie) ukladaja sie w dwie kolumny, na ktore sa napisane.
 *
 * Specyficznosc jest o klase wyzsza niz w regule motywu, wiec wynik nie zalezy
 * od kolejnosci arkuszy. Na innym motywie selektor nie trafia w nic.
 */
.elf-strona #content.contact .wrapper .leftCol {
	float: none;
	margin-right: 0;
	width: auto;
}

/* === Wersje waskie ====================================================== */

@media (max-width: 640px) {
	.elf .elf-karta__szapka {
		padding: 22px 18px 16px;
	}

	.elf .elf-karta__tresc {
		min-height: 0;
		padding: 22px 18px;
	}

	.elf .elf-karta__stopka {
		flex-wrap: wrap;
		padding: 16px 18px;
	}

	.elf .elf-tytul {
		font-size: 24px;
	}

	.elf .elf-wybory--duze,
	.elf .elf-siatka {
		grid-template-columns: minmax(0, 1fr);
	}

		/* Na telefonie zalaczniki wracaja pod pole tekstowe - kolumna o szerokosci
	   jednej czwartej ekranu zmiescilaby tylko ikone. */
	.elf .elf-opis-ukl {
		grid-template-columns: minmax(0, 1fr);
	}

	.elf .elf-kraj__panel {
		max-width: none;
		min-width: 0;
		right: 0;
		width: auto;
	}

	/* Etykiety krokow zabieraja na telefonie cala szerokosc - zostaja same
	   numery, ktore i tak nios informacje "gdzie jestem". */
	.elf .elf-pigulka:not([data-stan="aktywny"]) .elf-pigulka__txt {
		display: none;
	}

	.elf .elf-btn {
		flex: 1 1 auto;
	}
}

/* Uzytkownik, ktory wylaczyl animacje w systemie, dostaje te same przejscia
   bez ruchu - nic nie znika, nic nie jezdzi. */
@media (prefers-reduced-motion: reduce) {
	.elf *,
	.elf *::before,
	.elf *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}