/* Crazy Cart Gdańsk — arkusz stylów (multi-page, bez build step)
   Paleta 1:1 ze stylem sprzed redesignu (czarne tło, żywy pomarańcz, kwasowa zieleń)
   Mobile-first: BAZA = telefon → @media (min-width: 640px) = tablet → @media (min-width: 1024px) = komputer */

/* ===== 1. TOKENY ===== */
:root {
  --ink: #F2F1EC;
  --muted: #B9BDC4;
  --txt: var(--ink);
  --soft: var(--muted);
  --bg: #0B0C0E;
  --bg-2: #101215;
  --panel: #16181C;
  --line: rgba(255, 255, 255, .09);
  --line-2: rgba(255, 255, 255, .16);
  --accent: #FF7A1A;
  --accent-dark: #E05F00;
  --accent-2: #FFA057;
  --accent-text: #FF7A1A;
  --accent-text-dark: #FFA057;
  --accent-soft: rgba(255, 122, 26, .13);
  --acid: #9BE324;
  --acid-soft: rgba(155, 227, 36, .13);
  --acid-line: rgba(155, 227, 36, .5);
  --red: #E5484D;
  --red-soft: rgba(229, 72, 77, .14);
  --dark: #0B0C0E;
  --dark-2: #16181C;
  --dark-line: rgba(255, 255, 255, .09);
  --ok: #0f7b4f;
  --txt-on-accent: #0B0C0E;
  --radius: 10px;
  --disp: 'Archivo Black', system-ui, sans-serif;
  --body: 'IBM Plex Sans', system-ui, -apple-system, "Segoe UI", sans-serif;
  /* font-size tokeny (skala) */
  --fs-2xs: 12px;
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-md: 15px;
  --fs-lg: 16px;
  --fs-xl: 18px;
  --fs-2xl: 20px;
  --fs-3xl: 22px;
  --fs-4xl: 24px;
  --fs-5xl: 32px;
  --fs-6xl: 36px;
  --fs-7xl: 40px;
  /* responsive */
  --fs-h1: clamp(41px, 6vw, 85px);
  --fs-h2: clamp(31px, 3.6vw, 47px);
  --fs-display: clamp(52px, 9vw, 118px);
  --fs-resp-xl: clamp(24px, 8vw, 40px);
  --fs-resp-md: clamp(15px, 1.8vw, 20px);
  --fs-resp-sm: clamp(12px, 1.6vw, 20px);
  --fs-cqw: max(9px, 1.0cqw);
  /* line-height tokeny (skala - wariant B: konsolidacja) */
  --lh-tight: 1.0;
  --lh-snug: 1.4;
  --lh-body: 1.6;
  --lh-copy: 1.65;

  --emoji: 'Noto Color Emoji', 'Apple Color Emoji', 'Segoe UI Emoji', sans-serif;
  --shadow: 0 2px 6px rgba(0, 0, 0, .35), 0 18px 44px -18px rgba(0, 0, 0, .7);
  --container: 1120px;
  /* realna wysokość sticky-nagłówka; nadpisywana przez site.js (--header-h) */
  --header-h: 109px;
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

.emoji {
  font-family: var(--emoji);
  font-style: normal;
  font-weight: normal;
  font-size: 1em;
  line-height: var(--lh-tight);
  display: inline-block;
  vertical-align: -0.12em;
}

/* ===== 2. BAZA / TELEFON (< 640px) ===== */
* { box-sizing: border-box; }
/* Atrybut hidden zawsze ukrywa — musi wygrywać z regułami display ustawionymi przez klasy (.field, badge, itd.) */
[hidden] { display: none !important; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
#terminy { scroll-margin-top: 110px; }


body {
  margin: 0;
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--fs-lg);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Szum jak w pierwotnym layoucie — subtelne ziarno na całej stronie */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: var(--noise);
  pointer-events: none;
  z-index: 9998;
  opacity: .6;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-text); }
a:hover { color: var(--accent-text-dark); }

.container { width: min(var(--container), 100% - 40px); margin-inline: auto; }

h1, h2, h3 {
  font-family: "Archivo Black", "IBM Plex Sans", sans-serif;
  line-height: var(--lh-tight);
  margin: 0 0 .4em;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-4xl); }
p { margin: 0 0 1em; }

section { padding: clamp(48px, 7vw, 88px) 0; }
.section-alt { background: var(--bg-2); }

.kicker {
  display: inline-block;
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent-text);
  margin-bottom: 12px;
}

.lead { font-size: var(--fs-xl); color: var(--muted); max-width: 65ch; line-height: var(--lh-copy); }

/* ===== Header (jak pierwotny #nav: ciemne, przezroczyste, blur) ===== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 12, 14, .82);
  border-bottom: 1px solid var(--dark-line);
  backdrop-filter: blur(10px);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 76px;
  flex-wrap: wrap;
  padding: 10px 0;
}
@media (min-width: 1024px) {
  .site-header .container { width: min(1320px, 100% - 24px); }
}
.logo { flex-shrink: 0; }
.logo img { height: 88px; width: auto; }
.main-nav { display: flex; flex-wrap: wrap; gap: 4px 6px; flex: 1; min-width: 0; }
.main-nav a { font-size: var(--fs-md); padding: 8px 8px; }
.nav-badge { margin-left: auto; flex-shrink: 0; white-space: nowrap; }

.main-nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  font-size: var(--fs-md);
  padding: 13px 6px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  border-radius: 0;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] { color: var(--accent); border-bottom-color: var(--accent); }

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 48px;
  padding: 12px 18px;
  border-radius: var(--radius);
  font-weight: 700;
  font-size: var(--fs-md);
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;
}
.btn:active { transform: translateY(2px); }
.btn-primary { background: var(--accent); color: #0B0C0E; box-shadow: 0 10px 26px -8px rgba(224,95,0,.85); }
.btn-primary:hover { background: var(--accent-2); color: #0B0C0E; transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--txt); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-2); transform: translateY(-2px); }
.btn-outline { border-color: var(--ink); color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #0B0C0E; }

.btn:focus-visible,
a.card:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* a.card — cała karta jako link (bez pustego overlayu) */
a.card {
  color: inherit;
  text-decoration: none;
}

