/* ==========================================================================
   BookMint — FRONTEND: komponenty
   Klasy .bmf-* odpowiadają jeden-do-jednego elementom z reference/frontend.html.
   Kontener aplikacji musi mieć klasę .bmf.
   Kolejność wczytania: bookmint-core.css → tokens.css → components.css

   ZASADY
   1. Zero hexów — każdy kolor przez token (wartości: bookmint-core.css).
   2. Wszystko scope'owane pod .bmf — żadnych gołych selektorów body/a/h1,
      żeby nie kolidować z motywem WordPressa.
   3. Typografia i kolor tekstu domyślnie DZIEDZICZONE z motywu; fonty
      BookMint włącza dopiero klasa .bmf--styled (patrz tokens.css).
   ========================================================================== */

/* Tryb domyślny: font, kolor tekstu i tło zostają przy motywie.
   --bmf-font-body i --bmf-ink to `inherit` / `currentColor`, dopóki nie
   pojawi się .bmf--styled. Rozmiar i interlinia są nasze — to rytm układu. */
.bmf { font-family: var(--bmf-font-body); font-size: var(--bmf-body); line-height: 1.55;
  color: var(--bmf-ink); text-wrap: pretty;
  /* Motywy (np. Astra) renderują kontener treści `.ast-container` jako display:flex.
     Bez tego `.bmf` staje się elementem flex bez flex-grow i kurczy się do szerokości
     własnej treści (max-content) — dlatego checkout (węższy formularz) był węższy niż
     event (szerszy info-bar). width:100% + flex:1 wymuszają wypełnienie kontenera
     niezależnie od tego, czy rodzic jest block, flex czy grid. min-width:0 chroni
     przed przepełnieniem flexa przez szerokie dzieci (siatki, tabele). */
  width: 100%; flex: 1 1 auto; min-width: 0; }
.bmf *, .bmf *::before, .bmf *::after { box-sizing: border-box; }
/* Tło strony i wygładzanie fontu tylko w trybie „styl BookMint". */
.bmf.bmf--styled { background: var(--bmf-page); -webkit-font-smoothing: antialiased; }
/* W trybie dziedziczenia (typografia = motyw) `--bmf-ink` to `currentColor`,
   wiec link pomalowany akcentem zabiera ze soba CALY swoj tekst — a linkami sa
   u nas cale komponenty (karta oferty, kafel specjalisty). Dlatego domyslnie
   link dziedziczy kolor, a akcent dostaja tylko linki tekstowe.

   Lista klas jest WYLICZONA, a nie opisana przez `.bmf-sec a`. Tamten zapis
   lapal rowniez `a.bmf-card`, czyli cala karte oferty, przez co tytul, opis
   i cena dziedziczyly akcent i listing robil sie pomaranczowy. */
.bmf a { color: inherit; text-decoration: none !important; }
.bmf p a, .bmf .bmf-note a, .bmf .bmf-link,
.bmf .bmf-sec__link, .bmf .bmf-auth__link, .bmf .bmf-backlink { color: var(--bmf-accent); }
.bmf p a:hover, .bmf .bmf-note a:hover, .bmf .bmf-link:hover { color: var(--bmf-ink); }
/* Kontrolki dziedziczą kolor tekstu z .bmf (a NIE z motywu WP). Bez tego np. lista dni
   i przyciski bez własnego koloru brały czerwony kolor przycisków motywu. */
.bmf button, .bmf input, .bmf select, .bmf textarea { color: inherit; }
/* ===== THEME-HARDENING =====================================================
   Motywy (Astra, Twenty Twenty-Five, hello-elementor…) stylizują <button>/<input>/<a>
   własnymi tłami, HOVERAMI i obwódkami — często scope'owane (body/kit) z wyższą
   specyficznością niż bazowe .bmf-* (0,1,0). Nasze kontrolki nie definiowały :hover,
   więc przeciekał hover motywu (np. niebieski wiersz w TT25).
   Rozwiązanie: pełne stany (bazowy → hover → wybrany) z prefiksem .bmf → 0,3,0,
   co bije typowe selektory motywów. Kolejność: hover PRZED wybranym, żeby wybrany
   (ta sama specyficzność, dalej w źródle) nie był klobbowany hoverem.
   background-COLOR (nie skrót) — żeby nie kasować gradientu z accent_css.          */

/* bazowe tła + obwódki */
.bmf .bmf-btn { background-color: var(--bmf-surface); }
.bmf .bmf-btn--primary { background-color: var(--bmf-accent); color: var(--bmf-on-accent); }
.bmf .bmf-btn--danger { background-color: var(--bmf-danger-soft); color: var(--bmf-danger); }
.bmf .bmf-btn[disabled], .bmf .bmf-btn--off { background-color: var(--bmf-surface-2); color: var(--bmf-disabled); }
.bmf .bmf-day, .bmf .bmf-slot, .bmf .bmf-daylist__row, .bmf .bmf-cal__nav,
.bmf .bmf-stepper__btn, .bmf .bmf-chip, .bmf .bmf-option {
  background-color: var(--bmf-surface); border: 1px solid var(--bmf-line);
}
.bmf .bmf-segment__btn { background-color: transparent; border: 0; }

/* hover */
.bmf .bmf-btn:not(.bmf-btn--primary):hover { background-color: var(--bmf-surface-2); }
.bmf .bmf-btn--primary:hover { filter: brightness(.94); }
.bmf .bmf-day:hover, .bmf .bmf-slot:hover, .bmf .bmf-daylist__row:hover,
.bmf .bmf-chip:hover, .bmf .bmf-option:hover, .bmf .bmf-cal__nav:hover,
.bmf .bmf-stepper__btn:hover, .bmf .bmf-segment__btn:hover {
  background-color: var(--bmf-surface-2); color: inherit;
}

/* stany wybrane/aktywne (po hover → wygrywają) */
.bmf .bmf-day.bmf-day--off { background-color: var(--bmf-surface-2); border-color: transparent; color: var(--bmf-disabled); }
.bmf .bmf-day.bmf-day--sel, .bmf .bmf-slot[aria-pressed="true"] {
  background-color: var(--bmf-accent); border-color: var(--bmf-accent); color: var(--bmf-on-accent);
}
.bmf .bmf-daylist__row[aria-pressed="true"], .bmf .bmf-chip[aria-pressed="true"],
.bmf .bmf-option[aria-checked="true"] {
  background-color: var(--bmf-accent-soft); border-color: var(--bmf-accent-line);
}
.bmf .bmf-segment__btn[aria-pressed="true"] { background-color: var(--bmf-ink-strong); color: var(--bmf-on-ink); }

/* --- FOCUS ---------------------------------------------------------------
   Jeden pierścień na wszystkim, co da się dosięgnąć klawiaturą. Reguła jest
   wypisana elementami (nie tylko `.bmf :focus-visible`), bo część kontrolek
   to elementy z własnym stylem obramowania, które muszą pierścień przebić. */
