/* Elementy wspólne dla kroków panelu: układ dwukolumnowy z koszykiem, pasek na dole
   ekranu telefonu i wyłączenie docka strony (w panelu dock dubluje akcje kroku). */

.dok { display: none !important; }

/* Kolumna treści + boczny koszyk (`.koszyk` z globalne.css) od 1080 px. */
.rezerwacja__uklad { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 3vw, 48px); }
@media (min-width: 1080px) {
  .rezerwacja__uklad { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
}

/* Pasek na dole ekranu telefonu: suma po lewej, główna akcja kroku po prawej.
   Poniżej 1080 px koszyk idzie pod treść, więc suma musi być widoczna bez przewijania. */
.pasek-dol {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 10px 10px 18px;
  background: rgba(22, 24, 29, 0.94);
  color: #fff;
  border-radius: var(--promien-guzik);
  box-shadow: var(--cien-uniesiony);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.pasek-dol__suma { display: grid; line-height: 1.2; }
.pasek-dol__suma b { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.pasek-dol__suma small { font-size: 0.75rem; color: rgba(255, 255, 255, 0.7); }
.pasek-dol .guzik { min-height: 46px; padding-inline: 22px; }
@media (min-width: 1080px) { .pasek-dol { display: none; } }
/* Miejsce pod paskiem, żeby stopka nie chowała się za nim. */
@media (max-width: 1079px) { body:has(.pasek-dol) main { padding-bottom: 84px; } }

/* --------------------------------------------------------------------------
   Główna akcja kroku w koszyku (monitor)
   Koszyk jest przyklejony, więc przycisk w nim jest zawsze pod ręką — przycisk pod
   treścią bywa dwa ekrany niżej. Poniżej 1080 px koszyk schodzi pod treść i akcję
   przejmuje `.pasek-dol`, więc ten przycisk znika.
   -------------------------------------------------------------------------- */

.koszyk__akcja {
  display: flex;
  width: 100%;
  justify-content: center;
  min-height: 52px;
  margin-top: 4px;
}
@media (max-width: 1079px) { .koszyk__akcja { display: none; } }

/* --------------------------------------------------------------------------
   Banner cookie a pasek dolny
   Banner z `globalne.css` siada na dole ekranu, czyli dokładnie na pasku z sumą
   i główną akcją. Na stronach z paskiem podnosimy go ponad pasek.
   -------------------------------------------------------------------------- */

@media (max-width: 1079px) {
  body:has(.pasek-dol) .ciasteczka {
    bottom: calc(max(12px, env(safe-area-inset-bottom)) + 78px);
  }
}

/* --------------------------------------------------------------------------
   Specyfikacja pojazdu jak w kartach cennika na stronie (`.karta-auta__spec`
   z globalne.css: etykieta wersalikami nad wartością). W kartach kroku 1 siatka 2×2
   bez własnej kreski (kartę domyka linia nad ceną), przy wybranym aucie (krok 2)
   i na zgłoszeniu (krok 4) jeden rząd.
   -------------------------------------------------------------------------- */

.oferta__spec { margin: 10px 0 0; padding-bottom: 0; border-bottom: 0; gap: 8px 12px; }
.oferta__spec dd { font-size: 0.9rem; }
.karta-auta__spec--rzad { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 8px 0 0; padding-bottom: 0; border-bottom: 0; }
.karta-auta__spec--rzad > div { min-width: 0; }