/**
 * ============================================
 *  Plik:        site.css
 *  Ścieżka:     /assets/css/site.css
 *  Projekt:     Terminarz — strona publiczna
 *  Wersja:      1.9.0
 *  Modyfikacja: 2026-08-27
 *  Zmiany:      1.9.0 — kategorie ze zdjęciem rysowane jako kafle.
 *               1.8.0 — sekcja oferty: zakładki kategorii i wiersze cennika.
 *               1.7.0 — znak wyższy od paska zwisa pod niego zamiast
 *               rozpychać pasek albo wychodzić ponad krawędź okna.
 *               1.6.0 — dwa napisy obok znaku firmowego.
 *               1.5.0 — pasek strony rośnie razem ze znakiem firmowym;
 *               szersza granica dla samego znaku, żeby nie kurczył się
 *               poniżej wielkości ustawionej suwakiem.
 *               Stała wysokość 60 px ucinała powiększony znak od góry.
 *               1.4.0 — znak firmowy z wgranego obrazu.
 *               1.3.0 — domyślny odstęp pod przyciskami slajdu.
 *               1.2.0 — treść slajdu przestaje się centrować. Klasy
 *               container i slide__inner siedzą na jednym elemencie,
 *               więc zawężenie do 40rem działało razem z margin-inline
 *               z .container i spychało treść na środek ekranu.
 *               Miara wędruje na dzieci, jak w sekcji powitalnej.
 *               Pigułka na slajdzie półprzezroczysta, jak na zdjęciu
 *               w sekcji.
 *               1.1.0 — slajd może nieść to samo co sekcja powitalna:
 *               pigułka nad tytułem, przycisk bez podkreślenia, lista
 *               z ptaszkami czytelna na ciemnym zdjęciu.
 *               1.0.0 — arkusz strony przeniesiony z wizualizacji.
 * ============================================
 *
 *  ARKUSZ OSOBNY OD PANELU
 *  -----------------------
 *  Panel korzysta z app.css, strona publiczna z tego pliku. Rozdzielenie
 *  jest celowe: panel ma motyw konfigurowalny przez placówkę i osiem barw
 *  do ustawienia, strona ma jeden, stały wygląd produktu. Wspólny arkusz
 *  zmuszałby jedno do udawania drugiego.
 *
 *  Wartości pochodzą z wizualizacji i nie należy ich nadpisywać w miejscu
 *  użycia — paleta ma pięć kolorów i to jest limit. Każdy kolejny odcień
 *  osłabia hierarchię: zieleń przestaje znaczyć „tu kliknij", a amber
 *  „to wymaga uwagi".
 *
 *  Zapytania medialne zostawiono w całości — bez nich układ rozsypuje się
 *  na wąskich ekranach.
 */

/* ==========================================================================
   terminarz.online — tokeny systemu projektowego
   Źródło prawdy: docs/07-design-system.md
   Nie wpisuj wartości na sztywno w komponentach. Używaj tych zmiennych.
   ========================================================================== */

:root {
  /* --- Kolory: paleta ma 5 kolorów i to jest limit --------------------- */
  --background: #ffffff;
  --foreground: #111827;

  --surface: #f6f5f2;              /* ciepła kość */
  --surface-foreground: #111827;

  --primary: #0f766e;              /* głęboka zieleń morska */
  --primary-foreground: #ffffff;

  --muted: #f6f5f2;
  --muted-foreground: #656d7b;     /* kontrast 4.9:1 na białym — nie rozjaśniaj */

  --warning: #b45309;              /* amber */
  --warning-foreground: #ffffff;
  --destructive: #b45309;

  --border: rgb(17 24 39 / 12%);
  --input: rgb(17 24 39 / 14%);
  --ring: #0f766e;

  /* Warianty przezroczyste — używane w tłach etykiet i bloków wizyt */
  --primary-soft: rgb(15 118 110 / 10%);
  --primary-soft-strong: rgb(15 118 110 / 8%);
  --warning-soft: rgb(180 83 9 / 10%);
  --warning-soft-strong: rgb(180 83 9 / 8%);

  /* --- Typografia ------------------------------------------------------ */
  --font-heading: 'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  --text-xs: 0.6875rem;            /* 11px — etykiety, eyebrow */
  --text-sm: 0.8125rem;            /* 13px — tekst pomocniczy (minimum) */
  --text-base: 0.9375rem;          /* 15px — tekst podstawowy */
  --text-lg: 1.125rem;             /* 18px — H3 karty */
  --text-xl: 1.375rem;             /* 22px — H2 sekcji, .h4 */
  --text-2xl: 1.75rem;             /* 28px — H1 podstrony panelu, .h3 */

  /* --- Geometria ------------------------------------------------------- */
  --radius: 0.625rem;              /* 10px */
  --radius-sm: 0.375rem;           /* 6px */
  --radius-lg: 0.875rem;           /* 14px */
  --radius-full: 9999px;

  /* --- Skala odstępów: wyłącznie te wartości --------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-28: 112px;

  /* --- Layout ---------------------------------------------------------- */
  --header-h: 60px;                /* wysokość wiersza nagłówka */
  --page-max: 72rem;               /* 1152px */
  --page-pad: 20px;
  --sidebar-width: 240px;

  /* --- Cień: tylko dla elementów unoszących się ------------------------ */
  --shadow: 0 1px 3px rgb(17 24 39 / 8%);
  --shadow-lg: 0 10px 30px rgb(17 24 39 / 10%);

  /* --- Ruch ------------------------------------------------------------ */
  --transition: 150ms ease-out;

  /* --- Kalendarz ------------------------------------------------------- */
  --hour-height-day: 56px;
  --hour-height-week: 48px;
  --hour-gutter: 56px;
}

/* Statusy rezerwacji — nigdy nie kodujemy statusu samym kolorem.
   Każdy status ma kropkę, etykietę tekstową i kolor. */
:root {
  --status-pending: var(--warning);
  --status-pending-bg: var(--warning-soft);

  --status-confirmed: var(--primary);
  --status-confirmed-bg: var(--primary-soft);

  --status-completed: var(--muted-foreground);
  --status-completed-bg: var(--surface);

  --status-cancelled: var(--muted-foreground);
  --status-no-show: var(--warning);
}


/* ==========================================================================
   terminarz.online — arkusz główny
   Kolejność: reset → typografia → układ → komponenty → narzędzia
   Zależność: tokens.css musi być wczytany wcześniej.
   ========================================================================== */

/* --- 1. Reset ------------------------------------------------------------ */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-feature-settings: 'cv11', 'ss01';
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}

img,
svg {
  display: block;
  max-width: 100%;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

ul,
ol {
  list-style: none;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* Focus widoczny na każdym elemencie interaktywnym — nie usuwaj bez zamiennika */
:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --- 2. Typografia ------------------------------------------------------- */

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  text-wrap: balance;
}

h1 {
  font-size: clamp(1.875rem, 4vw, 2.75rem);
  font-weight: 700;
}

h1.hero-title {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.05;
}

h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.15;
}

h3 {
  font-size: var(--text-lg);
  line-height: 1.2;
}

h4 {
  font-size: 1rem;
}

p {
  text-wrap: pretty;
}

.eyebrow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--primary);
}

.lead {
  font-size: 1.0625rem;
  color: var(--muted-foreground);
  line-height: 1.6;
}

.text-sm {
  font-size: var(--text-sm);
}

.text-xs {
  font-size: var(--text-xs);
}

.muted {
  color: var(--muted-foreground);
}

.num {
  font-variant-numeric: tabular-nums;
}

.strong {
  font-weight: 600;
}

/* --- 3. Układ ------------------------------------------------------------ */

.container {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-pad);
}

/* Węższy kontener dla treści czytanych w jednej kolumnie (FAQ, dokumentacja). */
.container--narrow {
  max-width: 48rem;
}

/* Ogranicza długość wiersza opisu — bez inline style w HTML. */
.measure {
  max-width: 42rem;
}

.measure-sm {
  max-width: 22rem;
}

.section {
  padding-block: var(--space-12);
  border-bottom: 1px solid var(--border);
}

.section--tight {
  padding-block: var(--space-10);
}

.section--surface {
  background: var(--surface);
}

.stack {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  align-items: center;
}

.wrap {
  flex-wrap: wrap;
}

.between {
  justify-content: space-between;
}

.center {
  justify-content: center;
}

.start {
  align-items: flex-start;
}

.grow {
  flex: 1 1 auto;
  min-width: 0;
}

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-8 { gap: var(--space-8); }
.gap-10 { gap: var(--space-10); }
.gap-12 { gap: var(--space-12); }

.grid {
  display: grid;
  gap: var(--space-4);
}

.text-center {
  text-align: center;
}

.section-heading {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 40rem;
}

.section-heading p {
  color: var(--muted-foreground);
}

@media (min-width: 768px) {
  .section {
    padding-block: var(--space-16);
  }

  .grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .section {
    padding-block: var(--space-20);
  }

  .grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --- 4. Marka ----------------------------------------------------------- */

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.logo__mark {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: var(--primary-foreground);
  flex-shrink: 0;
}

.logo__mark svg {
  width: 16px;
  height: 16px;
}

.logo__dot {
  color: var(--primary);
}

/* --- Napisy obok znaku firmowego --- */

/* ZNAK WYŻSZY OD PASKA ZWISA POD NIEGO
   ------------------------------------
   Pasek jest przypięty do góry okna (position: sticky, top: 0). Przy
   align-items: center znak wyższy od wiersza wystawał symetrycznie w górę
   i w dół, a górna połowa nadmiaru wychodziła ponad krawędź ekranu
   i przepadała — wyglądało to na ucięte logo.

   Rozwiązanie z rosnącym paskiem odpadło, bo powiększenie znaku spychało
   całą stronę w dół. Zamiast tego znak jest przyklejony do góry wiersza
   i odsunięty od niej o połowę wolnego miejsca:

     znak niższy od paska   różnica dodatnia, znak wychodzi wyśrodkowany
     znak wyższy od paska   różnica ujemna, max() daje zero, znak zaczyna
                            się u góry wiersza i zwisa pod pasek

   --logo-h wstawia site_layout.php: wysokość obrazu albo 28 px rysowanego
   znaku, gdy obrazu nie ma. Wartość zapasowa w var() dotyczy tylko stron,
   które jeszcze nie przeszły przez nową wersję szablonu.

   min-width: 0 — bez tego pozycja kontenera flex nie kurczy się poniżej
   swojej treści i długi napis rozpychałby pasek zamiast się zawinąć. */
.logo {
  min-width: 0;
  align-self: start;
  margin-top: max(0px, calc((var(--header-h) - var(--logo-h, 28px)) / 2));
}

.logo__names {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}

.logo__name {
  font-size: var(--logo-name, 1.0625rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--foreground);
}

.logo__sub {
  margin-top: 2px;
  font-size: var(--logo-sub, 0.75rem);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted-foreground);
}

/* Na telefonie zostaje sam napis główny.

   Poniżej 768 px nawigacja chowa się pod przycisk menu i na znak zostaje
   około 260 px przy ekranie 360 px — minus szerokość obrazu. Podpis
   zabierałby drugi wiersz w miejscu, gdzie każdy wiersz u góry to wiersz
   zabrany treści. Wielkość napisu głównego też przycinamy, bo suwak
   ustawia się patrząc na duży ekran. */
