/* ============================================================================
   REZERWACJA WIZYT — kreator czterokrokowy, motyw jasny.
   ============================================================================ */

.booking {
  overflow: hidden;
  background: var(--c-surface);
  border: 1px solid var(--s-line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-card);
}

.booking__body {
  padding: clamp(var(--sp-6), 4vw, var(--sp-9));
}

/* ----------------------------------------------------------------------------
   Pasek kroków
   ---------------------------------------------------------------------------- */
.booking__steps {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-5) clamp(var(--sp-6), 4vw, var(--sp-9));
  background: var(--c-surface-alt);
  border-bottom: 1px solid var(--s-line);
}

.bstep {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-muted);
  transition: color var(--d-base) var(--e-out);
}

.bstep__dot {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  border: 1px solid var(--s-line-strong);
  border-radius: 50%;
  background: var(--c-surface);
  font-size: var(--t-xs);
  transition:
    border-color var(--d-base) var(--e-out),
    background var(--d-base) var(--e-out),
    color var(--d-base) var(--e-out);
}

.bstep[data-state='active'] {
  color: var(--c-accent-strong);
  font-weight: 500;
}

/* Krok już przebyty jest drogą powrotu — patrz `booking.js`. Klasę nadaje
   `render()`, więc stan „klikalne" nie może rozjechać się z tym, co jest
   naprawdę dostępne. Cel dotykowy to całe `.bstep`, nie samo kółko:
   na telefonie 28 px to za mało, żeby trafić palcem. */
.bstep.is-clickable {
  cursor: pointer;
}
.bstep.is-clickable:hover .bstep__dot,
.bstep.is-clickable:focus-visible .bstep__dot {
  border-color: var(--c-accent);
  background: var(--c-accent-tint);
  color: var(--c-accent-strong);
}
.bstep.is-clickable:hover,
.bstep.is-clickable:focus-visible {
  color: var(--c-accent-strong);
}
/* Obrys na całej pozycji zamiast na kółku — inaczej ostrość klawiatury
   obejmowała sam numer i nie było widać, czego dotyczy. */
.bstep.is-clickable:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 4px;
  border-radius: var(--r-md);
}
.bstep[data-state='active'] .bstep__dot {
  border-color: var(--c-accent);
  background: var(--c-accent);
  color: #fff;
}

.bstep[data-state='done'] {
  color: var(--c-ink-soft);
}
.bstep[data-state='done'] .bstep__dot {
  border-color: var(--c-vital);
  background: var(--c-vital-tint);
  color: var(--c-vital);
}

.bstep__line {
  flex: 1;
  height: 1px;
  background: var(--s-line-strong);
  min-width: var(--sp-3);
}

/* Na telefonie nie mieszczą się wszystkie cztery nazwy kroków, ale ukrywanie
   ich wszystkich zostawiało cztery nagie kółka „1 — 2 — 3 — 4”. Nazwa kroku,
   w którym pacjent właśnie jest, mieści się swobodnie i mówi mu, na czym
   stoi. */
@media (max-width: 760px) {
  .bstep__label {
    display: none;
  }
  .bstep[data-state='active'] .bstep__label {
    display: inline;
  }
}

/* ----------------------------------------------------------------------------
   Panele kroków
   ---------------------------------------------------------------------------- */
.booking__panel {
  display: none;
  animation: panel-in var(--d-slow) var(--e-out);
}
.booking__panel.is-active {
  display: block;
}

@keyframes panel-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}

.booking__title {
  margin-bottom: var(--sp-2);
  font-size: var(--t-xl);
}
.booking__hint {
  margin-bottom: var(--sp-6);
  font-size: var(--t-sm);
  color: var(--c-muted);
}

/* ----------------------------------------------------------------------------
   Krok 1 — wybór usługi
   ---------------------------------------------------------------------------- */
/* Jak w `.courses`: wnętrze karty rezerwacji ma przy 320 px tylko 216 px,
   więc twarde 16rem (256 px) wystawało poza `.booking`, które ma
   `overflow: hidden` — karty usług były przycinane od prawej. */
.services {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-3);
}

