/* ═══════════════════════════════════════════════════════════════════════════
   RC4U — Kalendarz i kreator rezerwacji

   Zrodlo: design/makiety/rc4u-redesign.html (blok <style> nr 4).
   Wygenerowane 2026-08-28. Zmiany wprowadzaj TUTAJ — makieta jest juz tylko
   dokumentacja decyzji, nie zrodlem prawdy.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ============================================================
   KALENDARZ — ten sam język co wyszukiwarka terminu w hero:
   biała powierzchnia, ta sama ramka, ten sam promień i cień.
   Używany w trzech miejscach: sekcja szukania, pasek terminu,
   panel rezerwacji w karcie auta.
   ============================================================ */
.cal{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); overflow:hidden; width:100%;
  container-type:inline-size;
}

.cal__top{
  display:flex; align-items:center; gap:.6rem;
  padding:.9rem 1rem .3rem;
}

.cal__title{
  font-family:var(--display); font-size:1.3rem; letter-spacing:.04em;
  line-height:calc(1em + 3px); color:var(--ink); margin-right:auto;
}

.cal__arrow{
  width:40px; height:40px; flex:0 0 40px; border-radius:var(--r);
  border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  display:grid; place-items:center;
}

.cal__arrow:hover:not(:disabled){background:var(--surface-2); border-color:var(--ink)}

.cal__arrow:disabled{opacity:.35; cursor:not-allowed}

.cal__months{display:grid; gap:1.4rem; padding:.5rem 1rem 1rem}

/* drugi miesiac dopiero wtedy, gdy sam kalendarz ma na niego miejsce */
@container (min-width:660px){.cal__months{grid-template-columns:1fr 1fr; gap:2rem}}

@supports not (container-type:inline-size){
  @media (min-width:780px){.cal__months{grid-template-columns:1fr 1fr; gap:2rem}}
}

.cal__mname{
  font-family:var(--display); font-size:1.15rem; letter-spacing:.05em; text-align:center;
  color:var(--ink); margin-bottom:.55rem; line-height:calc(1em + 2px);
}

.cal__dow{
  display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:.3rem;
}

.cal__dow span{
  text-align:center; font-size:.62rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-muted);
}

.cal__grid{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}

.cal__day{
  position:relative; min-height:40px; border:0; background:transparent; color:var(--ink);
  font-family:inherit; font-size:.88rem; font-variant-numeric:tabular-nums;
  display:grid; place-items:center; border-radius:var(--r-sm);
}

.cal__day--pad{visibility:hidden}

.cal__day:hover:not(:disabled){background:var(--range-bg); color:var(--range-ink)}

.cal__day--in{background:var(--range-bg); color:var(--range-ink); border-radius:0}

.cal__day--start,.cal__day--end{
  background:var(--accent-fill); color:var(--accent-on-fill); font-weight:700;
}

.cal__day--start{border-radius:var(--r-sm) 0 0 var(--r-sm)}

.cal__day--end{border-radius:0 var(--r-sm) var(--r-sm) 0}

.cal__day--start.cal__day--end{border-radius:var(--r-sm)}

.cal__day--start:hover,.cal__day--end:hover{background:var(--accent-fill); color:var(--accent-on-fill)}

/* zajęte — kolor NIE jest jedynym nośnikiem informacji */
.cal__day--busy{background:var(--busy-bg); color:var(--busy); cursor:not-allowed}

.cal__day--busy::after{
  content:''; position:absolute; left:22%; right:22%; top:50%; height:1.5px;
  background:currentColor; transform:rotate(-32deg); opacity:.55;
}

.cal__day--past{color:var(--ink-muted); opacity:.45; cursor:not-allowed}

.cal__day--today{box-shadow:inset 0 0 0 1.5px var(--line-strong)}

.cal__legend{
  display:flex; flex-wrap:wrap; gap:.5rem 1.1rem; padding:0 1rem .9rem;
  font-size:.74rem; color:var(--ink-muted);
}

.cal__legend span{display:inline-flex; align-items:center; gap:.4rem}

