/* Fundament panelu: to, czego potrzebuje sam szkielet.
   Widok kroków siedzi w osobnych plikach `czesci/krok-*.css`.
   Datepicker, timepicker i noUiSlider wyleciały razem z filtrami kroku 1 —
   pola daty i godziny są natywne. */

/* Pasek kroków. W makiecie Astro pozycją kroku jest <button>, tutaj — <a> albo <span>,
   bo przeszłe kroki są linkami, a przyszłe nie są klikalne. */
.kroki__krok > a,
.kroki__krok > span {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 16px 9px 9px;
  border-radius: var(--promien-guzik);
  font-size: 0.9rem;
  font-weight: 560;
  color: var(--atrament-cichy);
  white-space: nowrap;
  transition: background var(--przejscie), color var(--przejscie);
}
.kroki__krok > span { opacity: 0.55; }
.kroki__krok.jest-aktywny > a,
.kroki__krok.jest-aktywny > span { background: var(--atrament); color: #fff; opacity: 1; }
.kroki__krok.jest-aktywny .kroki__numer { background: var(--pomarancz); color: var(--atrament); }
.kroki__krok.jest-za-nami > a,
.kroki__krok.jest-za-nami > span { color: var(--atrament); opacity: 1; }
.kroki__krok.jest-za-nami .kroki__numer { background: var(--atrament); color: #fff; }
.kroki__krok > a:hover { background: #fff; color: var(--atrament); }

/* Opis aktywnego kroku — na monitorze niepotrzebny, nazwy stoją w pasku. */
.kroki__opis { display: none; }

/* --------------------------------------------------------------------------
   Pasek kroków na telefonie
   Nazwy kroków nie mieszczą się w pigułce („Dodatki i akce…"), więc poniżej 860 px
   zostają same kółka z numerami połączone kreską, a nazwa aktywnego kroku schodzi
   pod pasek jako jedna linijka.
   -------------------------------------------------------------------------- */

@media (max-width: 859px) {
  .kroki {
    gap: 0;
    margin-top: 18px;
    padding: 0;
    background: none;
    border-radius: 0;
    overflow: visible;
    align-items: center;
  }
  .kroki__krok { flex: 1 1 0; display: flex; align-items: center; min-width: 0; }
  .kroki__krok:last-child { flex: 0 0 auto; }
  /* Kreska łącząca kółka. */
  .kroki__krok:not(:last-child)::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--kreska);
  }

  .kroki__nazwa { display: none; }

  .kroki__krok > a,
  .kroki__krok > span,
  .kroki__krok.jest-aktywny > a,
  .kroki__krok.jest-aktywny > span,
  .kroki__krok.jest-za-nami > a,
  .kroki__krok.jest-za-nami > span {
    width: auto;
    padding: 0;
    background: none;
    color: inherit;
    opacity: 1;
  }

  .kroki__numer {
    width: 34px;
    height: 34px;
    border: 1px solid var(--kreska);
    background: #fff;
    color: var(--atrament-cichy);
    font-size: 0.9rem;
  }
  .kroki__krok.jest-aktywny .kroki__numer { background: var(--pomarancz); border-color: var(--pomarancz); color: var(--atrament); }
  .kroki__krok.jest-za-nami .kroki__numer { background: var(--atrament); border-color: var(--atrament); color: #fff; }

  .kroki__opis {
    display: block;
    margin-top: 12px;
    font-size: 0.88rem;
    font-weight: 560;
    color: var(--atrament-cichy);
  }

  /* Lista aut ma startować wyżej — nagłówek kroku nie potrzebuje tyle powietrza. */
  .rezerwacja__naglowek { padding-bottom: 14px; }
}

/* Stare style panelu (`style/css/style.min.css`) nie są ładowane — zostają w repo tylko
   jako odniesienie. Do czasu przepisania kroków ich treść wygląda surowo i tak ma być. */
/* Układ kolumn siedzi w wspolne.css. */