/* Tor zamówienia - dodatki do styl.css (ekrany zamówienia, raportu luk, błędów i tekstów prawnych). */

.nw{white-space:nowrap}
.krok-licznik{font:500 13px/1.3 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--atrament-2); white-space:nowrap}
.tor-strona{min-height:100svh; display:flex; flex-direction:column}
.tor-strona > main{flex:1}
/* ścieżka „Mam starą politykę”: dwa kroki przed zamówieniem, potem te same cztery co w drugiej ścieżce */
.kroki.kroki-2{grid-template-columns:repeat(2, minmax(0,1fr))}
/* strona bez przyklejonych przycisków nie może dotykać stopki */
@media (max-width:1023px){ .tor-uklad:not(:has(.akcje)){padding-bottom:48px} }

/* pytanie */
.postep{display:grid; gap:10px}
.postep-glowa{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.opcje legend{display:block; width:100%; padding:0; margin-bottom:6px}
.pytanie{font:600 clamp(28px, 1.2vw + 22px, 38px)/1.12 var(--f-szeryf); font-variation-settings:"opsz" 48; letter-spacing:-.01em; text-wrap:balance}
.pytanie-maly{font:600 var(--t-h3)/1.25 var(--f-szeryf)}
.pomoc{display:grid; gap:4px; padding:14px 16px; border-left:4px solid var(--zakreslacz); border-radius:0 var(--r-2) var(--r-2) 0; background:var(--karta); font-size:var(--t-maly); line-height:1.5; color:var(--atrament-2)}
.pomoc .kicker{color:var(--atrament)}
.pomoc cite{font:normal 500 14px/1.3 var(--f-mono); white-space:nowrap}
.opcja-opis.mono{font:500 16px/1.4 var(--f-mono); letter-spacing:.06em; color:var(--atrament)}
/* zapis z rejestru (maska) zawsze w kroju mono: długość członów widać wtedy na oko */
span.mono{font-family:var(--f-mono); letter-spacing:.04em}

/* pole: zgodne i błąd (błąd ma bursztyn jak odmowa; cynober zostaje dla luk i pieczątki) */
.pole-wejscie[aria-invalid="true"]{border:2px solid var(--bursztyn); padding:11.5px 13.5px}
.pole-blad, .pole-ok{display:grid; grid-template-columns:24px minmax(0,1fr); gap:10px; align-items:start; font-size:var(--t-maly); font-weight:500; line-height:1.45}
.pole-blad{color:var(--bursztyn)}
.pole-ok{color:var(--zielen)}
.pole-blad::before, .pole-ok::before{display:grid; place-items:center; width:24px; height:24px; border-radius:50%}
.pole-blad::before{content:"!"; background:var(--bursztyn-jasny); font:700 15px/1 var(--f-szeryf)}
.pole-ok::before{content:"\2713"; background:var(--zielen-jasna); font:700 14px/1 var(--f-bez)}
.pole-blad strong, .pole-ok strong{font-weight:700}

/* zapis z rejestru obok wpisu: maska KRS (pierwsza litera i gwiazdki w długości słowa) */
.maska{display:grid; gap:10px; padding:14px 16px; border:1.5px solid var(--bursztyn); border-radius:var(--r-2); background:var(--karta)}
.maska div{display:grid; gap:2px}
.maska dt{font:500 12.5px/1.3 var(--f-mono); letter-spacing:.05em; text-transform:uppercase; color:var(--atrament-2)}
.maska dd{font:500 19px/1.35 var(--f-mono); letter-spacing:.06em; white-space:pre}
.maska-zle{border-radius:2px; background:var(--bursztyn-jasny); color:var(--bursztyn); box-shadow:0 2px 0 var(--bursztyn)}

/* bok */
.bok-tekst{display:grid; gap:8px; width:100%}
.bok-tytul{font:600 19px/1.3 var(--f-szeryf)}
.odpowiedz-powod{color:var(--cynober-ciemny)}
.odpowiedz-powod::before{content:"\25CF\00a0"; font-size:.8em}

/* odmowa */
.odmowa-znak{display:grid; place-items:center; width:56px; height:56px; border-radius:50%; background:var(--bursztyn-jasny); color:var(--bursztyn); font:700 28px/1 var(--f-szeryf)}
.formy{display:grid; column-gap:24px; border-top:2px solid var(--atrament)}
.formy li{padding:9px 0; border-bottom:1px solid var(--linia); font-size:var(--t-maly); line-height:1.4}
@media (min-width:480px){ .formy{grid-template-columns:repeat(2, minmax(0,1fr))} }

/* rejestr nie odpowiada */
.awaria{display:grid; gap:8px; padding:18px 20px; border:2px solid var(--bursztyn); border-radius:var(--r-3); background:var(--bursztyn-jasny); color:var(--atrament)}
.awaria .h3{color:var(--atrament)}
.awaria p:not(.h3){font-size:var(--t-maly); line-height:1.5}

/* wgranie starej polityki: cała ramka jest celem (input pod spodem, niewidoczny, ale z fokusem) */
.wgraj{position:relative; display:grid; justify-items:center; gap:14px; padding:30px 20px 26px; border:2px dashed var(--linia-mocna); border-radius:var(--r-3); background:var(--karta); text-align:center; cursor:pointer; transition:border-color .15s, background-color .15s}
.wgraj:hover{border-color:var(--atrament); background:var(--zakreslacz-tlo)}
.wgraj:has(input:focus-visible){outline:3px solid var(--atrament); outline-offset:3px; border-color:var(--atrament)}
.wgraj input{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer}
.wgraj-formaty{display:flex; flex-wrap:wrap; justify-content:center; gap:8px}
.wgraj-formaty span{padding:5px 8px; border-radius:4px; background:var(--atrament); color:var(--karta); font:700 13px/1 var(--f-mono); letter-spacing:.06em}
.wgraj-formaty span:first-child{background:var(--cynober)}
.wgraj-tytul{font:600 24px/1.2 var(--f-szeryf); font-variation-settings:"opsz" 30; text-wrap:balance}
.wgraj .btn{pointer-events:none}
.wgraj-pomoc{font:500 14px/1.4 var(--f-mono); color:var(--atrament-2)}

/* plan: kroki z datami jako małe kartki z kalendarza na osi; okresy z ustawy idą wzdłuż osi
   w kolorach ze strony produktu: 30 dni uzgodnień zielone, 2 tygodnie do wejścia w życie żółte */
.plan{--plan-tlo:var(--papier); position:relative; display:grid}
.plan::before{content:""; position:absolute; left:25px; top:14px; bottom:14px; width:2px; background:var(--linia)}
.plan > li{position:relative; display:grid; grid-template-columns:52px minmax(0,1fr); column-gap:14px; align-items:start}
.plan-krok{padding:9px 0}
.plan-data{position:relative; z-index:1; display:grid; justify-items:center; width:52px; padding:11px 0 7px; border-radius:6px 6px 4px 4px; background:var(--karta); box-shadow:inset 0 5px 0 var(--cynober), var(--cien-1); text-align:center}
.plan-dzien{position:relative; isolation:isolate; font:600 24px/1 var(--f-szeryf); font-variation-settings:"opsz" 36}
.plan-mies{margin-top:4px; font:600 11.5px/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--cynober)}
.plan-tresc{position:relative; z-index:1; display:grid; gap:3px; align-content:start; min-width:0; padding-top:5px}
.plan-co{font-weight:600; line-height:1.35; text-wrap:pretty}
.plan-opis{font-size:var(--t-maly); line-height:1.45; color:var(--atrament-2)}
.plan > li.okres::after{content:""; position:absolute; left:22px; top:0; bottom:0; width:8px; background:var(--okres)}
.plan > li.okres.od::after{top:38px; border-radius:4px 4px 0 0}
.plan > li.okres.do::after{bottom:auto; height:38px; border-radius:0 0 4px 4px}
.plan .okres-30{--okres:var(--zielen)}
.plan .okres-14{--okres:var(--zakreslacz)}
.plan > li.okres-14::after{box-shadow:inset 1.5px 0 0 var(--atrament), inset -1.5px 0 0 var(--atrament)}
.plan-cel .plan-dzien::before{content:""; position:absolute; z-index:-1; inset:52% -7px 0 -7px; border-radius:2px 6px 3px 8px; background:var(--zakreslacz); transform:rotate(-4deg) skewX(-10deg)}
.plan-cel .plan-co{font:600 19px/1.3 var(--f-szeryf)}
.plan > li.plan-termin{align-items:center; min-height:44px}
.plan-termin::before{content:""; position:absolute; left:0; right:0; top:50%; border-top:2px dashed var(--linia-mocna)}
.plan-termin span{grid-column:2; justify-self:start; position:relative; z-index:1; padding-right:10px; background:var(--plan-tlo); font:600 13px/1.3 var(--f-mono); letter-spacing:.06em; text-transform:uppercase}
.plan-po .plan-data{box-shadow:inset 0 5px 0 var(--bursztyn), var(--cien-1)}
.plan-po .plan-mies{color:var(--bursztyn)}
.plan-po.plan-cel .plan-dzien::before{content:none}
.plan-pliki{display:grid; margin-top:8px; border-top:1px solid var(--linia)}
.plan-plik{display:grid; gap:8px; padding:10px 0; border-bottom:1px solid var(--linia)}
.plan-plik-nazwa{min-width:0; font:500 17px/1.3 var(--f-szeryf); font-variation-settings:"opsz" 24}
.plan-plik-nazwa small{display:block; font:400 14px/1.4 var(--f-bez); color:var(--atrament-2)}
@media (min-width:640px){ .plan-plik{grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:16px} }