.hero {
  position: relative;
  min-height: calc(100svh - var(--header-h));
  display: flex;
  align-items: center;
  padding: 16px 0 24px;
  overflow: hidden;
  color: #f5f5f4;
}
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(100deg, rgba(11,12,14,.9) 20%, rgba(11,12,14,.55) 60%, rgba(11,12,14,.3));
}
.hero-bg video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center calc(50% - 189px);
  filter: brightness(1.0) contrast(1.15);
}
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(720px 420px at 82% 18%, rgba(255,122,26,.16), transparent 65%);
}
.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-2);
  text-shadow: 0 1px 4px rgba(0,0,0,.85);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 2px;
  background: var(--accent);
}
.hero h1 { color: #fff; font-size: clamp(32px, 3vw, 44px); line-height: var(--lh-tight); text-shadow: 0 2px 10px rgba(0,0,0,.85), 0 10px 40px rgba(0,0,0,.6); }
.hero h1 em { font-style: normal; color: var(--accent); display: inline-block; transform: skewX(-6deg); }
.hero .lead { color: var(--soft); font-size: var(--fs-xl); line-height: var(--lh-snug); text-shadow: 0 1px 5px rgba(0,0,0,.9); max-width: 520px; }
.hero .lead b { color: var(--txt); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }
.hero .hero-actions { margin-top: 20px; }

/* Szachownica (checkers) — cienki pasek dekoracyjny */
.checkers {
  height: 12px;
  background: repeating-conic-gradient(#e8e6df 0% 25%, #101010 0% 50%);
  background-size: 24px 24px;
  opacity: .5;
}

/* Badge otwarte/zamknięte — jak pierwotny .open-pill (kwasowa zieleń) */
.badge-open, .badge-closed {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-md);
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 30px;
  margin-bottom: 18px;
  border: 1.5px solid transparent;
}
.badge-open { background: var(--acid-soft); border-color: var(--acid-line); color: #F2F1EC; }
.badge-closed { background: rgba(229, 72, 77, .14); border-color: rgba(229, 72, 77, .5); color: #F2F1EC; }
.badge-open::before, .badge-closed::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: currentColor;
}
.badge-open::before { background: var(--acid); }
.badge-closed::before { background: var(--red); }

/* Pulse animations for badges (matching track-status) */
.badge-open { animation: statusPulseFree 2.4s ease-out infinite; }
.badge-closed { animation: statusPulseBusy 2s ease-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .badge-open,
  .badge-closed { animation: none; }
}

/* Badge w górnym pasku */
.nav-badge {
  margin-left: auto;
  margin-top: 4px;
  margin-bottom: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Badge w headerze: wyrównanie pionowe do sąsiadów (nav + PL/EN).
   Zakres ≥1280, bo tam badge stoi w jednoliniowym pasku razem z nav i PL/EN
   (w 640-1279 jest ukryty, a ≤639 układ się zawija - inne sąsiedztwo).
   Selektor po atrybucie [data-open-badge], bo JS po renderze nadpisuje className
   (site.js: badge.className = 'badge-open'|'badge-closed'), przez co klasa .nav-badge znika,
   a .badge-open wnosi margin-bottom:18px wypychające badge o 9px do góry. */
@media (min-width: 1280px) {
  .header-inner [data-open-badge] {
    margin-bottom: 0;
  }
}

/* Przełącznik językowy */
.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: calc(88px * 324 / 1461);
  flex-shrink: 0;
}

.lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 40px;
  padding: 0 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  transition: all .2s ease;
  cursor: pointer;
}

.lang-btn:hover {
  background: var(--accent);
  color: var(--txt-on-accent);
  border-color: var(--accent);
}

.lang-btn.active {
  background: var(--accent);
  color: var(--txt-on-accent);
  border-color: var(--accent);
}

.lang-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ===== Nav toggle (mobile) ===== */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent;
  border: none;
  cursor: pointer;
}
.nav-toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .2s ease, opacity .2s ease;
}
@media (max-width: 1023px) {
  .nav-toggle { display: flex; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ===== Scroll to top ===== */
.scroll-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--panel);
  border: 2px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity .25s ease, visibility .25s ease, transform .25s ease;
  z-index: 60;
}
.scroll-top:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
.scroll-top:hover { background: var(--accent); color: #0B0C0E; }
.scroll-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* ===== Cards ===== */
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 24px; }

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  min-height: 290px;
  position: relative;
}
.card:hover { transform: translateY(-5px); border-color: rgba(255,122,26,.55); box-shadow: var(--shadow); }
.card img, .card video {
  max-width: 1086px;
  height: 541px;
  width: 100%;
  object-fit: cover;
  border-radius: 16px;
  margin-bottom: 10px;
  display: block;
}
/* Sekcja "Oferta" na stronach głównych (PL + EN): img/video o 10% niższe (541 → 487px).
   Zakres celowo węższy niż globalne .card img/video — nie dotyka kart na innych podstronach. */