@media (max-width: 47.99rem) {
  .logo__sub {
    display: none;
  }

  /* Sufit, nie wartość stała: mniejsze ustawienie z panelu zostaje
     nietknięte, większe schodzi do 18 px. */
  .logo__name {
    font-size: min(var(--logo-name, 1.0625rem), 1.125rem);
  }
}

/* --- 5. Przyciski -------------------------------------------------------- */

.btn {
  --btn-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--btn-height);
  padding-inline: var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: var(--text-base);
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition),
    opacity var(--transition);
}

.btn:hover {
  background: color-mix(in oklab, var(--primary) 88%, black);
}

.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn--outline {
  background: transparent;
  border-color: var(--border);
  color: var(--foreground);
}

.btn--outline:hover {
  background: var(--surface);
}

.btn--ghost {
  background: transparent;
  color: var(--foreground);
}

.btn--ghost:hover {
  background: var(--surface);
}

.btn--destructive {
  background: var(--destructive);
  color: var(--warning-foreground);
}

.btn--destructive:hover {
  background: color-mix(in oklab, var(--destructive) 88%, black);
}

.btn--inverse {
  background: var(--background);
  color: var(--foreground);
}

.btn--inverse:hover {
  background: color-mix(in oklab, var(--background) 92%, black);
}

.btn--sm {
  --btn-height: 32px;
  padding-inline: var(--space-3);
  font-size: var(--text-sm);
}

.btn--lg {
  --btn-height: 44px;
  padding-inline: var(--space-5);
}

.btn--hero {
  --btn-height: 48px;
  padding-inline: var(--space-6);
}

.btn--block {
  width: 100%;
}

.btn--icon {
  width: var(--btn-height);
  padding-inline: 0;
}

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-group {
  display: inline-flex;
  align-self: flex-start;
  width: fit-content;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.btn-group button {
  padding: 6px var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}

.btn-group button:hover {
  color: var(--foreground);
}

.btn-group button[aria-selected='true'],
.btn-group button.is-active {
  background: var(--background);
  color: var(--foreground);
  box-shadow: var(--shadow);
}

/* --- 6. Formularze ------------------------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.label {
  font-size: var(--text-sm);
  font-weight: 500;
}

.field-hint {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}

.field-error {
  font-size: var(--text-xs);
  color: var(--destructive);
  font-weight: 500;
}

.input,
.select,
.textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px var(--space-3);
  border: 1px solid var(--input);
  border-radius: var(--radius);
  background: var(--background);
  font-size: var(--text-base);
  transition: border-color var(--transition);
}

.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 1px;
  border-color: var(--ring);
}

.textarea {
  min-height: 112px;
  resize: vertical;
  line-height: 1.55;
}

.select {
  appearance: none;
  padding-right: var(--space-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23656d7b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  background-size: 16px;
  cursor: pointer;
}

[aria-invalid='true'] {
  border-color: var(--destructive) !important;
}

/*
  Przeglądarka renderuje <input type="time"> według locale systemu, więc pole
  musi pomieścić format 12-godzinny („06:00 PM”) razem z ikoną zegara —
  przy 124px wartość była przycinana.
*/
.input--time {
  width: 152px;
  font-variant-numeric: tabular-nums;
}

/* Pole z przyciskiem w środku — używane do podglądu hasła. */
.input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.input-group .input {
  padding-right: 44px;
}

.input-group__btn {
  position: absolute;
  right: 4px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--muted-foreground);
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}

.input-group__btn:hover {
  background: var(--surface);
  color: var(--foreground);
}

.input-group__btn:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 1px;
}

.input-group__btn svg {
  width: 16px;
  height: 16px;
}

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.checkbox-row input[type='checkbox'] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--primary);
  flex-shrink: 0;
  cursor: pointer;
}

.checkbox-row label {
  font-size: var(--text-sm);
  line-height: 1.5;
  cursor: pointer;
}

@media (min-width: 768px) {
  .input,
  .select,
  .textarea {
    min-height: 36px;
  }

  .field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }
}

/* Przełącznik (switch) */
.switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  cursor: pointer;
}

.switch__track {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-full);
  background: color-mix(in oklab, var(--foreground) 18%, transparent);
  transition: background-color var(--transition);
  pointer-events: none;
}

.switch__track::after {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  margin: 2px;
  border-radius: var(--radius-full);
  background: var(--background);
  box-shadow: var(--shadow);
  transition: transform var(--transition);
}

.switch input:checked + .switch__track {
  background: var(--primary);
}

.switch input:checked + .switch__track::after {
  transform: translateX(18px);
}

.switch input:focus-visible + .switch__track {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* --- 7. Karty ----------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-5);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
}

.card--surface {
  background: var(--surface);
}

.card--flat {
  border-radius: var(--radius-lg);
}

.card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
}

.card-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  flex-shrink: 0;
}

.card-icon svg {
  width: 20px;
  height: 20px;
}

/* --- 8. Etykiety statusu ------------------------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
  flex-shrink: 0;
}

.badge--pending {
  background: var(--status-pending-bg);
  color: var(--status-pending);
}

.badge--confirmed {
  background: var(--status-confirmed-bg);
  color: var(--status-confirmed);
}

.badge--completed {
  background: var(--status-completed-bg);
  color: var(--status-completed);
}

.badge--cancelled {
  color: var(--status-cancelled);
}

.badge--cancelled .badge__label {
  text-decoration: line-through;
}

.badge--no_show {
  color: var(--muted-foreground);
}

.badge--no_show .badge__dot {
  background: var(--status-no-show);
}

.badge--neutral {
  background: var(--surface);
  color: var(--muted-foreground);
}

.badge--primary {
  background: var(--primary-soft);
  color: var(--primary);
}

/* Pigułka nad nagłówkiem hero — nie rozciąga się na całą szerokość kolumny */
.pill {
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  gap: var(--space-2);
  padding: 6px var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.pill__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--primary);
  flex-shrink: 0;
}

/* --- 9. Tabela ---------------------------------------------------------- */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.table {
  min-width: 720px;
  font-size: var(--text-base);
}

.table th {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  text-align: left;
  white-space: nowrap;
}

.table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

.table tbody tr.is-clickable {
  cursor: pointer;
  transition: background-color var(--transition);
}

.table tbody tr.is-clickable:hover {
  background: var(--surface);
}

.table__group td {
  background: var(--surface);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
}

.table .text-right {
  text-align: right;
}

/* Dwuwierszowa komórka: wartość główna + uzupełnienie pod nią. */
.cell-stack {
  display: flex;
  flex-direction: column;
}

.cell-stack__main {
  font-size: var(--text-sm);
  font-weight: 500;
}

.cell-stack__sub {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

/* --- 9b. Lista rezerwacji: filtry i karty ------------------------------- */

.bookings-filters {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.bookings-filters__right {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Pole szukania z ikoną w środku — wariant .input-group z ikoną po lewej. */
.search-field {
  position: relative;
  display: flex;
  align-items: center;
}

.search-field__icon {
  position: absolute;
  left: var(--space-3);
  color: var(--muted-foreground);
  pointer-events: none;
}

.search-field .input {
  padding-left: var(--space-10);
}

/* Filtry statusu — pigułki przełączane aria-pressed. */
.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-chip {
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--background);
  color: var(--muted-foreground);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
    border-color var(--transition);
}

.filter-chip:hover {
  background: var(--surface);
  color: var(--foreground);
}

.filter-chip[aria-pressed='true'] {
  border-color: var(--foreground);
  background: var(--foreground);
  color: var(--background);
}

/*
  Te same dane w dwóch wariantach: tabela od 1024 px, karty poniżej.
  Tabela ma min-width 720 px, więc na telefonie zawsze przewijałaby się w bok.
*/
.bookings-table {
  display: none;
}

.booking-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.booking-card {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition);
}

.booking-card:hover {
  border-color: var(--primary);
}

.booking-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.booking-card__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 640px) {
  .search-field .input {
    width: 16rem;
  }
}

@media (min-width: 1024px) {
  .bookings-filters {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .bookings-filters__right {
    flex-direction: row;
    align-items: center;
  }

  .bookings-table {
    display: block;
  }

  .booking-cards {
    display: none;
  }
}

/* --- 9c. Cennik usług --------------------------------------------------- */

.services-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.services-group__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

/* Usługa wyłączona zostaje na liście, ale schodzi na drugi plan. */
.is-dimmed {
  opacity: 0.55;
}

/* Przełącznik z etykietą po prawej. */
.switch-field {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

.switch-field__label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--muted-foreground);
  white-space: nowrap;
}

.switch-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

/* Tabela od 1024 px, karty poniżej — jak na liście rezerwacji. */
.services-table {
  display: none;
}

.service-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
}

.service-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.service-card__price {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.service-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
}

.service-card__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

@media (min-width: 1024px) {
  .services-table {
    display: block;
  }

  .service-cards {
    display: none;
  }
}

/* --- 9d. Baza klientów -------------------------------------------------- */

/* Avatar z inicjałami + nazwa i telefon pod nią. */
.client-identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}

.clients-table {
  display: none;
}

.client-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.client-card {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition);
}

.client-card:hover {
  border-color: var(--primary);
}

.client-card__stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
}

.client-card__stats strong {
  color: var(--foreground);
}

/* Nagłówek karty klienta w panelu bocznym. */
.sheet-identity {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Historia wizyt w panelu bocznym. */
.history-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}

.history-list .history-item:last-child {
  border-bottom: 0;
}

.history-item__right {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (min-width: 1024px) {
  .clients-table {
    display: block;
  }

  .client-cards {
    display: none;
  }
}

/* --- 9e. Godziny pracy -------------------------------------------------- */

.hours-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/*
  Mobile: dzień, godziny i podsumowanie jeden pod drugim.
  Od 900 px układ trójkolumnowy — nazwa dnia ma stałą szerokość, żeby pola
  godzin ustawiły się w jednej pionowej linii przez cały tydzień.
*/
.hours-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
}

.hours-list .hours-row:last-child {
  border-bottom: 0;
}

.hours-row__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--foreground);
}

.hours-row__times {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
}

.hours-pair {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/*
  Na wąskich ekranach para nie zmieści się w stałej szerokości .input--time
  (152px pod format 12-godzinny), więc pola oddają szerokość na rzecz kolumny:
  etykieta „przerwa” idzie do własnego wiersza, a inputy się kurczą.
*/
@media (max-width: 899px) {
  .hours-pair {
    width: 100%;
    flex-wrap: wrap;
  }

  .hours-pair .input--time {
    width: auto;
    min-width: 0;
    /* Węższy padding odchudza szerokość minimalną pola, dzięki czemu przycisk
       usuwania przerwy mieści się w tym samym wierszu co godziny. */
    padding-inline: var(--space-2);
    flex: 1 1 0;
  }

  .hours-pair__label {
    flex-basis: 100%;
  }

  /*
    Chrome wymusza dla <input type="time"> szerokość minimalną ok. 131px, więc
    dwa pola, myślnik i przycisk nie zmieszczą się w jednym wierszu na telefonie.
    Zamiast osierocać „✕” w trzecim wierszu, sadzamy go w linii etykiety.
  */
  .hours-pair--break {
    position: relative;
  }

  .hours-pair--break > [data-break-remove] {
    position: absolute;
    top: 0;
    right: 0;
  }
}

.hours-pair__label {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}

.hours-dash {
  color: var(--muted-foreground);
}

/* Label owija input tylko dla etykiety sr-only — szerokość daje .input--time. */
.hours-time {
  display: inline-flex;
}

@media (min-width: 900px) {
  .hours-row {
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
  }

  .hours-row__day {
    width: 11rem;
    flex-shrink: 0;
  }

  .hours-row__times {
    flex: 1 1 auto;
    min-width: 0;
  }

  .hours-row__sum {
    width: 10rem;
    flex-shrink: 0;
    text-align: right;
  }
}

/* Dni wolne */
.timeoff-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.timeoff-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}