.bmf :focus-visible,
.bmf a:focus-visible,
.bmf button:focus-visible,
.bmf input:focus-visible,
.bmf select:focus-visible,
.bmf textarea:focus-visible,
.bmf [tabindex]:focus-visible,
.bmf [role="button"]:focus-visible,
.bmf [role="radio"]:focus-visible,
.bmf [role="checkbox"]:focus-visible,
.bmf-btn:focus-visible,
.bmf-segment__btn:focus-visible,
.bmf-chip:focus-visible,
.bmf-day:focus-visible,
.bmf-slot:focus-visible,
.bmf-daylist__row:focus-visible,
.bmf-option:focus-visible,
.bmf-check:focus-visible,
.bmf-stepper__btn:focus-visible,
.bmf-cal__nav:focus-visible,
.bmf-sidenav__item:focus-visible,
.bmf-card:focus-visible,
.bmf-gallery__item:focus-visible,
.bmf-table__row:focus-visible {
  outline: var(--bmf-focus-ring);
  outline-color: var(--bmf-focus-color);
  outline-offset: var(--bmf-focus-offset);
  border-radius: inherit;
}
/* Na ciemnym tle (hero, lightbox) pierścień musi być biały. */
.bmf-hero :focus-visible,
.bmf-lightbox :focus-visible,
.bmf-backlink:focus-visible,
.bmf-segment__btn[aria-pressed="true"]:focus-visible,
.bmf-day--sel:focus-visible,
.bmf-slot[aria-pressed="true"]:focus-visible,
.bmf-btn--primary:focus-visible {
  outline-color: var(--bmf-focus-color-invert);
  outline-offset: var(--bmf-focus-offset);
}

/* --- Typografia ----------------------------------------------------------- */
/* Rodziny NIE narzucamy w trybie dziedziczenia: naglowki to prawdziwe h1/h2/h3,
   wiec zadziala regula motywu dla h1..h6 (np. Fraunces). Token `inherit` tego
   nie zalatwia — `inherit` znaczy „od rodzica", czyli font TEKSTU, nie naglowkow.
   W trybie „styl BookMint" rodzine ustawiamy jawnie nizej. */
.bmf-h1 { font-weight: 600; font-size: var(--bmf-h1);
  line-height: 1.05; letter-spacing: -.02em; margin: 0; }
.bmf-h1--sub { font-size: var(--bmf-h1-sub); line-height: 1.06; }
.bmf-h2 { font-weight: 600; font-size: var(--bmf-h2);
  letter-spacing: -.01em; margin: 0; }
.bmf-h3 { font-weight: 600; font-size: var(--bmf-h3);
  letter-spacing: -.01em; margin: 0; }
.bmf--styled .bmf-h1,
.bmf--styled .bmf-h2,
.bmf--styled .bmf-h3 { font-family: var(--bmf-font-heading); }
.bmf-lead { font-size: var(--bmf-lead); color: var(--bmf-ink-2); margin: 0; max-width: 62ch; }
.bmf-eyebrow { font-family: var(--bmf-font-mono); font-size: var(--bmf-eyebrow);
  letter-spacing: .16em; text-transform: uppercase; color: var(--bmf-muted); }
.bmf-group-label { font-size: var(--bmf-eyebrow); font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--bmf-muted); }
.bmf-num { font-family: var(--bmf-font-mono); font-variant-numeric: tabular-nums; }
.bmf-price { font-family: var(--bmf-font-mono); font-size: var(--bmf-price); font-weight: 500;
  letter-spacing: -.02em; }
.bmf-price-old { font-family: var(--bmf-font-mono); font-size: 15px; color: var(--bmf-muted);
  text-decoration: line-through; }
.bmf-savings { color: var(--bmf-success); font-weight: 600; font-size: 13.5px; }
.bmf-promo { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  padding: 7px 11px; background: var(--bmf-accent-soft); color: var(--bmf-accent);
  border-radius: var(--bmf-radius-sm); font-size: 12.5px; font-weight: 600; }

/* Mapa lokalizacji (Leaflet). Kontener z własną wysokością; z-index:0 = własny
   stacking context, żeby kafle nie nachodziły na sticky/menu. Linki kontrolek/atrybucji
   neutralizujemy (motyw + hardening .bmf a nadawałyby im akcent). */