.oferta .card img,
.oferta .card video { height: 487px; }
.gokarty-photos .card img { height: 487px; }
.card h3 { font-size: var(--fs-4xl); margin: 10px 0 0; text-transform: none; }

/* ===== Price table ===== */
.price-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.price-table th, .price-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
.price-table thead th {
  background: var(--dark);
  color: #fff;
  font-size: var(--fs-md);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.price-table tbody tr:last-child td { border-bottom: 0; }
.price-table .price { font-family: var(--disp); font-size: var(--fs-7xl); font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums; line-height: var(--lh-tight); white-space: nowrap; }
@media (max-width: 639px) {
  .price-table .price { font-size: var(--fs-resp-xl); }
}

/* ===== Package cards (urodziny) ===== */
.pak-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .pak-grid { grid-template-columns: 1fr; }
}
.pak {
  position: relative;
  background: var(--bg);
  border: 1.5px solid var(--line);
  border-radius: 16px;
  padding: 24px;
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  display: flex;
  flex-direction: column;
}
.pak:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.pak.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255, 122, 26, 0.22), var(--shadow);
}
.pak .flag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) skewX(-6deg);
  background: var(--accent);
  color: #0B0C0E;
  font-family: var(--disp);
  font-size: var(--fs-2xs);
  letter-spacing: .12em;
  padding: 5px 12px;
  border-radius: 6px;
  white-space: nowrap;
}
.pak h3 {
  font-size: var(--fs-3xl);
  margin-top: 4px;
}
.pak .price {
  font-family: var(--disp);
  font-size: var(--fs-6xl);
  color: var(--accent);
  margin: 12px 0 4px;
  font-variant-numeric: tabular-nums;
}
.pak .price small {
  font-size: var(--fs-lg);
  color: var(--soft);
  font-family: var(--body);
  font-weight: 600;
}
.pak .time {
  display: inline-block;
  margin: 8px 0 16px;
  background: var(--acid-soft);
  color: var(--acid);
  border: 1px solid rgba(155, 227, 36, 0.35);
  font-size: var(--fs-sm);
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 20px;
  letter-spacing: .06em;
}
.pak ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
  flex: 1;
}
.pak li {
  font-size: var(--fs-md);
  color: var(--soft);
  line-height: var(--lh-snug);
  display: flex;
  align-items: center;
  gap: 8px;
}
.pak .pick {
  margin-top: auto;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--txt);
  border-radius: 10px;
  padding: 12px 16px;
  font-weight: 700;
  font-size: var(--fs-md);
  min-height: 44px;
  transition: all 180ms ease;
  width: 100%;
}
.pak .pick:hover {
  border-color: var(--accent);
  background: rgba(255, 122, 26, 0.1);
  color: var(--accent);
}
.pak.selected .pick {
  background: var(--accent);
  border-color: var(--accent);
  color: #0B0C0E;
}

/* Addon cards toggle */
.addon-card {
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.addon-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}
.addon-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent);
}
.addon-toggle {
  transition: all 180ms ease;
}
.addon-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(255, 122, 26, 0.3);
}
.addon-card.selected .addon-toggle {
  background: var(--accent);
  border-color: var(--accent);
  color: #0B0C0E;
}
.addon-card.selected .addon-toggle::before {
  content: "✓ ";
}

/* Calculator bar */
.ccs {
  display: flex;
  align-items: center;
  gap: 22px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px 24px;
  flex-wrap: wrap;
}
.ccs small {
  display: block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--soft);
  font-weight: 700;
}
.ccs b {
  display: block;
  font-family: var(--disp);
  font-size: var(--fs-4xl);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}
#cc-choice {
  font-family: var(--emoji), var(--disp);
}
.ccs .btn {
  margin-left: auto;
}
.ccs .btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
}
#cc-hint {
  margin-top: 12px;
  text-align: right;
  font-size: var(--fs-sm);
  color: var(--soft);
}

/* Uro note */
.uro-note {
  margin-top: 24px;
  text-align: center;
  background: rgba(255, 122, 26, 0.13);
  border: 2px solid rgba(255, 122, 26, 0.5);
  border-radius: 14px;
  padding: 13px 24px;
  font-size: var(--fs-resp-sm);
  font-weight: 800;
  line-height: var(--lh-snug);
  color: var(--txt);
  white-space: normal;
}
.uro-note b { color: var(--accent); letter-spacing: 1px; }
@media (max-width: 480px) {
  .uro-note { white-space: normal; width: 100%; font-size: var(--fs-md); padding: 12px 16px; }
}

/* Animations */
@media (prefers-reduced-motion: no-preference) {
  @keyframes pkgPulse {
    0% { box-shadow: 0 0 0 0 rgba(255, 122, 26, 0.6); }
    70% { box-shadow: 0 0 0 8px rgba(255, 122, 26, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 122, 26, 0); }
  }
  .pak.pulse, .addon-card.pulse { animation: pkgPulse 300ms ease-out; }

  @keyframes fieldFlash {
    0% { box-shadow: 0 0 0 0 rgba(255, 122, 26, 0.6); border-color: var(--accent); }
    50% { box-shadow: 0 0 0 6px rgba(255, 122, 26, 0.2); border-color: var(--accent); }
    100% { box-shadow: 0 0 0 0 rgba(255, 122, 26, 0); border-color: var(--line); }
  }
  .field-flash { animation: fieldFlash 800ms ease-out; }
}

