/* ════════════════════════════════════════════════════════════
   Żywiec Lokalnie 2.0 — app.css
   Design system portalu. Mobile-first, WCAG 2.1 AA, dark mode.

   Spis treści:
     1. Tokeny (light / dark)
     2. Reset i baza
     3. Narzędzia (utilities)
     4. Fokus, selekcja, ruch
     5. Nagłówek i nawigacja desktop
     6. Nawigacja mobilna: dolny pasek + szuflada <dialog>
     7. Przyciski, chipy, badge
     8. Hero + wyszukiwarka
     9. Karty informatora (pogoda, apteka, kursy, skróty)
    10. Wydarzenia: karty, rail, siatka, filtry, paginacja
    11. Wykopki
    12. Kafle usług
    13. Feedback
    14. Bilety (KupBilecik)
    15. Stopka
    16. Stany puste i szkielety
    17. Animacje (view transitions, scroll-driven)
   ════════════════════════════════════════════════════════════ */

/* ── 1. TOKENY ─────────────────────────────────────────────── */

:root {
  /* kolory marki: błękit logo + „kropka nad Ż" */
  --brand:        #1a56db;
  --accent:       #ffcc00;

  /* powierzchnie */
  --bg:           #f2f4f9;   /* tło strony — chłodna mgła */
  --card:         #ffffff;
  --card-low:     #e8edf6;
  --border:       rgba(22, 29, 49, .12);
  --border-strong: rgba(22, 29, 49, .28);

  /* tekst — wszystkie pary ≥ 4.5:1 na swoich tłach */
  --ink:          #161d31;
  --ink-muted:    #454f68;
  --ink-soft:     #5d6780;

  /* interakcje */
  --primary:      #1a56db;   /* 6.2:1 na białym */
  --primary-strong: #1443b8; /* hover, 8.3:1 */
  --on-primary:   #ffffff;
  --ring:         var(--primary); /* pierścień fokusu — jedno źródło */
  --ring-offset:  2px;

  /* semantyka */
  --ok:           #0e7a3d;
  --ok-bg:        #e2f6ea;
  --warn-ink:     #6b4a00;
  --warn-bg:      #ffe9a3;
  --danger:       #b91c1c;
  --danger-bg:    #fdecec;

  /* geometria — siatka 8 px */
  --wrap:         1400px;
  --r-sm:         .5rem;
  --r-md:         1rem;
  --r-lg:         1.5rem;
  --r-full:       999px;
  --shadow-1:     0 1px 2px rgba(22, 29, 49, .05), 0 4px 16px rgba(22, 29, 49, .06);
  --shadow-2:     0 4px 12px rgba(22, 29, 49, .09), 0 16px 40px rgba(22, 29, 49, .10);

  --font:         'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --header-h:     64px;
  --tabbar-h:     60px;

  /* ruch — jeden rytm dla całego serwisu (mikro-interakcje 150–320 ms) */
  --dur-fast:     .15s;
  --dur-base:     .2s;
  --dur-slow:     .32s;
  --ease-out:     cubic-bezier(.22, .61, .36, 1);   /* wejście */
  --ease-in:      cubic-bezier(.55, .06, .68, .19);  /* wyjście */

  /* skala warstw (z-index) — jedno źródło kolejności nakładania */
  --z-fab:        80;
  --z-actionbar:  90;
  --z-header:     100;
  --z-modal:      100;
  --z-toast:      120;
  --z-skip:       200;

  color-scheme: light;
}

/* Tryb ciemny — wybrany przyciskiem… */
[data-theme="dark"] {
  --bg:           #0c111d;
  --card:         #151c2e;
  --card-low:     #1c2438;
  --border:       rgba(232, 236, 246, .14);
  --border-strong: rgba(232, 236, 246, .34);

  --ink:          #e8ecf6;
  --ink-muted:    #a9b3cc;
  --ink-soft:     #8b96b3;

  --primary:      #9cb8ff;   /* linki: 8.7:1 na kartach */
  --primary-strong: #bcceff;
  --on-primary:   #0a1020;

  --ok:           #6fdb9b;
  --ok-bg:        #10301e;
  --warn-ink:     #ffd67a;
  --warn-bg:      #3a2e08;
  --danger:       #ff9d9d;
  --danger-bg:    #3a1414;

  --shadow-1:     0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .35);
  --shadow-2:     0 4px 12px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .45);

  color-scheme: dark;
}

/* …albo z systemu, gdy użytkownik nie wybrał ręcznie */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:           #0c111d;
    --card:         #151c2e;
    --card-low:     #1c2438;
    --border:       rgba(232, 236, 246, .14);
    --border-strong: rgba(232, 236, 246, .34);

    --ink:          #e8ecf6;
    --ink-muted:    #a9b3cc;
    --ink-soft:     #8b96b3;

    --primary:      #9cb8ff;
    --primary-strong: #bcceff;
    --on-primary:   #0a1020;

    --ok:           #6fdb9b;
    --ok-bg:        #10301e;
    --warn-ink:     #ffd67a;
    --warn-bg:      #3a2e08;
    --danger:       #ff9d9d;
    --danger-bg:    #3a1414;

    --shadow-1:     0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .35);
    --shadow-2:     0 4px 12px rgba(0, 0, 0, .5), 0 16px 40px rgba(0, 0, 0, .45);

    color-scheme: dark;
  }
}

/* Wyższy kontrast na życzenie systemu (WCAG 1.4.11+) */
@media (prefers-contrast: more) {
  :root, [data-theme="dark"] {
    --border: var(--border-strong);
  }
}

/* ── 2. RESET I BAZA ───────────────────────────────────────── */

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

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  font-family: var(--font);
  font-size: 1rem;              /* 16 px — skaluje się z ustawieniami użytkownika */
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  min-width: 320px;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { line-height: 1.2; font-weight: 700; text-wrap: balance; }

p { text-wrap: pretty; }

a { color: var(--primary); }

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

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

main {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 1rem;
}

@media (min-width: 900px) {
  main { padding-inline: 1.5rem; }
}

/* miejsce na dolny pasek nawigacji (mobile) */
@media (max-width: 899.98px) {
  body { padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px)); }
}

/* ── 3. NARZĘDZIA ──────────────────────────────────────────── */

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

/* żółta „kropka nad Ż" — sygnatura marki w nagłówkach */
.dot {
  display: inline-block;
  width: .32em; height: .32em;
  margin-left: .14em;
  border-radius: 26%;
  background: var(--accent);
}

/* ── 4. FOKUS, SELEKCJA, RUCH ──────────────────────────────── */

:focus-visible {
  outline: 3px solid var(--ring);
  outline-offset: var(--ring-offset);
  border-radius: var(--r-sm);
}

::selection { background: var(--accent); color: #161d31; }

.skip-link {
  position: fixed;
  top: .75rem; left: .75rem;
  z-index: var(--z-skip);
  padding: .75rem 1.25rem;
  background: var(--card);
  color: var(--ink);
  border: 2px solid var(--primary);
  border-radius: var(--r-full);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus-visible { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── 5. NAGŁÓWEK ───────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: color-mix(in srgb, var(--card) 82%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}

@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: var(--card); }
}

.site-header__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  min-height: var(--header-h);
  padding: .5rem 1rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--ink);
}

.brand__logo { border-radius: 10px; }

.brand__name {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -.01em;
}

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

.top-nav { display: none; }

.site-header__actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* selektor z rodzicem — wygrywa specyficznością z .btn { display:inline-flex } */
.site-header__actions .site-header__cta { display: none; }

@media (min-width: 900px) {
  .site-header__inner { padding-inline: 1.5rem; }

  .top-nav { display: block; margin-left: .5rem; }

  .top-nav__list {
    display: flex;
    gap: .25rem;
  }

  .top-nav__link {
    position: relative;
    display: inline-block;
    padding: .55rem .85rem;
    border-radius: var(--r-full);
    font-size: .92rem;
    font-weight: 500;
    color: var(--ink-muted);
    text-decoration: none;
    transition: color .15s, background-color .15s;
  }

  .top-nav__link:hover {
    color: var(--ink);
    background: var(--card-low);
  }

  .top-nav__link[aria-current="page"] {
    color: var(--ink);
    font-weight: 700;
  }

  /* aktywna pozycja — żółta kropka pod linkiem */
  .top-nav__link[aria-current="page"]::after {
    content: '';
    position: absolute;
    left: 50%; bottom: .1rem;
    width: .35rem; height: .35rem;
    border-radius: 26%;
    background: var(--accent);
    translate: -50% 0;
  }

  .site-header__actions .site-header__cta { display: inline-flex; }
}

/* okrągły przycisk z ikoną (motyw, strzałki raila, zamknięcie) */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;      /* cel dotykowy ≥ 44 px (WCAG 2.5.5) */
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink-muted);
  font-size: 1.1rem;
  cursor: pointer;
  transition: color .15s, border-color .15s, background-color .15s;
}

.icon-btn:hover {
  color: var(--ink);
  border-color: var(--border-strong);
}

.icon-btn:disabled { opacity: .4; cursor: default; }

/* ikona motywu: księżyc w trybie jasnym, słońce w ciemnym */
.icon-btn__sun { display: none; }

[data-theme="dark"] .icon-btn__sun { display: block; }
[data-theme="dark"] .icon-btn__moon { display: none; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-btn__sun { display: block; }
  :root:not([data-theme="light"]) .icon-btn__moon { display: none; }
}

/* ── 6. NAWIGACJA MOBILNA ──────────────────────────────────── */

.tab-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-header);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  min-height: var(--tabbar-h);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--border);
}

@supports not (backdrop-filter: blur(1px)) {
  .tab-bar { background: var(--card); }
}

.tab-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .15rem;
  min-height: var(--tabbar-h);
  border: 0;
  background: none;
  color: var(--ink-muted);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
}

.tab-bar__item i { font-size: 1.25rem; line-height: 1; }

.tab-bar__item[aria-current="page"],
.tab-bar__item.is-active {
  color: var(--primary);
  font-weight: 700;
}

/* aktywna zakładka — kropka nad ikoną */
.tab-bar__item[aria-current="page"] i,
.tab-bar__item.is-active i { position: relative; }

.tab-bar__item[aria-current="page"] i::after,
.tab-bar__item.is-active i::after {
  content: '';
  position: absolute;
  top: -.45rem; left: 50%;
  width: .3rem; height: .3rem;
  border-radius: 26%;
  background: var(--accent);
  translate: -50% 0;
}

@media (min-width: 900px) {
  .tab-bar { display: none; }
}

/* szuflada menu — natywny <dialog> */
.drawer {
  width: min(420px, 100%);
  max-height: 100dvh;
  height: 100dvh;
  margin: 0 0 0 auto;              /* przyklejona do prawej */
  padding: 1rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
  border: 0;
  border-left: 1px solid var(--border);
  background: var(--card);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.drawer:not([open]) { display: none; }

.drawer::backdrop {
  background: rgba(10, 14, 25, .55);
  backdrop-filter: blur(2px);
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}

.drawer__title { font-weight: 700; font-size: 1.1rem; }

.drawer__nav { flex: 1; overflow-y: auto; }

.drawer__group {
  margin: 1.25rem 0 .35rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.drawer__list a,
.drawer__list button:not([hidden]) {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  min-height: 48px;
  padding: .5rem .5rem;
  border: 0; background: none;
  border-radius: var(--r-md);
  color: var(--ink);
  font: inherit; font-weight: 500;
  text-decoration: none; text-align: left; cursor: pointer;
}

.drawer__list a:hover, .drawer__list button:hover { background: var(--card-low); }

.drawer__list i { color: var(--ink-soft); font-size: 1.05rem; width: 22px; }

.drawer__foot {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding-top: .75rem;
  border-top: 1px solid var(--border);
}

.drawer__social {
  display: flex;
  align-items: center;
  gap: .75rem;
  min-height: 48px;
  padding: .5rem;
  border: 0;
  border-radius: var(--r-md);
  background: none;
  color: var(--ink);
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.drawer__social:hover { background: var(--card-low); }

.drawer__social i { color: var(--ink-soft); width: 22px; font-size: 1.05rem; }

/* Wygląd — 3-opcyjna kontrolka motywu Systemowy/Jasny/Ciemny (1.16B.3 fix) */
.drawer__theme { padding: .35rem .5rem .5rem; }
.drawer__theme-lbl { display: block; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-soft); margin-bottom: .5rem; }
.theme-seg { display: flex; gap: .3rem; padding: .25rem; background: var(--card-low); border-radius: var(--r-md); }
.theme-seg__btn {
  flex: 1; min-height: 44px; padding: .4rem .3rem;
  border: 0; border-radius: calc(var(--r-md) - .25rem);
  background: transparent; color: var(--ink-muted);
  font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer;
}
.theme-seg__btn.is-active { background: var(--card); color: var(--ink); box-shadow: var(--shadow-1); }
.theme-seg__btn:hover:not(.is-active) { color: var(--ink); }
.theme-seg__btn:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

/* ── 7. PRZYCISKI, CHIPY, BADGE ────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .65rem 1.4rem;
  border: 1px solid transparent;
  border-radius: var(--r-full);
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, translate .1s;
}

.btn:active { translate: 0 1px; }

.btn--sm { min-height: 40px; padding: .4rem 1rem; font-size: .85rem; }

.btn--primary {
  background: var(--primary);
  color: var(--on-primary);
}

.btn--primary:hover { background: var(--primary-strong); }

.btn--ghost {
  border-color: var(--border-strong);
  background: transparent;
  color: var(--ink);
}

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

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

.btn--inverse:hover { background: var(--card-low); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  width: fit-content;
  padding: .25rem .7rem;
  border-radius: var(--r-full);
  font-size: .78rem;
  font-weight: 700;
}

/* „Sponsorowane" — płatne wyróżnienie. Celowo neutralne (nie złote):
   nie może wyglądać jak rekomendacja redakcji ani odznaka jakości. */
.badge--promo {
  background: var(--card-low, rgba(22, 29, 49, .07));
  color: var(--ink-soft);
  border: 1px solid var(--border);
  font-size: .68rem;
  font-weight: 600;
  padding: .1rem .55rem;
}

/* ── 8. HERO ───────────────────────────────────────────────── */

.hero {
  --hero-glow: color-mix(in srgb, var(--accent) 14%, transparent); /* zmieniane wg pory dnia */
  position: relative;
  margin: 0 calc(50% - 50vw);      /* pełna szerokość okna */
  padding: 2.5rem 1rem 4.5rem;
  background:
    radial-gradient(60rem 24rem at 85% -10%, var(--hero-glow), transparent 60%),
    radial-gradient(50rem 26rem at 10% 0%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 65%),
    var(--card);
  overflow: hidden;
}

/* Poświata hero zależna od pory dnia (poranek / dzień / wieczór / noc) */
.hero--poranek { --hero-glow: color-mix(in srgb, #ffb46b 22%, transparent); }
.hero--dzien   { --hero-glow: color-mix(in srgb, var(--accent) 16%, transparent); }
.hero--wieczor { --hero-glow: color-mix(in srgb, #ff7a59 22%, transparent); }
.hero--noc     { --hero-glow: color-mix(in srgb, #5b6cff 20%, transparent); }

[data-theme="dark"] .hero,
:root:not([data-theme="light"]) .hero { background-color: var(--card); }

.hero__ridge {
  position: absolute;
  inset: auto 0 -1px 0;
  width: 100%;
  height: clamp(28px, 5vw, 64px);
  fill: var(--bg);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  max-width: var(--wrap);
  margin-inline: auto;
  display: grid;
  gap: 2rem;
}

/* hero z panelem pogody — dwie kolumny od desktopu, na telefonie stos */
@media (min-width: 900px) {
  .hero__inner--weather {
    grid-template-columns: 1.5fr 1fr;
    align-items: center;
  }
}

/* panel pogody w hero (szklana karta) */
.hero__weather {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--card) 72%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-1);
}

@supports not (backdrop-filter: blur(1px)) {
  .hero__weather { background: var(--card); }
}

.hero__weather-title {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.hero__weather-title i { color: var(--primary); font-size: .95rem; }

.hero__weather .card__more { margin-top: .25rem; padding-top: .5rem; }

@media (min-width: 900px) { .hero__weather { min-width: 300px; } }

.hero__date {
  font-size: .85rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-bottom: .75rem;
}

/* tylko pierwsza litera — „Czwartek, 9 lipca", nie „9 Lipca" */
.hero__date::first-letter { text-transform: uppercase; }

.hero__title {
  font-size: clamp(2rem, 4.5vw + .6rem, 3.3rem);
  font-weight: 800;   /* mocny nagłówek hero (1.17A) */
  letter-spacing: -.02em;
  line-height: 1.1;
  margin-bottom: .75rem;
}

.hero__sub {
  max-width: 34rem;
  color: var(--ink-muted);
  margin-bottom: 1.5rem;
}

/* „Dziś w Żywcu" — imieniny + wschód/zachód słońca */
.hero__today {
  display: flex; flex-wrap: wrap; gap: .3rem 1.1rem;
  margin: 0 0 1.1rem;
  font-size: .85rem; color: var(--ink-muted);
}
.hero__today span { display: inline-flex; align-items: center; gap: .35rem; }
.hero__today i { color: var(--primary); }
.hero__today strong { color: var(--ink); font-weight: 600; }

/* Szybkie chipy nawigacyjne w hero */
.hero__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.hero-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .85rem;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: var(--card);
  color: var(--ink);
  font-size: .85rem; font-weight: 600;
  text-decoration: none;
  transition: border-color .15s, transform .1s;
}
.hero-chip i { color: var(--ink-soft); }
.hero-chip:hover { border-color: var(--primary); transform: translateY(-1px); }
.hero-chip--accent { background: var(--primary); border-color: var(--primary); color: #fff; }
.hero-chip--accent i { color: #fff; }
.hero-chip--accent:hover { filter: brightness(1.06); }

/* Prawa kolumna hero: pogoda + „Najbliżej" jedna pod drugą */
.hero__rail { display: flex; flex-direction: column; gap: .75rem; }
.hero__rail .hero__weather { align-self: stretch; }

/* Karta „Najbliższe wydarzenie" (spotlight pod pogodą) */
.hero-next {
  display: flex; align-items: center; gap: .75rem;
  padding: .6rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--card) 72%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: var(--shadow-1);
  text-decoration: none; color: var(--ink);
  transition: border-color .15s, transform .1s;
}
.hero-next:hover { border-color: var(--primary); transform: translateY(-1px); }
.hero-next__media { position: relative; flex-shrink: 0; width: 72px; height: 72px; border-radius: var(--r-md); overflow: hidden; }
.hero-next__media img { width: 100%; height: 100%; object-fit: cover; }
.hero-next__date {
  position: absolute; left: 4px; bottom: 4px;
  display: flex; flex-direction: column; align-items: center; line-height: 1;
  padding: 2px 5px; border-radius: 6px; background: rgba(0, 0, 0, .72); color: #fff;
}
.hero-next__date strong { font-size: .85rem; }
.hero-next__date span { font-size: .55rem; text-transform: uppercase; }
.hero-next__body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.hero-next__label {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--primary);
}
.hero-next__title {
  font-weight: 700; font-size: .92rem; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hero-next__meta { font-size: .78rem; color: var(--ink-muted); }

/* Szybkie skróty pod nagłówkiem wydarzeń */
.ev-quick { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
/* skróty przeniesione POD treść sekcji (1.17A) — oddech nad, bez marginesu pod */
.ev-quick--after { margin-top: 1.1rem; margin-bottom: 0; }
.ev-quick .fchip { transition: border-color .15s, color .15s, transform .1s; }
.ev-quick .fchip:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-1px); }

.hero__search form {
  position: relative;
  display: flex;
  max-width: 34rem;
}

.hero__search-icon {
  position: absolute;
  left: 1.15rem;
  top: 50%;
  translate: 0 -50%;
  color: var(--ink-soft);
  pointer-events: none;
}

.hero__search-input {
  flex: 1;
  min-height: 56px;
  padding: .75rem 8rem .75rem 3rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  background: var(--bg);
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}

.hero__search-input::placeholder { color: var(--ink-soft); }

.hero__search form:has(.hero__search-input:focus) {
  filter: drop-shadow(0 12px 28px rgba(22, 29, 49, .12));
}

.hero__search-input:focus {
  outline: none;
  border-color: var(--primary);
}

.hero__search-btn {
  position: absolute;
  right: .3rem;
  top: 50%;
  translate: 0 -50%;
  min-height: 44px;
}

/* baner reklamowy w hero */
.hero__ad {
  max-width: var(--wrap);
  margin: 2rem auto 0;
  position: relative;
}

@media (min-width: 900px) {
  .hero { padding: 3.5rem 1.5rem 5.5rem; }
}

/* ── Reklamy (partials/ads.php) ────────────────────────────────
   Banery skalują się do szerokości okna: proporcje (aspect-ratio)
   sterują wysokością, więc na telefonie baner zmniejsza się razem
   z ekranem, bez sztywnych wysokości i bez poziomego przewijania. */

.ad {
  position: relative;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--card);
  overflow: hidden;
}

.ad__link { display: block; width: 100%; height: 100%; text-decoration: none; color: var(--ink); }

/* Obraz wypełnia kadr slotu — proporcje trzyma kontener .ad */
.ad__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ad__link--text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-height: 96px;
  padding: 1rem 1.25rem 1.4rem;
  text-align: center;
}

.ad__title { font-weight: 700; }

.ad__desc { font-size: .85rem; color: var(--ink-muted); }

.ad__label {
  position: absolute;
  right: .5rem;
  bottom: .35rem;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: color-mix(in srgb, var(--card) 75%, transparent);
  padding: .1rem .4rem;
  border-radius: var(--r-sm);
  pointer-events: none;
}

/* włączony slot bez kreacji — jasnoszary baner trzyma przestrzeń */
.ad--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--card-low);
  border-style: dashed;
}

.ad__placeholder {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Proporcje slotów — te same dla obrazu i placeholdera, żeby skalowały
   się identycznie. Nie dotyczą reklam tekstowych (mają własną wysokość). */
.hero__ad .ad:not(:has(.ad__link--text)) { aspect-ratio: 6 / 1; }
.ad-row  .ad:not(:has(.ad__link--text)) { aspect-ratio: 24 / 5; }

/* Telefon: łagodniejsze proporcje, żeby baner nie był nitką (i był klikalny). */
@media (max-width: 640px) {
  .hero__ad .ad:not(:has(.ad__link--text)) { aspect-ratio: 32 / 10; }
  .ad-row  .ad:not(:has(.ad__link--text)) { aspect-ratio: 32 / 9; }
}

/* Zapas dla przeglądarek bez aspect-ratio — minimalna wysokość. */
@supports not (aspect-ratio: 1) {
  .hero__ad .ad, .ad-row .ad { min-height: 90px; }
}

.ad-row {
  display: grid;
  gap: 1rem;
  padding-block: .5rem;
}

@media (min-width: 700px) {
  .ad-row { grid-template-columns: 1fr 1fr; }
  .ad-row:has(.ad:only-child) { grid-template-columns: 1fr; }
}

/* ── 9. SEKCJE I KARTY INFORMATORA ─────────────────────────── */

.section { padding-block: 1.75rem; }

.section--tight { padding-block: .75rem; }

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin-bottom: 1.25rem;
}

.section__head h2 { font-size: clamp(1.35rem, 1rem + 1.2vw, 1.75rem); }

.section__tools {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.section__note { font-size: .8rem; color: var(--ink-soft); }

.link-more {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .88rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
}

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

.link-more i { transition: translate .15s; }

.link-more:hover i { translate: 3px 0; }

.card {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--card);
  padding: 1.25rem;
}

.card__label {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .25rem;
}

.card__label i { font-size: .95rem; }

.card__loading { font-size: .85rem; color: var(--ink-soft); }

.card__more {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: auto;
  padding-top: .75rem;
  font-size: .82rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
}

.card__more:hover { text-decoration: underline; }

/* pogoda — markup wstrzykiwany przez app.js */
.weather__now {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.weather__now img { width: 52px; height: 52px; }

.weather__temp {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}

.weather__phrase { font-size: .82rem; color: var(--ink-muted); }

.weather__days {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .25rem;
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px solid var(--border);
}

.weather__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  font-size: .78rem;
  text-align: center;
}

.weather__day img { width: 30px; height: 30px; }

.weather__day-name { color: var(--ink-muted); }

.weather__day-name::first-letter { text-transform: uppercase; }

.weather__day-max { font-weight: 700; }

.weather__day-min { color: var(--ink-soft); font-size: .74rem; }

/* jakość powietrza w karcie pogody */
.weather__air {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px solid var(--border);
  font-size: .82rem;
  color: var(--ink-muted);
}

.weather__air-dot {
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--ink-soft);
}

.weather__air-pm { color: var(--ink-soft); font-size: .78rem; }

/* ── 10. WYDARZENIA ────────────────────────────────────────── */

.rail {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: .25rem;
  padding: .25rem .25rem 1rem;
  scrollbar-width: thin;
}

.rail__item {
  flex: 0 0 min(76vw, 280px);
  scroll-snap-align: start;
}

.rail-arrows { display: none; gap: .4rem; }

@media (min-width: 900px) {
  .rail-arrows:not([hidden]) { display: flex; }
}

.event-card {
  height: 100%;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--card);
  overflow: hidden;
  transition: box-shadow .2s, translate .2s, border-color .2s;
}