.cal__legend i{width:13px; height:13px; border-radius:3px; display:block; flex:0 0 13px}

.cal__legend .i-free{background:var(--surface); border:1px solid var(--line-strong)}

.cal__legend .i-busy{background:var(--busy-bg); border:1px solid var(--busy)}

.cal__legend .i-sel{background:var(--accent-fill)}

/* godziny odbioru i zwrotu — lokalizacja pracuje 08:00–22:00 */
.cal__times{
  display:grid; gap:.75rem; padding:.2rem 1rem 1rem;
  border-top:1px dashed var(--line); margin-top:.2rem; padding-top:1rem;
}

@container (min-width:520px){.cal__times{grid-template-columns:1fr 1fr}}

.cal__times .field label{font-size:.68rem}

.cal__times select{min-height:46px}

.cal__hint{
  grid-column:1/-1; display:flex; gap:.5rem; align-items:flex-start;
  font-size:.79rem; color:var(--ink-muted); line-height:1.5;
}

.cal__hint svg{flex:0 0 15px; margin-top:.2rem; color:var(--accent)}

.cal__hint--warn{color:var(--busy)}

.cal__hint--warn svg{color:var(--busy)}

.cal__hint b{color:var(--ink); font-weight:600}

/* stopka kalendarza: wynik wyboru + akcja */
.cal__foot{
  border-top:1px solid var(--line); background:var(--surface-2);
  padding:.9rem 1rem; display:flex; flex-wrap:wrap; gap:.85rem; align-items:center;
}

.cal__sum{display:flex; flex-direction:column; margin-right:auto; min-width:0}

.cal__sum b{
  font-family:var(--display); font-size:1.55rem; line-height:calc(1em + 2px);
  letter-spacing:.02em; color:var(--ink);
}

.cal__sum span{font-size:.78rem; color:var(--ink-muted)}

.cal__foot .btn{min-height:48px}

@media (max-width:520px){.cal__foot .btn{width:100%}}

/* --- pasek wybranego terminu: sticky nad wynikami i w karcie auta --- */
.daybar{
  position:sticky; top:calc(var(--demobar-h,0px) + var(--nav-h,0px)); z-index:50;
  background:var(--surface); border-bottom:1px solid var(--line);
  box-shadow:0 6px 16px -12px rgba(13,27,42,.5);
}

.daybar__in{
  max-width:var(--maxw); margin-inline:auto; padding:.7rem var(--gutter);
  display:flex; align-items:center; gap:.75rem 1.1rem; flex-wrap:wrap;
}

.daybar__dates{
  display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .6rem; background:transparent; text-align:left;
  max-width:100%; min-width:0;
  border:1px solid var(--line-strong); border-radius:var(--r); color:var(--ink);
  padding:.5rem .85rem; min-height:46px; font-weight:600; font-size:.92rem;
}

.daybar__dates:hover{border-color:var(--ink); background:var(--surface-2)}

.daybar__dates{margin-right:auto}

.daybar__dates svg{flex:0 0 17px; color:var(--accent)}

.daybar__len{
  /* pigulka nie moze sie lamac — inaczej ,,5 dni'' rozpada sie na dwa wiersze
     i badge robi sie kolem z tekstem w przypadkowym miejscu */
  flex:0 0 auto; align-self:center; white-space:nowrap;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:600; line-height:1;
  color:var(--accent-on-fill); background:var(--accent-fill);
  border-radius:100px; padding:.36rem .72rem;
}

a.daybar__dates{text-decoration:none}

.daybar__cal{
  max-width:var(--maxw); margin-inline:auto; padding:0 var(--gutter) .9rem;
}

/* poniżej 1000 px pasek i tak się zawija — niech zawija się równo:
   termin na pełną szerokość, pod nim przyciski dzielące wiersz po równo */
@media (max-width:999px){
  .daybar__in{display:grid; grid-template-columns:1fr 1fr; gap:.6rem; align-items:stretch}
  .daybar__dates{grid-column:1 / -1; margin-right:0}
  .daybar__in > .btn{width:100%}
  /* samotny przycisk (ekran wyników) bierze cały wiersz */
  .daybar__in > .btn:nth-child(2):last-child{grid-column:1 / -1}
}

