/* === KINKIECIK KX-ZAMOWIENIE 2026-10-29 START ===
   Wyniesione z kx-css-podstrony.dat (rozdzielenie na osobne pliki jak na lafabryka).
   Zakres: ZAMOWIENIE (etap 2 i 3) - sekcje 13 i 14: /zamowienie-logowanie.html?zakup oraz /zamowienie-podsumowanie.html.
=== KINKIECIK KX-ZAMOWIENIE END === */

/* --- 13. ETAP 2 (Dane i dostawa): /zamowienie-logowanie.html?zakup ---
   Marcin 29.10: "etap koszyka numer dwa trzeba zrobic spojny z calym koszykiem".
   Ten dokument NIE ma tabeli .Koszyk, wiec .StrTresc zostaje display:block
   (sekcja 2 celowo warunkowa: .StrTresc:has(> .Koszyk)) - nic tu nie gridujemy.
   Kazdy ponizszy selektor trzyma ID #TrescKoszyka, bo ten sam arkusz siedzi
   JESZCZE jako inline <style> w <head> (WYGLAD_DODATKOWY_CSS) LADOWANY PO .dat:
   przy rownej specyficznosci wygrywalby inline, wiec bijemy waga, nie kolejnoscia.

   ZMIERZONE 29.10 na /zamowienie-logowanie.html?zakup (1920 px):
   - 11x h3 = "color: var(--kolor-szablonu)" z .Ramka strong, .Ramka h3
     (cache/Cache_CssSzablonPodstrony.css) -> 17.6px/700, bez ramki.
   - niebieskie pola (rgb(4,131,211)) TYLKO 4: h3, a.przycisk x3 ("Zmien dane"
     x2 + "Wroc do koszyka"), input#submitButtonCheckout.przyciskZamow.
   - przycisk glowny: 709x69 px, font 28.8/800, radius 999 - duzo wiekszy niz
     CTA na etapie 1 (52 px / 18 px), wiec scinamy do tej samej pary.
   - kontrolki NIE sa natywne: input[type=radio|checkbox] ma position:absolute
     + opacity:0, a klient widzi span.radio / span.check (20x20) malowane
     .cmxform label input:checked ~ span {background-color: var(--kolor-tlo-radio-zaznaczony)}.
     Dlatego accent-color (sekcja 10d) tu NIE DZIALA - trzeba trafic w tlo skorke.
   - pola: input/select/textarea 689x42, border 1px rgb(219,219,219), radius 0.
   - kolumny: .ZakupDane i .ZamowieniePozostale (obie 759 px, .Ramka, tlo
     przezroczyste) w flexie .PodzialZakupRejestracja.
   - .error (display:none dopoki walidacja nie krzyknie) = #fff3f3 na #e4401c. */

/* kafel zamiast nagiej kolumny - ta sama elewacja co .KontenerDostawaPlatnosc
   z etapu 1 (sekcja 6), zeby "Twoje dane" i "Zgody formalne" wygladaly jak
   krewniak "Dostawa" i "Platnosc" z koszyka.
   box-sizing:border-box NIE JEST kosmetyka: szablon liczy obie kolumny jako
   50% z .PodzialZakupRejestracja = 1518 px, wiec kazda ma 759 px. Bez
   border-box dojscie 1 px ramki = 761 px x2 = 1522 px > 1518 px i flex-wrap
   zrzucal druga kolone pod pierwsza (Marcin 29.10: "dwa kontenery byly obok
   siebie sa jeden po drugim to mocno wydluza strone"). */
html body #TrescKoszyka .PodzialZakupRejestracja > .Ramka {
  box-sizing: border-box;
  background: var(--kkc-grad-pole);
  border: 1px solid var(--kkc-kreska-zloto);
  border-radius: var(--kkc-radius-karta);
  box-shadow: var(--kkc-cien-blok);
}

/* naglowki sekcji: zloto ciemne + kreska pod tytulami (wzor: sekcja 3 glowka
   tabeli). .Ramka h3 to (0,1,1), nasze (1,1,3) - bez !important wystarczy. */
html body #TrescKoszyka .StrTresc h3 {
  color: var(--kkc-warm-dark);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--kkc-kreska-zloto);
}