.event-card:hover {
  translate: 0 -3px;
  box-shadow: var(--shadow-2);
  border-color: var(--border-strong);
}

.event-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--ink);
  text-decoration: none;
}

.event-card__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--card-low);
  overflow: hidden;
}

.event-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: scale .3s;
}

.event-card:hover .event-card__media img { scale: 1.04; }

.event-card__date {
  position: absolute;
  top: .65rem; left: .65rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 46px;
  padding: .35rem .5rem;
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-1);
  line-height: 1.05;
}

.event-card__date strong { font-size: 1.15rem; }

.event-card__date span {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-muted);
}

.event-card__flag {
  position: absolute;
  top: .65rem; right: .65rem;
  padding: .25rem .65rem;
  border-radius: var(--r-full);
  /* „Dzisiaj!" = pozytywny akcent uwagi (accent/branding), NIE danger-czerwień (1.16B §9).
     Tekst zawsze ciemny — accent (żółty) jest identyczny w obu motywach, więc kolor nie może
     zależeć od --ink (w dark jasny → brak kontrastu na żółtym). (1.16B §59) */
  background: var(--accent);
  color: #161d31;
  font-size: .72rem;
  font-weight: 700;
}

/* „Odwołane" = danger (semantycznie czerwony), nie neutralna szarość (1.16B §9). */
.event-card__flag--cancel { background: var(--danger); color: #fff; }

.event-card--cancelled .event-card__media img { filter: grayscale(1); opacity: .7; }

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

.event-card__body {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .9rem 1rem 1.1rem;
}

.event-card__cat {
  display: flex;
  align-items: center;
  gap: .4rem;
  flex-wrap: wrap;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  /* eyebrow kategorii = supporting, nie konkuruje z tytułem: stonowany zamiast primary-blue (1.16B §14) */
  color: var(--ink-soft);
}

/* źródło biletów przy wydarzeniach zewnętrznych (KupBilecik) */
.event-card__src { color: var(--ink-soft); font-weight: 600; }

.event-card__title {
  font-weight: 700;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.event-card__meta {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  color: var(--ink-muted);
}

.event-card__meta i { color: var(--ink-soft); font-size: .8rem; }

.event-card__price {
  width: fit-content;
  margin-top: .35rem;
  padding: .15rem .6rem;
  border-radius: var(--r-full);
  background: var(--ok-bg);
  color: var(--ok);
  font-size: .74rem;
  font-weight: 700;
}

.event-card__price--paid { background: var(--card-low); color: var(--ink-muted); }

/* Wydarzenie zakończone (archiwum): plakat czarno-biały, status „Zakończone", brak wejścia w szczegóły. */
.event-card--ended .event-card__media img { filter: grayscale(1); opacity: .82; }
.event-card__link--ended { cursor: default; }
.event-card__price--ended { background: var(--card-low); color: var(--ink-soft); }

/* strona listy: nagłówek, filtry, siatka, paginacja */
.page-head { padding-block: 1.5rem .5rem; }

.crumbs {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .8rem;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}

.crumbs a { color: var(--ink-soft); text-decoration: none; }

.crumbs a:hover { color: var(--primary); }

.crumbs i { font-size: .65rem; }

.crumbs [aria-current] { color: var(--ink); font-weight: 700; }

.page-head__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.page-head h1 { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.4rem); letter-spacing: -.02em; }

.page-head__sub { color: var(--ink-muted); margin-top: .25rem; }
/* Liczba wyników pod H1 — supporting text (1.16B.4 fix): mniejszy, muted, bez pill/badge/tła. */
.page-head__count { margin: .1rem 0 .15rem; font-size: .9rem; font-weight: 600; color: var(--ink-soft); }

.filters {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding-block: 1rem;
}

.filters__row {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
}

.fchip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 40px;
  padding: .35rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  background: var(--card);
  color: var(--ink-muted);
  font-size: .84rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .15s, color .15s, background-color .15s;
}

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

.fchip.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-primary);
}

.fchip--alt { border-style: dashed; }

.fchip--alt.is-active { border-style: solid; }

/* Chip nieaktywny (np. „Zapisane"/„Moje plany" bez zapisanych wydarzeń) — wyszarzony, nieklikalny. */
.fchip:disabled, .fchip.is-disabled { opacity: .45; pointer-events: none; cursor: default; }

.filters__count {
  margin-left: auto;
  font-size: .82rem;
  color: var(--ink-soft);
}

.month-head {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: 1.1rem;
  margin: 1rem 0 .9rem;
}

.month-head span { color: var(--ink-soft); font-weight: 500; }

.month-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.event-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));
}

.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding-block: 2rem;
}

.pager__info { font-size: .85rem; color: var(--ink-muted); }

/* ── 11. WYKOPKI ───────────────────────────────────────────── */

/* wprowadzenie sekcji (np. „co to są Wykopki") */
.section__intro {
  max-width: 60ch;
  margin: -.5rem 0 1.25rem;
  color: var(--ink-muted);
}

/* Filtr Wykopków po gminie (index) */
.digg-filter {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
  margin: 0 0 1.1rem;
}
.digg-filter__label {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-muted);
}
.digg-filter .filters__select { min-height: 44px; }

/* wybór gmin w formularzu (dodaj link) */
.gmina-picker {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .25rem;
}

.gmina-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  font-size: .82rem;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}

.gmina-chip:hover { border-color: var(--border-strong); }

.gmina-chip input { accent-color: var(--primary); }

.gmina-chip:has(input:checked) {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
}

.digg-cta {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  background:
    radial-gradient(18rem 10rem at 100% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%),
    var(--card);
}

.digg-cta__title { font-weight: 700; font-size: 1.05rem; }

.digg-cta__sub { font-size: .87rem; color: var(--ink-muted); }

.digg-cta .btn { margin-top: .35rem; }

/* ── 12. KAFLE USŁUG ───────────────────────────────────────── */

.tiles {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 640px)  { .tiles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .tiles { grid-template-columns: repeat(6, 1fr); } }

.tile {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  height: 100%;
  padding: 1.1rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  transition: translate .15s, box-shadow .2s, border-color .15s;
}

.tile:hover {
  translate: 0 -3px;
  box-shadow: var(--shadow-1);
  border-color: var(--border-strong);
}

.tile i {
  font-size: 1.5rem;
  color: var(--primary);
  margin-bottom: .25rem;
}

.tile strong { font-size: .95rem; }

.tile span:not(.visually-hidden) {
  font-size: .78rem;
  color: var(--ink-muted);
  line-height: 1.4;
}

/* ── 13. FEEDBACK ──────────────────────────────────────────── */

.feedback {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2.5rem;
  align-items: center;
  padding: 2.5rem;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background:
    radial-gradient(30rem 14rem at 0% 110%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 65%),
    var(--card);
}

/* Nagłówek + tekst po lewej (kol. 1), formularz po prawej (kol. 2).
   Kolejność DOM: tekst najpierw — zgodna z układem wizualnym. */
.feedback__text  { grid-column: 1; grid-row: 1; }
.feedback__panel { grid-column: 2; grid-row: 1; }

.feedback h2 { font-size: clamp(1.3rem, 1rem + 1.2vw, 1.7rem); margin-bottom: .5rem; }

.feedback__text p {
  color: var(--ink-muted);
  margin: 0;
}

.feedback__form {
  display: flex;
  gap: .6rem;
}

.feedback__trap {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.feedback__input {
  flex: 1;
  min-width: 0;
  min-height: 48px;
  padding: .6rem 1.25rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  background: var(--bg);
  color: var(--ink);
}

.feedback__input:focus {
  outline: none;
  border-color: var(--primary);
}

.feedback__status {
  min-height: 1.4rem;
  margin-top: .85rem;
  font-size: .88rem;
  font-weight: 700;
}

.feedback__status.is-ok { color: var(--ok); }

.feedback__status.is-error { color: var(--danger); }

@media (max-width: 640px) {
  .feedback { grid-template-columns: 1fr; }
  .feedback__text, .feedback__panel { grid-column: 1; grid-row: auto; } /* tekst nad formularzem */
}

@media (max-width: 480px) {
  .feedback__form { flex-direction: column; }
}

/* ── 15. STOPKA ────────────────────────────────────────────── */

.site-footer { margin-top: 2.5rem; }

.footer-ridge {
  width: 100%;
  height: clamp(32px, 6vw, 80px);
  fill: #0d1424;
}

.site-footer__body {
  background: #0d1424;
  color: #aab4cf;
}

.footer-cta {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 1.5rem 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  border-bottom: 1px solid rgba(232, 236, 246, .1);
}

.footer-cta__title { font-weight: 700; color: #fff; }

.footer-cta__sub { font-size: .85rem; color: #8b96b3; }

.footer-grid {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 2.5rem 1rem;
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr 1fr;
}

.footer-brand { grid-column: 1 / -1; }

@media (min-width: 900px) {
  .footer-cta, .footer-grid, .footer-bottom { padding-inline: 1.5rem; }
  /* logo + 3 kolumny nawigacji (Odkrywaj / Działaj / Informacje) w jednym rzędzie */
  .footer-grid { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
  .footer-brand { grid-column: auto; }
}

.brand--footer { color: #fff; }

.brand--footer .brand__accent { color: #9cb8ff; }

.footer-brand__desc {
  max-width: 270px;
  margin-top: .85rem;
  font-size: .85rem;
  line-height: 1.65;
  color: #8b96b3;
}

.footer-social {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.footer-social__btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 42px;
  padding: .45rem 1rem;
  border: 1px solid rgba(232, 236, 246, .22);
  border-radius: var(--r-full);
  color: #dbe2f2;
  font-size: .82rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .15s, border-color .15s;
}

.footer-social__btn:hover {
  background: rgba(232, 236, 246, .1);
  border-color: rgba(232, 236, 246, .4);
}

.footer-col__title {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #7481a3;
  margin-bottom: .85rem;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
}

.footer-col a {
  display: inline-block;
  padding: .45rem 0;
  color: #c3cbe0;
  font-size: .88rem;
  text-decoration: none;
}

.footer-col a:hover { color: #fff; text-decoration: underline; }

.footer-bottom {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
  border-top: 1px solid rgba(232, 236, 246, .1);
  font-size: .78rem;
  color: #7481a3;
}

.footer-bottom__loc {
  display: flex;
  align-items: center;
  gap: .35rem;
}

/* © nad lokalizacją, wyrównane do prawej */
.footer-bottom__right {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .2rem;
  text-align: right;
}

/* Skrócona identyfikacja operatora (bez adresu i telefonu) — pełny zestaw na /dane-operatora */
.footer-operator {
  flex-basis: 100%;
  order: -1;
  margin: 0 0 .35rem;
  line-height: 1.55;
  color: #7481a3;
}
.footer-operator strong { color: #9aa6c4; }

/* Krótka informacja RODO przy formularzach — drugorzędna wizualnie, ale czytelna (§21) */
.form-rodo {
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ink-muted, #667);
  margin: .75rem 0;
}
.form-rodo a { text-decoration: underline; }
.form-rodo--check {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  font-size: .88rem;
  color: inherit;
}
.form-rodo--check input { margin-top: .2rem; flex: 0 0 auto; }

/* fokus na ciemnej stopce musi być widoczny */
.site-footer :focus-visible {
  outline-color: var(--accent);
}

/* ── 16. STANY PUSTE I SZKIELETY ───────────────────────────── */

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
  padding: 3rem 1.5rem;
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r-lg);
  text-align: center;
  color: var(--ink-muted);
}

.empty i { font-size: 2rem; color: var(--ink-soft); }

/* ── 17. ANIMACJE ──────────────────────────────────────────── */

/* płynne przejścia między podstronami (Chrome/Safari; reszta ignoruje) */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* wjazd kart przy przewijaniu — czysty CSS, bez JS */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .event-card, .tile, .wk-card {
      animation: rise-in both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }
  }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* ── 18. PODSTRONY: szczegóły, katalog, wykopki ── */

.notice {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-block: .75rem;
  padding: .75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--ink-muted);
  font-size: .9rem;
}

.notice i { flex-shrink: 0; }

.notice--danger {
  background: var(--danger-bg);
  border-color: transparent;
  color: var(--danger);
}

.notice--info {
  background: var(--ok-bg);
  border-color: transparent;
  color: var(--ok);
}

/* układ strony szczegółów (wydarzenie, firma) */
.detail { padding-block: 1.5rem; }

.detail__grid {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 900px) {
  .detail__grid { grid-template-columns: 1.9fr 1fr; gap: 2.5rem; }
  .detail__grid--firm { grid-template-columns: 2fr 1fr; }
}

.detail__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.detail__aside {
  order: -1;                    /* mobile: plakat/kontakt nad treścią */
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media (min-width: 900px) {
  .detail__aside { order: 0; position: sticky; top: calc(var(--header-h) + 1rem); }
}

.detail__cat {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: .35rem;
}

.detail__title {
  font-size: clamp(1.55rem, 1.1rem + 2vw, 2.3rem);
  letter-spacing: -.02em;
  margin-bottom: 1rem;
}

.detail__title--cancelled { text-decoration: line-through; }

.detail__title--firm { margin-bottom: .5rem; }

.detail__h2 {
  display: flex;
  align-items: center;
  font-size: 1.15rem;
  margin: .5rem 0 .75rem;
}

.detail__actions {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}

.meta-list {
  display: flex;
  flex-direction: column;
  gap: .65rem;
  margin-bottom: 1.25rem;
}

.meta-list li {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}

.meta-list i {
  color: var(--primary);
  font-size: 1.05rem;
  margin-top: .1rem;
}

.meta-list small {
  display: block;
  color: var(--ink-muted);
  font-size: .82rem;
}

/* kafelki dni wydarzenia wielodniowego */
.day-chips {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.day-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 58px;
  padding: .45rem .5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--card);
  line-height: 1.15;
}

.day-chip strong { font-size: 1.1rem; }

.day-chip span {
  font-size: .62rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.day-chip small { font-size: .62rem; color: var(--ink-soft); }

.day-chip em {
  font-style: normal;
  font-size: .58rem;
  font-weight: 700;
  color: var(--danger);
  text-transform: uppercase;
}

.day-chip.is-past { opacity: .45; }

.day-chip.is-today { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }

/* ── Przełącznik dni imprezy wielodniowej (osobne wpisy = seria) ── */
.day-switch {
  margin-bottom: 1.25rem;
  padding: .85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--card-low);
}
.day-switch__lead {
  display: flex; align-items: center; gap: .4rem;
  margin-bottom: .6rem;
  font-size: .82rem; font-weight: 700; color: var(--ink-muted);
}
.day-switch__lead i { color: var(--primary); }
.day-switch__list { display: flex; gap: .5rem; flex-wrap: wrap; }
.day-switch__chip {
  display: flex; flex-direction: column; align-items: center;
  min-width: 74px; padding: .45rem .7rem;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--card); color: var(--ink);
  line-height: 1.15; text-decoration: none;
  transition: border-color .15s, background-color .15s, translate .1s;
}
.day-switch__chip strong { font-size: .9rem; }
.day-switch__chip small { margin-top: .1rem; font-size: .68rem; color: var(--ink-soft); }
a.day-switch__chip:hover { border-color: var(--primary); translate: 0 -1px; }
.day-switch__chip.is-current { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.day-switch__chip.is-current small { color: var(--on-primary); opacity: .85; }
.day-switch__nav { display: flex; gap: .5rem; margin-top: .7rem; }
.day-switch__arrow {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .82rem; font-weight: 700; color: var(--primary); text-decoration: none;
}
.day-switch__arrow--next { margin-left: auto; }
.day-switch__arrow:hover { text-decoration: underline; }

/* dłuższe treści tekstowe (opis, program, godziny) */
.prose {
  color: var(--ink-muted);
  line-height: 1.65;
  max-width: 65ch;
}

.prose--card {
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--card);
}

.prose--small { font-size: .9rem; }

/* wizytówka kontaktu (organizator, firma) */
.contact-card {
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--card);
}

.contact-card__name { font-weight: 700; margin-bottom: .5rem; }

.contact-card__list {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}

.contact-card__list li {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .92rem;
  min-height: 32px;
}

.contact-card__list i { color: var(--ink-soft); width: 20px; }

.contact-card__list a { color: var(--primary); text-decoration: none; }

.contact-card__list a:hover { text-decoration: underline; }

.contact-box { display: flex; flex-direction: column; gap: .75rem; }

.contact-box__cta { width: 100%; }

/* plakat wydarzenia */
.poster {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--card-low);
}

.poster img { width: 100%; height: auto; display: block; }

.poster--cancelled img { filter: grayscale(1); opacity: .75; }

/* plakat klikalny → powiększenie */
.poster__btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  position: relative;
}
.poster__zoom {
  position: absolute;
  right: .6rem;
  bottom: .6rem;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: rgba(10, 14, 25, .62);
  color: #fff;
  font-size: 1rem;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  opacity: .9;
  transition: opacity var(--dur-fast, .15s) ease, transform var(--dur-fast, .15s) ease;
}
.poster__btn:hover .poster__zoom,
.poster__btn:focus-visible .poster__zoom { opacity: 1; transform: scale(1.06); }
.poster__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-lg); }