@media (max-width:420px){
  .daybar__in{grid-template-columns:1fr}
}

.daybar__cal[hidden]{display:none}

/* ============================================================
   EKRAN WYNIKÓW — ścieżka „najpierw termin”
   ============================================================ */
.results{display:grid; gap:1.6rem; align-items:start}

.results > *{min-width:0}

@media (min-width:960px){.results{grid-template-columns:248px 1fr; gap:2.2rem}}

.filters{display:grid; gap:1.3rem}

@media (min-width:960px){
  .filters{position:sticky; top:calc(var(--demobar-h,0px) + var(--nav-h,0px) + 5.2rem)}
}

.filters__group{display:grid; gap:.55rem}

.filters__group h3{
  font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-muted); font-family:var(--body); line-height:1.4;
}

.check{
  display:flex; align-items:center; gap:.6rem; font-size:.9rem;
  padding:.35rem 0; cursor:pointer; min-height:36px;
}

.check input{
  width:19px; height:19px; flex:0 0 19px; accent-color:var(--accent); margin:0;
}

.check span{color:var(--ink)}

.check small{margin-left:auto; color:var(--ink-muted); font-size:.78rem}

.filters__reset{
  background:transparent; border:0; color:var(--accent); font-size:.82rem;
  font-weight:600; padding:.4rem 0; text-align:left; text-decoration:underline;
  text-underline-offset:3px;
}

.filters__toggle{display:flex; margin-bottom:1rem}

@media (min-width:960px){.filters__toggle{display:none}}

.filters--collapsed{display:none}

@media (min-width:960px){.filters--collapsed{display:grid}}

.results__head{
  display:flex; flex-wrap:wrap; gap:.7rem 1.2rem; align-items:baseline;
  margin-bottom:1.2rem;
}

.results__count{
  font-family:var(--display); font-size:clamp(1.7rem,1.2rem + 1.8vw,2.4rem);
  line-height:calc(1em + 3px); letter-spacing:.02em;
}

.results__sort{
  margin-left:auto; display:flex; align-items:center; gap:.5rem;
  font-size:.82rem; color:var(--ink-muted);
}

.results__sort{min-width:0}

.results__sort select{
  font-family:inherit; font-size:.85rem; color:var(--ink); background:var(--surface);
  border:1px solid var(--line-strong); border-radius:var(--r); padding:.5rem .7rem;
  min-height:42px; max-width:100%; min-width:0;
}

/* karta auta w wynikach: cena za CAŁY okres jest bohaterem */
.car--result .price__amt{font-size:1.55rem}

.car__total{
  display:flex; align-items:baseline; gap:.45rem; margin-top:.15rem;
}

.car__total{flex-wrap:wrap}

.car__total b{white-space:nowrap;
  
  font-family:var(--display); font-size:2.15rem; line-height:calc(1em + 2px);
  letter-spacing:.01em; color:var(--ink);
}

.car__total span{font-size:.76rem; color:var(--ink-muted)}

/* ============================================================
   KARTA AUTA
   ============================================================ */
.pdp{display:grid; gap:1.8rem; align-items:start}

.pdp > *{min-width:0}

@media (min-width:1000px){.pdp{grid-template-columns:minmax(0,1.5fr) minmax(320px,.85fr); gap:2.6rem}}

.gal{display:grid; gap:.6rem; min-width:0}

.gal__main{
  position:relative; aspect-ratio:16/9; border-radius:var(--r-lg); overflow:hidden;
  background:var(--bg-sunken); border:1px solid var(--line);
}

.gal__main img{width:100%; height:100%; object-fit:cover}

.gal__badge{position:absolute; left:.9rem; top:.9rem}

.gal__thumbs{
  min-width:0; max-width:100%;
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(84px,1fr);
  gap:.5rem; overflow-x:auto; padding-bottom:.2rem; scrollbar-width:thin;
}