/* pola: krepa kreska + radius + cieply obrys skupienia. Wyliczenie typow jest
   zamierzone zamiast golego "input": submit/radio/checkbox ukryty maja inne
   zasady, a .cmxform input (szablon) nadaje im kolor tekstu, ktorego nie ruszamy. */
html body #TrescKoszyka .cmxform input[type=text],
html body #TrescKoszyka .cmxform input[type=tel],
html body #TrescKoszyka .cmxform input[type=email],
html body #TrescKoszyka .cmxform input[type=number],
html body #TrescKoszyka .cmxform select,
html body #TrescKoszyka .cmxform textarea {
  background-color: #fff;
  border: 1px solid var(--kkc-line);
  border-radius: var(--kkc-radius-mini);
}

html body #TrescKoszyka .cmxform input[type=text]:focus,
html body #TrescKoszyka .cmxform input[type=tel]:focus,
html body #TrescKoszyka .cmxform input[type=email]:focus,
html body #TrescKoszyka .cmxform input[type=number]:focus,
html body #TrescKoszyka .cmxform select:focus,
html body #TrescKoszyka .cmxform textarea:focus {
  border-color: var(--kkc-warm);
  box-shadow: 0 0 0 3px var(--kkc-liniowy-zloto);
  outline: none;
}

/* skorki radio/check: zaznaczone na zloto (kontra z bialym ptaszkiem 3,5:1),
   niezaznaczone tylko cieplejsza kreska - szerokosci ramki NIE zmieniamy, bo
   20x20 + border-box liczby sobie same, a przesuniecie zgubilo by ptaszek */
html body #TrescKoszyka .cmxform label span.radio,
html body #TrescKoszyka .cmxform label span.check {
  border-color: var(--kkc-line);
}

html body #TrescKoszyka .cmxform label input:checked ~ span.radio,
html body #TrescKoszyka .cmxform label input:checked ~ span.check {
  background-color: var(--kkc-warm-dark) !important;
}

/* wiersz "Zaznacz wszystkie zgody" - oddzielamy od listy zgod, zeby glowny
   selektor nie ginat wsrod szesciu pojedynczych */
html body #TrescKoszyka .ZaznaczWszystkieZgody {
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px dashed var(--kkc-kreska-zloto);
  font-weight: 700;
}

/* boxy "Forma dostawy" / "Forma platnosci" z etapu 2: to zdjecie wyboru
   z etapu 1, wiec ta sama kremowa elewacja co pasek "Wartosc:" (sekcja 10c) */
html body #TrescKoszyka .InformacjeWysylka,
html body #TrescKoszyka .InformacjePlatnosc {
  box-sizing: border-box;
  background: var(--kkc-champagne);
  border: 1px solid var(--kkc-kreska-zloto);
  border-radius: var(--kkc-radius-mini);
}

/* przyciski poboczne: "Zmien dane" x2 i "Wroc do koszyka" -> outline, nie
   pelne niebieskie pole. Bijemy panelowy "RESTORE BLUE ACCENTS"
   (html body #TrescKoszyka .przycisk, (1,1,2), !important) przez (1,2,3)+ID. */
html body #TrescKoszyka .InformacjeWysylka a.przycisk,
html body #TrescKoszyka .InformacjePlatnosc a.przycisk,
html body #TrescKoszyka .PodzialZakupPrzyciski a.przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  background-image: none !important;
  background-color: transparent !important;
  border: 1px solid var(--kkc-kreska-zloto-mocna) !important;
  border-radius: var(--kkc-radius-mini) !important;
  color: var(--kkc-warm-dark) !important;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

html body #TrescKoszyka .InformacjeWysylka a.przycisk:hover,
html body #TrescKoszyka .InformacjePlatnosc a.przycisk:hover,
html body #TrescKoszyka .PodzialZakupPrzyciski a.przycisk:hover {
  background-color: var(--kkc-champagne) !important;
}

/* glowny "Zamawiam i place": identyczna elewacja jak CTA etapu 1 (sekcja 9),
   zeby klient przechodziac 1 -> 2 widzial ten sam przycisk, tylko wiekszy tekst.
   ID w selektorze = (2,0,2), wiecej niz potrzeba na trzy kopie niebieskiej reguly. */