/* Lightbox — natywny <dialog> na powiększoną grafikę */
.lightbox {
  border: 0;
  padding: 0;
  margin: auto;
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  background: transparent;
  overflow: visible;
}
.lightbox:not([open]) { display: none; }
.lightbox[open] {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-out;
}
.lightbox::backdrop {
  background: rgba(8, 11, 20, .82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.lightbox__img {
  max-width: min(95vw, 900px);
  max-height: 92vh;
  width: auto;
  height: auto;
  border-radius: var(--r-md, 10px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  cursor: default;
  animation: lightbox-in var(--dur-base, .2s) ease-out;
}
.lightbox__close {
  position: fixed;
  top: max(1rem, env(safe-area-inset-top, 0px));
  right: 1rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 1.15rem;
  cursor: pointer;
  transition: background var(--dur-fast, .15s) ease;
}
.lightbox__close:hover,
.lightbox__close:focus-visible { background: rgba(255, 255, 255, .28); outline: none; }

/* Nawigacja galerii w lightboxie (prev/next + licznik) */
.lightbox__nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 1.35rem;
  cursor: pointer;
  transition: background var(--dur-fast, .15s) ease;
}
.lightbox__nav:hover,
.lightbox__nav:focus-visible { background: rgba(255, 255, 255, .3); outline: none; }
.lightbox__nav--prev { left: 1rem; }
.lightbox__nav--next { right: 1rem; }
.lightbox__count {
  position: fixed;
  top: max(1rem, env(safe-area-inset-top, 0px));
  left: 50%;
  transform: translateX(-50%);
  padding: .2rem .7rem;
  border-radius: 999px;
  background: rgba(10, 14, 25, .55);
  color: rgba(255, 255, 255, .9);
  font-size: .82rem;
  font-weight: 600;
}
.gallery a { cursor: zoom-in; display: block; position: relative; }
@keyframes lightbox-in {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox__img { animation: none; }
}

/* galeria firmy */
.gallery {
  display: grid;
  gap: .6rem;
  /* Maks. 3 zdjęcia w rzędzie. Dzięki auto-fit + szerokości toru = 1/3 kontenera
     układ dopasowuje się do liczby zdjęć: 1 → pełna szerokość, 2 → po połowie,
     3 → po ⅓, 4–6 → zawija po 3. Floor 140px zmniejsza liczbę kolumn na wąskich ekranach. */
  grid-template-columns: repeat(auto-fit, minmax(max(140px, (100% - 1.2rem) / 3), 1fr));
}

.gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  max-height: 340px;   /* pojedyncze/nieliczne zdjęcia nie rozjeżdżają się na wysokość */
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}
/* „Pokaż wszystkie zdjęcia" — rozwijanie galerii na profilu */
.gallery__item--extra[hidden] { display: none; }
.gallery__more {
  position: absolute; right: .5rem; bottom: .5rem;
  display: inline-flex; align-items: center; gap: .3rem;
  background: rgba(12, 17, 29, .72); color: #fff; font-weight: 800; font-size: .92rem;
  padding: .3rem .7rem; border-radius: 999px; cursor: pointer; backdrop-filter: blur(2px);
}
.gallery__more:hover { background: rgba(12, 17, 29, .88); }
.gallery__more:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.gallery__toggle { margin-top: .8rem; }

/* Opis „O firmie" — zwijanie jak na FB (skrót + „Zobacz więcej") */
.opis-clamp { max-height: 6.6em; overflow: hidden; }   /* ~4 linie */
.opis-clamp.is-expanded { max-height: none; }

.opis-more {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-top: .35rem;
  padding: 0;
  background: none;
  border: 0;
  color: var(--primary);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.opis-more:hover { text-decoration: underline; }
.opis-more i { transition: transform var(--dur-fast, .15s) ease; }
.opis-more.is-open i { transform: rotate(180deg); }

.map-embed {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--border);
}

.map-embed iframe {
  display: block;
  width: 100%;
  height: 320px;
  border: 0;
}

/* Placeholder przed załadowaniem Google Maps (click-to-load) */
.map-embed--consent {
  height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2, #f3f5fa);
  background-image: radial-gradient(var(--border) 1px, transparent 1px);
  background-size: 18px 18px;
}
.map-consent {
  text-align: center;
  padding: 1.25rem;
  max-width: 30rem;
}
.map-consent__title {
  font-weight: 700;
  margin: 0 0 .25rem;
}
.map-consent__text {
  font-size: .88rem;
  color: var(--ink-muted, #667);
  margin: 0 0 .85rem;
}

/* nagłówek wizytówki firmy */
.firm-head {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.firm-head__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px; height: 88px;
  flex-shrink: 0;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--card);
  overflow: hidden;
  font-size: 2rem;
  color: var(--ink-soft);
}

.firm-head__logo img { width: 100%; height: 100%; object-fit: contain; }

/* katalog — karty firm */
.firm-grid {
  display: grid;
  gap: .75rem;
  grid-template-columns: 1fr;
}

@media (min-width: 700px)  { .firm-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .firm-grid { grid-template-columns: 1fr 1fr 1fr; } }

.firm-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--card);
  overflow: hidden;
  transition: border-color .15s, box-shadow .2s, translate .15s;
}

.firm-card:hover {
  translate: 0 -2px;
  border-color: var(--border-strong);
  box-shadow: var(--shadow-1);
}

/* Sponsorowane: subtelny ciepły border zamiast krzyczącego 3px żółtego — etykietę niesie
   neutralny badge „Sponsorowane". Widoczne, ale nie dominuje karty (1.16B §10/§21). */
.firm-card--promo { border-width: 1.5px; border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); }

.firm-card__link {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: .9rem;
  padding: 1rem;
  color: var(--ink);
  text-decoration: none;
}

.firm-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  flex-shrink: 0;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--bg);
  overflow: hidden;
  font-size: 1.3rem;
  color: var(--ink-soft);
}

.firm-card__logo img { width: 100%; height: 100%; object-fit: contain; }

/* placeholder logo: inicjały firmy na kolorze kategorii (kolor przez JS — CSP) */
.firm-card__initials {
  display: grid;
  place-items: center;
  width: 100%; height: 100%;
  background: var(--primary);
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .02em;
}

/* Opinie mieszkańców (wizytówka firmy) */
.opinie__sum { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--ink-muted); }
.opinie__sum i { color: var(--ok); }
.opinie__list { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: .9rem; }
.opinia { border: 1px solid var(--border); border-radius: var(--r-lg, 16px); padding: 1rem 1.15rem; background: var(--card); }
.opinia__head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: .5rem; }
.opinia__verdict { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .82rem; padding: .2rem .6rem; border-radius: var(--r-full); }
.opinia__verdict.is-yes { color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, transparent); }
.opinia__verdict.is-no  { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.opinia__meta { font-size: .76rem; color: var(--ink-soft); }
.opinia__co { font-weight: 600; margin: .1rem 0 .4rem; }
.opinia__co i { color: var(--primary); margin-right: .25rem; }
.opinia__plus, .opinia__minus { display: flex; gap: .45rem; margin: .2rem 0; font-size: .9rem; color: var(--ink-muted); }
.opinia__plus i { color: var(--ok); flex-shrink: 0; margin-top: .15rem; }
.opinia__minus i { color: var(--danger); flex-shrink: 0; margin-top: .15rem; }
.opinia__reply { margin-top: .7rem; padding: .65rem .8rem; border-left: 3px solid var(--primary); background: var(--bg); border-radius: 0 var(--r-md) var(--r-md) 0; }
.opinia__reply-label { font-size: .75rem; font-weight: 700; color: var(--primary); margin-bottom: .2rem; }
.opinie__empty { color: var(--ink-soft); margin-bottom: 1rem; }
.opinie__rules { margin-top: .75rem; font-size: .78rem; color: var(--ink-soft); display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.opinie__rules i { color: var(--ok); }

/* Formularz opinii: wybór polecam/nie polecam */
.opinia-verdict { border: 0; margin: 0 0 .75rem; padding: 0; display: flex; gap: .5rem; }
.opinia-verdict legend { font-size: .82rem; font-weight: 700; margin-bottom: .35rem; padding: 0; }
.opinia-verdict__opt { flex: 1; }
.opinia-verdict__opt input { position: absolute; opacity: 0; pointer-events: none; }
.opinia-verdict__opt span { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .55rem; border: 1.5px solid var(--border); border-radius: var(--r-md); font-weight: 600; font-size: .85rem; cursor: pointer; }
.opinia-verdict__opt input:checked + span { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }
.opinia-verdict__opt input:focus-visible + span { outline: 3px solid var(--ring); outline-offset: 2px; }

/* ── Opinie: rozbudowa (podsumowanie, filtry, karty, zgłoszenia) ─────── */
.opinie__summary { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .9rem; margin: 0 0 1rem; padding: .7rem .95rem; border: 1px solid var(--border); border-radius: var(--r-lg, 16px); background: var(--card); }
.opinie__verified { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .82rem; color: var(--ok); }
.opinie__verified i { font-size: 1rem; }
.opinie__score { display: inline-flex; align-items: baseline; gap: .35rem; font-size: 1rem; color: var(--ink); }
.opinie__score i { color: var(--ok); }
.opinie__score strong { font-size: 1.25rem; font-weight: 800; }
.opinie__count { font-size: .85rem; color: var(--ink-soft); font-weight: 500; }
/* Mała próba — wynik mniej dominujący (bez wielkiej liczby). */
.opinie__summary.is-soft .opinie__score { font-size: .9rem; color: var(--ink-muted); }
.opinie__summary.is-soft .opinie__score strong { font-size: .95rem; font-weight: 700; }
.opinie__summary.is-empty { color: var(--ink-muted); }
.opinie__score--none { color: var(--ink-soft); font-size: .92rem; }
.opinie__score--none i { color: var(--ink-soft); }

.opinie__filters { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .9rem; }
.opinie__filter { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .7rem; border: 1.5px solid var(--border); border-radius: var(--r-full); background: transparent; color: var(--ink-muted); font-size: .8rem; font-weight: 600; cursor: pointer; }
.opinie__filter:hover { border-color: var(--border-strong); color: var(--ink); }
.opinie__filter.is-active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }
.opinie__filter:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }

.opinia__facts { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; margin: .1rem 0 .55rem; }
.opinia__fact { display: flex; flex-direction: column; gap: .05rem; }
.opinia__fact dt { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 700; color: var(--ink-soft); }
.opinia__fact dd { margin: 0; font-weight: 600; font-size: .92rem; color: var(--ink); }
.opinia__block { margin: .35rem 0; }
.opinia__label { display: flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; margin: 0 0 .1rem; }
.opinia__block--plus .opinia__label { color: var(--ok); }
.opinia__block--minus .opinia__label { color: var(--ink-soft); }
.opinia__block p:last-child { margin: 0; font-size: .92rem; color: var(--ink-muted); }
.opinia__report { margin-top: .6rem; padding: 0; border: 0; background: none; color: var(--ink-soft); font-size: .74rem; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; }
.opinia__report:hover { color: var(--danger); text-decoration: underline; }

.opinie__more { margin: .2rem 0 1rem; }
.opinie__none { color: var(--ink-soft); font-size: .88rem; margin: 0 0 1rem; }
.opinie__cta { margin-top: .25rem; }
.f-inline { display: flex; gap: .5rem; }
.f-inline select { flex: 1; min-width: 0; }

/* Panel właściciela — sekcja „Opinie klientów" */
.op-stats { display: flex; flex-wrap: wrap; gap: .6rem; margin: .2rem 0 .6rem; }
.op-stat { flex: 1; min-width: 5rem; text-align: center; padding: .6rem .4rem; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); }
.op-stat__num { display: block; font-size: 1.35rem; font-weight: 800; line-height: 1.1; }
.op-stat__num--ok { color: var(--ok); }
.op-stat__lbl { display: block; font-size: .72rem; color: var(--ink-soft); }
.op-mine-list { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.op-mine { border: 1px solid var(--border); border-radius: var(--r-md); padding: .8rem .9rem; background: var(--card); }
.op-mine__head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-bottom: .35rem; }
.op-mine__meta { font-size: .75rem; color: var(--ink-soft); }
.op-mine__co { margin: .1rem 0 .3rem; font-size: .9rem; }
.op-mine__plus, .op-mine__minus { display: flex; gap: .4rem; margin: .15rem 0; font-size: .88rem; color: var(--ink-muted); }
.op-mine__plus i { color: var(--ok); }
.op-mine__minus i { color: var(--ink-soft); }
.op-mine__reply { margin-top: .5rem; border-top: 1px dashed var(--border); padding-top: .55rem; }
.op-mine__reply label { display: block; font-size: .74rem; font-weight: 700; color: var(--primary); margin-bottom: .25rem; }
.op-mine__reply textarea { width: 100%; padding: .5rem .6rem; border: 1px solid var(--border); border-radius: var(--r-sm, 8px); background: var(--bg); color: var(--ink); font: inherit; font-size: .88rem; resize: vertical; }
.op-mine__actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .45rem; }

/* Komunikat błędu przy odsłonie kontaktu (telefon/e-mail) */
.reveal-err { display: block; margin-top: .4rem; font-size: .78rem; color: var(--danger); }

/* Przejęcie wizytówki — wybór ścieżki (przypisany e-mail / inny) */
.przejmij-opcje { border: 0; margin: .2rem 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.przejmij-opt { display: flex; gap: .55rem; align-items: flex-start; padding: .6rem .7rem; border: 1.5px solid var(--border); border-radius: var(--r-md); cursor: pointer; }
.przejmij-opt input { margin-top: .2rem; accent-color: var(--primary); flex-shrink: 0; }
.przejmij-opt:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.przejmij-opt small { color: var(--ink-soft); }
.przejmij-opt code { font-size: .9em; }

/* ── Portfolio + Cennik: PANEL edycji ─────────────────────────────── */
.btn--xs { padding: .25rem .45rem; font-size: .74rem; }
.pf-addbox, .cn-addbox { margin: .4rem 0 1rem; }
.pf-addbox > summary, .cn-addbox > summary { display: inline-flex; width: auto; list-style: none; cursor: pointer; }
.pf-addbox > summary::-webkit-details-marker, .cn-addbox > summary::-webkit-details-marker { display: none; }
.pf-form, .cn-form { margin-top: .8rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); display: flex; flex-direction: column; gap: .75rem; }
.pf-form input[type=file] { display: block; margin: .2rem 0; font-size: .82rem; }
.pf-list, .cn-list { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.pf-item, .cn-item { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--card); padding: .6rem .7rem; }
.pf-item__row { display: flex; align-items: center; gap: .6rem; }
.pf-item__thumb { flex: 0 0 auto; width: 64px; height: 48px; border-radius: var(--r-sm, 8px); overflow: hidden; background: var(--bg); display: grid; place-items: center; color: var(--ink-soft); }
.pf-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pf-item__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.pf-item__meta { font-size: .74rem; color: var(--ink-soft); }
.pf-item__act, .cn-item__act { display: flex; gap: .2rem; flex-shrink: 0; flex-wrap: wrap; }
.pf-edit, .cn-edit { margin-top: .7rem; border-top: 1px dashed var(--border); padding-top: .7rem; }
.pf-imgs { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.pf-img { position: relative; width: 90px; }
.pf-img img { width: 90px; height: 68px; object-fit: cover; border-radius: var(--r-sm, 8px); border: 1px solid var(--border); }
.pf-img.is-cover img { border-color: var(--primary); }
.pf-img__badge { position: absolute; top: 2px; left: 2px; font-size: .62rem; font-weight: 700; background: var(--primary); color: #fff; padding: .05rem .3rem; border-radius: 999px; }
.pf-img__act { display: flex; gap: .2rem; margin-top: .2rem; }
.cn-item__row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cn-item__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .05rem; }
.cn-item__desc { font-size: .74rem; color: var(--ink-soft); }
.cn-item__cena { font-weight: 700; white-space: nowrap; }

/* ── Portfolio: PUBLICZNE „Realizacje" ────────────────────────────── */
.real-grid { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(max(180px, (100% - 1.6rem) / 3), 1fr)); }
.real-card { border: 1px solid var(--border); border-radius: var(--r-lg, 16px); overflow: hidden; background: var(--card); display: flex; flex-direction: column; }
.real-card--extra[hidden] { display: none; }
.real-card__media { position: relative; display: block; aspect-ratio: 4/3; background: var(--bg); cursor: zoom-in; }
.real-card__media img { width: 100%; height: 100%; object-fit: cover; }
.real-card__count { position: absolute; right: .5rem; bottom: .5rem; display: inline-flex; align-items: center; gap: .25rem; font-size: .74rem; font-weight: 700; color: #fff; background: rgba(12,17,29,.72); padding: .2rem .5rem; border-radius: 999px; }
.real-card__body { padding: .7rem .8rem; display: flex; flex-direction: column; gap: .25rem; }
.real-card__title { font-weight: 700; margin: 0; }
.real-card__meta { font-size: .76rem; color: var(--ink-soft); display: flex; flex-wrap: wrap; gap: .1rem .6rem; }
.real-card__desc { font-size: .86rem; color: var(--ink-muted); margin: 0; }
.real-card__ask { align-self: flex-start; background: none; border: 0; cursor: pointer; font-size: .8rem; margin-top: .15rem; }
.real-more { margin-bottom: 1.25rem; }

/* ── Cennik: PUBLICZNE „Usługi i ceny" ────────────────────────────── */
.cennik-list { display: flex; flex-direction: column; }
.cennik-group { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); margin: .9rem 0 .3rem; }
.cennik-group:first-child { margin-top: 0; }
.cennik-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px dashed var(--border); }
.cennik-row__name { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.cennik-row__desc { font-size: .76rem; color: var(--ink-soft); }
.cennik-row__price { font-weight: 700; white-space: nowrap; text-align: right; }
.cennik-row__ask { background: none; border: 0; color: var(--primary); cursor: pointer; padding: 0 .1rem; }
.cennik-extra[hidden] { display: none; }
.cennik-more { margin: .8rem 0 0; }
.cennik-nota { font-size: .78rem; color: var(--ink-soft); margin: .8rem 0 0; display: flex; gap: .4rem; }
.cennik-cta { margin-top: .9rem; }
@media (max-width: 34rem) { .cn-item__row { align-items: flex-start; } .cennik-row { flex-wrap: wrap; gap: .2rem; } }

/* ── Katalog: SEO — intro, FAQ, linkowanie wewnętrzne ─────────────── */
.kat-intro__box { max-width: 60rem; color: var(--ink-muted); line-height: 1.6; font-size: .92rem; }
.kat-extra { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 52rem) { .kat-extra { grid-template-columns: 1.4fr 1fr; align-items: start; } }
.kat-faq__item { border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: .5rem; background: var(--card); }
.kat-faq__item > summary { cursor: pointer; padding: .7rem .9rem; font-weight: 600; font-size: .9rem; list-style: none; }
.kat-faq__item > summary::-webkit-details-marker { display: none; }
.kat-faq__item[open] > summary { color: var(--primary); }
.kat-faq__item > p { margin: 0; padding: 0 .9rem .8rem; color: var(--ink-muted); font-size: .88rem; line-height: 1.55; }
.kat-links__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.kat-links__list a { display: inline-flex; align-items: center; gap: .4rem; color: var(--ink-muted); text-decoration: none; font-size: .88rem; }
.kat-links__list a:hover { color: var(--primary); text-decoration: underline; }

/* ── Katalog: sortowanie, aktywne filtry, „pokaż więcej" ─────────────── */
.filters__sort select { padding: .35rem 1.8rem .35rem .7rem; border: 1.5px solid var(--border); border-radius: var(--r-full); background: var(--card); color: var(--ink); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; }
.filters__sort select:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.kat-active { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0 0 1rem; }
.kat-active__chip { display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .6rem; border-radius: var(--r-full); background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); font-size: .8rem; font-weight: 600; text-decoration: none; }
.kat-active__chip i { font-size: .7rem; }
.kat-active__chip:hover { background: color-mix(in srgb, var(--primary) 20%, transparent); }
.kat-active__clear { font-size: .8rem; color: var(--ink-soft); text-decoration: underline; margin-left: .2rem; }
.kat-active__clear:hover { color: var(--danger); }
.fchip--more { cursor: pointer; border-style: dashed; }
.fchip--extra[hidden] { display: none; }