/* Cztery usługi układają się 2 × 2. Każdy kafelek jest wtedy wyraźnie szerszy
   niż wyższy (ok. 3:1), więc czyta się jak pozycja na liście, a nie jak
   kwadratowa płytka. `minmax(0, 1fr)` pilnuje, żeby kolumna mogła zejść poniżej
   swojego najdłuższego słowa — bez tego karta wystawała poza `.booking`, które
   ma `overflow: hidden`, i była ucinana od prawej.
   Poniżej 640 px jedna kolumna: przy dwóch kolumnach na telefonie opis usługi
   łamał się na sześć linii i kafelek robił się wyższy niż szerszy. */
@media (max-width: 640px) {
  .services {
    grid-template-columns: 1fr;
  }
}

.service {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  text-align: left;
  border: 1px solid var(--s-line-strong);
  border-radius: var(--r-md);
  background: var(--c-surface);
  transition:
    border-color var(--d-base) var(--e-out),
    background var(--d-base) var(--e-out),
    box-shadow var(--d-base) var(--e-out);
}
.service:hover {
  border-color: var(--c-accent);
  box-shadow: var(--sh-md);
}
.service[aria-pressed='true'] {
  border-color: var(--c-accent);
  border-width: 2px;
  background: var(--c-accent-tint);
  padding: calc(var(--sp-5) - 1px);
}

.service__name {
  font-family: var(--f-display);
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--c-ink);
}
.service__desc {
  font-size: var(--t-sm);
  color: var(--c-muted);
  line-height: var(--lh-snug);
}
.service__meta {
  display: flex;
  gap: var(--sp-4);
  margin-top: auto;
  padding-top: var(--sp-3);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  color: var(--c-accent-strong);
}

/* ----------------------------------------------------------------------------
   Krok 2 — kalendarz
   ---------------------------------------------------------------------------- */
.cal {
  max-width: 28rem;
}

.cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.cal__month {
  font-family: var(--f-display);
  font-size: var(--t-md);
  font-weight: 600;
  text-transform: capitalize;
}

.cal__nav {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--s-line-strong);
  border-radius: var(--r-md);
  background: var(--c-surface);
  color: var(--c-ink-soft);
  transition:
    border-color var(--d-fast) var(--e-out),
    color var(--d-fast) var(--e-out);
}
.cal__nav:hover:not(:disabled) {
  border-color: var(--c-accent);
  color: var(--c-accent);
}
.cal__nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.cal__nav svg {
  width: 1rem;
  height: 1rem;
}

/* `minmax(0, 1fr)`, nie samo `1fr`.
   `1fr` ma automatyczne minimum równe min-content ścieżki, a odkąd `.cal__day`
   ma `min-height: 2.75rem` przy `aspect-ratio: 1`, to minimum wynosi 44 px.
   Przy 320 px siedem takich ścieżek plus odstępy dawało 332 px w polu 246 px
   i niedziela wyjeżdżała za ekran. `minmax(0, …)` zdejmuje tę podłogę, więc
   ścieżka może zejść niżej, a wysokość 44 px zostaje. */
.cal__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--sp-2);
}

.cal__dow {
  padding-bottom: var(--sp-2);
  text-align: center;
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-muted);
}

.cal__day {
  position: relative;
  aspect-ratio: 1;
  /* Kwadrat na szerokich ekranach; na wąskich proporcja ustępuje wysokości —
     patrz blok `@media (max-width: 30rem)` niżej. Uwaga na przyszłość:
     `aspect-ratio` i `min-height` na tym samym elemencie siatki się wykluczają.
     Przeglądarka policzy wtedy szerokość z (podniesionej) wysokości, komórka
     przestanie słuchać swojej ścieżki i sąsiednie dni zaczną na siebie
     nachodzić — przy 320 px o 8 px. `min-width: 0` tego NIE naprawia. */
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  color: var(--c-faint);
  transition:
    background var(--d-fast) var(--e-out),
    border-color var(--d-fast) var(--e-out),
    color var(--d-fast) var(--e-out);
}

.cal__day--empty {
  pointer-events: none;
}

.cal__day[data-available='true'] {
  background: var(--c-surface);
  border-color: var(--s-line-strong);
  color: var(--c-ink);
  font-weight: 500;
}
.cal__day[data-available='true']:hover {
  border-color: var(--c-accent);
  background: var(--c-accent-tint);
}