@media (prefers-reduced-motion: reduce) {
  .pak, .addon-card, .pak .pick, .addon-toggle { transition: none !important; }
  .pak.pulse, .addon-card.pulse { animation: none; }
  .field-flash { animation: none; }
}

/* ===== Info box ===== */
.info-box {
  background: var(--bg-2);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 22px 26px;
}
.info-box h3 { margin-top: 0; font-size: var(--fs-4xl); }

/* ===== FAQ ===== */
.faq-list { display: grid; gap: 12px; max-width: 820px; }
.faq-list details {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 20px;
  box-shadow: var(--shadow);
}
.faq-list summary {
  cursor: pointer;
  font-weight: 700;
  font-size: var(--fs-lg);
  padding: 14px 0;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; color: var(--accent-text); font-size: 1.4rem; font-weight: 700; }
.faq-list details[open] summary::after { content: "–"; }
.faq-list details p { margin: 0 0 16px; color: var(--muted); font-size: var(--fs-lg); line-height: var(--lh-copy); }

/* ===== Contact / form ===== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}

.nap dt {
  font-weight: 700;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-top: 16px;
}
.nap dd { margin: 4px 0 0; font-size: var(--fs-lg); }

.hours-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.hours-table td { padding: 7px 0; border-bottom: 1px dashed var(--line); }
.hours-table td:last-child { text-align: right; font-weight: 600; }
.hours-table tr:last-child td { border-bottom: 0; }

.form-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(22px, 4vw, 36px);
  box-shadow: var(--shadow);
}

.form-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { display: block; font-weight: 700; font-size: var(--fs-md); letter-spacing: .1em; text-transform: uppercase; }
.field label .opt { color: var(--muted); font-weight: 400; }

.field input, .field select, .field textarea {
  font: inherit;
  color: var(--ink);
  background: var(--panel);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  min-height: 48px;
  width: 100%;
  transition: border-color .15s ease;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}
.field.err input, .field.err select, .field.err textarea { border-color: #dc2626; }

.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form-note { font-size: var(--fs-md); color: var(--muted); margin-top: 14px; }

.form-msg {
  display: none;
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: var(--fs-lg);
}
.form-msg.show { display: block; }
.form-msg.ok { background: var(--acid-soft); color: var(--acid); border: 1px solid var(--acid-line); }
.form-msg.err { background: var(--red-soft); color: var(--red); border: 1px solid var(--red); }

/* Wolne terminy (alternatywy przy konflikcie 409) */
.alt-panel {
  background: var(--accent-soft);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.alt-title {
  margin: 0 0 10px;
  font-weight: 700;
  font-size: var(--fs-md);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-text);
}
.alt-list { display: flex; flex-wrap: wrap; gap: 10px; }
.alt-list button {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  color: var(--ink);
  background: var(--panel);
  border: 1.5px solid var(--line-2);
  border-radius: 8px;
  padding: 10px 14px;
  min-height: 44px;
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.alt-list button:hover { border-color: var(--accent); color: var(--accent-2); transform: translateY(-2px); }
.alt-list button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ===== CTA band ===== */
.cta-band {
  background: var(--dark);
  color: #fff;
  text-align: center;
  padding: 80px 0;
}
.cta-band h2 { color: #fff; font-size: var(--fs-h2); }
.cta-band .lead { color: #d6d3d1; margin-inline: auto; font-size: var(--fs-xl); max-width: 520px; }
.cta-band .hero-actions { justify-content: center; gap: 14px; }

/* ===== Page hero (inner pages) ===== */
.page-hero {
  background:
    radial-gradient(900px 360px at 90% -20%, rgba(255, 122, 26, .32), transparent 60%),
    var(--dark);
  color: #f5f5f4;
  display: flex;
  align-items: center;
  min-height: calc(100svh - var(--header-h));
  padding: 32px 0;
}
.page-hero h1,
.page-hero h2 { color: #fff; margin-bottom: .3em; font-size: var(--fs-h2); }
.page-hero .lead { color: #d6d3d1; font-size: var(--fs-xl); max-width: 520px; }
.page-hero .kicker { font-size: var(--fs-md); }
.birthday-hero-copy { transform: translateY(-15px); }
.school-trip-hero-image { object-position: center 46%; }
@media (max-width: 1023px) {
  .school-trip-hero-image { object-position: 40% center; }
}
/* dzis-hero to sekcja statusu „Dziś na torze” (widget), nie baner — NIE rozciągamy
   jej na pełny ekran. min-height 477px (zamiast pełnego ekranu), ale pozwalamy
   urosnąć do wysokości treści (bez przelewania się jak wcześniej przy height:477px).
   To nadpisuje pełnoekranową regułę .page-hero (wyższa specyficzność). */
.page-hero.dzis-hero { min-height: 477px; }

@media (max-width: 1023px) {
  .hero,
  .page-hero {
    height: auto;
    min-height: calc(100svh - var(--header-h));
  }
  .hero { padding: 5px 0 90px; }
  .page-hero { padding: 44px 0; }
}

/* ===== Steps ===== */
.steps { counter-reset: step; display: grid; gap: 18px; grid-template-columns: 1fr; }
.steps > * { min-width: 0; }
.step {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 30px;
  box-shadow: var(--shadow);
}
.step::before {
  counter-increment: step;
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 11px;
  background: var(--accent);
  color: #0B0C0E;
  font-weight: 700;
  font-size: var(--fs-4xl);
  margin-bottom: 16px;
}
.step h3 { font-size: var(--fs-4xl); margin-bottom: .3em; overflow-wrap: break-word; }
.step p { color: var(--muted); font-size: var(--fs-lg); line-height: var(--lh-body); margin: 0; overflow-wrap: break-word; }

/* ===== Two-col text+image ===== */
.split {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 4vw, 40px);
  align-items: start;
}
.pricing-intro { align-self: start; }
.split > * { min-width: 0; }
.split figure { margin: 0; min-width: 0; }
.split .gk-media { border-radius: 16px; box-shadow: var(--shadow); overflow: hidden; aspect-ratio: 1086/1448; width: 100%; height: auto; }
.split img { border-radius: 0; box-shadow: none; margin-bottom: 0; width: 100%; height: 100%; object-fit: cover; }

.check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.check-list li { padding-left: 30px; position: relative; font-size: var(--fs-lg); line-height: var(--lh-body); }
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-text);
  font-weight: 700;
  font-size: var(--fs-lg);
}

/* ===== Footer ===== */
.site-footer {
  background: var(--dark-2);
  color: #a8a29e;
  padding: 56px 0 32px;
  font-size: var(--fs-lg);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  margin-bottom: 36px;
}
.site-footer h3 { color: #fff; font-family: var(--disp); font-size: var(--fs-md); font-weight: 700; text-transform: uppercase; letter-spacing: .16em; }
.site-footer a { color: #e7e5e4; text-decoration: none; font-size: var(--fs-lg); line-height: var(--lh-copy); }
.site-footer a:hover { color: var(--accent-2); }
.footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer-legal {
  border-top: 1px solid var(--dark-line);
  padding-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-size: var(--fs-md);
}

/* ===== TABLET/COMPACT (640–1279px): ukryj badge, żeby nawigacja mieściła się w jednej linii =====
   Selektor po atrybucie [data-open-badge], bo JS po renderze nadpisuje className
   (site.js: badge.className = 'badge-open'|'badge-closed'), przez co klasa .nav-badge znika. */
@media (min-width: 640px) and (max-width: 1279px) {
  [data-open-badge] { display: none; }
}

/* ===== WĄSKI DESKTOP (1280–1297px): zmniejsz odstęp między guzikami menu =====
   Pełna etykieta "Wycieczki szkolne" + badge otwarcia ("Czas na drift! - Otwarte do 21:00")
   przekraczają szerokość kontenera (deficyt ~17,5px @1280), przez co menu łamie się do 2 linii.
   Redukcja column-gap 6→2px odzyskuje 5×4 = 20px. Reszta szerokości bez zmian. */
@media (min-width: 1280px) and (max-width: 1297px) {
  .header-inner .main-nav { column-gap: 2px; }
}

/* ===== 3. MOBILE (≤ 639px): logo + burger, badge pod spodem, PL/EN w menu ===== */
@media (max-width: 639px) {
  .header-inner { flex-wrap: wrap; gap: 6px; padding: 8px 0; }
  .logo { order: 0; }
  .nav-toggle { order: 1; margin-left: auto; }

  .header-inner [data-open-badge] {
    order: 2; flex: 0 0 100%; width: 100%;
    margin: 0 0 4px; padding: 8px 14px;
    justify-content: center; text-align: center; white-space: normal;
    text-decoration: none; cursor: pointer;
  }

  .main-nav { order: 3; flex: 0 0 100%; width: 100%; min-width: 0;
              display: none; padding: 12px 0 8px; gap: 8px; }
  .main-nav a { font-size: var(--fs-md); padding: 12px 16px; text-align: left; min-height: 48px; }

  body[data-nav-open="true"] .main-nav {
    display: flex; flex-direction: column; flex-wrap: nowrap;
    max-height: calc(100vh - 205px);
    max-height: calc(100dvh - 205px);
    overflow-y: auto; overscroll-behavior: contain;
  }

  .lang-switcher { order: 4; flex: 0 0 100%; display: none;
                   margin: 0; padding: 0 0 12px; gap: 8px; }
  body[data-nav-open="true"] .lang-switcher { display: inline-flex; }

  #dzis { scroll-margin-top: 150px; }
}

/* ===== 3b. TABLET (640–1023px): badge ukryty, PL/EN w pasku ===== */
@media (min-width: 640px) and (max-width: 1023px) {
  .header-inner [data-open-badge] { display: none !important; }
}

/* Desktop: badge zostaje nieinteraktywny */
@media (min-width: 640px) {
  .header-inner [data-open-badge] { pointer-events: none; }
}

/* ===== 4. KOMPUTER (≥ 1024px) ===== */
@media (min-width: 1024px) {
  .hero-grid { grid-template-columns: 1.25fr .75fr; }
  .contact-grid { grid-template-columns: .9fr 1.1fr; }
  .split { grid-template-columns: 1.2fr 0.8fr; align-items: center; }
  .grid-3, .steps { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
}

/* ===== 5. KALKULATOR WYCIECZKI SZKOLNEJ ===== */
.wyc-grid { display: grid; gap: 18px; margin-top: 28px; }
.wyc-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(20px, 3vw, 28px);
  box-shadow: var(--shadow);
}
.wyc-fields { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 760px) { .wyc-fields { grid-template-columns: 1fr 1fr; } }

.wyc-field > .wyc-label {
  display: block;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  color: var(--soft);
  margin-bottom: 10px;
}

.wyc-pills { display: flex; flex-wrap: wrap; gap: 10px; }
.wyc-pill {
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  border: 1.5px solid var(--line);
  background: transparent;
  color: var(--txt);
  border-radius: 10px;
  padding: 9px 14px;
  min-height: 48px;
  min-width: 74px;
  text-align: center;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.wyc-pill:hover { border-color: var(--accent); }
.wyc-pill.is-on { background: var(--accent); border-color: var(--accent); color: #0B0C0E; }
.wyc-pill small { display: block; font-weight: 600; font-size: var(--fs-2xs); color: var(--soft); margin-top: 2px; }
.wyc-pill.is-on small { color: rgba(11,12,14,.72); }
.wyc-pill:disabled { opacity: .5; cursor: not-allowed; }

.wyc-step { display: inline-flex; align-items: stretch; border: 1.5px solid var(--line); border-radius: 10px; overflow: hidden; }
.wyc-step button {
  font: inherit;
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  width: 48px;
  border: 0;
  background: var(--bg-2);
  color: var(--txt);
  cursor: pointer;
  transition: color .15s ease;
}
.wyc-step button:hover { color: var(--accent); }
.wyc-step input {
  width: 72px;
  text-align: center;
  font: inherit;
  font-size: var(--fs-xl);
  font-weight: 700;
  border: 0;
  background: var(--panel);
  color: var(--txt);
  min-height: 48px;
}
.wyc-step input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.wyc-step input::-webkit-outer-spin-button,
.wyc-step input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.wyc-step input[type=number] { -moz-appearance: textfield; appearance: textfield; }

.wyc-opts { display: grid; gap: 12px; }
.wyc-opt { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: var(--fs-md); line-height: var(--lh-snug); }
.wyc-opt input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); flex-shrink: 0; }
.wyc-opt b { color: var(--accent-text); }

.wyc-note { font-size: var(--fs-sm); line-height: var(--lh-body); color: var(--soft); margin: 0; }
.wyc-note b { color: var(--txt); }

@keyframes statusPulseBusy {
  0% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .55); }
  70% { box-shadow: 0 0 0 12px rgba(229, 72, 77, 0); }
  100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, 0); }
}
@keyframes statusPulseFree {
  0% { box-shadow: 0 0 0 0 rgba(155, 227, 36, .5); }
  70% { box-shadow: 0 0 0 12px rgba(155, 227, 36, 0); }
  100% { box-shadow: 0 0 0 0 rgba(155, 227, 36, 0); }
}
/* ===== 6b. PASEK DOSTĘPNOŚCI „NA ŻYWO" (mockup 1:1) =====
   Komponent proporcjonalny: .tl-stage ma stały aspect-ratio, a wszystkie
   pozycje są w % — dzięki temu wygląda 1:1 przy każdej szerokości. */