.gal__thumb{
  aspect-ratio:16/10; border-radius:var(--r); overflow:hidden; border:2px solid transparent;
  background:var(--bg-sunken); padding:0; cursor:pointer;
}

.gal__thumb img{width:100%; height:100%; object-fit:cover}

.gal__thumb[aria-current="true"]{border-color:var(--accent)}

.pdp__title{font-size:clamp(2.2rem,1.5rem + 2.6vw,3.4rem); line-height:calc(.92em + 3px)}

.pdp__sub{
  display:flex; flex-wrap:wrap; gap:.5rem .9rem; align-items:center;
  margin-top:.55rem; color:var(--ink-muted); font-size:.9rem;
}

.pdp__block{margin-top:2.4rem}

.pdp__block h2{
  font-size:1.65rem; letter-spacing:.02em; margin-bottom:.9rem;
  line-height:calc(.95em + 3px);
}

.specs--pdp{
  grid-template-columns:repeat(2,1fr); gap:.2rem; border:1px solid var(--line);
  border-radius:var(--r-lg); padding:.4rem; background:var(--surface);
}

@media (min-width:560px){.specs--pdp{grid-template-columns:repeat(4,1fr)}}

.specs--pdp .spec{padding:.85rem .4rem; border-radius:var(--r)}

.specs--pdp .spec b{font-size:1.45rem}

.kv{display:grid; gap:0; border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}

.kv div{
  display:flex; flex-wrap:wrap; gap:.3rem 1rem; justify-content:space-between;
  padding:.8rem 1rem; font-size:.9rem; background:var(--surface);
}

.kv div:nth-child(even){background:var(--surface-2)}

.kv dt{color:var(--ink-muted); margin:0}

.kv dd{margin:0; font-weight:600; text-align:right}

.equip{display:grid; gap:.5rem .9rem; grid-template-columns:1fr}

@media (min-width:620px){.equip{grid-template-columns:1fr 1fr}}

.equip li{
  list-style:none; display:flex; gap:.6rem; align-items:flex-start;
  font-size:.9rem; color:var(--ink);
}

.equip svg{flex:0 0 16px; margin-top:.28rem; color:var(--ok)}

/* kolumna boczna karty auta: cena, parametry, wyposażenie */
.pdp__aside{display:grid; gap:1.2rem; min-width:0; align-content:start}

.sidecard{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.2rem 1.25rem 1.35rem;
}

.sidecard h3{
  font-family:var(--display); font-size:1.35rem; letter-spacing:.03em;
  line-height:calc(1em + 3px); margin-bottom:1rem; color:var(--ink);
}

.specs--side{
  grid-template-columns:repeat(2,1fr); gap:.9rem .6rem;
  border:0; padding:0;
}

.specs--side .spec b{font-size:1.5rem}

.kv--side{border:0; border-radius:0; margin-top:1.2rem}

.kv--side div{
  background:transparent; padding:.62rem 0; font-size:.86rem;
  border-bottom:1px dashed var(--line);
}

.kv--side div:nth-child(even){background:transparent}

.kv--side div:last-child{border-bottom:0; padding-bottom:0}

.equip--side{grid-template-columns:1fr; gap:.6rem}

.equip--side li{font-size:.87rem}

/* panel rezerwacji — przykleja się do góry na desktopie */
.bookbox{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); overflow:hidden;
}

.bookbox__head{padding:1.15rem 1.2rem .9rem; border-bottom:1px solid var(--line)}

.bookbox__price{display:flex; align-items:flex-end; gap:.6rem; flex-wrap:wrap}

.bookbox__price b{
  font-family:var(--display); font-size:2.5rem; line-height:calc(1em + 2px);
  letter-spacing:.01em;
}

.bookbox__price span{font-size:.85rem; color:var(--ink-muted); padding-bottom:.35rem}

.bookbox__body{padding:1.1rem 1.2rem 1.3rem; display:grid; gap:.9rem}

/* GOTCHA z etapu 1: [hidden] przegrywa z display:grid — bez tej reguły oba
   stany panelu (przed wyborem terminu i po) byłyby widoczne naraz. */
