/* ==========================================================================
   Rezerwacja (P3): /wizyty/rejestracja-online i /wizyta/{token}.
   Elegancki minimalizm (SPEC §19): kroki z małymi cyframi sans i hairline, płaskie karty wyboru,
   czysta siatka kalendarza, godziny jako przyciski z hairline, podsumowanie jako zwykła biała karta.
   Klasy komponentów F1 (choice-card, placecard, field, check, alert, btn) - tu tylko układ i detale.
   ========================================================================== */

/* ---------- Nagłówek strony ---------- */
.bk-intro { padding-bottom: clamp(1.75rem, 1rem + 2.5vw, 3rem); }
.bk-intro .page-intro__title { max-width: 14ch; }
.bk-intro__phone { font-size: var(--fs-small); color: var(--muted); display: inline-flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; }
.bk-intro__tel { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .3em; }
.bk-intro__tel .icon { color: var(--muted); width: 1.05rem; height: 1.05rem; }

/* ---------- Układ: kroki + winietka ---------- */
.bk-section { padding-bottom: var(--sec-y); }
.bk-flash { margin-bottom: 2rem; max-width: 46rem; }
.bk { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
@media (min-width: 1024px) {
  .bk { grid-template-columns: minmax(0, 1fr) 20.5rem; }
  .bk__aside { position: sticky; top: calc(var(--header-h) + 1.75rem); }
}
@media (min-width: 1280px) { .bk { grid-template-columns: minmax(0, 1fr) 22.5rem; } }
.bk__main { min-width: 0; }
.bk-form__alert { margin-bottom: 1.5rem; }

/* ---------- Kroki: mała cyfra sans, hairline między krokami ---------- */
.bk-steps-wrap { position: relative; --num: 1.75rem; --gap-x: clamp(.75rem, 1.6vw, 1.25rem); }
.bk-steps { list-style: none; display: grid; border-bottom: 1px solid var(--line); }
/* Szyna postępu (data-progress, booking.js) zostaje w HTML, ale nie jest rysowana - kroki dzieli hairline. */
.bk-steps__rail { display: none; }

.bk-step { position: relative; display: grid; grid-template-columns: var(--num) minmax(0, 1fr); column-gap: var(--gap-x); padding: clamp(1.25rem, 2.5vw, 1.625rem) 0 clamp(2.25rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.bk-step__head { grid-column: 1 / -1; display: grid; grid-template-columns: var(--num) minmax(0, 1fr) auto; column-gap: var(--gap-x); align-items: baseline; min-height: 2.75rem; }
.bk-step__num {
  display: inline-flex; align-items: baseline; color: var(--ink); font-weight: 600; font-size: .9375rem; font-variant-numeric: tabular-nums lining-nums;
  transition: color var(--t-ui) var(--ease-out);
}
.bk-step__check { display: none; width: 1rem; height: 1rem; align-self: center; color: var(--brand); }
.bk-step__heading { min-width: 0; }
.bk-step__title { font-family: var(--font-text); font-weight: 600; font-size: 1.25rem; line-height: 1.3; letter-spacing: 0; color: var(--ink); }
.bk-step__title:focus { outline: none; }
.bk-step__title:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; border-radius: var(--r-xs); }
.bk-step__value { display: none; margin-top: .15rem; font-size: .96875rem; line-height: 1.45; color: var(--ink-2); text-wrap: pretty; }
.bk-step__edit {
  display: none; align-self: center; min-height: 2.75rem; padding: 0 .25rem; font-size: .9375rem; font-weight: 500; color: var(--ink);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; text-decoration-color: var(--line-strong);
  transition: color var(--t-fast) var(--ease-out), text-decoration-color var(--t-fast) var(--ease-out);
}
.bk-step__body { grid-column: 2; min-width: 0; padding-top: clamp(1rem, 2vw, 1.5rem); }
.bk-step__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.bk-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.bk-nojs-note { margin-top: .75rem; font-size: var(--fs-small); color: var(--muted); max-width: 46ch; }

/* Stany kroków - tylko z JavaScriptem (bez JS wszystkie kroki są otwarte jak zwykły formularz). */
.pj-js .bk-step.is-done .bk-step__num { color: var(--brand); }
.pj-js .bk-step.is-done .bk-step__digit { display: none; }
.pj-js .bk-step.is-done .bk-step__check { display: block; }
.pj-js .bk-step.is-locked .bk-step__num { color: var(--muted); }
.pj-js .bk-step:not(.is-open) .bk-step__title { font-size: 1.0625rem; }
.pj-js .bk-step.is-locked .bk-step__title { color: var(--muted); }
.pj-js .bk-step.is-done .bk-step__value:not(:empty) { display: block; }
.pj-js .bk-step.is-done .bk-step__edit { display: inline-flex; align-items: center; }
.pj-js .bk-step.is-done, .pj-js .bk-step.is-locked, .pj-js .bk-step.is-redo { padding-block: .875rem; }
.pj-js .bk-step.is-locked > .bk-step__body,
.pj-js .bk-step.is-done > .bk-step__body,
.pj-js .bk-step.is-redo > .bk-step__body { display: none; }
/* Termin do ponownego wyboru (po „zajęty / niedostępny"): zwinięty jak ukończony, ale bez „ptaszka", z ciepłą notką i „Zmień". */
.pj-js .bk-step.is-redo .bk-step__num { color: var(--warning); }
.pj-js .bk-step.is-redo .bk-step__value { display: block; color: var(--warning); font-weight: 600; }
.pj-js .bk-step.is-redo .bk-step__edit { display: inline-flex; align-items: center; }
.pj-js .bk-continue + .bk-refresh, .pj-js .bk-refresh, .pj-js .bk-nojs-note { display: none; }
html:not(.pj-js) .bk-continue { display: none; }
/* Zapas: gdyby booking.js się nie wczytał, po 3 s kroki rozkładają się jak bez JS (opóźnienie mocniejsze niż reguła „bez ruchu"). */
.pj-js .bk:not(.is-live) .bk-step > .bk-step__body,
.pj-js .bk:not(.is-live) .bk-nojs { animation: bk-safety 1ms linear 3s forwards !important; }
@keyframes bk-safety { to { display: block; } }

/* Otwarcie kroku: jedno łagodne wejście (12 px, ease-out). */
@keyframes bk-unfold { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.bk-step.is-unfolding > .bk-step__body { transform-origin: 50% 0; animation: bk-unfold 480ms var(--ease-out) both; }
@keyframes bk-value-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.bk-step.is-done .bk-step__value.is-written { animation: bk-value-in 320ms var(--ease-out) both; }

/* ---------- Krok 1: rodzaj wizyty - płaskie karty z hairline, cena po prawej ---------- */
.bk-types { display: grid; gap: .75rem; }
.bk-type { padding: 1.25rem 3.5rem 1.25rem 1.375rem; background: var(--white); }
.bk-type .choice-card__body { gap: .35rem; }
.bk-type__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.bk-type__name { font-family: var(--font-text); font-weight: 600; font-size: 1.0625rem; line-height: 1.35; min-width: 0; text-wrap: balance; }
.bk-type__price { font-weight: 600; font-size: 1.0625rem; line-height: 1.35; color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.bk-type__meta { font-size: var(--fs-small); color: var(--muted); }
.bk-type .choice-card__desc { max-width: 58ch; text-wrap: pretty; }
/* Telefon: treść kroku na całą szerokość (cyfra zostaje tylko w nagłówku kroku). */
@media (max-width: 639px) { .bk-step__body { grid-column: 1 / -1; } }
@media (max-width: 559px) {
  .bk-type { padding: 1.125rem 3rem 1.125rem 1.125rem; }
  .bk-type__row { flex-wrap: wrap; row-gap: .25rem; }
  .bk-type__name { flex: 1 0 100%; }
  .bk-type .choice-card__mark { top: 1rem; right: .875rem; }
}

/* ---------- Krok 2: forma wizyty ---------- */
.bk-modes .choice-card { height: 100%; background: var(--white); }
.bk-mode .choice-card__desc { text-wrap: pretty; }
.pj-js .bk-mode.is-unavailable { display: none; }
.bk-mode.is-unavailable .choice-card__desc { color: var(--muted); }

/* ---------- Krok 3: termin ---------- */
.bk-sub { font-size: .875rem; font-weight: 500; line-height: 1.4; color: var(--ink-2); margin-bottom: .875rem; }
.bk-next { margin-bottom: clamp(2rem, 4vw, 2.75rem); }
.bk-next__list .placecard { cursor: pointer; }
/* Wybrany termin: ten sam cichy rząd hairline, zaznaczenie kolorem marki, kreską pod komórką i znakiem ✓ zamiast →. */
.bk-next__list .placecard.is-selected { box-shadow: inset 0 -2px 0 var(--brand); }
.bk-next__list .placecard.is-selected .placecard__name,
.bk-next__list .placecard.is-selected .placecard__when { color: var(--brand); }
.bk-next__list .placecard.is-selected .placecard__sep { background: var(--brand); opacity: 1; }
.bk-next__list .placecard.is-selected::after { content: "\2713"; color: var(--brand); transform: none; }

html:not(.pj-js) .bk-picker { display: none; }
.pj-js .bk-nojs { display: none; }
.bk-cal-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (min-width: 720px) {
  .bk-cal-grid { grid-template-columns: minmax(17.5rem, 20rem) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.25rem); }
  /* Długa lista godzin: kalendarz zostaje w zasięgu wzroku. */
  .bk-cal { position: sticky; top: calc(var(--header-h) + 1.25rem); }
}
@media (max-width: 479px) {
  .bk-cal__nav { width: 2.5rem; height: 2.5rem; }
  .bk-cal__core { padding: .75rem .625rem .875rem; }
}

/* Kalendarz miesiąca: jedna biała karta z hairline, czysta siatka. */
.bk-cal { border-radius: var(--r); background: var(--white); border: 1px solid var(--line); }
.bk-cal__core { position: relative; padding: 1rem 1rem 1.125rem; }
.bk-cal__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .625rem; }
.bk-cal__month { flex: 1 1 auto; font-weight: 600; font-size: 1rem; line-height: 1.3; color: var(--ink); padding-left: .25rem; min-width: 0; }
.bk-cal__nav {
  display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-pill); color: var(--ink); border: 1px solid var(--line);
  transition: background-color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.bk-cal__nav .icon { width: 1rem; height: 1rem; }
.bk-cal__nav:active { transform: scale(.94); }
.bk-cal__nav:disabled { opacity: .35; cursor: default; }
.bk-cal__navs { flex: none; display: flex; gap: .375rem; }
.bk-cal__dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 0 0 .5rem; margin-bottom: .375rem; border-bottom: 1px solid var(--line); }
.bk-cal__dow > span { text-align: center; font-size: .75rem; font-weight: 500; color: var(--muted); white-space: nowrap; }
.bk-cal__dow-s { display: none; }
/* Wąski kalendarz (320 px): „pn wt śr cz pt sb nd" zamiast „niedz", które łamało się w kolumnie. */
.bk-cal { container-type: inline-size; }
@container (max-width: 17rem) {
  .bk-cal__dow-l { display: none; }
  .bk-cal__dow-s { display: inline; }
}
.bk-cal__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; transition: opacity var(--t-ui) var(--ease-out); }
.bk-cal.is-loading .bk-cal__days { opacity: .35; }
.bk-cal__day {
  /* Tylko proporcja (bez min-height): min-height przez aspect-ratio stawała się min-width i rozpychała kalendarz na 320 px. */
  position: relative; display: grid; place-items: center; aspect-ratio: 1; min-width: 0; border-radius: 50%;
  font-size: .9375rem; font-variant-numeric: tabular-nums lining-nums; color: rgba(91, 107, 93, .62); font-weight: 400;
  transition: background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.bk-cal__day.is-pad { visibility: hidden; }
.bk-cal__day.is-today { box-shadow: inset 0 0 0 1px var(--line-strong); }
.bk-cal__day.is-free { color: var(--ink); font-weight: 600; cursor: pointer; }
.bk-cal__day.is-free::after { content: ""; position: absolute; left: 50%; bottom: 16%; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--brand); opacity: .55; }
.bk-cal__day.is-free:active { transform: scale(.94); }
.bk-cal__day[aria-pressed="true"] { background: var(--brand); color: var(--porcelain); box-shadow: none; }
.bk-cal__day[aria-pressed="true"]::after { background: var(--porcelain); opacity: .8; }
.bk-cal__day.is-closed { text-decoration: line-through; text-decoration-color: rgba(91, 107, 93, .45); }
.bk-cal__legend { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; padding: .625rem .375rem 0; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--muted); }
.bk-cal__legend::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--brand); opacity: .55; margin: 0 .25rem; }
.bk-cal__spinner { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; color: var(--brand); opacity: 0; transition: opacity var(--t-ui) var(--ease-out); }
.bk-cal.is-loading .bk-cal__spinner { opacity: 1; }
.bk-cal__spinner .icon { width: 1.5rem; height: 1.5rem; animation: bk-spin .9s linear infinite; }
@keyframes bk-spin { to { transform: rotate(360deg); } }