/* Kropka = wolne terminy. Nigdy sam kolor — dni bez terminów są wygaszone,
   mają `disabled` i opis w `aria-label`. */
.cal__day[data-available='true']::after {
  content: '';
  position: absolute;
  bottom: 0.3rem;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 50%;
  background: var(--c-vital);
}

.cal__day:disabled {
  cursor: not-allowed;
}

.cal__day[aria-pressed='true'] {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
  font-weight: 600;
}
.cal__day[aria-pressed='true']::after {
  background: #fff;
}

.cal__day--today {
  box-shadow: inset 0 0 0 1px var(--c-accent-line);
}

/* ----------------------------------------------------------------------------
   Tryb zakresu — wypożyczenie sprzętu (`Calendar` z `mode: 'range'`)

   Kalendarz jest ten sam, co przy rezerwacji wizyty. Różni się sensem
   zaznaczenia: tam jeden dzień, tu odcinek od odbioru do zwrotu.

   Kropka wolnych terminów tu nie występuje — sprzęt nie ma „godzin”, tylko
   jest wolny albo nie — więc dni wypożyczenia jej nie rysują.
   ---------------------------------------------------------------------------- */
/* Kropka oznacza „są wolne godziny tego dnia”. Sprzęt nie ma godzin — jest
   wolny albo go nie ma — więc w trybie zakresu kropka tylko myli. */
.cal__grid--range .cal__day::after {
  content: none;
}

.cal__day--busy {
  /* Skreślenie, nie sam kolor: dzień zajęty musi być czytelny również dla
     kogoś, kto nie odróżnia odcieni. Do tego `disabled` i „sprzęt zajęty”
     w `aria-label`. */
  text-decoration: line-through;
  opacity: 0.55;
}

/* UWAGA NA WAGĘ SELEKTORÓW: dzień dostępny jest malowany przez
   `.cal__day[data-available='true']` — klasa + atrybut. Sama klasa
   `.cal__day--in-range` ma wagę niższą i przegrywa, przez co zaznaczony
   odcinek zostawał biały. Dlatego reguły zakresu też noszą ten atrybut. */
.cal__day--in-range[data-available='true'] {
  background: var(--c-accent-tint);
  border-color: transparent;
  color: var(--c-ink);
  /* Kwadratowe krańce sklejają dni w jeden pasek — widać odcinek, nie korale. */
  border-radius: 0;
}

.cal__day--range-start[data-available='true'],
.cal__day--range-end[data-available='true'] {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
  font-weight: 600;
}

/* Zaokrąglamy tylko zewnętrzne krańce odcinka. */
.cal__day--range-start[data-available='true'] { border-radius: var(--r-md) 0 0 var(--r-md); }
.cal__day--range-end[data-available='true']   { border-radius: 0 var(--r-md) var(--r-md) 0; }
.cal__day--range-start.cal__day--range-end[data-available='true'] { border-radius: var(--r-md); }

/* Podgląd spod kursora — słabszy niż wybór zatwierdzony, żeby dało się je
   odróżnić w trakcie wybierania. */
.cal__day--preview.cal__day--in-range[data-available='true'] {
  opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
  .cal__day--in-range,
  .cal__day--preview {
    transition: none;
  }
}

/* Wąski telefon: karta rezerwacji oddaje treści swoje marginesy, a kalendarz
   rezygnuje z kwadratowych komórek na rzecz wysokości palca.
   Rachunek, z którego wychodzi próg 30rem: przy 320 px na siatkę zostaje
   246 px, więc siedem kwadratów 44 px (308 px + odstępy) fizycznie się nie
   mieści. Zamiast ściskać kwadrat do 31 px, trzymamy 44 px w pionie i
   pozwalamy komórce być prostokątem — cel dotykowy rośnie z 31x31 na ~32x44,
   czyli z 961 na 1408 px kwadratowych. Powyżej 480 px kwadrat wychodzi
   naturalnie ponad 44 px, więc tam nic nie zmieniamy. */
@media (max-width: 30rem) {
  .booking__body,
  .booking__steps,
  .booking__nav {
    padding-inline: var(--sp-4);
  }
  .cal__grid {
    gap: var(--sp-1);
  }
  .cal__day {
    aspect-ratio: auto;
    min-height: 2.75rem;
  }
}

