/* Kalkulator materiału ([ty_kalkulator], klasy ty-k-) i formularz wyceny ([ty_wycena], klasy ty-w-). Mobile first od 320 px, ładowany po tynki-strona.css.
   Akcent #f2a516 jest tylko tłem z ciemnym tekstem; ramki pól #767672 i błąd #b3261e mają kontrast co najmniej 4,5:1 na bieli. */

.ty-k-uklad, .ty-w { --ty-blad: #b3261e; --ty-ramka-pola: #767672; font-family: var(--ty-font); color: var(--ty-tekst); }
.ty-k-uklad *, .ty-w * { box-sizing: border-box; }
.ty-k-uklad [hidden], .ty-w [hidden] { display: none !important; }
.ty-k-uklad :focus-visible, .ty-w :focus-visible { outline: 3px solid var(--ty-czarny); outline-offset: 2px; border-radius: 4px; }
.ty-k-wynik :focus-visible { outline-color: #fff; }
.ty-w { max-width: 720px; margin: 0 auto; }

/* ---------- karty ---------- */
.ty-k-formularz, .ty-w-form, .ty-w-sukces { padding: 20px 16px; }
.ty-w-form, .ty-w-sukces { scroll-margin-top: 90px; }
@media (min-width: 600px) { .ty-k-formularz, .ty-w-form, .ty-w-sukces { padding: 28px; } }

/* ---------- układ kalkulatora ---------- */
.ty-k-uklad { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
@media (min-width: 960px) {
	.ty-k-uklad { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 28px; }
	.ty-k-wynik { position: sticky; top: 96px; }
}
.ty-k-wynik { padding: 24px 16px; scroll-margin-top: 90px; }
.ty-k-wynik:focus { outline: none; }
@media (min-width: 600px) { .ty-k-wynik { padding: 28px; } }

/* ---------- pola, etykiety, podpowiedzi, błędy ---------- */
.ty-k-grupa, .ty-w-grupa, .ty-w-krok { border: 0; margin: 0; padding: 0; min-width: 0; }
.ty-k-pole, .ty-w-pole, .ty-w-grupa, .ty-k-grupa { margin: 0 0 20px; }
.ty-k-etykieta, .ty-w-etykieta { display: block; margin: 0 0 8px; padding: 0; font: 600 16px/1.35 var(--ty-font); color: var(--ty-tekst); }
.ty-w-opc { font-weight: 400; color: var(--ty-szary); }
.ty-k-input, .ty-w-input { display: block; width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--ty-ramka-pola); border-radius: var(--ty-r-przycisk); background: #fff; color: var(--ty-tekst); font: 400 16px/1.4 var(--ty-font); }
textarea.ty-w-input { min-height: 120px; resize: vertical; }
.ty-k-input:focus-visible, .ty-w-input:focus-visible { border-color: var(--ty-czarny); }
.ty-k-input[aria-invalid="true"], .ty-w-input[aria-invalid="true"] { border-color: var(--ty-blad); box-shadow: inset 0 0 0 1px var(--ty-blad); }
.ty-k-pomoc, .ty-w-pomoc { margin: 8px 0 0; font: 400 14px/1.55 var(--ty-font); color: var(--ty-szary); }
.ty-k-panel > .ty-k-pomoc, [data-k-grupa] > .ty-k-pomoc { margin-bottom: 20px; }
.ty-w a, .ty-k-uklad .ty-k-pomoc a { color: var(--ty-tekst); text-decoration: underline; text-decoration-color: var(--ty-akcent); text-decoration-thickness: 2px; }
.ty-k-blad, .ty-w-blad { margin: 8px 0 0; font: 600 14px/1.45 var(--ty-font); color: var(--ty-blad); }
.ty-w-blad--wysylka { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--ty-blad); border-radius: 8px; background: #fdecea; }
.ty-w-blad--wysylka a { color: inherit; text-decoration: underline; }

/* ---------- opcje: radio i checkbox jako duże, dotykowe wiersze ---------- */
.ty-w-opcje { display: grid; gap: 8px; }
@media (min-width: 640px) { .ty-w-opcje--rzad { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ty-w-opcja, .ty-k-opcja { display: flex; align-items: flex-start; gap: 12px; min-height: 48px; padding: 12px 14px; border: 1px solid var(--ty-ramka-pola); border-radius: var(--ty-r-przycisk); background: #fff; font: 400 16px/1.4 var(--ty-font); cursor: pointer; transition: border-color .2s, background-color .2s; }
.ty-w-opcja input, .ty-k-opcja input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--ty-czarny); }
.ty-w-opcja:has(input:checked), .ty-k-opcja:has(input:checked) { border-color: var(--ty-czarny); background: var(--ty-tlo-2); box-shadow: inset 0 0 0 1px var(--ty-czarny); }
.ty-w-opcja:has(input:focus-visible), .ty-k-opcja:has(input:focus-visible) { outline: 3px solid var(--ty-czarny); outline-offset: 2px; }
.ty-w-opcja input:focus-visible, .ty-k-opcja input:focus-visible { outline: none; }
.ty-w-opcja a { color: inherit; text-decoration: underline; }
.ty-k-grupa { display: grid; gap: 8px; }
.ty-k-grupa .ty-k-etykieta { margin-bottom: 0; }
.ty-k-opcja--pole { margin: 0 0 20px; }

/* ---------- kalkulator: zakładki, siatka, szczegóły, ostrzeżenia ---------- */
.ty-k-zakladki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; margin: 0 0 20px; background: var(--ty-tlo-2); border-radius: 10px; }
.ty-k-zakladka { min-height: 48px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ty-tekst); font: 600 15px/1.25 var(--ty-font); cursor: pointer; transition: background-color .2s, color .2s; }
.ty-k-zakladka:hover { background: var(--ty-linia); }
.ty-k-zakladka[aria-selected="true"], .ty-k-zakladka[aria-selected="true"]:hover { background: var(--ty-czarny); color: #fff; }
.ty-k-siatka { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 12px; }
@media (min-width: 480px) { .ty-k-siatka { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ty-k-szczegoly { margin: 0 0 20px; border: 1px solid var(--ty-linia); border-radius: 8px; background: var(--ty-tlo-2); }
.ty-k-szczegoly summary { display: flex; align-items: center; min-height: 48px; padding: 12px 14px; font: 600 15px/1.4 var(--ty-font); cursor: pointer; }
.ty-k-szczegoly p { margin: 0; padding: 0 14px 14px; font: 400 14px/1.55 var(--ty-font); color: var(--ty-szary); }
.ty-k-ostrzezenie { margin: 12px 0; padding: 12px 14px; border-radius: 8px; background: var(--ty-akcent); color: var(--ty-czarny); font: 600 15px/1.45 var(--ty-font); }
.ty-k-ostrzezenie--jasne { margin: 4px 0 0; background: #fff3d1; border: 1px solid var(--ty-akcent); }
.ty-k-przycisk { width: 100%; margin-top: 4px; }

/* ---------- kalkulator: wynik (ciemna karta) ---------- */
.ty-k-pusty { margin: 0 0 12px; color: #ececea; font: 400 16px/1.55 var(--ty-font); }
.ty-k-wynik ul.ty-k-lista { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 14px; }
.ty-k-pozycja { display: block; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .18); color: #ececea; font: 400 15px/1.55 var(--ty-font); }
.ty-k-pozycja__nazwa { color: #fff; }
.ty-k-pozycja__koszt { font-weight: 600; color: var(--ty-akcent); }
.ty-k-pozycja__nota { display: block; margin-top: 4px; font-size: 14px; color: var(--ty-na-ciemnym); }
.ty-k-razem { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 0 0 12px; padding: 14px 0 0; border-top: 2px solid var(--ty-akcent); color: #fff; font: 600 17px/1.35 var(--ty-font); }
.ty-k-razem strong { color: var(--ty-akcent); font-size: 20px; }
.ty-k-nota, .ty-k-przypis { margin: 0 0 12px; color: var(--ty-na-ciemnym); font: 400 14px/1.55 var(--ty-font); }
.ty-k-wynik .ty-przycisk { width: 100%; margin-top: 8px; }

/* ---------- wycena: postęp, kroki, przyciski ---------- */
.ty-w-postep { margin: 0 0 20px; }
.ty-w-postep__tekst { margin: 0 0 8px; font: 600 14px/1.3 var(--ty-font); color: var(--ty-szary); }
.ty-w-pasek { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ty-w-pasek span { height: 6px; border-radius: 3px; background: var(--ty-linia); transition: background-color .2s; }
.ty-w-pasek span.is-aktywny { background: var(--ty-czarny); }
.ty-w-tytul { display: block; width: 100%; margin: 0 0 20px; padding: 0; font: 700 22px/1.25 var(--ty-font); color: var(--ty-tekst); }
.ty-w-tytul:focus { outline: none; }
.ty-w-zbior { margin: 0 0 20px; padding: 14px; border-radius: 8px; background: var(--ty-tlo-2); }
.ty-w-zbior:not(:has(.ty-w-pole:not([hidden]))) { display: none; }
.ty-w-zbior .ty-w-pole { margin-bottom: 16px; }
.ty-w-pulapka { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ty-w-akcje { display: flex; flex-direction: column-reverse; gap: 12px; margin-top: 8px; }
.ty-w-akcje .ty-przycisk { width: 100%; }
.ty-w-akcje .ty-przycisk:disabled { opacity: .7; cursor: not-allowed; }
@media (min-width: 600px) {
	.ty-w-akcje { flex-direction: row; justify-content: flex-end; }
	.ty-w-akcje .ty-przycisk { width: auto; min-width: 200px; }
}
.ty-w-nota { margin: 12px 0 0; font: 400 14px/1.5 var(--ty-font); color: var(--ty-szary); text-align: center; }
.ty-w-spinner { flex: none; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, .4); border-top-color: #fff; border-radius: 50%; animation: ty-w-obrot .8s linear infinite; }
@keyframes ty-w-obrot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ty-w-spinner { animation-duration: 2.4s; } .ty-w-opcja, .ty-k-opcja, .ty-w-pasek span, .ty-k-zakladka { transition: none; } }
.ty-w-sukces p { margin: 0 0 12px; font: 400 16px/1.6 var(--ty-font); }
.ty-w-sukces .ty-w-tytul { margin-bottom: 12px; }
.ty-w-sukces .ty-przyciski { margin-top: 16px; }
.ty-w-sukces:focus { outline: none; }