/* przepisy pod treścią toru: dosłowne cytaty, najmniejszym stopniem */
.przypisy{display:grid; gap:8px; padding-top:14px; border-top:1px solid var(--linia); font-size:14px; line-height:1.45; color:var(--atrament-2)}
.przypisy b{font:600 13px/1.3 var(--f-mono); color:var(--atrament)}

/* płatność */
.faktura-na{display:grid; gap:4px}
.faktura-na strong{font-weight:600}
.zgody{display:grid; gap:2px}
.operator{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:var(--t-maly); color:var(--atrament-2)}
.paragon-kwota .do-uzupelnienia{font:500 14px/1.3 var(--f-mono)}

/* gotowe */
.gotowe-glowa{display:flex; align-items:center; gap:22px}
.gotowe-glowa .pieczatka{flex:none; transform:rotate(-7deg)}
.znaczki{display:flex; flex-wrap:wrap; gap:8px}
.zapisz{border:2px solid var(--atrament); background:var(--zakreslacz-tlo)}
.zapisz .pole-wejscie{font-size:16px}
.nastepny{display:grid; gap:8px; padding:20px; border-radius:var(--r-3); background:var(--zielen); color:var(--papier)}
.nastepny .kicker, .nastepny .maly{color:var(--zielen-tekst)}
.nastepny .h3{color:var(--papier)}
.sekcja-mala{display:grid; gap:12px}
.faktura{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 16px; padding:14px 16px; border:1.5px dashed var(--linia-mocna); border-radius:var(--r-2)}
.faktura p{display:grid; gap:2px}
.faktura small{font-size:14px; color:var(--atrament-2)}