/* ----------------------------------------------------------------------------
   Krok 3 — godziny
   ---------------------------------------------------------------------------- */
.slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
  gap: var(--sp-3);
}

@media (min-width: 760px) and (min-height: 700px) {
  .slots {
    max-height: 22rem;
    overflow-y: auto;
    padding-right: var(--sp-2);
    scrollbar-width: thin;
    overscroll-behavior: contain;
  }
}

.slot {
  padding: 0.75rem 0.5rem;
  border: 1px solid var(--s-line-strong);
  border-radius: var(--r-md);
  background: var(--c-surface);
  font-family: var(--f-mono);
  font-size: var(--t-sm);
  color: var(--c-ink);
  text-align: center;
  transition:
    border-color var(--d-fast) var(--e-out),
    background var(--d-fast) var(--e-out),
    color var(--d-fast) var(--e-out);
}
.slot:hover {
  border-color: var(--c-accent);
  background: var(--c-accent-tint);
}
.slot[aria-pressed='true'] {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
  font-weight: 600;
}

.slots__group + .slots__group {
  margin-top: var(--sp-6);
}
.slots__group h4 {
  margin-bottom: var(--sp-4);
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
}

/* ----------------------------------------------------------------------------
   Krok 4 — formularz
   ---------------------------------------------------------------------------- */
.form {
  display: grid;
  gap: var(--sp-5);
  max-width: 34rem;
}

.field {
  display: grid;
  gap: var(--sp-2);
  /* Wiersze trzymają swoją wysokość zamiast rozciągać się do wysokości
     sąsiada. Bez tego para pól w `.field-row` rozjeżdżała się w pionie:
     obie kolumny są tak samo wysokie, ale jedna ma trzy wiersze (etykieta,
     pole, błąd), a druga cztery (dochodzi „Ustalimy przy odbiorze") — więc
     nadmiar wysokości rozkładał się inaczej i pola startowały na różnych
     poziomach. Widać to było przy godzinach odbioru i zwrotu. */
  align-content: start;
}

.field__label {
  font-size: var(--t-sm);
  font-weight: 500;
  color: var(--c-ink);
}
.field__label span {
  color: var(--c-error);
}

.field__input {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  background: var(--c-surface);
  border: 1px solid var(--s-line-strong);
  border-radius: var(--r-md);
  color: var(--c-ink);
  /* Podłoga 16 px jest wymuszona przez Safari na iOS: pole z mniejszym pismem
     powoduje automatyczne przybliżenie widoku przy kliknięciu, a po nim układ
     nie mieści się już w ekranie i klawiatura zasłania resztę formularza.
     `--t-base` schodzi na telefonach do 15,79 px — brakowało ułamka piksela.
     Na szerokich ekranach wygrywa `--t-base`, więc skala typograficzna
     zostaje nietknięta. */
  font-size: max(16px, var(--t-base));
  transition:
    border-color var(--d-fast) var(--e-out),
    box-shadow var(--d-fast) var(--e-out);
}
.field__input::placeholder {
  color: var(--c-faint);
}
.field__input:hover {
  border-color: var(--c-muted);
}
.field__input:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-tint);
}
.field__input[aria-invalid='true'] {
  border-color: var(--c-error);
}

textarea.field__input {
  min-height: 6rem;
  resize: vertical;
  line-height: var(--lh-normal);
}

.field__error {
  font-size: var(--t-xs);
  color: var(--c-error);
  min-height: 1em;
}

/* --- Pole daty z przeszłości (data urodzenia, data zabiegu) -----------------
   Znaczniki buduje `booking/dateField.js`. Sama siatka dni korzysta z klas
   `.cal__*` z kroku 2 — oba kalendarze na stronie mają być tym samym
   przedmiotem, więc wygląd dni, nagłówka i strzałek nie jest tu powtarzany.
   ---------------------------------------------------------------------------- */
.datefield {
  position: relative;
  display: flex;
}

/* Miejsce na przycisk kalendarza po prawej stronie pola. Bez tego długa data
   wchodziłaby pod ikonę. */
.datefield .field__input {
  padding-right: 3.2rem;
}