.tl-live { margin-top: 40px; }
.tl-stage {
  position: relative;
  width: 100%;
  max-width: 1100px;
  aspect-ratio: 1919 / 390;
  container-type: inline-size;
}
.tl-casing {
  position: absolute; left: 6.670%; top: 52.308%; width: 85.461%; height: 23.590%;
  border-radius: 999px;
  background: linear-gradient(180deg, #7a7e82 0, #44484c 9%, #191d21 26%, #0d1114 52%, #0d1114 100%);
  box-shadow: 0 18px 34px rgba(0, 0, 0, .85);
}
.tl-bar {
  position: absolute; left: 7.608%; top: 57.436%; width: 83.585%; height: 15.641%;
  border-radius: 999px; overflow: hidden; z-index: 1;
  background: linear-gradient(180deg, #4a6110 0%, #eefcb6 10%, #96d417 20%, #86cf16 50%, #3a8110 58%, #377d10 100%);
}
.tl-bar::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, transparent 68%, rgba(0, 0, 0, .12) 100%);
}
.tl-seg { position: absolute; top: 0; height: 100%; }
.tl-seg-busy {
  background: linear-gradient(180deg, #4b1119 0%, #fb4e5e 13%, #fa284b 26%, #f52143 40%, #f82246 52%, #ba0223 64%, #b30222 78%, #97001c 92%, #8a0019 100%);
  box-shadow: 0 0 26px rgba(255, 150, 160, .55);
}
.tl-monster {
  position: absolute; top: 1.538%; width: 20.427%; height: 60.0%; z-index: 3;
  transition: left .9s linear;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45));
}
.tl-monster.noanim { transition: none; }
.tl-axis {
  position: absolute; left: 7.608%; top: 79.487%; width: 83.585%; height: 17.436%; z-index: 2;
}
.tl-axis .tl-tick {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: var(--fs-cqw); font-weight: 600; color: var(--soft); white-space: nowrap;
}
.tl-axis .tl-tick::before {
  content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: .5em;
  background: var(--line-2); transform: translateX(-50%);
}
.tl-axis .tl-tick.is-first { transform: translateX(0); }
.tl-axis .tl-tick.is-first::before { left: 0; }
.tl-axis .tl-tick.is-last { transform: translateX(-100%); }
.tl-axis .tl-tick.is-last::before { left: 100%; }
.tl-legend {
  display: flex; flex-wrap: wrap; gap: 18px; margin-top: 18px;
  max-width: 1100px; font-size: var(--fs-sm); color: var(--soft);
}
.tl-legend span { display: inline-flex; align-items: center; gap: 8px; }
.tl-legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.tl-legend .lg-free { background: #6fae12; }
.tl-legend .lg-busy { background: #e01830; }
@media (prefers-reduced-motion: reduce) { .tl-monster { transition: none; } }

/* ===== 7. KALENDARZ URODZIN (miesiąc) ===== */
.bc { margin-top: 28px; max-width: 860px; margin-left: auto; margin-right: auto; }
.bc-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 18px; }
.bc-title { text-transform: capitalize; }
.bc-btn {
  width: 44px; height: 44px;
  border: 1px solid var(--line-2); border-radius: 12px;
  background: var(--panel); color: var(--txt);
  font-size: var(--fs-2xl); line-height: var(--lh-tight); cursor: pointer;
  transition: border-color .15s ease, transform .15s ease;
}
.bc-btn:hover:not(:disabled), .bc-btn:focus-visible { border-color: var(--accent); outline: 2px solid rgba(255, 122, 26, .35); }
.bc-btn:disabled { opacity: .35; cursor: default; }

.bc-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 7px;
}
.bc-dow {
  text-align: center;
  font-size: var(--fs-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--soft); padding: 2px 0 6px;
}
.bc-cell {
  position: relative;
  min-height: 62px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: 8px 4px 0;
  border-radius: 11px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--txt);
  font-size: var(--fs-md); font-weight: 700;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease;
}
.bc-cell:hover:not(:disabled), .bc-cell:focus-visible {
  border-color: var(--accent);
  outline: 2px solid rgba(255, 122, 26, .35);
  transform: translateY(-1px);
}
.bc-cell.bc-free { background: rgba(155, 227, 36, .07); border-color: rgba(155, 227, 36, .28); }
.bc-cell.bc-busy { background: rgba(229, 72, 77, .10); border-color: rgba(229, 72, 77, .50); }
.bc-cell.bc-muted { opacity: .4; cursor: default; }
.bc-cell.bc-muted:hover { border-color: var(--line); outline: none; transform: none; }
.bc-cell.bc-today { box-shadow: inset 0 0 0 2px var(--accent); }
.bc-cell.bc-selected { border-color: var(--accent); background: rgba(255, 122, 26, .16); box-shadow: inset 0 0 0 2px var(--accent); }
.bc-cell.bc-selected::after { content: "✓"; position: absolute; top: 4px; right: 6px; font-size: var(--fs-2xs); line-height: var(--lh-tight); color: var(--accent); }
.bc-detail-selected { margin: 0 0 8px; color: var(--accent); font-weight: 700; }
.bc-cell.bc-empty { background: transparent; border-color: transparent; cursor: default; }
.bc-cell.bc-empty:hover { border-color: transparent; outline: none; transform: none; }
.bc-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: var(--red);
  border-radius: 0 0 11px 11px;
}
.bc-loading { grid-column: 1 / -1; text-align: center; padding: 22px 8px; color: var(--soft); font-weight: 600; }