/* Godziny wybranego dnia. */
.bk-day { min-width: 0; }
.bk-day__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem 1rem; padding-bottom: .75rem; margin-bottom: 1rem; border-bottom: 1px solid var(--line); }
.bk-day__title { font-weight: 600; font-size: 1.0625rem; line-height: 1.35; color: var(--ink); }
.bk-day__count { font-size: var(--fs-small); color: var(--muted); }
.bk-day__group + .bk-day__group { margin-top: 1.125rem; }
.bk-day__part { font-size: .8125rem; font-weight: 500; color: var(--muted); margin-bottom: .5rem; }
.bk-day__empty { display: grid; gap: .75rem; justify-items: start; padding: 1.25rem; border-radius: var(--r); background: var(--white); border: 1px solid var(--line); color: var(--ink-2); font-size: .96875rem; }
.bk-day__empty .btn { margin-top: .25rem; }
@keyframes bk-times-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bk-day.is-fresh .bk-time { animation: bk-times-in 280ms var(--ease-out) both; }

/* Godzina: prosty przycisk z hairline, cyfry tabelaryczne. */
.bk-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr)); gap: .5rem; }
/* Telefon: zawsze cztery kolumny - przy kroku 15 min jeden wiersz to jedna godzina. */
@media (max-width: 719px) { .bk-times { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4375rem; } .bk-time { font-size: .9375rem; min-height: 2.875rem; } }
.bk-time {
  position: relative; display: grid; place-items: center; min-height: 3rem; border-radius: var(--r-pill); cursor: pointer;
  background: var(--white); border: 1px solid var(--line-strong); color: var(--ink); font-weight: 500; font-size: 1rem; font-variant-numeric: tabular-nums lining-nums;
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out);
}
.bk-time:active { transform: scale(.96); }
.bk-time input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.bk-time[aria-pressed="true"], .bk-time:has(input:checked) { background: var(--brand); border-color: var(--brand); color: var(--porcelain); }
.bk-time:has(input:focus-visible) { outline: 2px solid var(--focus-ring); outline-offset: 3px; }
.bk-time--alt { min-width: 11rem; padding-inline: .875rem; }
.bk-time.is-current { cursor: default; background: var(--glaze); border-style: dashed; color: var(--muted); }
.bk-time > span { position: relative; }