.datefield__toggle {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-md);
  color: var(--c-muted);
  transition:
    color var(--d-fast) var(--e-out),
    background var(--d-fast) var(--e-out);
}
.datefield__toggle:hover {
  color: var(--c-accent);
  background: var(--c-accent-tint);
}
.datefield__toggle[aria-expanded='true'] {
  color: var(--c-accent);
  background: var(--c-accent-tint);
}
.datefield__toggle svg {
  width: 1.15rem;
  height: 1.15rem;
}

.datefield__panel {
  margin-top: var(--sp-3);
  padding: var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--s-line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-md);
  /* `.cal` daje 28rem; w formularzu panel ma trzymać się szerokości pola. */
  max-width: none;
}

/* Nagłówek panelu — zamiast nazwy miesiąca stoją tu dwie listy, bo do rocznika
   1985 nie da się dojść strzałkami. Strzałki zostają do sąsiednich miesięcy. */
.datefield__head {
  margin-bottom: var(--sp-4);
}

.datefield__selects {
  display: flex;
  flex: 1;
  gap: var(--sp-2);
  min-width: 0;
}

.datefield__select {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0.5rem;
  background: var(--c-surface);
  border: 1px solid var(--s-line-strong);
  border-radius: var(--r-md);
  color: var(--c-ink);
  font-family: var(--f-display);
  font-weight: 600;
  /* Ta sama podłoga 16 px, co w `.field__input` — Safari na iOS przybliża
     widok przy każdym polu z mniejszym pismem, także przy `<select>`. */
  font-size: max(16px, var(--t-sm));
  text-align: center;
}
.datefield__select:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 3px var(--c-accent-tint);
}

/* Kropka pod dniem znaczy „są wolne godziny”. W wyborze daty urodzenia nie ma
   żadnych godzin — tak samo jak w trybie zakresu przy wypożyczeniu. */
.cal__grid--picker .cal__day::after {
  content: none;
}

/* Panel jest węższy niż kalendarz z kroku 2, a data urodzenia to jedno
   kliknięcie — nie warto trzymać kwadratowych komórek za wszelką cenę.
   Wysokość 2,5 rem zostaje: to nadal cel dotykowy, nie sam napis. */
.cal__grid--picker {
  gap: var(--sp-1);
}
.cal__grid--picker .cal__day {
  aspect-ratio: auto;
  min-height: 2.5rem;
}

/* Wiersz „Rodzaj operacji + Data zabiegu” idzie na jedną kolumnę, gdy data ma
   pod sobą kalendarz. Formularz ma najwyżej 34 rem, więc połowa wiersza to
   ~256 px — siedem kolumn dni schodziłoby tam do 28 px i przestałoby być
   klikalne palcem. Bez JavaScriptu `.datefield` nie powstaje i wiersz zostaje
   dwukolumnowy, bo są tam wtedy dwa zwykłe pola tekstowe. */
.field-row:has(.datefield) {
  grid-template-columns: 1fr;
}

/* --- Uniwersalne elementy formularza ---------------------------------------
   Używa ich zarówno kreator rezerwacji, jak i wypożyczalnia, dlatego mieszkają
   przy `.field`, a nie w arkuszu jednej sekcji. */

/* Dwa powiązane pola obok siebie — jedna decyzja, nie dwie osobne pozycje
   gdzieś pod sobą w formularzu. Poniżej 480 px para przestaje się mieścić
   wygodnie i spada do jednej kolumny, tak jak `.services` w kreatorze
   rezerwacji. Wiersz z polem daty rozwijającym kalendarz stoi na jednej
   kolumnie zawsze — patrz `.field-row:has(.datefield)` wyżej. */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-4);
}
@media (max-width: 480px) {
  .field-row {
    grid-template-columns: 1fr;
  }
}

/* Notka pod polem e-mail - nie błąd, więc nie `.field__error`, ale musi być
   równie dyskretna jak on. */
.field-hint {
  font-size: var(--t-xs);
  color: var(--c-muted);
}

/* Zgoda marketingowa jest opcjonalna - `.consent` (ramka, tło, obowiązkowość)
   zarezerwowana zostaje dla zgody RODO. Ta sama treść bez oprawy: różnica
   w wadze wizualnej mówi „to nie jest wymagane”, zanim ktokolwiek przeczyta
   tekst. */
