/*
 * Kalkulator zaladunku.
 *
 * Wszystkie reguly maja przedrostek sdkz, wiec nie moga wejsc w konflikt
 * ze stylami motywu ani innych wtyczek. Kolory pobierane sa ze zmiennych
 * motywu, a gdy ich brak - z wartosci zapasowych po przecinku.
 */

.sdkz {
	--sdkz-zielen-ciemna: var(--color-primary-dark, #1b4332);
	--sdkz-zielen: var(--color-primary, #2d6a4f);
	--sdkz-zielen-jasna: #52b788;
	--sdkz-mieta: #f2f9f5;
	--sdkz-kreska: var(--color-border, #d3d7d0);
	--sdkz-tekst: var(--color-text, #1a1a1a);
	--sdkz-stonowany: var(--color-muted, #6b7280);
	--sdkz-alarm: #b03a2e;
	--sdkz-uwaga: #b8860b;
	--sdkz-naglowki: var(--font-heading, "Roboto Slab", Georgia, serif);
	--sdkz-tresc: var(--font-ui, Roboto, system-ui, sans-serif);

	font-family: var(--sdkz-tresc);
	color: var(--sdkz-tekst);
	line-height: 1.6;
}

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

.sdkz__tytul {
	margin: 0 0 6px;
	font-family: var(--sdkz-naglowki);
	font-size: clamp(20px, 2.4vw, 26px);
	line-height: 1.25;
	color: var(--sdkz-zielen-ciemna);
}

.sdkz__wstep {
	margin: 0 0 20px;
	font-size: 14.5px;
	color: var(--sdkz-stonowany);
	max-width: 660px;
}

.sdkz__uklad {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	gap: 20px;
	align-items: start;
}

@media (max-width: 980px) {
	.sdkz__uklad {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Kolumna z formularzem. Bez min-width dziecko siatki nie kurczy sie
   ponizej szerokosci swojej tresci i przy dlugich nazwach materialow
   uklad rozpycha sie poza ekran. */
.sdkz__lewa {
	min-width: 0;
}

.sdkz__lista {
	margin-bottom: 4px;
}

/* --- karty --- */

.sdkz__karta {
	background: #fff;
	border: 1px solid var(--sdkz-kreska);
	border-radius: 12px;
	padding: 18px 20px;
	margin-bottom: 16px;
}

.sdkz__karta h3 {
	margin: 0 0 4px;
	font-family: var(--sdkz-naglowki);
	font-size: 16.5px;
	color: var(--sdkz-zielen-ciemna);
}

.sdkz__podpis {
	margin: 0 0 14px;
	font-size: 13px;
	color: var(--sdkz-stonowany);
}

.sdkz__pomoc {
	margin: 10px 0 0;
	font-size: 12.5px;
	color: var(--sdkz-stonowany);
}

/* --- pola --- */

.sdkz label {
	display: block;
	margin-bottom: 5px;
	font-size: 12px;
	font-weight: 600;
	color: var(--sdkz-zielen-ciemna);
}

.sdkz input,
.sdkz select {
	width: 100%;
	min-height: 42px;
	padding: 8px 11px;
	font: inherit;
	font-size: 14px;
	background: #fff;
	border: 1.5px solid var(--sdkz-kreska);
	border-radius: 6px;
	color: var(--sdkz-tekst);
	transition: border-color .18s ease, box-shadow .18s ease;
}

.sdkz input:hover,
.sdkz select:hover {
	border-color: #b9c0b8;
}

.sdkz input:focus,
.sdkz select:focus {
	outline: none;
	border-color: var(--sdkz-zielen);
	box-shadow: 0 0 0 3px rgba(45, 106, 79, .16);
}

.sdkz__pary {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.sdkz__pary--gora {
	margin-top: 12px;
}

@media (max-width: 520px) {
	.sdkz__pary {
		grid-template-columns: 1fr;
	}
}

/* --- pozycje ladunku --- */

.sdkz__wiersz {
	display: grid;
	grid-template-columns: 1fr 80px 80px 88px 72px 38px;
	gap: 9px;
	align-items: end;
	padding: 12px;
	margin-bottom: 9px;
	background: #fdfdfc;
	border: 1px solid var(--sdkz-kreska);
	border-radius: 10px;
}

.sdkz__wiersz--zla {
	border-color: #e8b4ae;
	background: #fdf6f5;
}

.sdkz__wiersz label {
	font-size: 11px;
}

@media (max-width: 720px) {
	.sdkz__wiersz {
		grid-template-columns: 1fr 1fr 1fr;
	}



	.sdkz__wiersz-pelny {
		grid-column: 1 / -1;
	}

	.sdkz__wiersz-usun {
		grid-column: 1 / -1;
		justify-self: start;
	}
}

/* --- przyciski --- */

.sdkz button {
	font: inherit;
	cursor: pointer;
	border-radius: 6px;
	border: 1.5px solid transparent;
	transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.sdkz button:focus-visible {
	outline: 2px solid var(--sdkz-zielen);
	outline-offset: 3px;
}

.sdkz__btn {
	padding: 10px 16px;
	font-size: 13.5px;
	font-weight: 600;
	background: #fff;
	border-color: var(--sdkz-kreska);
	color: var(--sdkz-zielen-ciemna);
}

.sdkz__btn:hover {
	border-color: var(--sdkz-zielen);
	color: var(--sdkz-zielen);
}

.sdkz__btn--glowny {
	background: var(--sdkz-zielen);
	border-color: var(--sdkz-zielen);
	color: #fff;
}

.sdkz__btn--glowny:hover {
	background: var(--sdkz-zielen-ciemna);
	border-color: var(--sdkz-zielen-ciemna);
	color: #fff;
}

.sdkz__przyciski {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 6px;
}

.sdkz__usun {
	width: 38px;
	height: 42px;
	background: #fff;
	border-color: var(--sdkz-kreska);
	color: var(--sdkz-alarm);
	font-size: 17px;
	line-height: 1;
}

.sdkz__usun:hover {
	background: #fdf0ee;
	border-color: #e8b4ae;
}

/* --- panel wyniku --- */

.sdkz__panel {
	position: sticky;
	top: 16px;
}

@media (max-width: 980px) {
	.sdkz__panel {
		position: static;
	}
}

.sdkz__werdykt {
	padding: 18px 20px;
	margin-bottom: 14px;
	border-radius: 12px;
	color: #fff;
}

.sdkz__werdykt h3 {
	margin: 0 0 6px;
	font-family: var(--sdkz-naglowki);
	font-size: 19px;
	line-height: 1.25;
	color: inherit;
}

.sdkz__werdykt p {
	margin: 0;
	font-size: 13.5px;
	opacity: .92;
}

.sdkz__werdykt--tak {
	background: linear-gradient(150deg, #1b4332, #2d6a4f);
}

.sdkz__werdykt--prawie {
	background: linear-gradient(150deg, #7a5c10, #b8860b);
}

.sdkz__werdykt--nie {
	background: linear-gradient(150deg, #7d281e, #b03a2e);
}

.sdkz__werdykt--pusto {
	background: #e9ebe7;
	color: var(--sdkz-stonowany);
}

.sdkz__werdykt--pusto h3 {
	color: var(--sdkz-stonowany);
}

/* --- podsumowanie --- */

.sdkz__suma {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin: 12px 0 0;
}

.sdkz__suma div {
	padding: 10px 12px;
	background: var(--sdkz-mieta);
	border-radius: 8px;
}

.sdkz__suma dt {
	margin: 0 0 2px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--sdkz-stonowany);
}

.sdkz__suma dd {
	margin: 0;
	font-family: var(--sdkz-naglowki);
	font-size: 17px;
	font-weight: 700;
	color: var(--sdkz-zielen-ciemna);
}

.sdkz__zastrzezenie {
	margin: 16px 0 0;
	padding-left: 13px;
	border-left: 2px solid var(--sdkz-kreska);
	font-size: 12.5px;
	color: var(--sdkz-stonowany);
}

@media (prefers-reduced-motion: reduce) {
	.sdkz *,
	.sdkz *::before,
	.sdkz *::after {
		transition: none !important;
	}
}

/* --- lista pojazdow w formularzu --- */

/* Wiersz pojazdu ma o jedna komorke wiecej niz wiersz ladunku - doszedl
   numer rejestracyjny. Bez wlasnej siatki komorki wchodzily na kolumny
   przeznaczone dla czego innego: ladownosc ladowala w kolumnie szerokiej
   na przycisk usuwania, a sam przycisk spadal do nastepnego wiersza. */

.sdkz__wiersz--pojazd {
	background: var(--sdkz-mieta);
	gap: 8px;
	padding: 10px 12px;
	margin-bottom: 8px;
	grid-template-columns:
		minmax( 7em, 1.4fr )   /* nazwa - jedyna, ktora rosnie */
		92px                   /* numer rejestracyjny */
		62px                   /* dlugosc */
		62px                   /* szerokosc */
		62px                   /* wysokosc */
		78px                   /* ladownosc */
		34px;                  /* usuniecie */
}

/* Etykieta "Ladownosc kg" nie miesci sie w jednej linii przy 11 px
   i lamala kolumne na dwa wiersze, przez co pola nie stawaly w rzedzie. */
.sdkz__wiersz--pojazd label {
	white-space: nowrap;
}

.sdkz__wiersz--pojazd input {
	min-width: 0;
	min-height: 36px;
	padding: 7px 9px;
	font-size: 13px;
}

/*
 * Strzalki pola liczbowego w wierszu pojazdu.
 *
 * Przegladarka rezerwuje na nie okolo szesnastu pikseli po prawej stronie,
 * niezaleznie od tego, czy sa widoczne. Przy kolumnie szerokiej na 62 px
 * zostawalo za malo miejsca i wartosc "2,45" byla przycieta - widac bylo
 * "2,4" i polowe piatki. Wymiary i tak sie wpisuje, a nie klika strzalkami.
 */
.sdkz__wiersz--pojazd input[type="number"] {
	appearance: textfield;
	-moz-appearance: textfield;
}

.sdkz__wiersz--pojazd input[type="number"]::-webkit-outer-spin-button,
.sdkz__wiersz--pojazd input[type="number"]::-webkit-inner-spin-button {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
}

/* Etykiety mniejsze - wiersz jest gesty, a etykieta ma tylko przypominac,
   ktora to kolumna. */
.sdkz__wiersz--pojazd label {
	font-size: 10.5px;
	letter-spacing: .01em;
	color: var(--sdkz-stonowany);
}

/* Nazwa i numer to jedyne pola, w ktorych sie czyta, a nie tylko sprawdza
   liczbe - zostaja w rozmiarze wygodnym do pisania. */
.sdkz__wiersz--pojazd .sdkz__wiersz-pelny input,
.sdkz__wiersz-rejestracja input {
	font-size: 14px;
}

/*
 * Prog liczony od szerokosci kolumny, nie okna.
 *
 * Kalkulator stoi w lewej kolumnie ukladu, obok panelu szerokiego na 360 px.
 * Przy oknie 1024 px na wiersz zostaje 560 px i siedem kolumn sie nie miesci,
 * ale przy oknie 900 px panel schodzi pod spod i miejsca jest znowu 816 px.
 * Prog oparty na oknie mialby wiec dziure: wasko przy 1024, szeroko przy 900
 * i znowu wasko nizej. Zapytanie o kontener pyta o to, co naprawde decyduje.
 */
.sdkz__lewa {
	container-type: inline-size;
	container-name: sdkz-kolumna;
}

/* Po zmniejszeniu pisma i odstepow wiersz miesci sie w 574 px, wiec prog
   schodzi z 580 na 560 - inaczej uklad lamalby sie tuz przed granica,
   przy ktorej jeszcze wszystko stoi w rzedzie. */
@container sdkz-kolumna ( max-width: 560px ) {

	.sdkz__wiersz--pojazd {
		grid-template-columns:
			minmax( 7em, 1fr ) 92px 62px 62px 62px;
	}

	.sdkz__wiersz--pojazd .sdkz__wiersz-ladownosc {
		grid-column: 1 / 3;
	}

	.sdkz__wiersz--pojazd .sdkz__wiersz-usun {
		grid-column: 5 / 6;
		justify-self: end;
	}
}

/* Ponizej 470 px nazwa i numer biora caly rzad - to one mowia, ktore auto. */
@container sdkz-kolumna ( max-width: 470px ) {

	.sdkz__wiersz--pojazd {
		grid-template-columns: 1fr 1fr 1fr;
	}

	.sdkz__wiersz--pojazd .sdkz__wiersz-pelny,
	.sdkz__wiersz--pojazd .sdkz__wiersz-rejestracja {
		grid-column: 1 / -1;
	}

	.sdkz__wiersz--pojazd .sdkz__wiersz-ladownosc {
		grid-column: 1 / 3;
	}

	.sdkz__wiersz--pojazd .sdkz__wiersz-usun {
		grid-column: 3 / 4;
		justify-self: end;
	}
}

.sdkz__naglowek-listy {
	margin: 0 0 10px;
	font-family: var(--sdkz-naglowki);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--sdkz-zielen-ciemna);
}

.sdkz__pusto {
	margin: 0 0 14px;
	padding: 14px 16px;
	background: #f6f7f5;
	border: 1px dashed var(--sdkz-kreska);
	border-radius: 10px;
	font-size: 13px;
	color: var(--sdkz-stonowany);
}

/* --- wynik dla pojedynczego pojazdu --- */

.sdkz__pojazd {
	background: #fff;
	border: 1px solid var(--sdkz-kreska);
	border-left: 4px solid var(--sdkz-kreska);
	border-radius: 10px;
	padding: 13px 15px;
	margin-bottom: 10px;
}

.sdkz__pojazd--tak { border-left-color: var(--sdkz-zielen); }
.sdkz__pojazd--prawie { border-left-color: var(--sdkz-uwaga); }
.sdkz__pojazd--kursy { border-left-color: var(--sdkz-uwaga); }
.sdkz__pojazd--nie { border-left-color: var(--sdkz-alarm); }

/* Pojazd polecony. Obwodka zamiast wypelnienia - karta ma pozostac
   czytelna, a nie krzyczec kolorem. */
.sdkz__pojazd--wybrany {
	box-shadow: 0 0 0 3px rgba(45, 106, 79, .12);
	border-color: var(--sdkz-zielen);
}

.sdkz__pojazd-gora {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 4px;
}

.sdkz__pojazd-nazwa {
	font-family: var(--sdkz-naglowki);
	font-size: 14.5px;
	font-weight: 700;
	color: var(--sdkz-zielen-ciemna);
}

.sdkz__pojazd-stan {
	flex: 0 0 auto;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sdkz-stonowany);
}

.sdkz__pojazd--tak .sdkz__pojazd-stan { color: var(--sdkz-zielen); }
.sdkz__pojazd--prawie .sdkz__pojazd-stan,
.sdkz__pojazd--kursy .sdkz__pojazd-stan { color: var(--sdkz-uwaga); }
.sdkz__pojazd--nie .sdkz__pojazd-stan { color: var(--sdkz-alarm); }

.sdkz__pojazd-opis {
	margin: 0 0 10px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--sdkz-stonowany);
}

/* --- trzy paski w karcie pojazdu --- */

.sdkz__mini {
	display: grid;
	grid-template-columns: 74px minmax(0, 1fr) 66px;
	align-items: center;
	gap: 9px;
	margin-bottom: 5px;
}

.sdkz__mini:last-child {
	margin-bottom: 0;
}

.sdkz__mini-nazwa {
	font-size: 11.5px;
	font-weight: 600;
	color: var(--sdkz-stonowany);
}

.sdkz__mini-slupek {
	display: block;
	height: 7px;
	border-radius: 999px;
	background: #eceee9;
	overflow: hidden;
}

.sdkz__mini-slupek > span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--sdkz-zielen-jasna);
	transition: width .3s ease, background .3s ease;
}

.sdkz__mini-slupek > span.sdkz--uwaga { background: var(--sdkz-uwaga); }
.sdkz__mini-slupek > span.sdkz--alarm { background: var(--sdkz-alarm); }

.sdkz__mini-wartosc {
	font-size: 11.5px;
	text-align: right;
	color: var(--sdkz-stonowany);
	white-space: nowrap;
}

/* Podsumowanie ladunku ma teraz cztery pozycje. */
.sdkz__suma {
	grid-template-columns: 1fr 1fr;
}

.sdkz__suma dd {
	font-size: 16px;
}

/* --- informacja o wczytanej liscie --- */

.sdkz__przywrocenie {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	padding: 9px 13px;
	background: var(--sdkz-mieta);
	border: 1px solid #d8e6dd;
	border-radius: 8px;
	font-size: 12.5px;
	color: var(--sdkz-zielen-ciemna);
}

/*
 * Przycisk "Zacznij od nowa". Wygladal jak odnosnik i podkreslenie bylo
 * jego jedynym sygnalem klikalnosci - a w tym serwisie odnosniki nigdy nie
 * sa podkreslone. Zamiast podkreslenia dostaje obramowana pigulke, tak jak
 * przyciski w stopce: sygnal zostaje, zasada tez.
 */
.sdkz__link {
	padding: 5px 12px;
	background: none;
	border: 1px solid var(--sdkz-zielen);
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--sdkz-zielen);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.sdkz__link:hover,
.sdkz__link:focus-visible {
	background: var(--sdkz-zielen);
	border-color: var(--sdkz-zielen);
	color: #fff;
	text-decoration: none;
}

/* Pole numeru rejestracyjnego. Wielkie litery wymusza arkusz, a nie
   przegladarka - dzieki temu wpisany maly tekst wyglada tak samo jak
   ten, ktory po zapisie zostanie zamieniony na wielkie litery. */

.sdkz__wiersz-rejestracja {
	min-width: 9em;
}

.sdkz__wiersz-rejestracja input {
	text-transform: uppercase;
	letter-spacing: .5px;
	font-variant-numeric: tabular-nums;
}

/* Numer w wyniku - odrobine ciszej niz nazwa typu, bo nazwa mowi
   co, a numer ktory. */
.sdkz__pojazd-nazwa {
	font-variant-numeric: tabular-nums;
}

/* Pola pojazdu na ekranie dotykowym.

   Przy 36 px wysokosci trafienie palcem w sasiednie pole zdarza sie
   regularnie, a wiersz pojazdu ma ich szesc obok siebie. Ponizej 640 px
   wiersz rozklada sie na trzy kolumny, wiec miejsca na wyzsze pola
   jest dosc.

   Warunek pyta o rodzaj wskaznika, nie o szerokosc - palec jest palcem
   takze przy telefonie trzymanym poziomo. */
@media ( pointer: coarse ) {

	.sdkz__wiersz--pojazd input {
		min-height: 44px;
	}

	.sdkz__wiersz-usun button,
	.sdkz__wiersz--pojazd button {
		min-height: 44px;
		min-width: 44px;
	}
}

/* Pasek komunikatow pod lista pozycji.

   Ton piaskowy, nie czerwony: to informacja o tym, czego nie udalo sie
   wczytac, a nie blad zatrzymujacy prace. Czerwien zuzyta tutaj przestaje
   cokolwiek znaczyc przy prawdziwym bledzie. */
.sdkz__komunikat {
	/* Tresc zawiera znaki nowego wiersza - kazda pominieta pozycja stoi
	   osobno. Bez tego przegladarka zwinelaby je w jeden ciag. */
	white-space: pre-line;

	margin: 12px 0 0;
	padding: 10px 14px;

	background: #fdf6ea;
	border-left: 3px solid #d9a441;
	border-radius: 4px;

	font-size: 13px;
	line-height: 1.55;
	color: #6b5836;
}

/* Odnosnik z koszyka do kalkulatora zaladunku.

   Stoi pod tabela koszyka, gdzie klient decyduje, co dalej - obok
   przeliczenia i przejscia do zamowienia. */
.sdkz-z-koszyka {
	margin: 16px 0 0;
}