/* Komponenty wspolne (src/ui/komponenty/): wymiary i typografia z podgladu wariantu B, kolory z tokeny.css. */

.ikona {
  width: 20px;
  height: 20px;
}

/* Naglowek ekranu: grafitowy pas */
.naglowek {
  background: var(--marka-granat);
  color: var(--tekst-na-ciemnym);
  padding: 18px var(--odstep-ekranu) 16px;
}

.naglowek__wiersz {
  display: flex;
  align-items: center;
  gap: 6px;
}

.naglowek__tytul {
  font-size: var(--tekst-tytul-ekranu);
  font-weight: 700;
  line-height: 1.25;
}

.naglowek__podtytul {
  margin-top: 3px;
  font-size: var(--tekst-maly);
  color: var(--marka-granat-jasny);
}

.naglowek__wstecz {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cel-dotyku);
  height: var(--cel-dotyku);
  margin: -10px 0 -10px -12px;
  border-radius: var(--promien-przycisk);
}

.naglowek--duzy {
  padding: 22px var(--odstep-ekranu) 20px;
}

.naglowek--duzy .naglowek__tytul {
  font-size: var(--tekst-tytul-powitalny);
}

/* Karta */
.karta {
  background: var(--tlo-karta);
  border: 1px solid var(--linia-podzial);
  border-radius: var(--promien-karta);
  padding: 14px;
}

.karta__tytul {
  margin-bottom: 8px;
  font-size: var(--tekst-podstawowy);
  font-weight: 700;
}

.karta--bez-odstepu {
  padding: 0;
  overflow: hidden;
}

.karta--bez-odstepu > .karta__tytul {
  padding: 14px 14px 0;
}

/* Baner */
.baner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-radius: var(--promien-przycisk);
  padding: 10px 14px;
  font-size: var(--tekst-maly);
  font-weight: 500;
}

.baner--uwaga {
  background: var(--uwaga-tlo);
  color: var(--uwaga-tekst);
}

.baner--info {
  background: var(--info-tlo);
  color: var(--info-tekst);
}

.baner--blad {
  background: var(--blad-tlo);
  color: var(--blad-tekst);
}

.baner--sukces {
  background: var(--sukces-tlo);
  color: var(--sukces-tekst);
}

.baner__akcja {
  flex: none;
  min-height: var(--cel-dotyku);
  margin: -10px -8px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  border: 0;
  background: none;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
}

/* Pasek postepu kreatora */
.postep {
  display: flex;
  gap: 6px;
  margin: 0;
  padding: 10px var(--odstep-ekranu);
  list-style: none;
  background: var(--tlo-karta);
  border-bottom: 1px solid var(--linia-podzial);
}

.postep__krok {
  flex: 1;
  min-width: 0;
  font-size: var(--tekst-drobny);
  color: var(--tekst-drugi);
}

.postep__kreska {
  display: block;
  height: 4px;
  margin-bottom: 5px;
  border-radius: 2px;
  background: var(--linia-podzial);
}

.postep__krok--zrobiony .postep__kreska {
  background: var(--marka-zielen);
}

.postep__krok--aktywny {
  color: var(--tekst-glowny);
  font-weight: 700;
}

/* Wiersz listy */
.wiersz {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: var(--cel-dotyku);
  padding: 12px 12px 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--linia-podzial);
  background: none;
  text-align: left;
  text-decoration: none;
}

.wiersz:last-child {
  border-bottom: 0;
}

.wiersz--akcja {
  cursor: pointer;
  transition: background-color 0.15s;
}

.wiersz--akcja:hover {
  background: var(--tlo-strona);
}

.wiersz__awatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--tlo-miekkie);
  font-size: 13px;
  font-weight: 700;
}

.wiersz__ikona {
  color: var(--marka-zielen);
}