/* ── Panel edycji firmy: zakładki, pasek postępu, sticky akcje ─────── */
.fedit-progress { margin: 0 0 1rem; }
.fedit-progress__head { display: flex; justify-content: space-between; align-items: baseline; font-size: .82rem; color: var(--ink-muted); margin-bottom: .3rem; }
.fedit-progress__head i { color: var(--ok); }
.fedit-progress__head strong { font-size: 1rem; color: var(--ink); }
.fedit-progress__bar { height: 8px; border-radius: var(--r-full); background: var(--card-low, var(--bg)); overflow: hidden; border: 1px solid var(--border); }
.fedit-progress__fill { display: block; height: 100%; width: 0; border-radius: var(--r-full); background: linear-gradient(90deg, var(--primary), var(--ok)); transition: width .5s var(--ease-out, ease); }

.fedit-tabs { position: sticky; top: 0; z-index: 20; display: flex; gap: .3rem; margin: 0 0 1.25rem; padding: .5rem 0; background: var(--bg); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.fedit-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border: 1.5px solid transparent; border-radius: var(--r-md); background: transparent; color: var(--ink-muted); font-size: .84rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.fedit-tab:hover { color: var(--ink); background: var(--card); }
.fedit-tab.is-active { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); }
.fedit-tab:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
.fedit-tab i { font-size: 1rem; }

/* Panele zakładek: domyślnie ukryte, aktywny pokazany klasą (bez inline style — CSP) */
[data-fedit-panel] { display: none; }
[data-fedit-panel].is-shown { display: block; }

/* Sticky pasek akcji formularza (Zapisz / Zobacz wizytówkę) */
.fedit-actionbar { position: sticky; bottom: 0; z-index: 15; margin-top: 1.25rem; padding: .8rem 0; background: var(--bg); border-top: 1px solid var(--border); }
.fedit-actionbar.fedit-off { display: none !important; }
.fedit-dirty { display: inline-flex; align-items: center; gap: .35rem; font-size: .8rem; font-weight: 600; color: var(--warn, #d08700); }
.fedit-dirty i { font-size: 1rem; }

/* Mobile: zakładki jako przewijany poziomo pasek, ikony bez etykiet gdy ciasno */
@media (max-width: 34rem) {
  .fedit-tab span { display: none; }
  .fedit-tab { padding: .55rem .7rem; }
  .fedit-tab.is-active span { display: inline; }
  .form-head__logout { position: static; margin-top: .6rem; }
}

/* ── Brama dostępu do panelu firmy (potwierdzenie kodem e-mail) ─────── */
.fd-gate { max-width: 30rem; margin-inline: auto; text-align: center; padding: 2rem 1.75rem; }
.fd-gate__icon { width: 60px; height: 60px; margin: 0 auto .75rem; display: grid; place-items: center; border-radius: var(--r-full); background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); font-size: 1.6rem; }
.fd-gate h1 { font-size: 1.4rem; margin: 0 0 .35rem; }
.fd-gate__firma { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--ink); margin: 0 0 1rem; }
.fd-gate p { color: var(--ink-muted); }
.fd-gate__mail { margin: .5rem 0 1rem; }
.fd-gate__mail strong, .fd-gate p strong { color: var(--ink); }
.fd-gate .notice { text-align: left; }
.fd-gate .form-actions { justify-content: center; }
.fd-gate .f-field { text-align: left; margin: .5rem 0; }
.fd-code-input { text-align: center; font-size: 1.6rem; letter-spacing: .5em; font-weight: 700; padding-left: .5em !important; }
.fd-resend { margin-top: .5rem; }
.fd-resend .link-more { background: none; border: 0; cursor: pointer; }
.fd-gate__help { margin-top: 1.1rem; }
.form-head__logout { position: absolute; top: 0; right: 0; }
.form-head { position: relative; }

/* Regulamin opinii — wąska kolumna treści */
.section--narrow { max-width: 52rem; margin-inline: auto; }
.prose__note { margin-top: 1.25rem; padding: .8rem 1rem; border-left: 3px solid var(--border-strong); background: var(--card); border-radius: 0 var(--r-md) var(--r-md) 0; font-size: .88rem; color: var(--ink-muted); }
.section__cta { margin-top: 1.5rem; }

/* Statystyki wizytówki (self-edit właściciela) */
.staty-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; }
.staty-list li { display: flex; flex-direction: column; gap: .1rem; padding: .8rem 1rem; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); }
.staty-list strong { font-size: 1.5rem; letter-spacing: -.02em; }
.staty-list span { font-size: .75rem; color: var(--ink-muted); }

/* ── Statystyki wizytówki v2: okresy, kafelki, lead, konwersja ─────── */
.staty-okres { display: flex; align-items: center; gap: .4rem; margin: 1rem 0 .5rem; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--ink-soft); }
.staty-okres:first-of-type { margin-top: .2rem; }
.staty-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); gap: .6rem; }
.staty-tile { position: relative; display: flex; flex-direction: column; gap: .15rem; padding: .8rem .9rem; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); }
.staty-tile__num { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.staty-tile__lbl { font-size: .76rem; color: var(--ink-muted); }
.staty-tile__hint { font-size: .68rem; color: var(--primary); font-weight: 600; margin-top: .1rem; }
/* Lead = najcenniejsza akcja — subtelnie wyróżniony, bez agresywnych barw. */
.staty-tile--lead { border-color: color-mix(in srgb, var(--primary) 45%, var(--border)); background: color-mix(in srgb, var(--primary) 7%, var(--bg)); }
.staty-tile--lead .staty-tile__num { color: var(--primary); }
.staty-konw { margin: .6rem 0 0; font-size: .85rem; color: var(--ink-muted); display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; }
.staty-konw i { color: var(--primary); }
.staty-konw strong { font-size: 1rem; color: var(--ink); }
.staty-konw span { font-size: .76rem; color: var(--ink-soft); }

/* ── Panel: Zapytania klientów (leady) ─────────────────────────────── */
.badge--info { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); }
.badge--muted { background: var(--card-low, var(--bg)); color: var(--ink-soft); }
.zapyt-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin: .2rem 0 .9rem; }
.zapyt-filter { display: inline-flex; align-items: center; padding: .3rem .7rem; border: 1.5px solid var(--border); border-radius: var(--r-full); background: transparent; color: var(--ink-muted); font-size: .8rem; font-weight: 600; text-decoration: none; }
.zapyt-filter:hover { border-color: var(--border-strong); color: var(--ink); }
.zapyt-filter.is-active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); color: var(--primary); }
.zapyt-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.zapyt-item { border: 1px solid var(--border); border-radius: var(--r-md); padding: .85rem .95rem; background: var(--card); }
.zapyt-item.is-new { border-color: color-mix(in srgb, var(--primary) 40%, var(--border)); background: color-mix(in srgb, var(--primary) 5%, var(--card)); }
.zapyt-item__head { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; margin-bottom: .3rem; }
.zapyt-item__name { font-size: .95rem; }
.zapyt-item__meta { font-size: .74rem; color: var(--ink-soft); }
.zapyt-item__temat { margin: .15rem 0; font-weight: 600; font-size: .9rem; }
.zapyt-item__temat i { color: var(--primary); }
.zapyt-item__kontakt { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: .2rem 0; font-size: .84rem; }
.zapyt-item__kontakt a { color: var(--ink-muted); text-decoration: none; }
.zapyt-item__kontakt a:hover { color: var(--primary); text-decoration: underline; }
.zapyt-item__msg { margin: .3rem 0 .1rem; font-size: .9rem; color: var(--ink-muted); }
.zapyt-item__actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }

/* ── Formularz zapytania: 2 kolumny + zgoda ────────────────────────── */
.f-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.f-hint--tight { margin-top: -.3rem; }
.f-check { display: flex; align-items: flex-start; gap: .55rem; margin: .6rem 0 .2rem; font-size: .84rem; color: var(--ink-muted); cursor: pointer; }
.f-check input { margin-top: .15rem; flex-shrink: 0; width: 1.05rem; height: 1.05rem; accent-color: var(--primary); }
@media (max-width: 30rem) { .f-grid2 { grid-template-columns: 1fr; } }

/* „Wyślij zapytanie" — przestronniejszy układ (tylko ten modal) */
#zapytanieModal .wk-modal__box { max-width: 34rem; padding: 2rem 2rem 1.6rem; max-height: calc(100dvh - 2rem); overflow-y: auto; }
#zapytanieModal .wk-modal__title { font-size: 1.32rem; margin-bottom: .4rem; }
#zapytanieModal > .wk-modal__box > .f-hint { margin: 0 0 1.4rem; font-size: .88rem; line-height: 1.55; }
#zapytanieForm { display: flex; flex-direction: column; gap: 1.2rem; }
#zapytanieForm .f-grid2 { gap: 1rem; margin: 0; }
#zapytanieForm .f-hint--tight { margin: -.7rem 0 0; font-size: .78rem; }
#zapytanieForm .f-field > label { font-size: .82rem; }
#zapytanieForm .f-field input,
#zapytanieForm .f-field textarea { padding: .7rem .85rem; }
#zapytanieForm .f-check { margin: .1rem 0 0; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg); gap: .7rem; line-height: 1.5; }
#zapytanieForm .form-actions { margin-top: .5rem; padding-top: 1.1rem; border-top: 1px solid var(--border); }
@media (max-width: 34rem) { #zapytanieModal .wk-modal__box { padding: 1.5rem 1.25rem 1.25rem; } #zapytanieForm { gap: 1.05rem; } }

/* Panel edycji firmy: logo, galeria, blokady Katalog+ */
.logo-edit { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.logo-edit__preview {
  display: grid; place-items: center; width: 64px; height: 64px; flex-shrink: 0;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg); overflow: hidden; color: var(--ink-muted); font-size: 1.5rem;
}
.logo-edit__preview img { width: 100%; height: 100%; object-fit: cover; }

.gal-edit { list-style: none; margin: 0 0 .75rem; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.gal-edit__item {
  display: flex; flex-direction: column; gap: .3rem; padding: .35rem;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg);
}
.gal-edit__item img { width: 120px; height: 90px; object-fit: cover; border-radius: calc(var(--r-md) - 3px); display: block; }
.gal-edit__del { display: flex; align-items: center; gap: .35rem; font-size: .78rem; color: var(--ink-muted); cursor: pointer; }

.katplus-lock { border-left: 3px solid var(--accent); }
.katplus-lock a { color: var(--accent); font-weight: 600; }

.katplus-cta { border: 1px solid var(--accent); margin-top: 1.5rem; }
.katplus-consent { align-items: flex-start; }

/* Aktualność danych na wizytówce + przejęcie wizytówki */
.akt-list { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .35rem; font-size: .82rem; color: var(--ink-muted); }
.akt-list li { display: flex; align-items: flex-start; gap: .45rem; line-height: 1.45; }
.akt-list i { color: var(--primary); flex-shrink: 0; margin-top: .1rem; }
.contact-box [data-potwierdz], .contact-box [data-poprawka] { justify-content: flex-start; }
.przejmij summary { padding: 0; font-size: .88rem; }
.przejmij .f-field { margin-top: .6rem; }
.przejmij form .btn { margin-top: .6rem; }

/* odznaka „Firma zweryfikowana" (email potwierdzony) */
.firm-verified {
  color: var(--ok);
  font-size: .85em;
  margin-left: .25rem;
  vertical-align: -.05em;
}

/* ── Godziny otwarcia: siatka w formularzu ─────────────────────── */
.godz-grid { display: flex; flex-direction: column; gap: .4rem; }
.godz-row {
  display: grid;
  grid-template-columns: 7.5rem 6.5rem 1fr;
  align-items: center;
  gap: .75rem;
  padding: .4rem .6rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--card);
}
.godz-row__day { font-weight: 600; font-size: .9rem; }
.godz-row__toggle { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; font-size: .85rem; }
.godz-row__times { display: inline-flex; align-items: center; gap: .5rem; }
.godz-row__times input[type="time"] {
  padding: .35rem .5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 8px);
  background: var(--bg);
  color: var(--ink);
  font: inherit;
  font-size: .85rem;
}
.godz-row.is-closed { opacity: .62; }
.godz-row.is-closed .godz-row__times { opacity: .45; }
.godz-copy { align-self: flex-start; margin-top: .2rem; }
@media (max-width: 520px) {
  .godz-row { grid-template-columns: 1fr auto; grid-auto-rows: auto; row-gap: .5rem; }
  .godz-row__times { grid-column: 1 / -1; }
}

/* ── Status „Otwarte / Zamknięte" (wizytówka) ──────────────────── */
.godz-status {
  display: inline-block;
  margin-left: .5rem;
  padding: .08rem .5rem;
  border-radius: var(--r-full);
  font-size: .72rem;
  font-weight: 700;
  vertical-align: middle;
}
.godz-status--open   { background: var(--ok-bg);     color: var(--ok); }
.godz-status--closed { background: var(--danger-bg); color: var(--danger); }

/* tabela godzin na wizytówce */
.godz-table { width: 100%; border-collapse: collapse; margin-top: .6rem; font-size: .88rem; }
.godz-table th, .godz-table td { padding: .3rem .1rem; text-align: left; }
.godz-table td { text-align: right; font-variant-numeric: tabular-nums; }
.godz-table th { font-weight: 500; color: var(--ink-muted); }
.godz-table tr + tr th, .godz-table tr + tr td { border-top: 1px solid var(--border); }
.godz-table tr.is-today th, .godz-table tr.is-today td { font-weight: 800; color: var(--ink); }
.godz-table__closed { color: var(--ink-subtle, var(--ink-muted)); }
.godz-uwagi { margin-top: .6rem; }

/* ── Badge „Otwarte/Zamknięte" na karcie firmy ─────────────────── */
.godz-pill { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; }
.godz-pill--open   { color: var(--ok); }
.godz-pill--closed { color: var(--ink-muted); }