/* raport luk */
span.ref{min-height:0}
span.ref::after{content:none}
.oferta{border:2px solid var(--atrament); box-shadow:0 4px 0 var(--atrament)}
.cena-mala{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; font:500 17px/1.3 var(--f-mono)}
.cena-mala strong{font:600 28px/1 var(--f-szeryf)}

/* szukaj firmy po NIP albo po numerze KRS: firma bez rejestracji VAT (część fundacji i stowarzyszeń) nie jest
   na Białej liście, więc NIP jej nie znajdzie. Przełącznik to dwa pola wyboru, działa bez skryptu */
.szukaj{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:4px; width:100%; max-width:360px; min-width:0; margin:0; padding:4px; border:0; border-radius:12px; background:var(--papier-2)}
.szukaj label{position:relative; display:grid; place-items:center; min-height:44px; padding:0 12px; border-radius:8px; color:var(--atrament-2); font:600 16px/1.2 var(--f-bez); text-align:center; cursor:pointer; transition:background-color .15s, box-shadow .15s, color .15s}
.szukaj label:hover{color:var(--atrament)}
.szukaj label:has(input:checked){background:var(--karta); color:var(--atrament); box-shadow:0 0 0 1.5px var(--atrament), 0 2px 0 var(--atrament)}
.szukaj label:has(input:focus-visible){outline:3px solid var(--atrament); outline-offset:3px}
.szukaj input{position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer}
/* pole, którego rejestr nie podaje (forma prawna firmy znalezionej tylko na Białej liście) */
.brak-danych{display:inline-flex; align-items:center; padding:1px 8px; border:1.5px dashed var(--bursztyn); border-radius:4px; color:var(--bursztyn); font:500 14px/1.4 var(--f-mono)}

/* kontrola przed wydaniem: te same cztery kroki przy przygotowaniu, wstrzymaniu i błędzie, na osi jak plan;
   pod nimi pieczątka: przerywana, póki trwa kontrola, bursztynowa, gdy wydanie stoi, pełna dopiero przy gotowych */