.timeoff-list .timeoff-item:last-child {
  border-bottom: 0;
}

/* --- 9f. Ustawienia ----------------------------------------------------- */

/*
  Pola danych firmy: jedna kolumna na telefonie, dwie od 640 px.
  Pola pełnej szerokości (adres, opis) dostają .settings-grid__wide.
*/
.settings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 640px) {
  .settings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .settings-grid__wide {
    grid-column: 1 / -1;
  }
}

/* Adres strony rezerwacji: stały prefiks domeny + edytowalny slug. */
.slug-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.slug-row__prefix {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-inline: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  white-space: nowrap;
}

.slug-row__input {
  flex: 1 1 10rem;
  min-width: 0;
}

/* Lista przełączników powiadomień — ta sama ramka co .hours-list. */
.toggle-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/*
  Przełącznik po lewej trzyma stałą szerokość, tekst zabiera resztę wiersza.
  Bez flex:1 na tekście krótkie opisy „wisiały” wyśrodkowane obok switcha.
*/
.toggle-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}

.toggle-list .toggle-row:last-child {
  border-bottom: 0;
}

/* Tytuł i podpowiedź to <span>, więc muszą dostać własne wiersze. */
.toggle-row__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  text-align: left;
}

.toggle-row__title {
  font-size: var(--text-sm);
  font-weight: 600;
}

.toggle-row__hint {
  margin-top: 2px;
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}

/* Podsumowanie reguł rezerwacji — zdanie składane z aktualnych wartości. */
.rules-summary {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}

.rules-summary svg {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--primary);
}

/* --- 10. Awatar --------------------------------------------------------- */

.avatar {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--muted-foreground);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar--lg {
  width: 48px;
  height: 48px;
  font-size: var(--text-base);
}

.avatar--primary {
  background: var(--primary-soft);
  color: var(--primary);
}

/* --- 11. Nagłówek strony publicznej ------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--background) 88%, transparent);
  backdrop-filter: blur(8px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);

  /* Pasek ma stałą wysokość i nie rośnie razem ze znakiem — inaczej
     powiększenie znaku spycha całą stronę w dół. Znak wyższy od paska
     zwisa pod niego, patrz .logo niżej. */
  height: var(--header-h);
}

.site-nav {
  display: none;
  align-items: center;
  gap: var(--space-6);
}

.site-nav a {
  font-size: var(--text-base);
  color: var(--muted-foreground);
  transition: color var(--transition);
}

.site-nav a:hover,
.site-nav a.is-active {
  color: var(--foreground);
}

.site-header__actions {
  display: none;
  align-items: center;
  gap: var(--space-2);
}

.nav-toggle {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
}

.nav-toggle svg {
  width: 20px;
  height: 20px;
}

.mobile-nav {
  display: none;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-5) var(--space-6);
  border-top: 1px solid var(--border);
}

.mobile-nav.is-open {
  display: flex;
}

.mobile-nav a.mobile-nav__link {
  font-size: 1.0625rem;
  font-weight: 500;
  padding-block: var(--space-2);
}

@media (min-width: 768px) {
  .site-nav,
  .site-header__actions {
    display: flex;
  }

  .nav-toggle {
    display: none;
  }

  .mobile-nav,
  .mobile-nav.is-open {
    display: none;
  }
}

/* --- 12. Stopka --------------------------------------------------------- */

.site-footer {
  background: var(--surface);
  padding-block: var(--space-12);
}

.footer-grid {
  display: grid;
  gap: var(--space-8);
}

.footer-col h4 {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: var(--space-3);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.footer-col a {
  font-size: var(--text-base);
  color: var(--muted-foreground);
  transition: color var(--transition);
}

.footer-col a:hover {
  color: var(--foreground);
}

.footer-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-6);
  margin-top: var(--space-8);
  border-top: 1px solid var(--border);
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1.5fr repeat(3, 1fr);
  }

  .footer-bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* --- 13. Hero ----------------------------------------------------------- */

.hero {
  padding-block: var(--space-12) var(--space-16);
  border-bottom: 1px solid var(--border);
}

.hero__grid {
  display: grid;
  gap: var(--space-12);
  align-items: center;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}

.hero__proof li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.hero__proof svg {
  width: 14px;
  height: 14px;
  color: var(--primary);
  flex-shrink: 0;
}

.page-hero {
  padding-block: var(--space-12);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.page-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 44rem;
}

@media (min-width: 1024px) {
  .hero {
    padding-block: var(--space-20) var(--space-28);
  }

  .hero__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }

  .page-hero {
    padding-block: var(--space-16);
  }
}

/* --- 14. Makieta produktu ----------------------------------------------- */

.mockup {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--background);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.mockup__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  font-size: var(--text-sm);
  font-weight: 600;
}

.mockup__body {
  padding: var(--space-4);
}

.mock-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--primary);
  background: var(--primary-soft-strong);
}

.mock-row--pending {
  border-left-color: var(--warning);
  background: var(--warning-soft-strong);
}

.mock-row--free {
  border-left-color: transparent;
  background: var(--surface);
  color: var(--muted-foreground);
}

.mock-row__time {
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  min-width: 44px;
}

/* --- 15. Kroki (jak to działa) ------------------------------------------ */

.steps {
  display: grid;
  gap: var(--space-6);
  counter-reset: step;
}

.step {
  display: flex;
  gap: var(--space-4);
}

.step__num {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--primary-foreground);
  font-family: var(--font-heading);
  font-size: var(--text-sm);
  font-weight: 700;
  flex-shrink: 0;
}

/* --- Pasek postępu w kreatorze rezerwacji ------------------------------- */

.wizard-steps {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
}

.wizard-steps li {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: var(--space-2);
}

.wizard-steps li:last-child {
  flex: 0 0 auto;
}

.wizard-steps__num {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  color: var(--muted-foreground);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.wizard-steps__num svg {
  width: 14px;
  height: 14px;
}

.wizard-steps__label {
  display: none;
  font-weight: 500;
  color: var(--muted-foreground);
}

/* Linia łącząca kroki — wypełnia się na zielono po przejściu kroku. */
.wizard-steps__line {
  height: 1px;
  flex: 1 1 auto;
  background: var(--border);
}

.wizard-steps li.is-current .wizard-steps__num {
  border-color: var(--primary);
  color: var(--primary);
}

.wizard-steps li.is-current .wizard-steps__label {
  color: var(--foreground);
}

.wizard-steps li.is-done .wizard-steps__num {
  border-color: var(--primary);
  background: var(--primary);
  color: var(--primary-foreground);
}

.wizard-steps li.is-done .wizard-steps__label {
  color: var(--foreground);
}

.wizard-steps li.is-done .wizard-steps__line {
  background: var(--primary);
}

@media (min-width: 640px) {
  .wizard-steps__label {
    display: inline;
  }
}

/* --- 16. Cennik --------------------------------------------------------- */

.plans {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}

.plan {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--background);
}

.plan--featured {
  border-color: var(--primary);
  border-width: 2px;
  box-shadow: var(--shadow);
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.plan__price span {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--muted-foreground);
}

.plan__features {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: var(--text-base);
}

.plan__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
}

.plan__features svg {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  color: var(--primary);
  flex-shrink: 0;
}

/* Funkcja niedostępna w planie — wyszarzona, z myślnikiem zamiast fajki. */
.plan__features li.is-excluded {
  color: var(--muted-foreground);
}

.plan__features li.is-excluded svg {
  color: color-mix(in oklab, var(--muted-foreground) 60%, transparent);
}

/* Oddziela listę funkcji od przycisku wyboru planu. */
.plan__features {
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}

.billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

/* Ikony w tabeli porównania planów. */
.icon--ok {
  width: 18px;
  height: 18px;
  color: var(--primary);
}

.icon--off {
  width: 18px;
  height: 18px;
  color: color-mix(in oklab, var(--muted-foreground) 55%, transparent);
}

/* Etykieta „Najczęściej wybierany” na wyróżnionym planie. */
.badge--solid {
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 4px var(--space-2);
  letter-spacing: 0.02em;
}

/* Trzy kolumny dopiero od 1024 px — na tablecie plany były zbyt ciasne. */
@media (min-width: 1024px) {
  .plans {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* --- 17. FAQ ------------------------------------------------------------ */

.faq {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
}

.faq__item {
  border-bottom: 1px solid var(--border);
}

.faq__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-5) 0;
  border: 0;
  background: transparent;
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.faq__trigger svg {
  width: 18px;
  height: 18px;
  color: var(--muted-foreground);
  flex-shrink: 0;
  transition: transform var(--transition);
}

.faq__trigger[aria-expanded='true'] svg {
  transform: rotate(180deg);
}

.faq__panel {
  display: none;
  padding-bottom: var(--space-5);
  color: var(--muted-foreground);
  max-width: 44rem;
}

.faq__panel.is-open {
  display: block;
}

/* --- 18. CTA końcowe ---------------------------------------------------- */

.cta-band {
  background: var(--foreground);
  color: var(--background);
  padding-block: var(--space-16);
  text-align: center;
}

.cta-band__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  max-width: 40rem;
  margin-inline: auto;
}

.cta-band h2 {
  color: var(--background);
}

.cta-band p {
  color: color-mix(in oklab, var(--background) 72%, transparent);
}

.cta-band__note {
  font-size: var(--text-xs);
  color: color-mix(in oklab, var(--background) 50%, transparent);
}

/* --- 19. Layout panelu -------------------------------------------------- */

.panel {
  display: flex;
  min-height: 100dvh;
}

.panel__sidebar {
  display: none;
  flex-direction: column;
  gap: var(--space-6);
  width: var(--sidebar-width);
  flex-shrink: 0;
  padding: var(--space-5);
  border-right: 1px solid var(--border);
  background: var(--surface);
  position: sticky;
  top: 0;
  height: 100dvh;
  overflow-y: auto;
}

/* Kolumna obok sidebara: topbar + treść. `min-width: 0` jest konieczne,
   bo bez niego szeroka siatka kalendarza rozpycha element flex ponad
   szerokość okna, zamiast przewijać się wewnątrz. */
.panel__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.panel__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.panel__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--page-pad);
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--background) 88%, transparent);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 30;
}

/* Od 1024 px nawigacja jest w stałym sidebarze, więc pasek mobilny
   z hamburgerem i logo jest zbędny. */
@media (min-width: 1024px) {
  .panel__topbar {
    display: none;
  }
}

.panel__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6) var(--page-pad) var(--space-12);
}

.panel-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.panel-nav__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  padding: var(--space-2) var(--space-3);
}

.panel-nav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  color: var(--muted-foreground);
  transition: background-color var(--transition), color var(--transition);
}

.panel-nav a svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.panel-nav a:hover {
  background: color-mix(in oklab, var(--foreground) 5%, transparent);
  color: var(--foreground);
}

.panel-nav a.is-active {
  background: var(--background);
  color: var(--primary);
  font-weight: 500;
  box-shadow: var(--shadow);
}