.bookbox__body[hidden]{display:none}

.bookbox__hint{font-size:.9rem; color:var(--ink-muted); margin:0}

.bookbox__line{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.25rem 1rem; font-size:.9rem;
  padding-bottom:.55rem; border-bottom:1px dashed var(--line);
}

.bookbox__line[hidden]{display:none}       /* jak wyżej: [hidden] vs display:flex */

.bookbox__line:last-of-type{border-bottom:0; padding-bottom:0}

.bookbox__line span{color:var(--ink-muted)}

.bookbox__line b{font-weight:600; text-align:right}

.bookbox__total{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:.25rem 1rem;
  border-top:1px solid var(--line-strong); padding-top:.8rem;
}

.bookbox__total span{font-size:.86rem; font-weight:600}

.bookbox__total b{font-family:var(--display); font-size:2rem; line-height:1; letter-spacing:.01em}

.bookbox__pick{
  display:flex; align-items:center; gap:.7rem; width:100%; text-align:left;
  background:var(--surface-2); border:1px dashed var(--line-strong); border-radius:var(--r);
  padding:.85rem .9rem; color:var(--ink); min-height:64px;
}

.bookbox__pick:hover{border-color:var(--accent); border-style:solid}

.bookbox__pick svg{flex:0 0 20px; color:var(--accent)}

.bookbox__pick b{display:block; font-size:.95rem}

.bookbox__pick small{display:block; color:var(--ink-muted); font-size:.78rem}

.bookbox__cal{padding:0 1.2rem 1.2rem}

.bookbox__cal .cal{box-shadow:none; border-color:var(--line-strong)}

.bookbox__cal[hidden]{display:none}

.bookbox__trust{
  display:grid; gap:.45rem; padding:0 1.2rem 1.25rem; font-size:.8rem; color:var(--ink-muted);
}

.bookbox__trust li{list-style:none; display:flex; gap:.5rem; align-items:flex-start}

.bookbox__trust svg{flex:0 0 15px; margin-top:.2rem; color:var(--ok)}

/* ============================================================
   KREATOR REZERWACJI — 40 pól rozbite na 5 przejść
   ============================================================ */
.wiz{display:grid; gap:1.8rem; align-items:start}

.wiz > *{min-width:0}

@media (min-width:1000px){.wiz{grid-template-columns:minmax(0,1.55fr) minmax(310px,.8fr); gap:2.6rem}}

/* pasek postępu — skos przejęty z logo */
.wizsteps{
  display:flex; gap:.3rem; overflow-x:auto; padding:0 .55rem .4rem; margin-bottom:1.6rem;
  scrollbar-width:none;
}

.wizsteps::-webkit-scrollbar{display:none}

@media (min-width:1000px){
  .wizsteps{
    position:sticky; top:calc(var(--demobar-h,0px) + var(--nav-h,0px)); z-index:40;
    background:var(--bg); border-bottom:1px solid var(--line);
    padding:.9rem .55rem 1rem; margin-bottom:1.7rem;
  }
}

.wizstep{
  flex:1 0 auto; min-width:0; display:flex; align-items:center; gap:.55rem;
  padding:.6rem .9rem; background:var(--surface-2); border:1px solid var(--line);
  color:var(--ink-muted); font-size:.82rem; font-weight:600; white-space:nowrap;
  transform:skewX(var(--skew));
}

.wizstep > span{display:inline-block; transform:skewX(calc(-1 * var(--skew)))}

.wizstep i{
  display:grid; place-items:center; width:22px; height:22px; flex:0 0 22px;
  border-radius:50%; background:var(--line); color:var(--ink); font-style:normal;
  font-size:.72rem; font-weight:700; transform:skewX(calc(-1 * var(--skew)));
}

.wizstep[aria-current="step"]{
  background:var(--accent-fill); border-color:var(--accent-fill); color:var(--accent-on-fill);
}

