/* Procesy (rezerwacja, voucher, realizacja) - układ i elementy. Kolory i kroje z tokenów wersji:
   --p-tlo --p-pole --p-tekst --p-szary --p-akcent --p-akcent-ciemny --p-na-akcencie --p-linia --p-jasny --p-nagl --p-dane --p-r */
[hidden]{display:none !important}
.proces{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:clamp(20px,4vw,56px);align-items:start}
.proces__lewa{min-width:0}
.kroki-pasek{display:flex;gap:6px;list-style:none;margin:0 0 18px;padding:0;counter-reset:k;flex-wrap:wrap}
.kroki-pasek li{counter-increment:k;font:600 13px/1 var(--p-dane);color:var(--p-szary);padding:8px 12px 8px 10px;border-radius:999px;border:1px solid var(--p-linia);background:var(--p-pole)}
.kroki-pasek li::before{content:counter(k) "  ";color:var(--p-szary)}
.kroki-pasek li.teraz{background:var(--p-akcent);border-color:var(--p-akcent);color:var(--p-na-akcencie)}
.kroki-pasek li.teraz::before{color:inherit}
.kroki-pasek li.zrobione{color:var(--p-tekst)}
.kroki-pasek li.zrobione::before{content:"✓  ";color:var(--p-akcent)}
.krok{border-top:1px solid var(--p-linia);padding:18px 0}
.krok:first-of-type{border-top:0}
.krok__glowa{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.krok__glowa h2{margin:0;font:700 clamp(20px,2.2vw,26px)/1.15 var(--p-nagl);display:flex;align-items:center;gap:12px;outline:0}
.krok__nr{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;border:1.5px solid currentColor;font:600 14px/1 var(--p-dane);flex:none}
.krok--aktywny .krok__nr{background:var(--p-akcent);border-color:var(--p-akcent);color:var(--p-na-akcencie)}
.krok--pozniej .krok__glowa h2{color:var(--p-szary)}
.krok__wybor{order:2;margin:0 0 0 44px;flex-basis:100%;color:var(--p-szary);font-size:15px}
.krok__wybor:empty,.krok--aktywny .krok__wybor,.krok--pozniej .krok__wybor{display:none}
.krok__zmien{order:1;margin-left:auto;background:none;border:0;color:var(--p-akcent);font-weight:700;text-decoration:underline;cursor:pointer;padding:6px}
.krok__tresc{display:none;padding:16px 0 4px}
.krok--aktywny .krok__tresc{display:block;animation:krokWejscie .45s cubic-bezier(.2,.7,.2,1)}
@keyframes krokWejscie{from{opacity:0;transform:translateY(10px)}}
.przycisk--dalej{margin-top:18px}
.przypis,.pomoc{font-size:14px;color:var(--p-szary);margin:10px 0 0}
.pomoc--demo{background:var(--p-jasny);border-radius:8px;padding:8px 12px}
.blad{color:#B3261E;font-size:14px;font-weight:600;margin:8px 0 0}
.blad:empty{display:none}
.opc{font-weight:400;color:var(--p-szary)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.przelacznik{display:inline-flex;border:1px solid var(--p-linia);border-radius:999px;padding:4px;margin-bottom:14px;background:var(--p-pole)}
.przelacznik button{border:0;background:none;border-radius:999px;padding:8px 16px;font-weight:700;cursor:pointer;color:var(--p-szary)}
.przelacznik button[aria-selected=true]{background:var(--p-akcent);color:var(--p-na-akcencie)}
.warianty{border:0;margin:0;padding:0;display:grid;gap:8px}
.warianty legend{font-weight:700;margin-bottom:8px}
.wariant{display:grid;grid-template-columns:86px minmax(0,1fr) auto;align-items:center;gap:14px;padding:14px 18px;border:1.5px solid var(--p-linia);border-radius:var(--p-r);background:var(--p-pole);cursor:pointer;position:relative;transition:border-color .2s,background-color .2s}
.wariant:hover{border-color:var(--p-akcent)}
.wariant input{position:absolute;opacity:0;inset:0;cursor:pointer}
.wariant:has(input:checked){border-color:var(--p-akcent);background:var(--p-jasny);box-shadow:inset 0 0 0 1px var(--p-akcent)}
.wariant:has(input:focus-visible){outline:3px solid var(--p-akcent);outline-offset:2px}
.wariant__czas{font:700 22px/1 var(--p-nagl);white-space:nowrap}
.wariant__opis{display:grid;gap:2px}
.wariant__opis span{color:var(--p-szary);font-size:14px}
.wariant__cena{font:600 17px/1 var(--p-dane);white-space:nowrap}
.warianty--waskie{grid-template-columns:repeat(auto-fill,minmax(110px,1fr));margin-bottom:16px}
.wariant--maly{grid-template-columns:1fr;text-align:center;padding:12px}
.wariant--maly .wariant__czas{font-size:18px}
.kalendarz{border:1px solid var(--p-linia);border-radius:var(--p-r);padding:16px;background:var(--p-pole);max-width:520px}
.kalendarz__glowa{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.kalendarz__glowa h3{margin:0;font:700 18px/1 var(--p-nagl);text-transform:capitalize}
.kalendarz__strzalka{width:40px;height:40px;border-radius:50%;border:1px solid var(--p-linia);background:none;font-size:20px;cursor:pointer;color:var(--p-tekst)}
.kalendarz__strzalka:disabled{opacity:.3;cursor:default}
.kalendarz__tyg,.kalendarz__dni{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.kalendarz__tyg span{text-align:center;font:600 12px/2 var(--p-dane);color:var(--p-szary)}
.dzien{aspect-ratio:1;min-height:40px;border-radius:10px;border:1px solid transparent;background:none;font:600 15px/1 var(--p-dane);cursor:pointer;color:var(--p-tekst);position:relative}
.dzien--wolne{background:var(--p-jasny);border-color:var(--p-linia)}
.dzien--wolne:hover{border-color:var(--p-akcent)}
.dzien[aria-pressed=true]{background:var(--p-akcent);border-color:var(--p-akcent);color:var(--p-na-akcencie)}
.dzien--pelne{color:var(--p-szary);text-decoration:line-through;cursor:not-allowed}
.dzien--nieczynne,.dzien--minione,.dzien--wylaczone{color:var(--p-linia-mocna,#B8C3D4);cursor:not-allowed}
.dzien--wylaczone{text-decoration:line-through}
.dzien--dzis::after{content:"";position:absolute;left:50%;bottom:5px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:currentColor}
.kalendarz__legenda{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;font-size:13px;color:var(--p-szary);margin:12px 0 0}
.l{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:2px}
.l--wolne{background:var(--p-jasny);border:1px solid var(--p-linia)}
.l--pelne{background:none;border:1px solid var(--p-linia)}
.l--nie{background:var(--p-linia)}
.godziny{margin-top:16px;max-width:520px}
.godziny__tytul{font-weight:700;margin:0 0 10px}
.godziny__info{color:var(--p-szary);margin:0}
.godziny__brak{background:var(--p-jasny);border-radius:var(--p-r);padding:14px 16px;margin:0}
.godziny__lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:8px}
.godzina{min-height:44px;border-radius:10px;border:1.5px solid var(--p-linia);background:var(--p-pole);font:600 16px/1 var(--p-dane);cursor:pointer;color:var(--p-tekst)}
.godzina:hover{border-color:var(--p-akcent)}
.godzina[aria-pressed=true]{background:var(--p-akcent);border-color:var(--p-akcent);color:var(--p-na-akcencie)}
.pola{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
.pole{display:grid;gap:6px;align-content:start}
.pole--cale{grid-column:1/-1}
.pole label{font-weight:700}
.pole input,.pole textarea,.kod input{width:100%;min-height:48px;border:1.5px solid var(--p-linia);border-radius:10px;padding:10px 14px;background:var(--p-pole);font:inherit;color:var(--p-tekst)}
.pole textarea{min-height:90px;resize:vertical}
.pole input:focus,.pole textarea:focus,.kod input:focus{outline:0;border-color:var(--p-akcent);box-shadow:0 0 0 3px color-mix(in srgb,var(--p-akcent) 25%,transparent)}
[aria-invalid=true]{border-color:#B3261E !important}
.pole .blad,.pole .pomoc{margin:0}
.zgoda{display:flex;gap:10px;align-items:flex-start;font-size:15px}
.zgoda input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--p-akcent);flex:none}
.zgoda a{color:var(--p-akcent)}
.wzory{border:0;padding:0;margin:18px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.wzory legend{font-weight:700;margin-bottom:8px}
.wzor{position:relative;display:grid;gap:6px;cursor:pointer;font-size:14px;font-weight:600}
.wzor input{position:absolute;opacity:0}
.wzor img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;border:3px solid transparent}
.wzor:has(input:checked) img{border-color:var(--p-akcent)}
.wzor:has(input:focus-visible) img{outline:3px solid var(--p-akcent);outline-offset:2px}
.kod{display:grid;gap:6px;max-width:560px}
.kod label{font-weight:700}
.kod__wiersz{display:flex;gap:10px}
.kod input{font:600 18px/1 var(--p-dane);letter-spacing:.06em;text-transform:uppercase}
.uprawnienie{margin-top:16px;border:1.5px solid var(--p-akcent);border-radius:var(--p-r);padding:16px 18px;background:var(--p-jasny);max-width:560px}
.uprawnienie__ok{margin:0 0 10px;font-weight:800;color:var(--p-akcent)}
.uprawnienie__ok::before{content:"✓ "}
.uprawnienie dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:0}
.uprawnienie dt{font:600 12px/1.3 var(--p-dane);color:var(--p-szary);text-transform:uppercase;letter-spacing:.04em}
.uprawnienie dd{margin:2px 0 0;font-weight:700}
.platnosc{display:grid;gap:12px;max-width:560px}
.platnosc__demo{background:#FFF4E0;color:#5C3A00;border-radius:10px;padding:12px 14px;margin:0;font-size:14px}
.platnosc__czas{margin:0}
.platnosc__czas b{font-family:var(--p-dane)}
.platnosc__kwota{margin:0;font-size:18px}
.platnosc__kwota b{font:700 26px/1 var(--p-dane);margin-left:8px}
.platnosc__przyciski{display:flex;gap:10px;flex-wrap:wrap}
.bilet{position:sticky;top:96px}
.bilet__pola{margin:0}
.bilet__pole dt{font:600 11px/1.2 var(--p-dane);text-transform:uppercase;letter-spacing:.06em;color:var(--p-szary)}
.bilet__pole dd{margin:3px 0 0;font-weight:700}
.bilet__cena{font:700 30px/1 var(--p-dane)}
.bilet__obnizka{font-size:12px;color:var(--p-szary)}
.potwierdzenie{grid-column:1;outline:0}
.potwierdzenie__nr{font:600 14px/1 var(--p-dane);color:var(--p-akcent);margin:0 0 10px}
.potwierdzenie h2{font:800 clamp(30px,4vw,48px)/1.05 var(--p-nagl);margin:0 0 12px}
.potwierdzenie__opis{font-size:18px;margin:0 0 18px}
.potwierdzenie__lista{padding-left:20px;margin:18px 0}
.potwierdzenie__lista li{margin:6px 0}
.potwierdzenie__przyciski{display:flex;gap:10px;flex-wrap:wrap}
.voucher-podglad{display:grid;grid-template-columns:42% 1fr;border-radius:var(--p-r);overflow:hidden;background:var(--p-pole);border:1px solid var(--p-linia);max-width:620px}
.voucher-podglad img{width:100%;height:100%;object-fit:cover;min-height:220px}
.voucher-podglad__tresc{display:grid;gap:6px;align-content:center;padding:20px 22px}
.voucher-podglad__marka{font:600 12px/1 var(--p-dane);letter-spacing:.06em;text-transform:uppercase;color:var(--p-akcent)}
.voucher-podglad strong{font:800 26px/1.05 var(--p-nagl)}
.voucher-podglad em{color:var(--p-szary)}
.voucher-podglad__kod{font:700 20px/1 var(--p-dane);letter-spacing:.08em;margin-top:8px;padding:10px 12px;border:1.5px dashed var(--p-akcent);border-radius:8px;justify-self:start}
.voucher-podglad__waznosc{font-size:13px;color:var(--p-szary)}
@media (max-width:900px){
  .proces{grid-template-columns:1fr}
  .bilet{position:relative;top:0;order:-1}
  .potwierdzenie{grid-column:auto}
}
@media (max-width:560px){
  .pola{grid-template-columns:1fr}
  .wariant{grid-template-columns:62px minmax(0,1fr);row-gap:6px;padding:12px 14px}
  .wariant__cena{grid-column:2}
  .wariant__czas{font-size:18px}
  .kod__wiersz{flex-direction:column}
  .wzory{grid-template-columns:repeat(3,1fr);gap:6px}
  .voucher-podglad{grid-template-columns:1fr}
  .voucher-podglad img{min-height:160px;max-height:200px}
}
@media (prefers-reduced-motion:reduce){.krok--aktywny .krok__tresc{animation:none}}