/*
 * Narzędzia serwisu: kalkulatory (podstrony i kalkulator osadzony w treści), eksport wyniku (PDF / e-mail), formularze
 * (zapytanie, zgłoszenie polecenia, status u partnera). Ładowany tylko tam, gdzie są (Komponenty::styl w komponencie), zawsze PO serwis.css.
 * Raport z kalkulatora: raport.css, słownik pojęć: slownik.css.
 * Porządek pliku (audyt 2, G-W7): jedna definicja na regułę w bloku komponentu, bez warstw poprawek na końcu i bez reguł Nalevio.
 */

/* ---------- kalkulator: siatka pól | wynik ---------- */
/* overflow: clip (nie hidden) - przycina rogi, ale nie tworzy kontenera przewijania, więc przyklejony panel wyniku działa (audyt 1, G-W11) */
.kalkulator { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); margin: 0; border: 1px solid var(--linia); border-radius: var(--promien-karty); background: #fff; box-shadow: 0 8px 24px rgba(20, 43, 62, .06); overflow: clip; }
.kalkulator__formularz { display: grid; gap: 18px; align-content: start; padding: clamp(24px, 3vw, 40px); }
.kalkulator__wiersz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.kalkulator__pole { display: grid; gap: 6px; }
.kalkulator__pole > span:first-child, .kalkulator__wybor legend { color: var(--granat); font: 500 15px/1.3 var(--font-naglowki); }
.kalkulator__jednostka { position: relative; display: block; }
.kalkulator__jednostka::after { content: attr(data-jednostka); position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--tekst-slaby); pointer-events: none; }
.kalkulator input[type="number"], .kalkulator input[data-liczba], .kalkulator select { width: 100%; padding: 13px 44px 13px 14px; border: 1px solid var(--obramowanie-pola); border-radius: 10px; background: #fff; color: var(--granat); font: 500 17px/1.2 var(--font-tresc); }
.kalkulator select { padding-right: 14px; }
/* bez natywnych strzałek pola liczbowego - nachodziły na jednostkę; wartość zmienia klawiatura (A-D7) */
.kalkulator input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.kalkulator input[type="number"]::-webkit-inner-spin-button, .kalkulator input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.kalkulator input:focus, .kalkulator select:focus { outline: 2px solid var(--akcent); outline-offset: 0; border-color: var(--akcent); }
.kalkulator__podpowiedz { margin: 0; color: var(--tekst-slaby); font-size: 14px; }
/* wybór (tryb wyceny, rodzaj gwarancji itp.): kafle z polem radio */
.kalkulator__wybor { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.kalkulator__wybor[hidden] { display: none; }
.kalkulator__wybor legend { margin-bottom: 6px; padding: 0; }
.kalkulator__wybor--poziomy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kalkulator__wybor label { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 12px 14px; border: 1px solid var(--obramowanie-pola); border-radius: 10px; color: var(--granat); font: 500 15px/1.3 var(--font-naglowki); cursor: pointer; }
.kalkulator__wybor label:has(input:checked) { border-color: var(--akcent); background: var(--akcent-tlo); }
.kalkulator__wybor label:has(input:focus-visible) { outline: 3px solid var(--akcent); outline-offset: 2px; } /* fokus na całym kafelku (A-D5) */
.kalkulator__wybor input { margin: 0; accent-color: var(--akcent); }
.kalkulator__wybor small { width: 100%; padding-left: 23px; color: var(--tekst-slaby); font: 400 13px/1.3 var(--font-tresc); }
/* grupy pól (np. budynki, pojazdy, gwarancja): tytuł nad kreską */
.kalkulator__grupa { display: grid; gap: 18px; align-content: start; min-width: 0; margin: 0; padding: 22px 0 0; border: 0; border-top: 1px solid var(--linia); border-radius: 0; }
.kalkulator__grupa > legend { float: left; width: 100%; margin: 0; padding: 0; color: var(--granat); font: 600 20px/1.3 var(--font-naglowki); letter-spacing: -0.01em; }
/* pole wyboru bez wybranej wartości: kolor podpowiedzi, nie wartości */
.kalkulator select:has(option[value=""]:checked) { color: var(--tekst-slaby); }
/* stan błędu przy polu (kalkulatory-ui.js) */
.kalkulator input[aria-invalid="true"] { border-color: var(--blad); box-shadow: 0 0 0 1px var(--blad); }
.kalkulator__blad-pola { color: var(--blad); font-size: 14px; line-height: 1.4; }
.kalkulator__blad-pola[hidden] { display: none; }
/* region ogłoszeń wyniku dla czytników (aria-live) */
.kalkulator__ogloszenie { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- kalkulator: panel wyniku (grafit z miedzianą krawędzią) ---------- */
.kalkulator__wynik { display: flex; flex-direction: column; gap: 6px; padding: clamp(24px, 3vw, 40px); border-top: 4px solid var(--bursztyn); background: var(--granat); color: rgba(255, 255, 255, .78); }
.kalkulator__wynik:focus { outline: none; }
/* fokus z paska „Zobacz wynik”: biały obrys na grafitowym panelu - stalowy miał 2,6:1 (audyt 1, A-W2) */
.kalkulator__wynik:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.kalkulator__wynik :focus-visible { outline-color: #fff; }
.kalkulator__etykieta { margin: 0; font: 500 15px/1.3 var(--font-naglowki); }
.kalkulator__wynik .kalkulator__etykieta { color: #EDF3F6; }
/* liczba wyniku odsunięta od pierwszego wiersza listy (G-D5) */
.kalkulator__glowna { margin: 0 0 20px; color: #fff; font: 500 clamp(2.5rem, 2rem + 1.6vw, 3.5rem)/1.05 var(--font-naglowki); letter-spacing: -0.02em; }
.kalkulator--blad .kalkulator__glowna { color: rgba(255, 255, 255, .6); font-size: 1.6rem; }
.kalkulator__zdanie { margin: -6px 0 14px; color: #fff; font-size: 15px; line-height: 1.5; }
.kalkulator__zdanie:empty { display: none; }
.kalkulator__lista { display: grid; margin: 0 0 18px; }
.kalkulator__lista div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 10px 0; border-top: 1px solid rgba(255, 255, 255, .12); } /* za wąsko - kwota pod etykietą, nie poza panelem (A-D3) */
.kalkulator__lista dt { font-size: 15px; }
.kalkulator__lista dd { margin: 0 0 0 auto; color: #fff; font: 500 16px/1.3 var(--font-naglowki); text-align: right; white-space: nowrap; }
.kalkulator__uwaga { margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, .08); color: #fff; font-size: 15px; }
.kalkulator__uwaga:empty { display: none; }
/* uwaga przy wyniku: biała kreska i znak „!” (bez żółtego spoza palety B3; audyt 1, G-W7) */
.kalkulator__uwaga--ostrzezenie { border-left: 3px solid var(--ostrzezenie-na-ciemnym); }
.kalkulator__uwaga--ostrzezenie::before { content: "!"; content: "!" / ""; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-right: 8px; border-radius: 50%; background: #fff; color: var(--granat); font: 700 12px/1 var(--font-naglowki); vertical-align: 1px; }
/* wniosek to informacja, nie ostrzeżenie - kreska w kolorze akcentu, bez znaku */
.kalkulator__uwaga--wniosek { border-left: 3px solid var(--akcent); }
.kalkulator__blad { margin: 0 0 12px; padding: 12px 14px; border-left: 3px solid #FCA5A5; border-radius: 0 10px 10px 0; background: rgba(252, 165, 165, .12); color: #fff; font: 500 15px/1.4 var(--font-naglowki); }
.kalkulator__blad a { color: #fff; }
.kalkulator__przypis { margin: 14px 0 0; font-size: 13px; line-height: 1.5; }
.kalkulator__wynik .kalkulator__przypis { color: #D5E1EF; font-size: 15px; line-height: 1.5; }
.kalkulator__wynik a:not(.przycisk) { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
/* główne wezwanie na granacie: biały przycisk z granatowym tekstem - niebieski miał 2,6:1 do tła (WCAG 1.4.11; G-W9) */
.kalkulator__wynik .przycisk { background: #fff; color: var(--granat); }
.kalkulator__wynik .przycisk:hover, .kalkulator__wynik .przycisk:focus-visible { background: var(--akcent-tlo); color: var(--granat); }
.kalkulator__wynik .przycisk--jasny { margin-top: auto; }
/* stan błędu: wezwanie nieaktywne (aria-disabled ustawia kalkulatory-ui.js) - przygaszony biały obrys, bez zmiany na hover */
.kalkulator__wynik .przycisk[aria-disabled="true"], .kalkulator--blad .kalkulator__wynik .przycisk[data-link-zapytania],
.kalkulator__wynik .przycisk[aria-disabled="true"]:hover, .kalkulator--blad .kalkulator__wynik .przycisk[data-link-zapytania]:hover {
	background: rgba(255, 255, 255, .12); color: rgba(255, 255, 255, .72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28); transform: none; cursor: not-allowed;
}
/* komputer: cały panel wyniku przykleja się przy edycji dolnych pól, zamiast rozciągać się pustym grafitem obok długiego formularza
   (audyt 1, G-W11); wyższy od ekranu przewija się w sobie */
@media (min-width: 992px) {
	.kalkulator > .kalkulator__wynik { align-self: start; position: sticky; top: calc(var(--wys-naglowka) + 16px); max-height: calc(100vh - var(--wys-naglowka) - 32px); overflow-y: auto; overscroll-behavior: contain; }
}

/* ---------- kalkulator: eksport wyniku (PDF, e-mail) ---------- */
.kalkulator__eksport { grid-column: 1 / -1; display: grid; gap: 14px; padding: 22px clamp(24px, 3vw, 40px); border-top: 1px solid var(--linia); background: var(--tlo-sekcji); }
.kalkulator__eksport-tytul { margin: 0; color: var(--granat); font: 500 16px/1.3 var(--font-naglowki); }
.kalkulator__eksport-akcje { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px; }
.kalkulator__eksport .przycisk { padding: 12px 22px; font-size: 15px; }
.kalkulator__eksport .przycisk .ikona-karty { width: auto; height: auto; background: none; color: inherit; }
/* nieaktywne w stanie błędu (aria-disabled z kalkulatory-ui.js) */
.kalkulator__eksport [aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.kalkulator__email > summary.przycisk--obrys[aria-disabled="true"]:hover { background: #fff; }
.kalkulator__email[open] { flex-basis: 100%; }
.kalkulator__email summary { list-style: none; }
.kalkulator__email summary::-webkit-details-marker { display: none; }
.kalkulator__email[open] summary { margin-bottom: 16px; }
.kalkulator__email form { display: grid; gap: 14px; max-width: 640px; padding: 20px; border: 1px solid var(--linia); border-radius: 14px; background: #fff; }
.kalkulator__email input[type="email"] { width: 100%; padding: 13px 14px; border: 1px solid var(--obramowanie-pola); border-radius: 10px; color: var(--granat); font: 400 17px/1.3 var(--font-tresc); }
.kalkulator__email input[type="email"]:focus { outline: 2px solid var(--akcent); outline-offset: 0; border-color: var(--akcent); }
.kalkulator__email .formularz__zgoda { font-size: 14px; }
.kalkulator__email button.przycisk { justify-self: start; }
/* bez display: none - region role="status" musi być w drzewie dostępności */
.kalkulator__email-komunikat { margin: 0; color: var(--akcent); font: 500 15px/1.4 var(--font-naglowki); }
.kalkulator__email-komunikat--blad { color: var(--blad); }
.kalkulator__kontakt { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 14px 0 0; border: 0; border-top: 1px solid var(--linia); }
.kalkulator__kontakt legend { padding: 0; color: var(--granat); font: 600 15px/1.3 var(--font-naglowki); }
.kalkulator__podpowiedz-pdf { font-size: 13px; }
/* link do metodologii pod treścią strony kalkulatora (szablon strona.php) */
.metodologia-link p { display: flex; align-items: center; gap: 12px; margin: 0; padding: 24px 0; font: 500 16px/1.4 var(--font-naglowki); }
.metodologia-link .ikona-karty { width: 36px; height: 36px; }

/* ---------- kalkulator: układ na szerokościach ---------- */
@media (min-width: 992px) {
	/* pas eksportu w lewej kolumnie pod polami, wynik obok na całą wysokość - bez pustej bieli pod polami */
	.kalkulator:has(> .kalkulator__eksport) { grid-template-rows: auto 1fr; }
	.kalkulator > .kalkulator__formularz { grid-column: 1; grid-row: 1; }
	.kalkulator:has(> .kalkulator__eksport) > .kalkulator__wynik { grid-column: 2; grid-row: 1 / span 2; }
	.kalkulator > .kalkulator__eksport { grid-column: 1; grid-row: 2; align-content: start; background: #fff; }
}
.kalkulator__skrot { display: none; }
@media (max-width: 991.98px) {
	.kalkulator { grid-template-columns: minmax(0, 1fr); }
	/* telefon i tablet: przyklejony pasek z kwotą wyniku i linkiem do panelu wyniku (kalkulatory-ui.js) */
	.kalkulator__skrot { position: fixed; left: 0; right: 0; bottom: 0; z-index: 930; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--granat); color: #fff; box-shadow: 0 -8px 24px rgba(20, 43, 62, .18); }
	.kalkulator__skrot[hidden] { display: none; }
	.kalkulator__skrot-tekst { margin: 0; min-width: 0; font: 500 15px/1.3 var(--font-naglowki); }
	.kalkulator__skrot-link { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--promien); background: #fff; color: var(--granat); font: 600 15px/1 var(--font-naglowki); text-decoration: none; }
	.kalkulator__skrot-link:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
	html.kalkulator-skrot-widoczny { scroll-padding-bottom: 88px; }
	.kalkulator-skrot-widoczny .do-gory { bottom: 84px; }
}
.kalkulator__skrot-etykieta { display: block; font-size: 13px; font-weight: 400; opacity: .8; } /* zawijana, nie ucinana etykieta skrótu wyniku (A-D2) */
.kalkulator__skrot-kwota { display: block; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* niski ekran (powiększenie 200-400%): bez paska wyniku - wynik jest w treści, a pasek z nagłówkiem zajmował pół ekranu (A-D2) */
@media (max-width: 991.98px) and (max-height: 480px) {
	.kalkulator__skrot { display: none; }
	html.kalkulator-skrot-widoczny { scroll-padding-bottom: 16px; }
}
@media (max-width: 599.98px) {
	.kalkulator__wiersz, .kalkulator__wybor--poziomy { grid-template-columns: minmax(0, 1fr); }
}
/* tryb wymuszonych kolorów: pasek wyniku odcięty od treści linią (A-D5) */
@media (forced-colors: active) {
	.kalkulator__skrot { border-top: 1px solid CanvasText; }
}
@media print {
	.kalkulator__skrot { display: none !important; }
	.kalkulator__lista div { break-inside: avoid; page-break-inside: avoid; }
}

/* ---------- kalkulatory informacyjne (etap 4): siatka pól, wiersze tabel, zestawienie, metodologia ---------- */
.kalkulator__siatka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 18px; align-items: end; }
.kalkulator__siatka > [hidden], .kalkulator__pole[hidden], .kalkulator__grupa[hidden] { display: none; }
.kalkulator__pelna { grid-column: 1 / -1; }
.kalkulator__grupa > .kalkulator__podpowiedz { margin-top: -6px; }
.kalkulator__opcjonalne { color: var(--tekst-slaby); font: 400 13px/1.3 var(--font-tresc); }
.kalkulator input[type="text"]:not([data-liczba]), .kalkulator input[type="date"] { width: 100%; padding: 13px 14px; border: 1px solid var(--obramowanie-pola); border-radius: 10px; background: #fff; color: var(--granat); font: 500 16px/1.2 var(--font-tresc); }
.kalkulator input[type="date"][aria-invalid="true"] { border-color: var(--blad); box-shadow: 0 0 0 1px var(--blad); }
/* dane przykładowe w polach - informacja nad formularzem (miedź tylko jako kreska) */
.kalkulator__dane-przykladowe { margin: 0; padding: 10px 14px; border-left: 3px solid var(--bursztyn); border-radius: 0 8px 8px 0; background: var(--tlo-sekcji); color: var(--tekst); font-size: 14px; line-height: 1.5; }
.kalkulator__wiersze { display: grid; gap: 14px; }
.kalkulator__wiersz-tabeli { display: grid; gap: 12px; min-width: 0; margin: 0; padding: 14px 16px 16px; border: 1px solid var(--linia); border-radius: 10px; background: #fff; }
.kalkulator__wiersz-tabeli > legend { padding: 0 6px; color: var(--granat); font: 600 15px/1.3 var(--font-naglowki); }
.kalkulator__usun { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; color: var(--akcent); font: 500 14px/1.3 var(--font-naglowki); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.kalkulator__usun:hover { color: var(--akcent-hover); }
.kalkulator__usun:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }
.kalkulator__dodaj { justify-self: start; padding: 10px 18px; font-size: 15px; }
.kalkulator__dodaj[hidden], .kalkulator__policz[hidden] { display: none; }
.kalkulator__policz { justify-self: start; }
.kalkulator__przypis--prawny { padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .16); }
.kalkulator__wynik .kalkulator__przypis--maly { margin-top: 10px; color: #D5E1EF; font-size: 13px; }
.kalkulator__wynik .przycisk--pelny { margin-top: 16px; }
/* zestawienie pod kalkulatorem: tabele wyniku na bieli i zwinięta metodologia.
   Kolumna minmax(0, 1fr) i min-width: 0 - tabela (min. 420 px) przewija się w swoim opakowaniu, zamiast rozpychać siatkę poza kartę
   i być uciętą na telefonie (audyt 1, G-K2 / A-K1) */
.kalkulator__zestawienie { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 24px clamp(24px, 3vw, 40px); border-top: 1px solid var(--linia); background: #fff; }
.kalkulator__zestawienie > * { min-width: 0; }
.kalkulator__zestawienie:not(:has(.kalkulator__tabela:not([hidden]))) { gap: 0; }
.kalkulator__tabela[hidden] { display: none; }
/* tytuł tabeli: H2 w strukturze (po H1 strony, A-D2), wygląd małego nagłówka */
.kalkulator__tabela h2, .kalkulator__tabela h3 { margin: 0 0 10px; font-size: 1.05rem; line-height: 1.3; letter-spacing: -0.01em; }
.kalkulator__tabela h2::before { content: none; }
.kalkulator__tabela-przewijana { overflow-x: auto; }
.kalkulator__tabela-przewijana:focus-visible { outline: 3px solid var(--akcent); outline-offset: 2px; }
.kalkulator__tabela table { width: 100%; min-width: 420px; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.kalkulator__tabela th, .kalkulator__tabela td { padding: 9px 10px; border-bottom: 1px solid var(--linia); text-align: right; vertical-align: top; }
.kalkulator__tabela td { white-space: nowrap; } /* kwoty się nie łamią */
.kalkulator__tabela thead th { color: var(--tekst-slaby); font: 500 13px/1.3 var(--font-naglowki); border-bottom: 2px solid var(--granat); }
.kalkulator__tabela th:first-child { text-align: left; }
.kalkulator__tabela tbody th { color: var(--granat); font-weight: 500; }
/* telefon: pierwsza kolumna zostaje przy przewijaniu w bok (jak .tabela w treści) */
@media (max-width: 599.98px) {
	.kalkulator__tabela th:first-child { position: sticky; left: 0; z-index: 1; background: #fff; box-shadow: 8px 0 8px -8px rgba(20, 43, 62, .25); }
}
.kalkulator__metoda > summary { min-height: 44px; display: flex; align-items: center; color: var(--akcent); font: 600 15px/1.4 var(--font-naglowki); cursor: pointer; }
.kalkulator__metoda ul { margin: 6px 0 0; padding-left: 20px; color: var(--tekst); font-size: 14px; line-height: 1.55; }
.kalkulator__metoda li + li { margin-top: 6px; }
@media (min-width: 992px) {
	.kalkulator:has(> .kalkulator__zestawienie) { grid-template-rows: auto auto 1fr; }
	.kalkulator > .kalkulator__zestawienie { grid-column: 1 / -1; grid-row: 2; }
	.kalkulator:has(> .kalkulator__zestawienie) > .kalkulator__wynik { grid-row: 1; }
	.kalkulator:has(> .kalkulator__zestawienie) > .kalkulator__eksport { grid-column: 1 / -1; grid-row: 3; background: var(--tlo-sekcji); }
}
@media (max-width: 599.98px) {
	.kalkulator__siatka { grid-template-columns: minmax(0, 1fr); }
	.kalkulator__wiersz-tabeli { padding: 12px; }
}
@media print {
	.kalkulator__usun, .kalkulator__dodaj { display: none !important; }
}

/* ---------- formularze: karta formularza i kroki ---------- */
.formularz { display: grid; gap: 0; max-width: 880px; border: 1px solid var(--linia); border-radius: 20px; background: #fff; box-shadow: 0 30px 60px rgba(20, 43, 62, .08); }
.formularz__krok { display: grid; gap: 22px; min-width: 0; margin: 0; padding: clamp(24px, 3.5vw, 44px); border: 0; }
.formularz__krok + .formularz__krok { border-top: 1px solid var(--linia); }
/* formularz jednoetapowy (zapytanie): pola leżą wprost w karcie - dopełnienie i odstępy jak w kroku; bez nich pola stykały się z ramką
   i ze sobą (audyt 1, G-K1). Podsumowanie błędów jest wtedy zwykłym elementem siatki, bez własnych marginesów. */
.formularz:not(:has(.formularz__krok)) { gap: 22px; padding: clamp(24px, 3.5vw, 44px); }
.formularz:not(:has(.formularz__krok)) > .formularz__komunikat { margin: 0; }
/* legend: float, żeby nie leżał na obramowaniu pola */
.formularz__krok-tytul { float: left; width: 100%; display: grid; gap: 4px; margin: 0; padding: 0; color: var(--granat); font: 600 clamp(1.3rem, 1.1rem + .6vw, 1.6rem)/1.25 var(--font-naglowki); letter-spacing: -0.02em; }
.formularz__krok-tytul span { color: var(--akcent); font: 500 14px/1.3 var(--font-naglowki); letter-spacing: 0; }
.formularz__krok-tytul:focus { outline: none; }
.formularz__krok-tytul .formularz__krok-gora { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.formularz__krok-tytul .formularz__krok-znacznik { padding: 4px 10px; border-radius: 999px; background: var(--akcent-tlo); color: var(--akcent-hover); font: 500 13px/1.3 var(--font-naglowki); }
.formularz__naglowek { margin: 0 0 12px; color: var(--tekst-slaby); font: 500 15px/1.4 var(--font-naglowki); }

/* ---------- formularze: pola, kafle, podpowiedzi, błędy ---------- */
.formularz__wiersz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.formularz__wiersz--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; } /* pola równo, gdy jedna etykieta łamie się na dwa wiersze (G-D4) */
.formularz__wiersz--3 .formularz__kafle--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.formularz__wiersz--3 .kafel { padding: 13px 10px; }
.formularz__pole { display: grid; gap: 8px; align-content: start; }
.formularz__grupa { min-width: 0; margin: 0; padding: 0; border: 0; }
.formularz__grupa > legend { margin-bottom: 8px; padding: 0; }
.formularz__etykieta { margin: 0; color: var(--granat); font: 500 15px/1.3 var(--font-naglowki); }
/* znacznik "opcjonalne" niepodzielny; po złamaniu etykiety zaczyna się od krawędzi (odstęp daje spacja przed nim) */
.formularz__wymagane, .formularz__opcjonalne { display: inline-block; color: var(--tekst-slaby); font: 400 13px/1 var(--font-tresc); }
.formularz input[type="text"], .formularz input[type="email"], .formularz input[type="tel"], .formularz input[type="number"], .formularz select, .formularz textarea { width: 100%; padding: 13px 14px; border: 1px solid var(--obramowanie-pola); border-radius: 10px; background: #fff; color: var(--granat); font: 400 17px/1.3 var(--font-tresc); }
.formularz input[type="number"] { padding-right: 44px; }
.formularz input:focus, .formularz select:focus, .formularz textarea:focus { outline: 2px solid var(--akcent); outline-offset: 0; border-color: var(--akcent); }
.formularz select:has(option[value=""]:checked) { color: var(--tekst-slaby); }
.formularz select option { color: var(--granat); }
.formularz__kafle { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.formularz__kafle--siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kafel { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid var(--obramowanie-pola); border-radius: 12px; color: var(--granat); font: 500 15px/1.3 var(--font-naglowki); cursor: pointer; transition: border-color .15s, background-color .15s; }
.kafel:hover { border-color: var(--akcent); }
.kafel:has(input:checked) { border-color: var(--akcent); background: var(--akcent-tlo); }
.kafel:has(input:focus-visible) { outline: 3px solid var(--akcent); outline-offset: 2px; } /* fokus na całym kafelku (A-D5) */
.kafel input { flex: none; margin: 0; accent-color: var(--akcent); }
/* podpowiedź przy polu: zwykły tekst pomocniczy - cztery stałe ramki wydłużały krok 1 (G-W5); ramka tylko dla podpowiedzi
   warunkowych, które pojawiają się po wyborze odpowiedzi (data-podpowiedz, ostrzeżenie o kwocie) */
.formularz__podpowiedz { margin: 0; color: var(--tekst-slaby); font-size: 14px; line-height: 1.5; }
.formularz__podpowiedz[data-podpowiedz], .formularz__podpowiedz[data-ostrzezenie-wartosci] { padding: 10px 14px; border-left: 3px solid var(--akcent); border-radius: 0 10px 10px 0; background: var(--tlo-sekcji); color: var(--tekst); }
.formularz__podpowiedz--wiersz { margin-top: -10px; }
.formularz__blad { margin: 0; color: var(--blad); font-size: 14px; line-height: 1.4; }
.formularz__blad[hidden], .formularz__podpowiedz[hidden], .formularz__komunikat[hidden] { display: none; }
.formularz [aria-invalid="true"], .jest-blad input, .jest-blad select, .jest-blad .kafel { border-color: var(--blad); }
.jest-blad .formularz__etykieta { color: var(--blad); }
/* podsumowanie błędów nad krokiem */
.formularz__komunikat { margin: clamp(24px, 3.5vw, 44px) clamp(24px, 3.5vw, 44px) 0; padding: 14px 18px; border-radius: 12px; background: var(--blad-tlo); color: var(--blad-tekst); }
.formularz__komunikat:focus { outline: 2px solid var(--blad); }
.formularz__komunikat p { margin: 0 0 6px; }
.formularz__komunikat ul { margin: 0; padding-left: 20px; }
.formularz__komunikat a { color: var(--blad-tekst); }
/* punktory listy błędów w kolorze komunikatu - waga wyższa niż ".sekcja ul:not([class]) > li::before" z serwis.css */
.formularz__komunikat ul > li::before, .formularz__komunikat ul:not([class]) > li::before, .sekcja .formularz__komunikat ul > li::before { background: var(--blad-tekst); }
/* zgody */
.formularz__zgoda { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: 12px; background: var(--tlo-sekcji); font-size: 15px; line-height: 1.5; cursor: pointer; }
.formularz__zgoda input { flex: none; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--akcent); }
.formularz__zgoda.jest-blad, .jest-blad > .formularz__zgoda { outline: 2px solid var(--blad); }
.formularz__zgoda--lekka { padding: 0; background: none; }
/* przyciski kroku */
.formularz__przyciski { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.formularz__przyciski--krok1 { justify-content: flex-end; }
.formularz__przypis { margin: 0; color: var(--tekst-slaby); font-size: 14px; }
/* pułapka antyspamowa poza ekranem */
.pulapka { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- formularz zapytania: formularz 8/12 + przyklejona kolumna 4/12 "co dalej" ---------- */
.formularz-uklad { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 32px clamp(32px, 4vw, 56px); align-items: start; }
.formularz-uklad .formularz { max-width: none; }
.formularz-boczny { position: sticky; top: calc(var(--wys-naglowka) + 24px); display: grid; gap: 26px; margin-top: 39px; padding: 28px; border: 1px solid var(--linia); border-radius: 20px; background: var(--tlo-sekcji); }
.formularz-boczny__punkt { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 16px; align-items: start; }
.formularz-boczny__punkt .ikona-karty { grid-row: span 2; }
.formularz-boczny p { margin: 0; font-size: 15px; line-height: 1.5; }
.formularz-boczny .formularz-boczny__tytul { padding-top: 2px; color: var(--granat); font: 600 16px/1.35 var(--font-naglowki); }

/* ---------- formularze: szerokości ---------- */
@media (max-width: 1199.98px) {
	.formularz__wiersz--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
	.formularz-uklad { grid-template-columns: minmax(0, 1fr); }
	.formularz-boczny { position: static; margin-top: 0; }
}
@media (max-width: 599.98px) {
	.formularz__krok, .formularz:not(:has(.formularz__krok)) { gap: 18px; padding: 20px; } /* G-W4: pierwszy kafel celu wyżej */
	.formularz__wiersz, .formularz__wiersz--3 { grid-template-columns: minmax(0, 1fr); }
	.formularz__kafle:not(.formularz__kafle--2):not(.formularz__kafle--siatka) { grid-template-columns: minmax(0, 1fr); }
	/* rodzaje ubezpieczenia w dwóch kolumnach - 17 kafli w jednej kolumnie spychało pola kontaktu o ponad 1000 px (audyt 1, G-W6) */
	.formularz__kafle--siatka { gap: 8px; }
	/* „Gwarancje ubezpieczeniowe” wychodziło poza kafel przy 360-390 px - dzielenie wyrazów (lang="pl"; audyt 2, G-W4) */
	.formularz__kafle--siatka .kafel { gap: 8px; min-width: 0; padding: 12px; font-size: 14px; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; } /* bez cięcia w dowolnym miejscu (audyt 3, G-W2) */
	.formularz__przyciski { flex-direction: column-reverse; align-items: stretch; }
	.formularz__przyciski .przycisk { width: 100%; }
}
/* najwęższe telefony: jedna kolumna, dłuższe nazwy („Gwarancje ubezpieczeniowe”) nie mieszczą się w ok. 120 px */
@media (max-width: 359.98px) { .formularz__kafle--siatka { grid-template-columns: minmax(0, 1fr); } }

/* ---------- proste strony poza szablonem: status zapytania u partnera (/partner/status), potwierdzenie polecającego ---------- */
/* main.kontener.partner-status: wiersz marki, H1, opis, formularz.formularz bez kroków */
.partner-status { max-width: 760px; padding-top: clamp(32px, 6vw, 72px); padding-bottom: clamp(48px, 8vw, 96px); }
.partner-status > p:first-child { margin: 0 0 20px; padding-bottom: 14px; border-bottom: 1px solid var(--linia); color: var(--tekst-slaby); font: 500 14px/1.4 var(--font-naglowki); }
.partner-status > p:first-child strong { color: var(--granat); }
/* logo marki nad tytułem: <img> w wierszu marki albo - bez obrazka - logo z CSS (dekoracja, nazwa marki zostaje w tekście) */
.partner-status > p:first-child img { display: block; width: 150px; height: auto; margin-bottom: 12px; }
.partner-status > p:first-child:not(:has(img))::before { content: ""; display: block; width: 150px; height: 35px; margin-bottom: 12px; background: url(../img/logo-naglowek.png) no-repeat 0 50% / contain; }
.partner-status h1 { margin: 0 0 20px; font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem); }
.partner-status .formularz { gap: 20px; margin-top: 28px; padding: clamp(20px, 4vw, 36px); }
/* formularz z samym przyciskiem (potwierdzenie polecającego): bez karty, która wyglądała jak formularz bez pól */
.partner-status .formularz:not(:has(.formularz__pole)) { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
.partner-status .formularz__komunikat { margin: 20px 0 0; }
/* komunikat powodzenia (role="status") - akcent, nie czerwień błędu */
.partner-status .formularz__komunikat[role="status"] { border-left: 3px solid var(--akcent); border-radius: 0 12px 12px 0; background: var(--akcent-tlo); color: var(--granat); }
.partner-status .formularz__przyciski { justify-content: flex-start; }
/* dane zapytania i (po przycisku „Pokaż dane klienta”) dane kontaktowe klienta - lista etykieta: wartość (decyzja właściciela 19) */
.partner-status h2 { margin: 32px 0 12px; font-size: var(--h3); }
.partner-status .formularz > h2 { margin: 0; }
.partner-status__dane { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); gap: 8px 20px; margin: 16px 0 0; }
.partner-status__dane dt { color: var(--tekst-slaby); font-size: 15px; }
.partner-status__dane dd { margin: 0; color: var(--granat); overflow-wrap: anywhere; }
.partner-status__klient { margin-top: 28px; padding: clamp(20px, 4vw, 32px); border: 1px solid var(--linia); border-left: 4px solid var(--akcent); border-radius: 0 12px 12px 0; background: var(--tlo-sekcji); }
.partner-status__klient h2 { margin-top: 0; }
@media (max-width: 599.98px) { .partner-status__dane { grid-template-columns: minmax(0, 1fr); gap: 2px 0; } .partner-status__dane dd { margin-bottom: 10px; } }
/* limit tylko przy statusie "umowa", powód tylko przy "reklamacja" - bez JS, wg wybranej opcji (klasy pole-limit / pole-powod albo pola #limit / #powod) */
.partner-status .formularz:has(#status):not(:has(#status option[value="umowa"]:checked)) :is(.pole-limit, .formularz__pole:has(#limit)),
.partner-status .formularz:has(#status):not(:has(#status option[value="reklamacja"]:checked)) :is(.pole-powod, .formularz__pole:has(#powod)) { display: none; }