.wizstep[aria-current="step"] i{background:var(--navy-900); color:#fff}

.wizstep--done{color:var(--ink); border-color:var(--line-strong)}

.wizstep--done i{background:var(--ok); color:#fff; font-size:0}

.wizstep--done i::after{content:'✓'; font-size:.8rem; line-height:1}

.wizpanel[hidden]{display:none}

.wizpanel h2{
  font-size:clamp(1.7rem,1.3rem + 1.4vw,2.2rem); line-height:calc(.95em + 3px);
  margin-bottom:.35rem;
}

.wizpanel > .lede{margin-bottom:1.5rem}

.form{display:grid; gap:1.1rem}

.form__row{display:grid; gap:1.1rem}

@media (min-width:620px){
  .form__row--2{grid-template-columns:1fr 1fr}
  .form__row--3{grid-template-columns:1fr 1fr 1fr}
  .form__row--21{grid-template-columns:2fr 1fr}
}

.field small{font-size:.76rem; color:var(--ink-muted)}

/* dwa pola obok siebie tam, gdzie sie mieszcza — imie i nazwisko */
.fieldrow{display:grid; gap:.9rem; min-width:0}

@media (min-width:420px){.fieldrow{grid-template-columns:1fr 1fr}}

.login .field{margin-bottom:.9rem; text-align:left}

.field input:focus-visible,.field select:focus-visible{outline:3px solid var(--accent); outline-offset:1px}

.fieldset{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:1.15rem 1.15rem 1.3rem;
  margin:0; display:grid; gap:1.1rem; background:var(--surface);
}

.fieldset legend{
  font-family:var(--display); font-size:1.3rem; letter-spacing:.04em; padding:0 .45rem;
  line-height:calc(1em + 3px);
}

.fieldset[hidden]{display:none}

/* wybór jako karta — dodatki, sposób płatności, typ najemcy */
.opt{
  display:flex; gap:.85rem; align-items:flex-start; padding:1rem; min-width:0;
  border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  cursor:pointer; transition:border-color .15s, background .15s;
}

.opt:hover{border-color:var(--line-strong); background:var(--surface-2)}

.opt input{width:20px; height:20px; flex:0 0 20px; margin:.15rem 0 0; accent-color:var(--accent)}

.opt > span{min-width:0}

.opt:has(input:checked){border-color:var(--accent); background:var(--range-bg)}

.opt__t{display:flex; flex-wrap:wrap; gap:.2rem .7rem; align-items:baseline}

.opt__t b{font-size:.98rem}

.opt__price{
  font-family:var(--display); font-size:1.2rem; letter-spacing:.02em; color:var(--ink);
  margin-left:auto; white-space:nowrap;
}

.opt p{font-size:.83rem; color:var(--ink-muted); margin-top:.3rem}

.opts{display:grid; gap:.7rem}

/* podsumowanie zamówienia */
.sum{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); overflow:hidden;
}

@media (min-width:1000px){
  .sum{position:sticky; top:calc(var(--demobar-h,0px) + var(--nav-h,0px) + var(--wizsteps-h,0px) + 1.2rem)}
}

.sum__car{display:flex; gap:.85rem; padding:1rem; border-bottom:1px solid var(--line)}

.sum__car img{width:88px; height:60px; object-fit:cover; border-radius:var(--r); flex:0 0 88px}

.sum__car b{font-family:var(--display); font-size:1.35rem; letter-spacing:.02em; line-height:calc(1em + 2px)}

.sum__car span{display:block; font-size:.78rem; color:var(--ink-muted)}

.sum__body{padding:1rem; display:grid; gap:.6rem; font-size:.88rem}

.sum__line{display:flex; flex-wrap:wrap; justify-content:space-between; gap:.25rem 1rem}

.sum__line span{color:var(--ink-muted)}

.sum__line b{font-weight:600; text-align:right}

.sum__line--add span{color:var(--ink)}

.sum__total{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:.25rem 1rem;
  border-top:1px solid var(--line-strong); margin-top:.35rem; padding-top:.8rem;
}

.sum__total span{font-weight:600}

.sum__total b{font-family:var(--display); font-size:2rem; line-height:1; letter-spacing:.01em}

.sum__dep{
  background:var(--surface-2); border-top:1px solid var(--line); padding:.85rem 1rem;
  font-size:.8rem; color:var(--ink-muted);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:.25rem 1rem;
}

.sum__dep b{color:var(--ink); font-weight:600}

/* mobilny pasek ceny na karcie auta — cena i CTA zawsze pod ręką */
.pdpbar{display:none}

@media (max-width:999px){
  .pdpbar{
    position:fixed; left:0; right:0; bottom:0; z-index:70;
    display:flex; align-items:center; gap:1rem;
    padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom,0px));
    background:var(--surface); border-top:1px solid var(--line);
    box-shadow:0 -8px 24px -14px rgba(13,27,42,.6);
  }
  .pdpbar__img{
    width:48px; height:36px; flex:0 0 48px; object-fit:cover;
    border-radius:6px; border:1px solid var(--line);
  }
  .pdpbar__info{display:flex; flex-direction:column; min-width:0; gap:.05rem}
  .pdpbar__name{
    font-size:.8rem; font-weight:600; color:var(--ink); line-height:1.25;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .pdpbar__price{display:flex; align-items:baseline; gap:.4rem; min-width:0}
  .pdpbar__price b{
    font-family:var(--display); font-size:1.45rem; letter-spacing:.02em;
    line-height:calc(1em + 2px); color:var(--ink);
  }
  .pdpbar__price span{font-size:.7rem; color:var(--ink-muted); white-space:nowrap}
  .pdpbar .btn{margin-left:auto; flex:0 0 auto; min-height:50px; white-space:nowrap}
  @media (max-width:359px){.pdpbar__img{display:none}}
  #scrCar{padding-bottom:5.5rem}
  .on-car .assistant{bottom:calc(5.2rem + env(safe-area-inset-bottom,0px))}
}