.bmf-map { height: 220px; width: 100%; position: relative; z-index: 0; }
.bmf .leaflet-container a { color: #0078a8; text-decoration: none; }
.bmf .leaflet-bar a { color: #333; background: #fff; }
.bmf .leaflet-control-attribution { font-size: 10px; }
.bmf-meta { font-size: var(--bmf-xs); color: var(--bmf-muted); }

/* --- Rama widoku (tylko prototyp; w produkcji rolę pełni motyw WP) -------- */
.bmf-frame { width: 100%; max-width: var(--bmf-max-width); margin-inline: auto;
  background: var(--bmf-page); border-radius: var(--bmf-radius-xl); overflow: hidden; }
.bmf-page { padding: 34px 40px 44px; }
.bmf-section-gap { display: flex; flex-direction: column; gap: var(--bmf-space-8); }

/* --- Nawigacja i stopka --------------------------------------------------- */
.bmf-nav { display: flex; align-items: center; gap: 18px; padding: 16px 32px;
  background: var(--bmf-surface); border-bottom: 1px solid var(--bmf-line); }
.bmf-nav__brand { font-family: var(--bmf-font-heading); font-weight: 600; font-size: 23px;
  letter-spacing: -.01em; }
.bmf-nav__links { display: flex; gap: 20px; font-size: 14px; }
.bmf-nav__links a { color: var(--bmf-ink-2); }
.bmf-footer { padding: 26px; background: var(--bmf-surface); border-top: 1px solid var(--bmf-line);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: var(--bmf-xs); color: var(--bmf-muted); }
.bmf-powered { font-family: var(--bmf-font-mono); font-size: 11px; letter-spacing: .08em;
  margin-left: auto; }

/* --- Hero ---------------------------------------------------------------- */
.bmf-hero { position: relative; padding: 68px 40px 76px; background: var(--bmf-hero);
  color: var(--bmf-hero-ink); }
.bmf-hero--sub { padding: 52px 40px 56px; }
.bmf-hero__media { position: absolute; inset: 0; }        /* <img> lub placeholder */
.bmf-hero__scrim { position: absolute; inset: 0; background: var(--bmf-scrim); }
.bmf-hero__body { position: relative; max-width: 760px; display: flex;
  flex-direction: column; gap: 14px; }
.bmf-hero__lead { margin: 0; font-size: var(--bmf-lead); color: var(--bmf-hero-ink-2);
  max-width: 560px; }
.bmf-hero--color { background: var(--bmf-hero-solid); }
.bmf-hero--gradient { background: var(--bmf-hero-gradient); }
.bmf-backlink { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px;
  background: var(--bmf-hero-chip);
  border: 1px solid var(--bmf-hero-chip-line); color: var(--bmf-hero-ink);
  border-radius: var(--bmf-radius-pill);
  padding: 4px 12px; font-size: 12px; font-weight: 600; }
.bmf-backlink svg { flex: none; display: block; }

/* --- Pasek informacyjny (cena / czas / forma / zadatek) ------------------- */
.bmf-infobar { display: flex; gap: 38px; flex-wrap: wrap; padding: 18px 40px;
  background: var(--bmf-surface); border-bottom: 1px solid var(--bmf-line); }
.bmf-infobar__item { display: flex; align-items: center; gap: 10px; }
.bmf-infobar__icon { width: 34px; height: 34px; border-radius: var(--bmf-radius-sm); flex: none;
  background: var(--bmf-accent-soft); color: var(--bmf-accent);
  display: grid; place-items: center; }
.bmf-infobar__k { font-size: var(--bmf-eyebrow); font-weight: 700; text-transform: uppercase;
  letter-spacing: .09em; color: var(--bmf-muted); }
.bmf-infobar__v { font-size: 14.5px; font-weight: 600; }

/* --- Siatka i karta oferty ------------------------------------------------ */
.bmf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.bmf-grid--2 { grid-template-columns: repeat(2, 1fr); }
.bmf-grid--4 { grid-template-columns: repeat(4, 1fr); }

.bmf-card { display: flex; flex-direction: column; background: var(--bmf-surface);
  border: 1px solid var(--bmf-line); border-radius: var(--bmf-radius-lg);
  overflow: hidden; box-shadow: var(--bmf-elev-1); cursor: pointer;
  transition: box-shadow .16s, transform .16s, border-color .16s; }
.bmf-card:hover { box-shadow: var(--bmf-elev-2); border-color: var(--bmf-line-strong);
  transform: translateY(-2px); }
.bmf-card__media { position: relative; height: 150px; }
.bmf-card__body { flex: 1; padding: 16px; display: flex; flex-direction: column; gap: 9px; }
.bmf-card__desc { margin: 0; font-size: var(--bmf-sm); color: var(--bmf-ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bmf-card__price-row { margin-top: auto; padding-top: 4px; display: flex; align-items: baseline;
  gap: 8px; flex-wrap: wrap; }
.bmf-card__price { font-family: var(--bmf-font-mono); font-size: 17px; font-weight: 700; }
.bmf-card__cta { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding-top: 11px;
  border-top: 1px solid var(--bmf-hair); font-size: 13px; font-weight: 600;
  color: var(--bmf-accent); }
.bmf-card__cta--off { color: var(--bmf-muted); }   /* "Brak dostępnych terminów" */

/* Placeholder zdjęcia — do zastąpienia <img> z object-fit: cover */
.bmf-thumb { background: repeating-linear-gradient(135deg,
    var(--bmf-thumb-a) 0 12px, var(--bmf-thumb-b) 12px 24px);
  display: grid; place-items: center; }
.bmf-thumb__hint { font-family: var(--bmf-font-mono); font-size: 10.5px;
  color: var(--bmf-thumb-ink); letter-spacing: .08em; }

/* --- Odznaki i pigułki --------------------------------------------------- */
.bmf-badge { display: inline-flex; align-items: center; gap: 6px;
  border-radius: var(--bmf-radius-pill); padding: 3px 9px; font-size: 11px; font-weight: 600; }
.bmf-badge--light { background: var(--bmf-surface); border: 1px solid var(--bmf-line);
  color: var(--bmf-ink-2); }                       /* lokalizacja na zdjęciu */
.bmf-badge--ink { background: var(--bmf-ink-strong); color: var(--bmf-on-ink); } /* typ oferty */
.bmf-badge--success { background: var(--bmf-success-soft); color: var(--bmf-success); }
.bmf-badge--info { background: var(--bmf-info-soft); color: var(--bmf-info); }
.bmf-badge--accent { background: var(--bmf-accent-soft); color: var(--bmf-accent); }
.bmf-badge--warn { background: var(--bmf-warn-soft); color: var(--bmf-warn); }
.bmf-badge--danger { background: var(--bmf-danger-soft); color: var(--bmf-danger); }
.bmf-badge--neutral { background: var(--bmf-surface-2); color: var(--bmf-muted); }
.bmf-badge--discount { border-radius: var(--bmf-radius-xs); padding: 3px 8px; font-size: 11.5px;
  font-weight: 700; background: var(--bmf-danger); color: #fff; }

/* --- Przyciski ----------------------------------------------------------- */
.bmf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 1px solid var(--bmf-line); border-radius: var(--bmf-radius-md); padding: 12px 18px;
  font-family: var(--bmf-font-body); font-size: 14.5px; font-weight: 600; cursor: pointer;
  background: var(--bmf-surface); color: var(--bmf-ink); }
.bmf-btn:not(.bmf-btn--primary):hover { background: var(--bmf-surface-2); }
.bmf-btn--primary { background: var(--bmf-accent); color: var(--bmf-on-accent);
  border-color: var(--bmf-accent); font-weight: 700; }
.bmf-btn--primary:hover { filter: brightness(.94); }
.bmf-btn--danger { background: var(--bmf-danger-soft); color: var(--bmf-danger);
  border-color: var(--bmf-danger-line); }
.bmf-btn--block { width: 100%; padding: 14px; font-size: 15px; font-weight: 700;
  border-radius: var(--bmf-radius-md); }
.bmf-btn[disabled], .bmf-btn--off { background: var(--bmf-surface-2); color: var(--bmf-disabled);
  border-color: var(--bmf-line); cursor: not-allowed; }

/* Segmentowany przełącznik (filtr typu, typ klienta) */
.bmf-segment { display: flex; gap: 4px; padding: 4px; background: var(--bmf-surface);
  border: 1px solid var(--bmf-line); border-radius: var(--bmf-radius-md); }
.bmf-segment__btn { border: none; border-radius: var(--bmf-radius-sm); padding: 7px 14px;
  font-size: 13px; font-weight: 600; cursor: pointer; background: transparent;
  color: var(--bmf-ink-2); }
.bmf-segment__btn[aria-pressed="true"] { background: var(--bmf-ink-strong);
  color: var(--bmf-on-ink); }

/* Pigułka wyboru prowadzącego (z awatarem) */
.bmf-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 6px;
  border: 1px solid var(--bmf-line); border-radius: var(--bmf-radius-pill);
  background: var(--bmf-surface); color: var(--bmf-ink-2);
  font-size: var(--bmf-xs); font-weight: 600; cursor: pointer; }
.bmf-chip[aria-pressed="true"] { background: var(--bmf-accent-soft); color: var(--bmf-accent);
  border-color: var(--bmf-accent-line); }
.bmf-chip__avatar { width: 22px; height: 22px; border-radius: 50%; display: grid;
  place-items: center; font-size: 10px; font-weight: 700;
  background: var(--bmf-surface-2); color: var(--bmf-ink-2); }
.bmf-chip[aria-pressed="true"] .bmf-chip__avatar { background: var(--bmf-accent);
  color: var(--bmf-on-accent); }

/* --- KARTA REZERWACJI (dwa warianty wyboru terminu) --------------------- */
.bmf-booking { background: var(--bmf-surface); border: 1px solid var(--bmf-line);
  border-radius: var(--bmf-radius-xl); box-shadow: var(--bmf-elev-2); overflow: hidden; }
.bmf-booking__head { padding: 18px 18px 14px; border-bottom: 1px solid var(--bmf-hair);
  display: flex; flex-direction: column; gap: 10px; }
.bmf-booking__block { padding: 16px 18px; border-bottom: 1px solid var(--bmf-hair);
  display: flex; flex-direction: column; gap: 9px; }
.bmf-booking__foot { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
.bmf-countdown { display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border-radius: var(--bmf-radius-sm); font-size: var(--bmf-xs);
  background: var(--bmf-warn-soft); color: var(--bmf-warn); }
.bmf-countdown strong { font-family: var(--bmf-font-mono); }
.bmf-note { display: flex; align-items: flex-start; gap: 9px; padding: 10px 12px;
  font-size: var(--bmf-xs); color: var(--bmf-ink-2); background: var(--bmf-surface-2);
  border: 1px solid var(--bmf-hair); border-radius: var(--bmf-radius-md); }

/* Wariant A — kalendarz miesięczny */
.bmf-cal__head { display: flex; align-items: center; gap: 8px; }
.bmf-cal__month { font-weight: 600; font-size: 15px; }
.bmf-cal__nav { width: 30px; height: 30px; display: grid; place-items: center; cursor: pointer;
  background: var(--bmf-surface); border: 1px solid var(--bmf-line);
  border-radius: var(--bmf-radius-sm); color: var(--bmf-ink-2); }
.bmf-cal__dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--bmf-muted); }
.bmf-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.bmf-day { aspect-ratio: 1; border-radius: var(--bmf-radius-sm); font-size: 13px; font-weight: 600;
  font-family: var(--bmf-font-mono); cursor: pointer;
  background: var(--bmf-surface); border: 1px solid var(--bmf-line); color: var(--bmf-ink); }
.bmf-day--off { background: var(--bmf-surface-2); border-color: transparent;
  color: var(--bmf-disabled); font-weight: 400; cursor: not-allowed; }
.bmf-day--sel { background: var(--bmf-accent); border-color: var(--bmf-accent);
  color: var(--bmf-on-accent); font-weight: 700; }

/* Narozniki kontrolek wg ustawienia „Wyglad → Krawedzie".
   Dotyczy tego, co klikalne: przyciskow, dni w kalendarzu i godzin —
   karty i panele trzymaja swoj promien, zeby uklad sie nie rozjechal.
   Dzien ma proporcje 1:1, wiec pelne zaokraglenie daje kolo (jak w rebooku). */
.bmf--pill .bmf-btn,
.bmf--pill .bmf-slot,
.bmf--pill .bmf-day,
.bmf--pill .bmf-chip,
.bmf--pill .bmf-cal__nav { border-radius: 999px; }

/* „Z motywu" — ten sam zestaw kontrolek, ale promien podaje theme.json
   (--bmf-radius-control ustawiane po stronie PHP). */
.bmf--theme-corners .bmf-btn,
.bmf--theme-corners .bmf-slot,
.bmf--theme-corners .bmf-day,
.bmf--theme-corners .bmf-chip,
.bmf--theme-corners .bmf-cal__nav { border-radius: var(--bmf-radius-control); }

/* Wskaznik zajetosci dnia — kropka pod numerem, gdy sa wolne terminy.
   Wartosci z rebooka (.rb-cal-day.available::after): 4x4px, 3px od dolu, kolor akcentu. */
.bmf-day { position: relative; }
.bmf-day:not(.bmf-day--off):not(.bmf-day--sel)::after { content: ''; position: absolute;
  bottom: 3px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px;
  border-radius: 50%; background: var(--bmf-accent); }
.bmf-day--today { box-shadow: inset 0 0 0 2px var(--bmf-accent); }

/* Wariant B — lista najbliższych dni */
.bmf-daylist { display: flex; flex-direction: column; gap: 8px; }
.bmf-daylist__row { display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 11px 13px; cursor: pointer; background: var(--bmf-surface);
  border: 1px solid var(--bmf-line); border-radius: var(--bmf-radius-md); }
.bmf-daylist__row[aria-pressed="true"] { background: var(--bmf-accent-soft);
  border-color: var(--bmf-accent-line); }
.bmf-daylist__title { font-weight: 600; font-size: 14.5px; }
.bmf-daylist__sub { font-size: var(--bmf-xs); color: var(--bmf-muted); }
.bmf-daylist__count { margin-left: auto; font-family: var(--bmf-font-mono); font-size: 12px;
  color: var(--bmf-muted); }

/* Godziny */
.bmf-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.bmf-slot { padding: 9px 6px; border-radius: var(--bmf-radius-sm); font-size: 13px;
  font-weight: 600; cursor: pointer; font-family: var(--bmf-font-mono);
  background: var(--bmf-surface); border: 1px solid var(--bmf-line); color: var(--bmf-ink); }
.bmf-slot[aria-pressed="true"] { background: var(--bmf-accent); border-color: var(--bmf-accent);
  color: var(--bmf-on-accent); }
.bmf-empty-inline { padding: 16px; text-align: center; font-size: var(--bmf-sm);
  color: var(--bmf-muted); border: 1px dashed var(--bmf-line);
  border-radius: var(--bmf-radius-md); }

/* --- Wybór pakietu / metody płatności ----------------------------------- */
.bmf-option { display: flex; gap: 11px; text-align: left; padding: 13px; cursor: pointer;
  background: var(--bmf-surface); border: 1px solid var(--bmf-line);
  border-radius: var(--bmf-radius-md); }
.bmf-option[aria-checked="true"] { background: var(--bmf-accent-soft);
  border-color: var(--bmf-accent-line); }
.bmf-option--sold { opacity: .55; cursor: not-allowed; }
.bmf-radio { width: 18px; height: 18px; margin-top: 2px; flex: none; border-radius: 50%;
  border: 2px solid var(--bmf-control-line); display: grid; place-items: center; }
.bmf-option[aria-checked="true"] .bmf-radio { border-color: var(--bmf-accent); }
.bmf-radio__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bmf-accent); }