/* Bez JS: dni jako rozwijane listy. */
.bk-nojs__hint { font-size: .96875rem; color: var(--ink-2); margin-bottom: 1rem; }
.bk-nojs__alts { border: 0; padding: 0; margin: 0 0 1.5rem; }
.bk-nojs__day { border-top: 1px solid var(--line); }
.bk-nojs__day:last-of-type { border-bottom: 1px solid var(--line); }
.bk-nojs__summary { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; min-height: 3.25rem; padding: .875rem 0; cursor: pointer; list-style: none; }
.bk-nojs__summary::-webkit-details-marker { display: none; }
.bk-nojs__date { font-weight: 600; color: var(--ink); }
.bk-nojs__date::first-letter { text-transform: uppercase; }
.bk-nojs__count { font-size: var(--fs-small); color: var(--muted); }
.bk-nojs__day > .bk-times { padding-bottom: 1.25rem; }
.bk-nojs__more { margin-top: 1rem; font-size: var(--fs-small); color: var(--muted); }

/* ---------- Krok 4: dane ---------- */
.bk-recap { display: grid; gap: .1rem; padding: 1rem 1.25rem 1.125rem; margin-bottom: 1.75rem; border-radius: var(--r); background: var(--white); border: 1px solid var(--line); }
.bk-recap__name { font-size: .875rem; font-weight: 500; line-height: 1.4; color: var(--muted); }
.bk-recap__name::first-letter { text-transform: uppercase; }
.bk-recap__line { font-size: .9375rem; font-weight: 600; color: var(--ink); line-height: 1.45; }
/* Podsumowanie powtarzało trzy zamknięte kroki widoczne tuż wyżej - schowane. */
.bk-recap { display: none; }
.bk-taken { margin-bottom: 1.5rem; }
.bk-taken .placecards { margin-top: 1rem; }
.bk-taken__other { margin-top: 1rem; }
.bk-slot-alert { margin-bottom: 1.5rem; }
.bk-fields { margin-bottom: 1.5rem; align-items: start; }
.bk-fields .field, .bk-brief .field { align-content: start; }
.bk-name-help { margin-top: -.75rem; }
.bk-brief { display: grid; gap: 1.25rem; padding-top: 1.5rem; margin-bottom: 1.5rem; border-top: 1px solid var(--line); }
.bk-brief > fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.bk-inline-choices { display: flex; flex-wrap: wrap; gap: .625rem 1.5rem; margin-top: .5rem; }
.bk-consents { display: grid; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
/* Krótki wywiad P4a: wymagane pytania z gwiazdką jak pola F1 (pole „Pola oznaczone * są wymagane"). */
.bk-brief .bf-q[data-required] > .bf-q__fs > .bf-q__label::after,
.bk-brief .bf-q[data-required] > .bf-q__label::after,
.bk-brief .bf-q[data-required] .bf-consent__title::after { content: "*"; margin-left: .35rem; color: var(--danger); font-weight: 600; }
.bk-submit { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; gap: .875rem; margin-top: 2rem; }
.bk-submit__btn.is-loading:disabled { opacity: 1; }
.bk-submit__note { font-size: var(--fs-small); color: var(--ink-2); max-width: 44ch; text-wrap: pretty; }
.bk-submit__req { font-size: var(--fs-xs); color: var(--muted); }
@media (max-width: 479px) {
  .bk-submit__btn { width: 100%; justify-content: space-between; }
}
@media (max-width: 379px) {
  .bk-submit__btn { white-space: normal; text-align: left; }
}

/* ---------- Podsumowanie: zwykła biała karta ---------- */
.bk__aside { display: grid; gap: 1.5rem; }
@media (max-width: 1023px) { .bk__aside { display: none; } }
html:not(.pj-js) .bk-card { display: none; }
.bk-card { position: relative; padding: 1.5rem 1.5rem 1.25rem; border-radius: var(--r); background: var(--white); border: 1px solid var(--line); }
.bk-card__name { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2-sub); line-height: 1.15; letter-spacing: -.01em; color: var(--ink); padding-bottom: .875rem; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.bk-card__name::first-letter { text-transform: uppercase; }
.bk-card__rows { display: grid; }
.bk-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .6875rem 0; border-bottom: 1px solid var(--line); }
.bk-card__row:last-child { border-bottom: 0; padding-bottom: 0; }
.bk-card__row dt { font-size: var(--fs-small); color: var(--muted); flex: none; }
.bk-card__row dd { margin: 0; font-size: .9375rem; font-weight: 600; color: var(--ink); text-align: right; line-height: 1.4; text-wrap: pretty; }
.bk-card__row dd:empty::before { content: "\2013"; color: var(--muted); font-weight: 400; }
@keyframes bk-write { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.bk-card [data-sum].is-written { animation: bk-write 360ms var(--ease-out) both; }

.bk-host { display: flex; align-items: center; gap: 1rem; padding: 0 .25rem; }
.bk-host__img { width: 3.25rem; height: 3.25rem; border-radius: var(--r-sm); object-fit: cover; flex: none; }
.bk-host__text { min-width: 0; display: grid; gap: .1rem; }
.bk-host__sign { font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.bk-host__role { font-size: var(--fs-small); color: var(--muted); line-height: 1.45; }
.bk-host__contact { font-size: var(--fs-small); color: var(--ink-2); line-height: 1.6; }
.bk-host__contact a { color: inherit; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .25em; }
.bk-notes { list-style: none; display: grid; gap: .75rem; padding: 1.25rem .25rem 0; border-top: 1px solid var(--line); }
.bk-notes li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: .625rem; align-items: start; font-size: var(--fs-small); color: var(--ink-2); line-height: 1.5; }
.bk-notes .icon { color: var(--muted); margin-top: .15rem; width: 1.05rem; height: 1.05rem; }
.bk-notes__tel { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .25em; }

/* ---------- Strona wizyty ---------- */
.ap { padding-top: clamp(1.25rem, .75rem + 2.5vw, 3rem); padding-bottom: var(--sec-y); }
.ap__crumbs { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.ap-flash { margin-bottom: 1.75rem; max-width: 46rem; }
.ap__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
@media (min-width: 1024px) {
  .ap__grid { grid-template-columns: minmax(0, 1fr) 21rem; grid-template-areas: "head head" "card side"; column-gap: clamp(2.5rem, 5vw, 5rem); }
  .ap-head { grid-area: head; }
  .ap-card { grid-area: card; }
  .ap-side { grid-area: side; }
}
.ap-head { display: grid; gap: 1rem; max-width: 46rem; }
.ap-head__title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-h1); line-height: 1.05; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.ap-head__title em { font-style: normal; font-weight: inherit; color: inherit; }
.ap-head__lead { font-size: var(--fs-lede); line-height: 1.55; color: var(--ink-2); max-width: 38em; text-wrap: pretty; }

.ap-card {
  position: relative; max-width: 46rem; padding: clamp(1.5rem, 1rem + 2vw, 2.25rem) clamp(1.25rem, .75rem + 2.5vw, 2.5rem);
  border-radius: var(--r); background: var(--white); border: 1px solid var(--line);
}
.ap-card__status { margin-bottom: 1rem; }
.ap-card__name { font-size: .9375rem; font-weight: 500; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.ap-card__date { margin-top: .5rem; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.1; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.ap-card__time { margin-top: .5rem; font-size: 1.125rem; font-weight: 500; color: var(--ink-2); }
.ap-card__rows { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: 1.5rem; border-top: 1px solid var(--line); }
@media (min-width: 640px) { .ap-card__rows { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; } }
.ap-card__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--line); }
.ap-card__row dt { font-size: var(--fs-small); color: var(--muted); }
.ap-card__row dd { margin: 0; font-weight: 600; color: var(--ink); text-align: right; }
.ap-card__row--wide { grid-column: 1 / -1; }
.ap-card__row--wide dd { text-wrap: pretty; }
.ap-card__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.ap-card__hint { margin-top: .875rem; font-size: var(--fs-small); color: var(--muted); }
.ap-card.is-muted .ap-card__name, .ap-card.is-muted .ap-card__date { color: var(--muted); }
.ap-card.is-muted .ap-card__date { text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: var(--line-strong); }
@media (max-width: 559px) {
  .ap-card__actions .btn { width: 100%; justify-content: space-between; }
  .ap-card__row--wide { display: grid; gap: .25rem; }
  .ap-card__row--wide dd { text-align: left; }
}
/* Nowa rezerwacja: karta wchodzi jednym łagodnym ruchem. */
@keyframes ap-set { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.ap--new .ap-card { animation: ap-set 600ms var(--ease-out) 120ms both; }

.ap-status { display: inline-flex; align-items: center; gap: .45rem; min-height: 1.875rem; padding: 0 .75rem; border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: 600; background: var(--glaze); color: var(--ink-2); white-space: nowrap; }
.ap-status__dot { width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.ap-status--confirmed { background: var(--success-soft); color: var(--success); }
.ap-status--pending { background: var(--warning-soft); color: var(--warning); }
.ap-status--cancelled, .ap-status--rejected { background: var(--danger-soft); color: var(--danger); }
.ap-status--completed, .ap-status--no_show { background: var(--glaze); color: var(--muted); }

.ap-side { display: grid; gap: 1.5rem; align-content: start; }
.ap-where { padding: 1.375rem 1.5rem 1.5rem; border-radius: var(--r); background: var(--glaze); border: 1px solid var(--line); display: grid; gap: .5rem; justify-items: start; }
.ap-where__name { font-family: var(--font-text); font-weight: 600; font-size: 1.125rem; line-height: 1.3; color: var(--ink); }
.ap-where__addr, .ap-where__text { font-size: .96875rem; color: var(--ink-2); line-height: 1.55; font-style: normal; text-wrap: pretty; }
.ap-where .link-arrow { margin-top: .25rem; }
/* Na wąskim ekranie przycisk „Wyznacz trasę” stoi już w karcie tuż wyżej. */
@media (max-width: 1023px) { .ap-where__route.is-dup { display: none; } }

.ap-sections { margin-top: clamp(2.5rem, 5vw, 4.5rem); max-width: 48rem; border-top: 1px solid var(--line); }
.ap-block { display: grid; grid-template-columns: minmax(0, 1fr); padding: clamp(1.75rem, 3.5vw, 2.5rem) 0; border-bottom: 1px solid var(--line); }
.ap-block__body { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; justify-items: start; }
@media (max-width: 479px) {
  .ap-fold__body { padding-inline: .875rem; }
}
.ap-block__body > p { color: var(--ink-2); max-width: 60ch; text-wrap: pretty; }
.ap-block__actions { margin-top: .5rem; }
.ap-block__more { margin-top: .25rem; }
.ap-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--fs-h2-sub); line-height: 1.15; letter-spacing: -.01em; color: var(--ink); }
.ap-h4 { font-size: 1rem; font-weight: 600; color: var(--ink); margin-bottom: .5rem; }
.ap-prep__cols { display: grid; gap: 1.5rem; width: 100%; }
@media (min-width: 720px) { .ap-prep__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; } }
.ap-list { list-style: none; display: grid; gap: .5rem; }
.ap-list li { position: relative; padding-left: 1.125rem; font-size: .96875rem; line-height: 1.55; color: var(--ink-2); text-wrap: pretty; }
.ap-list li::before { content: ""; position: absolute; left: 0; top: .7em; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); }
.ap-docs__list { list-style: none; display: grid; gap: .5rem; }
.ap-docs__link { display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; font-weight: 600; color: var(--brand); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .3em; }