.bramka{position:relative; display:grid}
.bramka::before{content:""; position:absolute; left:13px; top:22px; bottom:22px; width:2px; background:var(--linia)}
.bramka li{position:relative; display:grid; grid-template-columns:28px minmax(0,1fr); column-gap:14px; align-items:start; padding:8px 0}
.bramka li::before{content:""; position:relative; z-index:1; grid-row:1 / span 2; display:grid; place-items:center; width:28px; height:28px; border:2px solid var(--linia-mocna); border-radius:50%; background:var(--papier); font:700 14px/1 var(--f-bez)}
.bramka-co{padding-top:3px; color:var(--atrament-2); font-weight:500; line-height:1.35}
.bramka-opis{grid-column:2; font:600 13px/1.3 var(--f-mono); letter-spacing:.06em; text-transform:uppercase}
.bramka .zrobione::before{content:"\2713"; border-color:var(--zielen); background:var(--zielen); color:var(--papier)}
.bramka .zrobione .bramka-co, .bramka .teraz .bramka-co{color:var(--atrament); font-weight:600}
.bramka .teraz::before{border-color:var(--zielen-jasna); border-top-color:var(--zielen); border-right-color:var(--zielen)}
.bramka .stop::before{content:"!"; border-color:var(--bursztyn); background:var(--bursztyn-jasny); color:var(--bursztyn); font:700 15px/1 var(--f-szeryf)}
.bramka .stop .bramka-co, .bramka .stop .bramka-opis{color:var(--bursztyn); font-weight:600}
@media (prefers-reduced-motion:no-preference){ .bramka .teraz::before{animation:obrot 1.1s linear infinite} }
@keyframes obrot{to{transform:rotate(360deg)}}
.bramka + .pieczatka{justify-self:start; margin:6px 0 4px}
.pieczatka-czeka, .pieczatka-stop{border-style:dashed; box-shadow:none}
.pieczatka-czeka{border-color:var(--linia-mocna); background:transparent; color:var(--atrament-2)}
.pieczatka-stop{border-color:var(--bursztyn); background:var(--bursztyn-jasny); color:var(--bursztyn)}

/* brak strony: tak wygląda pełny adres zamówienia (jak w polu z adresem), z długością części po /z/ */
.adres-wzor{display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; min-height:52px; margin:0; padding:10px 14px; border:1.5px solid var(--linia-mocna); border-radius:8px; background:var(--karta); font:500 17px/1.3 var(--f-mono)}
.adres-wzor mark{padding:4px 10px; border-radius:4px; background:var(--zakreslacz); color:var(--atrament); font:600 14px/1.2 var(--f-mono); letter-spacing:.04em}

/* tekst prawny (regulamin sprzedaży, polityka prywatności): kolumna toru, ok. 65 znaków w wierszu; paragrafy
   numeruje styl, więc HTML z Markdownu serwisu nie musi ich znać; spis treści w boku od 1024 px */
.dokument{display:grid; gap:14px; min-width:0; counter-reset:par}
.dokument h1{font:600 clamp(30px, 1.2vw + 24px, 44px)/1.06 var(--f-szeryf); font-variation-settings:"opsz" 60; letter-spacing:-.01em; text-wrap:balance}
.dokument p, .dokument li{max-width:64ch; line-height:1.65}
.dokument strong{font-weight:600}
.dokument .dokument-stan{max-width:none; margin-bottom:10px; padding:12px 14px; border:1.5px dashed var(--linia-mocna); border-radius:var(--r-2); background:var(--karta); font-size:var(--t-maly); line-height:1.5; color:var(--atrament-2)}
.dokument-stan strong{color:var(--atrament)}
.dokument h2{position:relative; display:grid; gap:6px; margin-top:20px; padding-top:22px; border-top:1px solid var(--linia); font:600 var(--t-h3)/1.2 var(--f-szeryf); text-wrap:balance; counter-increment:par; scroll-margin-top:16px}
.dokument h2::before{content:"\00A7\00A0" counter(par); font:600 13px/1.3 var(--f-mono); letter-spacing:.06em; color:var(--atrament-2)}
.dokument ul{display:grid; gap:8px}
.dokument ul li{position:relative; padding-left:24px}
.dokument ul li::before{content:""; position:absolute; left:6px; top:.62em; width:7px; height:7px; border-radius:50%; background:var(--zielen)}
.dokument code{padding:1px 6px; border-radius:4px; background:var(--papier-2); font:500 .88em/1.4 var(--f-mono)}
@media (min-width:1200px){
  .dokument h2{display:block}
  .dokument h2::before{position:absolute; right:calc(100% + 28px); top:27px; white-space:nowrap}
}
.tor-bok.spis{align-self:start}
.spis-tresci{display:grid; width:100%; border-top:2px solid var(--atrament)}
.spis-tresci a{display:grid; grid-template-columns:40px minmax(0,1fr); align-items:center; min-height:44px; padding:6px 0; border-bottom:1px solid var(--linia); color:var(--atrament); font-size:var(--t-maly); font-weight:500; line-height:1.3; text-decoration:none}
.spis-tresci a:hover{background:var(--zakreslacz-tlo); color:var(--atrament)}
.spis-tresci span{font:500 13px/1 var(--f-mono); color:var(--atrament-2)}