.panel-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6) var(--page-pad);
  border-bottom: 1px solid var(--border);
  background: var(--background);
}

@media (min-width: 1024px) {
  .panel-header {
    padding-inline: var(--space-8);
  }
}

.panel-header__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}

.panel-header h1 {
  font-size: 1.5rem;
}

.panel-header p {
  color: var(--muted-foreground);
  font-size: var(--text-base);
}

/* Sidebar wysuwany na mobile */
.panel-drawer {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
}

.panel-drawer.is-open {
  display: block;
}

.panel-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(17 24 39 / 45%);
}

.panel-drawer__sheet {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: min(280px, 84vw);
  height: 100%;
  padding: var(--space-5);
  background: var(--surface);
  border-right: 1px solid var(--border);
  overflow-y: auto;
}

@media (min-width: 1024px) {
  .panel__sidebar {
    display: flex;
  }

  .panel__topbar {
    padding-inline: var(--space-8);
  }

  .panel__content {
    padding-inline: var(--space-8);
  }

  .panel-toggle {
    display: none;
  }
}

/* --- 20. KPI ------------------------------------------------------------ */

.kpi-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.kpi {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
}

.kpi__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.kpi__value {
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.kpi__meta {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}

@media (min-width: 1024px) {
  .kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* --- 21. Kalendarz ------------------------------------------------------ */

.calendar {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  overflow: hidden;
}

.calendar__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}

.calendar__title {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 600;
  text-transform: capitalize;
}

/* Siatka tygodnia ma min-width: 760px. Bez `min-width: 0` ta wartość
   rozpychałaby kartę kalendarza i całą stronę na wąskich ekranach,
   zamiast włączyć przewijanie w poziomie. */
.calendar__scroll {
  overflow-x: auto;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
}

/* Widok dnia i tygodnia: kolumna godzin + kolumny dni */
.cal-grid {
  display: grid;
  min-width: 100%;
}

.cal-grid--day {
  grid-template-columns: var(--hour-gutter) 1fr;
}

.cal-grid--week {
  grid-template-columns: var(--hour-gutter) repeat(7, minmax(96px, 1fr));
  min-width: 760px;
}

.cal-head {
  display: contents;
}

.cal-head__cell {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--border);
  background: var(--surface);
  font-size: var(--text-sm);
  font-weight: 600;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 2;
}

.cal-head__cell:first-child {
  border-left: 0;
}

.cal-head__cell.is-today {
  color: var(--primary);
}

.cal-head__cell small {
  display: block;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--muted-foreground);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.cal-hours {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--border);
}

.cal-hours__cell {
  height: var(--hour-height-day);
  padding-right: var(--space-2);
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  color: var(--muted-foreground);
  text-align: right;
  border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
}

.cal-col {
  position: relative;
  border-left: 1px solid var(--border);
}

.cal-col:first-of-type {
  border-left: 0;
}

.cal-col__slot {
  height: var(--hour-height-day);
  border-bottom: 1px solid color-mix(in oklab, var(--border) 60%, transparent);
}

.cal-grid--week .cal-hours__cell,
.cal-grid--week .cal-col__slot {
  height: var(--hour-height-week);
}

/* Godziny poza czasem pracy — kreskowanie 45° */
.bg-hatch {
  background-image: repeating-linear-gradient(
    45deg,
    color-mix(in oklab, var(--foreground) 5%, transparent) 0 1px,
    transparent 1px 7px
  );
}

.cal-col--closed {
  background: var(--muted);
  pointer-events: none;
}

/* Pas czasu poza godzinami pracy lub przerwa. Pozycję i wysokość
   liczy JS (panel-calendar.js) — tu tylko wygląd. */
.cal-band {
  position: absolute;
  left: 0;
  right: 0;
  background: color-mix(in oklab, var(--muted) 70%, transparent);
  pointer-events: none;
}

/* Etykieta urlopu / dnia wolnego na kolumnie dnia. */
.cal-off {
  position: absolute;
  left: 4px;
  right: 4px;
  top: var(--space-3);
  padding: 6px var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--background);
  font-size: 11px;
  font-weight: 500;
  color: var(--muted-foreground);
  text-align: center;
}

/* Blok wizyty — jedyne miejsce z pozycjonowaniem absolutnym */
.event {
  position: absolute;
  left: 3px;
  right: 3px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 6px;
  border: 0;
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--primary-soft-strong);
  color: var(--foreground);
  text-align: left;
  overflow: hidden;
  cursor: pointer;
  transition: background-color var(--transition);
}

.event:hover {
  background: var(--primary-soft);
}

.event__top {
  display: flex;
  align-items: center;
  gap: 6px;
}

.event__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--primary);
  flex-shrink: 0;
}

.event__time {
  font-size: var(--text-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.event__name {
  font-size: var(--text-xs);
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event__meta {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.event--pending {
  border-left-color: var(--warning);
  background: var(--warning-soft-strong);
}

.event--pending:hover {
  background: var(--warning-soft);
}

.event--pending .event__dot {
  background: var(--warning);
}

.event--completed {
  border-left-color: var(--muted-foreground);
  background: var(--surface);
}

.event--completed .event__dot {
  background: var(--muted-foreground);
}

.event--cancelled {
  border-left-color: var(--muted-foreground);
  background: transparent;
  opacity: 0.6;
}

.event--cancelled .event__name {
  text-decoration: line-through;
}

.event--cancelled .event__dot {
  background: var(--muted-foreground);
}

.event--no_show {
  border-left-color: var(--warning);
  background: transparent;
}

.event--no_show .event__dot {
  background: var(--warning);
}

/* Widok miesiąca */
.cal-month {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cal-month__dow {
  padding: var(--space-2);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  text-align: center;
}

.cal-month__day {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-height: 92px;
  padding: var(--space-2);
  border-bottom: 1px solid var(--border);
  border-left: 1px solid var(--border);
}

.cal-month__day:nth-child(7n + 1) {
  border-left: 0;
}

.cal-month__day.is-outside {
  background: color-mix(in oklab, var(--surface) 60%, transparent);
  color: var(--muted-foreground);
}

/* Dzień zamknięty. Sam odcień --muted jest zbyt bliski tłu, żeby dało się go
   odróżnić, więc dokładamy delikatne kreskowanie 45° — tak jak przerwa
   w widoku tygodnia. */
.cal-month__day.is-closed {
  background-color: var(--muted);
  background-image: repeating-linear-gradient(
    45deg,
    color-mix(in oklab, var(--foreground) 6%, transparent) 0 1px,
    transparent 1px 8px
  );
  color: var(--muted-foreground);
}

.cal-month__num {
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.cal-month__day.is-today .cal-month__num {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--primary-foreground);
}

.cal-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  border-radius: 4px;
  background: var(--primary-soft-strong);
  font-size: var(--text-xs);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.cal-chip--pending {
  background: var(--warning-soft-strong);
}

.cal-chip__dot {
  width: 5px;
  height: 5px;
  border-radius: var(--radius-full);
  background: var(--primary);
  flex-shrink: 0;
}

.cal-chip--pending .cal-chip__dot {
  background: var(--warning);
}

.cal-more {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  padding-left: 4px;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}

.legend li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

/* --- 22. Kreator rezerwacji --------------------------------------------- */

.booking {
  max-width: 44rem;
  margin-inline: auto;
  padding-block: var(--space-8) var(--space-16);
}

.stepper {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-8);
}

.stepper__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1 1 auto;
  min-width: 0;
}

.stepper__num {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: var(--background);
  color: var(--muted-foreground);
  font-size: var(--text-sm);
  font-weight: 600;
  flex-shrink: 0;
}

.stepper__item.is-active .stepper__num {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}

.stepper__item.is-done .stepper__num {
  background: var(--primary-soft);
  border-color: transparent;
  color: var(--primary);
}

.stepper__label {
  display: none;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--muted-foreground);
}

.stepper__item.is-active .stepper__label {
  color: var(--foreground);
}

.stepper__line {
  height: 1px;
  flex: 1 1 auto;
  background: var(--border);
  min-width: var(--space-2);
}

@media (min-width: 640px) {
  .stepper__label {
    display: block;
  }
}

.service-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition);
}

.service-option:hover {
  border-color: var(--primary);
  background: var(--primary-soft-strong);
}

.service-option__name {
  font-family: var(--font-heading);
  font-weight: 600;
}

.service-option__meta {
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}

.service-option__price {
  font-family: var(--font-heading);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.day-picker {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-bottom: var(--space-2);
}

.day-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 64px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition);
}

.day-pill:hover:not(:disabled) {
  border-color: var(--primary);
}

.day-pill.is-selected {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}

.day-pill:disabled {
  background: var(--muted);
  color: var(--muted-foreground);
  cursor: not-allowed;
  opacity: 0.7;
}

.day-pill__dow {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.day-pill__num {
  font-family: var(--font-heading);
  font-size: 1.0625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: var(--space-2);
}

.slot {
  padding: var(--space-3) var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
  font-size: var(--text-base);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition);
}

.slot:hover {
  border-color: var(--primary);
  background: var(--primary-soft-strong);
}

.slot.is-selected {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}

.summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius);
  background: var(--surface);
}

.summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-base);
}

.summary__row dt {
  color: var(--muted-foreground);
}

.summary__row dd {
  font-weight: 600;
  text-align: right;
}

.confirm-mark {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--primary-soft);
  color: var(--primary);
  margin-inline: auto;
}

.confirm-mark svg {
  width: 28px;
  height: 28px;
}

/* --- 23. Panel boczny szczegółów (sheet) -------------------------------- */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: none;
}

.sheet.is-open {
  display: block;
}

.sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(17 24 39 / 45%);
}

.sheet__panel {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(420px, 100vw);
  height: 100%;
  background: var(--background);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
}

.sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  border-bottom: 1px solid var(--border);
}

.sheet__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: var(--space-5);
  overflow-y: auto;
  flex: 1 1 auto;
}

.sheet__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-5);
  border-top: 1px solid var(--border);
}

/* Akcja główna nad wierszem akcji pobocznych — panel jest wąski. */
.sheet-actions {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: var(--space-2);
}

.sheet-actions__row {
  display: flex;
  gap: var(--space-2);
}

.sheet-actions__row > .btn {
  flex: 1 1 0;
}

/* Odwołanie jest destrukcyjne, ale nie powinno krzyczeć mocniej niż główna akcja. */
.btn--danger-text {
  color: var(--destructive);
}

.btn--danger-text:hover {
  border-color: var(--destructive);
}

.detail-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.detail-list > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  font-size: var(--text-base);
}

.detail-list dt {
  color: var(--muted-foreground);
  flex-shrink: 0;
}

.detail-list dd {
  font-weight: 500;
  text-align: right;
}

/* --- 24. Powiadomienia (toast) ------------------------------------------ */

.toasts {
  position: fixed;
  bottom: var(--space-4);
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: min(420px, calc(100vw - 32px));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--foreground);
  color: var(--background);
  box-shadow: var(--shadow-lg);
  font-size: var(--text-base);
  animation: toast-in 180ms ease-out;
  pointer-events: auto;
}

.toast svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.toast.is-leaving {
  animation: toast-out 150ms ease-in forwards;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateY(8px);
  }
}

@media (min-width: 768px) {
  .toasts {
    left: auto;
    right: var(--space-6);
    bottom: var(--space-6);
    transform: none;
  }
}

/* --- 25. Stan pusty ----------------------------------------------------- */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-5);
  border-radius: var(--radius);
  background: var(--surface);
  text-align: center;
}