.field-checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  cursor: pointer;
}
.field-checkbox input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  flex: none;
  accent-color: var(--c-accent);
  cursor: pointer;
}
.field-checkbox span {
  font-size: var(--t-sm);
  color: var(--c-muted);
  line-height: var(--lh-snug);
}

/* Pułapka na boty. */
.field--trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-4);
  border: 1px solid var(--s-line-strong);
  border-radius: var(--r-md);
  background: var(--c-surface-alt);
  cursor: pointer;
  transition: border-color var(--d-fast) var(--e-out);
}
.consent:hover {
  border-color: var(--c-muted);
}
/* Link do polityki prywatności wewnątrz treści zgody. Klik na `<a>` nie
   przełącza checkboksu (przeglądarka wyklucza z tego zachowania interaktywne
   potomki etykiety), więc wystarczy go tylko odróżnić wizualnie od reszty
   tekstu. */
.consent a {
  color: var(--c-accent-strong);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}
.consent a:hover {
  color: var(--c-accent);
}

.consent input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.15rem;
  accent-color: var(--c-accent);
  cursor: pointer;
}
.consent span {
  font-size: var(--t-sm);
  color: var(--c-muted);
  line-height: var(--lh-snug);
}
.consent--invalid {
  border-color: var(--c-error);
  background: var(--c-error-tint);
}

/* ----------------------------------------------------------------------------
   Podsumowanie wyboru
   ---------------------------------------------------------------------------- */
.summary {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-6);
  padding: var(--sp-5);
  margin-bottom: var(--sp-6);
  border: 1px solid var(--c-accent-line);
  border-radius: var(--r-md);
  background: var(--c-accent-tint);
}

.summary__item {
  display: grid;
  gap: var(--sp-1);
}
.summary__k {
  font-family: var(--f-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-accent-strong);
}
.summary__v {
  font-family: var(--f-display);
  font-size: var(--t-md);
  font-weight: 600;
  color: var(--c-ink);
}

/* ----------------------------------------------------------------------------
   Nawigacja kreatora
   ---------------------------------------------------------------------------- */
.booking__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  justify-content: space-between;
  padding: var(--sp-5) clamp(var(--sp-6), 4vw, var(--sp-9));
  background: var(--c-surface-alt);
  border-top: 1px solid var(--s-line);
}

/* ----------------------------------------------------------------------------
   Stany
   ---------------------------------------------------------------------------- */
.state {
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
  color: var(--c-muted);
  font-size: var(--t-sm);
}

.skeleton {
  border-radius: var(--r-md);
  background: linear-gradient(
    90deg,
    var(--c-surface-alt) 25%,
    var(--c-surface-sunken) 50%,
    var(--c-surface-alt) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}
@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}
.skeleton--card {
  height: 9rem;
}

/* --- potwierdzenie --- */
.confirmation {
  display: grid;
  gap: var(--sp-5);
  justify-items: center;
  padding: var(--sp-7) var(--sp-4);
  text-align: center;
}

.confirmation__mark {
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  border-radius: 50%;
  background: var(--c-vital-tint);
  color: var(--c-vital);
  animation: mark-in var(--d-slow) var(--e-spring);
}
.confirmation__mark svg {
  width: 1.6rem;
  height: 1.6rem;
}
@keyframes mark-in {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
}

.confirmation__ref {
  padding: var(--sp-3) var(--sp-6);
  border: 1px dashed var(--c-accent-line);
  border-radius: var(--r-md);
  background: var(--c-accent-tint);
  font-family: var(--f-mono);
  font-size: var(--t-lg);
  letter-spacing: var(--ls-wide);
  color: var(--c-accent-strong);
}

.confirmation__details {
  display: grid;
  gap: var(--sp-3);
  width: min(26rem, 100%);
  padding: var(--sp-5);
  border: 1px solid var(--s-line);
  border-radius: var(--r-md);
  text-align: left;
}
.confirmation__row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  font-size: var(--t-sm);
}
.confirmation__row dt {
  color: var(--c-muted);
}
.confirmation__row dd {
  color: var(--c-ink);
  font-weight: 500;
  text-align: right;
}

/* ----------------------------------------------------------------------------
   Awaria backendu
   ---------------------------------------------------------------------------- */
.booking__fallback {
  display: none;
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
}
.booking.is-offline .booking__fallback {
  display: block;
}
.booking.is-offline .booking__steps,
.booking.is-offline .booking__panel,
.booking.is-offline .booking__nav,
.booking.is-offline .booking__body {
  display: none;
}