.wiersz__tresc {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.wiersz__tytul {
  font-size: 14.5px;
  font-weight: 700;
}

.wiersz__opis {
  font-size: var(--tekst-maly);
  color: var(--tekst-drugi);
}

.wiersz__wartosc {
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.wiersz__strzalka {
  color: var(--tekst-trzeci);
}

/* Przycisk */
.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 16px;
  border: 1px solid transparent;
  border-radius: var(--promien-przycisk);
  font-size: 15px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
}

.przycisk:active:not(:disabled) {
  transform: scale(0.97);
}

.przycisk:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.przycisk .ikona {
  width: 18px;
  height: 18px;
}

.przycisk--glowny {
  background: var(--marka-zielen);
  border-color: var(--marka-zielen);
  color: var(--tekst-na-ciemnym);
}

.przycisk--glowny:hover:not(:disabled),
.przycisk--glowny:active:not(:disabled) {
  background: var(--marka-zielen-ciemna);
  border-color: var(--marka-zielen-ciemna);
}

.przycisk--drugi {
  background: var(--tlo-karta);
  border-color: var(--linia-obrys);
  color: var(--tekst-glowny);
}

.przycisk--drugi:hover:not(:disabled) {
  background: var(--tlo-strona);
}

.przycisk--tekstowy {
  min-height: var(--cel-dotyku);
  padding: 10px 4px;
  background: none;
  color: var(--marka-zielen);
}

.przycisk--niebezpieczny {
  background: var(--blad-tekst);
  border-color: var(--blad-tekst);
  color: var(--tekst-na-ciemnym);
}

/* Pole tekstowe */
.pole {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pole__etykieta {
  font-size: var(--tekst-maly);
  font-weight: 600;
  color: var(--tekst-drugi);
}

.pole__wejscie {
  width: 100%;
  min-height: var(--cel-dotyku);
  padding: 11px 14px;
  border: 1px solid var(--tekst-trzeci);
  border-radius: var(--promien-przycisk);
  background: var(--tlo-karta);
  font-size: 16px;
  font-weight: 500;
}

.pole--blad .pole__wejscie {
  border-color: var(--blad-tekst);
  background: var(--blad-tlo);
}

.pole__podpowiedz {
  font-size: var(--tekst-maly);
  color: var(--tekst-drugi);
}

.pole__blad {
  padding: 6px 10px;
  border-radius: var(--promien-pigulka);
  background: var(--blad-tlo);
  color: var(--blad-tekst);
  font-size: var(--tekst-maly);
  font-weight: 600;
}

/* Licznik − / wartosc / + */
.licznik {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  padding: 12px 12px 12px 14px;
  border: 1px solid var(--linia-podzial);
  border-radius: var(--promien-karta);
  background: var(--tlo-karta);
}

.licznik__opis {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.licznik__etykieta {
  font-size: var(--tekst-maly);
  color: var(--tekst-drugi);
}

.licznik__wartosc {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 23px;
  font-weight: 700;
}

.licznik__wejscie {
  field-sizing: content;
  min-width: 2ch;
  max-width: 8ch;
  padding: 0;
  border: 0;
  border-bottom: 1px dashed transparent;
  background: transparent;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.licznik__wejscie:hover,
.licznik__wejscie:focus {
  border-bottom-color: var(--tekst-trzeci);
}

.licznik__wejscie[aria-invalid='true'] {
  border-bottom-color: var(--blad-tekst);
  color: var(--blad-tekst);
}

.licznik__przyciski {
  display: flex;
  gap: 10px;
}

.licznik__przycisk {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--linia-obrys);
  border-radius: 50%;
  background: var(--tlo-karta);
  color: var(--tekst-glowny);
}

.licznik__przycisk::after {
  content: '';
  position: absolute;
  inset: -2px;
}

.licznik__przycisk--plus {
  background: var(--marka-granat);
  border-color: var(--marka-granat);
  color: var(--tekst-na-ciemnym);
}

.licznik__przycisk[aria-disabled='true'] {
  opacity: 0.4;
  cursor: not-allowed;
}

.licznik .pole__blad {
  flex-basis: 100%;
}

/* Chipy pojedynczego wyboru */
.grupa-chipow {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.grupa-chipow__etykieta {
  font-size: 13.5px;
  font-weight: 700;
}

.chipy {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--linia-obrys);
  border-radius: var(--promien-chip);
  background: var(--tlo-karta);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}

@media (pointer: coarse) {
  .chip {
    min-height: var(--cel-dotyku);
  }
}

.chip__wejscie {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.chip:has(.chip__wejscie:checked) {
  background: var(--marka-zielen);
  border-color: var(--marka-zielen);
  color: var(--tekst-na-ciemnym);
}

.chip:has(.chip__wejscie:focus-visible) {
  outline: 2px solid var(--marka-zielen);
  outline-offset: 2px;
}

/* Przelacznik */
.przelacznik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--cel-dotyku);
  cursor: pointer;
}

.przelacznik__tekst {
  display: flex;
  flex-direction: column;
}

.przelacznik__etykieta {
  font-weight: 600;
}

.przelacznik__opis {
  font-size: var(--tekst-maly);
  color: var(--tekst-drugi);
}

.przelacznik__wejscie {
  flex: none;
  appearance: none;
  width: 44px;
  height: 26px;
  margin: 0;
  border-radius: 13px;
  background: var(--tekst-trzeci) radial-gradient(circle, var(--tlo-karta) 9px, transparent 9.5px) no-repeat left 3px center / 20px 20px;
  cursor: pointer;
  transition: background-color 0.15s, background-position 0.15s;
}

.przelacznik__wejscie:checked {
  background-color: var(--marka-zielen);
  background-position: right 3px center;
}

/* Dolny pasek nawigacji */
.dolny-pasek {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  margin-top: auto;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--linia-podzial);
  background: var(--tlo-karta);
  font-size: var(--tekst-drobny);
}

.dolny-pasek__pozycja {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-height: 56px;
  padding: 8px 0 10px;
  color: var(--tekst-drugi);
  text-decoration: none;
}

.dolny-pasek__pozycja .ikona {
  width: 22px;
  height: 22px;
}

.dolny-pasek__pozycja--aktywna {
  color: var(--tekst-glowny);
  font-weight: 700;
}

.dolny-pasek__plus {
  flex: 1;
  display: flex;
  justify-content: center;
  padding: 4px 0;
  border: 0;
  background: none;
}

.dolny-pasek__kolo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--rozmiar-plus);
  height: var(--rozmiar-plus);
  border-radius: 50%;
  background: var(--marka-zielen);
  color: var(--tekst-na-ciemnym);
  transition: background-color 0.15s;
}

.dolny-pasek__plus:hover .dolny-pasek__kolo {
  background: var(--marka-zielen-ciemna);
}

.dolny-pasek__kolo .ikona {
  width: 26px;
  height: 26px;
}

/* Arkusz od dolu i dialog potwierdzenia (natywny <dialog>) */
.arkusz,
.dialog {
  padding: 0;
  border: 0;
  background: var(--tlo-karta);
  color: var(--tekst-glowny);
}

.arkusz::backdrop,
.dialog::backdrop {
  background: rgb(38 40 44 / 0.45);
}

.arkusz {
  width: 100%;
  max-width: var(--szerokosc-kolumny);
  max-height: 85dvh;
  margin: auto auto 0;
  border-radius: var(--promien-arkusz) var(--promien-arkusz) 0 0;
}

.arkusz[open] {
  animation: wysun-arkusz 0.2s ease-out;
}

@keyframes wysun-arkusz {
  from {
    transform: translateY(100%);
  }
}

.arkusz__wnetrze {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: var(--odstep-ekranu) var(--odstep-ekranu) calc(var(--odstep-ekranu) + env(safe-area-inset-bottom));
}