/* Wskaźnik miejsc */
.bmf-seats__bar { height: 6px; border-radius: var(--bmf-radius-pill);
  background: var(--bmf-hair); overflow: hidden; }
/* Stan pozytywny idzie na --bmf-success, nie na akcent: zmiana akcentu nie
   może przemalować komunikatu „są miejsca". */
.bmf-seats__fill { height: 100%; border-radius: var(--bmf-radius-pill);
  background: var(--bmf-success); }
.bmf-seats--low .bmf-seats__fill { background: var(--bmf-warn); }
.bmf-seats--none .bmf-seats__fill { background: var(--bmf-danger); }

/* --- Harmonogram wydarzenia --------------------------------------------- */
.bmf-schedule { background: var(--bmf-surface); border: 1px solid var(--bmf-line);
  border-radius: var(--bmf-radius-lg); overflow: hidden; }
.bmf-schedule__head { display: flex; align-items: center; gap: 10px; padding: 13px 16px;
  background: var(--bmf-surface-2); border-bottom: 1px solid var(--bmf-hair); }
.bmf-schedule__tag { font-family: var(--bmf-font-mono); font-size: 11.5px; font-weight: 500;
  background: var(--bmf-ink-strong); color: var(--bmf-on-ink);
  border-radius: var(--bmf-radius-xs); padding: 3px 8px; }