/* ============================================================================
   KONTO PACJENTA — wybór w kroku „Dane”

   Trzy równorzędne możliwości, bez wyróżniania żadnej wizualnie.
   To jest świadome: podbicie „Utwórz konto” kolorem albo rozmiarem byłoby
   popychaniem pacjenta do zostawienia kolejnych danych, a gość ma tu być
   pełnoprawnym wyborem, nie opcją drugiej kategorii.
   ============================================================================ */

.account-choice {
  margin: var(--sp-5) 0 0;
  padding: var(--sp-4);
  border: 1px solid var(--s-line);
  border-radius: var(--r-lg);
  background: var(--c-surface-alt);
  display: grid;
  gap: var(--sp-4);
}

.account-choice__legend {
  padding: 0 var(--sp-2);
  font-weight: 600;
  color: var(--c-ink);
  font-size: var(--t-base);
}

.account-choice__options {
  display: grid;
  gap: var(--sp-2);
}

.achoice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-3);
  align-items: start;
  padding: var(--sp-3);
  border: 1px solid var(--s-line);
  border-radius: var(--r-md);
  background: var(--c-surface);
  cursor: pointer;
}

.achoice:hover {
  border-color: var(--c-muted);
}

/* Zaznaczona możliwość musi być rozpoznawalna BEZ patrzenia na sam kropkowany
   znacznik — na telefonie jest za mały, żeby był pierwszym, co widać. */
.achoice:has(input:checked) {
  border-color: var(--c-accent);
  box-shadow: 0 0 0 2px var(--c-accent-tint);
}

.achoice:has(input:focus-visible) {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.achoice input {
  margin-top: 0.2rem;
  accent-color: var(--c-accent);
  width: 1.05rem;
  height: 1.05rem;
}

.achoice__body {
  display: grid;
  gap: var(--sp-1);
}

.achoice__name {
  font-weight: 600;
  color: var(--c-ink);
}

.achoice__desc {
  font-size: var(--t-sm);
  color: var(--c-muted);
  line-height: var(--lh-normal);
}

.account-choice__panel {
  display: grid;
  gap: var(--sp-4);
  padding-top: var(--sp-1);
}

.account-choice__panel[hidden] {
  display: none;
}

.account-choice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
}

.account-choice__link {
  color: var(--c-accent);
  font-size: var(--t-sm);
}

.account-choice__status {
  margin: 0;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--t-sm);
  line-height: var(--lh-normal);
  background: var(--c-surface-sunken);
  color: var(--c-ink-soft);
}

.account-choice__status[data-kind='ok'] {
  background: var(--c-vital-tint);
  color: var(--c-vital);
}

.account-choice__status[data-kind='error'] {
  background: var(--c-error-tint);
  color: var(--c-error);
}

/* --- co się stało z kontem, pokazywane na potwierdzeniu ------------------- */

.account-note {
  margin: var(--sp-5) 0 0;
  padding: var(--sp-4);
  border-radius: var(--r-md);
  border-left: 3px solid var(--s-line-strong);
  background: var(--c-surface-alt);
  color: var(--c-ink-soft);
  font-size: var(--t-sm);
  line-height: var(--lh-normal);
  text-align: left;
}

.account-note--ok {
  border-left-color: var(--c-vital);
  background: var(--c-vital-tint);
}

.account-note a {
  color: var(--c-accent);
}

/* Informacja o zasadach dostępu w kroku „Dane". Ten sam blok co w panelu —
   ta sama treść ma wyglądać tak samo w obu miejscach. */
.account-choice .info-ochrona {
  border: 1px solid var(--c-accent-line);
  background: var(--c-gold-tint);
  border-radius: var(--r-md);
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-3);
  font-size: var(--t-sm);
  line-height: var(--lh-normal);
  color: var(--c-ink-soft);
}
.account-choice .info-ochrona p { margin: 0; }
.account-choice .info-ochrona__tytul {
  margin: 0;
  font-family: var(--f-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--c-ink);
}
.account-choice .info-ochrona__drobne { color: var(--c-muted); font-size: 0.85em; }
.account-choice .info-ochrona a { color: var(--c-accent); }