.ap-fold { width: 100%; min-width: 0; border: 1px solid var(--line-strong); border-radius: var(--r); background: var(--white); }
.ap-fold + .ap-fold { margin-top: .25rem; }
.ap-fold__summary { display: flex; align-items: center; gap: .75rem; min-height: 3.5rem; padding: 0 1.125rem; cursor: pointer; list-style: none; font-weight: 600; color: var(--ink); border-radius: var(--r); }
.ap-fold__summary::-webkit-details-marker { display: none; }
.ap-fold__summary > .icon:first-child { color: var(--brand); }
.ap-fold__caret { margin-left: auto; color: var(--muted); transition: transform var(--t-ui) var(--ease-out); }
.ap-fold[open] > .ap-fold__summary .ap-fold__caret { transform: rotate(180deg); }
.ap-fold[open] > .ap-fold__summary { border-bottom: 1px solid var(--line); border-radius: var(--r) var(--r) 0 0; }
.ap-fold__body { display: grid; gap: 1.25rem; padding: 1.25rem 1.125rem 1.375rem; }
.ap-fold__hint { font-size: .96875rem; color: var(--ink-2); max-width: 56ch; }
.ap-fold__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.ap-fold__picked { font-weight: 600; color: var(--ink); }
.ap-fold--cancel .ap-fold__summary > .icon:first-child { color: var(--danger); }
.ap-cancel-btn { --btn-fg: var(--danger); --btn-border: rgba(163, 51, 43, .4); }
.bk-picker--compact .bk-cal-grid { gap: 1.25rem; }
.ap-tel { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--ink); }
.ap-tel .icon { color: var(--muted); }
.ap-nf .empty-state { padding-block: clamp(3rem, 8vw, 6rem); }
/* Link wygasły / unieważniony: prawdziwy tytuł strony i jedna akcja. */
.ap-gone { padding-block: clamp(2.5rem, 6vw, 5.5rem); }
.ap-gone__title { font-size: var(--fs-h2); line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; }
.ap-gone__title em { font-style: normal; font-weight: inherit; color: inherit; }
.ap-gone__text { max-width: 44ch; }
.ap-gone__action { display: grid; justify-items: center; gap: 1.25rem; }
.ap-gone__done { text-align: left; max-width: 34rem; }
.ap-gone__contact { font-size: var(--fs-small); color: var(--muted); }
.ap-gone__contact a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .25em; }