.bmf-module { display: flex; gap: 14px; padding: 14px 16px;
  border-bottom: 1px solid var(--bmf-hair); }
.bmf-module__time { flex: none; width: 96px; padding-top: 2px; font-family: var(--bmf-font-mono);
  font-size: var(--bmf-xs); color: var(--bmf-muted); }

/* --- Formularze --------------------------------------------------------- */
.bmf-panel { background: var(--bmf-surface); border: 1px solid var(--bmf-line);
  border-radius: var(--bmf-radius-lg); padding: 20px; display: flex; flex-direction: column;
  gap: 16px; }
.bmf-panel__title { font-family: var(--bmf-font-heading); font-weight: 600; font-size: 20px; }
.bmf-field { display: flex; flex-direction: column; gap: 6px; }
.bmf-field__label { font-size: var(--bmf-label); font-weight: 600; color: var(--bmf-ink-2); }
.bmf-input { padding: 11px 12px; font-family: var(--bmf-font-body); font-size: 14px;
  color: var(--bmf-ink); background: var(--bmf-surface-2);
  border: 1px solid var(--bmf-line); border-radius: var(--bmf-radius-md); }
.bmf-input:focus-visible { border-color: var(--bmf-accent); background: var(--bmf-surface); }
.bmf-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bmf-form-grid__full { grid-column: 1 / -1; }
.bmf-check { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.bmf-check__box { width: 20px; height: 20px; margin-top: 1px; flex: none;
  border: 1.5px solid var(--bmf-control-line); border-radius: var(--bmf-radius-xs);
  background: var(--bmf-surface); display: grid; place-items: center; }
.bmf-check[aria-checked="true"] .bmf-check__box { background: var(--bmf-accent);
  border-color: var(--bmf-accent); }
/* Ptaszek widoczny WYŁĄCZNIE przy zaznaczeniu (domyślnie SVG był zawsze renderowany). */
.bmf-check__box svg { opacity: 0; }
.bmf-check[aria-checked="true"] .bmf-check__box svg { opacity: 1; }
/* [hidden] musi chować bezwzględnie — inaczej display:grid/flex komponentów bije UA i element (np. stan sukcesu) zostaje widoczny. */
.bmf [hidden] { display: none !important; }
.bmf-stepper { display: flex; align-items: center; gap: 10px; }
.bmf-stepper__btn { width: 34px; height: 34px; flex: none; display: inline-flex;
  align-items: center; justify-content: center; padding: 0; font-size: 18px; line-height: 1;
  cursor: pointer; color: var(--bmf-ink); background: var(--bmf-surface);
  border: 1px solid var(--bmf-line); border-radius: var(--bmf-radius-sm); }
.bmf-stepper__val { height: 34px; min-width: 44px; display: inline-flex; align-items: center;
  justify-content: center; padding: 0 8px; text-align: center;
  font-family: var(--bmf-font-mono); font-size: 16px; font-weight: 500;
  border: 1px solid var(--bmf-line); border-radius: var(--bmf-radius-sm); }
/* Centrowanie glifów +/−: motyw (Astra) nadpisuje `display` na <button> wyższą specyficznością,
   więc przycisk nie był flexem i glif siadał nisko. Wymuszamy flex + zerowy padding. */
.bmf .bmf-stepper__btn { display: inline-flex !important; align-items: center; justify-content: center;
  padding: 0 !important; line-height: 1; text-align: center; }
.bmf .bmf-stepper__val { display: inline-flex; align-items: center; justify-content: center; }
.bmf-alert { display: flex; align-items: flex-start; gap: 10px; padding: 14px;
  border-radius: var(--bmf-radius-md); font-size: var(--bmf-sm);
  background: var(--bmf-danger-soft); border: 1px solid var(--bmf-danger-line);
  color: var(--bmf-danger); }

/* --- Podsumowanie / paragon --------------------------------------------- */
.bmf-summary { background: var(--bmf-surface); border: 1px solid var(--bmf-line);
  border-radius: var(--bmf-radius-xl); box-shadow: var(--bmf-elev-2); overflow: hidden; }
.bmf-summary__row { display: flex; gap: 12px; padding: 9px 0; font-size: var(--bmf-sm);
  border-bottom: 1px solid var(--bmf-hair); }
.bmf-summary__row > :last-child { margin-left: auto; text-align: right; font-weight: 600; }
.bmf-summary__total { display: flex; align-items: baseline; gap: 12px; margin-top: 5px;
  padding-top: 11px; border-top: 1px solid var(--bmf-line); }
.bmf-summary__total-value { margin-left: auto; font-family: var(--bmf-font-mono);
  font-size: 22px; font-weight: 500; }

/* --- Stany końcowe (sukces / anulowano / błąd) -------------------------- */
.bmf-result { max-width: 520px; margin: 40px auto; padding: 40px 32px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  background: var(--bmf-surface); border: 1px solid var(--bmf-line);
  border-radius: var(--bmf-radius-xl); box-shadow: var(--bmf-elev-2); }
.bmf-result__icon { width: 66px; height: 66px; border-radius: 50%; display: grid;
  place-items: center; background: var(--bmf-success-soft); color: var(--bmf-success); }
.bmf-result--warn .bmf-result__icon { background: var(--bmf-warn-soft); color: var(--bmf-warn); }
.bmf-result--error .bmf-result__icon { background: var(--bmf-danger-soft);
  color: var(--bmf-danger); }
.bmf-code { font-family: var(--bmf-font-mono); font-size: 14px; padding: 7px 12px;
  background: var(--bmf-surface-2); border: 1px solid var(--bmf-line);
  border-radius: var(--bmf-radius-sm); }
.bmf-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--bmf-hair);
  border-top-color: var(--bmf-accent); animation: bmf-spin .8s linear infinite; }
.bmf-spinner--sm { width: 16px; height: 16px; border-width: 2px;
  border-color: var(--bmf-spinner-track); border-top-color: var(--bmf-on-accent); }
@keyframes bmf-spin { to { transform: rotate(360deg); } }

/* --- Panel klienta ------------------------------------------------------ */
.bmf-account { display: grid; grid-template-columns: 250px 1fr; gap: 38px; align-items: start; }
.bmf-sidenav { position: sticky; top: var(--bmf-sticky-top); background: var(--bmf-surface);
  border: 1px solid var(--bmf-line); border-radius: var(--bmf-radius-xl); overflow: hidden; }
.bmf-sidenav__user { display: flex; align-items: center; gap: 12px; padding: 18px;
  border-bottom: 1px solid var(--bmf-hair); }
.bmf-sidenav__item { display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 11px 13px; text-align: left; font-size: 14px; font-weight: 500; cursor: pointer;
  border: none; border-radius: var(--bmf-radius-md); background: transparent;
  color: var(--bmf-ink-2); }