/* mobilny pasek kwoty — kwota nie moze uciekac na dol strony */
.wizbar{display:none}

@media (max-width:999px){
  .wizbar{
    position:fixed; left:0; right:0; bottom:0; z-index:70;
    display:flex; align-items:center; gap:1rem;
    padding:.7rem var(--gutter) calc(.7rem + env(safe-area-inset-bottom,0px));
    background:var(--surface); border-top:1px solid var(--line);
    box-shadow:0 -8px 24px -14px rgba(13,27,42,.6);
  }
  .wizbar__sum{display:flex; flex-direction:column; line-height:1.2}
  .wizbar__sum span{font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted)}
  .wizbar__sum b{font-family:var(--display); font-size:1.6rem; letter-spacing:.02em; line-height:calc(1em + 2px)}
  .wizbar .btn{margin-left:auto; min-height:50px}
  #scrBook{padding-bottom:5.5rem}
  .wiznav{display:none}
  .on-book .assistant{bottom:calc(5.2rem + env(safe-area-inset-bottom,0px))}
}

/* nawigacja kreatora */
.wiznav{
  display:flex; gap:.75rem; align-items:center; margin-top:1.8rem;
  padding-top:1.4rem; border-top:1px solid var(--line);
}

.wiznav .btn--primary{margin-left:auto}

@media (max-width:560px){
  .wiznav{flex-direction:column-reverse; align-items:stretch}
  .wiznav .btn{width:100%; margin-left:0}
}

/* ============================================================
   POTWIERDZENIE
   ============================================================ */
.done{max-width:760px; margin-inline:auto; text-align:center}

.done__mark{
  width:76px; height:76px; margin:0 auto 1.4rem; border-radius:50%;
  background:var(--ok-bg); color:var(--ok); display:grid; place-items:center;
  border:2px solid var(--ok);
}

.done h1{font-size:clamp(2.2rem,1.6rem + 2.6vw,3.4rem); line-height:calc(.92em + 3px)}

.done__no{
  display:inline-flex; flex-wrap:wrap; align-items:baseline; gap:.3rem .6rem; margin:1.3rem 0 .4rem;
  max-width:100%;
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r);
  padding:.7rem 1.2rem;
}

.done__no span{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted)}