.empty__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--background);
  color: var(--muted-foreground);
}

.empty p {
  font-size: var(--text-base);
  color: var(--muted-foreground);
  max-width: 32rem;
}

/* --- 26. Alert ---------------------------------------------------------- */

.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: var(--text-base);
}

.alert svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--muted-foreground);
}

.alert--warning {
  border-color: color-mix(in oklab, var(--warning) 30%, transparent);
  background: var(--warning-soft);
}

.alert--warning svg {
  color: var(--warning);
}

.alert--info {
  border-color: color-mix(in oklab, var(--primary) 24%, transparent);
  background: var(--primary-soft);
}

.alert--info svg {
  color: var(--primary);
}

/* --- 27. Ekrany logowania ----------------------------------------------- */

.auth {
  display: grid;
  min-height: 100dvh;
}

.auth__form-side {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  padding: var(--space-8) var(--page-pad) var(--space-12);
  max-width: 27rem;
  width: 100%;
  margin-inline: auto;
  justify-content: center;
}

.auth__aside {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-6);
  padding: var(--space-12);
  background: var(--surface);
  border-left: 1px solid var(--border);
}

.auth__benefits {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.auth__benefits li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-base);
}

.auth__benefits svg {
  width: 18px;
  height: 18px;
  margin-top: 3px;
  color: var(--primary);
  flex-shrink: 0;
}

.divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}

.divider::before,
.divider::after {
  content: '';
  height: 1px;
  flex: 1 1 auto;
  background: var(--border);
}

/* --- Strona kontaktu ----------------------------------------------------- */

.contact-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.contact-channels {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.contact-channel {
  display: flex;
  gap: var(--space-4);
}

.contact-channel__icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--primary);
  flex-shrink: 0;
}

.contact-channel__icon svg {
  width: 20px;
  height: 20px;
}

.contact-channel__label {
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.contact-channel__value {
  font-weight: 500;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--background);
}

@media (min-width: 1024px) {
  .contact-layout {
    flex-direction: row;
    gap: var(--space-16);
  }

  .contact-layout__side {
    width: 38%;
    flex-shrink: 0;
  }

  .contact-layout__main {
    flex: 1 1 auto;
  }

  .contact-form {
    padding: var(--space-8);
  }
}

/* --- Ekrany logowania i rejestracji ------------------------------------- */

.auth {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.auth__form-side {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: var(--space-8) var(--space-5);
}

.auth__form-inner {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-8);
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
  padding-block: var(--space-10);
}

/* Pasek zaufania — na mobile zbędny, pokazujemy od 1024 px. */
.auth__aside {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-10);
  padding: var(--space-12) var(--space-10);
  border-left: 1px solid var(--border);
  background: var(--surface);
}

.auth__quote {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.auth__quote p {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 500;
  line-height: 1.35;
  text-wrap: pretty;
}

.auth__quote footer {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.auth__author {
  display: flex;
  flex-direction: column;
}

.auth__author-name {
  font-size: var(--text-sm);
  font-weight: 500;
}

.auth__avatar {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: var(--text-sm);
  font-weight: 600;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .auth__form-side {
    padding-inline: var(--space-10);
  }
}

@media (min-width: 1024px) {
  .auth {
    flex-direction: row;
  }

  .auth__form-side {
    padding-block: var(--space-12);
  }

  .auth__aside {
    display: flex;
    width: 42%;
    max-width: 36rem;
    flex-shrink: 0;
  }
}

/* --- 28. Narzędzia ------------------------------------------------------ */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.hidden {
  display: none !important;
}

/* --- Lista modułów (strona Funkcje) ------------------------------------- */

.module-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-bottom: var(--space-10);
  border-bottom: 1px solid var(--border);
}

.module-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.module-row__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.module-row__body {
  flex: 1 1 auto;
}

@media (min-width: 1024px) {
  .module-row {
    flex-direction: row;
    gap: var(--space-16);
  }

  .module-row__head {
    width: 20rem;
    flex-shrink: 0;
  }
}

/* Lista punktów z zieloną fajką — używana na Funkcjach i w cenniku. */
.check-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-sm);
  line-height: 1.55;
}

.check-list svg {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--primary);
  flex-shrink: 0;
}

.divider-line {
  height: 1px;
  background: var(--border);
  border: 0;
}

.link {
  color: var(--primary);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.link--muted {
  color: var(--muted-foreground);
  text-decoration: none;
}

.link--muted:hover {
  color: var(--foreground);
}

.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius);
  background: var(--foreground);
  color: var(--background);
  font-size: var(--text-sm);
  font-weight: 500;
  transform: translateY(-200%);
  transition: transform var(--transition);
}

.skip-link:focus {
  transform: translateY(0);
}

.icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.icon--sm {
  width: 16px;
  height: 16px;
}

/* --- Pomocnicze: typografia i układ ------------------------------------- */

.h3 {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.02em;
}

.h4 {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.h5 {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 600;
}

.row-between {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}

/* Wielka litera na początku etykiet typu „jutro", „czwartek". */
.first-upper::first-letter {
  text-transform: uppercase;
}

.mono {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}

.link-like {
  color: var(--primary);
  font-weight: 500;
}

.price-lg {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.icon--xs {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.icon--primary {
  color: var(--primary);
}

.btn--tight {
  margin-left: calc(var(--space-2) * -1);
  align-self: flex-start;
}

.btn-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

@media (min-width: 640px) {
  .btn-row {
    flex-direction: row;
  }

  .btn-row .btn {
    flex: 1 1 0;
  }
}

/* --- Kreator rezerwacji: oprawa ----------------------------------------- */

.booking {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  background: var(--surface);
}

.booking__container {
  width: 100%;
  max-width: 48rem;
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.booking__header {
  border-bottom: 1px solid var(--border);
  background: var(--background);
}

.booking__header .booking__container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-block: var(--space-7);
}

.booking__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--muted-foreground);
}

.booking__progress {
  border-bottom: 1px solid var(--border);
  background: var(--background);
}

.booking__progress .booking__container {
  padding-block: var(--space-3);
}

.booking__main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: var(--space-6);
  padding-block: var(--space-8);
}

.booking__footer {
  border-top: 1px solid var(--border);
  background: var(--background);
}

.booking__footer .booking__container {
  padding-block: var(--space-6);
}

@media (min-width: 640px) {
  .booking__meta {
    flex-direction: row;
    gap: var(--space-6);
  }
}

/* Ocena firmy w nagłówku */
.rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px var(--space-3);
  border-radius: var(--radius-full);
  background: var(--accent);
  flex-shrink: 0;
}

.rating svg {
  width: 14px;
  height: 14px;
  color: var(--primary);
}

.rating__value {
  font-size: var(--text-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --- Kreator: krok wyboru usługi --------------------------------------- */

.service-option__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  text-align: left;
}

.service-option__side {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .service-option__side {
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
  }
}

/* --- Kreator: krok wyboru terminu -------------------------------------- */

.day-pill__hint {
  font-size: 10px;
  opacity: 0.7;
}

.empty-note {
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius);
  background: var(--muted);
  font-size: var(--text-sm);
  color: var(--muted-foreground);
  text-align: center;
}

.note-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  line-height: 1.55;
}

.note-row svg {
  margin-top: 2px;
}

/* --- Kreator: zgoda i potwierdzenie ------------------------------------ */

.consent-box {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--background);
  cursor: pointer;
}

.consent-box input[type='checkbox'] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--primary);
  flex-shrink: 0;
}

.done-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-10) var(--space-6);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--background);
  text-align: center;
}

.done-card__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--accent);
  color: var(--primary);
}

.done-card__icon svg {
  width: 28px;
  height: 28px;
}

.done-card .summary {
  width: 100%;
  max-width: 24rem;
  margin-top: var(--space-2);
  text-align: left;
}

/* Ostatni wiersz podsumowania — oddzielony linią (numer rezerwacji). */
.summary__row--total {
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

/* --- Pulpit: układ dwukolumnowy ------------------------------------------ */

/* Plan dnia dostaje więcej miejsca niż kolumna pomocnicza. */
.panel-split {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 1024px) {
  .panel-split {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* --- Pulpit: lista wizyt ------------------------------------------------- */

.plan-list {
  display: flex;
  flex-direction: column;
  list-style: none;
}

.plan-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-3) 0;
}

.plan-row + .plan-row {
  border-top: 1px solid var(--border);
}

.plan-row__time {
  display: flex;
  flex-direction: column;
  width: 3.5rem;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.plan-row__start {
  font-size: var(--text-sm);
  font-weight: 600;
}

.plan-row__end {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}

.plan-row__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.plan-row__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.plan-row__client {
  font-weight: 500;
}

.plan-row__price {
  flex-shrink: 0;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* --- Pulpit: prośby o potwierdzenie ------------------------------------- */

.pending-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--muted);
  transition: opacity 160ms ease;
}

/* Po decyzji wiersz zostaje, ale wygasza się — makieta nie usuwa danych. */
.pending-card.is-resolved {
  opacity: 0.45;
  pointer-events: none;
}

/* Akcje w kartach są krótkie ("Potwierdź"/"Odrzuć") — trzymamy je w rzędzie
   nawet na wąskich ekranach, inaczej karta niepotrzebnie rośnie. */
.btn-row--tight {
  flex-direction: row;
  gap: var(--space-2);
}

.btn-row--tight .btn {
  flex: 1 1 0;
}

.occupancy-value {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* --- Pulpit: pasek 7 dni ------------------------------------------------- */

.week-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
}

@media (min-width: 640px) {
  .week-strip {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .week-strip {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
}

.week-cell {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.week-cell__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1);
}

.week-cell__dow {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.week-cell__date {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
  font-variant-numeric: tabular-nums;
}

.week-cell__count {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.week-cell__unit {
  margin-left: var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--muted-foreground);
}

/* --- Drobne pomocniki --------------------------------------------------- */

.link-sm {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--primary);
}

.link-sm:hover {
  text-decoration: underline;
}

.nowrap {
  white-space: nowrap;
}

/* --- Powłoka panelu: karta firmy, stopka sidebara, użytkownik ------------- */

.panel-org {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: color-mix(in oklab, var(--primary) 8%, transparent);
}

.panel-org__name {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--text-sm);
}

.panel-org__meta {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}

/* Wypycha link publiczny i użytkownika na sam dół kolumny. */
.panel-side-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.panel-public-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--muted-foreground);
  overflow-wrap: anywhere;
}

.panel-public-link:hover {
  background: var(--muted);
  color: var(--foreground);
}

.panel-user {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
}

.panel-user__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.panel-user__name {
  font-size: var(--text-sm);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.panel-user__role {
  font-size: var(--text-xs);
  color: var(--muted-foreground);
}

.panel-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* --- Pasek postępu (obłożenie) ------------------------------------------- */

.progress {
  height: 8px;
  border-radius: 999px;
  background: var(--muted);
  overflow: hidden;
}

.progress--thin {
  height: 5px;
}

.progress__bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--primary);
}

.logo--sm .logo__text {
  font-size: var(--text-base);
}

@media print {
  .site-header,
  .site-footer,
  .panel__sidebar,
  .panel__topbar,
  .toasts {
    display: none !important;
  }
}