.arkusz__gora {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.arkusz__tytul {
  font-size: 16px;
  font-weight: 700;
}

.arkusz__zamknij {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cel-dotyku);
  height: var(--cel-dotyku);
  margin: -10px -10px -10px 0;
  border: 0;
  border-radius: var(--promien-przycisk);
  background: none;
}

.opcja-arkusza {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--linia-podzial);
  border-radius: var(--promien-karta);
  text-decoration: none;
  transition: background-color 0.15s;
}

.opcja-arkusza:hover {
  background: var(--marka-zielen-tlo);
}

.opcja-arkusza__ikona {
  width: 22px;
  height: 22px;
  color: var(--marka-zielen);
}

.opcja-arkusza__tresc {
  display: flex;
  flex-direction: column;
}

.opcja-arkusza__tytul {
  font-size: 15px;
  font-weight: 700;
}

.opcja-arkusza__opis {
  font-size: var(--tekst-maly);
  color: var(--tekst-drugi);
}

.dialog {
  width: min(100% - 32px, 400px);
  border-radius: var(--promien-karta);
}

.dialog__wnetrze {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
}

.dialog__tytul {
  font-size: 17px;
  font-weight: 700;
}

.dialog__tresc {
  color: var(--tekst-drugi);
}

.dialog__przyciski {
  display: flex;
  gap: 8px;
  padding-top: 4px;
}

.dialog__przyciski .przycisk {
  flex: 1;
}

/* Ekrany komunikatow (nieznany adres, wczytywanie) */
.tresc--komunikat {
  align-items: flex-start;
  padding-top: 40px;
}

.komunikat {
  font-size: var(--tekst-tytul-ekranu);
  font-weight: 700;
}

.ladowanie {
  color: var(--tekst-drugi);
}

/* Pigulka statusu wyceny (src/ui/statusy.js) */
.pigulka {
  flex: none;
  padding: 3px 8px;
  border-radius: var(--promien-pigulka);
  background: var(--tlo-miekkie);
  color: var(--tekst-glowny);
  font-size: var(--tekst-drobny);
  font-weight: 600;
  white-space: nowrap;
}

.pigulka--szkic {
  color: var(--status-szkic-tekst);
}

.pigulka--do_wyslania {
  background: var(--uwaga-tlo);
  color: var(--uwaga-tekst);
}

.pigulka--wyslana {
  background: var(--marka-zielen-tlo);
  color: var(--marka-zielen);
}

.pigulka--przyjeta {
  background: var(--sukces-tlo);
  color: var(--sukces-tekst);
}

.pigulka--wykonana {
  background: var(--status-wykonana-tlo);
}

/* Ekran startowy: kafle wycen, karta miesiaca, sekcja „Do zrobienia” */
.kafle {
  display: flex;
  gap: 10px;
}

.kafel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 12px;
  border: 1px solid var(--linia-podzial);
  border-radius: var(--promien-karta);
  background: var(--tlo-karta);
  text-decoration: none;
  transition: background-color 0.15s, transform 0.15s;
}

.kafel:hover {
  background: var(--tlo-strona);
}

.kafel:active {
  transform: scale(0.96);
}

.kafel__ikona {
  width: 22px;
  height: 22px;
  color: var(--marka-zielen);
}

.kafel__tytul {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
}

.kafel__opis {
  font-size: var(--tekst-drobny);
  color: var(--tekst-drugi);
}

.kafel--glowny {
  border-color: var(--marka-zielen);
  background: var(--marka-zielen);
  color: var(--tekst-na-ciemnym);
}

.kafel--glowny:hover {
  border-color: var(--marka-zielen-ciemna);
  background: var(--marka-zielen-ciemna);
}

.kafel--glowny .kafel__ikona,
.kafel--glowny .kafel__opis {
  color: var(--tekst-na-ciemnym);
}

.karta-miesiaca__miesiac {
  font-size: var(--tekst-maly);
  font-weight: 400;
  color: var(--tekst-drugi);
}

.statystyki {
  display: flex;
  gap: 8px;
  margin: 6px 0 10px;
}

.statystyka {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.statystyka__wartosc {
  font-size: var(--tekst-tytul-ekranu);
  font-weight: 700;
  white-space: nowrap;
}

.statystyka__etykieta {
  font-size: var(--tekst-drobny);
  color: var(--tekst-drugi);
}

.karta-miesiaca__tempo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 10px;
  padding-top: 10px;
  border-top: 1px solid var(--linia-podzial);
  font-size: var(--tekst-maly);
}

.karta-miesiaca__etykieta {
  color: var(--tekst-drugi);
}

.karta-miesiaca__wartosc {
  font-weight: 700;
}