/* ── Przełącznik „Otwarte teraz" w pasku katalogu ──────────────── */
.fchip--toggle { display: inline-flex; align-items: center; gap: .35rem; }
.fchip--toggle.is-active { background: var(--ok); border-color: var(--ok); color: #fff; }

/* Katalog FIX — dodatkowe filtry (Otwarte teraz / Ma promocję / Zweryfikowana) przeniesione
   z paska w rząd checkboxów panelu „Dodatkowe" (§5): ten sam <a>+role=switch co wcześniej
   (0 nowej logiki), tylko wygląd wiersza z kwadracikiem zamiast pigułki. */
.wk-nav .fchip--toggle {
  display: flex; align-items: center; gap: .55rem;
  min-height: 44px; padding: .35rem .6rem;
  border-radius: var(--r-sm, 8px);
  border: 0; background: none;
  color: var(--ink); text-decoration: none;
  font-size: .88rem; font-weight: 500;
}
.wk-nav .fchip--toggle:hover { background: var(--card-low); border-color: transparent; color: var(--ink); }
.wk-nav .fchip--toggle.is-active { background: var(--ok-bg); border-color: transparent; color: var(--ok); font-weight: 700; }
.wk-check__box {
  width: 18px; height: 18px; flex-shrink: 0;
  border: 1.5px solid var(--border); border-radius: 5px;
  background: var(--bg); color: transparent;
  display: inline-grid; place-items: center;
}
.wk-check__box i { font-size: .68rem; }
.fchip--toggle.is-active .wk-check__box { background: var(--ok); border-color: var(--ok); color: #fff; }

/* Sortowanie w panelu „Dodatkowe" — reużyty .filters__sort select, pełna szerokość kolumny. */
.wk-panel__sort { padding: .4rem .6rem .5rem; }
.wk-panel__sort .filters__sort { display: flex; flex-direction: column; gap: .3rem; }
.wk-panel__sort .filters__sort > span { font-size: .78rem; font-weight: 700; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .03em; }
.wk-panel__sort select { width: 100%; border-radius: var(--r-sm, 8px); }

/* Katalog FIX — Filtry + Dodaj firmę: jeden rząd pod wyszukiwarką, tylko mobile (§11–16/§37).
   Desktop ma stały panel boczny + CTA już w nagłówku strony — rząd tam niepotrzebny. */
.kat-actions { display: none; }
@media (max-width: 768px) {
  .kat-actions {
    display: flex; align-items: center; justify-content: space-between; gap: .6rem;
    margin: .9rem 0 1.35rem;
  }
  .kat-actions__add {
    display: inline-flex; align-items: center; gap: .4rem; flex-shrink: 0;
    min-height: 44px; padding: 0 1rem;
    border-radius: 10px; border: 1.5px solid var(--primary);
    color: var(--primary); background: var(--bg);
    font-weight: 700; font-size: .85rem; text-decoration: none; white-space: nowrap;
  }
  .kat-actions__add:hover { background: var(--primary); color: var(--on-primary, #fff); }
  .kat-head-cta { display: none; }   /* CTA już w rzędzie Filtry / Dodaj firmę poniżej */
}

/* Sticky pasek akcji na mobile. Etap 1.2 (firma) + Etap 1.3 (wydarzenie): jeden dolny pasek na całą
   szerokość zastępuje globalny tab-bar (nie dublujemy pasków). Wspólny wzorzec dla karty firmy i wydarzenia. */
.firm-actionbar, .ev-actionbar { display: none; }

@media (max-width: 768px) {
  /* Na karcie firmy i wydarzenia globalny tab-bar ustępuje miejsca akcjom — jeden pasek, nie dwa. */
  body.page-firma .tab-bar,
  body.page-event .tab-bar { display: none; }

  /* Rezerwa na pasek akcji (≈65px: przycisk 50 + 2×.45rem + border), nie globalny tab-bar (60px)
     — inaczej ostatnie ~5px treści chowa się pod fixed action barem (§17 QA 1.17). Jedna safe-area. */
  body.page-firma, body.page-event {
    padding-bottom: calc(50px + .9rem + 1px + env(safe-area-inset-bottom, 0px));
  }

  .firm-actionbar, .ev-actionbar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--z-actionbar);
    display: flex;
    gap: .4rem;
    padding: .45rem .6rem calc(.45rem + env(safe-area-inset-bottom, 0px));
    background: color-mix(in srgb, var(--card) 92%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
  }
  .firm-actionbar a, .firm-actionbar button,
  .ev-actionbar a, .ev-actionbar button {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .12rem;
    min-height: 50px;
    padding: .3rem .2rem;
    border-radius: 12px;
    border: 1px solid var(--primary);
    background: var(--primary);
    color: var(--on-primary, #fff);
    font-family: inherit;
    font-size: .68rem;
    font-weight: 700;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
  }
  .firm-actionbar a i, .firm-actionbar button i,
  .ev-actionbar a i, .ev-actionbar button i { font-size: 1.15rem; }
  .firm-actionbar a:active, .firm-actionbar button:active,
  .ev-actionbar a:active, .ev-actionbar button:active { transform: scale(.97); }
  /* „Zapisz → Zapisano": odwrócenie kolorów, żeby stan był czytelny na tle innych przycisków. */
  .firm-actionbar__save.is-saved,
  .ev-actionbar [data-ev-save].is-on {
    background: var(--card);
    color: var(--primary);
    border-color: var(--primary);
  }
  .firm-actionbar__save.is-saved i,
  .ev-actionbar [data-ev-save].is-on i { color: var(--primary); }

  /* treść nie chowa się pod paskiem */
  body:has(.firm-actionbar) main,
  body:has(.ev-actionbar) main { padding-bottom: 5.5rem; }
}

/* Karta wydarzenia na mobile: najpierw kluczowe info (tytuł/data/miejsce), plakat po treści — nie dominuje ekranu. */
@media (max-width: 899px) {
  body.page-event .detail__aside { order: 0; }
  body.page-event .poster img { max-height: 60vh; width: auto; max-width: 100%; margin-inline: auto; }
}

/* Przycisk „Pokaż e-mail" wyglądający jak link (odsłona kontaktu) */
.link-reveal {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--primary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.link-reveal:hover { text-decoration: none; }

/* Kod rabatowy (dodaj firmę) */
.kupon-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.kupon-row input { flex: 1; min-width: 160px; }
.f-hint.is-ok  { color: var(--ok); font-weight: 600; }
.f-hint.is-err { color: var(--danger); font-weight: 600; }

/* ── Karta wydarzenia: przycisk „zapisz" (Moje plany) ──────────── */
.event-card { position: relative; }
.ev-save {
  position: absolute; top: .5rem; right: .5rem; z-index: 2;
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  color: var(--ink); cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  transition: transform .1s, color .15s;
}
.ev-save:hover { transform: scale(1.08); }
.ev-save.is-on { color: var(--primary); }

/* przycisk „Moje plany" w pasku (fchip) + segment przełącznika widoku */
.ev-plany.is-on { background: var(--primary); border-color: var(--primary); color: #fff; }
.ev-viewtoggle { display: inline-flex; gap: .35rem; }
/* 1.16B.4 — mobile Wydarzenia: „Zgłoś wydarzenie" + przełącznik Lista/Kalendarz tylko desktop */
@media (max-width: 768px) {
  .ev-report-cta { display: none; }
  .ev-viewtoggle { display: none; }
}

/* ── Kalendarz miesięczny ──────────────────────────────────────── */
.ev-cal-head { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.ev-cal-title { font-size: 1.15rem; margin: 0 .25rem; }
.ev-cal-title span { color: var(--ink-muted); font-weight: 500; }
.ev-cal-today { margin-left: auto; }

.ev-cal__dow, .ev-cal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.ev-cal__dow { margin-bottom: 4px; }
.ev-cal__dow span { text-align: center; font-size: .72rem; font-weight: 700; color: var(--ink-muted); text-transform: uppercase; padding: .2rem 0; }
.ev-cal__cell {
  min-height: 94px;
  display: flex; flex-direction: column; gap: 2px;
  padding: .3rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--card);
  overflow: hidden;
}
.ev-cal__cell.is-blank { background: transparent; border-color: transparent; }
.ev-cal__cell.is-past { opacity: .5; }
.ev-cal__cell.is-today { border-color: var(--primary); box-shadow: inset 0 0 0 1px var(--primary); }
.ev-cal__num { font-size: .78rem; font-weight: 700; color: var(--ink-muted); }
.ev-cal__cell.is-today .ev-cal__num { color: var(--primary); }
.ev-cal__ev {
  font-size: .7rem; line-height: 1.25;
  padding: 2px 4px; border-radius: 4px;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border-left: 2px solid var(--primary);
  color: var(--ink); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ev-cal__ev:hover { background: color-mix(in srgb, var(--primary) 26%, transparent); }
.ev-cal__ev.is-ext { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 20%, transparent); }
.ev-cal__more { font-size: .66rem; color: var(--ink-muted); padding-left: 2px; }
.ev-cal-note { margin-top: 1rem; display: flex; align-items: center; gap: .45rem; color: var(--ink-muted); font-size: .9rem; }

@media (max-width: 560px) {
  .ev-cal__dow span { font-size: .6rem; }
  .ev-cal__cell { min-height: 62px; padding: .2rem; gap: 3px; }
  .ev-cal__num { font-size: .72rem; }
  /* na wąskim ekranie tytuły → kolorowe paski (wskaźnik zajętości dnia) */
  .ev-cal__ev { font-size: 0; height: 9px; padding: 0; border-left: 0; border-radius: 3px; background: var(--primary); }
  .ev-cal__ev.is-ext { background: var(--accent); }
  .ev-cal__more { font-size: .58rem; }
}

.firm-card__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.firm-card__top {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}

.firm-card__cat {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  /* spójnie z event-card__cat: eyebrow supporting, nie primary-blue (1.16B §14/§68) */
  color: var(--ink-soft);
}

.firm-card__name { font-weight: 700; line-height: 1.3; }

.firm-card__desc {
  font-size: .84rem;
  color: var(--ink-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.firm-card__meta {
  font-size: .78rem;
  color: var(--ink-soft);
  margin-top: .15rem;
}

.firm-card__arrow { color: var(--ink-soft); align-self: center; }

.firm-card__phone {
  display: flex;
  align-items: center;
  gap: .5rem;
  min-height: 46px;
  padding: .5rem 1rem;
  border-top: 1px solid var(--border);
  color: var(--primary);
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
}

.firm-card__phone:hover { background: var(--card-low); }

/* filtry — szukajka i selecty */
.filters__search {
  position: relative;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
}

.filters__search > i {
  position: absolute;
  left: 1rem;
  top: 24px;
  translate: 0 -50%;
  color: var(--ink-soft);
  pointer-events: none;
}

.filters__search input[type="search"] {
  flex: 1;
  min-width: min(240px, 100%);
  min-height: 48px;
  padding: .6rem 1rem .6rem 2.6rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  background: var(--card);
  color: var(--ink);
}

.filters__search input[type="search"]:focus {
  outline: none;
  border-color: var(--primary);
}

.filters__select {
  min-height: 48px;
  padding: .5rem 2.2rem .5rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--r-full);
  background: var(--card);
  color: var(--ink);
  font-weight: 500;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - .85rem) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.filters__group, .filters__inline {
  display: flex;
  gap: .45rem;
  flex-wrap: wrap;
  align-items: center;
}

.filters__inline { margin-left: auto; }

/* (reakcje Wykopków — styl w sekcji 11) */


/* baza linków (strona główna) */
.links-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  align-items: start;
}

.links-cat { display: flex; flex-direction: column; }

.links-cat__title {
  display: flex;
  align-items: center;
  gap: .55rem;
  font-size: 1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--border);
}

.links-cat__title i { color: var(--primary); }

.links-cat__list { display: flex; flex-direction: column; }

.links-cat__list a {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 46px;
  padding: .4rem .25rem;
  border-bottom: 1px solid var(--border);
  color: var(--ink);
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none;
}

.links-cat__list li:last-child a { border-bottom: 0; }

.links-cat__list a:hover { color: var(--primary); }

.links-cat__list a > span:not(.visually-hidden) {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.links-cat__list a > i { font-size: .75rem; color: var(--ink-soft); }

.links-cat__logo {
  width: 22px; height: 22px;
  border-radius: 6px;
  object-fit: contain;
  flex-shrink: 0;
}

.links-cat__logo-fallback {
  width: 22px;
  text-align: center;
  color: var(--ink-soft) !important;
  font-size: 1rem !important;
  flex-shrink: 0;
}

.links-cat__more summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 44px;
  margin-top: .25rem;
  border-radius: var(--r-full);
  color: var(--primary);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}

.links-cat__more summary::-webkit-details-marker { display: none; }

.links-cat__more summary:hover { background: var(--card-low); }

.links-cat__more[open] summary i { rotate: 180deg; }

.links-cat__more[open] summary { margin-bottom: .25rem; }

/* ── 19. FORMULARZE PUBLICZNE (dodaj firmę / wydarzenie / link) ── */

.form-page {
  max-width: 860px;
  margin-inline: auto;
  padding-block: 1.5rem 2.5rem;
}

.form-page .crumbs { margin-bottom: 1rem; }

.form-head { margin-bottom: 1.5rem; }

.form-head h1 {
  display: flex;
  align-items: center;
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem);
  letter-spacing: -.02em;
}

.form-head h1 .dot { width: .3em; height: .3em; }

.form-head p { color: var(--ink-muted); margin-top: .35rem; }

.form-sec {
  margin-bottom: 1rem;
  padding: 1.5rem;
}

.form-sec__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1.1rem;
}

.form-sec__title i { color: var(--primary); font-size: .95rem; }

.fgrid {
  display: grid;
  gap: .9rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .fgrid { grid-template-columns: 1fr 1fr; }
  .fgrid .f-full { grid-column: 1 / -1; }
}

.f-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }

.f-field > label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--ink-muted);
}

.f-req { color: var(--danger); }

.f-field input:not([type="checkbox"]):not([type="radio"]),
.f-field select,
.f-field textarea {
  width: 100%;
  min-height: 48px;
  padding: .6rem .9rem;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  transition: border-color .15s;
}

.f-field input:focus,
.f-field select:focus,
.f-field textarea:focus {
  outline: none;
  border-color: var(--primary);
}

.f-field textarea { resize: vertical; min-height: 96px; }

/* Walidacja inline: pole z błędem */
.f-field input[aria-invalid="true"],
.f-field select[aria-invalid="true"],
.f-field textarea[aria-invalid="true"] {
  border-color: var(--danger);
  background: var(--danger-bg);
}
.f-field input[aria-invalid="true"]:focus,
.f-field select[aria-invalid="true"]:focus,
.f-field textarea[aria-invalid="true"]:focus { border-color: var(--danger); }

.f-error {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-size: .8rem;
  font-weight: 600;
  color: var(--danger);
}
.f-error i { flex-shrink: 0; }

/* Sugestia poprawki (literówka w domenie e-maila) */
.f-suggest { font-size: .82rem; color: var(--ink-muted); }
.f-suggest button {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-weight: 700;
  color: var(--primary);
  text-decoration: underline;
  cursor: pointer;
}

/* Licznik znaków */
.char-counter {
  align-self: flex-end;
  font-size: .72rem;
  color: var(--ink-soft, var(--ink-muted));
  font-variant-numeric: tabular-nums;
}
.char-counter.is-near { color: var(--gold); }
.char-counter.is-max  { color: var(--danger); font-weight: 700; }

.f-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
                    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 1.2rem) 55%, calc(100% - .9rem) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

.f-hint { font-size: .74rem; color: var(--ink-soft); }

/* pole pliku: natywny input przykryty stylowaną etykietą */
.f-file { position: relative; }

.f-file input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.f-file__box {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 48px;
  padding: .6rem .9rem;
  border: 1.5px dashed var(--border-strong);
  border-radius: 12px;
  color: var(--ink-muted);
  font-size: .88rem;
}

.f-file:hover .f-file__box { border-color: var(--primary); }

.f-file:focus-within .f-file__box { outline: 3px solid var(--primary); outline-offset: 2px; }

.f-file__box i { color: var(--primary); font-size: 1.1rem; }

.f-file__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* miniatura wybranego logo w polu pliku + stan przeciągania */
.f-file__thumb {
  width: 34px; height: 34px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--border);
  flex-shrink: 0;
}
.f-file.is-drop .f-file__box {
  border-color: var(--primary);
  border-style: solid;
  background: var(--primary-soft, rgba(26, 86, 219, .08));
  color: var(--primary);
}

/* Cechy per kategoria: checkboxy w formularzach, chipy w katalogu, lista na wizytówce */
.cechy-grid { display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
.cecha-check {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 40px; padding: .35rem .8rem;
  border: 1.5px solid var(--border); border-radius: var(--r-full);
  background: var(--card); font-size: .85rem; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.cecha-check:has(input:checked) { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
.cecha-check input { width: 1rem; height: 1rem; accent-color: var(--primary); }

.cechy-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; }

/* „Zaproponuj udogodnienie" — dyskretny rozwijany blok pod cechami */
.cechy-propozycja { margin-top: .9rem; border-top: 1px dashed var(--border); padding-top: .8rem; }
.cechy-propozycja summary { cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--primary); display: flex; align-items: center; gap: .4rem; }
.cechy-propozycja summary::-webkit-details-marker { display: none; }
.cechy-propozycja[open] summary { margin-bottom: .5rem; }

.udog-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .45rem .9rem; }
.udog-list li { display: flex; align-items: center; gap: .5rem; color: var(--ink-muted); }
.udog-list i { color: var(--ok); flex-shrink: 0; }

/* Galeria zdjęć w formularzu firmy (plany płatne): 6 slotów z podglądem */
.gal-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; }
@media (max-width: 600px) { .gal-grid { grid-template-columns: repeat(3, 1fr); } }
.gal-slot {
  position: relative;
  aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem;
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-md);
  background: var(--bg);
  color: var(--ink-soft);
  font-size: .72rem;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s;
}
.gal-slot:hover { border-color: var(--primary); }
.gal-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gal-slot__rm {
  position: absolute; top: 4px; right: 4px; z-index: 1;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, .6); color: #fff;
  font-size: .65rem; cursor: pointer;
}

/* ── Układ formularza z podglądem wizytówki ────────────────────── */
.form-page--wide { max-width: 1140px; }
.form-layout { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 900px) {
  .form-layout { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }
}

.form-preview__sticky { display: flex; flex-direction: column; gap: .6rem; }
@media (min-width: 900px) {
  .form-preview__sticky { position: sticky; top: 1rem; }
}
@media (max-width: 899px) {
  .form-preview { order: -1; }  /* na mobile podgląd na górze */
}
.form-preview__label {
  display: flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 700; color: var(--ink-muted);
}
.form-preview__hint { font-size: .78rem; color: var(--ink-soft, var(--ink-muted)); }

/* karta podglądu jest statyczna (nie klikalna) */
.firm-card__link--static { cursor: default; }
.firm-card__phone--static { cursor: default; }
.firm-card [data-pv-name] { display: block; }

/* ── Pasek postępu wypełniania ─────────────────────────────────── */
.form-progress {
  display: flex; flex-direction: column; gap: .4rem;
  padding: .65rem .8rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--card);
}
.form-progress__head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.form-progress__txt { font-size: .78rem; font-weight: 700; color: var(--ink-muted); }
.form-progress__pct { font-size: .78rem; font-weight: 800; color: var(--primary); font-variant-numeric: tabular-nums; }
.form-progress__bar { height: 6px; border-radius: 999px; background: var(--border); overflow: hidden; }
.form-progress__bar span { display: block; height: 100%; width: 0; background: var(--primary); transition: width .25s ease; }
.form-progress.is-done .form-progress__pct { color: var(--ok); }
.form-progress.is-done .form-progress__bar span { background: var(--ok); }

/* ── Reasekuracje pod przyciskiem wysyłki ──────────────────────── */
.form-assure { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; margin: .8rem 0 0; padding: 0; }
.form-assure li { display: flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--ink-muted); }
.form-assure i { color: var(--ok); }

/* ── Ekran sukcesu: akcje ──────────────────────────────────────── */
.result-card__actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }

/* ── Oferta pakietu „Strona firmowa" (kafle + kroki) ───────────── */
/* blok planu „strona" żyje obok formularza w gridzie — trzymaj go w kolumnie głównej */
.form-layout > div[data-plan] { grid-column: 1; }
.of-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: 0; padding: 0; }
@media (max-width: 620px) { .of-grid { grid-template-columns: repeat(2, 1fr); } }
.of-item {
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  padding: .9rem .6rem; text-align: center;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg);
}
.of-item i { font-size: 1.15rem; color: var(--primary); margin-bottom: .2rem; }
.of-item strong { font-size: .82rem; }
.of-item span { font-size: .72rem; color: var(--ink-soft); }

.of-steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin: 0; padding: 0; text-align: center; }
@media (max-width: 620px) { .of-steps { grid-template-columns: repeat(2, 1fr); } }
.of-steps li { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.of-steps__n {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: var(--primary); color: var(--on-primary);
  font-weight: 700; font-size: .85rem;
}
.of-steps strong { font-size: .85rem; }
.of-steps li > span:last-child { font-size: .74rem; color: var(--ink-muted); }

/* ── FAQ (natywne <details>) ───────────────────────────────────── */
.faq { border-top: 1px solid var(--border); }
.faq:first-of-type { border-top: 0; }
.faq summary {
  display: flex; align-items: center; gap: .55rem;
  cursor: pointer; list-style: none;
  padding: .7rem 0; font-weight: 600; font-size: .92rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: ""; width: .42rem; height: .42rem; flex-shrink: 0;
  border-top: 2px solid var(--primary); border-right: 2px solid var(--primary);
  transform: rotate(45deg); transition: transform .2s;
}
.faq[open] summary::before { transform: rotate(135deg); }
.faq p { margin: 0 0 .8rem 1.4rem; color: var(--ink-muted); font-size: .88rem; line-height: 1.55; }

/* ═══ Cennik / pakiety dla firm ═══════════════════════════════════ */
.pricing-page { max-width: 1120px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) 1rem 4rem; }
.pricing-head { text-align: center; max-width: 720px; margin: 0 auto clamp(1.75rem, 5vw, 2.75rem); }
.pricing-head h1 { font-size: clamp(1.5rem, 4vw, 2.15rem); line-height: 1.2; margin: 0 0 .6rem; }
.pricing-head p { font-size: 1.02rem; color: var(--ink-muted); margin: 0; }

.pricing { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: start; }
@media (max-width: 900px) { .pricing { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; } }

.pricing__card {
  position: relative; display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--border); border-radius: 18px;
  padding: 1.7rem 1.4rem;
}
.pricing__name { font-size: 1.15rem; font-weight: 800; margin: 0 0 .35rem; }
.pricing__name-plus { color: var(--primary); }
.pricing__desc { font-size: .86rem; color: var(--ink-muted); line-height: 1.45; margin: 0 0 1rem; }
.pricing__price { margin: 0; line-height: 1; }
.pricing__price strong { font-size: 2.5rem; font-weight: 800; letter-spacing: -.02em; }
.pricing__price span { font-size: .95rem; color: var(--ink-soft); font-weight: 600; }
.pricing__note { font-size: .82rem; color: var(--ink-muted); margin: .6rem 0 0; }
.pricing__save { display: inline-block; background: var(--ok-bg); color: var(--ok); font-weight: 700; padding: .05rem .5rem; border-radius: 999px; font-size: .78rem; }
.pricing__note--free { color: var(--ok); font-weight: 700; display: flex; align-items: center; gap: .35rem; }
.pricing__fine { font-size: .74rem; color: var(--ink-soft); margin: .35rem 0 0; }
.pricing__cta { width: 100%; margin: 1.35rem 0 1.2rem; }
.pricing__feat-lead { font-size: .8rem; font-weight: 700; color: var(--ink-soft); margin: 0 0 .65rem; }
.pricing__feat { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; }
.pricing__feat li { display: flex; align-items: flex-start; gap: .55rem; font-size: .88rem; line-height: 1.35; color: var(--ink); }
.pricing__feat i { color: var(--ok); font-size: 1rem; flex-shrink: 0; margin-top: .05rem; }