.bmf-sidenav__item[aria-current="page"] { background: var(--bmf-accent-soft);
  color: var(--bmf-accent); font-weight: 700; }
.bmf-avatar { border-radius: 50%; display: grid; place-items: center; flex: none;
  font-weight: 700; background: var(--bmf-accent-soft); color: var(--bmf-accent); }

.bmf-table { background: var(--bmf-surface); border: 1px solid var(--bmf-line);
  border-radius: var(--bmf-radius-xl); overflow: hidden; }
.bmf-table__head, .bmf-table__row { display: grid; gap: 12px;
  grid-template-columns: 120px 1fr 130px 120px 110px 100px; }
.bmf-table__head { padding: 12px 18px; background: var(--bmf-surface-2);
  border-bottom: 1px solid var(--bmf-line); font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--bmf-muted); }
.bmf-table__row { align-items: center; padding: 14px 18px; font-size: var(--bmf-sm);
  border-bottom: 1px solid var(--bmf-hair); cursor: pointer; }
.bmf-table__row:hover { background: var(--bmf-surface-2); }

/* --- Galeria i lightbox ------------------------------------------------- */
.bmf-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.bmf-gallery__item { aspect-ratio: 4/3; border-radius: var(--bmf-radius-md); cursor: zoom-in;
  border: 1px solid var(--bmf-line); overflow: hidden; }
.bmf-lightbox { position: fixed; inset: 0; z-index: 80; padding: 5vh 5vw; cursor: zoom-out;
  background: var(--bmf-overlay); display: grid; place-items: center; }

/* --- Mobilny sticky bar (tylko < 860px) -------------------------------- */
.bmf-stickybar { position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center;
  gap: 12px; padding: 11px 16px; background: var(--bmf-surface);
  border-top: 1px solid var(--bmf-line); box-shadow: var(--bmf-elev-bar); }
.bmf-stickybar .bmf-btn { min-height: var(--bmf-tap); }

/* --- Responsywność ----------------------------------------------------- */
@media (max-width: 1180px) {
  .bmf-grid, .bmf-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .bmf-infobar { gap: 24px; }
}
@media (max-width: 860px) {
  .bmf-grid, .bmf-grid--2, .bmf-grid--4 { grid-template-columns: 1fr; }
  .bmf-page { padding: 22px 16px 30px; }
  .bmf-nav { padding: 14px 16px; }
  .bmf-nav__links { display: none; }
  .bmf-hero { padding: 34px 18px 40px; }
  .bmf-hero--sub { padding: 26px 18px 30px; }
  .bmf-h1 { font-size: var(--bmf-h1-m); }
  .bmf-h1--sub { font-size: var(--bmf-h1-sub-m); }
  .bmf-h2 { font-size: var(--bmf-h2-m); }
  .bmf-lead, .bmf-hero__lead { font-size: var(--bmf-lead-m); }
  .bmf-infobar { flex-direction: column; gap: 16px; padding: 16px 18px; }
  .bmf-form-grid { grid-template-columns: 1fr; }
  .bmf-gallery { grid-template-columns: 1fr 1fr; }
  .bmf-account { grid-template-columns: 1fr; gap: 22px; }
  .bmf-sidenav, .bmf-summary, .bmf-booking { position: static; }
  .bmf-table__head { display: none; }          /* tabela → karty */
  .bmf-table__row { grid-template-columns: 1fr; gap: 9px; }
  .bmf-section-gap { gap: var(--bmf-space-7); }
}

/* ==========================================================================
   Uzupełnienia BookMint — klasy obecne w projekcie (README/prototyp), których
   ekstrakcja do components.css nie objęła. Wartości 1:1 z handoffem, bez
   własnych interpretacji. Ładowane po handoffie, więc nic nie nadpisują.
   ========================================================================== */

/* Tytuł karty oferty — Space Grotesk 19.5/600, ls -.01em (README: „Tytuł karty oferty"). */
.bmf-card__title { margin: 0; font-family: var(--bmf-font-heading); font-weight: 600;
  font-size: 19.5px; letter-spacing: -.01em; color: var(--bmf-ink); }

/* Nagłówki i eyebrow w hero — kolor z policzonego auto-kontrastu (--bmf-hero-ink),
   nie z motywu WP. Bez tego motyw nadaje h1 własny (ciemny) kolor i H1 znika na ciemnym tle.
   Specyficzność .bmf-hero .bmf-h1 (0,2,0) bije selektory motywu na h1/h2. */
.bmf-hero .bmf-h1,
.bmf-hero .bmf-h2 { color: var(--bmf-hero-ink); }
/* Na ciemnym hero eyebrow i liczniki muszą być jasne (klasy bazowe dają --bmf-muted). */
.bmf-hero .bmf-eyebrow { color: var(--bmf-hero-ink-3); }
.bmf-hero .bmf-num,
.bmf-hero__count { font-family: var(--bmf-font-mono); font-variant-numeric: tabular-nums;
  color: var(--bmf-hero-ink-3); }

/* Nagłówek sekcji katalogu/kategorii: nazwa (link) + licznik nad linią. */
.bmf-sec { display: flex; flex-direction: column; gap: 18px; }
.bmf-sec__head { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  border-bottom: 1px solid var(--bmf-line); padding-bottom: 12px; }
.bmf-sec__title { font-family: var(--bmf-font-heading); font-weight: 600; font-size: var(--bmf-h2);
  letter-spacing: -.01em; color: var(--bmf-ink); }
.bmf-sec__title:hover { color: var(--bmf-ink); text-decoration: none; }
.bmf-sec__count { font-family: var(--bmf-font-mono); font-size: 12px; color: var(--bmf-muted);
  padding-bottom: 4px; }
.bmf-sec__actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.bmf-sec__link { font-size: 13px; font-weight: 600; }

/* Filtr typu jako pojedynczy przycisk-dropdown (nagłówek sekcji w katalogu). */
.bmf-filterbtn { display: inline-flex; align-items: center; gap: 8px; background: var(--bmf-surface);
  border: 1px solid var(--bmf-line); border-radius: var(--bmf-radius-sm); padding: 7px 12px;
  font-size: 13px; font-weight: 600; cursor: pointer; color: var(--bmf-ink); }
.bmf .bmf-filterbtn:hover { background: var(--bmf-surface-2); }

/* Rozwijany select filtra typu (trigger + lista opcji) */
.bmf-select { position: relative; display: inline-flex; }
.bmf-select__chev { transition: transform .15s ease; }
.bmf-select[data-open] .bmf-select__chev { transform: rotate(180deg); }
.bmf-select__menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 30;
  min-width: 176px; display: flex; flex-direction: column; gap: 2px; padding: 5px;
  background: var(--bmf-surface); border: 1px solid var(--bmf-line);
  border-radius: var(--bmf-radius-sm); box-shadow: var(--bmf-elev-2); }
.bmf-select__menu[hidden] { display: none; }
.bmf .bmf-select__opt { text-align: left; padding: 8px 12px; border: 0; background: transparent;
  border-radius: var(--bmf-radius-xs); font-size: 13px; font-weight: 500; cursor: pointer;
  color: var(--bmf-ink); white-space: nowrap; }
