/**
 * Blok 6, krok 1 koszyka — sprawdzian dopasowania do auta.
 *
 * WARSTWY KASKADY (P-001). Ten arkusz ładuje się PO style.css, ale PRZED inline
 * <style id="wp-custom-css"> z Customizera, który przy równej specyficzności wygrywa
 * i siedzi w bazie, poza FTP i poza REST. Sprawdzone przed napisaniem tych reguł
 * w wordpress/tempomaty/customizer-additional-css.css:
 *   - reguły na `td` są tam zawężone do `table.shop_table` -> nasza .gts-dop-ceny wolna
 *   - `.woocommerce button.button { padding: 12px !important }` -> NIE walczymy, nasze
 *     przyciski mają wyglądać jak reszta koszyka
 *   - brak jakichkolwiek reguł na `details`, `summary` i na goły `select`
 *
 * P-045 OMINIĘTE Z ZAŁOŻENIA: selecty NIE stoją w tabeli. Procenty w table.variations
 * liczą się od szerokości tabeli, nie kolumny, i cicho zmieniają bazę, gdy kontener
 * zmieni się na flex (240 px -> 82 px, zdarzyło się 2026-09-04). Układ na flexie
 * nie ma tego problemu, bo szerokość bierzemy z `ch`, nie z procentów.
 *
 * Wszystkie nazwy klas mają prefiks `gts-dop`, więc specyficzność 0,0,1,0 wystarcza
 * wszędzie tam, gdzie motyw nie celuje w ten sam element.
 */

.gts-dop {
	margin: 32px 0;
	padding: 24px;
	border: 1px solid rgba( 0, 0, 0, .1 );
	border-radius: 24px;
	background: #fafafa;
}

.gts-dop__tytul {
	margin: 0 0 16px;
	font-size: 20px;
}

/* Trzy pola obok siebie na desktopie, jedno pod drugim na wąskim ekranie.
   flex-wrap zamiast media query: łamie się dokładnie wtedy, kiedy musi. */
.gts-dop__pola {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.gts-dop__pole {
	display: flex;
	flex: 1 1 200px;
	flex-direction: column;
	gap: 6px;
	margin: 0;
}

.gts-dop__pole label {
	font-size: 14px;
	font-weight: 600;
}

/* ⚠️ WYGLĄD POLA NALEŻY DO KOMPONENTU `.gts-pole__kontrolka` (`css/komponenty.css`),
   a nie do tego pliku. Markup nosi obie klasy. Tu zostaje WYŁĄCZNIE to, czego komponent
   nie może wiedzieć: ile znaków musi się zmieścić w tym konkretnym selekcie.
   Duplikowanie tu ramki, tła i promienia kończyło się tym, że ten arkusz — ładowany
   PO komponentach — po cichu cofał zmiany w komponencie. */

/* Szerokość w `ch`, nie w procentach: najdłuższa opcja to „pasuje do wszystkich
   roczników" i jej odpowiedniki SK/CZ/EN. Jednostka `ch` skaluje się z fontem,
   więc zapas zostaje także przy innym rozmiarze tekstu. */
.gts-dop__select {
	max-width: 34ch;
}

/* --- WERDYKT --------------------------------------------------------------- */

.gts-dop__werdykt:empty {
	display: none;
}

/* Bez paska z boku — jednolite tło (decyzja właściciela 2026-09-15).
   Mocniejsza kreska przy krawędzi rozbijała blok na dwie części zamiast go scalać.
   Promień zrównany z kartą (24 px), żeby werdykt nie był trzecim kształtem na ekranie. */
.gts-dop-werdykt {
	margin-top: 20px;
	padding: 20px 24px;
	border-radius: 24px;
}

.gts-dop-werdykt--pasuje {
	background: rgba( 130, 225, 114, .14 );
}

.gts-dop-werdykt--nie-pasuje {
	background: rgba( 229, 165, 63, .12 );
}

.gts-dop-werdykt__naglowek {
	margin: 0;
	font-size: 17px;
	font-weight: 600;
}

.gts-dop-werdykt__powod {
	margin: 8px 0 0;
	font-size: 15px;
}

/* Zestawienie cen. NIE jest to shop_table, więc reguły motywu i Customizera na
   `table.shop_table td` go nie dotyczą — dlatego ramki ustawiamy same. */
.gts-dop-ceny {
	width: auto;
	margin: 14px 0 0;
	border: 0;
	border-collapse: collapse;
	font-size: 15px;
}

.gts-dop-ceny th,
.gts-dop-ceny td {
	padding: 4px 16px 4px 0;
	border: 0;
	text-align: left;
	font-weight: 400;
}

.gts-dop-ceny th {
	font-weight: 600;
}

.gts-dop-ceny__opis {
	color: rgba( 0, 0, 0, .55 );
	font-size: 14px;
	white-space: nowrap;
}

.gts-dop-werdykt__akcje {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 16px 0 0;
}

/* „Zostaw AP900" jest odpowiedzią równoprawną, nie wycofaniem się — dlatego czytelny
   przycisk, tylko wizualnie drugorzędny. Zamiana jest PROPONOWANA, nie wymuszana. */
.gts-dop-werdykt__akcje .gts-dop-zostaw {
	background: transparent;
	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, .25 );
	color: inherit;
}