/* ==========================================================================
   Własna lista rozwijana — nakładka budowana przez site.js

   Rozwinięcia natywnego <select> nie da się ostylować; rysuje je system
   i wygląda inaczej na każdej platformie. Oryginalne pole zostaje ukryte
   w dokumencie, więc formularz działa tak samo, a bez skryptu wraca
   zachowanie systemowe.
   ========================================================================== */

.sel { position: relative; display: block; }

.sel > select { position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: -1; }

.sel__btn {
  display: flex;
  align-items: center;
  gap: .625rem;
  width: 100%;
  padding: .625rem .75rem;
  border: 1px solid var(--input);
  border-radius: var(--radius-sm);
  background: var(--background);
  font: inherit;
  font-size: var(--text-base);
  color: var(--foreground);
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.sel__btn:hover:not(:disabled) { border-color: var(--primary); }
.sel.is-open .sel__btn {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}
.sel.is-err .sel__btn { border-color: var(--warning); }

.sel__txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel__txt.is-empty { color: var(--muted-foreground); }

.sel__arr { flex: none; color: var(--muted-foreground); transition: transform .18s; }
.sel.is-open .sel__arr { transform: rotate(180deg); color: var(--primary); }

.sel__menu {
  display: none;
  position: absolute;
  left: 0; right: 0;
  top: calc(100% + .25rem);
  z-index: 60;
  max-height: 17rem;
  overflow-y: auto;
  padding: .25rem;
  border: 1px solid var(--primary);
  border-radius: var(--radius);
  background: var(--background);
  box-shadow: 0 12px 32px rgb(17 24 39 / 14%);
}
.sel.is-open .sel__menu { display: block; }
.sel.is-up .sel__menu { top: auto; bottom: calc(100% + .25rem); }

.sel__grp {
  padding: .5rem .625rem .25rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

.sel__opt {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem .625rem;
  border-radius: var(--radius-sm);
  font-size: var(--text-base);
  cursor: pointer;
}
.sel__opt:hover { background: var(--primary-soft); }
.sel__opt.is-off { opacity: .45; cursor: not-allowed; }

.sel__mark {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  border: 1.5px solid var(--input);
  border-radius: var(--radius-full);
  display: grid;
  place-content: center;
}
.sel__opt.is-sel .sel__mark { border-color: var(--primary); background: var(--primary); }
.sel__opt.is-sel .sel__mark::after {
  content: '';
  width: .375rem;
  height: .375rem;
  border-radius: var(--radius-full);
  background: var(--primary-foreground);
}
.sel__opt.is-sel { font-weight: 500; }

/* Znacznik potwierdzenia po rejestracji */
.auth__check {
  display: inline-grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto;
  border-radius: var(--radius-full);
  background: var(--primary-soft);
  color: var(--primary);
}
.auth__check svg { width: 1.75rem; height: 1.75rem; }

.visually-hidden { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.center { text-align: center; }
.narrow { max-width: 46rem; }

/* ==========================================================================
   Uzupełnienia: kontakt, ekrany bez nawigacji, treść redakcyjna
   ========================================================================== */

.auth--single { grid-template-columns: 1fr; place-items: center; min-height: 100vh; }
.auth--single .auth__form-inner { max-width: 30rem; width: 100%; padding: 2rem 1.5rem; }

.alert {
  padding: .875rem 1rem;
  border: 1px solid var(--border);
  border-left: 3px solid var(--muted-foreground);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--text-sm);
  line-height: 1.6;
}
.alert--warning { border-left-color: var(--warning); background: var(--warning-soft); }
.alert--ok { border-left-color: var(--primary); background: var(--primary-soft); }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 22rem;
  gap: 2.25rem;
  align-items: start;
  margin-top: 1.75rem;
}
.contact-form { padding: 1.5rem; }

.contact-row { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: 1.125rem; }
.contact-row > span:first-child { color: var(--primary); flex: none; }
.contact-row span {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted-foreground);
  margin-bottom: .125rem;
}
.contact-row a, .contact-row div { font-size: var(--text-base); }

/* Treść redakcyjna podstron */
.prose { font-size: var(--text-base); line-height: 1.75; }
.prose h2 { margin: 2rem 0 .75rem; font-size: var(--text-xl); }
.prose h3 { margin: 1.625rem 0 .625rem; font-size: var(--text-lg); }
.prose p { margin: 0 0 .9375rem; }
.prose ul, .prose ol { margin: 0 0 .9375rem; padding-left: 1.375rem; }
.prose li { margin-bottom: .4375rem; }
.prose a { color: var(--primary); }
.prose blockquote {
  margin: 1.125rem 0;
  padding: .75rem 1.125rem;
  border-left: 3px solid var(--primary);
  background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.prose table { width: 100%; border-collapse: collapse; margin: 1.125rem 0; font-size: var(--text-sm); }
.prose th, .prose td { padding: .5625rem .75rem; border: 1px solid var(--border); text-align: left; }
.prose th { background: var(--surface); font-weight: 600; }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius); }

@media (max-width: 48rem) {
  .contact-grid { grid-template-columns: 1fr; gap: 1.625rem; }
}

/* ==========================================================================
   Elementy własne: siatka cech, stopka, drobiazgi pomocnicze
   ========================================================================== */

.h2 { font-family: var(--font-heading); font-size: var(--text-2xl); line-height: 1.2; margin: 0; }

.section__head { max-width: 42rem; margin: 0 0 2rem; }
.section__head h2 { margin: 0; text-wrap: balance; }

/* Siatka cech — kafle z ikoną, tytułem i opisem */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(13.5rem, 100%), 1fr));
  gap: 1rem;
}
.feature-card {
  padding: 1.375rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--background);
}

/* Tytuł kafla mniejszy niż nagłówek karty: przy czterech kolumnach
   „Szyfrowanie po stronie placówki" w rozmiarze 18px łamie się na dwa
   wiersze w przypadkowym miejscu. `balance` rozkłada je równo. */
.feature-card h3 {
  margin: .75rem 0 .375rem;
  font-size: var(--text-base);
  line-height: 1.35;
  text-wrap: balance;
}
.feature-card p {
  margin: 0;
  font-size: var(--text-sm);
  line-height: 1.6;
  text-wrap: pretty;
}
.feature-card__icon { width: 2.25rem; height: 2.25rem; }
.feature-card__icon svg { width: 1.125rem; height: 1.125rem; }
.feature-card__icon {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius);
  background: var(--primary-soft);
  color: var(--primary);
}

.faq__answer { padding: 0 0 1rem; font-size: var(--text-sm); line-height: 1.65; color: var(--muted-foreground); }

/* Stopka */
/* Liczba kolumn wynika z tego, ile grup faktycznie ma treść — klasę
   dokłada PHP. Wcześniej stało tu `repeat(auto-fit, …)` obok ścieżki `1.6fr`,
   czego specyfikacja nie dopuszcza: auto-fit nie łączy się z rozmiarem
   elastycznym. Przeglądarka odrzucała całą regułę i stopka spadała
   do jednej kolumny. */
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 2.25rem;
  padding: 2.75rem 0 2rem;
}
.site-footer__grid--3 { grid-template-columns: 1.6fr 1fr 1fr; }
.site-footer__grid--4 { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
.site-footer__brand { display: flex; flex-direction: column; gap: .875rem; align-items: flex-start; }
.site-footer__brand p { margin: 0; max-width: 26rem; }

.site-footer__title {
  margin: 0 0 .75rem;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}
.site-footer__list { list-style: none; margin: 0; padding: 0; }
.site-footer__list li { margin-bottom: .5rem; }
.site-footer__list a { font-size: var(--text-sm); color: var(--foreground); text-decoration: none; }
.site-footer__list a:hover { color: var(--primary); }

.site-footer__bottom {
  padding: 1.125rem 0;
  border-top: 1px solid var(--border);
}

/* Wiersz zgody: pole u góry, bo tekst RODO bywa wielowierszowy */
.consent {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .8125rem .9375rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--text-sm);
  line-height: 1.55;
  cursor: pointer;
}
.consent input { margin-top: .125rem; flex: none; }
.consent a { color: var(--primary); }

.contact-info h3 { margin: 0 0 1rem; font-size: var(--text-lg); }

.bg-background { background: var(--background); }
.small { font-size: var(--text-sm); }
.mt { margin-top: 1rem; }
.mb { margin-bottom: 1rem; }

/* Znak firmowy na ekranach bez nawigacji */
.auth__brand { margin-bottom: 1.5rem; text-align: center; }
.auth__brand h1 { margin: 0; font-size: var(--text-xl); }
.auth__logo { display: inline-flex; }