.pricing__badge {
  position: absolute; top: -.85rem; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  background: var(--primary); color: var(--on-primary);
  font-size: .74rem; font-weight: 800; letter-spacing: .01em;
  padding: .35rem .85rem; border-radius: 999px; box-shadow: 0 6px 16px -4px rgba(26,86,219,.5);
}
.pricing__badge--max { background: #0f2460; color: #fff; box-shadow: 0 6px 16px -4px rgba(15,36,96,.45); }

/* PRO — najbardziej wyróżniony */
.pricing__card--pro { border: 2px solid var(--primary); box-shadow: 0 20px 46px -20px rgba(26,86,219,.5); z-index: 1; }
.pricing__card--pro .pricing__price strong { color: var(--primary); }

/* MAX — premium, subtelny ciemny akcent, nie dominuje nad PRO */
.pricing__card--max { border-color: var(--border-strong); background: linear-gradient(180deg, color-mix(in srgb, #0f2460 7%, var(--card)), var(--card) 130px); }

/* Ciemny przycisk (MAX) */
.btn--dark { background: #0f2460; color: #fff; }
.btn--dark:hover { background: #0a1a4a; border-color: #0a1a4a; }

/* Nie wiesz który pakiet? */
.pricing-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 2.75rem; padding: 1.5rem 1.7rem; background: var(--card-low); border: 1px solid var(--border); border-radius: 16px; }
.pricing-help h2 { font-size: 1.2rem; margin: 0 0 .3rem; }
.pricing-help p { margin: 0; color: var(--ink-muted); font-size: .92rem; }
.pricing-help__actions { display: flex; gap: .6rem; flex-wrap: wrap; }

.pricing-faq { max-width: 760px; margin: 3rem auto 0; }
.pricing-faq > h2 { font-size: 1.45rem; margin: 0 0 .9rem; }

/* ── Sticky pasek wysyłki na mobile ────────────────────────────── */
.form-mobilebar { display: none; }
@media (max-width: 899px) {
  .form-progress { display: none; } /* na mobile zastępuje go sticky bar */
  .form-mobilebar {
    display: block;
    position: fixed;
    left: 0; right: 0;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
    z-index: var(--z-fab);
    padding: .5rem .9rem;
    background: var(--card);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .12);
  }
  .form-mobilebar__prog { height: 4px; border-radius: 999px; background: var(--border); overflow: hidden; margin-bottom: .5rem; }
  .form-mobilebar__prog span { display: block; height: 100%; width: 0; background: var(--primary); transition: width .2s ease; }
  .form-mobilebar.is-done .form-mobilebar__prog span { background: var(--ok); }
  .form-mobilebar__row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
  .form-mobilebar__txt { font-size: .82rem; font-weight: 700; color: var(--ink-muted); }
  body:has(.form-mobilebar) main { padding-bottom: 5.5rem; }
}

/* honeypot — poza ekranem, niewidoczny też dla czytników */
.hp-trap {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* zgoda */
.consent {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
  font-size: .82rem;
  color: var(--ink-muted);
  line-height: 1.5;
  cursor: pointer;
}

.consent input {
  width: 20px; height: 20px;
  margin-top: .1rem;
  flex-shrink: 0;
  accent-color: var(--primary);
}

/* karty planów (radio) */
.plan-grid {
  display: grid;
  gap: .75rem;
  grid-template-columns: 1fr;
  margin-bottom: 1rem;
}

@media (min-width: 700px) { .plan-grid { grid-template-columns: 1fr 1fr 1fr; } }

.plan-card {
  position: relative;
  display: block;
  padding: 1.1rem 1.2rem;
  border: 2px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--card);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}

.plan-card:hover { border-color: var(--border-strong); }

.plan-card:has(input:checked) {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.plan-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.plan-card:has(input:focus-visible) { outline: 3px solid var(--primary); outline-offset: 2px; }

.plan-card__badge {
  display: inline-block;
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: .18rem .6rem;
  border-radius: var(--r-full);
  background: var(--ok-bg);
  color: var(--ok);
  margin-bottom: .5rem;
}

.plan-card__badge--premium { background: var(--warn-bg); color: var(--warn-ink); }

.plan-card__badge--strona { background: var(--card-low); color: var(--primary); }

.plan-card__name { font-weight: 700; }

.plan-card__price { font-size: .8rem; color: var(--ink-muted); margin: .15rem 0 .25rem; }

.plan-card__price strong { font-size: 1.4rem; color: var(--ink); }
.plan-card:has(input[value="katalog"]) .plan-card__price strong { color: var(--primary); }
.plan-card__sub { font-size: .74rem; color: var(--ink-soft); margin: 0 0 .55rem; }
.plan-card__sub strong { color: var(--ink); }
.plan-card__save { color: var(--ok); font-weight: 700; }

.plan-card__feat {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  font-size: .78rem;
  color: var(--ink-muted);
}

.plan-card__feat li { display: flex; gap: .4rem; align-items: baseline; }

.plan-card__feat i { color: var(--ok); translate: 0 1px; }

/* pasek wysyłki + status */
.form-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: .5rem;
}

.form-status {
  flex: 1;
  min-width: min(260px, 100%);
  font-size: .88rem;
  font-weight: 700;
}

.form-status.is-ok { color: var(--ok); }

.form-status.is-error { color: var(--danger); }

/* ekran wyniku (verify-firma, sukces wysyłki) */
.result-card {
  max-width: 520px;
  margin: 2.5rem auto;
  padding: 2.5rem 2rem;
  text-align: center;
}

.result-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px; height: 72px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  font-size: 2rem;
}

.result-card__icon.is-ok   { background: var(--ok-bg); color: var(--ok); }
.result-card__icon.is-info { background: var(--card-low); color: var(--primary); }
.result-card__icon.is-warn { background: var(--warn-bg); color: var(--warn-ink); }
.result-card__icon.is-err  { background: var(--danger-bg); color: var(--danger); }

.result-card h1 { font-size: 1.4rem; margin-bottom: .5rem; }

.result-card p { color: var(--ink-muted); }

.result-card .badge { margin: .75rem auto; }

.steps {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  text-align: left;
  margin: 1.25rem 0;
  padding: 1rem 1.2rem;
  border-radius: var(--r-md);
  background: var(--bg);
  font-size: .84rem;
  color: var(--ink-muted);
}

.steps li { display: flex; gap: .6rem; align-items: baseline; }

.steps__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--card-low);
  color: var(--ink-soft);
  font-size: .66rem;
  font-weight: 700;
  translate: 0 3px;
}

.steps__n.is-done { background: var(--ok); color: var(--card); }

/* ── 20. TURYSTYKA ─────────────────────────────────────────── */

.map-box {
  height: 420px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  overflow: hidden;
}

@media (max-width: 640px) { .map-box { height: 300px; } }

/* Leaflet w trybie ciemnym — przygaszone kafle */
[data-theme="dark"] .map-box .leaflet-tile { filter: brightness(.75) contrast(1.05); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .map-box .leaflet-tile { filter: brightness(.75) contrast(1.05); }
}

.row-link {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .75rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}

.row-link:hover { border-color: var(--border-strong); box-shadow: var(--shadow-1); }

.row-link__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  overflow: hidden;
  color: var(--ink-soft);
}

.row-link__logo img { width: 100%; height: 100%; object-fit: contain; }

.row-link__name { font-weight: 700; font-size: .92rem; }

.row-link__meta { font-size: .76rem; color: var(--ink-muted); }

.row-link > i:last-child { margin-left: auto; color: var(--ink-soft); }

.row-list { display: flex; flex-direction: column; gap: .55rem; }

/* pinezka na mapie — klasa zamiast inline style (CSP blokuje style="") */
.map-pin {
  width: 28px;
  height: 28px;
  background: var(--brand);
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
}

/* strona 404 */
.empty__actions { display: flex; gap: .6rem; flex-wrap: wrap; justify-content: center; }

.empty--404 h1 { font-size: clamp(1.4rem, 1rem + 1.5vw, 1.9rem); color: var(--ink); }

.empty__code {
  font-size: clamp(4rem, 10vw, 6.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--primary);
  letter-spacing: -.04em;
}

.empty__code .dot { width: .16em; height: .16em; }

/* wydruk: bez chrome'u nawigacyjnego */
@media print {
  .site-header, .tab-bar, .site-footer, .filters, .icon-btn { display: none !important; }
  body { background: #fff; }
}

/* ── Płynne przejścia między podstronami (View Transitions; reszta przeglądarek ignoruje) ── */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .2s; }
}

/* ── Skeleton loading (karta pogody) ── */
.skel {
  display: block;
  border-radius: 8px;
  background: linear-gradient(90deg, var(--card-low) 25%, var(--border) 50%, var(--card-low) 75%);
  background-size: 200% 100%;
  animation: skel-shimmer 1.2s linear infinite;
}
.skel--big   { width: 55%; height: 2.2rem; margin-bottom: .6rem; }
.skel--line  { width: 90%; height: .9rem;  margin-bottom: .45rem; }
.skel--short { width: 65%; }
@keyframes skel-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* ── Notka o przywróconym szkicu formularza ── */
.form-draft-note {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: 0 0 1rem; padding: .6rem .9rem;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--card-low); color: var(--ink-muted); font-size: .84rem;
}
.form-draft-note i { color: var(--primary); }
.form-draft-note button {
  background: none; border: none; padding: .2rem .3rem;
  color: var(--primary); font: inherit; font-weight: 700;
  text-decoration: underline; cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════════
   WYKOPKI — lokalny agregator (wykopki.php + karta na stronie głównej)
   ═══════════════════════════════════════════════════════════════ */

/* Odstęp od górnej nawigacji — jak .page-head na pozostałych podstronach */
main.wk { padding-top: 1.5rem; }

/* Nagłówek podstrony */
.wk-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.wk-head__intro { display: flex; gap: 1rem; max-width: 60ch; }
.wk-head__icon {
  flex-shrink: 0;
  width: 3rem; height: 3rem;
  display: grid; place-items: center;
  border-radius: var(--r-md);
  background: var(--ok-bg); color: var(--ok);
  font-size: 1.4rem;
}
.wk-head__text h1 { margin: 0 0 .4rem; }
.wk-head__lead { color: var(--ink-muted); margin: 0 0 1rem; line-height: 1.5; }
/* Etap 1.19 (§4): „+ Dodaj" schowany z górnego mobile widoku — funkcja zostaje dostępna
   przez .wk-fab (pływający przycisk, dół ekranu) i drawer „Więcej"; desktop bez zmian. */
@media (max-width: 768px) { .wk-head__add { display: none; } }

/* Układ dwukolumnowy */
.wk-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.5rem;
  align-items: start;
}

/* Lewa kolumna */
.wk-side { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.wk-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: .5rem;
}
.wk-panel__title {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem .6rem;
  font-weight: 700; font-size: .82rem;
  color: var(--ink-muted); text-transform: uppercase; letter-spacing: .03em;
  list-style: none; cursor: default;
  pointer-events: none;   /* desktop: panel zawsze otwarty (na mobile odblokowane) */
}
.wk-panel__title::-webkit-details-marker { display: none; }
.wk-nav { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.wk-nav__item {
  display: flex; align-items: center; gap: .55rem;
  min-height: 40px; padding: .35rem .6rem;
  border-radius: var(--r-sm, 8px);
  color: var(--ink); text-decoration: none;
  font-size: .88rem; font-weight: 500;
}
.wk-nav__item > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wk-nav__item:hover { background: var(--card-low); }
.wk-nav__item.is-active {                 /* aktywna kategoria / gmina: zielone tło */
  background: var(--ok-bg);
  color: var(--ok);
  font-weight: 700;
}
.wk-nav__count {
  margin-left: auto;
  font-size: .74rem; font-weight: 700;
  color: var(--ink-soft);
  background: var(--card-low);
  padding: .05rem .5rem; border-radius: var(--r-full);
  min-width: 1.6rem; text-align: center;
}
.wk-nav__item.is-active .wk-nav__count { color: var(--ok); background: color-mix(in srgb, var(--ok) 15%, transparent); }
.wk-nav__dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--cat, var(--ink-soft)); flex-shrink: 0; }