.bc-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; font-size: var(--fs-sm); color: var(--soft); }
.bc-legend span { display: inline-flex; align-items: center; gap: 8px; }
.bc-legend i { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.bc-legend .lg-free { background: rgba(155, 227, 36, .35); }
.bc-legend .lg-busy { background: rgba(229, 72, 77, .55); }
.bc-legend .lg-unknown { background: rgba(255, 255, 255, .12); }

.bc-detail {
  margin-top: 18px;
  padding: 20px 22px;
  border-radius: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  text-align: left;
}
.bc-detail-head { font-family: var(--disp); font-size: var(--fs-xl); margin: 0 0 10px; color: var(--txt); }
.bc-detail-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.bc-detail-list li { display: flex; align-items: center; gap: 10px; font-size: var(--fs-md); color: var(--txt); }
.bc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--red); flex-shrink: 0; }
.bc-detail-free { margin: 0 0 14px; font-size: var(--fs-sm); color: var(--soft); line-height: var(--lh-body); }

@media (max-width: 560px) {
  .bc-cell { min-height: 54px; padding-top: 6px; font-size: var(--fs-sm); }
  .bc-detail { padding: 16px; }
}

/* ===== 8. KALENDARZ W FORMULARZU KONTAKTOWYM ===== */
#f-date-wrap { position: relative; }
.date-picker { position: relative; width: 100%; }
.date-picker input[type="date"] {
  width: 100%;
  padding-right: 46px;
  appearance: none;
  -webkit-appearance: none;
}
.date-picker input[type="date"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}
.date-picker input.date-iso { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.date-picker input.date-display { width: 100%; padding-right: 46px; cursor: pointer; }
.date-toggle {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--txt);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  pointer-events: auto;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.date-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.date-toggle:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(255,122,26,.08);
}