.bmf .bmf-select__opt:hover { background: var(--bmf-surface-2); }
.bmf .bmf-select__opt[aria-selected="true"] { background: var(--bmf-accent-soft);
  color: var(--bmf-accent); font-weight: 600; }

/* Pusta sekcja / pusty katalog. */
.bmf-empty { padding: 44px 20px; text-align: center; color: var(--bmf-muted);
  border: 1px dashed var(--bmf-line); border-radius: var(--bmf-radius-lg); }

/* Modyfikatory ustawień „Wygląd" (klasy na kontenerze .bmf). */
.bmf--flat-cards .bmf-card { box-shadow: none; }
.bmf--flat-cards .bmf-card:hover { box-shadow: var(--bmf-elev-1); }
.bmf--flat-panel .bmf-sidenav,
.bmf--flat-panel .bmf-table,
.bmf--flat-panel .bmf-summary { box-shadow: none; }

/* Kontener treści — bez tego wtyczka rozlewa się na całą szerokość motywu.
   Hero/infobar/page wyrównane do 1240px (odpowiednik prototypowego .bmf-frame). */
/* Gdy szerokość kolumny przychodzi z motywu, powłoka musi być szersza o własny
   wewnętrzny margines `.bmf-page`. Bez tego kolumna treści wtyczki jest o te
   80px węższa niż kolumna witryny i strona wygląda na przesuniętą względem
   nagłówka i stopki. `--bmf-shell-inset` ustawia PHP tylko wtedy, gdy bierze
   szerokość z motywu; przy własnej szerokości BookMinta zostaje zero. */
.bmf-shell { max-width: calc(var(--bmf-max-width, 1240px) + 2 * var(--bmf-shell-inset, 0px)); margin-inline: auto; }

/* Hero na pełną szerokość okna (edge-to-edge) — łamie kontener; treść hero nadal
   wyrównana do kolumny 1240px. UWAGA: clip MUSI być na <html>, nie na .bmf —
   inaczej .bmf ucina wyłamanie hero. */
html:has( .bmf--hero-full ) { overflow-x: clip; }
.bmf--hero-full .bmf-hero,
.bmf--hero-full .bmf-infobar {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding-left: calc(50vw - 50% + 40px);
  padding-right: calc(50vw - 50% + 40px);
}
@media ( max-width: 860px ) {
  .bmf--hero-full .bmf-hero,
  .bmf--hero-full .bmf-infobar { padding-left: 18px; padding-right: 18px; }
}

/* Strona szczegółowa (usługa/wydarzenie): treść + karta boczna 372px.
   minmax(0,1fr) — bez tego min-content lewej kolumny rozpycha grid poza ekran. */
.bmf-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 38px; align-items: start; }
.bmf-detail-aside { min-width: 0; position: sticky; top: var(--bmf-sticky-top, 16px); }

/* Checkout: formularz + podsumowanie 350px. */
.bmf-checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) 372px; gap: 38px; align-items: start; }

/* Sticky bar rezerwacji — tylko na wąskich ekranach (na desktopie jest karta). */
.bmf-stickybar { display: none; }
@media (max-width: 860px) {
  .bmf-stickybar { display: flex; }
  .bmf-detail-grid, .bmf-checkout-grid { grid-template-columns: 1fr; }
  .bmf-detail-aside { position: static; }
}

/* ===== EMBED — komponenty osadzalne (shortcode'y + widgety Elementora) =============
   Style bazowe komponentów, które żyją poza stronami wtyczki. Ładowane przez
   BookMint_Public::ensure_assets() (a więc też bez Elementora).                       */
/* Osadzony komponent (shortcode / widget) siedzi w cudzym ukladzie: nie maluje
   tla strony i nie narzuca wlasnej ramy. Przycisk dodatkowo przykleja sie do
   swojej tresci, zeby nie rozpychal sie na cala szerokosc kolumny. */
.bmf-embed { width: 100%; }
.bmf.bmf-embed { background: transparent; }
.bmf.bmf-embed--cta { width: auto; flex: 0 0 auto; }
.bmf-embed .bmf-booking { position: static; }