/* Prawa kolumna: feed */
.wk-feed { min-width: 0; }
.wk-feed__bar {
  display: flex; flex-wrap: wrap; gap: .75rem;
  align-items: center; justify-content: space-between;
  margin-bottom: 1rem;
}
.wk-tabs { display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
.wk-tabs::-webkit-scrollbar { display: none; }
.wk-tab {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px;                        /* touch target ≥44px (1.16B.4 §13/§26) */
  padding: .55rem .85rem; white-space: nowrap;
  color: var(--ink-muted); text-decoration: none;
  font-weight: 600; font-size: .9rem;
  border-bottom: 2px solid transparent;
}
.wk-tab:hover { color: var(--ink); }
.wk-tab.is-active { color: var(--ok); border-bottom-color: var(--ok); }
.wk-period { display: flex; align-items: center; gap: .4rem; }
.wk-period__label { color: var(--ink-soft); }
/* Etap 1.19 (§12-14): wiersz-kotwica dla mobile „Filtry" (initMobileFilters mocuje
   .mfilter-btn w [data-mfilter-slot]) — pusty/schowany na desktopie, gdzie .wk-side
   jest zawsze widoczny i osobny przycisk Filtry jest zbędny (§27 bez regresji). */
.wk-mfilter-row { display: none; }

/* Mobile: rzędy szybkich filtrów nie mogą wypychać strony w bok (poziomy overflow
   powodował zoom-out i przesunięcie dolnego paska nawigacji poza ekran). */
@media (max-width: 768px) {
  .wk-tabs   { min-width: 0; max-width: 100%; }
  .wk-period { flex-wrap: wrap; min-width: 0; }
  /* Rytm pionowy (§19): Najnowsze → mały gap → Filtry → większy gap → lista. */
  .wk-feed__bar   { margin-bottom: .65rem; }
  .wk-mfilter-row { display: block; margin-bottom: 1.5rem; }
}
/* 1.16B.4 fix — Aktualne / Zakończone / Filtry w jednym rzędzie na 320px:
   kompaktowe chipy (węższy padding) + touch ≥44px. */
@media (max-width: 480px) {
  .wk-period { gap: .3rem; }
  .wk-period .fchip--alt, .wk-period .mfilter-btn {
    min-height: 44px; padding: .4rem .5rem; font-size: .82rem; gap: .25rem;
  }
  .wk-period .fchip--alt i, .wk-period .mfilter-btn i { font-size: .9rem; }
}
/* Bardzo wąskie ekrany: status = sam tekst (ikony Aktualne/Zakończone dekoracyjne §8),
   Filtry zachowuje ikonę sliders — cały rząd mieści się na 320px. */
@media (max-width: 360px) {
  .wk-period .fchip--alt > i { display: none; }
  .wk-period { gap: .25rem; }
}

/* Kategorie — kolory akcentu (kropka + etykieta) */
.wk-cat--wiadomosci { --cat: #2563eb; }
.wk-cat--wydarzenia { --cat: #7c3aed; }
.wk-cat--sport      { --cat: #0e7a3d; }
.wk-cat--kultura    { --cat: #db2777; }
.wk-cat--biznes     { --cat: #0891b2; }
.wk-cat--spoleczne  { --cat: #ea580c; }
.wk-cat--inne       { --cat: #64748b; }

/* ── Karta wpisu ── */
.wk-list { display: flex; flex-direction: column; gap: .75rem; }
.wk-card {
  display: grid;
  grid-template-columns: 1fr auto;   /* treść (z reakcjami pod opisem) | akcje */
  gap: 1rem;
  padding: 1rem 1.1rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  transition: border-color .15s, box-shadow .15s;
}
.wk-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-1); }

/* Reakcje — poziomy rząd pod opisem wpisu */
.wk-card__react { display: flex; flex-direction: row; gap: .5rem; margin-top: .7rem; flex-wrap: wrap; }
.wk-react {
  --rc: var(--ink-muted); --rbg: var(--card-low);
  display: inline-flex; flex-direction: row; align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding: .35rem .9rem;
  border: 1.5px solid var(--border); border-radius: var(--r-full);
  background: var(--card-low); color: var(--ink-muted);
  cursor: pointer; font-family: inherit; line-height: 1;
  transition: border-color .12s, background-color .12s, color .12s;
}
.wk-react i { font-size: 1.05rem; color: var(--rc); }
.wk-react__num { font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); }
.wk-react__label { font-size: .82rem; font-weight: 600; color: var(--ink-soft); }
.wk-react:hover { border-color: var(--rc); background: var(--rbg); }
.wk-react.is-on { border-color: var(--rc); background: var(--rbg); }
.wk-react.is-on .wk-react__num, .wk-react.is-on .wk-react__label { color: var(--rc); }
.wk-react[disabled] { opacity: .6; cursor: default; }
.wk-react--boost  { --rc: #c2410c; --rbg: #fff2e8; }
.wk-react--useful { --rc: var(--ok); --rbg: var(--ok-bg); }

/* ulotne „+1"/„−1" po kliknięciu reakcji */
.wk-react { position: relative; }
.wk-fly {
  position: absolute; top: -.3rem; right: .5rem;
  font-size: .82rem; font-weight: 700; color: var(--rc);
  pointer-events: none;
  will-change: transform, opacity;   /* na kompozytorze — płynniej, bez reflow */
  animation: wk-fly .45s ease-out forwards;
}
@keyframes wk-fly {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-1.3rem); }
}

/* „Pokaż więcej" pod feedem */
.wk-more {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  margin: 1rem auto 0; min-height: 44px; padding: .55rem 1.6rem;
  border: 1.5px solid var(--border); border-radius: var(--r-full);
  background: var(--card); color: var(--ink-muted);
  font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer;
  transition: border-color .12s, color .12s;
}
.wk-more:hover { border-color: var(--border-strong); color: var(--ink); }
.wk-more__count { color: var(--ink-soft); font-weight: 500; }

/* Chip „Twoja gmina" nad paskiem feedu */
.wk-mygmina {
  display: flex; align-items: center; gap: .45rem;
  margin: 0 0 .8rem; padding: .5rem .9rem;
  border: 1px solid var(--border); border-radius: var(--r-full);
  background: var(--card); font-size: .86rem; color: var(--ink-muted);
  width: fit-content;
}
.wk-mygmina i { color: var(--primary); }
.wk-mygmina a { color: var(--primary); font-weight: 700; }
.wk-mygmina__x {
  display: grid; place-items: center;
  width: 28px; height: 28px; margin-left: .2rem;
  border: none; border-radius: 50%; background: none;
  color: var(--ink-soft); cursor: pointer; font-size: .7rem;
}
.wk-mygmina__x:hover { background: var(--card-low); color: var(--ink); }

/* Permalink (czas publikacji) + strona pojedynczego wpisu */
.wk-card__perma { color: var(--ink-soft); text-decoration: none; }
.wk-card__perma:hover { color: var(--primary); text-decoration: underline; }
.wk-single__back { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.25rem; }

/* „Pokaż wszystkie" w panelu gmin */
.wk-nav__more {
  display: flex; align-items: center; gap: .4rem;
  width: 100%; min-height: 40px; padding: .35rem .6rem;
  background: none; border: none; border-radius: var(--r-sm, 8px);
  color: var(--primary); font: inherit; font-size: .84rem; font-weight: 600;
  cursor: pointer; text-align: left;
}
.wk-nav__more:hover { background: var(--card-low); }

/* Treść (środek karty) */
.wk-card__body { min-width: 0; }
.wk-card__eyebrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem;
  margin: 0 0 .3rem; font-size: .72rem;
}
.wk-cat { color: var(--cat, var(--ink-muted)); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.wk-card__gmina { display: inline-flex; align-items: center; gap: .25rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .02em; font-weight: 600; }
.wk-card__gmina i { color: var(--ink-soft); }
.wk-card__title { margin: 0 0 .3rem; font-size: 1.05rem; line-height: 1.3; }
.wk-card__title a { color: var(--ink); text-decoration: none; }
.wk-card__title a:hover { color: var(--primary); text-decoration: underline; }
.wk-card__desc {
  margin: 0 0 .45rem; color: var(--ink-muted); font-size: .88rem; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wk-card__source { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0; font-size: .78rem; color: var(--ink-soft); }
.wk-card__host { color: var(--primary); font-weight: 600; }
.wk-badge { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: .1rem .45rem; border-radius: var(--r-full); }
.wk-badge--new   { color: var(--ok); background: var(--ok-bg); }
.wk-badge--promo { color: var(--warn-ink); background: var(--warn-bg); }
.wk-badge--ends  { color: var(--danger); background: var(--danger-bg); }

/* Akcje (prawa kolumna karty) */
.wk-card__actions { display: flex; flex-direction: column; align-items: flex-start; gap: .1rem; flex-shrink: 0; }
.wk-action {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: .3rem .55rem;   /* touch target ≥44px (1.16B.6 §29) */
  background: none; border: none; border-radius: var(--r-sm, 8px);
  color: var(--ink-muted); font: inherit; font-size: .82rem; cursor: pointer;
  white-space: nowrap;
}
.wk-action:hover { background: var(--card-low); color: var(--ink); }
.wk-action.is-on { color: var(--ok); }
.wk-action--report { color: var(--danger); }
.wk-action--report:hover { background: var(--danger-bg); color: var(--danger); }

/* ── Modal: Zgłoś problem ── */
.wk-modal { position: fixed; inset: 0; z-index: var(--z-header); display: grid; place-items: center; padding: 1rem; }
.wk-modal[hidden] { display: none; }
.wk-modal__backdrop { position: absolute; inset: 0; background: rgba(10, 14, 25, .5); }

/* ruch modala: wejście fade+scale, wyjście krótsze (~70% wejścia) */
.wk-modal:not([hidden]) .wk-modal__box { animation: modal-in var(--dur-base) var(--ease-out); }
.wk-modal:not([hidden]) .wk-modal__backdrop { animation: fade-in var(--dur-base) ease-out; }
.wk-modal.is-closing .wk-modal__box { animation: modal-out .14s var(--ease-in) forwards; }
.wk-modal.is-closing .wk-modal__backdrop { animation: fade-out .14s ease-in forwards; }
@keyframes modal-in  { from { opacity: 0; transform: scale(.96) translateY(8px); } }
@keyframes modal-out { to   { opacity: 0; transform: scale(.97); } }
@keyframes fade-in   { from { opacity: 0; } }
@keyframes fade-out  { to   { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .wk-modal .wk-modal__box, .wk-modal .wk-modal__backdrop { animation: none !important; }
}
.wk-modal__box {
  position: relative; z-index: 1;
  width: 100%; max-width: 30rem;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg, 16px); padding: 1.5rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
}
.wk-modal__x { position: absolute; top: .8rem; right: .8rem; width: 40px; height: 40px; border: none; background: none; color: var(--ink-muted); cursor: pointer; border-radius: var(--r-full); }
.wk-modal__x:hover { background: var(--card-low); color: var(--ink); }
.wk-modal__title { margin: 0 0 .25rem; font-size: 1.2rem; }
.wk-modal__sub { margin: 0 0 1rem; font-size: .84rem; color: var(--ink-muted); }
.wk-report__reasons { border: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.wk-report__reason { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .3rem .6rem; border-radius: var(--r-sm, 8px); cursor: pointer; }
.wk-report__reason:hover { background: var(--card-low); }
.wk-report__reason input { width: 1.1rem; height: 1.1rem; accent-color: var(--primary); }
.wk-report__note textarea { width: 100%; padding: .6rem .8rem; border: 1.5px solid var(--border); border-radius: var(--r-sm, 8px); background: var(--surface); color: var(--ink); font: inherit; font-size: .88rem; resize: vertical; }
.wk-modal__msg { margin: .6rem 0 0; font-size: .84rem; font-weight: 600; }
.wk-modal__msg.is-ok  { color: var(--ok); }
.wk-modal__msg.is-err { color: var(--danger); }
.wk-modal__actions { display: flex; justify-content: flex-end; gap: .6rem; margin-top: 1rem; }

/* Etap 2.2 — kroki instrukcji „Dodaj do ekranu głównego" (iOS), wewnątrz .wk-modal */
.pwa-ios-steps { list-style: none; counter-reset: pwa-step; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.pwa-ios-steps li { display: flex; align-items: center; gap: .7rem; font-size: .92rem; line-height: 1.4; color: var(--ink); }
.pwa-ios-steps li::before {
  counter-increment: pwa-step; content: counter(pwa-step);
  flex-shrink: 0; display: grid; place-items: center; width: 1.6rem; height: 1.6rem;
  border-radius: 50%; background: var(--card-low); color: var(--ink-soft); font-weight: 800; font-size: .78rem;
}
.pwa-ios-steps i { color: var(--primary); font-size: 1.1rem; flex-shrink: 0; }
/* §32 — .wk-modal dzieli z-index (--z-header:100) z resztą modali, ale update-snackbar
   (.saved-undo, --z-toast:120) jest WYŻEJ — gdyby oba pojawiły się naraz, snackbar
   przebijałby się przez dolną część tego modala. Podnosimy tylko TĘ instancję (id, nie
   zmieniamy współdzielonego --z-header/.wk-modal — inne modale zostają bez zmian). */
#pwaIosModal { z-index: 130; }

/* ── Pasek udostępniania (brandowany, desktop + mobile) ── */
.share { margin-top: 1.1rem; }
.share__title { display: flex; align-items: center; gap: .4rem; margin: 0 0 .6rem; font-size: .82rem; font-weight: 700; color: var(--ink-muted); }
.share__list { display: flex; flex-wrap: wrap; gap: .5rem; }
.share__btn {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: .55rem 1rem;
  border: 1px solid var(--border); border-radius: var(--r-full);
  background: var(--card-low); color: var(--ink);
  font: inherit; font-weight: 700; font-size: .87rem; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, translate .1s;
}
.share__btn i { font-size: 1.1rem; }
.share__btn:hover { translate: 0 -1px; }
.share__btn:active { translate: 0 0; }
.share__btn--fb   { color: #1877f2; }
.share__btn--fb:hover   { background: #1877f2; border-color: #1877f2; color: #fff; }
.share__btn--wa   { color: #1faf54; }
.share__btn--wa:hover   { background: #25d366; border-color: #25d366; color: #fff; }
.share__btn--msg  { color: #9a3cf5; }
.share__btn--msg:hover  { background: #a033ff; border-color: #a033ff; color: #fff; }
.share__btn--mail:hover { background: var(--ink); border-color: var(--ink); color: var(--card-low); }
.share__btn--copy:hover { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
@media (max-width: 400px) {
  .share__list { gap: .4rem; }
  .share__btn { flex: 1 1 calc(50% - .4rem); justify-content: center; padding: .55rem .6rem; }
}

/* Ujednolicony kolor tekstu i ikon „Podziel się": jasny = ciemny popiel,
   ciemny/wieczorny = biały. Nadpisuje kolory marek (FB/WA/Messenger). */
.share { --share-ink: #3f4652; --share-ink-contrast: #ffffff; }
[data-theme="dark"] .share { --share-ink: #ffffff; --share-ink-contrast: #0c111d; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .share { --share-ink: #ffffff; --share-ink-contrast: #0c111d; }
}
.share__title,
.share__btn,
.share__btn--fb,
.share__btn--wa,
.share__btn--msg,
.share__btn--mail,
.share__btn--copy { color: var(--share-ink); }
.share__btn:hover,
.share__btn--fb:hover,
.share__btn--wa:hover,
.share__btn--msg:hover,
.share__btn--mail:hover,
.share__btn--copy:hover {
  background: var(--share-ink);
  border-color: var(--share-ink);
  color: var(--share-ink-contrast);
}

/* ── Menu „Udostępnij" na kartach wydarzeń (przycisk + rozwijane menu) ── */
.ev-share { position: absolute; top: .5rem; right: .5rem; z-index: 4; }
.ev-share__btn {
  list-style: none; cursor: pointer;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--card) 82%, transparent);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  color: var(--ink); font-size: .9rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  transition: background-color .15s, color .15s, transform .1s;
}
.ev-share__btn::-webkit-details-marker { display: none; }
.ev-share__btn:hover { transform: translateY(-1px); }
.ev-share[open] .ev-share__btn { background: var(--primary); color: var(--on-primary); }
.ev-share__menu {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 300; min-width: 194px;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: 0 14px 34px rgba(10, 16, 32, .24);
  padding: .3rem; display: flex; flex-direction: column; gap: .05rem;
}
.ev-share__item {
  display: flex; align-items: center; gap: .55rem;
  padding: .5rem .6rem; border-radius: 8px;
  font: inherit; font-weight: 600; font-size: .85rem; line-height: 1.2;
  color: var(--ink); background: transparent; border: 0; cursor: pointer;
  text-decoration: none; text-align: left; width: 100%;
}
.ev-share__item i { width: 1.15rem; font-size: 1.05rem; text-align: center; flex-shrink: 0; color: var(--ink-soft); }
.ev-share__item:hover { background: var(--card-low); }
.ev-share__item.is-fb i  { color: #1877f2; }
.ev-share__item.is-wa i  { color: #25d366; }
.ev-share__item.is-msg i { color: #a033ff; }
/* Karty z menu udostępniania: flaga „Dzisiaj!"/„Odwołane" na dół plakatu, by zwolnić prawy górny róg */
.event-card--share .event-card__flag { top: auto; bottom: .6rem; left: .65rem; right: auto; }
/* Gdy jest też „Zapisz" (własne wydarzenia): udostępnianie w rogu, zapis obok po lewej */
.event-card--share .ev-save { right: 2.9rem; }

/* Toast */
.wk-toast {
  /* Nad dolnym paskiem / action barem + safe-area (fix 1.16B.4 — nie zasłania akcji). */
  position: fixed; left: 50%;
  bottom: calc(var(--tabbar-h) + 1rem + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(1rem);
  z-index: var(--z-toast); max-width: min(92vw, 420px); padding: .7rem 1.1rem;
  /* Theme-aware: czytelny w obu motywach (poprzednio --surface nie istniał → biały tekst na białym). */
  background: var(--card); color: var(--ink);
  border: 1px solid var(--border);
  border-radius: var(--r-full); font-size: .86rem; font-weight: 600; text-align: center;
  box-shadow: var(--shadow-2);
  opacity: 0; transition: opacity .2s, transform .2s; pointer-events: none;
  will-change: transform, opacity;
}
.wk-toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.wk-toast.is-err { border-color: var(--danger); color: var(--danger); }
@media (prefers-reduced-motion: reduce) {
  .wk-toast { transition: opacity .2s; transform: translateX(-50%); }
  .wk-toast.is-show { transform: translateX(-50%); }
}

/* Feedback dotknięcia (scale-feedback): karty/kafle/chipy reagują na wciśnięcie.
   transform-only (kompozytor); `translate:` hoveru to osobna właściwość — składają się.
   Celowo bez własnych transition — nie nadpisujemy istniejących (hover) reguł. */
.event-card:active, .firm-card:active, .wk-card:active, .tile:active, .hero-next:active { transform: scale(.985); }
.fchip:active, .hero-chip:active, .wk-tab:active, .wk-nav__item:active { transform: scale(.96); }
@media (prefers-reduced-motion: reduce) {
  .event-card:active, .firm-card:active, .wk-card:active, .tile:active, .hero-next:active,
  .fchip:active, .hero-chip:active, .wk-tab:active, .wk-nav__item:active { transform: none; }
}

/* Wejście kart „na scroll" — stagger. JS dodaje .reveal-init tylko elementom
   POZA ekranem (te w widoku pokazują się od razu, bez migotania). Bez JS,
   przy braku IntersectionObserver lub reduced-motion — karty są widoczne. */
.reveal-init { opacity: 0; transform: translateY(14px); }
.reveal-init.reveal-in {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-init, .reveal-init.reveal-in { opacity: 1; transform: none; transition: none; }
}

/* Pływający przycisk (tylko mobile) */
.wk-fab { display: none; }

/* ── Responsywność ── */
@media (max-width: 900px) {
  .wk-layout { grid-template-columns: 1fr; }
  .wk-side { position: static; flex-direction: row; flex-wrap: wrap; gap: .6rem; }
  .wk-side .wk-panel { flex: 1; min-width: 12rem; }
  .wk-panel { padding: .3rem .5rem; }
  .wk-panel__title { cursor: pointer; pointer-events: auto; }   /* na mobile panele się zwijają */
  .wk-panel__title::after { content: "\F282"; font-family: "bootstrap-icons"; margin-left: auto; font-size: .8rem; transition: transform .15s; }
  .wk-panel[open] .wk-panel__title::after { transform: rotate(180deg); }
}
@media (max-width: 640px) {
  .wk-side { flex-direction: column; }
  /* Karta: jedna kolumna, akcje na dole z separatorem */
  .wk-card { grid-template-columns: 1fr; gap: .5rem; }
  .wk-react { min-width: 0; padding: .4rem .8rem; }
  .wk-card__actions { flex-direction: row; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: .5rem; margin-top: .2rem; }
  .wk-fab {
    display: grid; place-items: center; position: fixed; right: 1rem; bottom: 4.75rem; z-index: var(--z-actionbar);
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--primary); color: var(--on-primary, #fff); font-size: 1.4rem;
    box-shadow: 0 8px 24px rgba(26,86,219,.35); text-decoration: none;
  }
}

/* Dark: pomarańcz „Nagłośnij" czytelny na ciemnym */
[data-theme="dark"] .wk-react--boost { --rc: #fdba74; --rbg: #3a2410; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .wk-react--boost { --rc: #fdba74; --rbg: #3a2410; }
}

/* ── 18. Mobilne filtry — wspólny bottom sheet (wydarzenia / katalog / wykopki) ── */
/* Zasada: na mobile chowamy ciężki .wk-side i przenosimy go do panelu od dołu.
   Szybkie filtry (.wk-feed__bar) zostają widoczne. Wszystko sterowane JS-em,
   desktop i logika filtrów (linki GET) bez zmian. */
.mfilter-btn { display: none; }
.mfilter-chips { display: none; }

@media (max-width: 768px) {
  .wk-layout > .wk-side { display: none; }        /* panele kat/gmina — schowane, żyją w sheecie */

  .mfilter-btn {
    display: inline-flex; align-items: center; gap: .45rem;
    min-height: 44px; padding: 0 .95rem; border-radius: 10px;   /* touch target ≥44px (§15/§30) */
    border: 1px solid var(--border); background: var(--bg);
    color: var(--ink); font: inherit; font-weight: 700; font-size: .85rem; cursor: pointer; flex-shrink: 0;
  }
  .mfilter-btn__badge {
    background: var(--primary); color: #fff; border-radius: 999px;
    min-width: 1.25rem; height: 1.25rem; padding: 0 .3rem;
    display: inline-grid; place-items: center; font-size: .7rem; font-weight: 800;
  }
  .mfilter-chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: .5rem 0 .25rem; }
  .mfilter-chip {
    display: inline-flex; align-items: center; gap: .15rem;
    height: 32px; padding: 0 .25rem 0 .7rem; border-radius: 999px;
    background: var(--bg); border: 1px solid var(--border); font-size: .8rem; color: var(--ink);
  }
  .mfilter-chip button { border: 0; background: none; cursor: pointer; font-size: 1.05rem; line-height: 1; color: var(--ink-muted); padding: .1rem .35rem; border-radius: 999px; }
  .mfilter-chip button:hover { color: var(--ink); }
  .mfilter-chips__clear { font-size: .78rem; color: var(--primary); text-decoration: underline; background: none; border: 0; cursor: pointer; padding: .2rem .3rem; }
}

/* Bottom sheet + backdrop (renderowane przez JS, sterowane klasą na <html>) */
.mfilter-backdrop { position: fixed; inset: 0; background: rgba(10, 16, 32, .5); z-index: 1000; opacity: 0; transition: opacity .2s ease; }
.mfilter-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001;
  background: var(--card); color: var(--ink);
  border-radius: 16px 16px 0 0; max-height: 88vh; display: flex; flex-direction: column;
  transform: translateY(101%); transition: transform .28s cubic-bezier(.22, .61, .36, 1);
  box-shadow: 0 -8px 30px rgba(10, 16, 32, .22);
}
.mfilter-on .mfilter-backdrop { opacity: 1; }
.mfilter-on .mfilter-sheet { transform: translateY(0); }
.mfilter-sheet__head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.15rem .6rem; }
.mfilter-sheet__title { font-weight: 800; font-size: 1.05rem; }
.mfilter-sheet__x { border: 0; background: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--ink-muted); padding: .1rem .4rem; }
.mfilter-sheet__body { overflow-y: auto; -webkit-overflow-scrolling: touch; padding: .25rem 1.15rem 1rem; }
.mfilter-sheet__body .wk-side { display: block; }
.mfilter-sheet__body .wk-panel { margin-bottom: .75rem; }
.mfilter-sheet__foot { position: sticky; bottom: 0; display: flex; gap: .6rem; padding: .75rem 1.15rem; padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--card); }
.mfilter-sheet__foot .btn { flex: 1; min-height: 44px; justify-content: center; }
.mfilter-sheet__foot .mfilter-clear { flex: 0 0 auto; }
html.mfilter-lock, html.mfilter-lock body { overflow: hidden; }
@media (min-width: 769px) { .mfilter-backdrop, .mfilter-sheet { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .mfilter-sheet { transition: none; } }

/* ── 19. APP-HOME (mobilny homepage app-first, Etap 1.1) ── */
.apphome { display: none; }
@media (max-width: 768px) {
  .apphome { display: block; padding: .9rem 1rem 0; }
  /* na mobile chowamy tekstową część hero (powitanie/tytuł/search) — apphome ją zastępuje.
     Zostaje karta pogody (hero__rail). */
  .hero__main { display: none; }
  .hero__ridge { display: none; }
  /* §11 (1.15B) — na mobile hero bez własnego panelu/poświaty: jednolite tło strony (--bg)
     od pogody aż do stopki. Karta pogody zachowuje własne tło/obramowanie. Desktop bez zmian. */
  .hero,
  :root:not([data-theme="light"]) .hero,
  [data-theme="dark"] .hero { background: var(--bg); }
  /* Pogoda = początek części pomocniczej: świadomie większy odstęp nad sekcją niż między
     zwykłymi sekcjami (~26px). Zmiana TYLKO odstępu przed, bez ruszania paddingu/karty (1.16B.2 §19/§20). */
  .hero { padding: .5rem 1rem 1.25rem; margin-top: 2.25rem; }
  .hero__weather { background: var(--card); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .footer-ridge { display: none; }   /* bez fali między treścią a stopką (jednolite tło) */
  .site-footer { margin-top: 1.5rem; }

  .apphome__hello { font-size: .8rem; color: var(--ink-muted); margin: 0 0 .15rem; }
  .apphome__q { font-size: 1.5rem; line-height: 1.2; font-weight: 800; margin: 0 0 .75rem; letter-spacing: -.01em; }

  .apphome__search form { display: flex; align-items: center; gap: .5rem; background: var(--card); border: 1.5px solid var(--border); border-radius: 14px; padding: .35rem .35rem .35rem .85rem; }
  .apphome__search .bi-search { color: var(--ink-muted); font-size: 1.05rem; }
  .apphome__search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 1rem; color: var(--ink); padding: .55rem 0; outline: none; }
  .apphome__search .btn { min-height: 40px; }

  .apphome__actions { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .85rem 0 0; }
  .apphome__act { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; min-height: 76px; padding: .7rem; border-radius: 14px; background: var(--card); border: 1px solid var(--border); color: var(--ink); font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; text-decoration: none; text-align: center; }
  .apphome__act i { font-size: 1.5rem; color: var(--primary); }
  .apphome__act:active { transform: scale(.985); }

  .apphome__near { margin-top: .7rem; padding: .75rem; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; }
  .apphome__near-title { font-size: .82rem; font-weight: 700; margin: 0 0 .5rem; color: var(--ink-muted); }
  .apphome__near-chips { display: flex; flex-wrap: wrap; gap: .4rem; }

  /* §3 (1.15B) — spójny rytm pionowy: ~26px między dużymi sekcjami, ~12px nagłówek→treść */
  .apphome-sec { margin-top: 1.6rem; }
  .apphome-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
  .apphome-sec__head h2 { font-size: 1.12rem; font-weight: 800; margin: 0; }
  /* Szybkie filtry pod nagłówkiem wydarzeń (Dzisiaj/Weekend) — secondary chipy (1.16B.2 §6/§9) */
  .apphome-sec__quick { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .85rem; }
  .apphome-sec__quick .fchip { min-height: 44px; }
  .apphome-sec__more { font-size: .82rem; font-weight: 700; color: var(--primary); white-space: nowrap; }
  /* Konkretne CTA pod treścią sekcji (1.16B.1) — spokojny secondary row, nie primary button. */
  .apphome-sec__cta {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    margin-top: .85rem; min-height: 46px; padding: .6rem 1rem;
    border: 1px solid var(--border); border-radius: var(--r-md);
    background: var(--card); color: var(--ink);
    font-weight: 600; font-size: .92rem; text-decoration: none;
  }
  .apphome-sec__cta i { color: var(--ink-soft); flex: none; font-size: 1rem; }
  .apphome-sec__cta:hover { border-color: var(--primary); }
  .apphome-sec__cta:active { transform: scale(.99); }
  .apphome-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
  .apphome-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
  .apphome-chips .fchip { min-height: 40px; }

  .apphome-empty { padding: 1.1rem; background: var(--bg); border: 1px dashed var(--border); border-radius: 12px; text-align: center; }
  .apphome-empty p { margin: 0 0 .6rem; color: var(--ink-muted); font-size: .9rem; }
  .apphome-empty__cta { display: flex; gap: .5rem; justify-content: center; }

  .apphome-discover { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
  .apphome-discover a, .apphome-discover button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem; min-height: 72px; padding: .6rem .3rem; border-radius: 12px; background: var(--card); border: 1px solid var(--border); color: var(--ink); font: inherit; font-weight: 600; font-size: .8rem; text-decoration: none; text-align: center; cursor: pointer; }
  .apphome-discover i { font-size: 1.35rem; color: var(--primary); }
}
@media (min-width: 769px) { .apphome { display: none !important; } }

/* ── 20. Karta firmy — sticky action bar (mobile-only, Etap 1.2) ── */

/* Etap 1.2 — kompaktowy nagłówek mobilny karty firmy (nazwa + kategoria·gmina + status).
   Zapewnia §2/§3: pierwszy ekran = kto to jest i czy otwarte. Desktop: ukryty. */
.firm-mtop { display: none; }
@media (max-width: 768px) {
  .firm-mtop {
    display: block;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: .85rem 1rem;
    margin-bottom: .85rem;
  }
  .firm-mtop__name {
    font-size: 1.3rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--ink);
    margin: 0;
  }
  .firm-mtop__name .firm-verified { color: var(--primary); font-size: .95em; }
  .firm-mtop__meta {
    font-size: .9rem;
    color: var(--ink-muted);
    margin: .2rem 0 0;
  }
  .firm-mtop__status {
    margin: .5rem 0 0;
    font-size: .92rem;
  }
}

/* ─────────────────────────────────────────────────────────────────
   Etap 1.4 — Globalne wyszukiwanie (search.php)
   ───────────────────────────────────────────────────────────────── */
.search { max-width: var(--wrap); margin-inline: auto; }
.search-hero { margin-bottom: 1.25rem; }

/* Duże pole — najważniejszy element ekranu (§3) */
.search-box {
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: .45rem .45rem .45rem .9rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
}
.search-box:focus-within { border-color: var(--primary); }
.search-box__icon { font-size: 1.15rem; color: var(--ink-muted); flex: none; }
.search-box__input {
  flex: 1; min-width: 0;
  border: 0; background: none; outline: none;
  font: inherit; font-size: 1.05rem; color: var(--ink);
  padding: .55rem 0;
}
.search-box__clear {
  flex: none; display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  color: var(--ink-muted); text-decoration: none;
}
.search-box__clear:hover { background: var(--bg); color: var(--ink); }
.search-box__submit { flex: none; }

/* Autocomplete */
.search-suggest {
  position: absolute; left: 0; right: 0; top: calc(100% + .35rem);
  z-index: 30; margin: 0; padding: .3rem; list-style: none;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: 0 12px 32px rgba(0, 0, 0, .16);
  max-height: 60vh; overflow-y: auto;
}
.search-suggest__item {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .7rem; border-radius: 10px; cursor: pointer;
}
.search-suggest__item > i { color: var(--ink-muted); font-size: 1rem; flex: none; }
.search-suggest__item.is-active,
.search-suggest__item:hover { background: var(--bg); }
.search-suggest__txt { display: flex; flex-direction: column; min-width: 0; }
.search-suggest__label { font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-suggest__sub { font-size: .8rem; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Empty state / bloki */
.search-block__title { font-size: 1rem; font-weight: 800; margin: 0 0 .6rem; }
.search-block__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .6rem; }
.search-block__head .search-block__title { margin: 0; }
.search-empty > section { margin-bottom: 1.6rem; }

.search-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.search-chip {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem .85rem; border-radius: var(--r-full);
  background: var(--card); border: 1px solid var(--border);
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: .9rem;
}
.search-chip:hover { border-color: var(--primary); color: var(--primary); }
.search-chip i { color: var(--ink-muted); }
.search-chip:hover i { color: var(--primary); }

.search-quick { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.search-quick a {
  display: flex; align-items: center; gap: .55rem;
  padding: .85rem 1rem; border-radius: var(--r-lg);
  background: var(--card); border: 1px solid var(--border);
  color: var(--ink); text-decoration: none; font-weight: 700;
}
.search-quick a:hover { border-color: var(--primary); }
.search-quick i { font-size: 1.1rem; color: var(--primary); }

.search-recent__clear { background: none; border: 0; color: var(--ink-muted); font: inherit; font-size: .85rem; cursor: pointer; text-decoration: underline; }
.search-recent__clear:hover { color: var(--ink); }

/* Wyniki */
.search-summary { color: var(--ink-muted); margin: 0 0 .8rem; }
.search-scope { font-size: .9rem; margin: 0 0 .8rem; color: var(--ink-muted); }
.search-scope i { color: var(--primary); }
.search-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.4rem; }
.search-filters .fchip span { opacity: .7; font-weight: 600; margin-left: .15rem; }
.search-group { margin-bottom: 1.8rem; }
.search-count { color: var(--ink-muted); font-weight: 600; font-size: .9rem; }
.search-grid { margin-bottom: .8rem; }
.search-fix { margin: 0 0 1rem; font-size: .9rem; color: var(--ink-muted); }

.search-zero { text-align: center; padding: 1.5rem 1rem 2rem; }
.search-zero__title { font-size: 1.25rem; margin: 0 0 .6rem; }
.search-zero__fix { font-size: 1rem; margin: 0 0 .8rem; }
.search-zero .search-quick { max-width: 420px; margin: 1.2rem auto 0; }

@media (max-width: 480px) {
  .search-box__submit .visually-hidden ~ *, .search-box__submit { padding-inline: .8rem; }
  .search-quick { grid-template-columns: 1fr; }
}

/* ─────────────────────────────────────────────────────────────────
   Etap 1.5 — „Blisko mnie" (blisko.php)
   ───────────────────────────────────────────────────────────────── */
.nearby__h1 { font-size: clamp(1.4rem, 1.1rem + 1.6vw, 2rem); margin: 0 0 1rem; }

.nearby-intro {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 1.1rem 1.2rem; margin-bottom: 1.2rem;
}
.nearby-intro__lead { margin: 0 0 1rem; color: var(--ink-muted); }
.nearby-intro__cta { display: flex; flex-wrap: wrap; gap: .6rem; }

.nearby-status {
  margin: 0 0 1rem; padding: .7rem .9rem; border-radius: var(--r-lg);
  background: var(--bg); border: 1px solid var(--border); color: var(--ink-muted);
}

.nearby-controls { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.4rem; }
.nearby-radius, .nearby-types { display: flex; flex-wrap: wrap; gap: .45rem; }
/* atrybut hidden musi wygrywać z display:flex powyżej */
.nearby-controls[hidden], .nearby-radius[hidden], .nearby-intro[hidden] { display: none; }
.fchip.nearby-radius__btn { cursor: pointer; }

/* Badge odległości — nad kartą, bez nachodzenia na logo/plakat/zakładkę */
.nearby-item { position: relative; }
.nearby-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  margin: 0 0 .4rem; padding: .2rem .6rem;
  border-radius: var(--r-full); font-weight: 800; font-size: .8rem;
  background: color-mix(in srgb, var(--primary) 14%, var(--card));
  color: var(--primary); border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
}
.nearby-badge i { font-size: .85rem; }

.nearby-manual { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--border); }

/* ─────────────────────────────────────────────────────────────────
   Etap 1.6 — „Zapisane" (zapisane.php)
   ───────────────────────────────────────────────────────────────── */
.saved-group { margin-bottom: 1.8rem; }
.saved-item { position: relative; }
.saved-section-empty { color: var(--ink-muted); }
.saved-section-empty a { color: var(--primary); }

/* Ujednolicony przycisk „usuń z zapisanych" (chowa wewnętrzną zakładkę eventCard/diggCard —
   na Zapisanych zapis toggle jest zbędny, działa tylko „Usuń"; Zgłoś problem też poza zakresem). */
.page-saved .saved-item .ev-save,
.page-saved .saved-item .wk-save,
.page-saved .saved-item .wk-action--report { display: none; }
/* Zakładki Zapisanych: divider pod tabami + oddech (§45) */
.saved-tabs { border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
/* 320px: 3 zakładki mieszczą się w jednym rzędzie bez scrolla — węższy padding, ikony off ≤360 (§20). */
@media (max-width: 400px) { .saved-tabs .wk-tab { padding-inline: .55rem; gap: .3rem; } }
@media (max-width: 360px) { .saved-tabs .wk-tab > i { display: none; } }
.saved-remove,
.saved-share {
  position: absolute; top: .5rem; right: .5rem; z-index: 4;
  display: grid; place-items: center; width: 44px; height: 44px;   /* touch target ≥44px (etap 1.18 §13) */
  border: 0; border-radius: 50%; cursor: pointer; font-size: 1rem;
  background: color-mix(in srgb, var(--card) 88%, transparent);
  color: var(--ink); box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.saved-remove:hover { color: #fff; background: var(--danger, #d33); }
/* „Udostępnij" obok „Usuń", w jednym rzędzie (etap 1.18 §3) — nigdy pod/na nim. */
.saved-share { right: 3.75rem; }
.saved-share:hover, .saved-share:focus-visible { color: var(--on-primary, #fff); background: var(--primary); }
/* Wydarzenia mają już własne menu „Udostępnij" (eventCard → share-menu.php) — dosuwamy je
   obok „Usuń" zamiast pozwolić im nachodzić na siebie w tym samym rogu karty (był bug: oba
   .saved-remove i .ev-share stały na top:.5rem;right:.5rem, więc się zasłaniały). */
.page-saved .saved-item .ev-share { right: 3.75rem; }
.page-saved .saved-item .ev-share__btn { width: 44px; height: 44px; font-size: 1rem; }
/* Wykopki: diggCard() pełny (nie compact) ujawnia wbudowane „Udostępnij" w kolumnie akcji —
   rezerwujemy miejsce na pływające „Usuń" w rogu karty, by się nie nakładały (siatka desktop/tablet;
   na mobile akcje i tak schodzą do osobnego rzędu pod treścią, patrz .wk-card__actions row-bp). */
.page-saved .saved-item--digg .wk-card__actions { padding-top: 2.75rem; }

/* Badge statusu wydarzenia — nad kartą, bez nachodzenia na datę/zakładkę */
.saved-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  margin: 0 0 .4rem; padding: .2rem .6rem;
  border-radius: var(--r-full); font-weight: 800; font-size: .78rem;
  background: var(--bg); color: var(--ink-muted); border: 1px solid var(--border);
}
.saved-badge--cancel { color: #fff; background: var(--danger, #d33); border-color: transparent; }

/* Pasek „Cofnij" po usunięciu */
.saved-undo {
  /* Nad dolnym paskiem nawigacji (fix 1.16B.4 §8) + theme-aware jak wk-toast (spójność). */
  position: fixed; left: 50%;
  bottom: calc(var(--tabbar-h) + 1rem + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 200%); z-index: var(--z-toast);
  display: flex; align-items: center; gap: 1rem;
  padding: .7rem 1rem; border-radius: var(--r-full);
  background: var(--card); color: var(--ink); border: 1px solid var(--border);
  box-shadow: var(--shadow-2);
  transition: transform .2s ease;
  /* width:max-content (nie auto — fix Etap 2.1): przy left:50%+transform:translate(-50%,…) i
     width:auto, przeglądarka liczy dostępną szerokość TYLKO w prawo od punktu left:50% (połowa
     ekranu), więc dla treści dłuższej niż „Cofnij" (np. „Nowa wersja jest dostępna") pasek łamał
     tekst pionowo zamiast rozciągnąć się do naturalnej szerokości. max-content = licz od treści. */
  width: max-content; max-width: min(92vw, 420px);
}
.saved-undo.is-on { transform: translate(-50%, 0); }
.saved-undo button { background: none; border: 0; color: var(--primary); font: inherit; font-weight: 800; cursor: pointer; }

/* Licznik w menu Więcej */
.drawer__count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.4em; padding: 0 .4em; margin-left: .35rem;
  border-radius: var(--r-full); background: var(--primary); color: var(--on-primary);
  font-size: .78rem; font-weight: 800;
}

@media (max-width: 768px) { body.page-saved .tab-bar { } }

/* ─────────────────────────────────────────────────────────────────
   Etap 1.7 — „Otwarte teraz" (otwarte-teraz.php)
   ───────────────────────────────────────────────────────────────── */
.otwarte__sub { color: var(--ink-muted); margin: -.4rem 0 1rem; }
.otwarte__geo { margin-bottom: 1rem; }
.otwarte__geo .is-active { border-color: var(--primary); color: var(--primary); }
.otwarte-cats { margin-bottom: .6rem; }
.otwarte-gminy { margin-bottom: 1.4rem; }
.otwarte-cats .search-chip span { opacity: .6; font-weight: 700; margin-left: .1rem; }

/* Autorytatywny status (respektuje wyjątki) — wewnętrzny pill karty chowamy, by nie było sprzeczności (§2) */
.page-otwarte .firm-card .godz-pill { display: none; }
.otw-item { position: relative; }
.otw-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  margin: 0 0 .4rem; padding: .22rem .65rem;
  border-radius: var(--r-full); font-weight: 800; font-size: .8rem;
  background: color-mix(in srgb, var(--ok, #2e9e5b) 16%, var(--card));
  color: var(--ok, #2e9e5b); border: 1px solid color-mix(in srgb, var(--ok, #2e9e5b) 32%, transparent);
}
.otw-badge i { font-size: .85rem; }
.otw-badge--soon {
  background: color-mix(in srgb, #d98a00 16%, var(--card));
  color: #d98a00; border-color: color-mix(in srgb, #d98a00 34%, transparent);
}

/* ─────────────────────────────────────────────────────────────────
   Etap 1.8 — Nawigacja mobilna: header back/menu na detalach + scroll-lock
   ───────────────────────────────────────────────────────────────── */
/* Przyciski nagłówka „Wróć" i „Więcej" — tylko mobile, tylko na kartach detali
   (gdzie dolny pasek jest ukryty). Desktop i zwykłe strony ich nie pokazują. */
.nav-back, .nav-menu { display: none; }

/* 1.16B.3 — globalne akcje mobilnego headera: Search + Zapisane (desktop: FB + motyw). */
.nav-search, .nav-saved { display: none; }
.nav-saved { position: relative; }
.nav-saved__full { display: none; }
.nav-saved.is-active .nav-saved__empty { display: none; }
.nav-saved.is-active .nav-saved__full { display: inline-block; color: var(--primary); }
/* mała kropka „masz zapisane" — dyskretna, bez licznika */
.nav-saved.is-active::after {
  content: ""; position: absolute; top: 7px; right: 7px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary); border: 2px solid var(--card);
}

@media (max-width: 768px) {
  .nav-search, .nav-saved { display: inline-flex; }
  /* FB i motyw znikają z mobilnego headera (FB → footer/drawer, motyw → drawer). */
  .nav-fb, .site-header__actions .js-theme-toggle { display: none; }

  body.page-firma .nav-back, body.page-event .nav-back,
  body.page-firma .nav-menu, body.page-event .nav-menu { display: inline-flex; }
  /* Na detalach chowamy logo, by zmieścić Back + Search + Zapisane + Menu na 320px (§39). */
  body.page-firma .brand, body.page-event .brand { display: none; }
  /* „Wróć" jako pierwszy element nagłówka. */
  body.page-firma .nav-back, body.page-event .nav-back { order: -1; margin-right: .1rem; }
}

/* Blokada scrolla tła przy otwartej szufladzie (§25) */
html.drawer-open { overflow: hidden; }

/* ─────────────────────────────────────────────────────────────────
   Etap 1.9 — „Odkrywaj" (turystyka.php)
   ───────────────────────────────────────────────────────────────── */
/* 6 kafli intencji — 2×3 na mobile, duże touch targety (§4) */
.discover-tiles { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.discover-tile {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .4rem;
  min-height: 88px; padding: .8rem .4rem; text-align: center;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg);
  color: var(--ink); text-decoration: none; font-weight: 700; font-size: .85rem;
}
.discover-tile i { font-size: 1.4rem; color: var(--primary); }
.discover-tile:hover { border-color: var(--primary); }
.discover-tile.is-active { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, var(--card)); }
@media (max-width: 380px) { .discover-tiles { gap: .45rem; } .discover-tile { font-size: .78rem; min-height: 82px; } }

.discover-scope { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.4rem; }

/* Kuratorskie atrakcje */
.discover-atr { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.discover-atr__item { display: flex; gap: .8rem; padding: .85rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--r-lg); }
.discover-atr__ico { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--bg); color: var(--primary); font-size: 1.2rem; }
.discover-atr__body { display: flex; flex-direction: column; min-width: 0; }
.discover-atr__name { font-weight: 800; color: var(--ink); }
.discover-atr__meta { font-size: .82rem; color: var(--ink-muted); margin: .1rem 0; }
.discover-atr__meta i { color: var(--primary); }
.discover-atr__desc { font-size: .88rem; color: var(--ink-muted); }

.discover .map-box { margin-top: .8rem; height: 340px; border-radius: var(--r-lg); overflow: hidden; }

/* ─────────────────────────────────────────────────────────────────
   Etap 1.10 — Lista wydarzeń: skróty + cieplejszy empty state
   ───────────────────────────────────────────────────────────────── */
.ev-shortcuts { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0 0 1rem; }
.ev-shortcuts .ev-clear { margin-left: auto; }
@media (max-width: 480px) { .ev-shortcuts .ev-clear { margin-left: 0; } }

.wk-empty__title { font-size: 1.2rem; margin: .4rem 0 .3rem; }
.wk-empty__cta { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .8rem; }

/* ─────────────────────────────────────────────────────────────────
   Etap 1.11 — Katalog: hint do globalnego Search
   ───────────────────────────────────────────────────────────────── */
.kat-search-hint { font-size: .85rem; color: var(--ink-muted); margin: 0 0 1rem; }
.kat-search-hint i { color: var(--primary); }
.kat-search-hint a { color: var(--primary); font-weight: 700; text-decoration: none; white-space: nowrap; }
.kat-search-hint a:hover { text-decoration: underline; }

/* ─────────────────────────────────────────────────────────────────
   Etap 1.12 — Homepage: kontekstowe „Zapisane" + pasek otwartych firm
   ───────────────────────────────────────────────────────────────── */
/* .apphome-saved__* usunięte (1.16B.3 fix) — blok „Zapisane" zdjęty z homepage; dostęp w headerze */
.apphome-open { margin-bottom: .8rem; }

/* ─────────────────────────────────────────────────────────────────
   Etap 1.13 — Utility klasy zamiast inline-style (CSP-safe)
   ───────────────────────────────────────────────────────────────── */
.is-hidden { display: none !important; }          /* toggle pól formularzy (dawniej style.display) */
.price-old { opacity: .6; }                        /* przekreślona cena w kuponie */

/* Opóźnienie reveal per porcja — dawniej inline transitionDelay (§27) */
.reveal-d0 { transition-delay: 0ms; }
.reveal-d1 { transition-delay: 45ms; }
.reveal-d2 { transition-delay: 90ms; }
.reveal-d3 { transition-delay: 135ms; }
.reveal-d4 { transition-delay: 180ms; }
.reveal-d5 { transition-delay: 225ms; }
.reveal-d6 { transition-delay: 270ms; }
@media (prefers-reduced-motion: reduce) {
  .reveal-d0, .reveal-d1, .reveal-d2, .reveal-d3, .reveal-d4, .reveal-d5, .reveal-d6 { transition-delay: 0ms; }
}

/* Kropka jakości powietrza — poziom jako klasa (dawniej inline backgroundColor) */
.weather__air-dot--l1 { background: #2ecc71; }
.weather__air-dot--l2 { background: #a3d94a; }
.weather__air-dot--l3 { background: #f1c40f; }
.weather__air-dot--l4 { background: #e67e22; }
.weather__air-dot--l5 { background: #e74c3c; }
.weather__air-dot--l6 { background: #8e44ad; }

/* ─────────────────────────────────────────────────────────────────
   Etap 1.15A — krótszy mobilny Start: chowamy pełne feedy (desktop je pokazuje)
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .home-desktop-only { display: none; }
}
/* (1.15B) — usunięto .apphome-biz__link: duplikat CTA „Dodaj firmę" (jedyne CTA to footer-cta) */

/* §8 — na Starcie plakaty wydarzeń nie mogą dominować: ograniczona wysokość, aspect zachowany */
@media (max-width: 768px) {
  .apphome-cards .event-card__media { max-height: 150px; }
  .apphome-cards .event-card__media img { width: 100%; height: 100%; object-fit: cover; }
}

/* Stopka (1.17A): kolumny linków ZAWSZE widoczne. Usunięto accordion <details>/<summary>,
   który w części przeglądarek chował linki (zamknięty <details> + override display bywał
   ignorowany) — footer musi niezawodnie pokazywać nawigację w każdej przeglądarce/viewport. */
@media (max-width: 768px) {
  .footer-grid { gap: 1.5rem 1rem; padding-block: 1.75rem; }
  .footer-brand { margin-bottom: .25rem; }
  .footer-col__title { margin-bottom: .5rem; }
}

/* ── 1.16 QA — powiększenie wybranych touch-targetów do ≥44px (bez zmiany wizualnej wagi) ── */
/* Sort w katalogu/listach — kontrola formularza była 34px wysoka */
.filters__sort select { min-height: 44px; }
/* Clear w globalnym polu wyszukiwania — było 34×34, izolowane w wysokim polu */
.search-box__clear { width: 40px; height: 40px; }