.cc-popup {
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);
  width: min(340px, 100%);
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: 12px;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,.9), var(--shadow);
  padding: 12px;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 336px;
}
.cc-popup[hidden] { display: none !important; }
.cc-popup-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cc-nav {
  width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 10px;
  background: transparent; color: var(--txt); font-size: var(--fs-lg);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.cc-nav:hover { border-color: var(--accent); }
.cc-title { font-family: var(--disp); font-size: var(--fs-lg); color: var(--txt); }
.cc-dow {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  text-transform: uppercase; letter-spacing: .08em;
  font-size: var(--fs-2xs); font-weight: 700; color: var(--soft);
  text-align: center; padding-bottom: 6px;
}
.cc-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 46px;
  gap: 6px;
  min-height: calc(6 * 46px + 5 * 6px);
}
.cc-cell {
  position: relative;
  height: 100%;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--bg-2);
  color: var(--txt);
  font-size: var(--fs-md);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s ease, transform .1s ease;
}
.cc-cell.cc-empty {
  background: transparent;
  border-color: transparent;
  cursor: default;
  pointer-events: none;
}
.cc-cell:hover:not(.cc-disabled), .cc-cell:focus-visible {
  border-color: var(--accent); outline: 2px solid rgba(255, 122, 26, .35);
}
.cc-loading { grid-column: 1 / -1; padding: 28px 8px; text-align: center; color: var(--soft); }
.cc-cell.cc-disabled { opacity: .45; cursor: default; }
.cc-cell.cc-disabled:hover { border-color: var(--line); outline: none; transform: none; }
.cc-cell.cc-busy { background: rgba(229, 72, 77, .12); border-color: rgba(229, 72, 77, .55); }
.cc-cell.cc-today { box-shadow: inset 0 0 0 2px var(--accent); }
.cc-cell.cc-selected { border-color: var(--accent); background: rgba(255, 122, 26, .16); box-shadow: inset 0 0 0 2px var(--accent); }