.sekcja {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sekcja__naglowek {
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 700;
}

.sekcja__licznik {
  color: var(--marka-zielen);
}

.start-pusty {
  color: var(--tekst-drugi);
}

/* Lista wycen: kwota nad pigulka statusu */
.wiersz-wyceny__status {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

/* Ustawienia firmy i kreator pierwszego uruchomienia (src/widoki/ustawienia*.js, kreator-startowy.js) */
.karta-ustawien {
  display: flex;
  flex-direction: column;
}

.karta-ustawien .wiersz {
  padding-inline: 0;
}

.karta-ustawien .wiersz__tresc {
  flex: none;
}

.karta-ustawien .wiersz__tytul,
.karta-kopii .wiersz__tytul {
  font-weight: 500;
}

.karta-ustawien .wiersz__wartosc,
.karta-kopii .wiersz__wartosc {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
  color: var(--tekst-drugi);
  font-weight: 500;
}

.karta-ustawien .grupa-chipow {
  padding-top: 12px;
}

.karta-ustawien > .przycisk--tekstowy {
  align-self: flex-start;
}

.ustawienia__linia {
  padding: 10px 0;
  border-bottom: 1px solid var(--linia-podzial);
  font-size: var(--tekst-maly);
  color: var(--tekst-drugi);
}

.ustawienia__opis {
  margin-top: 8px;
  font-size: var(--tekst-maly);
  color: var(--tekst-drugi);
  text-wrap: pretty;
}

.ustawienia__komunikat {
  position: sticky;
  bottom: calc(var(--cel-dotyku) + 32px);
  padding-inline: var(--odstep-ekranu);
}

.ustawienia__komunikat:not(:empty) {
  padding-bottom: 8px;
}

.karta-tempa__gora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.karta-tempa__gora .karta__tytul {
  margin-bottom: 0;
}

.karta-tempa__wartosc {
  margin-top: 6px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
}

.pigulka--tempo {
  background: var(--marka-zielen-tlo);
  color: var(--marka-zielen);
}

.arkusz__formularz {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kreator-startowy__przyciski {
  display: flex;
  gap: 8px;
}

.kreator-startowy__przyciski .przycisk {
  flex: 1;
}

/* Kopia danych i ekran ratunkowy (src/widoki/kopia.js, ratunek.js) */
.kopia__ikona {
  display: block;
  width: 24px;
  height: 24px;
  margin-bottom: 8px;
  color: var(--marka-zielen);
}

.kopia__opis,
.ratunek__opis {
  font-size: var(--tekst-maly);
  color: var(--tekst-drugi);
  text-wrap: pretty;
}

.kopia__podsumowanie {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.kopia__podsumowanie .pigulka {
  padding: 5px 10px;
  font-size: var(--tekst-maly);
  color: var(--tekst-drugi);
}

.kopia__akcja {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}

.kopia__komunikat:empty {
  display: none;
}

.opcja-dialogu {
  width: 100%;
  background: var(--tlo-karta);
  text-align: left;
}

.opcja-dialogu:active {
  transform: scale(0.98);
}

.ratunek__przyciski {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-self: stretch;
}

/* Kreator dokladnej wyceny: rama kroku i wybor uslugi (src/widoki/kreator-wspolne.js, kreator-usluga.js) */
.kreator__komunikat:empty {
  display: none;
}

.stopka-kreatora {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding: 12px var(--odstep-ekranu) calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linia-podzial);
  background: var(--tlo-karta);
}

.stopka-kreatora .przycisk {
  flex: 1;
}

.stopka-kreatora__razem {
  display: flex;
  flex-direction: column;
}

.stopka-kreatora__etykieta {
  font-size: var(--tekst-maly);
  color: var(--tekst-drugi);
}

.stopka-kreatora__kwota {
  font-size: var(--tekst-tytul-ekranu);
  font-weight: 700;
}

.lista-uslug {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.lista-uslug__tytul {
  margin-bottom: 8px;
  padding: 0;
  font-size: 13.5px;
  font-weight: 700;
}

.lista-uslug__opcje {
  overflow: hidden;
  border: 1px solid var(--linia-podzial);
  border-radius: var(--promien-karta);
  background: var(--tlo-karta);
}

.opcja-uslugi {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--cel-dotyku);
  padding: 12px 14px;
  border-bottom: 1px solid var(--linia-podzial);
  cursor: pointer;
  transition: background-color 0.15s;
}

.lista-uslug__opcje > :last-child {
  border-bottom: 0;
}

.opcja-uslugi:hover {
  background: var(--tlo-strona);
}

.opcja-uslugi:has(.opcja-uslugi__wejscie:checked) {
  background: var(--marka-zielen-tlo);
}

.opcja-uslugi__wejscie {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--marka-zielen);
  cursor: pointer;
}

.opcja-uslugi__tresc {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.opcja-uslugi__tytul {
  font-size: 14.5px;
  font-weight: 600;
}

.opcja-uslugi__opis {
  font-size: var(--tekst-maly);
  color: var(--tekst-drugi);
}

.opcja-uslugi__warianty {
  padding: 4px 14px 14px 46px;
  border-bottom: 1px solid var(--linia-podzial);
  background: var(--marka-zielen-tlo);
}

.opcja-uslugi__warianty .grupa-chipow__etykieta {
  font-size: var(--tekst-maly);
  font-weight: 600;
  color: var(--tekst-drugi);
}

.kreator-usluga__notka {
  font-size: var(--tekst-maly);
  color: var(--tekst-drugi);
}

/* Kreator: krok pomieszczen (src/widoki/kreator-pomieszczenia.js, makieta kreator-pomieszczenia) */
.lista-pomieszczen {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.karta-pomieszczenia {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--linia-podzial);
  border-radius: var(--promien-karta);
  background: var(--tlo-karta);
  color: var(--tekst-glowny);
  text-align: left;
}

button.karta-pomieszczenia {
  cursor: pointer;
  transition: border-color 0.15s;
}

button.karta-pomieszczenia:hover {
  border-color: var(--linia-obrys);
}

.karta-pomieszczenia--rozwinieta {
  gap: 12px;
  border-color: var(--marka-zielen);
}

.karta-pomieszczenia__gora {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.karta-pomieszczenia__nazwy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.karta-pomieszczenia__nazwa {
  font-size: 15px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.karta-pomieszczenia__typ {
  font-size: var(--tekst-maly);
  color: var(--tekst-drugi);
}

.karta-pomieszczenia__metraz {
  font-size: 15px;
  color: var(--tekst-drugi);
  white-space: nowrap;
}

.karta-pomieszczenia__strzalka {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--tekst-trzeci);
}

.karta-pomieszczenia__brud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.znacznik-brudu {
  padding: 3px 10px;
  border-radius: var(--promien-pigulka);
  background: var(--tlo-miekkie);
  font-size: var(--tekst-maly);
  font-weight: 600;
}

.karta-pomieszczenia__zwin {
  min-height: var(--cel-dotyku);
  min-width: var(--cel-dotyku);
  margin: -10px -4px 0 0;
  padding: 0 4px;
  border: 0;
  background: none;
  color: var(--marka-zielen);
  font-size: var(--tekst-podstawowy);
  font-weight: 700;
  cursor: pointer;
}

.karta-pomieszczenia__legenda {
  font-size: var(--tekst-maly);
  color: var(--tekst-drugi);
}

.karta-pomieszczenia > .przycisk--tekstowy {
  align-self: flex-start;
}

.wiersz-brudu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.wiersz-brudu__nazwa {
  min-width: 0;
  font-size: var(--tekst-podstawowy);
}

.wiersz-brudu__poziomy {
  flex: none;
  flex-wrap: nowrap;
  gap: 6px;
}

.chip--poziom {
  justify-content: center;
  width: 40px;
  min-height: 40px;
  padding: 0;
  border-radius: 50%;
}

@media (pointer: coarse) {
  .chip--poziom {
    width: var(--cel-dotyku);
    min-height: var(--cel-dotyku);
  }
}

.kreator-pomieszczenia__pusto {
  color: var(--tekst-drugi);
}

.kreator-pomieszczenia__dodaj .przycisk {
  padding-inline: 0;
}

/* Kreator: pozycje i dodatki (src/widoki/kreator-pozycje.js, kreator-dodatki.js; makiety kreator-pozycje, kreator-dodatki) */
.kreator-pozycje__zmienne,
.licznik-pozycji {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.kreator-pozycje__zmienne:empty {
  display: none;
}

.licznik-pozycji {
  gap: 4px;
}

.licznik-pozycji__cena,
.kreator-pozycje__notka {
  font-size: var(--tekst-maly);
  color: var(--tekst-drugi);
}

.licznik-pozycji__cena {
  padding-inline: 14px;
}

.wiersz-pozycji {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: var(--cel-dotyku);
  padding: 12px 0;
  border-bottom: 1px solid var(--linia-podzial);
}

.wiersz-pozycji:last-child {
  border-bottom: 0;
}

.wiersz-pozycji__tresc {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.wiersz-pozycji__przycisk {
  min-height: var(--cel-dotyku);
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.wiersz-pozycji__nazwa {
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}

span.wiersz-pozycji__nazwa {
  cursor: inherit;
}

.wiersz-pozycji__opis {
  font-size: var(--tekst-maly);
  color: var(--tekst-drugi);
}

.wiersz-pozycji__kwota {
  font-weight: 700;
  white-space: nowrap;
}

.wiersz-pozycji--wylaczona .wiersz-pozycji__nazwa,
.wiersz-pozycji--wylaczona .wiersz-pozycji__kwota {
  font-weight: 400;
  color: var(--tekst-drugi);
}

.grupa-dodatkow + .grupa-dodatkow {
  margin-top: 8px;
}

.grupa-dodatkow__tytul {
  padding-top: 4px;
  font-size: var(--tekst-maly);
  font-weight: 600;
  color: var(--tekst-drugi);
}

.karta-dojazdu {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wiersz-dojazdu {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linia-podzial);
}

.wiersz-dojazdu:last-child {
  border-bottom: 0;
}

.wiersz-dojazdu__kwota {
  font-weight: 700;
  white-space: nowrap;
}

.wiersz-dojazdu--koszt {
  color: var(--tekst-drugi);
}

/* Dobor chemii i katalog srodkow (src/widoki/dobor-chemii.js, katalog-chemii.js, karta-produktu.js; makieta dobor-chemii) */
.dobor-chemii__wstep,
.dobor-chemii__notka {
  font-size: var(--tekst-maly);
  color: var(--tekst-drugi);
}

.dobor-chemii__lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dobor-chemii__dezynfekcja {
  align-self: flex-start;
}

.karta-chemii {
  overflow: hidden;
  border: 1px solid var(--linia-podzial);
  border-radius: var(--promien-karta);
  background: var(--tlo-karta);
}

.karta-chemii__naglowek {
  padding: 12px 14px;
  border-bottom: 1px solid var(--linia-podzial);
  background: var(--tlo-miekkie);
}

.karta-chemii__tytul {
  font-size: 14.5px;
  font-weight: 700;
}

.karta-chemii__opis {
  font-size: var(--tekst-maly);
  color: var(--tekst-drugi);
}

.karta-chemii__wiecej {
  width: 100%;
  min-height: var(--cel-dotyku);
  padding: 10px 14px;
  border: 0;
  border-top: 1px solid var(--linia-podzial);
  background: none;
  color: var(--marka-zielen);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s;
}

.karta-chemii__wiecej:hover {
  background: var(--tlo-strona);
}

.produkt-chemii {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--linia-podzial);
}

.produkt-chemii:last-child {
  border-bottom: 0;
}

.produkt-chemii__gora,
.produkt-chemii__dol {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.produkt-chemii__dol {
  flex-wrap: wrap;
  margin-top: 2px;
}

.produkt-chemii__nazwa {
  font-size: 14.5px;
  font-weight: 700;
}

.produkt-chemii__dostawca {
  flex: none;
  padding: 3px 8px;
  border-radius: var(--promien-pigulka);
  background: var(--tlo-miekkie);
  color: var(--tekst-drugi);
  font-size: var(--tekst-drobny);
  font-weight: 600;
}

.produkt-chemii__przeznaczenie,
.produkt-chemii__opis,
.produkt-chemii__brak-karty {
  font-size: var(--tekst-maly);
  color: var(--tekst-drugi);
}

.produkt-chemii__cena {
  font-weight: 600;
}

.produkt-chemii__karta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-left: auto;
  text-align: right;
}

/* Cel dotyku 44 px bez powiekszania wiersza: pseudo-element rozszerza obszar klikniecia linku. */
.produkt-chemii__link {
  position: relative;
  color: var(--marka-zielen);
  font-weight: 700;
  text-decoration: none;
}

.produkt-chemii__link::after {
  content: '';
  position: absolute;
  inset: -13px -8px;
}

.produkt-chemii__link:hover {
  text-decoration: underline;
}

.produkt-chemii__data {
  font-size: var(--tekst-drobny);
  color: var(--tekst-drugi);
}

/* Podsumowanie wyceny (src/widoki/podsumowanie.js, podsumowanie-karty.js, makieta podsumowanie-wyceny) */
.podsumowanie__status {
  display: flex;
}

.podsumowanie__komunikat:empty,
.arkusz__komunikat:empty {
  display: none;
}

.podsumowanie__opis {
  font-size: var(--tekst-maly);
  color: var(--tekst-drugi);
}

.podsumowanie__notka {
  font-size: var(--tekst-maly);
  color: var(--tekst-drugi);
}

.podsumowanie__akcje {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.podsumowanie__usun {
  align-self: center;
  color: var(--blad-tekst);
}

.karta-ceny__gora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: -12px 0 -8px;
}

.karta-ceny__tytul {
  font-size: var(--tekst-podstawowy);
  font-weight: 400;
  color: var(--tekst-drugi);
}

.karta-ceny__gora .przycisk--tekstowy {
  font-size: var(--tekst-maly);
}

.karta-ceny__gora .przycisk--tekstowy .ikona {
  width: 16px;
  height: 16px;
}

.karta-ceny__kwota {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: 4px 0;
}

.karta-ceny__liczba {
  font-size: 32px;
  font-weight: 800;
  line-height: 1.1;
}

.zakreslacz {
  padding: 0 3px;
  background: linear-gradient(transparent 55%, var(--zakreslacz-mocny) 55%, var(--zakreslacz-mocny) 90%, transparent 90%);
}

.karta-ceny .pigulka {
  font-size: var(--tekst-maly);
}

.pigulka--rynek-w {
  background: var(--sukces-tlo);
  color: var(--sukces-tekst);
}

.pigulka--rynek-ponizej,
.pigulka--rynek-powyzej {
  background: var(--uwaga-tlo);
  color: var(--uwaga-tekst);
}

/* Pasek widelek rynku: polozenie elementow z wlasciwosci --pozycja (ustawianej w JS przez CSSOM, bez stylow inline) */
.wykres-rynku {
  position: relative;
  height: 62px;
}

.wykres-rynku__tor,
.wykres-rynku__zakres {
  position: absolute;
  top: 26px;
  height: 8px;
  border-radius: 4px;
}

.wykres-rynku__tor {
  left: 0;
  right: 0;
  background: var(--tlo-miekkie);
}

.wykres-rynku__zakres {
  left: var(--pozycja);
  right: calc(100% - var(--koniec));
  background: var(--marka-zielen-wykres);
}

.wykres-rynku__kreska {
  position: absolute;
  top: 18px;
  left: var(--pozycja);
  width: 2px;
  height: 24px;
  transform: translateX(-1px);
  background: var(--tekst-drugi);
}

.wykres-rynku__punkt {
  position: absolute;
  top: 20px;
  left: var(--pozycja);
  width: 20px;
  height: 20px;
  transform: translateX(-50%);
  border: 3px solid var(--tlo-karta);
  border-radius: 50%;
  background: var(--marka-zielen);
}

.wykres-rynku__mediana,
.wykres-rynku__cena {
  position: absolute;
  left: var(--pozycja);
  transform: translateX(-50%);
  font-size: var(--tekst-drobny);
  white-space: nowrap;
}

.wykres-rynku__mediana {
  top: 0;
  font-weight: 600;
  color: var(--tekst-drugi);
}

.wykres-rynku__cena {
  top: 43px;
  font-weight: 700;
  color: var(--marka-zielen-ciemna);
}

/* Podpis przy brzegu paska wyrownany do brzegu, zeby nie wychodzil poza karte */
.wykres-rynku__mediana[data-brzeg='lewy'],
.wykres-rynku__cena[data-brzeg='lewy'] {
  transform: translateX(-12px);
}

.wykres-rynku__mediana[data-brzeg='prawy'],
.wykres-rynku__cena[data-brzeg='prawy'] {
  transform: translateX(calc(-100% + 12px));
}

.karta-rynku__zakres {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 8px;
  margin-top: 6px;
  font-size: var(--tekst-drobny);
  color: var(--tekst-drugi);
}

.karta-rynku__niepelne {
  flex-basis: 100%;
}

.karta-zostaje {
  border-color: var(--sukces-tlo);
  background: var(--sukces-tlo);
  color: var(--sukces-tekst);
}

.karta-zostaje__tytul {
  font-size: var(--tekst-podstawowy);
  font-weight: 600;
}

.karta-zostaje__kwota {
  font-size: 27px;
  font-weight: 800;
  line-height: 1.15;
}

.karta-zostaje__opis {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 2px;
  font-size: var(--tekst-maly);
  font-weight: 500;
}

.karta-zostaje__opis .ikona {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
}

.karta-zostaje .podsumowanie__opis {
  color: var(--sukces-tekst);
}

.koszty {
  margin: 0;
}

.koszty__wiersz {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--linia-podzial);
  font-size: var(--tekst-podstawowy);
}

.koszty__wiersz:last-child {
  border-bottom: 0;
}

.koszty__wiersz dd {
  margin: 0;
  font-weight: 600;
  white-space: nowrap;
}

.koszty__wiersz--razem,
.koszty__wiersz--razem dd {
  font-weight: 700;
}

/* Zakonczenie zlecenia i lista „Plan a fakt” (src/widoki/zakonczenie.js, ustawienia-tempo.js, podsumowanie.js; makiety
   zakonczenie-zlecenia, ustawienia-firmy). Dlugosc paska z wlasciwosci --dlugosc ustawianej w JS przez CSSOM. */
.zakonczenie__statusy {
  display: flex;
  align-items: center;
  gap: 8px;
}

.zakonczenie__statusy .pigulka {
  padding: 4px 10px;
  font-size: var(--tekst-maly);
}

.zakonczenie__strzalka {
  width: 18px;
  height: 18px;
  color: var(--tekst-trzeci);
  transform: scaleX(-1);
}

.licznik-czasu .licznik__wartosc {
  font-size: 26px;
}

.licznik__jednostka {
  margin-right: 4px;
}

.zakonczenie__notka {
  margin-top: -4px;
  font-size: var(--tekst-maly);
  color: var(--tekst-drugi);
}

.zakonczenie__karty {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.zakonczenie__karty:empty {
  display: none;
}

.plan-fakt__wiersz {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  font-size: var(--tekst-podstawowy);
  color: var(--tekst-drugi);
}

.plan-fakt__wiersz .liczba {
  font-weight: 700;
  color: var(--tekst-glowny);
}

.plan-fakt__tor {
  height: 8px;
  margin-top: 4px;
}

.plan-fakt__pasek {
  width: var(--dlugosc, 100%);
  height: 100%;
  border-radius: 4px;
}

.plan-fakt__pasek--plan {
  background: var(--linia-obrys);
}

.plan-fakt__pasek--fakt {
  background: var(--marka-zielen);
}

.plan-fakt__pasek--dluzej {
  background: var(--uwaga-tekst);
}

.plan-fakt__zdanie {
  margin-top: 10px;
  font-size: var(--tekst-podstawowy);
  font-weight: 600;
  text-wrap: pretty;
}

.plan-fakt__zdanie--dluzej {
  color: var(--uwaga-tekst);
}

.plan-fakt-ustawienia {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--linia-podzial);
}

.plan-fakt-ustawienia__tytul {
  font-size: var(--tekst-podstawowy);
  font-weight: 700;
}

.plan-fakt-lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.plan-fakt-lista__wiersz {
  padding: 8px 0;
  border-bottom: 1px solid var(--linia-podzial);
  font-size: var(--tekst-maly);
  color: var(--tekst-drugi);
  text-wrap: pretty;
}

.plan-fakt-lista__wiersz:last-child {
  border-bottom: 0;
}

.karta--bez-odstepu > .plan-fakt-lista {
  padding: 0 14px 4px;
}

.licznik-czasu .licznik__wejscie {
  min-width: 1ch;
  text-align: right;
}

/* Szybka wycena (makieta szybka-wycena): pole „Usługa”, pola formularza, AGD, wiersz pytan i karta wyniku */
.szybka__pola {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.szybka__lazienki {
  display: contents;
}

.wybor-pola {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  min-height: 52px;
  padding: 8px 14px;
  border: 1px solid var(--tekst-trzeci);
  border-radius: var(--promien-przycisk);
  background: var(--tlo-karta);
  color: var(--tekst-glowny);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s;
}

.wybor-pola:hover {
  background: var(--tlo-strona);
}

.wybor-pola__etykieta {
  font-size: var(--tekst-maly);
  font-weight: 600;
  color: var(--tekst-drugi);
}

.wybor-pola__wartosc {
  font-size: 16px;
  font-weight: 600;
}

.szybka__notka {
  font-size: var(--tekst-maly);
  color: var(--tekst-drugi);
}

.szybka__dodatki {
  border: 1px solid var(--linia-podzial);
  border-radius: var(--promien-karta);
  background: var(--tlo-karta);
}

.szybka__dodatki-tytul {
  display: list-item;
  padding: 12px 14px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
}

.szybka__dodatki-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 10px 10px;
}

.wiersz-pytan {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: var(--cel-dotyku);
  padding: 8px 4px;
  border: 0;
  border-radius: var(--promien-przycisk);
  background: none;
  color: var(--marka-zielen);
  font-size: var(--tekst-podstawowy);
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s;
}

.wiersz-pytan:hover {
  background: var(--marka-zielen-tlo);
}

.wiersz-pytan .ikona {
  flex: none;
  width: 20px;
  height: 20px;
}

.wiersz-pytan__tekst {
  flex: 1;
  font-variant-numeric: tabular-nums;
}

.szybka__wynik {
  margin-top: 4px;
}

.karta-szybkiej {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.karta-szybkiej__etykieta {
  font-size: var(--tekst-maly);
  color: var(--tekst-drugi);
}

.karta-szybkiej__kwota {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.15;
  text-wrap: balance;
}

.karta-szybkiej__ogledziny {
  padding: 8px 12px;
  border-radius: var(--promien-przycisk);
  background: var(--uwaga-tlo);
  color: var(--uwaga-tekst);
  font-size: var(--tekst-maly);
  text-wrap: pretty;
}

.karta-szybkiej__pigulki {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.karta-szybkiej .pigulka {
  font-size: var(--tekst-maly);
  white-space: normal;
}

.pigulka--zostaje {
  background: var(--sukces-tlo);
  color: var(--sukces-tekst);
}

.karta-szybkiej__cytat {
  display: block;
  quotes: '„' '”';
  font-size: var(--tekst-maly);
  color: var(--tekst-drugi);
  text-wrap: pretty;
}

.karta-szybkiej__pusto {
  color: var(--tekst-drugi);
}

.karta-szybkiej__przyciski {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.karta-szybkiej__przyciski .przycisk {
  flex: 1 1 auto;
  white-space: nowrap;
}

/* Pytania do klienta (makieta pytania-do-klienta): lista pytan z odpowiedziami i skutkami, prosba o zdjecia, „Gotowe” */
.lista-pytan {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pytanie {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--linia-podzial);
}

.pytanie:last-child {
  border-bottom: 0;
}

.pytanie__tresc {
  font-size: var(--tekst-maly);
  color: var(--tekst-drugi);
  text-wrap: pretty;
}

.pytanie__odpowiedz {
  min-height: var(--cel-dotyku);
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--tekst-glowny);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

p.pytanie__odpowiedz {
  min-height: 0;
  cursor: auto;
}

.pytanie__dodaj {
  justify-content: flex-start;
  padding: 4px 0;
}

.pytanie__brak {
  color: var(--tekst-trzeci);
}

.pigulka--skutek {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
  background: var(--sukces-tlo);
  color: var(--sukces-tekst);
  font-size: var(--tekst-maly);
  white-space: normal;
}

.pigulka--skutek .ikona {
  flex: none;
  width: 14px;
  height: 14px;
}

.pytania__prosba {
  font-size: var(--tekst-maly);
  color: var(--tekst-drugi);
}

.pytania__stopka {
  position: sticky;
  bottom: 0;
  z-index: 10;
  display: flex;
  margin-top: auto;
  padding: 12px var(--odstep-ekranu) calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linia-podzial);
  background: var(--tlo-karta);
}

.pytania__stopka .przycisk {
  flex: 1;
}

/* Edycja oferty i sekcje oferty w ustawieniach (src/widoki/oferta-edycja.js, oferta-edycja-sekcje.js, edytor-listy.js,
   ustawienia-oferta.js; makiety oferta-edycja, ustawienia-firmy) */
.karta-oferty {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.karta-oferty > .karta__tytul,
.karta-oferty__gora .karta__tytul {
  margin-bottom: 0;
}

.karta-oferty__gora {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.karta-oferty__gora .przycisk--tekstowy {
  flex: none;
  min-height: var(--cel-dotyku);
  padding-block: 0;
  font-size: var(--tekst-podstawowy);
}

.karta-oferty__gora .przycisk--tekstowy .ikona {
  width: 16px;
  height: 16px;
}

.karta-oferty__firma {
  font-size: 15px;
  font-weight: 600;
}

.karta-oferty__kontakt,
.karta-oferty__pusto {
  font-size: var(--tekst-maly);
  color: var(--tekst-drugi);
}

.karta-oferty__podtytul {
  font-size: var(--tekst-maly);
  font-weight: 600;
  color: var(--tekst-drugi);
}

.karta-oferty__notka {
  font-size: var(--tekst-drobny);
  color: var(--tekst-trzeci);
  text-wrap: pretty;
}

.karta-oferty__przywroc:empty,
.karta-oferty__komunikat:empty {
  display: none;
}

.karta-oferty > .przycisk--tekstowy,
.karta-oferty__przywroc .przycisk--tekstowy {
  align-self: flex-start;
}

.karta-oferty .wiersz {
  padding-inline: 0;
  border-top: 1px solid var(--linia-podzial);
}

.karta-oferty .wiersz__tresc {
  flex: none;
}

.karta-oferty .wiersz__wartosc {
  flex: 1;
  font-weight: 700;
  text-align: right;
}

.lista-punktow,
.lista-dodatkow,
.edytor-listy__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lista-punktow {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lista-punktow__punkt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-wrap: pretty;
}

.lista-punktow__znak {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 1px;
}

.lista-punktow--w-cenie .lista-punktow__znak {
  color: var(--marka-zielen);
}

.lista-punktow--poza-cena {
  color: var(--tekst-drugi);
}

.lista-punktow--poza-cena .lista-punktow__znak,
.lista-punktow--warunek .lista-punktow__znak {
  color: var(--tekst-trzeci);
}

.lista-punktow__opis {
  display: block;
  font-size: var(--tekst-drobny);
  color: var(--tekst-trzeci);
}

.lista-dodatkow {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.lista-dodatkow__wiersz {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.lista-dodatkow__kwota {
  flex: none;
  font-weight: 700;
}

.edytor-listy {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.edytor-listy__etykieta {
  font-size: var(--tekst-maly);
  font-weight: 600;
  color: var(--tekst-drugi);
}

.edytor-listy__lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.edytor-listy__wiersz {
  display: flex;
  align-items: flex-start;
  gap: 4px;
}

.edytor-listy__pole {
  flex: 1;
  min-width: 0;
  min-height: var(--cel-dotyku);
  padding: 10px 12px;
  border: 1px solid var(--tekst-trzeci);
  border-radius: var(--promien-przycisk);
  background: var(--tlo-karta);
  font: inherit;
  font-size: 16px;
  resize: vertical;
  field-sizing: content;
}

.edytor-listy__przyciski {
  display: flex;
  flex: none;
}

.edytor-listy__przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: var(--cel-dotyku);
  border: 0;
  border-radius: var(--promien-przycisk);
  background: none;
  color: var(--tekst-drugi);
  cursor: pointer;
  transition: background-color 0.15s;
}

.edytor-listy__przycisk:hover:not(:disabled) {
  background: var(--tlo-strona);
}

.edytor-listy__przycisk:disabled {
  color: var(--linia-obrys);
  cursor: not-allowed;
}

.edytor-listy__przycisk .ikona {
  width: 18px;
  height: 18px;
}

.edytor-listy__dodaj {
  align-self: flex-start;
  font-size: var(--tekst-podstawowy);
}

.oferta-edycja__banery,
.oferta-edycja__komunikat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.oferta-edycja__banery:empty,
.oferta-edycja__komunikat:empty {
  display: none;
}

.oferta-edycja__link {
  font-size: var(--tekst-maly);
  color: var(--tekst-drugi);
  overflow-wrap: anywhere;
}

.oferta-edycja__stopka .przycisk:first-child {
  flex: 0 0 32%;
}

.oferta-edycja__stopka .przycisk[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
}

.ustawienia-oferta__edytory {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Dlugie nazwy uslug: nazwa sie zawija, a stan zakresu („domyślny”, „zmieniony”) zostaje w calosci przy strzalce. */
.karta-zakresow .wiersz__tresc {
  flex: 1;
  min-width: 0;
}

.karta-zakresow .wiersz__wartosc {
  flex: none;
}