html body #TrescKoszyka #submitButtonCheckout,
html body #TrescKoszyka .cmxform input.przyciskZamow {
  box-sizing: border-box;
  max-width: 100%;
  min-height: 56px;
  padding: 0 20px;
  background-image: var(--kkc-cta) !important;
  background-color: var(--kkc-warm) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: var(--kkc-cien-cta);
  color: var(--kkc-ink) !important;
  font-size: 18px;
  font-weight: 700;
  transition: background-image .2s ease-in-out;
}

html body #TrescKoszyka #submitButtonCheckout:hover,
html body #TrescKoszyka .cmxform input.przyciskZamow:hover {
  background-image: var(--kkc-cta-hover) !important;
}

/* stan "disabled" jest w szablonie (zamowienie_logowanie.tp linia 1021) i zdjmuje
   go dopiero JS po zaznaczeniu zg6d - bez tego wiersza klient widzi pelny,
   klikalny przycisk, ktory nic nie robi. Wiec: wyciszony + kursor, nie znikniety. */
html body #TrescKoszyka #submitButtonCheckout[disabled],
html body #TrescKoszyka .cmxform input.przyciskZamow[disabled] {
  background-image: none !important;
  background-color: var(--kkc-soft) !important;
  border: 1px dashed var(--kkc-kreska-zloto-mocna) !important;
  box-shadow: none;
  color: var(--kkc-muted) !important;
  cursor: not-allowed;
}

/* komunikat walidacji: zostaje sygnal bledu, ale w cieplej oprawie */
html body #TrescKoszyka .error {
  background: #fff6ef;
  border-left: 4px solid #e4401c;
  border-radius: var(--kkc-radius-mini);
  padding: 10px 12px;
}

/* --- 14. ETAP 3 (Podsumowanie / Platnosc): /zamowienie-podsumowanie.html ---
   Szablon zamowienie_podsumowanie.tp (5 273 B, sciagniety 29.10) to cala
   struktura tego ekranu: .Informacja.Podziekowanie, dwa .PlatnoscInfo,
   {__ZEGAR_ODLICZANIE}, .KontenerSzczegoly > ul#podsumowanieZamowienia
   (6-8 wierszy <strong>pytanie</strong><span>odpowiedz</span>) i
   a.przycisk.Prawy "Przejdz do strony glownej". Ladrowek i kafel "zaloz konto"
   doklada kx-koszyk-sciezka.js (sekcja 11).
   UWAGA: ekranu NIE da sie zmierzyc na zywo bez lozenia zamowienia - silnik
   robi 302 na /koszyk.html (zmierzone 29.10). Reguly sa pisane z szablonu. */
html body #TrescKoszyka .Podziekowanie {
  margin: 0 0 16px;
  padding: 18px 20px;
  background: var(--kkc-grad-pole);
  border: 1px solid var(--kkc-kreska-zloto);
  border-left: 5px solid var(--kkc-warm);
  border-radius: var(--kkc-radius-karta);
  box-shadow: var(--kkc-cien-blok);
  color: var(--kkc-ink);
  font-size: 18px;
  font-weight: 700;
}

html body #TrescKoszyka .PlatnoscInfo {
  margin: 0 0 12px;
  padding: 12px 14px;
  background: var(--kkc-soft);
  border: 1px solid var(--kkc-line);
  border-radius: var(--kkc-radius-mini);
  color: var(--kkc-ink);
  font-size: 14px;
}

/* {__PLATNOSC_INFORMACJA} bywa pusty - zostawal kremowy pas bez tekstu
   (zrzut kk_e3_podziekowanie.png). :empty chwyta tylko calkiem pusty DIV. */
html body #TrescKoszyka .PlatnoscInfo:empty { display: none; }

/* "Place" (bramka Platnosc w {__PLATNOSC_ELEKTRONICZNA}).
   ZMIERZONE NA ZYWO 29.10 na zam. 34572 (/zamowienie-podsumowanie.html):
   kotwica ma klase "przyciskZaplac" (href = paywall.paynow.pl/PZRN-...), a NIE
   "przycisk" - wiec pierwszy szkic tej reguly (a.przycisk) jej nie trafial i
   przyciskostal sie niebieski. Wygrywajaca regula szablonu to
   "html body .DoKoszyka, ..., html body .przyciskZaplac, ... #TrescKoszyka .przycisk
    { background-color: var(--kolor-szablonu) !important }" = (0,1,2)+!important.
   Stad a[class*="przycisk"]: lapie przyciskZaplac, przyciskZamow, przycisk i
   kazda przyszla klase modulu platnosci bez poprawiania CSS przy migracji sklepu.
   (1,2,3)+!important bije (0,1,2)+!important. */