@media (max-width: 60rem) {
  .site-footer__grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
}
@media (max-width: 36rem) {
  .site-footer__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Korekty układu po pierwszym podglądzie
   ========================================================================== */

/* Nawigacja dosunięta do przycisków zamiast wyśrodkowana. Przy jednej
   pozycji „Kontakt" wisiał samotnie na środku i wyglądał przypadkowo;
   przy prawej krawędzi tworzy grupę z logowaniem i rejestracją. */
@media (min-width: 60rem) {
  .site-nav { margin-left: auto; }
  .site-header__actions { margin-left: var(--space-6); }
}

/* Tytuł powitalny: łamanie w równe wiersze zamiast wiszącego ogona. */
h1.hero-title { text-wrap: balance; }

/* Zajawka nie powinna być szersza niż wygodny wiersz czytania. */
.hero__copy .lead { max-width: 34em; }

/* Sekcja tekstowa: odstęp między nagłówkiem a treścią, żeby nie zlewały się
   w jeden blok — na podglądzie tytuł przylegał do pierwszego wiersza. */
.narrow h2 { margin: 0 0 .75rem; }
.narrow .lead { margin: 0; }

/* Pasek wezwania: więcej powietrza wokół przycisku. */
.cta-band h2 { text-wrap: balance; }
.cta-band p { margin-bottom: 1.5rem; }

/* ==========================================================================
   Baner informacyjny — pasek nad nagłówkiem
   ========================================================================== */

.banner { border-bottom: 1px solid var(--border); font-size: var(--text-sm); }
.banner__inner {
  display: flex;
  align-items: center;
  gap: .625rem;
  min-height: 2.75rem;
  padding-block: .5rem;
}
.banner__icon { flex: none; display: inline-grid; place-items: center; }
.banner__icon svg { width: 1.0625rem; height: 1.0625rem; }
.banner__text { flex: 1; min-width: 0; line-height: 1.45; }

.banner__link {
  flex: none;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
  color: inherit;
}

.banner--info    { background: var(--surface); color: var(--foreground); }
.banner--info .banner__icon { color: var(--muted-foreground); }

.banner--success { background: var(--primary); color: var(--primary-foreground); border-bottom-color: transparent; }
.banner--warning { background: var(--warning-soft); color: var(--foreground); }
.banner--warning .banner__icon { color: var(--warning); }

/* ==========================================================================
   Grafika dekoracyjna sekcji powitalnej

   Rysowana jako SVG w tle zamiast obrazu: nie doładowuje pliku, skaluje się
   bez utraty ostrości i bierze kolor z motywu, więc zmiana palety nie
   wymaga przerysowywania grafiki.
   ========================================================================== */

.hero { position: relative; overflow: hidden; }
.hero > .container { position: relative; z-index: 1; }

.hero__deco { position: absolute; inset: 0; pointer-events: none; }

.hero__dots {
  position: absolute;
  inset: 0;
  color: var(--border);
  opacity: .55;
  /* Kropki gasną ku dołowi, żeby nie konkurowały z treścią. */
  mask-image: radial-gradient(ellipse 70% 60% at 70% 20%, #000 20%, transparent 75%);
}

.hero__glow {
  position: absolute;
  top: -18rem;
  right: -12rem;
  width: 42rem;
  height: 42rem;
  border-radius: var(--radius-full);
  background: radial-gradient(circle, var(--primary-soft) 0%, transparent 65%);
}

/* ==========================================================================
   Pasek liczb
   ========================================================================== */

.strip { border-block: 1px solid var(--border); background: var(--background); }
.strip__inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  padding-block: 1.75rem;
}
.strip__item { display: flex; flex-direction: column; gap: .25rem; }
.strip__num {
  font-size: var(--text-2xl);
  font-weight: 600;
  line-height: 1;
  color: var(--primary);
}
.strip__lbl { font-size: var(--text-sm); color: var(--muted-foreground); line-height: 1.4; }

/* ==========================================================================
   Kafle cech: dwie kolumny zamiast czterech
   ========================================================================== */

.feature-grid { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }

.feature-card { position: relative; padding: 1.75rem; }

.feature-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.feature-card__icon { width: 2.75rem; height: 2.75rem; }
.feature-card__icon svg { width: 1.375rem; height: 1.375rem; }

/* Numer duży, ale wyblakły: ma porządkować kolejność, nie przyciągać
   wzroku mocniej niż tytuł. */
.feature-card__num {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1;
  color: var(--border);
  letter-spacing: -.02em;
}

.feature-card h3 { margin: 1.125rem 0 .5rem; font-size: var(--text-lg); }
.feature-card p { font-size: var(--text-base); line-height: 1.65; }

@media (max-width: 60rem) {
  .strip__inner { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
}
@media (max-width: 48rem) {
  .feature-grid { grid-template-columns: 1fr; }
  .hero__glow { display: none; }
}
@media (max-width: 36rem) {
  .banner__inner { flex-wrap: wrap; }
  .banner__text { flex: 1 1 100%; order: 2; }
  .banner__link { order: 3; }
}

/* Przycisk z samą ikoną — bez ramki wyglądał jak zgubiony znak obok
   przycisków z tekstem. Kwadratowy, żeby ikona stała pośrodku. */
.btn--icon {
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border-radius: var(--radius-full);
}
.btn--icon svg { width: 1.0625rem; height: 1.0625rem; }

/* ==========================================================================
   Slajder banerów
   ========================================================================== */

.slider {
  position: relative;
  height: var(--slider-h, 420px);
  overflow: hidden;
  background: var(--surface);
}

.slider__track { position: relative; height: 100%; }

.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s ease;
}
.slide.is-on { opacity: 1; visibility: visible; }

.slide__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Warstwa treści nad obrazem. Przyciemnienie od dołu, żeby tekst dało się
   przeczytać także na jasnym zdjęciu — bez niego redaktor musiałby dobierać
   obrazy pod kolor czcionki. */
.slide__box {
  position: absolute;
  inset: 0;
  display: grid;
  align-items: center;
  background: linear-gradient(90deg, rgb(15 23 42 / 72%) 0%, rgb(15 23 42 / 38%) 55%, transparent 100%);
}
.slide--center .slide__box {
  background: linear-gradient(180deg, rgb(15 23 42 / 30%) 0%, rgb(15 23 42 / 62%) 100%);
  text-align: center;
}
.slide--right .slide__box {
  background: linear-gradient(270deg, rgb(15 23 42 / 72%) 0%, rgb(15 23 42 / 38%) 55%, transparent 100%);
}

.slide__inner { max-width: 40rem; color: #fff; }
.slide--center .slide__inner { max-width: 46rem; margin-inline: auto; }
.slide--right .slide__inner { margin-left: auto; }

.slide__title {
  margin: 0 0 .75rem;
  font-family: var(--font-heading);
  line-height: 1.12;
  text-wrap: balance;
  color: #fff;
}
.slide__body { margin: 0 0 1.25rem; line-height: 1.6; color: rgb(255 255 255 / 88%); }
.slide__body p:last-child { margin-bottom: 0; }
.slide__body a { color: #fff; text-decoration: underline; }
.slide__body strong { color: #fff; }

/* Pigułka nad tytułem.

   Trzeba jej powtórzyć to, co .hero.section--bg robi swojej: na zdjęciu
   pigułka jest półprzezroczystą bielą, nie jasnym --surface. Slajd zawsze
   stoi na zdjęciu, więc warunku nie ma — dostaje to od razu.

   Odstęp własny, bo .slide__inner nie jest kolumną z odstępami,
   tylko zwykłym blokiem. */
.slide__pill {
  margin-bottom: .875rem;
  background: rgb(255 255 255 / 14%);
  border-color: rgb(255 255 255 / 25%);
  color: #fff;
}

/* Szerokość i wyrównanie treści.

   Ten sam element nosi klasy container i slide__inner, a obie ustawiają
   max-width: 72rem z .container i 40rem z .slide__inner. Wygrywa węższa,
   ale margin-inline: auto z .container zostaje w mocy — i CENTRUJE
   zawężony blok na środku ekranu. Treść slajdu nie stała więc przy tej
   samej krawędzi co sekcja poniżej, tylko dryfowała do środka.

   Sekcja powitalna rozwiązuje to inaczej i tak też robimy tutaj:
   kontener zostaje szeroki, a miarę tekstu dostają dopiero dzieci.
   44rem to ta sama wartość co .hero__grid--wide .hero__copy, więc
   tytuł łamie się w tych samych miejscach.

   Slajdów wyśrodkowanych to nie dotyczy: .slide--center .slide__inner
   ma wyższą swoistość i zostaje przy swoim zawężeniu, bo tam centrowanie
   jest zamierzone. */
.slide--left .slide__inner,
.slide--right .slide__inner { max-width: var(--page-max); }

.slide--left .slide__inner > *,
.slide--right .slide__inner > * { max-width: 44rem; }

.slide--right .slide__inner > * { margin-left: auto; }

/* Treść slajdu bywa złożona jak sekcja powitalna: przyciski i lista
   z ptaszkami wpisane w treść. Dwie rzeczy trzeba wtedy odkręcić.

   Podkreślenie: reguła .slide__body a ma sens dla odsyłacza w zdaniu,
   ale trafia też w przycisk — a podkreślony przycisk wygląda jak pomyłka.

   Kolor listy: .hero__proof ustawia --muted-foreground, czyli #656d7b.
   Na jasnym tle sekcji to jest w porządku, na ciemnym zdjęciu znika.
   Bez tej reguły jedynym wyjściem było pogrubienie każdej pozycji,
   żeby złapać biel z .slide__body strong — czyli obejście widoczne
   w wyniku. */
.slide__body .btn { text-decoration: none; }
.slide__body .hero__proof { color: rgb(255 255 255 / 82%); }

/* Znak firmowy z wgranego obrazu. Wysokość ustawia panel w atrybucie style,
   szerokość dobiera się sama — inaczej logo o innej proporcji niż zakładana
   byłoby rozciągnięte. Górna granica szerokości chroni pasek przed bardzo
   szerokim znakiem na wąskim ekranie. */
.logo__img {
  display: block;
  width: auto;

  /* Granica szerokości chroni pasek na wąskim ekranie, ale nie może być
     ciaśniejsza niż to, co da się ustawić suwakiem. Szeroki znak przy 96 px
     wysokości ma około 380 px szerokości — przy dawnych 260 px uderzałby
     w tę granicę i kurczył się poniżej wielkości z suwaka, więc podgląd
     w panelu pokazywałby co innego niż strona.

     Człon vw zostaje: na telefonie znak nadal nie zajmie więcej niż
     sześćdziesiąt procent szerokości ekranu. */
  max-width: min(420px, 60vw);

  object-fit: contain;
}

.slide__btns { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Cokolwiek stoi POD przyciskami, odsuwamy od nich domyślnie.

   Pozostałe części niosą własny odstęp dolny — tytuł .75rem, treść 1.25rem —
   a przyciski nie niosą żadnego. Dopóki były ostatnie, nie miało to znaczenia.
   Odkąd kolejność ustawia się w panelu, lista albo druga treść potrafi wylądować
   zaraz pod nimi i przykleić się do przycisków.

   Selektor sąsiedztwa, a nie margines dolny na .slide__btns: margines dolny
   zostawiałby puste miejsce także wtedy, gdy przyciski SĄ ostatnie.

   Pole „odstęp” w panelu wpisuje margin-top prosto w atrybut style, więc
   wygrywa z tą regułą. To jest wartość domyślna, nie ograniczenie. */
.slide__btns + * { margin-top: 1.75rem; }
.slide__btns .btn--outline {
  border-color: rgb(255 255 255 / 55%);
  color: #fff;
  background: transparent;
}
.slide__btns .btn--outline:hover { background: rgb(255 255 255 / 12%); border-color: #fff; }

/* ---- Sterowanie ---- */

.slider__arr {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 35%);
  border-radius: var(--radius-full);
  background: rgb(15 23 42 / 35%);
  color: #fff;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.slider__arr:hover { background: rgb(15 23 42 / 62%); border-color: #fff; }
.slider__arr svg { width: 1.25rem; height: 1.25rem; }
.slider__arr--prev { left: 1rem; }
.slider__arr--next { right: 1rem; }

.slider__dots {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: .5rem;
}
.slider__dot {
  width: .5rem;
  height: .5rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: rgb(255 255 255 / 45%);
  cursor: pointer;
  transition: width .2s, background .2s;
}
.slider__dot.is-on { width: 1.5rem; background: #fff; }

@media (max-width: 48rem) {
  .slider { height: min(var(--slider-h, 420px), 20rem); }
  .slider__arr { display: none; }
  .slide__inner { max-width: none; }

  /* Na telefonie miara tekstu tylko przeszkadza — kolumna jest węższa
     niż jakiekolwiek 44rem. Reguła musi wymienić swoistość z tą wyżej,
     inaczej .slide--left .slide__inner > * przechodziłoby tu nietknięte:
     zapytanie o szerokość samo w sobie nic nie waży w kaskadzie. */
  .slide--left .slide__inner,
  .slide--right .slide__inner { max-width: none; }

  .slide--left .slide__inner > *,
  .slide--right .slide__inner > * { max-width: none; }
  .slide__box { background: linear-gradient(180deg, rgb(15 23 42 / 35%) 0%, rgb(15 23 42 / 72%) 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .slide { transition: none; }
}

/* ==========================================================================
   Sekcje z obrazem
   ========================================================================== */

/* ---- Obraz w tle ---- */

.section--bg {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
}

/* Przyciemnienie pod treścią. Bez niego redaktor musiałby dobierać zdjęcia
   pod kolor czcionki — a zdjęcie wybiera się dla treści, nie odwrotnie. */
.section--bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(15 23 42 / 62%) 0%, rgb(15 23 42 / 78%) 100%);
}
.section--bg > .container { position: relative; z-index: 1; }

.section--bg h2,
.section--bg h3,
.section--bg strong { color: #fff; }
.section--bg p,
.section--bg .lead,
.section--bg .muted { color: rgb(255 255 255 / 85%); }
.section--bg a:not(.btn) { color: #fff; text-decoration: underline; }

/* Kafle na tle zdjęcia: półprzezroczyste, żeby zdjęcie było widać,
   ale tekst pozostał czytelny. */
.section--bg .feature-card {
  background: rgb(255 255 255 / 8%);
  border-color: rgb(255 255 255 / 18%);
  backdrop-filter: blur(6px);
}
.section--bg .feature-card__icon { background: rgb(255 255 255 / 14%); color: #fff; }
.section--bg .feature-card__num { color: rgb(255 255 255 / 28%); }

.section--bg .faq__item { border-bottom-color: rgb(255 255 255 / 18%); }
.section--bg .faq__item summary { color: #fff; }
.section--bg .faq__answer { color: rgb(255 255 255 / 82%); }

/* ---- Obraz obok treści ---- */

.section__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.section--right .section__split { grid-template-columns: 1fr 1fr; }

.section__img {
  width: 100%;
  height: auto;
  max-height: 30rem;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
}

.section__split h2 { margin: 0 0 .875rem; }
.section__split .lead { margin: 0; }

@media (max-width: 60rem) {
  .section__split { grid-template-columns: 1fr; gap: 1.75rem; }

  /* Na wąskim ekranie obraz zawsze nad treścią — niezależnie od tego,
     po której stronie stał na szerokim. Kolejność w kodzie ma go tam
     postawić, więc dla wariantu „po prawej" trzeba ją odwrócić. */
  .section--right .section__split { display: flex; flex-direction: column-reverse; }
  .section__img { max-height: 16rem; }
}

/* ==========================================================================
   Sekcja powitalna ze zdjęciem
   ========================================================================== */

/* Zdjęcie w tle: przyciemnienie jak w pozostałych sekcjach, ale mocniejsze
   od lewej, bo tam stoi tytuł i musi być czytelny nad każdym zdjęciem. */
.hero.section--bg {
  background-size: cover;
  background-position: center;
  color: #fff;
}
.hero.section--bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(15 23 42 / 82%) 0%, rgb(15 23 42 / 58%) 55%, rgb(15 23 42 / 35%) 100%);
}

.hero.section--bg h1,
.hero.section--bg .hero-title { color: #fff; }
.hero.section--bg .lead { color: rgb(255 255 255 / 88%); }
.hero.section--bg .hero__proof { color: rgb(255 255 255 / 82%); }
.hero.section--bg .hero__proof svg { color: #fff; }

.hero.section--bg .pill {
  background: rgb(255 255 255 / 14%);
  border-color: rgb(255 255 255 / 25%);
  color: #fff;
}
.hero.section--bg .btn--outline {
  border-color: rgb(255 255 255 / 55%);
  color: #fff;
  background: transparent;
}
.hero.section--bg .btn--outline:hover {
  background: rgb(255 255 255 / 12%);
  border-color: #fff;
}

/* Przy tle treść nie dzieli się na dwie kolumny — stoi na zdjęciu
   i ma tyle miejsca, ile potrzebuje. */
.hero__grid--wide { grid-template-columns: 1fr; }
.hero__grid--wide .hero__copy { max-width: 44rem; }

/* ---- Zdjęcie obok treści ---- */

.hero__img {
  width: 100%;
  height: auto;
  max-height: 30rem;
  object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
  box-shadow: 0 18px 40px rgb(17 24 39 / 12%);
}

/* Wariant „obraz po lewej": kolumny zamienione miejscami bez ruszania
   kolejności w kodzie, żeby na wąskim ekranie tekst nadal szedł pierwszy. */
.hero__grid--rev > *:first-child { order: 2; }
.hero__grid--rev > *:last-child { order: 1; }

@media (max-width: 60rem) {
  .hero__grid--rev > *:first-child,
  .hero__grid--rev > *:last-child { order: 0; }
  .hero__img { max-height: 18rem; }
}


/* ==========================================================================
   Podpowiedzi

   Natywny `title` rysuje system operacyjny: pojawia się po sekundzie,
   wygląda inaczej na każdej platformie i nie da się go ostylować.
   Własna wersja pokazuje się od razu i trzyma barwy panelu.

   Użycie: data-tip="treść" oraz opcjonalnie data-tip-pos="bottom|left|right".
   ========================================================================== */

[data-tip] { position: relative; }

/* Pusta treść nie pokazuje dymka. Atrybut bywa czyszczony przez skrypt —
   na przykład podpowiedź przycisku zapisu znika, gdy nie ma już przeszkód —
   a pusty dymek wyglądałby jak usterka. */
[data-tip=""]::after,
[data-tip=""]::before { display: none; }

[data-tip]::after,
[data-tip]::before {
    position: absolute;
    z-index: 1200;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
}

[data-tip]::after {
    content: attr(data-tip);
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translate(-50%, 4px);
    max-width: 15rem;
    width: max-content;
    padding: 6px 10px;
    border-radius: 8px;
    background: #111827;
    color: #fff;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.4;
    white-space: normal;
    text-align: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}

/* Strzałka z obróconego kwadratu — jeden element mniej niż osobny znacznik. */
[data-tip]::before {
    content: '';
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translate(-50%, 4px) rotate(45deg);
    width: 8px;
    height: 8px;
    background: #111827;
}

[data-tip]:hover::after,
[data-tip]:hover::before,
[data-tip]:focus-visible::after,
[data-tip]:focus-visible::before {
    opacity: 1;
    visibility: visible;
}
[data-tip]:hover::after,
[data-tip]:focus-visible::after { transform: translate(-50%, 0); }
[data-tip]:hover::before,
[data-tip]:focus-visible::before { transform: translate(-50%, 0) rotate(45deg); }

/* Pod spodem — gdy element stoi przy górnej krawędzi. */
[data-tip-pos="bottom"]::after {
    bottom: auto;
    top: calc(100% + 8px);
    transform: translate(-50%, -4px);
}
[data-tip-pos="bottom"]::before {
    bottom: auto;
    top: calc(100% + 3px);
    transform: translate(-50%, -4px) rotate(45deg);
}
[data-tip-pos="bottom"]:hover::after,
[data-tip-pos="bottom"]:focus-visible::after { transform: translate(-50%, 0); }
[data-tip-pos="bottom"]:hover::before,
[data-tip-pos="bottom"]:focus-visible::before { transform: translate(-50%, 0) rotate(45deg); }

/* Z boku — przy elementach w wąskich paskach, gdzie nad i pod brakuje miejsca. */
[data-tip-pos="left"]::after {
    bottom: auto;
    top: 50%;
    left: auto;
    right: calc(100% + 8px);
    transform: translate(4px, -50%);
}
[data-tip-pos="left"]::before {
    bottom: auto;
    top: 50%;
    left: auto;
    right: calc(100% + 4px);
    transform: translate(4px, -50%) rotate(45deg);
}
[data-tip-pos="left"]:hover::after,
[data-tip-pos="left"]:focus-visible::after { transform: translate(0, -50%); }
[data-tip-pos="left"]:hover::before,
[data-tip-pos="left"]:focus-visible::before { transform: translate(0, -50%) rotate(45deg); }

[data-tip-pos="right"]::after {
    bottom: auto;
    top: 50%;
    left: calc(100% + 8px);
    transform: translate(-4px, -50%);
}
[data-tip-pos="right"]::before {
    bottom: auto;
    top: 50%;
    left: calc(100% + 4px);
    transform: translate(-4px, -50%) rotate(45deg);
}
[data-tip-pos="right"]:hover::after,
[data-tip-pos="right"]:focus-visible::after { transform: translate(0, -50%); }
[data-tip-pos="right"]:hover::before,
[data-tip-pos="right"]:focus-visible::before { transform: translate(0, -50%) rotate(45deg); }

/* Osoby z wyłączonymi animacjami dostają pojawienie się bez ruchu. */
@media (prefers-reduced-motion: reduce) {
    [data-tip]::after,
    [data-tip]::before { transition: opacity .01s; }
}



/* --- Sekcja oferty ------------------------------------------------------- */

/* Treść pochodzi z cennika, więc liczba kategorii i długość nazw są poza
   kontrolą arkusza. Stąd zakładki zawijają się zamiast przewijać w bok:
   poziome przewijanie na stronie z ofertą łatwo przeoczyć. */

.offer__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
}

.offer__tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 9px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--background);
  color: var(--foreground);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.offer__tab:hover { border-color: var(--primary); }

/* Zaznaczenie barwą kategorii, nie kolorem głównym strony: kategorie mają
   własne kolory ustawiane w cenniku i to one niosą tu rozróżnienie. */
.offer__tab.is-on {
  border-color: var(--kat, var(--primary));
  background: color-mix(in oklab, var(--kat, var(--primary)) 10%, transparent);
}

.offer__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--kat, var(--primary));
  flex-shrink: 0;
}

.offer__count {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--muted-foreground);
}

/* --- Kategorie jako kafle ze zdjęciem --- */

/* auto-fit z minmax zamiast stałej liczby kolumn: kategorii bywa dwie albo
   dziewięć i to cennik o tym decyduje, nie arkusz. Przy dwóch kafle nie
   rozciągają się na pół ekranu, przy dziewięciu nie robi się z tego
   dziesięciu wierszy po jednym. */
.offer__tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.offer__tile {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}

.offer__tile:hover { transform: translateY(-2px); }

.offer__tile.is-on {
  border-color: var(--kat, var(--primary));
  box-shadow: 0 0 0 2px var(--kat, var(--primary));
}

.offer__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s;
}

.offer__tile:hover .offer__photo { transform: scale(1.03); }

/* Napis leży na zdjęciu, więc musi mieć własne tło — fotografia bywa jasna
   u dołu i sam biały tekst potrafi na niej zniknąć. Przejście zamiast płaskiej
   płachty, żeby nie przykrywać zdjęcia bardziej, niż trzeba. */
.offer__tile-txt {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-8) var(--space-4) var(--space-3);
  background: linear-gradient(to top, rgb(0 0 0 / 72%), transparent);
  color: #fff;
}

.offer__tile-name {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.offer__tile .offer__count { color: rgb(255 255 255 / 78%); }

@media (prefers-reduced-motion: reduce) {
  .offer__tile,
  .offer__photo { transition: none; }
  .offer__tile:hover { transform: none; }
  .offer__tile:hover .offer__photo { transform: none; }
}

/* Chowaniem paneli zajmuje się skrypt, przez atrybut hidden. Reguła jest
   tu wypisana, bo część resetów CSS ustawia display na elementach blokowych
   i przykrywa domyślne działanie hidden — wtedy wszystkie kategorie
   pokazałyby się naraz mimo działającego przełącznika. */
.offer__panel[hidden] { display: none; }

.offer__cat-lead {
  margin: 0 0 var(--space-5);
  color: var(--muted-foreground);
}

.offer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}

/* Wiersz cennika, nie kafel: pozycji bywa kilkanaście i zestawienie jedna
   pod drugą czyta się szybciej niż siatka pudełek. */
.offer__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-6);
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--border);
}

.offer__main { min-width: 0; }

.offer__name {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 600;
}

.offer__desc {
  margin: var(--space-1) 0 0;
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

/* Czas i cena trzymają się razem po prawej i nie zawijają — to one są
   tym, czego się w cenniku szuka wzrokiem. */
.offer__meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  flex-shrink: 0;
  white-space: nowrap;
}

.offer__time {
  color: var(--muted-foreground);
  font-size: var(--text-sm);
}

.offer__price {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 40rem) {
  /* Na telefonie cena schodzi pod nazwę: przy dłuższej nazwie zabiegu
     dwie kolumny zostawiały na tekst czterdzieści pikseli. */
  .offer__item {
    flex-direction: column;
    gap: var(--space-2);
  }

  .offer__meta { gap: var(--space-3); }
}