/* Obietnica zwrotu stoi tam, gdzie decyzja jest najtrudniejsza: przy propozycji
   droższego produktu i przy aucie spoza listy producenta. */
.gts-dop__zwrot {
	margin: 12px 0 0;
	font-size: 14px;
	font-weight: 600;
}

.gts-dop__zwrot::before {
	content: "\2713\00a0";
	color: #4a9c3c;
}

/* --- PASEK SYGNAŁÓW (pod przyciskiem zakupu) ------------------------------- */

/* Nie ma `overflow-x` na przodkach: pasek łamie się przez flex-wrap, więc nie
   rozpycha strony na wąskim ekranie. */
.gts-dop-sygnaly {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

/* ⚠️ Rozmiar i waga należą do komponentu `.gts-sygnaly__item` (`css/komponenty.css`).
   Markup nosi obie klasy. Ten arkusz ładuje się PO komponentach, więc powtórzenie tu
   `font-size` cofałoby zmianę w komponencie — dokładnie tak, jak to się stało z polami. */
.gts-dop-sygnaly__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- ZWINIĘTE BLOKI -------------------------------------------------------- */

/* Link, nie widoczne pole. Widoczne puste pole pyta „czy powinienem coś wiedzieć?"
   KAŻDEGO klienta; zwinięty link kosztuje nieuważnych zero (§5.8). */
.gts-dop-przerobki,
.gts-dop-pomoc {
	margin-top: 16px;
}

.gts-dop-przerobki__tytul,
.gts-dop-pomoc__tytul {
	cursor: pointer;
	font-size: 14px;
	text-decoration: underline;
	list-style: none;
}

.gts-dop-przerobki__tytul::-webkit-details-marker,
.gts-dop-pomoc__tytul::-webkit-details-marker {
	display: none;
}

.gts-dop-przerobki__tytul::before,
.gts-dop-pomoc__tytul::before {
	content: "\203a\00a0";
	text-decoration: none;
}

.gts-dop-pomoc {
	max-width: 60ch;
}

.gts-dop-pomoc__tresc {
	margin-top: 10px;
	font-size: 14px;
}

.gts-dop-pomoc__tresc p {
	margin: 0 0 10px;
}

/* --- PANEL: dane dopasowania na zamówieniu --------------------------------- */

.gts-dop-zamowienie h3 {
	margin: 16px 0 6px;
	font-size: 14px;
}

.gts-dop-zamowienie em {
	color: #b35309;
}

/* --- PYTANIA O PRODUKT (przeniesione z checkoutu, D-029, KROK 5b) ----------- */

/* Ta sama siatka co `.gts-dop__pola` — świadomie, bo to ten sam rodzaj treści:
   pola, na które klient odpowiada w jednym miejscu. Osobna klasa, nie dopisanie
   pól do tamtej siatki, bo nastawy ogranicznika pojawiają się warunkowo i nie mogą
   przestawiać kolumn kaskady marka/model/rocznik.

   ⚠️ Wygląd samych kontrolek należy do `.gts-pole__kontrolka` w komponenty.css.
   Tu wyłącznie rozkład — powtórzenie ramki czy promienia cofnęłoby komponent,
   bo ten arkusz ładuje się PO nim. */
.gts-dop__produkt {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: var( --gts-odstep-3 );
}

.gts-dop__produkt .gts-dop__pole {
	flex: 1 1 200px;
}