/* Konfigurator wiat: rosnący kosztorys. Świat strony WW Projekt: DM Sans, czerwień #DC2626, grafit, prawdziwe zdjęcia opcji.
   Telefon: jedno pytanie na ekran, pasek z ceną i przyciskiem pod kciukiem, wycena w wysuwanym arkuszu.
   Komputer: pytanie po lewej, arkusz wyceny przyklejony po prawej. */
.ww-konfigurator {
  --kw-czerwien: #DC2626; --kw-czerwien-ciemna: #B91C1C; --kw-czerwien-tlo: #FEF2F2;
  --kw-tusz: #111827; --kw-tekst: #374151; --kw-drugi: #4B5563; --kw-trzeci: #6B7280;
  --kw-linia: #E5E7EB; --kw-linia-mocna: #D1D5DB; --kw-grunt: #fff; --kw-biel: #fff; --kw-cieply: #F7F7F5;
  --kw-cien: 0 1px 2px rgb(17 24 39 / .05), 0 8px 24px rgb(17 24 39 / .08);
  --kw-wyjazd: cubic-bezier(.16, 1, .3, 1);
  margin: 0; background: var(--kw-grunt); color: var(--kw-tekst);
  font: 400 16px/1.55 "DM Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased;
  accent-color: var(--kw-czerwien); caret-color: var(--kw-czerwien);
}
.ww-konfigurator ::selection { background: var(--kw-czerwien); color: #fff; }
.kw *, .kw *::before, .kw *::after { box-sizing: border-box; }
.kw :focus-visible { outline: 3px solid var(--kw-czerwien); outline-offset: 2px; border-radius: 8px; }
.kw [hidden] { display: none !important; }
.kw button { font: inherit; color: inherit; cursor: pointer; }
/* motyw WordPressa (strona.css) farbuje przyciski po najechaniu i fokusie: tekstowe przyciski konfiguratora zostają przezroczyste */
.kw .kw-wstecz:hover, .kw .kw-wstecz:focus, .kw .kw-poz-zmien:hover, .kw .kw-poz-zmien:focus, .kw .kw-od-nowa:hover, .kw .kw-od-nowa:focus,
.kw .kw-arkusz-zamknij:hover, .kw .kw-arkusz-zamknij:focus,
.kw .kf-pomoc-przycisk:hover, .kw .kf-pomoc-przycisk:focus { background: none; }
.kw .kw-arkusz-zamknij:hover, .kw .kw-arkusz-zamknij:focus { color: var(--kw-drugi); } /* motyw wybiela tekst przycisku w fokusie */
.kw .kf-licznik button:focus { background: none; color: var(--kw-tusz); }
.kw:not(.kw--start) .kw-tytul-strony, .kw-ekran--tytul .kf-pyt--pierwsze .kf-pytanie, .kf-pulapka, .kw .kf-sr {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- góra: logo, telefon, postęp ---------- */
.kw-gora { /* na telefonie przewija się z treścią: u góry zostaje pasek ceny (komputer: przyklejona, niżej) */
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 60px; padding: 0 16px; background: rgb(255 255 255 / .96); border-bottom: 1px solid var(--kw-linia);
}
.kw-logo { display: inline-flex; align-items: center; min-height: 44px; } /* cel dotyku 44 px */
.kw-logo img { display: block; width: 116px; height: auto; }
.kw-zadzwon {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1.5px solid var(--kw-linia-mocna); color: var(--kw-tusz); font-weight: 600; font-size: 15px; text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.kw-zadzwon svg { color: var(--kw-czerwien); }
.kw-zadzwon:hover { border-color: var(--kw-tusz); }

/* ---------- układ ---------- */
.kw-formularz { max-width: 1180px; margin: 0 auto; padding: 0 16px calc(104px + env(safe-area-inset-bottom)); }
.kw-pytania { min-width: 0; padding-top: 20px; }

/* ---------- pasek ceny (telefon): cena od zawsze na górze, dotknięcie otwiera pozycje wyceny ---------- */
.kw .kw-pasek {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: calc(100% + 32px); margin: 0 -16px; padding: 8px 16px; min-height: 60px; background: var(--kw-biel);
  border: 0; border-bottom: 1px solid var(--kw-linia); border-radius: 0; box-shadow: 0 6px 18px rgb(17 24 39 / .06); text-align: left;
}
.kw .kw-pasek:hover, .kw .kw-pasek:focus { background: var(--kw-biel); color: inherit; } /* motyw farbuje przyciski w fokusie; pasek musi zostać kryjący */
.kw--start .kw-pasek { display: none; } /* pierwszy ekran: ceny stoją na kaflach */
.kw-pasek-cena { display: flex; flex: none; flex-direction: column; } /* kwota nigdy nie wchodzi pod napis obok (320 px) */
.kw-pasek-etykieta { color: var(--kw-drugi); font-size: 13px; line-height: 1.3; }
.kw-pasek-kwota { color: var(--kw-tusz); font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kw.kw-liczy .kw-pasek-kwota { opacity: .55; transition: opacity .2s; }
.kw-pasek-pozycje {
  display: inline-flex; flex: 0 1 auto; align-items: center; justify-content: flex-end; gap: 6px; min-width: 0; color: var(--kw-drugi); font-size: 15px;
  text-decoration: underline; text-underline-offset: 3px;
}
.kw-pasek-tekst { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kw-pasek-pozycje::after {
  content: ""; flex: none; width: 12px; height: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.kw-pasek-pozycje.kw-dopisana { color: var(--kw-czerwien-ciemna); font-weight: 600; text-decoration: none; animation: kw-dopisana .5s var(--kw-wyjazd); }
.kw-pasek-pozycje.kw-dopisana::after { display: none; }
@keyframes kw-dopisana { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- start ---------- */
.kw--start .kw-tytul-strony { margin: 6px 0 14px; color: var(--kw-tusz); font-size: clamp(30px, 8.4vw, 44px); font-weight: 700; line-height: 1.06; letter-spacing: -0.035em; text-wrap: balance; }
.kw--start .kw-ekran[data-ekran=stanowiska] h2 { font-size: clamp(21px, 5.6vw, 26px); letter-spacing: -0.02em; }
.kw--start .kw-ekran[data-ekran=stanowiska] .kw-naglowek { margin-bottom: 16px; }
.kw-pod { margin: -10px 0 4px; max-width: 60ch; color: var(--kw-drugi); font-size: 15px; }

/* ---------- ekran pytania ---------- */
.kw-ekran h2 {
  margin: 4px 0 6px; color: var(--kw-tusz); font-size: clamp(26px, 7vw, 36px); font-weight: 700; line-height: 1.12;
  letter-spacing: -0.03em; text-wrap: balance; outline: none;
}
.kw-naglowek { margin-bottom: 18px; }
/* tytuł w linii: „?” stoi za ostatnim słowem także, gdy tytuł łamie się na dwie linie (320 px) */
.kw-naglowek h2 { display: inline; margin: 0; }
.kw .kw-naglowek .kf-pomoc-przycisk { vertical-align: middle; margin: -10px -10px -6px -4px; } /* pole dotyku 44 px, w linii zajmuje tyle co kółko */
.kw-opis { margin: -8px 0 22px; max-width: 52ch; color: var(--kw-drugi); font-size: 15px; }
.kw-krok { margin: 0 0 4px; color: var(--kw-drugi); font-size: 14px; font-variant-numeric: tabular-nums; }
.kw--start .kw-krok { display: none; }
.kw-ekran.kw-wejscie { animation: kw-ekran .45s var(--kw-wyjazd) both; }
@keyframes kw-ekran { from { opacity: 0; transform: translateY(10px); } }

/* „?” przy pytaniu i tytule ekranu: opis dopiero po dotknięciu */
.kw .kf-pytanie--pomoc { display: flex; align-items: center; gap: 2px; }
.kw .kf-pomoc-przycisk {
  display: inline-grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; margin: -8px 0; padding: 0;
  background: none; border: 0; border-radius: 50%; color: var(--kw-drugi);
}
.kw .kf-pomoc-przycisk span[aria-hidden] {
  display: grid; place-items: center; width: 24px; height: 24px; border: 1.5px solid currentColor; border-radius: 50%;
  font-size: 14px; font-weight: 700; line-height: 1; transition: background .2s, color .2s, border-color .2s;
}
.kw .kf-pomoc-przycisk:hover { color: var(--kw-tusz); }
.kw .kf-pomoc-przycisk[aria-expanded=true] span[aria-hidden] { background: var(--kw-tusz); border-color: var(--kw-tusz); color: #fff; }
.kw .kf-pomoc { margin: -4px 0 14px; padding: 12px 14px; max-width: 60ch; background: var(--kw-cieply); border-radius: 12px; color: var(--kw-tekst); font-size: 15px; line-height: 1.5; }
.kw .kf-pomoc:not([hidden]) { animation: kw-pomoc .3s var(--kw-wyjazd); }
@keyframes kw-pomoc { from { opacity: 0; transform: translateY(-4px); } }
.kw .kw-pomoc-ekranu { margin: -6px 0 20px; }

/* ---------- pytania (znaczniki ze wspólnego kf_pole) ---------- */
.kw .kf-pyt { border: 0; margin: 0 0 28px; padding: 0; min-width: 0; }
.kw .kf-pytanie { width: 100%; padding: 0; margin: 0 0 12px; color: var(--kw-tusz); font-size: 17px; font-weight: 600; line-height: 1.35; }
.kw .kf-opcj { color: var(--kw-drugi); font-weight: 400; font-size: 15px; }
.kw .kf-podp { margin: -6px 0 12px; max-width: 60ch; color: var(--kw-drugi); font-size: 15px; }
.kw .kf-grupa {
  display: block; margin: 8px 0 14px; padding-top: 22px; border-top: 1px solid var(--kw-linia);
  color: var(--kw-tusz); font-size: 19px; font-weight: 700; letter-spacing: -0.01em;
}
.kw .kf-kafel input, .kw .kf-wybor input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }

/* kafle ze zdjęciem */
.kw .kf-kafle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kw .kf-kafle--male { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kw .kf-kafel {
  position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--kw-biel);
  border: 1.5px solid var(--kw-linia); border-radius: 14px; box-shadow: 0 1px 2px rgb(17 24 39 / .04);
  transition: border-color .2s, box-shadow .2s, transform .2s var(--kw-wyjazd);
}
.kw .kf-kafel img { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; background: #EFEFEC; }
.kw .kf-kafel span { padding: 10px 12px 12px; color: var(--kw-tusz); font-size: 15px; font-weight: 600; line-height: 1.25; }
.kw .kf-kafle--male .kf-kafel span { padding: 8px 8px 10px; font-size: 15px; line-height: 1.2; }
/* „Cena wiaty od X zł” na kaflu (stanowiska, dach, pokrycie, deskowanie, szczyty): druga linia podpisu, liczona przy pozostałych
   wyborach; na wąskim kaflu łamie się przed „od”, kwotę trzymają razem twarde spacje */
.kw .kf-kafel .kw-kafel-cena { margin-top: -8px; padding-top: 0; color: var(--kw-drugi); font-weight: 500; font-variant-numeric: tabular-nums; }
.kw .kf-kafel .kw-kafel-cena:empty { display: none; }
@media (hover: hover) { .kw .kf-kafel:hover { border-color: var(--kw-linia-mocna); box-shadow: var(--kw-cien); } }
.kw .kf-kafel:active { transform: scale(.98); }
.kw .kf-kafel.kw-zazn { border-color: var(--kw-czerwien); box-shadow: 0 0 0 1.5px var(--kw-czerwien), var(--kw-cien); }
.kw .kf-kafel.kw-zazn::after {
  content: ""; position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--kw-czerwien) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 16px no-repeat;
  box-shadow: 0 2px 6px rgb(185 28 28 / .35); animation: kw-znacznik .35s var(--kw-wyjazd);
}
@keyframes kw-znacznik { from { transform: scale(.4); opacity: 0; } }
.kw .kf-kafel:has(input:focus-visible) { outline: 3px solid var(--kw-czerwien); outline-offset: 2px; }

/* przyciski wyboru */
.kw .kf-wybory { display: flex; flex-wrap: wrap; gap: 10px; }
.kw .kf-wybory--pion { flex-direction: column; }
.kw .kf-wybor span {
  display: flex; align-items: center; min-height: 52px; padding: 0 20px; background: var(--kw-biel);
  border: 1.5px solid var(--kw-linia-mocna); border-radius: 14px; color: var(--kw-tusz); font-size: 16px; font-weight: 600;
  transition: background .2s, border-color .2s, color .2s;
}
.kw .kf-wybory--pion .kf-wybor span { padding: 0 18px; }
@media (hover: hover) { .kw .kf-wybor:hover span { border-color: var(--kw-tusz); } }
.kw .kf-wybor.kw-zazn span, .kw .kf-wybor input:checked + span { background: var(--kw-czerwien); border-color: var(--kw-czerwien); color: #fff; }
.kw .kf-wybor input:focus-visible + span { outline: 3px solid var(--kw-czerwien); outline-offset: 2px; }

/* licznik */
.kw .kf-licznik { display: inline-flex; align-items: center; gap: 0; background: var(--kw-biel); border: 1.5px solid var(--kw-linia-mocna); border-radius: 14px; overflow: hidden; }
.kw .kf-licznik button { width: 56px; height: 56px; background: none; border: 0; color: var(--kw-tusz); font-size: 26px; font-weight: 500; }
@media (hover: hover) { .kw .kf-licznik button:hover { background: var(--kw-cieply); } }
.kw .kf-licznik input {
  width: 72px; height: 56px; border: 0; border-left: 1px solid var(--kw-linia); border-right: 1px solid var(--kw-linia);
  text-align: center; font: 700 22px/1 "DM Sans", system-ui, sans-serif; color: var(--kw-tusz); font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.kw .kf-licznik input::-webkit-outer-spin-button, .kw .kf-licznik input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kw .kf-jedn { padding: 0 4px; color: var(--kw-trzeci); font-weight: 600; }

/* pola tekstowe */
.kw .kf-pyt input[type=text], .kw .kf-pyt input[type=tel], .kw .kf-pyt input[type=email], .kw .kf-pyt select, .kw .kf-pyt textarea {
  display: block; width: 100%; max-width: 480px; min-height: 54px; padding: 14px 16px; background: var(--kw-biel);
  border: 1.5px solid var(--kw-linia-mocna); border-radius: 12px; color: var(--kw-tusz); font: 400 16px/1.4 "DM Sans", system-ui, sans-serif;
  transition: border-color .2s, box-shadow .2s;
}
.kw .kf-pyt textarea { min-height: 96px; resize: vertical; }
.kw .kf-pyt input::placeholder, .kw .kf-pyt textarea::placeholder { color: var(--kw-trzeci); }
.kw .kf-pyt input:focus, .kw .kf-pyt select:focus, .kw .kf-pyt textarea:focus { outline: none; border-color: var(--kw-tusz); box-shadow: 0 0 0 3px rgb(17 24 39 / .12); }
.kw-ekran[data-ekran=kontakt] .kf-pyt { margin-bottom: 18px; }
.kw-ekran[data-ekran=kontakt] .kf-pytanie { margin-bottom: 8px; font-size: 15px; }

/* błędy */
.kw .kf-blad { margin: 8px 0 0; color: var(--kw-czerwien-ciemna); font-size: 15px; font-weight: 500; }
.kw .kf-blad:empty { display: none; }
.kw .kf-pyt--blad .kf-kafel, .kw .kf-pyt--blad .kf-wybor span, .kw .kf-pyt--blad input, .kw .kf-pyt--blad select { border-color: var(--kw-czerwien); }
.kw-blad-wysylki { margin: 0 0 16px; padding: 14px 16px; background: var(--kw-czerwien-tlo); border-radius: 12px; color: var(--kw-czerwien-ciemna); font-weight: 500; }
.kw-klauzula { max-width: 60ch; margin: 4px 0 8px; color: var(--kw-drugi); font-size: 15px; }
.kw-klauzula a { color: var(--kw-tekst); text-underline-offset: 3px; }

/* ---------- arkusz wyceny ---------- */
.kw-arkusz {
  background: var(--kw-biel); border: 1px solid var(--kw-linia); border-radius: 18px; box-shadow: var(--kw-cien);
  padding: 22px 22px 18px;
}
.kw-arkusz-glowa { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.kw-arkusz h2 { margin: 0; color: var(--kw-tusz); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; outline: none; }
.kw-arkusz-zamknij { display: none; width: 44px; height: 44px; transition: none; /* motyw daje przyciskom „transition: all”: przycisk dziedziczył „hidden” i fokus przy otwarciu przepadał */ margin: -8px -10px -8px 0; background: none; border: 0; border-radius: 50%; color: var(--kw-drugi); }
.kw-pozycje { list-style: none; margin: 0; padding: 0; }
.kw-pozycja {
  display: grid; grid-template-columns: 6.5em minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--kw-linia);
}
.kw-poz-nazwa { color: var(--kw-drugi); font-size: 15px; }
.kw-poz-wartosc { min-width: 0; color: var(--kw-tusz); font-size: 15px; font-weight: 600; line-height: 1.35; overflow-wrap: break-word; }
.kw-pozycja--stala .kw-poz-wartosc { grid-column: 2 / 4; }
.kw-poz-zmien {
  min-height: 44px; min-width: 44px; padding: 0 6px; margin: -12px -6px; background: none; border: 0; border-radius: 6px;
  color: var(--kw-drugi); font-size: 15px; text-decoration: underline; text-underline-offset: 3px;
}
.kw-poz-zmien:hover { color: var(--kw-czerwien-ciemna); }
.kw-pozycja.kw-nowa { animation: kw-wiersz 1.6s var(--kw-wyjazd); }
@keyframes kw-wiersz {
  0% { opacity: 0; transform: translateY(-8px); background: var(--kw-czerwien-tlo); }
  30% { opacity: 1; transform: none; background: var(--kw-czerwien-tlo); }
  100% { background: transparent; }
}
.kw-cena { padding: 18px 0 6px; }
.kw-cena-etykieta { margin: 0 0 2px; color: var(--kw-drugi); font-size: 15px; }
.kw-cena-kwota {
  margin: 0; color: var(--kw-tusz); font-size: 32px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.kw-od-slowo { margin-right: .08em; font-size: .62em; font-weight: 600; color: var(--kw-drugi); letter-spacing: 0; }
.kw-waluta { font-size: .62em; font-weight: 600; color: var(--kw-drugi); letter-spacing: 0; }
.kw-cena-dopisek { margin: 6px 0 0; color: var(--kw-drugi); font-size: 15px; line-height: 1.45; }
.kw-cena.kw-liczy .kw-cena-kwota { opacity: .55; transition: opacity .2s; }
.kw.kw-liczy .kw-cena-teraz-kwota, .kw.kw-liczy .kw-kafel-cena { opacity: .55; transition: opacity .2s; }
/* „Zacznij od nowa” trudno trafić przypadkiem: po pierwszym dotknięciu w tym samym miejscu stoi „Nie, zostaw”, a „Tak, wyczyść” jest słabsze i z prawej */
.kw .kw-od-nowa {
  margin: 6px 0 0 -6px; min-height: 44px; padding: 0 6px; background: none; border: 0; border-radius: 8px;
  color: var(--kw-drugi); font-size: 15px; text-decoration: underline; text-underline-offset: 3px;
}
.kw .kw-od-nowa:hover { color: var(--kw-tusz); background: none; }
.kw-od-nowa-pytanie { margin: 10px 0 0; padding-top: 12px; border-top: 1px solid var(--kw-linia); }
.kw-od-nowa-pytanie p { margin: 0 0 10px; color: var(--kw-tusz); font-size: 15px; font-weight: 600; }
.kw-od-nowa-przyciski { display: flex; align-items: center; gap: 16px; }
.kw .kw-od-nowa-nie {
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--kw-tusz); color: #fff; font-size: 16px; font-weight: 700;
}
.kw .kw-od-nowa-nie:hover, .kw .kw-od-nowa-nie:focus { background: #000; color: #fff; }
.kw .kw-od-nowa-tak {
  margin-left: auto; min-height: 44px; padding: 0 4px; background: none; border: 0; color: var(--kw-drugi); font-size: 14px;
  text-decoration: underline; text-underline-offset: 3px;
}
.kw .kw-od-nowa-tak:hover, .kw .kw-od-nowa-tak:focus { background: none; color: var(--kw-czerwien-ciemna); }

/* ---------- pasek dolny: Wstecz i Dalej obok siebie pod kciukiem (Adrian 06.10) ---------- */
.kw-dol {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; gap: 10px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--kw-biel);
  border-top: 1px solid var(--kw-linia); box-shadow: 0 -6px 24px rgb(17 24 39 / .08);
}
.kw .kw-dol .kw-wstecz {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-height: 54px; padding: 0 20px 0 12px;
  background: var(--kw-biel); border: 1.5px solid var(--kw-linia-mocna); border-radius: 999px; color: var(--kw-tusz); font-size: 17px; font-weight: 600;
  transition: border-color .2s;
}
.kw .kw-dol .kw-wstecz:hover, .kw .kw-dol .kw-wstecz:focus { background: var(--kw-biel); border-color: var(--kw-tusz); color: var(--kw-tusz); }
.kw .kw-dalej, .kw .kw-wyslij {
  flex: 1; min-height: 54px; padding: 0 22px; border: 0; border-radius: 999px;
  background: var(--kw-czerwien); color: #fff; font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
  box-shadow: 0 6px 16px rgb(220 38 38 / .28); transition: background .2s, transform .15s, box-shadow .2s;
}
/* tylko przy myszce: na telefonie stan „najechania” zostaje po dotknięciu Dalej i farbował Wyślij, który pojawia się w tym samym miejscu */
.kw .kw-dalej:focus, .kw .kw-wyslij:focus { background: var(--kw-czerwien); color: #fff; }
@media (hover: hover) { .kw .kw-dalej:hover, .kw .kw-wyslij:hover { background: var(--kw-czerwien-ciemna); color: #fff; } }
.kw-dalej:active, .kw-wyslij:active, .kw-dol .kw-wstecz:active { transform: scale(.97); }
.kw .kw-dalej:disabled, .kw .kw-wyslij:disabled { background: var(--kw-trzeci); box-shadow: none; cursor: progress; }
@media (max-width: 359px) { .kw .kw-dol .kw-wstecz { padding: 0 14px 0 8px; font-size: 16px; } .kw .kw-wyslij { padding: 0 12px; font-size: 16px; } }

/* arkusz na telefonie: wysuwany od dołu */
@media (max-width: 959px) {
  .kw-arkusz {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; max-height: 86vh; max-height: 86dvh; overflow: auto; overscroll-behavior: contain;
    padding: 18px 18px calc(22px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; border: 0;
    box-shadow: 0 -12px 40px rgb(17 24 39 / .22); transform: translateY(105%); visibility: hidden;
    transition: transform .45s var(--kw-wyjazd), visibility 0s linear .45s;
  }
  .kw-arkusz.kw-otwarty { z-index: 10001; transform: none; visibility: visible; transition: transform .45s var(--kw-wyjazd); } /* nad banerem zgód */
  .kw-arkusz::before { content: ""; display: block; width: 40px; height: 4px; margin: -6px auto 12px; border-radius: 2px; background: var(--kw-linia-mocna); }
  .kw-arkusz-zamknij { display: grid; place-items: center; }
  .kw-cien {
    position: fixed; inset: 0; z-index: 35; background: rgb(17 24 39 / .4); opacity: 0; pointer-events: none; transition: opacity .3s;
  }
  .kw-cien.kw-otwarty { z-index: 10000; opacity: 1; pointer-events: auto; }
  /* podsumowanie przed kontaktem: arkusz w treści, nie w szufladzie */
  .kw-arkusz.kw-w-tresci {
    position: static; transform: none; visibility: visible; max-height: none; margin: 0 0 24px; border: 1px solid var(--kw-linia);
    border-radius: 18px; box-shadow: var(--kw-cien); padding: 18px;
  }
  .kw-arkusz.kw-w-tresci::before, .kw-arkusz.kw-w-tresci .kw-arkusz-zamknij { display: none; }
}

@media (min-width: 640px) {
  .kw .kf-kafle { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
  .kw .kf-kafle--male { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kw-gora { padding: 0 24px; }
  .kw-logo img { width: 132px; }
}

/* ---------- komputer: pytanie i arkusz obok siebie ---------- */
@media (min-width: 960px) {
  .kw-formularz {
    display: grid; grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "pytania arkusz" "dol arkusz";
    grid-template-rows: auto 1fr; column-gap: 56px; padding: 40px 32px 72px; align-items: start;
  }
  .kw-pytania { grid-area: pytania; max-width: 680px; }
  .kw-arkusz { grid-area: arkusz; position: sticky; top: 88px; }
  .kw-dol {
    grid-area: dol; position: static; justify-content: flex-start; max-width: 680px; padding: 4px 0 0;
    background: none; border: 0; box-shadow: none;
  }
  .kw .kw-pasek { display: none; }
  .kw-gora { position: sticky; top: 0; z-index: 20; }
  .kw-pytania { padding-top: 0; }
  .kw .kw-dalej, .kw .kw-wyslij { flex: none; min-width: 180px; }
  .kw-ekran h2 { font-size: 40px; }
  .kw-opis { font-size: 16px; }
  .kw .kf-kafle { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kw-cien { display: none; }
}

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

/* Regulacja wymiaru jest zawsze obok gotowych rozmiarów. */
.kw .kw-suwak { display:block; width:100%; max-width:680px; height:44px; padding:0; margin:8px 0 0; accent-color:var(--kw-czerwien); cursor:pointer; }
.kw .kw-suwak-kraje { display:flex; justify-content:space-between; max-width:680px; color:var(--kw-drugi); font-size:14px; }
.kw .kf-licznik button:disabled { color:var(--kw-trzeci); cursor:default; background:var(--kw-cieply); }
.kw #kf-szerokosc, .kw #kf-dlugosc { margin-top:24px; }

/* ekran „Termin i budżet”: aktualna cena od tuż nad pytaniem, czy mieści się w budżecie */
.kw-cena-teraz { margin: 4px 0 18px; padding-top: 22px; border-top: 1px solid var(--kw-linia); }
.kw-cena-teraz p { margin: 0; }
.kw-cena-teraz-etykieta { color: var(--kw-drugi); font-size: 15px; }
.kw-cena-teraz-kwota { color: var(--kw-tusz); font-size: 32px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kw-cena-teraz .kw-cena-teraz-dopisek { margin-top: 2px; color: var(--kw-drugi); font-size: 15px; }

/* okno „Czy na pewno chcesz wyjść?”: jak baner zgód, Zostań jako akcja główna */
.kw-wyjscie {
  width: min(400px, calc(100% - 32px)); margin: auto; padding: 24px 22px 20px; border: 0; border-radius: 16px; background: var(--kw-biel);
  color: var(--kw-tekst); box-shadow: 0 16px 48px rgb(17 24 39 / .24), 0 2px 6px rgb(17 24 39 / .08);
}
.kw-wyjscie::backdrop { background: rgb(17 24 39 / .4); }
.kw-wyjscie[open] { animation: kw-okno .35s var(--kw-wyjazd); }
@keyframes kw-okno { from { opacity: 0; transform: translateY(10px) scale(.98); } }
.kw-wyjscie h2 { margin: 0 0 8px; color: var(--kw-tusz); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.kw-wyjscie p { margin: 0 0 20px; color: var(--kw-drugi); font-size: 16px; line-height: 1.5; }
.kw-wyjscie-przyciski { display: flex; flex-direction: column; gap: 10px; }
.kw .kw-wyjscie-przyciski button { min-height: 52px; padding: 0 24px; border-radius: 999px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; transition: background .2s, border-color .2s; }
.kw .kw-wyjscie-zostan { border: 0; background: var(--kw-czerwien); color: #fff; box-shadow: 0 6px 16px rgb(220 38 38 / .28); }
.kw .kw-wyjscie-zostan:hover, .kw .kw-wyjscie-zostan:focus { background: var(--kw-czerwien-ciemna); color: #fff; }
.kw .kw-wyjscie-wyjdz { border: 1.5px solid var(--kw-linia-mocna); background: var(--kw-biel); color: var(--kw-tusz); }
.kw .kw-wyjscie-wyjdz:hover, .kw .kw-wyjscie-wyjdz:focus { border-color: var(--kw-tusz); background: var(--kw-biel); color: var(--kw-tusz); }
@media (min-width: 480px) { .kw-wyjscie-przyciski { flex-direction: row-reverse; } .kw-wyjscie-przyciski button { flex: 1; } }
@media (prefers-reduced-motion: reduce) { .kw-wyjscie[open] { animation: none; } }

/* ---------- telefon, uwagi Adriana 06.10 ---------- */
/* nieparzysta liczba kafli (trzy stanowiska, 11 ścian): ostatni na środku zamiast samotnie z lewej */
@media (max-width: 639px) {
  .kw .kf-kafle > .kf-kafel:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 6px); }
}

/* wymiar: jeden kafel, „−” skrajnie z lewej, „+” z prawej, metry na środku, pod spodem suwak na całą szerokość */
.kw #kf-szerokosc, .kw #kf-dlugosc {
  margin: 14px 0 0; padding: 14px 14px 6px; background: var(--kw-biel); border: 1.5px solid var(--kw-linia); border-radius: 16px;
}
.kw #kf-szerokosc .kf-pytanie, .kw #kf-dlugosc .kf-pytanie { margin-bottom: 8px; font-size: 15px; color: var(--kw-drugi); font-weight: 500; }
.kw #kf-szerokosc .kf-licznik, .kw #kf-dlugosc .kf-licznik { display: flex; align-items: center; width: 100%; border: 0; border-radius: 0; overflow: visible; }
.kw #kf-szerokosc .kf-licznik button, .kw #kf-dlugosc .kf-licznik button {
  flex: none; width: 52px; height: 52px; border: 1.5px solid var(--kw-linia-mocna); border-radius: 50%; background: var(--kw-biel); line-height: 1;
}
.kw #kf-szerokosc .kf-minus, .kw #kf-dlugosc .kf-minus { margin-right: auto; }
.kw #kf-szerokosc .kf-plus, .kw #kf-dlugosc .kf-plus { margin-left: auto; }
.kw .kw-wymiar-liczba { color: var(--kw-tusz); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kw #kf-szerokosc .kf-jedn, .kw #kf-dlugosc .kf-jedn { padding: 0 0 0 6px; font-size: 20px; color: var(--kw-tusz); font-weight: 700; }
.kw #kf-szerokosc .kw-suwak, .kw #kf-dlugosc .kw-suwak { max-width: none; }
.kw #kf-szerokosc .kw-suwak-kraje, .kw #kf-dlugosc .kw-suwak-kraje { max-width: none; }
.kw-powierzchnia { margin: 14px 0 0; color: var(--kw-drugi); font-size: 15px; }
.kw-powierzchnia strong { margin-left: 4px; color: var(--kw-tusz); font-size: 17px; font-variant-numeric: tabular-nums; }

/* telefon z +48: widać, że wpisuje się tylko 9 cyfr */
.kw .kf-prefiks { display: flex; max-width: 480px; }
.kw .kf-prefiks span {
  display: grid; place-items: center; padding: 0 14px; background: var(--kw-cieply); border: 1.5px solid var(--kw-linia-mocna); border-right: 0;
  border-radius: 12px 0 0 12px; color: var(--kw-tusz); font-weight: 600; font-variant-numeric: tabular-nums;
}
.kw .kf-prefiks input[type=tel] { min-width: 0; border-radius: 0 12px 12px 0; }
/* legenda w środku kafla wymiaru, nie na jego krawędzi */
.kw #kf-szerokosc > .kf-pytanie, .kw #kf-dlugosc > .kf-pytanie { float: left; width: 100%; }
.kw #kf-szerokosc > .kf-licznik, .kw #kf-dlugosc > .kf-licznik { clear: both; }
/* pasek ceny przyklejony u góry: przewinięta wycena nie chowa nagłówka pod nim */
@media (max-width: 959px) { .kw-arkusz.kw-w-tresci { scroll-margin-top: 72px; } }
@media (max-width: 359px) { .kw-pasek-kwota { font-size: 19px; } .kw-pasek-pozycje { font-size: 14px; } }
/* bardzo wąski telefon: nazwa pozycji nad wartością, żeby „Dwustanowiskowa” czy „Blachodachówka” nie łamały się w środku słowa */
@media (max-width: 379px) {
  .kw-pozycja { grid-template-columns: minmax(0, 1fr) auto; row-gap: 2px; }
  .kw-poz-wartosc { grid-column: 1; grid-row: 2; }
  .kw-pozycja--stala .kw-poz-wartosc { grid-column: 1 / -1; }
  .kw-poz-zmien { grid-column: 2; grid-row: 1 / 3; align-self: center; margin: 0 -6px 0 0; }
}
@media (max-width: 359px) { .kw-ekran h2 { font-size: 24px; } } /* 320 px: „Wybierz wymiar wiaty ?” w jednej linii */