html body #TrescKoszyka .PlatnoscInfo a[class*="przycisk"],
html body #TrescKoszyka .PlatnoscInfo input[type=submit],
html body #TrescKoszyka .PlatnoscInfo button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 48px;
  margin-top: 8px;
  padding: 0 26px;
  background-image: var(--kkc-cta) !important;
  background-color: var(--kkc-warm) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: var(--kkc-cien-cta);
  color: var(--kkc-ink) !important;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
}

html body #TrescKoszyka .PlatnoscInfo a.przycisk:hover,
html body #TrescKoszyka .PlatnoscInfo input[type=submit]:hover,
html body #TrescKoszyka .PlatnoscInfo button:hover {
  background-image: var(--kkc-cta-hover) !important;
}

html body #TrescKoszyka .Odliczanie {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 14px;
  background: var(--kkc-champagne);
  border: 1px solid var(--kkc-kreska-zloto);
  border-radius: var(--kkc-radius-mini);
  color: var(--kkc-warm-dark);
  font-weight: 700;
}

html body #TrescKoszyka .KontenerSzczegoly {
  padding: 4px 16px 14px;
  background: #fff;
  border: 1px solid var(--kkc-kreska-zloto);
  border-radius: var(--kkc-radius-karta);
  box-shadow: var(--kkc-cien-blok);
}

/* wiersze "Twoj adres e-mail / Numer zamowienia / Wartosc / Data / Status /
   Forma platnosci / Forma dostawy" jako tabela 1:1 - etykieta po lewej,
   wartosc po prawej, naprzemienne tlo zamiast sciany bialego tekstu.
   SZTYWNA SIATKA, nie flex: w zamowienie_podsumowanie.tp kazdy li to
   <strong>etykieta:</strong><span>wartosc</span>, a mimo to na zywo (zrzut
   kk_e3_podziekowanie.png, zam. 34571) wartosc wychodzila LEWO a etykieta
   PRAWO - czyli panelowy arkusz sam decyduje o ukladzie wewnatrz li. Flex
   dziedziczy te manewry (float/order/kolejnosc), grid z jawnym grid-column
   nie ma czego odziedziczyc: silnik nie jest w stanie zamienic kolumn.
   display:grid + !important, bo panelowy "li { display:...!important }"
   (1,0,3) bije nasza zwykla regule; z dwoma ID (2,0,4) wygrywamy. */
html body #TrescKoszyka #podsumowanieZamowienia {
  margin: 0;
  padding: 0;
  list-style: none;
}

html body #TrescKoszyka #podsumowanieZamowienia li {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 16px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--kkc-line);
}

html body #TrescKoszyka #podsumowanieZamowienia li:nth-child(odd) {
  background: var(--kkc-champagne);
}

html body #TrescKoszyka #podsumowanieZamowienia li:last-child { border-bottom: 0; }

html body #TrescKoszyka #podsumowanieZamowienia li strong {
  grid-column: 1;
  grid-row: 1;
  color: var(--kkc-muted);
  font-size: 13px;
  font-weight: 400;
  text-align: left;
}

html body #TrescKoszyka #podsumowanieZamowienia li span {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
  color: var(--kkc-ink);
  font-size: 15px;
  font-weight: 700;
  text-align: right;
}

html body #TrescKoszyka #podsumowanieZamowienia .wartosc_zamowienia {
  color: var(--kkc-warm-dark);
  font-size: 17px;
}

/* "Przejdz do strony glownej" - a.przycisk.Prawy; panelowy .przycisk jest
   (1,1,2)+!important, wiec ID + dwie klasy + element */
html body #TrescKoszyka a.przycisk.Prawy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 14px;
  padding: 0 22px;
  background-image: var(--kkc-cta) !important;
  background-color: var(--kkc-warm) !important;
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow: var(--kkc-cien-cta);
  color: var(--kkc-ink) !important;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
}