.done__no b{font-family:var(--display); font-size:1.7rem; letter-spacing:.06em; line-height:1}

.done__card{
  text-align:left; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:1.4rem; margin-top:2rem;
}

.done__card h2{font-size:1.5rem; margin-bottom:1rem; line-height:calc(.95em + 3px)}

/* oś czasu — tu numeracja niesie treść: to kolejność zdarzeń */
.tl{display:grid; gap:0; counter-reset:tl; text-align:left}

.tl li{
  list-style:none; position:relative; counter-increment:tl;
  /* wciecie na kolko: nie moze rosnac w nieskonczonosc razem z czcionka */
  padding:0 0 1.5rem min(2.9rem, 18%);
  min-width:0;
}

.tl li::before{
  content:counter(tl); position:absolute; left:0; top:0;
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:var(--accent-fill); color:var(--accent-on-fill);
  font-family:var(--display); font-size:1rem; line-height:1;
}

.tl li::after{
  content:''; position:absolute; left:14px; top:32px; bottom:.35rem; width:1.5px;
  background:var(--line);
}

.tl li:last-child{padding-bottom:0}

.tl li:last-child::after{display:none}

.tl b{display:block; font-size:.98rem; margin-bottom:.15rem}

.tl p{font-size:.87rem; color:var(--ink-muted)}

.tl time{
  display:inline-block; font-size:.72rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent); margin-bottom:.2rem;
}

/* ============================================================
   ELEMENTY WSPÓLNE NOWYCH EKRANÓW
   ============================================================ */
.crumbs{
  display:flex; flex-wrap:wrap; gap:.4rem .55rem; align-items:center;
  font-size:.8rem; color:var(--ink-muted); margin-bottom:1.1rem;
}

.crumbs a{color:var(--ink-muted); text-decoration:none}

.crumbs a:hover{color:var(--accent); text-decoration:underline}

.crumbs svg{flex:0 0 12px; opacity:.6}

.backlink{
  display:inline-flex; align-items:center; gap:.45rem; background:transparent; border:0;
  color:var(--accent); font-size:.86rem; font-weight:600; padding:.4rem 0; margin-bottom:.6rem;
}

.backlink:hover{text-decoration:underline; text-underline-offset:3px}

.pathnote{
  display:flex; gap:.7rem; align-items:flex-start; background:var(--surface-2);
  border:1px solid var(--line); border-left:3px solid var(--accent-fill);
  border-radius:0 var(--r) var(--r) 0; padding:.8rem 1rem; font-size:.84rem;
  color:var(--ink-muted); margin-bottom:1.6rem;
}

.pathnote b{color:var(--ink)}

.pathnote svg{flex:0 0 16px; margin-top:.15rem; color:var(--accent)}

/* ── Kreator: błędy walidacji ────────────────────────────────────────────────
   Kolor bierzemy z tokenu `--busy` — tej samej czerwieni, którą kalendarz
   oznacza zajęte dni. Ma warianty dla obu motywów, więc nie dokładamy do
   palety nowej barwy tylko po to, żeby powiedzieć „popraw to pole".          */

.wizerror{
  margin:0 0 1.2rem; padding:.85rem 1rem; border-radius:var(--r-sm);
  background:var(--busy-bg); color:var(--busy); font-size:.92rem; font-weight:500;
  border-left:3px solid var(--busy);
}

.wizerror[hidden]{display:none}

.field--bad input,
.field--bad select,
.field--bad textarea{border-color:var(--busy)}

/* Sam kolor ramki nie wystarczy — kto go nie odróżnia, musi zobaczyć różnicę
   w czymś jeszcze. Stąd wyraźniejsza obwódka przy fokusie. */
.field--bad input:focus,
.field--bad select:focus,
.field--bad textarea:focus{outline:2px solid var(--busy); outline-offset:1px}

.field--bad > label{color:var(--busy)}

/* Cena „za dobę" pod kwotą łączną na liście wolnych aut. */
.opt__sub{display:block; font-size:.78rem; font-weight:400; color:var(--ink-muted)}