/* Karta kategorii */
.bmf-catcard {
  display: flex; flex-direction: column;
  background: var(--bmf-surface, #fff);
  border: 1px solid var(--bmf-line, #e3e6ea);
  border-radius: var(--bmf-radius-lg, 14px);
  overflow: hidden; text-decoration: none !important; color: inherit;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.bmf-catcard:hover { transform: translateY(-2px); border-color: var(--bmf-accent, #16a34a); box-shadow: 0 6px 22px rgba(0,0,0,.07); }
.bmf-catcard__media { position: relative; aspect-ratio: 16 / 10; background: var(--bmf-surface-2, #f6f7f9); display: grid; place-items: center; }
.bmf-catcard__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bmf-catcard__ph { color: var(--bmf-muted, #9aa2ad); }
.bmf-catcard__body { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; }
.bmf-catcard__title { font-weight: 600; font-size: 15.5px; color: var(--bmf-ink, #1f2430); }
.bmf-catcard__desc { font-size: 13px; color: var(--bmf-ink-2, #6b7280); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bmf-catcard__count { font-size: 12.5px; color: var(--bmf-muted, #9aa2ad); }

/* Przycisk CTA (embed) */
/* Widget rezerwacji w układzie poziomym (layout="wide").
   Ten sam markup, inne rozłożenie: kalendarz i godziny obok siebie, a cena,
   wybór specjalisty i przycisk w trzeciej kolumnie. Bloki wskazujemy po
   atrybutach danych, bo blok specjalisty bywa pominięty (jeden pracownik). */
/* Naglowek widgetu: co rezerwujemy i ile to trwa, nad cena. */
/* Naglowek widgetu: co rezerwujemy i ile to trwa. Osobny wiersz, bo w ukladzie
   poziomym biegnie przez obie kolumny, a cena zostaje po prawej. */
.bmf-booking__what { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 16px 18px; border-bottom: 1px solid var(--bmf-hair); }
.bmf-booking__name { font-size: 16px; font-weight: 600; line-height: 1.3; }
.bmf-booking__dur { font-size: 13px; color: var(--bmf-muted); }

/* Podsumowanie wyboru — pojawia sie dopiero, gdy znany jest dzien i godzina. */
.bmf-booking__summary { padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; }
.bmf-booking__summary-val { font-size: 14.5px; font-weight: 600; line-height: 1.35; }

/* ---------------------------------------------------------------
   PASEK DNI (uklad poziomy)
   28 kafelkow przewijanych strzalkami albo palcem. Dni zamkniete
   zostaja widoczne jako nieaktywne, zeby nie gubic rytmu tygodnia.
   --------------------------------------------------------------- */
.bmf-daystrip { display: flex; align-items: center; gap: 10px; }
.bmf-daystrip__nav { flex: none; width: 34px; height: 34px; display: grid; place-items: center;
  border: 1px solid var(--bmf-line); border-radius: 999px; background: var(--bmf-surface);
  color: var(--bmf-ink-2); cursor: pointer; }
.bmf-daystrip__nav:hover:not(:disabled) { border-color: var(--bmf-accent); color: var(--bmf-accent); }
.bmf-daystrip__nav:disabled { opacity: .35; cursor: default; }

.bmf-daystrip__track { display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth;
  scroll-snap-type: x mandatory; scrollbar-width: none; padding: 2px; }
.bmf-daystrip__track::-webkit-scrollbar { display: none; }

.bmf-daystrip__day { flex: 0 0 auto; width: 76px; padding: 9px 6px; scroll-snap-align: start;
  border: 1px solid var(--bmf-line); border-radius: var(--bmf-radius-md);
  background: var(--bmf-surface); color: inherit; cursor: pointer; text-align: center; }
.bmf-daystrip__day:hover:not(:disabled) { border-color: var(--bmf-ink-2); }
.bmf-daystrip__day.is-sel { background: var(--bmf-accent); border-color: var(--bmf-accent);
  color: var(--bmf-on-accent); }
.bmf-daystrip__day:disabled { background: var(--bmf-surface-2); border-color: transparent;
  color: var(--bmf-disabled); cursor: not-allowed; }
.bmf-daystrip__dow { display: block; font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--bmf-muted); }
.bmf-daystrip__num { display: block; font-family: var(--bmf-font-mono); font-size: 18px;
  font-weight: 500; line-height: 1.3; }
.bmf-daystrip__count { display: block; font-size: 10.5px; color: var(--bmf-muted); }
.bmf-daystrip__day.is-sel .bmf-daystrip__dow,
.bmf-daystrip__day.is-sel .bmf-daystrip__count { color: inherit; opacity: .85; }
.bmf-daystrip__day:disabled .bmf-daystrip__count { color: inherit; }

/* ---------------------------------------------------------------
   UKLAD POZIOMY WIDGETU (layout="wide")

   Naglowek przez cala szerokosc, pod nim dwie kolumny: po lewej wybor
   (specjalista, dni, godziny), po prawej cena, wybrany termin i przycisk.
   Ponizej 900 px wszystko wraca do jednej kolumny — wtedy strzalki znikaja,
   bo pasek dni przewija sie palcem.
   --------------------------------------------------------------- */
@media (min-width: 900px) {
  .bmf-booking--wide { display: grid; align-items: start;
    grid-template-columns: minmax(420px, 1fr) minmax(280px, .42fr); }

  .bmf-booking--wide > .bmf-booking__what { grid-column: 1 / -1; grid-row: 1; }

  .bmf-booking--wide > .bmf-booking__block:has([data-staff-chips]) { grid-column: 1; grid-row: 2; }
  .bmf-booking--wide > [data-day-select] { grid-column: 1; grid-row: 3; }
  .bmf-booking--wide > [data-slots-block] { grid-column: 1; grid-row: 4; }

  /* Prawa kolumna: trzy kafelki jeden pod drugim, wspolna kreska po lewej. */
  .bmf-booking--wide > .bmf-booking__head,
  .bmf-booking--wide > .bmf-booking__summary,
  .bmf-booking--wide > .bmf-booking__foot { grid-column: 2; border-left: 1px solid var(--bmf-hair); }
  .bmf-booking--wide > .bmf-booking__head { grid-row: 2; border-bottom: 0; }
  .bmf-booking--wide > .bmf-booking__summary { grid-row: 3; }
  .bmf-booking--wide > .bmf-booking__foot { grid-row: 4; align-self: end; }

  /* Godziny maja cala szerokosc lewej kolumny, wiec moga byc szersze. */
  .bmf-booking--wide .bmf-slots { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}

@media (max-width: 899px) {
  /* Na dotyku strzalki tylko zabieraja miejsce. */
  .bmf-daystrip__nav { display: none; }
  .bmf-daystrip__track { scroll-snap-type: x proximity; }
}

/* Przycisk CTA — wartosci przeniesione z widgetu Elementora rebooka
   (.rb-cta-btn*): ikona 16px, podpis 11/500 UPPERCASE ls .5px nad wartoscia 15/700,
   odstep 2px w kolumnie tekstu, 8px miedzy ikona a tekstem, padding 12px 28px. */
.bmf-cta { display: flex; flex-direction: column; }
.bmf-cta .bmf-cta__btn { display: inline-flex; flex-direction: row; align-items: center;
  justify-content: center; gap: 8px; padding: 12px 28px; line-height: 1.4;
  text-decoration: none !important; }
.bmf-cta__icon { display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 1em; height: 1em; font-size: 16px; line-height: 1; }
.bmf-cta__icon svg { width: 100%; height: 100%; display: block; }
.bmf-cta__text { display: inline-flex; flex-direction: column; gap: 2px; line-height: 1.2;
  align-items: flex-start; text-align: left; }
.bmf-cta__text--single { flex-direction: row; align-items: center; }
.bmf-cta__label { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .5px; }
.bmf-cta__value { font-size: 15px; font-weight: 700; }
.bmf-cta__btn--off { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* --- Lista rezerwowa (wyprzedane wydarzenie) --- */
.bmf-waitlist { display: flex; flex-direction: column; gap: 10px; margin-top: 14px;
  padding: 16px; border: 1px solid var(--bmf-line); border-radius: 12px; background: var(--bmf-surface); }
.bmf-waitlist__lead { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--bmf-text-muted); }
.bmf-waitlist__msg { margin: 0; font-size: 13.5px; line-height: 1.55; }
.bmf-waitlist__msg[data-error="1"] { color: var(--bmf-error, #b42318); }

/* --- Panel klienta: logowanie / rejestracja ----------------------------- */
.bmf-auth { width: 100%; max-width: 480px; margin: 40px auto; background: var(--bmf-surface);
  border: 1px solid var(--bmf-line); border-radius: var(--bmf-radius-xl);
  box-shadow: var(--bmf-elev-2); overflow: hidden; }
.bmf-auth__tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--bmf-line); }
.bmf-auth__tab { padding: 15px 12px; font-family: var(--bmf-font-body); font-size: 14px; font-weight: 600;
  color: var(--bmf-ink-2); background: var(--bmf-surface-2); border: 0; cursor: pointer; }
.bmf-auth__tab.is-active { color: var(--bmf-ink); background: var(--bmf-surface);
  box-shadow: inset 0 -2px 0 var(--bmf-accent); }
.bmf-auth__form { display: flex; flex-direction: column; gap: 14px; padding: 24px; }
.bmf-auth__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bmf-auth__consents { display: flex; flex-direction: column; gap: 12px;
  padding-top: 18px; border-top: 1px solid var(--bmf-line); margin-top: 8px; }
.bmf-auth__link { align-self: center; font-size: 13px; color: var(--bmf-ink-2); text-decoration: underline; }
.bmf-auth__intro { padding: 24px 24px 0; }
.bmf-field__hint { font-size: 12px; color: var(--bmf-muted); }

@media (max-width: 520px) {
  .bmf-auth { margin: 24px auto; }
  .bmf-auth__row { grid-template-columns: 1fr; }
}