/* ---------- Najechanie (tylko precyzyjny wskaźnik) ---------- */
@media (hover: hover) and (pointer: fine) {
  .bk-step__edit:hover { color: var(--brand); text-decoration-color: currentColor; }
  .bk-cal__nav:not(:disabled):hover { background: var(--glaze); border-color: var(--brand); }
  .bk-cal__day.is-free:not([aria-pressed="true"]):hover { background: var(--glaze); color: var(--brand); }
  .bk-time:not([aria-pressed="true"]):not(:has(input:checked)):hover { border-color: var(--brand); color: var(--brand); }
    .bk-intro__tel:hover, .bk-notes__tel:hover, .bk-host__contact a:hover { text-decoration-color: currentColor; color: var(--brand); }
  .ap-fold__summary:hover { background: var(--glaze); }
  .ap-docs__link:hover { text-decoration-color: currentColor; }
  .bk-nojs__summary:hover .bk-nojs__date { color: var(--brand); }
}

/* ---------- Tryb kontrastu i powiększony tekst ---------- */
html.a11y-contrast .bk-cal__day { color: var(--muted); }
html.a11y-contrast .bk-cal__day.is-free { color: var(--ink); }
html.a11y-contrast .bk-time, html.a11y-contrast .bk-card, html.a11y-contrast .ap-card { border-color: var(--line-control); }
html.a11y-scaled .bk-cal-grid { grid-template-columns: minmax(0, 1fr); }
html.a11y-scaled .bk-times { grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); }

@media print {
  .bk-section, .ap-manage, .ap-card__actions { display: none !important; }
}