/* ===== Promocja (strona /promocja/) =====
   Blur-fill: ostry plakat (object-fit: contain → nic nie ucięte) na rozmytym,
   przyciętym tle z TEJ SAMEJ grafiki, żeby nie było widocznych pasów bocznych.
   URL tła przekazujemy zmienną --promo-bg (inline w HTML), bo PL i EN używają
   innych plików. <img> nie może mieć ::before, więc plakat jest w wrapperze. */
.promo-hero {
  position: relative;
  overflow: hidden;
  display: block;
  background: var(--bg);
}
.promo-hero-img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}
@media (min-width: 1024px) {
  /* Ulotka ma wtopiony tekst (cena/daty) → contain, żeby nic nie uciąć;
     rozmyte tło (cover) wypełnia resztę szerokości zamiast czarnych pasów. */
  .promo-hero { height: calc(100svh - var(--header-h)); }
  .promo-hero::before {
    content: "";
    position: absolute;
    inset: -60px; /* overscan chowa miękkie krawędzie filtra blur */
    background-image: var(--promo-bg);
    background-size: cover;
    background-position: center;
    filter: blur(36px) saturate(1.15) brightness(.65);
    z-index: 0;
  }
  .promo-hero-img { width: 100%; height: 100%; object-fit: contain; }
}

/* Shimmer cen — wspólny efekt dla kafelków (np. "35 zł za osobę") */
.shimmer-text {
  background: linear-gradient(100deg, #fff 28%, var(--accent-2) 50%, #fff 72%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: promoShimmer 3.2s linear infinite;
}

@keyframes promoShimmer {
  to { background-position: -220% center; }
}

@media (prefers-reduced-motion: reduce) {
  .shimmer-text {
    animation: none;
    background: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
  }
}

.promo-copy h1 { color: #fff; }
.promo-copy .lead { color: #e7e5e4; font-size: var(--fs-xl); line-height: var(--lh-copy); max-width: 620px; margin-bottom: 8px; }

.promo-cmp-grid { grid-template-columns: repeat(2, 1fr); }
.promo-cmp-card { cursor: default; }
.promo-cmp .added { color: var(--accent-text); font-weight: 600; }
.promo-cmp .pak .price {
  background: linear-gradient(100deg, #fff 30%, var(--accent-2) 50%, #fff 70%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: promoShimmer 3.2s linear infinite;
}
.promo-cmp .pak .price small {
  -webkit-text-fill-color: var(--soft);
  color: var(--soft);
}
@media (max-width: 900px) {
  .promo-cmp-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes cmpRise {
    from { opacity: 0; transform: translateY(26px); }
    to { opacity: 1; transform: none; }
  }
  .promo-cmp-card { opacity: 0; }
  .promo-cmp.in .promo-cmp-card { animation: cmpRise 600ms cubic-bezier(.2,.7,.2,1) forwards; }
  .promo-cmp.in .promo-cmp-card:nth-child(2) { animation-delay: 140ms; }
}
@media (prefers-reduced-motion: reduce) {
  .promo-cmp-card { opacity: 1; }
  .promo-cmp .pak .price {
    animation: none;
    background: none;
    -webkit-text-fill-color: #fff;
    color: #fff;
  }
}

.promo-cmp .promo-cmp-premium .price {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: var(--accent);
  color: var(--accent);
  animation: none;
}

/* Promo page: "Promocja · pon–czw" flag styled like the site's .btn */
.promo-cmp .flag {
  transform: translateX(-50%);
  top: -14px;
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .02em;
  padding: 8px 16px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  border-radius: var(--radius);
  box-shadow: 0 10px 26px -8px rgba(224,95,0,.85);
  transition: background-color .15s ease, transform .15s ease;
}

/* Gokarty - extra attractions */
.gokarty-photos .card {
  position: relative;
}

.gokarty-photos .gk-media {
  position: relative;
  aspect-ratio: 1086 / 1448;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: var(--shadow);
  margin-bottom: 10px;
}

.gokarty-photos .gk-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.4s ease;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 0;
}

.gokarty-photos .card:hover .gk-media img {
  transform: scale(1.05);
}

.gokarty-photos .gk-tag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: var(--fs-xs);
  font-weight: 700;
  background: var(--accent-soft);
  color: var(--accent);
}

.gokarty-photos .gk-tag--accent {
  background: var(--acid-soft);
  color: var(--acid);
}

/* ===== FAQ filtry (chipy) ===== */
.faq-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.faq-filters [data-cat] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 999px;
  font-size: var(--fs-md);
  cursor: pointer;
  color: var(--muted);
}
.faq-filters [data-cat].active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}