/* ------------------------------------------------------------------
   Skórka portalu. Paleta wzorowana na serwisach branżowych:
   ciemny pasek nawigacji, koralowy akcent, żółty na ocenach.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   Skórka w duchu escapelandia.pl: głęboki granat, ciepły pomarańcz
   i złoto, nagłówki krojem szeryfowym. Ciemno jako stan domyślny —
   escape roomy sprzedaje nastrój, nie biel.
   ------------------------------------------------------------------ */

/*
 * Wartości poniżej to skórka Escapelandii i zarazem AWARYJNA — strona ma
 * wyglądać sensownie nawet wtedy, gdy blok zmiennych marki nie doszedł.
 * Prawdziwa skórka wjeżdża z lib/theme.php jako `<style>` PO tym arkuszu
 * (patrz views/layout.php) i te wartości nadpisuje.
 */
:root {
  --navy:    var(--bg-2, #061523);
  --navy-2:  var(--bg-3, #0b2134);
  --navy-3:  var(--bg-4, #102943);
  --ink:     #f9fbff;
  --cream:   #fff8eb;
  --orange:  #d8844e;
  --orange-2:#f5b35f;
  --gold:    #f4c977;
  --emerald: #20d19c;
  --aqua:    #5ecae0;

  --dark:        var(--navy);
  --dark-2:      var(--navy-2);
  --accent:      var(--orange);
  --accent-dark: #c1703c;
  --accent-soft: rgba(216,132,78,.14);
  --green:       var(--emerald);
  --green-dark:  #12a67b;
  --purple:      #8a6bd1;

  --bg:      var(--navy);
  --card:    var(--navy-2);
  --line:    rgba(255,255,255,.10);
  --line-2:  rgba(255,255,255,.18);
  --text:    var(--ink);
  --muted:   rgba(249,251,255,.62);

  --bg-2:    #061523;
  --soft:    rgba(255,255,255,.05);
  --soft-2:  rgba(255,255,255,.08);
  --soft-3:  rgba(255,255,255,.12);
  --star-off: rgba(255,255,255,.2);
  --accent-2:   var(--orange-2);
  --accent-ink: #1b1208;
  --bar:      rgba(6,21,35,.88);
  --bar-ink:  #ffffff;
  --foot:     rgba(6,21,35,.92);
  --foot-ink: #a8aeb8;
  --dust:     rgba(244,201,119,.16);
  --dust-2:   rgba(216,132,78,.18);
  --hero-img: url("/assets/castle.webp");
  --veil-0:  rgba(6,21,35,0);
  --veil-15: rgba(6,21,35,.15);
  --veil-35: rgba(6,21,35,.35);
  --veil-55: rgba(6,21,35,.55);
  --veil-75: rgba(6,21,35,.75);
  --veil-85: rgba(6,21,35,.85);

  --radius:    14px;
  --radius-sm: 9px;
  --radius-btn: 999px;
  --shadow:      0 12px 40px rgba(3,10,18,.45);
  --shadow-lift: 0 24px 70px rgba(3,10,18,.6);
  --ring:        0 0 0 3px rgba(216,132,78,.28);

  --ok: #20d19c;   --ok-bg:   rgba(32,209,156,.14);
  --warn: #f4c977; --warn-bg: rgba(244,201,119,.14);
  --bad: #ff9b92;  --bad-bg:  rgba(255,120,110,.14);
  --accent-text: var(--accent);
  --gold-text:   var(--gold);
  --info: #5ecae0; --info-bg: rgba(94,202,224,.14);

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

/* Dotyk (telefon): bez szarego prostokąta przy każdym stuknięciu przycisku
   („ramka od czasu do czasu" przy liczbie osób) i bez opóźnienia na podwójne
   stuknięcie. Obwódka fokusu tylko z klawiatury. */
a, button, label, summary, input, select, textarea, [role="button"] { -webkit-tap-highlight-color: transparent; }
a, button, label, summary, [role="button"] { touch-action: manipulation; }
:focus:not(:focus-visible) { outline: none; }

body::before {
  position: fixed; inset: 0; z-index: -1; content: ""; pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, var(--dust) 0 2px, transparent 4px),
    radial-gradient(circle at 62% 18%, var(--soft-3) 0 1px, transparent 4px),
    radial-gradient(circle at 86% 28%, var(--dust-2) 0 2px, transparent 5px),
    radial-gradient(circle at 12% 16%, var(--dust-2), transparent 20%),
    radial-gradient(circle at 84% 34%, var(--dust), transparent 24%);
}
html { -webkit-text-size-adjust: 100%; }
/**
 * Zamek jest przypięty do okna (`fixed`), a nie do strony — przy przewijaniu
 * stoi w miejscu i robi za scenografię, zamiast uciekać w górę. Gradient nad nim
 * wygasza obraz ku dołowi, żeby treść czytała się na jednolitym granacie.
 * Kropki w `body::before` to lekki pył — dodają głębi bez kolejnego obrazka.
 */
body {
  margin: 0; color: var(--text);
  background:
    linear-gradient(180deg, var(--veil-0) 0%, var(--veil-35) 38%, var(--bg) 78%),
    var(--hero-img) top center / min(1900px, 165vw) auto no-repeat fixed,
    var(--bg);
  font: 16px/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 {
  font-family: var(--font-display); font-weight: 700; line-height: 1.14;
  margin: 0 0 .5em; letter-spacing: -.01em;
}
h4, h5 { line-height: 1.2; margin: 0 0 .5em; font-weight: 600; }
h1 { font-size: 38px; }
h2 { font-size: 26px; }
h3 { font-size: 18px; }
p  { margin: 0 0 1em; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 18px; }
main { min-height: 60vh; padding-bottom: 60px; position: relative; }

/* ---------------------------------------------------------- nawigacja */

.topbar {
  background: var(--bar); backdrop-filter: saturate(170%) blur(14px);
  -webkit-backdrop-filter: saturate(170%) blur(14px);
  border-bottom: 1px solid var(--line);
  color: var(--bar-ink); position: sticky; top: 0; z-index: 60;
}
.topbar_in { display: flex; align-items: center; gap: 18px; height: 62px; }
.logo { display: flex; align-items: center; gap: 9px; font-weight: 800; letter-spacing: -.2px; }
.logo:hover { text-decoration: none; }
/* Znak graficzny marki jako NAPIS: idzie sam, bez nazwy tekstem obok.
   Wysokość stała, szerokość z proporcji — logo FunRoomu jest 2,3 razy szersze
   niż wysokie, Fun4Brain prawie sześć razy. `max-width` chroni pasek przed
   rozepchnięciem, gdyby ktoś wgrał znak o skrajnych proporcjach. */
.logo_wide { padding: 4px 0; }
.logo_img {
  height: 34px; width: auto; max-width: 190px;
  object-fit: contain; object-position: left center; display: block;
}
@media (max-width: 860px) { .logo_img { height: 30px; max-width: 150px; } }

/* Podkładka pod znak o tej samej jasności co pasek. Kolor bierzemy z tekstu
   marki „na odwrót": pod jasny znak wchodzi ciemne pole i odwrotnie. */
.logo_plate .logo_img, .logo_plate .logo_mark {
  background: var(--accent-ink);
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  box-sizing: content-box;
}
.logo_plate .logo_mark { padding: 3px; }

.logo_mark img { width: 100%; height: 100%; object-fit: contain; }
.logo_mark {
  width: 34px; height: 34px; border-radius: var(--radius-sm); overflow: hidden;
  background: linear-gradient(140deg, var(--accent-2), var(--accent));
  display: grid; place-items: center; font-size: 18px; color: var(--accent-ink);
  font-family: var(--font-display); font-weight: 800;
}
.logo_txt { font-size: 18px; font-family: var(--font-display); letter-spacing: -.01em; }
.mainnav { display: flex; align-items: center; gap: 4px; font-size: 15px; }
.mainnav > a, .drop > summary {
  padding: 8px 11px; border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; color: inherit;
}
.mainnav > a:hover, .drop > summary:hover { background: var(--soft-2); text-decoration: none; }
.drop { position: relative; }
.drop > summary { list-style: none; }
.drop > summary::-webkit-details-marker { display: none; }
.drop > summary::after { content: "▾"; margin-left: 6px; font-size: 11px; opacity: .7; }
.drop_menu {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 216px; background: var(--card);
  color: var(--text); border-radius: 12px; box-shadow: var(--shadow-lift); padding: 6px; z-index: 70;
  border: 1px solid var(--line-2);
}
.drop_right .drop_menu { left: auto; right: 0; }
.drop_menu a { display: block; padding: 9px 12px; border-radius: 7px; font-size: 15px; }
.drop_menu a:hover { background: var(--soft-2); text-decoration: none; }

.search { flex: 1; max-width: 380px; position: relative; display: flex; }
.search input {
  width: 100%; height: 40px; border: 1px solid var(--line); border-radius: 999px; padding: 0 40px 0 16px;
  background: var(--soft); color: inherit; font-size: 14px;
}
.search input::placeholder { color: var(--muted); }
.search input:focus { outline: 2px solid var(--accent); }
.search button {
  position: absolute; right: 4px; top: 4px; width: 30px; height: 30px; border: 0; border-radius: 7px;
  background: transparent; color: var(--muted); cursor: pointer; display: grid; place-items: center;
}
.search button:hover { background: var(--soft-2); color: var(--text); }

.topbar_right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.cartbtn { position: relative; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; }
.cartbtn:hover { background: var(--soft-2); }
.cartcnt {
  position: absolute; top: 1px; right: 0; min-width: 17px; height: 17px; padding: 0 4px;
  border-radius: 9px; background: var(--soft-3); color: var(--text); font-size: 11px; line-height: 17px; text-align: center;
}
.cartbtn.has .cartcnt { background: var(--accent); }

/* ------------------------------------------------------------ elementy */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: linear-gradient(140deg, var(--accent-2), var(--accent)); color: var(--accent-ink); border: 0; cursor: pointer;
  padding: 11px 20px; border-radius: var(--radius-btn); font-weight: 600; font-size: 15px;
  font-family: inherit; transition: background .15s, transform .12s, box-shadow .15s;
}
.btn:hover { filter: brightness(1.06); text-decoration: none; transform: translateY(-1px);
             box-shadow: 0 10px 26px -12px var(--accent); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 0; box-shadow: var(--ring); }
.btn_sm { padding: 7px 13px; font-size: 14px; }
.btn_ghost { background: var(--soft-2); border: 1px solid var(--line-2); color: var(--text); padding: 9px 16px; }
.btn_ghost:hover { background: var(--soft-3); }
.btn_alt { background: var(--soft); color: var(--text); border: 1px solid var(--line-2); }
.btn_alt:hover { background: var(--soft-3); box-shadow: none; filter: none; }
.btn_dark { background: var(--soft-3); color: var(--text); }
.btn_dark:hover { background: var(--soft-2); }
.btn[disabled], .btn:disabled { background: var(--soft-3); color: var(--muted); cursor: not-allowed; }

.tag {
  display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12.5px;
  background: var(--soft-2); color: var(--muted);
}
.tag_muted { background: var(--soft); color: var(--muted); }
.tag_green { background: var(--ok-bg); color: var(--ok); }
.tag_gold  { background: var(--warn-bg); color: var(--gold); }
.tag_red   { background: var(--bad-bg); color: var(--bad); }

/* Wybór scenariusza i dodatków przy rezerwacji. Kafelki, a nie lista rozwijana:
   wybór ma być widoczny bez klikania, bo przy dodatku wymaganym (skarpetki do
   Pixeluja) chowanie go za rozwijką znaczy „klient dowie się na miejscu". */
.wybor { margin: 12px 0; border-top: 1px solid var(--line); padding-top: 12px; }
.wybor_head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
.wybor_opt {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin-bottom: 6px;
  border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--soft);
  cursor: pointer;
}
.wybor_opt:hover { border-color: var(--accent); }
.wybor_opt:has(input:checked) { border-color: var(--accent); background: var(--soft-2); }
.wybor_off { opacity: .5; cursor: not-allowed; }
.wybor_body { display: grid; gap: 2px; }
.wybor_name { font-weight: 600; font-size: 15px; }
.wybor_desc { font-size: 13px; color: var(--muted); line-height: 1.4; }
.wybor_meta { font-size: 12px; color: var(--muted); }
.wybor_add {
  display: flex; gap: 10px; align-items: center; justify-content: space-between;
  padding: 10px 12px; margin-bottom: 6px;
  border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--soft);
}
.wybor_add > label { display: grid; gap: 2px; cursor: pointer; }
.wybor_must { border-color: var(--gold); }
.wybor_qty { width: 72px; flex: none; text-align: center; }
.tagx {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; background: var(--soft-2); color: var(--muted);
}
.tagx_must { background: var(--warn-bg); color: var(--gold); }
.cart_edit { margin-top: 6px; font-size: 13px; }
.cart_edit summary { cursor: pointer; color: var(--accent-text); }

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--muted); padding: 14px 0 4px; }
.crumbs > *::after { content: "›"; margin-left: 8px; opacity: .6; }
.crumbs > *:last-child::after { content: ""; }

.alert { border-radius: 10px; padding: 12px 15px; margin: 14px 0; font-size: 15px; }
.alert_info    { background: var(--info-bg); color: var(--info); }
.alert_success { background: var(--ok-bg);   color: var(--ok); }
.alert_error   { background: var(--bad-bg);  color: var(--bad); }
.alert_warn    { background: var(--warn-bg); color: var(--warn); }

.section { padding: 34px 0 6px; }
.section_head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.section_head a { color: var(--accent-text); font-weight: 600; font-size: 15px; white-space: nowrap; }

/* -------------------------------------------------------------- karty */

.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); }
.card {
  background: var(--card); border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); box-shadow: var(--shadow);
  display: flex; flex-direction: column;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lift); border-color: var(--line-2); }
.card_img img { transition: transform .35s ease; }
.card:hover .card_img img { transform: scale(1.04); }
/*
 * Proporcje zdjęcia na kafelku.
 *
 * `aspect-ratio` samo NIE DZIAŁAŁO: kafelek jest kolumną flex, więc wysokość
 * tego elementu brała się z treści, a treścią jest `<img>` z `height:100%`.
 * Procent nie ma się do czego odnieść (rodzic ma wysokość auto), więc obrazek
 * wracał do swojej wysokości własnej — kwadratowej. Efekt: zmiana proporcji
 * w arkuszu nie robiła nic, a kafelek był o ~80 px za wysoki.
 *
 * `flex: none` odcina rozciąganie, a obrazek wypełnia kadr przez `inset` —
 * wtedy wysokość liczy się wyłącznie z proporcji.
 */
.card_img {
  position: relative; display: block; flex: none;
  aspect-ratio: 4/3; background: var(--soft-3); overflow: hidden;
}
/* Okładki pokoi mają nazwę wypisaną w DOLNEJ części grafiki, więc kadrowanie
   od środka ucinało akurat ją. Przesunięcie punktu kadrowania w dół zostawia
   tytuł w kadrze i nie psuje zwykłych zdjęć wnętrz. */
.card_img img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 68%;
}
.card_noimg { display: grid; place-items: center; height: 100%; font-size: 34px; color: var(--muted); font-weight: 700; }
.badge {
  position: absolute; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #fff;
}
.badge_rate  { right: 8px; bottom: 8px; background: rgba(31,31,31,.86); }
.badge_rate::before { content: "★ "; color: var(--gold); }  /* na ciemnej powłoce zdjęcia — bez korekty */
/* Promocja i nowość idą w PRAWY górny róg — lewy zajmuje rodzaj rozrywki. */
.badge_promo { right: 8px; top: 8px; background: var(--accent); }
.badge_new   { right: 8px; top: 8px; background: var(--purple); }
.card_body { padding: 9px 11px 11px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.card_body h3 { margin: 0; font-size: 14.5px; line-height: 1.22; }
.card_meta { margin: 0; font-size: 12px; color: var(--muted); }
.card_facts { list-style: none; display: flex; flex-wrap: wrap; gap: 4px; margin: 0; padding: 0; }
.card_facts li { background: var(--soft-2); border-radius: 999px; padding: 1px 7px;
  font-size: 11px; color: var(--muted); }
.card_foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 8px; }
.price { font-size: 12.5px; color: var(--muted); }
.price strong { color: var(--text); font-size: 14.5px; }
.card_reviews { margin: 0; font-size: 11.5px; color: var(--muted); }

/* --------------------------------------------------------------- hero */

.hero {
  /* Przezroczysty, żeby było widać zamek — sam dokłada tylko poświatę i wygaszenie. */
  background:
    radial-gradient(900px 380px at 8% -20%, var(--dust-2), transparent 62%),
    linear-gradient(180deg, var(--veil-55) 0%, var(--veil-15) 45%, var(--veil-75) 100%);
  border-bottom: 1px solid var(--line);
  color: var(--text); padding: 96px 0 84px; min-height: 62vh; display: flex; align-items: center;
}
.hero > .wrap { width: 100%; }
.hero h1 { text-shadow: 0 2px 24px var(--veil-85); }
.hero p  { text-shadow: 0 1px 12px var(--veil-75); }
.hero h1 { font-size: 50px; max-width: 800px; margin-bottom: 18px; letter-spacing: -.015em; }
.hero p { font-size: 18px; color: var(--muted); max-width: 660px; }
.hero_actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.hero_stats { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 30px; }
.hero_stats div strong { display: block; font-size: 27px; }
.hero_stats div span { color: var(--muted); font-size: 14px; }
.hero_stats div strong { font-family: var(--font-display); color: var(--gold-text); }

.citybar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.citybar select, .citybar input {
  height: 40px; border: 1px solid var(--line); border-radius: 9px; padding: 0 11px;
  background: var(--soft); font-size: 15px; font-family: inherit; color: var(--text);
}

.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 15px; border-radius: 999px;
  background: var(--soft); border: 1px solid var(--line-2); font-size: 14.5px;
  transition: border-color .14s, color .14s, background .14s;
}
.chip:hover { border-color: var(--accent); color: var(--accent-text); text-decoration: none; }
.chip.on { background: linear-gradient(140deg, var(--accent-2), var(--accent)); border-color: transparent; color: var(--accent-ink); }

/* Dni tygodnia jako klikalne pigułki. Sam checkbox z podpisem daje przy siedmiu
   dniach rząd, w którym trudno trafić — a to pole, w którym pomyłka znaczy
   złą cenę przez cały weekend. */
.chipbox { cursor: pointer; user-select: none; }
.chipbox input { position: absolute; opacity: 0; pointer-events: none; }
.chipbox span {
  display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 999px;
  background: var(--soft); border: 1px solid var(--line-2); font-size: 14px; font-weight: 600;
  transition: border-color .14s, background .14s, color .14s;
}
.chipbox:hover span { border-color: var(--accent); }
.chipbox input:checked + span {
  background: linear-gradient(140deg, var(--accent-2), var(--accent));
  border-color: transparent; color: var(--accent-ink);
}
.chipbox input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ------------------------------------------------------- profil pokoju */

.profile_head { background: var(--card); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
                border: 1px solid var(--line); border-radius: var(--radius);
                box-shadow: var(--shadow); padding: 24px; margin-top: 16px; }
.profile_top { display: flex; gap: 18px; align-items: flex-start; }
.profile_top img { width: 96px; height: 96px; border-radius: 12px; object-fit: cover; flex: none; }
.profile_top h1 { margin-bottom: 6px; }
.bricks { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }
.brick {
  background: var(--soft); border-radius: 999px; padding: 9px 16px; font-size: 14.5px;
  display: flex; gap: 7px; align-items: baseline;
}
.brick strong { font-size: 16px; }
.rank_row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.rank_pill { background: var(--warn-bg); color: var(--gold); border-radius: 999px;
  padding: 5px 13px; font-size: 13.5px; font-weight: 600; }

.cols { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 22px; align-items: start; margin-top: 20px; }
/* Bez backdrop-filter: rozmycie pod dużymi kartami przy przewijaniu przemalowuje
   się z opóźnieniem i przez chwilę karty „nachodzą" na siebie (panel, 28.09.2026). */
.panel { background: var(--card);
         border: 1px solid var(--line); border-radius: var(--radius);
         box-shadow: var(--shadow); padding: 22px; margin-bottom: 18px; }
.panel h2 { font-size: 20px; }
.sticky { position: sticky; top: 78px; }

.rating_big { display: flex; align-items: center; gap: 16px; }
.rating_num { font-size: 46px; font-weight: 800; line-height: 1; }
.rating_num span { font-size: 21px; color: var(--muted); }
.hist { display: grid; gap: 3px; flex: 1; }
.hist_row { display: grid; grid-template-columns: 24px 1fr 34px; gap: 8px; align-items: center; font-size: 12px; color: var(--muted); }
.hist_bar { height: 7px; background: var(--soft-2); border-radius: 4px; overflow: hidden; }
.hist_bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--accent)); }

.review { border-top: 1px solid var(--line); padding: 15px 0; }
.review:first-of-type { border-top: 0; }
.review_head { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.review_score { background: var(--warn-bg); color: var(--gold); border-radius: 7px; padding: 3px 9px; font-weight: 700; font-size: 14px; }
.review_head strong { font-size: 15px; }
.review_head time { color: var(--muted); font-size: 13px; margin-left: auto; }
.review p { margin: 0; font-size: 15px; }

.badges { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.badges p { margin: 0; font-size: 13.5px; padding: 5px 12px; border-radius: 999px;
  background: var(--soft); color: var(--muted); }
.badges p.green { background: var(--ok-bg);  color: var(--ok); }
.badges p.red   { background: var(--bad-bg); color: var(--bad); }
.line_header { font-size: 14px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 14px 0 8px; }

/* ---------------------------------------------------------- kalendarz */

.cal_nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.cal_nav strong { font-size: 17px; text-transform: capitalize; }
.days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: thin; }
.day {
  flex: none; width: 62px; border: 1px solid var(--line-2); border-radius: 10px; padding: 8px 4px;
  text-align: center; background: var(--soft); cursor: pointer;
  font-family: inherit; color: var(--text);
  transition: border-color .14s, background .14s, transform .12s;
}
.day:hover { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); }
.day.on { background: linear-gradient(140deg, var(--accent-2), var(--accent)); color: var(--accent-ink); border-color: transparent; }
.day.empty { opacity: .42; cursor: not-allowed; }
.day b { display: block; font-size: 18px; }
.day span { display: block; font-size: 11.5px; color: inherit; opacity: .8; }
.day i { display: block; font-style: normal; font-size: 11px; margin-top: 3px; color: var(--ok); }
.day.on i { color: var(--accent-ink); opacity: .75; }

.hours { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin-top: 14px; }
.hour {
  border: 1px solid var(--line-2); background: var(--soft); border-radius: var(--radius-sm); padding: 10px 4px;
  text-align: center; cursor: pointer; font-family: inherit; font-size: 15px; font-weight: 600;
  color: var(--text); transition: border-color .14s, color .14s, transform .12s, box-shadow .14s;
}
.hour small { display: block; font-weight: 400; font-size: 11.5px; color: var(--muted); }
.hour:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-text);
  transform: translateY(-1px); box-shadow: 0 6px 16px -10px var(--accent); }
.hour.on { background: linear-gradient(140deg, var(--accent-2), var(--accent)); border-color: transparent; color: var(--accent-ink); }
.hour.on small { color: var(--accent-ink); opacity: .72; }
.hour.booked, .hour:disabled { background: var(--soft); color: var(--muted); opacity: .6; cursor: not-allowed; text-decoration: line-through; }
.hour.booked small { color: var(--muted); }

/* Termin wolny, ale DROŻSZY niż zapłacony przy przekładaniu rezerwacji.
   Nie przekreślamy — on istnieje i da się go dostać, tylko nie samodzielnie. */
.hour_off {
  background: var(--soft); border-style: dashed; color: var(--muted);
  cursor: help; text-decoration: none;
}
.hour_off small { color: var(--muted); opacity: .8; }

/* Termin trzymany przez kogoś innego: może wrócić do puli, więc NIE przekreślamy. */
.hour.held {
  background: var(--warn-bg); border-color: var(--gold); color: var(--gold); cursor: help;
  text-decoration: none; position: relative;
}
.hour.held small { color: var(--gold); opacity: .8; }
.hour.held::after {
  content: "⏳"; position: absolute; top: 3px; right: 5px; font-size: 10px; opacity: .8;
}
.hour.past { opacity: .5; }

.legend { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; color: var(--muted);
          margin: 12px 0 0; line-height: 1.45; }
.legend_dot { flex: none; width: 14px; height: 14px; border-radius: 4px; margin-top: 2px; }
.legend_held { background: var(--warn-bg); border: 1px solid var(--gold); }

.form_row { display: grid; gap: 6px; margin-bottom: 13px; }
.form_row label { font-size: 14px; font-weight: 600; }
.form_row input, .form_row select, .form_row textarea {
  height: 46px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 0 13px;
  font-size: 15px; font-family: inherit; background: var(--soft); color: var(--text); width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.form_row textarea { height: auto; padding: 10px 12px; min-height: 92px; }
.form_row input:focus, .form_row select:focus, .form_row textarea:focus {
  outline: 0; border-color: var(--accent); box-shadow: var(--ring);
}
.form_hint { font-size: 13px; color: var(--muted); }
.form_grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

.summary_row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 15px; }
/* Własny display bije domyślną regułę przeglądarki dla [hidden], więc
   wiersz ukrywany z JS (np. „Dodatki" bez wybranych dodatków) i tak by
   się pokazywał — z kreską zamiast kwoty. */
.summary_row[hidden] { display: none; }
/* Filtr ukryty atrybutem (np. jedna rozrywka w lokalizacji) — .form_row ma własny display: grid, który bił [hidden]. */
.form_row[hidden] { display: none; }
.summary_row.total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; font-size: 18px; font-weight: 700; }

/* ------------------------------------------------------------- listy */

.layout_side { display: grid; grid-template-columns: 264px minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 18px; }
.filters { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.filters h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); margin-top: 18px; }
.filters h3:first-child { margin-top: 0; }
.filters select {
  width: 100%; height: 42px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); padding: 0 11px;
  background: var(--soft); font-size: 14.5px; font-family: inherit; color: var(--text); margin-bottom: 4px;
}
.filters select:focus { outline: 2px solid var(--accent); border-color: transparent; }
.filters label { display: flex; align-items: center; gap: 8px; font-size: 14.5px; padding: 3px 0; cursor: pointer; }
.filters label span.cnt { margin-left: auto; color: var(--muted); font-size: 12.5px; }
.list_head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }

.pager { display: flex; gap: 6px; justify-content: center; margin: 30px 0 10px; flex-wrap: wrap; }
.pager a, .pager span {
  min-width: 38px; height: 38px; display: grid; place-items: center; border-radius: 999px;
  background: var(--soft); border: 1px solid var(--line-2); font-size: 14.5px; padding: 0 12px;
}
.pager .on { background: linear-gradient(140deg, var(--accent-2), var(--accent)); color: var(--accent-ink); border-color: transparent; }

.table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table th, .table td { padding: 12px 13px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table th { font-size: 12.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); }
.table tr:hover td { background: var(--soft); }

.status { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.status_pending   { background: var(--warn-bg); color: var(--gold); }
.status_confirmed { background: var(--ok-bg); color: var(--ok); }
.status_cancelled { background: var(--soft); color: var(--muted); }
.status_played    { background: var(--info-bg); color: var(--info); }
.status_paid      { background: var(--ok-bg);   color: var(--ok); }
.status_new       { background: var(--warn-bg); color: var(--gold); }

.vouchers_grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.vcard {
  background: linear-gradient(135deg, var(--purple), #5b1f86); color: #fff; border-radius: var(--radius);
  padding: 20px; display: flex; flex-direction: column; gap: 8px; min-height: 150px;
}
.vcard strong { font-size: 30px; }
.vcard .btn { background: var(--cream); color: #4a2d8a; margin-top: auto; }
.vcard .btn:hover { background: #fff; filter: none; }

.article { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px 30px; max-width: 780px; margin: 18px auto 0; }
.article img { border-radius: 10px; margin-bottom: 18px; }
.article h2 { margin-top: 26px; }

.postcard { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.postcard img { aspect-ratio: 16/9; object-fit: cover; width: 100%; }
.postcard div { padding: 14px 16px 18px; }
.postcard time { font-size: 12.5px; color: var(--muted); }

.countdown { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent-text); }

/* ------------------------------------------------------- panel firmy */

body.has_panel { background: #16181c; color: #e6e8eb; }
/* Panel: pełne tło paska zamiast rozmycia — przewijanie bez smug i nachodzenia. */
body.has_panel .topbar, body.has_admin .topbar { background: #0f1115; backdrop-filter: none; -webkit-backdrop-filter: none; }
body.has_panel .pnl_side { z-index: 6; }
/* Panel operatora: długie adresy (webhook, redirect URI) łamią się zamiast wypychać stronę w bok. */
.adm_tresc [class*="form_grid"] > *, .adm_tresc .form_row { min-width: 0; }
.adm_tresc code, .adm_tresc .mono { overflow-wrap: anywhere; word-break: break-all; }
.adm_tresc { min-width: 0; overflow-x: auto; }
body.has_panel .footer { display: none; }
body.has_panel main { padding-bottom: 0; }

.pnl { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: calc(100vh - 62px); }
.pnl_side {
  background: #1a1c21; border-right: 1px solid #2a2d34; padding: 14px 10px 30px;
  position: sticky; top: 62px; align-self: start; max-height: calc(100vh - 62px); overflow-y: auto;
}
.pnl_brand { display: flex; gap: 10px; align-items: center; padding: 6px 10px 14px; color: #fff; }
.pnl_brand:hover { text-decoration: none; }
.pnl_brand strong { display: block; font-size: 14.5px; }
.pnl_brand em { font-style: normal; font-size: 12px; color: #8b9198; }
.pnl_group { font-size: 11px; letter-spacing: .8px; color: #6f767e; padding: 16px 12px 6px; }
.pnl_link {
  display: block; padding: 8px 12px; border-radius: 8px; color: #c9cdd3; font-size: 14.5px;
}
.pnl_link:hover { background: #24272d; color: #fff; text-decoration: none; }
.pnl_link.on { background: var(--gold); color: #1f1f1f; font-weight: 600; }
.pnl_tree summary {
  list-style: none; cursor: pointer; padding: 7px 12px; font-size: 14px; color: #c9cdd3; border-radius: 8px;
}
.pnl_tree summary::-webkit-details-marker { display: none; }
.pnl_tree summary::before { content: "▸ "; color: #6f767e; }
.pnl_tree[open] summary::before { content: "▾ "; }
.pnl_tree summary:hover { background: #24272d; color: #fff; }
.pnl_sublink { display: block; padding: 5px 12px 5px 28px; font-size: 13.5px; color: #9aa1a9; border-radius: 7px; }
.pnl_sublink:hover { background: #24272d; color: #fff; text-decoration: none; }

.pnl_main { padding: 22px 26px 60px; min-width: 0; }
.pnl_head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.pnl_head h1 { font-size: 24px; margin: 0; color: #fff; }
.pnl_actions { display: flex; gap: 8px; flex-wrap: wrap; }

body.has_panel .panel { background: #1e2126; box-shadow: none; border: 1px solid #2a2d34; color: #e6e8eb; }
body.has_panel .panel h2, body.has_panel .panel h3 { color: #fff; }
body.has_panel .muted { color: #8b9198; }
body.has_panel .table th { color: #8b9198; }
body.has_panel .table th, body.has_panel .table td { border-bottom-color: #2a2d34; }
body.has_panel .table tr:hover td { background: #24272d; }
body.has_panel .form_row input, body.has_panel .form_row select, body.has_panel .form_row textarea,
body.has_panel .citybar input, body.has_panel .citybar select {
  background: #16181c; border-color: #2a2d34; color: #e6e8eb;
}
body.has_panel .btn_alt { background: #24272d; border-color: #363a42; color: #e6e8eb; }
body.has_panel .btn_alt:hover { background: #2e323a; }
body.has_panel .chip { background: #24272d; border-color: #363a42; color: #c9cdd3; }
body.has_panel .chip.on { background: var(--gold); border-color: var(--gold); color: #1f1f1f; }
body.has_panel .summary_row { border-color: #2a2d34; }
body.has_panel .summary_row.total { border-top-color: #2a2d34; }
body.has_panel .line_header { color: #8b9198; }
body.has_panel .hour { background: #16181c; border-color: #2a2d34; color: #e6e8eb; }
body.has_panel .hour.booked, body.has_panel .hour:disabled { background: #24272d; color: #6f767e; }
body.has_panel .hour.on { background: var(--gold); border-color: var(--gold); color: #1f1f1f; }
body.has_panel .hour.on small { color: #5a4a00; }
body.has_panel .alert_info { background: #14314f; color: #b9d8ff; }
body.has_panel .alert_warn { background: #3d3410; color: #ffe08a; }
body.has_panel .alert_error { background: #45201f; color: #ffb3b0; }
body.has_panel .alert_success { background: #143221; color: #9fe8bf; }

/* Kafelek pokoju na tablicy: pasek terminów dnia. */
.board_room { border: 1px solid #2a2d34; border-radius: var(--radius); padding: 14px 16px; margin-bottom: 14px; background: #1e2126; }
.board_head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.board_head h3 { margin: 0; font-size: 16px; color: #fff; }
.board_head .muted { font-size: 13px; }
.board_slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; }
.bslot {
  border: 1px solid #2a2d34; border-radius: 9px; padding: 8px 10px; background: #16181c;
  font-size: 14px; display: block; color: #e6e8eb;
}
.bslot b { display: block; font-size: 15px; }
.bslot small { display: block; font-size: 11.5px; color: #8b9198; line-height: 1.35; }
.bslot.taken { background: #14351f; border-color: #1f6b3c; color: #d6ffe6; }
.bslot.taken small { color: #8fd7ab; }
.bslot.pending { background: #3d3410; border-color: #7a6412; color: #ffe08a; }
.bslot.pending small { color: #d7bc6a; }
.bslot.past { opacity: .45; }
.bslot:hover { text-decoration: none; border-color: var(--gold); }

.wk { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.wk_day { border: 1px solid #2a2d34; border-radius: 10px; padding: 12px; background: #16181c; }
.wk_day h4 { margin: 0 0 8px; font-size: 14px; color: #fff; text-transform: capitalize; }
.wk_slot { display: flex; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid #23262c; font-size: 14px; }
.wk_slot:last-of-type { border-bottom: 0; }
.wk_slot span.v { color: #8b9198; font-size: 12px; }
.wk_slot form { margin-left: auto; }

/* Przycisk zwijający menu panelu — tylko na wąskim ekranie. */
.pnl_menu_btn { display: none; }
@media (max-width: 900px) {
  /* Bez ustalonych wierszy siatka rozciąga zwinięte menu i między przyciskiem
     a treścią robi się sto pikseli pustki. */
  .pnl { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  /* Na telefonie menu NIE jest przyklejone — treść nie przejeżdża pod nim przy przewijaniu. */
  .pnl_side { position: static; max-height: none; padding: 10px; }
  .pnl_main { padding: 18px 14px 50px; }
  .pnl_brand { display: none; }
  .pnl_menu_btn {
    display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%;
    padding: 11px 14px; border: 1px solid #2a2d34; border-radius: 10px;
    background: #22252b; color: #fff; font-size: 15px; font-weight: 700; cursor: pointer;
  }
  .pnl_menu_btn svg { transition: transform 0.2s ease; flex: none; }
  .pnl_menu_btn[aria-expanded="true"] svg { transform: rotate(180deg); }
  /* Zamknięte menu nie zajmuje miejsca — strona zaczyna się od treści,
     a nie od kilkunastu pozycji nawigacji. */
  .pnl_nav { display: none; padding-top: 8px; max-height: 70vh; overflow-y: auto; }
  .pnl_side.pnl_otwarte .pnl_nav { display: block; }
}

/* ------------------------------------------------------------ stopka */

.footer { background: var(--foot); color: var(--foot-ink); padding: 52px 0 28px; margin-top: 56px; font-size: 14.5px; }
.footer h4 { color: var(--foot-strong); font-size: 15px; margin-bottom: 12px; }
.footer h5 { color: var(--foot-strong); font-size: 13.5px; margin: 0 0 6px; }
.foot_cols { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 26px; }
.foot_cols a { display: block; padding: 3px 0; color: var(--foot-ink); }
.foot_cols a:hover { color: var(--foot-strong); }
.foot_note { color: var(--foot-ink); font-size: 14px; opacity: .85; }
.footer .logo_txt { color: var(--foot-strong); }
.foot_cities { margin: 28px 0 12px; border-top: 1px solid rgba(255,255,255,.16); padding-top: 18px; }
.foot_cities summary { cursor: pointer; color: var(--foot-strong); font-weight: 600; }
.foot_cities_in { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 18px; margin-top: 16px; }
.foot_cities_in a { display: block; padding: 2px 0; color: var(--foot-ink); font-size: 13.5px; }
.foot_cities_in a span { opacity: .7; }
.foot_bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.16); margin-top: 22px; padding-top: 16px; color: var(--foot-ink); font-size: 13.5px; opacity: .85; }

/* --------------------------------------------------------- responsive */

@media (max-width: 1080px) {
  .cols, .layout_side { grid-template-columns: 1fr; }
  .sticky { position: static; }
  .foot_cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .hero h1 { font-size: 29px; }
  .profile_top { flex-direction: column; }
  .form_grid2 { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .foot_cols { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  h1 { font-size: 25px; }
}

/* ------------------------------------------------- wyszukiwarka i mapa */

.finder { padding: 18px 20px; }
.finder_grid { display: grid; gap: 0 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.finder_actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; }

.found { padding: 16px 18px; }
.found_head { display: flex; gap: 14px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; }
.found_meta { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.found .hours { grid-template-columns: repeat(auto-fill, minmax(74px, 1fr)); }
.found .hour { text-decoration: none; }

.mapbox {
  height: 540px; border-radius: var(--radius); overflow: hidden; margin: 18px 0 6px;
  border: 1px solid var(--line); box-shadow: var(--shadow); background: var(--soft-3); z-index: 0;
}
.mrk {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  font-size: 13px; font-weight: 700; color: #fff; border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.mrk.m0 { background: #adb5bd; }
.mrk.m1 { background: #e5a30b; }
.mrk.m2 { background: var(--green-dark); }
.popup_hours { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 4px; }
.popup_hours a {
  background: #eef1f4; border-radius: 6px; padding: 3px 8px; font-size: 12.5px;
  color: #14161a; text-decoration: none;
}
.popup_hours a:hover { background: var(--accent); color: #fff; }
.popup_link { display: inline-block; margin-top: 6px; color: var(--accent-text); font-weight: 600; }
.leaflet-popup-content { font: 13.5px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }

@media (max-width: 620px) { .mapbox { height: 400px; } }

/* Lista atrakcji w dymku mapy — jedno miejsce, kilka pokoi. */
.popup_rooms { margin-top: 8px; max-height: 220px; overflow-y: auto; }
.popup_room { padding: 7px 0; border-top: 1px solid var(--line); }
.popup_room:first-child { border-top: 0; }

/* Odstępy oddechowe między sekcjami strony głównej. */
.section { padding: 42px 0 6px; }
.section_head h2 { font-size: 24px; }

/* Dymki Leaflet zostają jasne — mapa jest jasna, ciemny dymek gryzłby się z kafelkami. */
.leaflet-popup-content-wrapper { color: #14161a; }
.leaflet-popup-content .muted { color: #6b7280; }

/* Szeryfowy krój na liczbach, które mają robić wrażenie. */
.rating_num, .vcard strong { font-family: var(--font-display); }

/* Termin z rabatem last minute — zieleń, bo to okazja, nie ostrzeżenie. */
.hour.lm { border-color: var(--ok); }
.hour.lm small s { opacity: .55; margin-right: 3px; }
.hour.lm small { color: var(--ok); }

/* Baner zgody na cookies. */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; padding: 12px; }
.consent_in {
  max-width: 1000px; margin: 0 auto; background: var(--card); border: 1px solid var(--line-2);
  border-radius: var(--radius); box-shadow: var(--shadow-lift); padding: 16px 18px;
  display: flex; gap: 18px; align-items: center; flex-wrap: wrap;
}
.consent p { margin: 0; flex: 1; min-width: 260px; font-size: 14px; color: var(--muted); }
.consent p a { color: var(--gold-text); }
.consent_btns form { display: flex; gap: 8px; flex-wrap: wrap; }

/* Wolny termin na tablicy jest klikalny — prowadzi prosto do dopisania rezerwacji. */
.bslot.bfree { cursor: pointer; }
.bslot.bfree.minela { opacity: .6; border-style: dashed; }
.bslot.bfree:hover { border-color: var(--accent); background: var(--accent-soft); }
.bplus { color: var(--accent-text); font-weight: 600; }

/* Zapis na listę oczekujących — schowany, żeby nie konkurował z rezerwacją. */
.waitbox { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.waitbox summary { cursor: pointer; font-size: 14.5px; color: var(--gold-text); font-weight: 600; }
.waitbox form { margin-top: 10px; }

/* Mikropasek udziału w zestawieniach. */
.mini_bar { display: inline-block; width: 76px; height: 7px; border-radius: 4px;
            background: var(--soft-3); overflow: hidden; vertical-align: middle; }
.mini_bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--accent)); }

/* Miejsce w rankingu lock.me — złota plakietka w rogu kafelka. */
.badge_rank {
  left: 8px; top: 8px; background: linear-gradient(140deg, var(--gold), var(--accent));
  color: var(--accent-ink); min-width: 22px; text-align: center;
}
.badge_rank::before { content: "#"; opacity: .65; }

/* Tytuł opinii — lock.me pozwala go nadać i często niesie więcej niż ocena. */
.review_title { margin: 0 0 5px; font-family: var(--font-display); font-size: 15.5px; }

/* ------------------------------------------------------- karta pieczątek */
/* Kafelki celowo małe i kwadratowe — karta ma się mieścić w jednym spojrzeniu,
   jak papierowa. Zdobyte świecą, brakujące są wygaszone, ale wciąż czytelne. */
.stampgrid {
  display: grid; gap: 12px; margin-top: 16px;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
}
.stamp {
  display: grid; gap: 4px; justify-items: center; text-align: center;
  padding: 14px 10px; border-radius: 14px; text-decoration: none;
  border: 1px dashed var(--line-2);
  background: var(--soft);
  color: var(--muted); transition: transform .12s ease, border-color .12s ease;
}
.stamp:hover { transform: translateY(-2px); border-color: var(--accent); }
.stamp_mark {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  border: 2px dashed var(--line-2); font-size: 21px; font-weight: 700;
}
.stamp_name   { font-size: 13px; font-weight: 600; line-height: 1.25; }
.stamp_branch { font-size: 11px; opacity: .7; }
.stamp.on {
  border-style: solid; border-color: var(--ok);
  background: var(--ok-bg); color: var(--text);
}
.stamp.on .stamp_mark {
  border-style: solid; border-color: var(--ok);
  background: var(--ok-bg); color: var(--ok);
}

/* --------------------------------------------------- przełącznik języka */
.langsw { display: flex; gap: 2px; align-items: center; }
.langsw a {
  padding: 5px 8px; border-radius: 7px; font-size: 12px; font-weight: 700;
  letter-spacing: .5px; color: var(--muted); text-decoration: none;
  border: 1px solid transparent; transition: color .12s, border-color .12s;
}
.langsw a:hover { color: var(--text); border-color: var(--line-2); }
.langsw a.on { color: var(--text); background: var(--soft-2); }
@media (max-width: 860px) { .langsw { display: none; } }

/* ======================================================================
   Wygląd wzorowany na escapelandia.pl i funroom.pl.
   Ocena to PIĘĆ GWIAZDEK, trudność to POZIOM — skala X/10 i numerki
   z cudzego rankingu to idiom serwisu pośredniczącego, nie escape roomu.
   ====================================================================== */

.stars { display: inline-flex; align-items: center; gap: 1px; line-height: 1; }
.stars .st { font-style: normal; font-size: 14px; color: var(--star-off); }
.stars .st_on { color: var(--gold-text); }
.stars .st_half {
  background: linear-gradient(90deg, var(--gold-text) 50%, var(--star-off) 50%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stars b { margin-left: 6px; font-size: 13px; font-weight: 700; color: var(--text); }
.stars_none { font-size: 12.5px; color: var(--muted); }

.locks { display: inline-flex; gap: 1px; }
.locks .lk { font-style: normal; font-size: 11px; filter: grayscale(1); opacity: .3; }
.locks .lk_on { filter: none; opacity: 1; }

/* Kafelek: rodzaj rozrywki na zdjęciu zamiast oceny liczbowej. */
.card_kind {
  position: absolute; left: 10px; top: 10px; z-index: 2;
  padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .2px; color: #f4f7fb; background: rgba(10,22,38,.78);
  backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.14);
}
.card_by    { margin: 1px 0 3px; font-size: 12px; color: var(--muted); }
.card_stars { margin: 0 0 4px; display: flex; align-items: center; gap: 6px; }
/* Osoby, czas i poziom trudności trzymamy w JEDNEJ linii — rozbite na dwie
   dokładały kafelkowi ~20 px, a to sześć razy w rzędzie. */
.card_facts { gap: 3px; }
.card_facts li { white-space: nowrap; }
.card_lead  {
  margin: 6px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--muted);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card_facts li { display: inline-flex; align-items: center; gap: 5px; }
.card_foot .price small { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }

/* Kafelki rodzajów rozrywki na stronie głównej — „Wybierzcie swoją przygodę". */
.kinds { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.kind {
  display: grid; gap: 4px; padding: 20px 18px; border-radius: var(--radius);
  border: 1px solid var(--line-2); background: var(--soft);
  text-decoration: none; color: var(--text);
  transition: transform .14s ease, border-color .14s ease, background .14s ease;
}
.kind:hover { transform: translateY(-3px); border-color: var(--accent); background: var(--soft-2); }
.kind_icon  { font-size: 30px; line-height: 1; }
.kind_name  { font-weight: 700; font-size: 17px; }
.kind_desc  { font-size: 13px; color: var(--muted); line-height: 1.45; }
.kind_n     { font-size: 12px; color: var(--gold-text); font-weight: 600; }

/* Skróty do rodzajów rozrywki nad ofertą. Na wąskim ekranie przewijają się
   w poziomie zamiast łamać do trzech rzędów — pasek ma zmieścić się w jednym
   spojrzeniu, bo to on mówi „mamy nie tylko escape roomy". */
.kindbar {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 0;
}
.kindbar a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px; border-radius: 999px;
  border: 1px solid var(--line-2); background: var(--soft);
  text-decoration: none; color: var(--text); font-size: 14px; font-weight: 600;
  transition: border-color .14s ease, background .14s ease;
}
.kindbar a:hover { border-color: var(--accent); background: var(--soft-2); }
.kindbar a span {
  font-size: 12px; font-weight: 700; color: var(--gold-text);
}
@media (max-width: 620px) {
  .kindbar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .kindbar a { flex: none; }
}

/* Przycisk „Rezerwuj" w nagłówku — jak na escapelandia.pl i funroom.pl. */
.topcta { white-space: nowrap; }
@media (max-width: 1100px) { .topcta { display: none; } }

/* Znacznik opinii pochodzącej z serwisu partnerskiego. Dyskretny, bo powtarza
   się przy setkach wpisów — pełne wyjaśnienie stoi raz, nad listą. */
.rev_src {
  display: inline-block; width: 16px; height: 16px; line-height: 16px; text-align: center;
  border-radius: 50%; font-size: 10px; cursor: help;
  color: var(--muted); border: 1px solid var(--line-2);
}

/* ====================================================== menu mobilne
   Poniżej 860 px pasek nawigacji się nie mieści i był chowany BEZ ZASTĘPNIKA —
   z telefonu nie dało się wejść w żadną zakładkę. Teraz chowa się do panelu. */
.navtoggle {
  display: none; flex-direction: column; gap: 4px; justify-content: center;
  width: 40px; height: 40px; padding: 0 9px; border-radius: 10px; cursor: pointer;
  background: var(--soft); border: 1px solid var(--line-2);
}
.navtoggle span { display: block; height: 2px; border-radius: 2px; background: var(--text); transition: transform .18s, opacity .18s; }
.navtoggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.navtoggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.navtoggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobilenav {
  display: none; padding: 10px 16px 22px; border-top: 1px solid var(--line);
  max-height: calc(100vh - 62px); overflow-y: auto;
}
.mobilenav .search { display: flex; margin: 8px 0 14px; }
.mobilenav > a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 4px; border-bottom: 1px solid var(--line);
  font-size: 16px; font-weight: 500; text-decoration: none; color: var(--text);
}
.mobilenav > a:active { background: var(--soft); }
.mobilenav > a span {
  min-width: 22px; text-align: center; padding: 2px 7px; border-radius: 999px;
  font-size: 12px; font-weight: 700; color: var(--muted); background: var(--soft-2);
}
.mobilenav_group {
  margin: 18px 0 2px; font-size: 11.5px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--muted);
}
.mobilenav_foot { display: flex; gap: 8px; margin-top: 20px; }
.mobilenav_foot a {
  flex: 1; text-align: center; padding: 11px; border-radius: 10px; font-size: 14px;
  text-decoration: none; color: var(--muted); border: 1px solid var(--line-2);
}
.mobilenav_foot a.on { color: var(--text); background: var(--soft-2); }

/* Pasek nawigacji dostaje więcej szerokości niż treść: kolumna tekstu ma być
   wąska dla czytelności, ale menu to nie tekst — a przy 1240 px trzy zakładki
   nie mieściły się nawet na monitorze 1920 px. */
.topbar > .wrap, .mobilenav { max-width: 1560px; }

/* Żaden element paska nie może wypychać strony poza ekran. */
.topbar_in > * { min-width: 0; }
/* UWAGA: tu NIE może być `overflow: hidden`. Rozwijki („Nasza oferta",
   „Więcej") to `position: absolute` POD paskiem — ucinanie zawartości paska
   ucinało je w całości, więc menu otwierało się, ale nic nie było widać.
   Nadmiar pozycji i tak zabiera skrypt do „Więcej" (app.js), więc pasek nie
   ma czego przycinać; `flex-wrap: nowrap` pilnuje, żeby nic nie spadło
   do drugiego rzędu, zanim skrypt zdąży policzyć szerokości. */
.mainnav { flex-shrink: 1; flex-wrap: nowrap; }
/* Pozycje przeniesione do „Więcej" mają wyglądać jak reszta rozwijki. */
.drop_menu a[data-flex] { display: block; }
.topbar_right { flex-shrink: 0; }
.topbar_right .drop_right > summary { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Wyszukiwarka schodzi pierwsza — jest też w menu i na osobnej stronie. */
@media (max-width: 1500px) { .topbar .search { display: none; } }

/* Poniżej 1180 px dziewięć pozycji menu przestaje się mieścić:
   cały pasek zamieniamy na hamburger, zamiast go ściskać do nieczytelności. */
@media (max-width: 1180px) {
  .navtoggle { display: flex; }
  .mobilenav { display: block; }
  .mobilenav[hidden] { display: none; }
  .mainnav { display: none; }
  .topbar_in { gap: 12px; }
  .topbar_right { margin-left: auto; }
}

@media (max-width: 860px) {
  .topbar_in { gap: 10px; }
  .logo_txt { font-size: 17px; }
  /* Konto i logowanie są w panelu — w pasku wychodziły poza ekran. */
  .topbar_right .drop_right, .topbar_right > .btn_ghost { display: none; }
}

/* Kafelek pokoju w składaniu zestawu dla grupy: zaznaczony ma być widoczny
   z drugiego końca stołu, bo wybiera go zwykle kilka osób naraz. */
.grupa_opt { border: 1px solid var(--line); transition: border-color .14s, background .14s; }
.grupa_opt:hover { border-color: var(--line-2); }
.grupa_opt.on { border-color: var(--accent); background: var(--accent-soft); }
.grupa_opt select { max-width: 150px; }

/* ---------------------------------------------- cenniki w panelu */

/* Tabelka „ile osób → ile złotych". Jedna kolumna etykiet i jedna pól, bo
   właśnie tak wygląda cennik na kartce — a im bliżej kartki, tym mniej
   pomyłek przy przepisywaniu. */
.cennik_grid { display: grid; gap: 6px; margin-bottom: 14px; }
.cennik_row {
  display: grid; grid-template-columns: 1fr 110px auto; gap: 10px; align-items: center;
}
.cennik_row > span:first-child { font-size: 14.5px; }
/* Do prawej wyrównujemy TYLKO liczby — kwoty i progi porównuje się pionowo.
   Ta sama siatka nosi dziś także pola tekstowe (nazwy aktów, tytuły zagadek),
   a wyrównany do prawej tytuł wygląda jak błąd. */
.cennik_row input[type="number"],
.cennik_row input[inputmode="decimal"] { text-align: right; }

/* Siatka dni z godzinami i wyborem cennika. Kolumny same się układają,
   bo dni bywają puste (poniedziałek nieczynne), a stała siatka zostawiałaby
   wtedy dziury. */
.grafik_dni {
  display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.grafik_dzien {
  border: 1px solid var(--line-2); border-radius: var(--radius); padding: 12px;
  background: var(--soft);
}
.grafik_dzien h3 { margin: 0 0 8px; font-size: 15px; }
.grafik_slot {
  display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 8px;
  align-items: center; margin-bottom: 5px;
}
.grafik_slot select { font-size: 13.5px; padding: 5px 8px; }

/* Dwa tryby podawania godzin wejść obok siebie. Kafelki, a nie zakładki:
   obie drogi mają być widoczne naraz, żeby dało się wybrać tę bliższą temu,
   jak ktoś ma grafik w głowie. */
.godz_tryby { display: grid; gap: 10px; margin: 10px 0; }
.godz_tryby .wybor_opt { align-items: flex-start; }
.godz_tryby input[type="text"], .godz_tryby input:not([type]) { width: 100%; }
.godz_pola { display: flex; flex-wrap: wrap; gap: 10px; }
.godz_pola label { display: grid; gap: 3px; font-size: 12.5px; color: var(--muted); }
.godz_pola input, .godz_pola select { font-size: 14px; padding: 6px 9px; }
.godz_pola input[type="number"] { width: 96px; }

/* Krzyżyk kasujący godzinę — mały, obok listy cenników. */
.grafik_slot { grid-template-columns: 52px minmax(0, 1fr) 24px; }
.godz_x {
  width: 22px; height: 22px; padding: 0; line-height: 1; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: 6px;
  background: var(--soft); color: var(--muted); font-size: 14px;
}
.godz_x:hover { border-color: var(--bad); color: var(--bad); }

/* ------------------------------------------- wyjątki godzin w panelu */

.wyj_dzien, .wyj_wczytaj {
  display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px;
}
.wyj_wczytaj label, .wyj_dzien label { display: grid; gap: 3px; font-size: 12.5px; color: var(--muted); }
.wyj_wczytaj select, .wyj_dzien input { font-size: 14px; }

/* Lista pokoi do zaznaczenia, pogrupowana oddziałami — przy dwóch adresach
   sama nazwa pokoju nie wystarcza, żeby trafić w ten właściwy. */
.wyj_pokoje {
  display: grid; gap: 4px; margin-bottom: 14px;
  max-height: 260px; overflow-y: auto;
  border: 1px solid var(--line-2); border-radius: var(--radius); padding: 10px;
}
.wyj_naglowek {
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); margin: 8px 0 2px;
}
.wyj_naglowek:first-child { margin-top: 0; }
.wyj_pokoj { display: flex; gap: 8px; align-items: center; font-size: 14.5px; cursor: pointer; }

/* Zajęta godzina jest KLIKALNA — prowadzi do zgłoszenia „powiadom mnie".
   Bez tej podpowiedzi wygląda jak martwy klocek i nikt jej nie dotyka. */
.hour.waitable { cursor: pointer; opacity: .78; }
.hour.waitable:hover { opacity: 1; border-color: var(--accent); }
.hour_bell {
  display: block; margin-top: 2px; font-size: 10.5px; font-weight: 600;
  color: var(--accent-text); letter-spacing: .01em;
}
.hour.waitable:hover .hour_bell { text-decoration: underline; }

/* --------------------------------------- karty godzin w grafiku */

/* Dzień jako harmonijka: siedem dni naraz nie mieści się na ekranie,
   a rozwijanie po jednym pozwala pracować nad tym, nad czym się właśnie pracuje. */
.dzien {
  border: 1px solid var(--line-2); border-radius: var(--radius);
  margin-bottom: 10px; background: var(--soft);
}
.dzien > summary {
  display: flex; gap: 10px; align-items: baseline; cursor: pointer;
  padding: 11px 14px; list-style: none;
}
.dzien > summary::-webkit-details-marker { display: none; }
.dzien > summary::before { content: "▸"; opacity: .6; }
.dzien[open] > summary::before { content: "▾"; }

.karty {
  display: grid; gap: 10px; padding: 0 14px 12px;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.karta {
  display: grid; gap: 8px; align-content: start; padding: 12px;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--card);
}
.karta_gora { display: flex; justify-content: space-between; align-items: center; }
.karta_gora strong { font-size: 21px; font-family: var(--font-display); }
.karta_pole { display: grid; gap: 4px; font-size: 12.5px; color: var(--muted); }
.karta_pole input { font-size: 14px; }
.karta_chk { display: flex; gap: 7px; align-items: flex-start; font-size: 13.5px; color: var(--text); }
.karta_chk input { margin-top: 3px; }
.karta_akcje { display: flex; gap: 8px; align-items: center; justify-content: space-between; }

/* Karta „nowa godzina" — wygląda jak puste miejsce do wypełnienia, nie jak
   kolejna godzina, żeby nikt nie wziął jej za istniejący termin. */
.karta_nowa { border-style: dashed; background: transparent; }
.karta_plus { font-size: 26px; color: var(--muted); line-height: 1; }

.dzien_kopiuj {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 0 14px 14px;
}

/* Zakres dat przy wyjątkach. */
.wyj_okres {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  padding: 10px 12px; margin-bottom: 12px;
  border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--soft);
}
.wyj_okres label:first-child { display: grid; gap: 3px; font-size: 12.5px; color: var(--muted); }

/* Kopiowanie cennika z innej atrakcji — wąski pasek pod listą, nie osobny
   ekran: to czynność okazjonalna, ale ma być pod ręką przy zakładaniu pokoju. */
.kopiuj_cennik {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
}
.kopiuj_cennik label { display: grid; gap: 3px; font-size: 12.5px; color: var(--muted); }
.kopiuj_cennik select, .kopiuj_cennik input { font-size: 14px; }

/* Kopiowanie cennika z innej atrakcji — wąski pasek pod listą, nie osobny
   ekran: czynność okazjonalna, ale ma być pod ręką przy zakładaniu pokoju. */
.kopiuj_cennik {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
}
.kopiuj_cennik label { display: grid; gap: 3px; font-size: 12.5px; color: var(--muted); }
.kopiuj_cennik select, .kopiuj_cennik input { font-size: 14px; }

/* ------------------------- kalendarz obsługi: kolory FunRoom */

/* Tło = skąd, obwódka (cień, dopisywany w PHP, bo obwódki się sumują) =
   czym zapłacono, kreskowanie = faktura, znaczniki = rabat/voucher.
   Te same klasy działają na kafelku tablicy dnia (.bslot) i na godzinie
   w kalendarzu (.tag), żeby oba ekrany mówiły tym samym językiem. */
.rez { border-width: 2px; border-style: solid; position: relative; }
/* PEŁNE kafelki w kolorach lock.me (jak w ich Kokpicie) — ciemny tekst na kolorze. */
.rez.z_lockme  { background-color: #fcd11d; border-color: #fcd11d; }
.rez.z_oplacone { background-color: #ffa033; border-color: #ffa033; }
.rez.z_lockme_widget, .rez.z_strona { background-color: #5fcda2; border-color: #5fcda2; }
.rez.z_lockme_panel, .rez.z_panel   { background-color: #83b6e8; border-color: #83b6e8; }
.rez.z_lada    { background-color: #fa8072; border-color: #fa8072; }
.rez.z_api     { background-color: #b3a6f0; border-color: #b3a6f0; }
.rez.z_blokada { background-color: #7a7f8759; border-color: #7a7f87; color: #c9ced6; }
.rez:not(.z_blokada):not(.p_koszyk), .rez:not(.z_blokada):not(.p_koszyk) * { color: #14110a !important; }
.rez:not(.z_blokada):not(.p_koszyk) .muted { color: rgba(20, 17, 10, .72) !important; }
.tag.rez.z_blokada { color: #fff; }

/* Faktura: ukośne kreski na tle — widać je kątem oka, a nie zmieniają koloru źródła. */
.rez.faktura {
  background-image: repeating-linear-gradient(45deg, rgba(0,0,0,.16) 0 3px, transparent 3px 8px);
}

.rez.p_niepotwierdzona { opacity: .7; border-style: dotted; }
/* Opłacona: ramka w kolorze ŹRÓDŁA (żółta z zieloną = widget lock.me opłacony) — jak w lock.me. */
.rez.r_lockme_widget, .rez.r_strona { border-color: #5fcda2; border-width: 3px; }
.rez.r_lockme_panel, .rez.r_panel   { border-color: #83b6e8; border-width: 3px; }
.rez.r_lada { border-color: #fa8072; border-width: 3px; }
.rez.r_api  { border-color: #8a7bd8; border-width: 3px; }
/* W koszyku lock.me — klient jeszcze płaci: ciemny środek, żółta ramka. */
.rez.p_koszyk { background-color: #0b0b0b; border-color: #fcd11d; border-width: 3px; color: #fff; }
.rez.p_odpadla         { opacity: .45; text-decoration: line-through; }

/* Znaczniki: krótkie, przy godzinie — „%" kod rabatowy, „V" voucher, „BZ" bezzwrotna. */
.bz {
  display: inline-block; margin-left: 5px; padding: 0 5px; border-radius: 5px;
  font-size: 10px; font-style: normal; font-weight: 700; letter-spacing: .03em;
  background: var(--soft-3); color: var(--text); vertical-align: middle;
}
.tag .bz { margin-left: 3px; padding: 0 3px; font-size: 9.5px; }

/* Obwódki rysowane cieniem wychodzą poza kafelek — siatka musi mieć odstęp. */
.board_slots { gap: 12px; }

.legenda_panel { padding: 12px 14px; }
.legenda { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.leg { display: inline-flex; align-items: center; gap: 7px; }
.leg i.rez, .leg i.wzor {
  width: 22px; height: 15px; padding: 0; min-width: 0; display: inline-block; border-radius: 4px;
  border: 2px solid #3a3f48; background: #1b1e26;
}

/* ------------------------------------ kalendarz miesięczny przy rezerwacji */

/* Przy horyzoncie 90 dni pasek kilkunastu dni sprawiał wrażenie, że dalej nic
   nie ma — a „za trzy tygodnie" pyta większość grup. Miesiąc pokazuje od razu
   cały obraz: gdzie jest luźno, a gdzie zostały pojedyncze godziny. */
.mcal { margin-bottom: 14px; }
.mcal_nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 8px;
}
.mcal_nav strong { font-size: 15px; text-transform: lowercase; }
.mcal_nav a, .mcal_nav .off {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 8px; border: 1px solid var(--line-2); font-size: 16px;
}
.mcal_nav a:hover { border-color: var(--accent); text-decoration: none; }
.mcal_nav .off { opacity: .3; }

.mcal_grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.mcal_dow {
  text-align: center; font-size: 11px; color: var(--muted);
  padding-bottom: 3px; text-transform: lowercase;
}
.mcal_d {
  position: relative; display: grid; place-items: center; aspect-ratio: 1;
  border-radius: 8px; border: 1px solid var(--line-2); background: var(--soft);
  font-size: 14px; font-weight: 600; color: var(--text);
}
.mcal_d i {
  position: absolute; bottom: 2px; font-size: 9px; font-style: normal;
  font-weight: 600; color: var(--ok);
}
.mcal_d:hover { border-color: var(--accent); text-decoration: none; }
.mcal_d.on { background: linear-gradient(140deg, var(--accent-2), var(--accent)); border-color: transparent; color: var(--accent-ink); }
.mcal_d.on i { color: var(--accent-ink); }
/* Dzień bez terminów jest WYSZARZONY, a nie ukryty — inaczej siatka miesiąca
   rozjeżdża się i nie da się policzyć, który to dzień tygodnia. */
.mcal_d.off { opacity: .28; background: transparent; border-style: dashed; }
.mcal_pusty { aspect-ratio: 1; }

/* Liczba osób jako przyciski — pytanie, na które klient zna odpowiedź od razu.
   Lista rozwijana wymaga dwóch kliknięć i chowa opcje, których jest pięć. */
.osoby_btns { display: flex; flex-wrap: wrap; gap: 6px; }
.osoba {
  min-width: 44px; padding: 9px 12px; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--soft); color: var(--text); font-size: 15px; font-weight: 600;
}
@media (hover: hover) { .osoba:hover { border-color: var(--accent); } }
.osoba.on {
  background: linear-gradient(140deg, var(--accent-2), var(--accent));
  border-color: transparent; color: var(--accent-ink);
}

/* ------------------------------------------------------------------ pakiety
   Pakiet to nie pokój: klient nie wybiera go z kalendarza, tylko porównuje
   kilka wariantów obok siebie („do 12 dzieci czy do 18?"). Dlatego karta
   prowadzi CENĄ I POJEMNOŚCIĄ, a nie zdjęciem — te dwie liczby decydują
   o wyborze, reszta jest do doczytania na stronie pakietu. */
.pakiety {
  display: grid; gap: 14px; margin: 14px 0 0;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
}
.pak_karta {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px; border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--soft); text-decoration: none; color: var(--text);
  transition: border-color .14s ease, transform .14s ease;
}
.pak_karta:hover { border-color: var(--accent); transform: translateY(-2px); }
.pak_karta_head { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; }
.pak_karta_head strong { font-family: var(--font-display); font-size: 18px; line-height: 1.25; }
.pak_karta_head .tagx { flex: none; margin: 0; }
.pak_karta_stopka {
  display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline;
  margin-top: auto; padding-top: 10px;
}
.pak_cena { font-weight: 700; color: var(--accent-text); }

.pak_chipy { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 20px; }
.pak_chipy .tagx { margin: 0; font-size: 13px; padding: 4px 11px; }

/* Tabela progów. Ceny do prawej, bo porównuje się je pionowo — wyrównanie
   do lewej kazałoby wodzić wzrokiem za różną długością kwot. */
.pak_tab { width: 100%; border-collapse: collapse; font-size: 14px; }
.pak_tab th, .pak_tab td { padding: 7px 10px; text-align: left; }
.pak_tab th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.pak_tab tbody tr { border-top: 1px solid var(--line); }
.pak_tab th:last-child, .pak_tab td:last-child,
.pak_tab th:nth-last-child(2), .pak_tab td:nth-last-child(2) { text-align: right; }

.kindbar a.on {
  background: linear-gradient(140deg, var(--accent-2), var(--accent));
  border-color: transparent; color: var(--accent-ink);
}

/* Wyjaśnienie rodzaju rozrywki nad katalogiem. Ma być czytane, a nie omijane
   jak baner, więc trzyma szerokość tekstu i prowadzi jednym mocnym zdaniem —
   dopiero pod nim idą szczegóły dla tych, którzy chcą wiedzieć więcej. */
.intro_typ {
  max-width: 68ch; margin: 6px 0 22px; padding: 16px 18px;
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); background: var(--soft);
}
.intro_lead {
  margin: 0 0 8px; font-family: var(--font-display);
  font-size: 19px; line-height: 1.35; color: var(--text);
}
.intro_typ p.muted { margin: 0 0 8px; line-height: 1.65; }
.intro_tytul { margin: 12px 0 4px; font-size: 14px; }
.intro_lista { margin: 0; padding-left: 18px; color: var(--muted); line-height: 1.65; }
.intro_lista li { margin-bottom: 3px; }
.intro_stopka { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }

/* ------------------------------------------------------ escape room online
   Gra ma wyglądać inaczej niż reszta serwisu: to nie jest strona sprzedażowa,
   tylko plansza. Ciemniejsze tło i monospace przy materiałach robią z ekranu
   „terminal", zamiast kolejnej karty z ofertą. */
.gra_pasek {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  justify-content: space-between; position: sticky; top: 0; z-index: 20;
  margin: 0 0 16px; padding: 10px 14px;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--soft-2); backdrop-filter: blur(6px);
}
.gra_pasek_prawa { display: flex; gap: 6px; align-items: center; }
.gra_pasek .tagx { margin: 0; font-size: 12.5px; }
#zegar { font-variant-numeric: tabular-nums; letter-spacing: .5px; }

.gra_akt { margin: 26px 0 10px; }
.gra_zagadki { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.gra_zagadka { margin: 0; }
.gra_zagadka.zrobiona { opacity: .72; border-color: rgba(120, 220, 160, .4); }
.gra_zagadka_head { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.tagx_ok { background: rgba(120, 220, 160, .18); color: #7fd6a4; }

.gra_material {
  margin: 12px 0; padding: 12px; border-radius: var(--radius-sm);
  border: 1px dashed var(--line-2); background: var(--soft);
}
.gra_kartka ul { margin: 6px 0 0; padding-left: 18px; color: var(--muted); line-height: 1.6; }

/* Siatka podłogi. Zapalone pola muszą różnić się od zgaszonych NA PIERWSZY
   RZUT OKA — cała zagadka polega na odczytaniu tylko jednych z nich. */
.gra_siatka { display: grid; gap: 6px; justify-content: center; }
.gra_rzad { display: flex; gap: 6px; justify-content: center; }
.gra_pole {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 6px; border: 1px solid var(--line);
  background: transparent; color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 17px; font-weight: 700; opacity: .38;
}
.gra_pole.on {
  background: linear-gradient(140deg, var(--accent-2), var(--accent));
  border-color: transparent; color: var(--accent-ink); opacity: 1;
}

.gra_podp {
  margin: 10px 0; padding: 10px 12px; border-left: 3px solid var(--gold, var(--accent));
  background: var(--warn-bg, var(--soft)); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.gra_podp p { margin: 0 0 6px; font-size: 14px; }
.gra_podp p:last-child { margin-bottom: 0; }

.gra_form { margin-top: 12px; }
.gra_wiersz { display: flex; gap: 8px; margin-top: 4px; }
.gra_wiersz input { flex: 1; }
.gra_nagroda { margin: 10px 0 0; font-weight: 600; color: var(--accent-text); }
.gra_final { border-color: var(--accent); }

/* ------------------------------------------------------ formularz kupującego
   Prefiks przy telefonie jest wąski, bo to wybór z krótkiej listy — numer
   dostaje resztę miejsca, bo to on się wpisuje. */
.tel_row { display: flex; gap: 8px; }
.tel_row select { flex: 0 0 auto; max-width: 190px; }
.tel_row input { flex: 1; min-width: 0; }
/* Telefon (25.10.2026): „Polska +48” zabierało pół wiersza i numer się nie mieścił — na wąskim ekranie kraj węższy. */
@media (max-width: 480px) { .tel_row select { max-width: 120px; } }
/* Pole kodu / vouchera: podpowiedź małymi literami (wersaliki ucinały „NUMER VOUC…”), na telefonie kod z rogu rośnie. */
[data-kod-form] input::placeholder { text-transform: none; }
@media (max-width: 480px) {
  [data-kod-form] input[name="kod"] { flex: 1 1 100% !important; min-width: 0 !important; }
  [data-kod-form] input[name="kod_kz"] { flex: 1; width: auto !important; min-width: 0; }
}

/* Adres zwinięty: przy wejściu na godzinę to trzy pola między klientem
   a płatnością. Widoczny, ale nie zabierający uwagi. */
.adres_box {
  margin: 10px 0; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--soft);
}
.adres_box > summary { cursor: pointer; font-weight: 600; font-size: 14.5px; }
.adres_box[open] > summary { margin-bottom: 10px; }

.chk_row { display: flex; gap: 9px; align-items: flex-start; margin: 12px 0; }
.chk_row input { margin-top: 4px; }
.link_btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--accent-text); text-decoration: underline; font: inherit;
}

/* ------------------------------------------------- panel: układanie gier */
.akt_box {
  margin: 12px 0; padding: 12px 14px;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--soft);
}
.akt_box > details > summary { cursor: pointer; }
.akt_form { margin-top: 10px; }

.mat_box {
  margin: 10px 0; padding: 12px;
  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--soft);
}
.mat_nowy { border-style: dashed; background: transparent; }
.mat_box textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; }

/* Klucze innych zagadek do przepisania w „wymaga". Klikalne, bo przepisywanie
   z pamięci to najprostszy sposób na zagadkę, która nigdy się nie otworzy. */
.klucz_chip {
  display: inline-block; margin: 2px 3px 0 0; padding: 1px 7px; border-radius: 5px;
  background: var(--soft-2); cursor: copy; font-size: 12px;
}
.klucz_chip:hover { background: var(--accent); color: var(--accent-ink); }

.podglad { position: sticky; top: 14px; align-self: start; }

/* Film w ramce: proporcje 16:9 bez skryptu. */
.gra_ramka { position: relative; padding-top: 56.25%; border-radius: var(--radius-sm); overflow: hidden; }
.gra_ramka iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gra_fig { margin: 12px 0; }
.gra_fig img, .gra_fig video { max-width: 100%; border-radius: var(--radius-sm); display: block; }
.gra_fig audio { width: 100%; }
.gra_fig figcaption { margin-top: 6px; }

/* ---------------------------------------------------------- galeria pokoju */
.galeria { padding: 10px; }
.galeria_main { display: block; aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: var(--soft); }
.galeria_main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galeria_thumbs { display: flex; gap: 8px; margin-top: 8px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 2px; }
.galeria_thumbs button { flex: none; width: 96px; height: 64px; padding: 0; border: 2px solid transparent; border-radius: 8px;
  overflow: hidden; background: var(--soft); cursor: pointer; opacity: .75; transition: opacity .15s, border-color .15s; }
.galeria_thumbs button:hover, .galeria_thumbs button.on { opacity: 1; border-color: var(--accent); }
.galeria_thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Strona pokoju na tablecie i telefonie: kolumna z kalendarzem i rezerwacją
   idzie NA GÓRĘ. Wcześniej spadała pod galerię, opis, opinie i podobne pokoje,
   więc klient, który wszedł zarezerwować, musiał przewinąć kilka ekranów. */
@media (max-width: 1080px) {
  .cols_pokoj > aside { order: -1; }
  /* Kolumna nie może rozepchnąć strony sumą miniatur galerii (flex: none):
     minmax(0, 1fr) pozwala jej się zwęzić, a pasek miniatur przewija się. */
  .cols_pokoj { grid-template-columns: minmax(0, 1fr); }
  .cols_pokoj > * { min-width: 0; }
}
/* Strona pokoju: gdzie jest ta rezerwacja — przy kalendarzu, nie w stopce. */
.lok-rezerwacja {
  margin: 0 0 14px; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--accent); background: var(--accent-soft); font-size: 14px; line-height: 1.5;
}
.lok-inna { display: block; margin-top: 6px; color: var(--warn); }
.lok-inna a { font-weight: 700; color: var(--accent-text); }
/* „Brak wolnych terminów? Sprawdź naszą drugą lokalizację." */
.dl-box {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  margin: 26px 0 0; padding: 20px 22px; border-radius: 12px;
  border: 1px solid var(--accent, #d8844e); background: var(--accent-soft, rgba(216, 132, 78, 0.12));
}
.dl-tekst { flex: 1 1 420px; }
.dl-box h2 { margin: 0 0 6px; font-size: 1.25rem; line-height: 1.25; }
.dl-box p { margin: 4px 0 0; font-size: 0.95rem; line-height: 1.55; }
.dl-wolne { display: inline-block; margin-left: 4px; font-weight: 700; color: var(--ok, #20d19c); }
.dl-akcje { display: flex; flex-wrap: wrap; gap: 10px; }
.dl-btn { white-space: nowrap; }
aside .dl-box { margin: 0 0 14px; padding: 14px; }
aside .dl-box h2 { font-size: 1rem; }
aside .dl-akcje, aside .dl-btn { width: 100%; justify-content: center; }
/* ------------------------------------------------ pakiety (urodziny, szkoły) */
.pk_hero { margin: 18px 0 22px; max-width: 760px; }
.pk_nad { margin: 0 0 6px; color: var(--gold-text); font-weight: 700; }
.pk_hero h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.08; margin: 0 0 12px; }
.pk_lead { margin: 0; color: var(--muted); font-size: 17px; line-height: 1.6; }
.pk_fakty { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.pk_fakty li { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--soft); font-size: 14px; }
.pk_fakty strong { color: var(--gold-text); }
.pk_filtry { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin: 0 0 8px; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); }
.pk_zakladki { display: flex; flex-wrap: wrap; gap: 6px; }
.pk_zakladki a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); font-weight: 700; font-size: 14px; color: var(--text); }
.pk_zakladki a span { min-width: 22px; padding: 0 6px; border-radius: 999px; background: var(--soft-3); font-size: 12px; text-align: center; }
.pk_zakladki a:hover { border-color: var(--accent); text-decoration: none; }
.pk_zakladki a.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.pk_zakladki a.on span { background: rgba(0, 0, 0, 0.14); }
.pk_osoby { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pk_osoby label { font-weight: 700; font-size: 14px; }
.pk_osoby input { width: 90px; }
.pk_lokalizacja { margin-top: 30px; }
.pk_lok_naglowek { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.pk_lok_naglowek h2 { margin: 0; font-size: 26px; }
.pk_lok_naglowek p { margin: 0; color: var(--muted); }
.pk_rodzaj { margin: 18px 0 10px; font-size: 19px; }
.pk_siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; }
.pk_karta { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); }
.pk_karta:hover { border-color: var(--line-2); }
.pk_foto { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--bg-2) center / cover no-repeat; }
.pk_foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.25), transparent 40%, rgba(0, 0, 0, 0.35)); }
.pk_lok, .pk_osob { position: absolute; z-index: 1; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 800; }
.pk_lok { top: 12px; left: 12px; background: #f1e6cf; color: #1b1208; }
.pk_osob { bottom: 12px; right: 12px; background: rgba(var(--bg2-rgb, 6, 21, 35), 0.85); color: #fff; }
.pk_tresc { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 18px 18px; }
.pk_tresc h3 { margin: 0; font-size: 20px; line-height: 1.2; }
.pk_tresc h3 a { color: var(--text); }
.pk_meta { margin: 0; color: var(--muted); font-size: 14px; }
.pk_opis { margin: 0; color: var(--muted); font-size: 14.5px; }
.pk_w_cenie { margin: 2px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; font-size: 14.5px; }
.pk_w_cenie li { position: relative; padding-left: 22px; }
.pk_w_cenie li::before { content: "✓"; position: absolute; left: 2px; color: var(--ok); font-weight: 900; }
.pk_stopka { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line); }
.pk_cena strong { font-size: 24px; color: var(--gold-text); }
.pk_cena small { color: var(--muted); font-size: 13px; }
.pk_brak { padding: 22px; border-radius: var(--radius); border: 1px dashed var(--line-2); background: var(--soft); }
.pk_brak h3 { margin: 0 0 6px; font-size: 19px; }
.pk_brak p { margin: 0 0 14px; color: var(--muted); }
.pk_brak_akcje, .pk_inaczej_akcje { display: flex; flex-wrap: wrap; gap: 10px; }
.pk_inaczej { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 34px; padding: 22px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--card); }
.pk_inaczej h2 { margin: 0 0 4px; font-size: 22px; }
.pk_inaczej p { margin: 0; color: var(--muted); }
@media (max-width: 760px) {
  .pk_osoby { margin-left: 0; }
  .pk_stopka { flex-direction: column; align-items: stretch; }
  .pk_stopka .btn { justify-content: center; }
}

/* Pakiety: cena na wybrany dzień. */
.pk_cena .pk_dzien { display: block; margin-top: 2px; color: var(--muted); font-size: 12.5px; }
.pk_dzien_info { margin: 14px 0 0; padding: 10px 14px; border-radius: var(--radius-sm); border: 1px solid var(--accent); background: var(--accent-soft); font-size: 14.5px; }
.pk_dzien_info a { margin-left: 8px; font-weight: 700; color: var(--accent-text); }
.pk_osoby label { white-space: nowrap; }
.pk_osoby input[type="date"] { max-width: 165px; }
/* Rozrywka spod drugiego adresu: w katalogu i w wolnych terminach mówimy,
   gdzie jest, zamiast pokazywać pustą listę. */
.lok_gdzie {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  margin: 14px 0 6px; padding: 12px 16px; border-radius: var(--radius-sm);
  border: 1px solid var(--accent); background: var(--accent-soft); font-size: 14.5px;
}
.lok_gdzie a.btn { white-space: nowrap; }
/* Zachęta dla grup w bloku o drugiej lokalizacji. */
.dl-grupa { margin-top: 8px; font-size: 14px; }
.dl-grupa a { font-weight: 700; color: var(--accent-text, #f5b35f); text-decoration: underline; text-underline-offset: 3px; }
/* Partner programu miejskiego (OK Poznań) w stopce zwykłego układu. */
.foot_partner { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.foot_partner img { height: 46px; width: auto; display: block; background: #fff; padding: 6px 10px; border-radius: 8px; }
.foot_partner span { color: var(--foot-ink); font-size: 14px; }
/* Partner na środku stopki i większy (układ zwykły). */
.foot_partner { flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; }
.foot_partner img { height: 64px; padding: 10px 14px; border-radius: 10px; }
.foot_partner span { max-width: 52ch; font-size: 14px; }
@media (max-width: 760px) { .foot_partner img { height: 54px; } }
/* =====================================================================
 * „Ważne informacje" — oznaczenia pokoju z ikonami w stylu neonowych
 * drzwi: trzy zwijane grupy (Podstawowe, Bezpieczeństwo, Języki), kafle
 * w dwóch kolumnach, złote plusy, czerwone ostrzeżenia, niebieskie
 * bezpieczeństwo, flagi przy językach.
 * ===================================================================== */
.wazne { padding: 22px 22px 14px; }
.wazne-tytul { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 2.6vw, 2.2rem); letter-spacing: 0.02em; text-transform: uppercase; text-align: center; }
.wazne-tytul span { color: var(--gold); }
.wazne-pod { margin: 4px 0 18px; text-align: center; color: var(--muted); font-size: 0.95rem; }
.wazne-grupa { margin: 0 0 12px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--soft); }
.wazne-grupa summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; user-select: none; }
.wazne-grupa summary::-webkit-details-marker { display: none; }
.wazne-grupa-ikona { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--gold); color: var(--gold); box-shadow: 0 0 14px -4px var(--gold); }
.wazne-grupa-ikona svg { width: 20px; height: 20px; }
.wazne-grupa-nazwa { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.02em; color: var(--gold); }
.wazne-grupa-linia { flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); opacity: 0.55; min-width: 24px; }
.wazne-grupa-podpis { color: var(--gold-text); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.wazne-grupa-strzalka { width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform 0.2s ease; margin-left: 4px; }
.wazne-grupa:not([open]) .wazne-grupa-strzalka { transform: rotate(-45deg); }
.wazne-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.wazne-cecha { display: flex; align-items: center; gap: 14px; min-height: 58px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: rgba(0, 0, 0, 0.28); font-size: 0.95rem; line-height: 1.3; }
.wazne-ikona { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; color: var(--gold); filter: drop-shadow(0 0 8px color-mix(in srgb, currentColor 65%, transparent)); }
.wazne-ikona svg { width: 28px; height: 28px; }
.wazne-cecha--warn .wazne-ikona { color: #ff4d4d; }
.wazne-cecha--safe .wazne-ikona { color: #5ecbff; }
.wazne-cecha--lang .wazne-ikona { filter: none; }
.wazne-cecha--warn { border-color: rgba(255, 77, 77, 0.35); }
.wazne-cecha--safe { border-color: rgba(94, 203, 255, 0.3); }
@media (max-width: 640px) { .wazne-lista { grid-template-columns: 1fr; } .wazne-grupa-podpis, .wazne-grupa-linia { display: none; } }
/* Panel: wybór oznaczeń i katalog ikon. */
.cechy_siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.cecha_wybor { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; font-size: 14px; }
.cecha_wybor:has(input:checked) { border-color: var(--gold); background: var(--accent-soft); }
.cecha_wybor input { margin: 0; }
.cecha_ikona { display: grid; place-items: center; width: 30px; height: 30px; color: var(--gold); flex: 0 0 auto; }
.cecha_ikona svg { width: 24px; height: 24px; }
.cecha_wybor--warn .cecha_ikona { color: #ff4d4d; }
.cecha_wybor--safe .cecha_ikona { color: #5ecbff; }
.cechy_ikony { display: flex; flex-wrap: wrap; gap: 6px; }
.cecha_ikona_wybor { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.cecha_ikona_wybor input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cecha_ikona_wybor:has(input:checked) { border-color: var(--gold); background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent-soft); }
.cecha_wiersz { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.cecha_wiersz > span:nth-child(3) { flex: 1 1 auto; }

/* ===== Strona pokoju: zakładki, nagrody, cennik, dojazd ===== */
.pk_zakladki { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 18px; padding: 6px; border: 1px solid var(--line); border-radius: 12px; background: var(--soft); }
.pk_zakladki a { flex: 1 1 auto; text-align: center; padding: 10px 16px; border-radius: 8px; color: var(--text); font-weight: 700; text-decoration: none; font-family: var(--font-display); letter-spacing: 0.03em; text-transform: uppercase; font-size: 0.95rem; }
.pk_zakladki a:hover { background: var(--soft-2); }
.pk_zakladki a.on { background: var(--gold); color: var(--accent-ink); box-shadow: 0 0 20px -8px var(--gold); }
/* Tryb „Rezerwuj": kalendarz i rezerwacja na całej szerokości. */
.cols_pokoj.pk_pelna { grid-template-columns: minmax(0, 1fr); }
.cols_pokoj.pk_pelna > div:first-child { display: none; }
.cols_pokoj.pk_pelna > aside .panel.sticky { position: static; }
.cols_pokoj.pk_pelna .mcal_grid { gap: 8px; }
.cols_pokoj.pk_pelna .mcal_d { min-height: 64px; font-size: 1.05rem; }
.cols_pokoj.pk_pelna .hours { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.cols_pokoj.pk_pelna .bslot { min-height: 60px; }
.nagrody_pigulki { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.nagroda_pigulka { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--gold); color: var(--gold-text); font-size: 0.82rem; font-weight: 700; text-decoration: none; background: var(--accent-soft); }
.nagroda_pigulka svg { width: 18px; height: 18px; }
.nagroda_pigulka--terpeca { border-color: #5ecbff; color: #9fe0ff; background: rgba(94, 203, 255, 0.12); }
.nagrody-tytul, .cennik_tytul { margin: 0 0 14px; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 1.9rem); letter-spacing: 0.02em; text-transform: uppercase; }
.nagrody-tytul span { color: var(--gold); }
.nagrody-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.nagroda { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(0, 0, 0, 0.25); }
.nagroda-ikona { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--gold); color: var(--gold); box-shadow: 0 0 16px -4px var(--gold); }
.nagroda-ikona svg { width: 24px; height: 24px; }
.nagroda--terpeca .nagroda-ikona { border-color: #5ecbff; color: #5ecbff; box-shadow: 0 0 16px -4px #5ecbff; }
.nagroda-tekst { display: grid; gap: 2px; flex: 1 1 auto; }
.nagroda-tekst strong { font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.03em; text-transform: uppercase; }
.nagroda-tekst em { font-style: normal; color: var(--gold-text); font-weight: 700; }
.nagroda-tekst > span { color: var(--muted); font-size: 0.9rem; }
.nagroda-link { color: var(--gold-text); font-size: 0.85rem; font-weight: 700; }
.cennik_siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.cennik_karta { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(0, 0, 0, 0.25); }
.cennik_karta h3 { margin: 0 0 8px; font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--gold); }
.cennik_karta table { width: 100%; border-collapse: collapse; }
.cennik_karta td { padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 0.92rem; }
.cennik_karta td:last-child { text-align: right; }
.cennik_karta tr:last-child td { border-bottom: 0; }
.dojazd_siatka { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 16px; align-items: start; }
.dojazd_siatka iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; min-height: 260px; }
@media (max-width: 760px) { .dojazd_siatka { grid-template-columns: 1fr; } .pk_zakladki a { flex: 1 1 40%; padding: 9px 10px; font-size: 0.85rem; } }

/* Rezerwacja na żywo: lekkie przygaszenie w trakcie ładowania dnia, komunikat o zajętej godzinie. */
.rez-dzien { transition: opacity .18s; }
.rez-dzien.rez-laduje { opacity: .45; pointer-events: none; }
.rez-komunikat { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; background: var(--warn-bg); color: var(--warn); font-size: 13.5px; font-weight: 600; }

/* Wybrana lokalizacja mruga po kliknięciu godziny — przy dwóch adresach to
   najczęstsza pomyłka, a mail z potwierdzeniem przychodzi za późno. */
.lok-rez-chip {
  display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px;
  background: rgba(245, 192, 74, 0.14); border: 1px solid rgba(245, 192, 74, 0.5);
  color: var(--gold, #f5c04a); font-weight: 800; font-size: 0.85em; white-space: nowrap;
}
@keyframes lok-mrugniecie {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 192, 74, 0); }
  20%, 60% { box-shadow: 0 0 0 4px rgba(245, 192, 74, 0.45); border-color: rgba(245, 192, 74, 0.9); }
  40%, 80% { box-shadow: 0 0 0 0 rgba(245, 192, 74, 0.1); }
}
.lok-rezerwacja.lok-mruga { animation: lok-mrugniecie 1.6s ease-in-out 2; }
.lok-rezerwacja.lok-mruga .lok-rez-chip { animation: lok-chip-mruga 0.8s ease-in-out 4; }
@keyframes lok-chip-mruga {
  0%, 100% { background: rgba(245, 192, 74, 0.14); color: var(--gold, #f5c04a); }
  50% { background: var(--gold, #f5c04a); color: #14100a; }
}
@media (prefers-reduced-motion: reduce) {
  .lok-rezerwacja.lok-mruga, .lok-rezerwacja.lok-mruga .lok-rez-chip { animation: none; }
  .lok-rezerwacja.lok-mruga { box-shadow: 0 0 0 3px rgba(245, 192, 74, 0.5); }
}

/* Nagłówek zamówienia: co i GDZIE rezerwujesz. */
.zam-lok {
  margin: 0 0 18px; padding: 18px 22px; border-radius: 14px;
  background: linear-gradient(135deg, rgba(245, 192, 74, 0.16), rgba(245, 192, 74, 0.05));
  border: 1px solid rgba(245, 192, 74, 0.55);
}
.zam-lok-kicker { margin: 0 0 6px; color: var(--gold, #f5c04a); font-size: 0.9rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.zam-lok-nazwa { margin: 0; font-size: clamp(1.4rem, 3.2vw, 2rem); font-weight: 900; line-height: 1.15; }
.zam-lok-nazwa span { display: block; margin-top: 4px; font-size: 1rem; font-weight: 500; opacity: 0.85; }
.zam-lok-uwaga { margin: 10px 0 0; color: var(--bad, #e5484d); font-weight: 700; }

/* Otwarty kalendarz = lokalizacja mieni się cały czas, żeby na każdym kroku
   było wiadomo, gdzie się jedzie. Mocniejsze mrugnięcie zostaje przy wyborze godziny. */
@keyframes lok-mieni {
  0%, 100% { border-color: rgba(245, 192, 74, 0.35); box-shadow: 0 0 0 0 rgba(245, 192, 74, 0); }
  50% { border-color: rgba(245, 192, 74, 0.9); box-shadow: 0 0 22px -6px rgba(245, 192, 74, 0.75); }
}
@keyframes lok-chip-mieni {
  0%, 100% { background: rgba(245, 192, 74, 0.14); color: var(--gold, #f5c04a); }
  50% { background: rgba(245, 192, 74, 0.45); color: #14100a; }
}
.lok-rezerwacja { animation: lok-mieni 3.2s ease-in-out infinite; }
.lok-rezerwacja .lok-rez-chip { animation: lok-chip-mieni 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .lok-rezerwacja, .lok-rezerwacja .lok-rez-chip { animation: none; }
}

/* Uwaga pod cennikiem: dopłata za ostatnie miejsce i warunki. */
.cennik_uwaga {
  margin: 10px 0 0; padding: 9px 12px; border-radius: 10px;
  background: rgba(245, 192, 74, 0.1); border-left: 3px solid rgba(245, 192, 74, 0.7);
  color: var(--text); font-size: 0.9rem; line-height: 1.45;
}

/* Ostrzeżenie o dwóch lokalizacjach w koszyku. */
.koszyk-dwie-lok ul { margin: 8px 0; padding-left: 20px; }
.koszyk-dwie-lok li { margin: 2px 0; }

/* Dodatkowe miejsce ponad zalecaną liczbę osób. */
.osoba--dodaj { width: auto; padding: 0 14px; font-size: 0.9rem; border-style: dashed; }
.extra-box {
  margin-top: 12px; padding: 14px 16px; border-radius: 12px;
  background: rgba(245, 192, 74, 0.09); border: 1px solid rgba(245, 192, 74, 0.55);
}
.extra-tytul { margin: 0 0 6px; font-weight: 800; color: var(--gold, #f5c04a); }
.extra-tresc { margin: 0 0 10px; line-height: 1.5; }
.extra-zgoda { display: flex; gap: 9px; align-items: flex-start; margin: 8px 0; line-height: 1.45; cursor: pointer; }
.extra-zgoda input { margin-top: 3px; flex: none; }
.rez-regulamin { display: flex; gap: 9px; align-items: flex-start; margin: 14px 0 0; line-height: 1.45; cursor: pointer; }
.rez-regulamin input { margin-top: 3px; flex: none; }

/* Dyskretna plakietka „masz włączony filtr lokalizacji" — żeby pusty katalog
   nie wyglądał na brak oferty, tylko na włączony filtr. Ma być zauważalna,
   ale nie ma zasłaniać strony. */
.lok-pasek { padding: 10px 0 0; }
.lok-pasek-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px;
  background: rgba(245, 192, 74, 0.1); border: 1px solid rgba(245, 192, 74, 0.35);
  font-size: 0.82rem; color: var(--muted, #9aa3b2); line-height: 1.3;
}
.lok-pasek-chip svg { width: 14px; height: 14px; color: var(--gold, #f5c04a); flex: none; }
.lok-pasek-chip strong { color: var(--gold, #f5c04a); font-weight: 700; }
.lok-pasek-chip a { margin-left: 4px; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.lok-pasek-chip a:hover { color: var(--gold, #f5c04a); }

/* Dzień bez wolnych godzin: zamiast pustki — najbliższy termin i wyjścia. */
.dzien-pusto {
  margin: 12px 0; padding: 14px 16px; border-radius: 12px;
  background: rgba(245, 192, 74, 0.08); border: 1px solid rgba(245, 192, 74, 0.4);
}
.dzien-pusto p { margin: 0 0 6px; }
.dzien-pusto-tytul { font-weight: 800; }
.dzien-pusto-akcje { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* Trzy kroki rezerwacji: dzień → godzina → liczba osób → regulamin.
   To jedyne miejsce, w którym widać, czego jeszcze brakuje. Krok zrobiony
   gaśnie na zielono, krok bieżący pulsuje — a komunikat pod przyciskami
   mówi to samo słowami, gdy ktoś spróbuje rezerwować przed czasem. */
.rez-kroki {
  display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 12px; padding: 0;
  list-style: none; font-size: 0.85rem; color: var(--muted);
}
.rez-kroki li { display: inline-flex; align-items: center; gap: 6px; opacity: .55; }
.rez-kroki span {
  display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--line-2); color: var(--text); font-size: .7rem; font-weight: 900;
}
.rez-kroki .krok--zrobiony { opacity: 1; }
.rez-kroki .krok--zrobiony span { background: var(--ok); color: #06281e; }
.rez-kroki .krok--teraz { opacity: 1; color: var(--text); font-weight: 700; }
.rez-kroki .krok--teraz span { background: var(--accent); color: var(--accent-ink); animation: krokPuls 1.7s ease-in-out infinite; }
@keyframes krokPuls {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 201, 119, .6); }
  50%      { box-shadow: 0 0 0 5px rgba(244, 201, 119, 0); }
}

/* Czego brakuje — zdaniem, nad przyciskiem, w który klient właśnie kliknął. */
.rez-blad {
  margin: 12px 0 0; padding: 9px 12px; border-radius: 8px;
  background: var(--warn-bg); color: var(--warn); font-size: .88rem; font-weight: 700;
}
/* Obwódka na brakującym kroku: samo zdanie bywa niezauważone, gdy kalendarz
   jest wyżej niż przycisk. */
.rez-brak { border-radius: 12px; box-shadow: 0 0 0 2px rgba(244, 201, 119, .55); animation: rezBrak 1.1s ease-out 2; }
@keyframes rezBrak {
  0%, 100% { box-shadow: 0 0 0 2px rgba(244, 201, 119, .55); }
  30%      { box-shadow: 0 0 0 5px rgba(244, 201, 119, .5); }
}
@media (prefers-reduced-motion: reduce) {
  .rez-kroki .krok--teraz span, .rez-brak { animation: none; }
  .rez-brak { box-shadow: 0 0 0 3px rgba(244, 201, 119, .5); }
}

/* Jak grupa rozłoży się na stanowiskach (Quizuj) — zdanie pod liczbą osób. */
.osoby-stanowiska {
  margin: 10px 0 0; padding: 8px 11px; border-radius: 8px;
  background: var(--ok-bg); color: var(--ok); font-size: 0.86rem; font-weight: 700;
}

/* =====================================================================
 * PANEL NA TELEFONIE
 *
 * Panel operatora i panel firmy stoją na szerokich tabelach — na telefonie
 * rozpychały całą stronę i trzeba było przesuwać ją w bok, żeby przeczytać
 * nagłówek. Tabela dostaje własną ramkę z przewijaniem w poziomie (opakowuje
 * ją skrypt), więc reszta strony zostaje na swoim miejscu.
 * ===================================================================== */
.tabela-przewijana { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 860px) {
  .tabela-przewijana { margin-inline: -4px; padding-inline: 4px; }
  /* Poniżej tej szerokości kolumny zlewają się w kreski — lepsze jest
     przewijanie niż nieczytelna tabela wciśnięta na siłę. */
  .tabela-przewijana .table { min-width: 560px; }
  .tabela-przewijana .table th, .tabela-przewijana .table td { padding: 10px; }
}

@media (max-width: 760px) {
  /* Kafelki liczb: dwa w rzędzie zamiast jednego na cały ekran. */
  .stat_grid, .stats, .kpi_grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .stat, .stat_card, .kpi { padding: 12px 14px; }
  .stat .big, .stat_card .big, .kpi strong { font-size: 1.5rem; }
  /* Nagłówek listy: tytuł nad przyciskami, nie obok. */
  .list_head { flex-direction: column; align-items: stretch; gap: 10px; }
  .list_head .chips { justify-content: flex-start; }
  /* Formularze: jedna kolumna i pola pod palec (16 px = iOS nie przybliża). */
  .form_grid2, .form_grid3 { grid-template-columns: 1fr !important; }
  .panel input, .panel select, .panel textarea { font-size: 16px; }
  .panel { padding: 14px; }
  /* Paski akcji nad tabelą zawijają się zamiast wystawać poza ekran. */
  .filters, .toolbar, .akcje_rzad { flex-wrap: wrap; }
  /* Układy dwukolumnowe panelu mają wpisaną liczbę kolumn W ZNACZNIKU
     (style="grid-template-columns:360px minmax(0,1fr)"), a styl z pliku
     takiego zapisu nie przebije — stąd !important. Bez tego na telefonie
     zostawały dwie kolumny po 360 px i pół panelu wisiało poza ekranem. */
  .cols { grid-template-columns: minmax(0, 1fr) !important; gap: 14px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; }
  /* Gotowe polecenia (cron, ścieżki) łamią się zamiast rozpychać stronę. */
  .panel code, .panel pre { overflow-wrap: anywhere; white-space: pre-wrap; }
  /* Wiersz cennika (od–do osób i cena) na telefonie jako dwie kolumny. */
  .cennik_row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; }
}

/* =====================================================================
 * VOUCHER NA GRAFICE
 *
 * Grafika (2000×943) ma wpisane na stałe napisy DLA:, NUMER:, WAŻNY DO:
 * i zostawione za nimi puste miejsce. Wartości kładziemy w tych miejscach
 * w PROCENTACH obrazka, więc trzymają się go przy każdej szerokości —
 * na telefonie, na ekranie i na wydruku.
 * ===================================================================== */
.vch { position: relative; margin: 24px 0 18px; border-radius: 10px; overflow: hidden; line-height: 1; }
.vch-tlo { display: block; width: 100%; height: auto; }
.vch-pole {
  position: absolute; color: #fff; font-weight: 800; white-space: nowrap;
  font-family: var(--font-display, inherit); letter-spacing: 0.02em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
  font-size: clamp(11px, 2.05vw, 30px);
}
/* Współrzędne odczytane z grafiki: wartość zaczyna się tuż za dwukropkiem. */
.vch-dla   { left: 59.5%; top: 38.2%; }
.vch-numer { left: 58.0%; top: 49.8%; }
.vch-wazny { left: 58.5%; top: 61.2%; }
/* Karta na dowolną kwotę (wzór „karta”): nominał jak na kartach 50–250 zł — różowy, z zielonym cieniem, ukośnie. */
@font-face { font-family: "Rammetto One"; src: url("/assets/fonts/RammettoOne-Regular.ttf") format("truetype"); font-display: swap; }
.vch { container-type: inline-size; }
.vch-kwota {
  position: absolute; left: 16.5%; top: 27%; transform: translate(-50%, -50%) rotate(-12deg);
  font-family: "Rammetto One", var(--font-display, inherit); font-size: 7.4cqw; line-height: 1; white-space: nowrap;
  color: #f768c3; text-shadow: -1px 1px 0 #1e7a63, -2px 2px 0 #1e7a63, -3px 3px 0 #1e7a63, -4px 3px 0 #1e7a63;
}
.vch-kwota small { font-size: 0.42em; vertical-align: 1.3em; margin-left: 0.12em; }
/* Wzory okolicznościowe: wiersz „Wartość: 150 zł” / „Na grę: …” pod polami. */
.vch-napis { left: 56.5%; top: 73.2%; transform: translateX(-50%); font-size: clamp(9px, 1.6vw, 24px); }

/* Kod zabezpieczający: prawy dolny róg, na ciemnej plakietce, żeby był
   czytelny niezależnie od tego, co jest pod nim na zdjęciu. */
/* Tuż obok neonu FunRoom, a nie na nim: logo jest wtopione w grafikę i nie
   da się go przesunąć, więc plakietka staje po jego lewej — dalej w prawym
   dolnym rogu, ale nic nie zasłania. */
.vch-kz {
  position: absolute; right: 21%; bottom: 3%;
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  padding: 0.6% 1.1%; border-radius: 6px;
  background: rgba(8, 9, 14, 0.72); border: 1px solid rgba(255, 255, 255, 0.35);
}
.vch-kz small { color: rgba(255, 255, 255, 0.75); font-size: clamp(5px, 0.85vw, 12px); letter-spacing: 0.08em; }
.vch-kz strong { color: #fff; font-size: clamp(9px, 1.7vw, 25px); letter-spacing: 0.12em; font-weight: 900; }
.vch-kz--ukryty strong { letter-spacing: 0.2em; }

/* Wydruk: sam voucher, bez nagłówka strony, panelu i przycisków. */
@media print {
  body > *:not(.wrap), .el-header, .el-stopka, .site_header, .site_footer,
  .vch-opis, .vch-druk, .lok-pasek { display: none !important; }
  .wrap { max-width: none !important; padding: 0 !important; margin: 0 !important; }
  .vch { margin: 0; border-radius: 0; break-inside: avoid; }
  .vch-pole { text-shadow: none; }
}

/* Wybór wzoru vouchera w panelu: miniatury, bo nazwa „pixeluj-duza" nikomu
   nic nie mówi, a grafikę rozpoznaje się od razu. */
.vch-wybor { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 6px; }
.vch-wzor { display: block; cursor: pointer; border: 2px solid var(--line-2); border-radius: 8px; padding: 5px; }
.vch-wzor:hover { border-color: var(--accent); }
.vch-wzor input { position: absolute; opacity: 0; pointer-events: none; }
.vch-wzor:has(input:checked) { border-color: var(--accent); background: var(--accent-soft, rgba(244,201,119,.12)); }
.vch-wzor img { display: block; width: 100%; height: auto; border-radius: 4px; }
.vch-wzor span { display: block; margin-top: 4px; font-size: 12px; color: var(--muted); line-height: 1.25; }
.vch-wzor-pusty { display: grid; place-items: center; min-height: 64px; font-weight: 700; color: var(--text); }

/* Oferta voucherów: karta to GRAFIKA, którą obdarowany dostanie na wydruku,
   a nie sama kwota. Człowiek kupujący prezent wybiera oczami. */
.vof-siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.vof {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
}
.vof-foto { display: block; width: 100%; height: auto; }
/* Treść rozciąga się do wysokości najwyższej karty w rzędzie, a cena, imię obdarowanego i przycisk
   są dociśnięte do dołu — w każdej karcie w tym samym miejscu, niezależnie od długości opisu (12.10.2026). */
.vof-tresc { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1 1 auto; }
.vof-nazwa { font-size: 1.05rem; line-height: 1.2; }
.vof-opis { color: var(--muted); font-size: 0.88rem; line-height: 1.4; }
.vof-cena { margin-top: auto; padding-top: 2px; font-size: 1.5rem; font-weight: 800; color: var(--accent-text, var(--accent)); }
.vof .btn { align-self: flex-start; margin-top: 6px; }
@media (max-width: 560px) { .vof-siatka { grid-template-columns: 1fr; } }

/* Podgląd vouchera na żywo (vouchery.php, assets/vouchery.js): imię, liczba osób i kwota nałożone na grafikę
   w tych samych miejscach, w których wpisze je plik PDF. Rozmiary w cqw — skalują się z obrazkiem. */
@font-face { font-family: "Skranji"; src: url("/assets/fonts/Skranji-Bold.ttf") format("truetype"); font-weight: 700; font-display: swap; }
@font-face { font-family: "VchOswald"; src: url("/assets/fonts/Oswald-SemiBold.ttf") format("truetype"); font-display: swap; }
.vof-podglad { position: relative; container-type: inline-size; line-height: 1; }
.vof-podglad .vof-foto { display: block; }
.vp-dla { position: absolute; left: 59.5%; top: 42.5%; transform: translateY(-80%); max-width: 32%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; color: #fff; font-family: "VchOswald", var(--font-display, sans-serif); font-size: 3.4cqw; text-shadow: 0 1px 4px rgba(0,0,0,.7); }
.vp-linia { position: absolute; left: 53.2%; top: 77.4%; transform: translate(-50%, -80%); white-space: nowrap; max-width: 44%;
  color: #f6efe2; font-family: "Skranji", var(--font-display, sans-serif); font-weight: 700; font-size: 3.05cqw; letter-spacing: .03em;
  text-shadow: .1cqw .15cqw 0 rgba(10,10,20,.55); }
.vp-kwota { position: absolute; left: 16.5%; top: 27%; transform: translate(-50%, -50%) rotate(-12deg); white-space: nowrap;
  font-family: "Rammetto One", var(--font-display, sans-serif); font-size: 7.4cqw; color: #f768c3;
  text-shadow: -.1cqw .1cqw 0 #1e7a63, -.2cqw .2cqw 0 #1e7a63, -.3cqw .25cqw 0 #1e7a63; }
.vp-kwota small { font-size: .42em; vertical-align: 1.3em; margin-left: .12em; }
.vof-sale { display: flex; flex-wrap: wrap; gap: 6px; }
.vof-chip { border: 1px solid var(--line-2); background: var(--soft); color: var(--text); border-radius: 999px; padding: 6px 12px;
  font: inherit; font-size: .86rem; cursor: pointer; }
.vof-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft, rgba(244,201,119,.14)); font-weight: 700; }
.vof-osoby { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .9rem; }
.vof-osoby output { min-width: 2ch; text-align: center; font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.vof-krok { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line-2); background: var(--soft); color: var(--text);
  font-size: 1.2rem; line-height: 1; cursor: pointer; }
.vof-krok:disabled { opacity: .35; cursor: default; }
.vof-skarpetki { display: flex; gap: 8px; align-items: flex-start; font-size: .88rem; cursor: pointer; }
.vof-wlasna span { display: block; margin-bottom: 4px; color: var(--muted); font-size: .82rem; }
.vof-wlasna input { width: 100%; max-width: 220px; height: 40px; padding: 0 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-2); background: var(--soft); color: var(--text); font: inherit; }
.vof-karta { max-width: 760px; }
.vof-chip:focus-visible, .vof-krok:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.vof-skarpetki[hidden], .vp-linia[hidden] { display: none; }

/* Imię obdarowanego przy karcie vouchera — pytanie zadane TAM, gdzie klient
   wybiera prezent, a nie dopiero przy płatności. */
.vof-dla { display: block; margin-top: 4px; }
.vof-dla span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 0.82rem; }
.vof-dla input, .vcard-dla {
  width: 100%; height: 40px; padding: 0 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-2); background: var(--soft); color: var(--text);
  font-family: inherit; font-size: 15px;
}
.vcard-dla { margin: 6px 0 4px; }

/* Odpowiedź na wpisany kod — pod polem, zamiast przeładowania strony. */
.kod-info {
  margin: 10px 0 0; padding: 9px 12px; border-radius: 8px;
  background: var(--ok-bg); color: var(--ok); font-size: 0.88rem; font-weight: 700;
}
.kod-info--zly { background: var(--warn-bg); color: var(--warn); }

/* To samo, co w układzie „el": warstwa tła przyklejona do okna
   (background-attachment: fixed) każe przeglądarce przemalowywać całe tło przy
   każdej klatce przewijania — na telefonie widać wtedy szarpanie i przebłyski
   bieli. Kładziemy ją na osobnym, przyklejonym pseudoelemencie, a kanwie dajemy
   ciemny kolor, żeby przy „gumowym" przewijaniu nie było spod spodu bieli. */
html { background: var(--bg); }
body {
  background:
    linear-gradient(180deg, var(--veil-0) 0%, var(--veil-35) 38%, var(--bg) 78%),
    var(--bg);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: var(--hero-img) top center / min(1900px, 165vw) auto no-repeat;
}

/* Podpowiedź dla większej ekipy pod wyborem liczby osób. */
.osoby-wiecej { margin: 10px 0 0; color: var(--muted); font-size: 0.85rem; line-height: 1.45; }
.osoby-wiecej a { color: var(--accent-text, var(--accent)); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

/* Warunek wejścia (skarpetki) przy wyborze terminu — wygląda jak wybór
   scenariusza, bo to jest wybór, a nie informacja do przeczytania. */
.warunek-box { border: 1px solid var(--warn); background: var(--warn-bg); }
.warunek-box .wybor_head { align-items: center; gap: 8px; }
.warunek-box .wybor_opt { background: rgba(0, 0, 0, 0.18); }

/* Ile par dokupują — pole widoczne dopiero po wyborze „dokupujemy". */
.warunek-ile { margin: 6px 0 10px; padding-left: 30px; }
.warunek-ile label { display: block; margin-bottom: 4px; font-size: 0.85rem; color: var(--text); font-weight: 600; }
.warunek-ile input {
  width: 90px; height: 40px; padding: 0 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-2); background: var(--soft); color: var(--text);
  font-family: inherit; font-size: 16px;
}
.warunek-ile .form_hint { display: block; margin-top: 4px; }

/* Gra terenowa: godziny startu z podglądem zestawów, a pod nimi własna godzina. */
.teren { margin-top: 12px; }
.teren input[data-teren-godz] {
  width: 140px; height: 46px; padding: 0 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-2); background: var(--soft); color: var(--text);
  font-family: inherit; font-size: 17px; font-weight: 700; letter-spacing: .04em;
}
.teren-inna { margin-top: 12px; }
.teren-inna summary {
  cursor: pointer; display: inline-block; padding: 6px 0;
  color: var(--accent); font-weight: 700; font-size: 0.92rem;
}
.teren-inna[open] summary { margin-bottom: 6px; }
.teren-inna .form_row { margin-bottom: 0; }
.teren-stan {
  margin: 10px 0 0; padding: 9px 12px; border-radius: 8px;
  background: var(--ok-bg); color: var(--ok); font-size: 0.88rem; font-weight: 700;
}
.teren-stan--zle { background: var(--warn-bg); color: var(--warn); }
.teren-pasek { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.teren-kafel {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  min-width: 74px; padding: 7px 9px; cursor: pointer;
  border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--soft); color: var(--text); font-family: inherit;
}
.teren-kafel strong { font-size: 15px; }
.teren-kafel small { color: var(--muted); font-size: 11.5px; }
.teren-kafel:hover:not(:disabled) { border-color: var(--accent); }
.teren-kafel--minal, .teren-kafel:disabled { opacity: .35; cursor: default; }
.teren-kafel--brak { border-style: dashed; }
.teren-kafel--brak small { color: var(--warn); }
.teren-kafel.on { background: linear-gradient(140deg, var(--accent-2), var(--accent)); border-color: transparent; color: var(--accent-ink); }
.teren-kafel.on small { color: var(--accent-ink); opacity: .72; }

/* Hall of Fame: rekordy pokoju i zdjęcia ekip. */
.hof_kolumny { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.hof_tytul { font-size: 15px; margin: 4px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.hof_lista { list-style: none; margin: 0; padding: 0; }
.hof_poz { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.hof_poz:last-child { border-bottom: 0; }
.hof_m { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--soft); }
.hof_1 .hof_m { background: #f5c04a; color: #1f1400; }
.hof_2 .hof_m { background: #c9d1d9; color: #111; }
.hof_3 .hof_m { background: #d99a6c; color: #1f1000; }
.hof_n { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hof_n small { display: block; font-weight: 400; color: var(--muted); font-size: 12px; }
.hof_w { font-variant-numeric: tabular-nums; font-size: 17px; }
.hof_zdjecia { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 16px; }
.hof_zdjecia figure { margin: 0; }
.hof_zdjecia img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; display: block; }
.hof_zdjecia figcaption { font-size: 12px; color: var(--muted); margin-top: 4px; }
.hof_pokoj { margin-bottom: 18px; }
.hof_pokoj h2 a { color: inherit; }

/* Regulaminy (regulaminy.php, regulamin.php) — przeniesione dokumenty */
.regulaminy_spis { list-style: none; padding: 0; display: grid; gap: 10px; margin: 14px 0 8px; }
.regulaminy_spis li { border: 1px solid var(--line, #ddd); border-radius: 10px; padding: 10px 14px; }
.regulamin_dok { border-top: 2px solid var(--line, #ddd); margin-top: 28px; padding-top: 8px; scroll-margin-top: 80px; }
.regulamin_tytul { font-size: 1.5em; }
.regulamin ol, .regulamin ul { padding-left: 22px; }
.regulamin li { margin: 4px 0; }

/* =====================================================================
   NOWOCZESNY WYGLĄD KALENDARZA REZERWACJI (#rezerwacja.rez-nowy)
   Panel operatora → Rezerwacje i zadatki → Wygląd kalendarza. Klasyczny
   wygląd zostaje bez zmian. Komputer: miesiąc po lewej, godziny po prawej,
   podsumowanie z ceną na dole. Telefon: pasek dni, duże godziny, pasek
   z ceną i „Rezerwuję" przyklejony do dołu ekranu.
   ===================================================================== */
#rezerwacja#rezerwacja.rez-nowy { --rz-akc: var(--gold, var(--accent)); --rz-akc2: #ffe38f; --rz-linia: rgba(255, 255, 255, .09); --rz-ok: #3ee0a6; --rz-malo: #ff9d4a; }
#rezerwacja.rez-nowy .rez-kroki { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; list-style: none; padding: 0; margin: 12px 0 16px; }
#rezerwacja.rez-nowy .rez-kroki li { border-top: 4px solid rgba(255, 255, 255, .12); padding-top: 6px; font-size: .78rem; font-weight: 700; }
#rezerwacja.rez-nowy .rez-kroki li span { display: none; }
#rezerwacja.rez-nowy .rez-kroki li.krok--zrobiony { border-color: var(--rz-ok); color: var(--rz-ok); }
#rezerwacja.rez-nowy .rez-kroki li.krok--teraz { border-color: var(--rz-akc); color: var(--rz-akc); }

/* kalendarz miesiąca: zawsze otwarty, kropki zamiast liczb */
#rezerwacja.rez-nowy .mcal { border-radius: 16px; padding: 16px; }
#rezerwacja.rez-nowy .mcal_grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
#rezerwacja.rez-nowy .mcal_d { border-radius: 11px; position: relative; min-height: 44px; font-size: .95rem; padding: 4px 0; }
#rezerwacja.rez-nowy .mcal_d i { font-size: 0; display: block; width: 6px; height: 6px; border-radius: 50%; margin: 3px auto 0; background: var(--rz-ok); }
#rezerwacja.rez-nowy .mcal_d--malo i { background: var(--rz-malo); }
#rezerwacja.rez-nowy .mcal_d.on i { background: #14100a; }
#rezerwacja.rez-nowy .mcal-legenda { display: flex; gap: 14px; margin-top: 10px; font-size: .78rem; opacity: .75; }
#rezerwacja.rez-nowy .mcal-legenda i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
#rezerwacja.rez-nowy .mcal-legenda .k-duzo { background: var(--rz-ok); } #rezerwacja.rez-nowy .mcal-legenda .k-malo { background: var(--rz-malo); }
#rezerwacja.rez-nowy .rez-skroty { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
#rezerwacja.rez-nowy .rez-skrot { border: 1px solid var(--rz-linia); border-radius: 999px; padding: 7px 14px; font-weight: 700; font-size: .88rem; color: inherit; text-decoration: none; }
#rezerwacja.rez-nowy .rez-skrot.on, #rezerwacja.rez-nowy .rez-skrot:hover { background: var(--rz-akc); color: #14100a; border-color: transparent; text-decoration: none; }

/* godziny */
#rezerwacja.rez-nowy .rez-dzien-tytul { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 4px 0 6px; }
#rezerwacja.rez-nowy .rez-dzien-tytul strong { font-family: var(--font-display, inherit); font-size: 1.35rem; }
#rezerwacja.rez-nowy .rez-dzien-tytul span { font-size: .82rem; opacity: .6; }
#rezerwacja.rez-nowy .hours { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; }
#rezerwacja.rez-nowy .hour { border-radius: 14px; padding: 12px 14px; text-align: left; font-family: var(--font-display, inherit); font-size: 1.35rem; min-height: 64px; }
#rezerwacja.rez-nowy .hour small { display: block; font-family: var(--font-body, inherit); font-size: .78rem; font-weight: 800; margin-top: 2px; }
#rezerwacja.rez-nowy .hour.past { display: none; }
/* Zajęta godzina zostaje WIDOCZNA — klik zapisuje na listę oczekujących („damy znać, gdy się zwolni"). */
#rezerwacja.rez-nowy .hour.waitable { opacity: 1; cursor: pointer; text-decoration: none; background: rgba(255, 157, 74, .06);
  border: 1px dashed rgba(255, 157, 74, .55); color: rgba(255, 255, 255, .72); }
#rezerwacja.rez-nowy .hour.waitable small { color: rgba(255, 255, 255, .5); }
#rezerwacja.rez-nowy .hour.waitable .hour_bell { display: block; font-family: var(--font-body, inherit); font-size: .72rem; font-weight: 800; color: #ff9d4a; margin-top: 2px; }
#rezerwacja.rez-nowy .hour.waitable:hover { border-color: #ff9d4a; background: rgba(255, 157, 74, .12); }
#rezerwacja.rez-nowy .rez-minelo { font-size: .82rem; opacity: .55; margin: 8px 0 0; }

/* osoby: − 4 + */
#rezerwacja.rez-nowy .osoby-stepper { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 8px 0 4px; }
#rezerwacja.rez-nowy .osoby-stepper button { width: 48px; height: 48px; border-radius: 14px; border: 1px solid rgba(245, 192, 74, .45); background: transparent;
  color: var(--rz-akc); font-size: 1.6rem; font-weight: 800; cursor: pointer; }
#rezerwacja.rez-nowy .osoby-stepper button:disabled { opacity: .3; cursor: default; }
#rezerwacja.rez-nowy .osoby-stepper strong { font-family: var(--font-display, inherit); font-size: 2rem; min-width: 42px; text-align: center; }
#rezerwacja.rez-nowy .osoby-stepper-info { font-size: .82rem; opacity: .6; }
#rezerwacja.rez-nowy .osoby_btns { display: none; }   /* „+" przy liczniku robi też „dodaj osobę" */

/* podsumowanie */
#rezerwacja.rez-nowy #booking_form { border-top: 1px solid var(--rz-linia); padding-top: 14px; }
#rezerwacja.rez-nowy #chosen_price { font-family: var(--font-display, inherit); font-size: 1.9rem; color: var(--rz-akc); }
#rezerwacja.rez-nowy .rez-dol { display: none; }

#rezerwacja#rezerwacja.rez-nowy { container-type: inline-size; }
@container (min-width: 760px) {
  /* szeroki panel (zakładka „Rezerwuj"): miesiąc po lewej, wszystko o godzinach po prawej */
  #rezerwacja.rez-nowy .rez-dzien { display: grid; grid-template-columns: minmax(300px, 360px) minmax(0, 1fr); column-gap: 28px; align-items: start; }
  #rezerwacja.rez-nowy .rez-dzien > * { grid-column: 2; min-width: 0; }
  #rezerwacja.rez-nowy .rez-dzien > .mcal-wiecej, #rezerwacja.rez-nowy .rez-dzien > .rez-skroty { grid-column: 1; }
  #rezerwacja.rez-nowy .rez-dzien > .rez-skroty { grid-row: 1; margin-top: 0; }
  #rezerwacja.rez-nowy .mcal-wiecej > summary { display: none; }
  #rezerwacja.rez-nowy .rez-dzien > .mcal-wiecej { grid-row: 2 / span 30; }
  #rezerwacja.rez-nowy .rez-dzien > .dni7 { display: none !important; }
  #rezerwacja.rez-nowy #booking_form button[type="submit"] { width: auto !important; min-width: 220px; display: inline-flex; margin-right: 8px; }
}
@container (max-width: 759px) {
  /* wąski panel (kolumna obok opisu, telefon): pasek dni, kalendarz rozwijany, godziny po 3 */
  #rezerwacja.rez-nowy .hours { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  #rezerwacja.rez-nowy .hour { text-align: center; padding: 10px 4px; font-size: 1.2rem; min-height: 60px; }
}
@media (max-width: 899px) {
  /* telefon: pasek z ceną i „Rezerwuję" na dole ekranu */
  #rezerwacja.rez-nowy .rez-dol { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: rgba(12, 11, 9, .96); border-top: 1px solid rgba(245, 192, 74, .3);
    -webkit-backdrop-filter: none; transition: transform .2s ease; }
  #rezerwacja.rez-nowy .rez-dol.schowany { transform: translateY(110%); }
  #rezerwacja.rez-nowy .rez-dol small { display: block; font-size: .78rem; opacity: .65; }
  #rezerwacja.rez-nowy .rez-dol strong { font-family: var(--font-display, inherit); font-size: 1.45rem; color: var(--rz-akc); }
  #rezerwacja.rez-nowy .rez-dol .btn { min-height: 48px; padding: 0 22px; white-space: nowrap; }
}

/* Język gry z flagami (pierwszy krok rezerwacji) */
.rez-jezyk { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 0 0 12px; font-size: .9rem; }
.rez-jezyk > span { opacity: .75; margin-right: 2px; }
.rez-flaga { display: inline-flex; gap: 6px; align-items: center; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px;
  padding: 6px 12px; cursor: pointer; font-weight: 700; }
.rez-flaga input { position: absolute; opacity: 0; pointer-events: none; }
.rez-flaga span { font-size: 1.2em; line-height: 1; }
.rez-flaga:has(input:checked) { border-color: var(--gold, var(--accent)); background: rgba(245, 192, 74, .12); }

/* LICZNIK OSÓB „− 12 +" i KALENDARZ MIESIĄCA w okienku (strony pakietów, assets/app.js). */
.licznik { display: inline-flex; align-items: center; gap: 8px; }
.licznik button { width: 44px; height: 44px; border-radius: 12px; border: 1px solid rgba(245, 192, 74, .45); background: transparent;
  color: var(--text); font-size: 22px; font-weight: 700; cursor: pointer; line-height: 1; }
.licznik button:hover { background: rgba(245, 192, 74, .12); border-color: var(--gold); }
.licznik input { width: 70px; height: 44px; text-align: center; font-family: var(--font-display, inherit); font-size: 24px; font-weight: 700; padding: 4px;
  background: rgba(255, 255, 255, .05); color: var(--text); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: none;
  -moz-appearance: textfield; appearance: textfield; }
.licznik input::-webkit-outer-spin-button, .licznik input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kal { position: relative; display: inline-block; }
.kal_pole { display: none; }
.kal--js input[type=date] { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.kal--js .kal_pole { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; border-radius: 12px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.kal--js.kal--ma .kal_pole { color: var(--text); border-color: rgba(245, 192, 74, .55); }
.kal--js .kal_pole:hover { border-color: var(--gold); }
.kal_okno { position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; width: 310px; padding: 14px; border-radius: 16px;
  background: linear-gradient(var(--card, #0b2134), var(--card, #0b2134)), var(--kal-podklad, #14100c);   /* pełne tło: --card bywa półprzezroczyste, a pod spodem prześwitywały karty */
  border: 1px solid var(--line-2); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.kal_okno[hidden] { display: none; }
.kal_gl { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.kal_gl strong { text-transform: capitalize; }
.kal_gl button { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--line-2); background: transparent; color: var(--text); font-size: 18px; cursor: pointer; }
.kal_gl button:disabled { opacity: .3; cursor: default; }
.kal_siatka { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.kal_dt { text-align: center; font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--muted); padding: 2px 0 4px; }
.kal_d { position: relative; min-height: 36px; border-radius: 10px; border: 1px solid transparent; background: rgba(255, 255, 255, .04); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
.kal_d:hover:not(:disabled) { border-color: var(--gold); }
.kal_d:disabled { opacity: .25; cursor: default; background: transparent; }
.kal_d.dzis { border-color: var(--line-2); }
/* „kal_wk”, nie „wk” — klasa .wk to siatka kart (kolumny po 190 px) i rozpychała dni weekendu poza okienko (12.10.2026). */
.kal_d.kal_wk::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: #ff9d4a; }
.kal_d.on { background: var(--gold, #f4c977); color: #14100a; }
.kal_d.on::after { background: #14100a; }
.kal_leg { margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.kal_leg i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #ff9d4a; margin-right: 6px; vertical-align: middle; }
.kal_czysc { margin-top: 8px; background: none; border: 0; color: var(--gold-text, var(--gold)); font: inherit; font-size: 13px; cursor: pointer; padding: 0; }
@media (max-width: 420px) { .kal_okno { width: min(310px, calc(100vw - 32px)); } }

/* FAQ rozrywek (strona pokoju, /faq.php) — rozwijane pytania. */
.faq_lista { display: grid; gap: 10px; }
.faq_lista details { border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .03); padding: 0 16px; }
.faq_lista details[open] { border-color: var(--line-2); }
.faq_lista summary { cursor: pointer; padding: 14px 26px 14px 0; font-weight: 700; list-style: none; position: relative; }
.faq_lista summary::-webkit-details-marker { display: none; }
.faq_lista summary::after { content: "+"; position: absolute; right: 0; top: 12px; color: var(--gold); font-weight: 800; font-size: 20px; line-height: 1; }
.faq_lista details[open] summary::after { content: "–"; }
.faq_odp { padding: 0 0 14px; color: rgba(249, 251, 255, .82); line-height: 1.65; }
.faq_odp p { margin: 0 0 8px; } .faq_odp ul { margin: 0 0 8px; padding-left: 20px; }

/* „Pozostałe pokoje" pogrupowane według lokalizacji (strona pokoju). */
.pozostale_lok { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 6px 0 12px; font-size: 20px; }
.pozostale_lok small { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

/* Kalendarz w wąskiej kolumnie formularza: pole na całą szerokość, napis przycięty. */
.kal--pelny { display: block; }
.kal--js.kal--pelny .kal_pole { width: 100%; min-width: 0; min-height: 46px; }
.kal--js .kal_pole span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* Wybór godziny ([data-godz]) — to samo okienko co kalendarz. */
.godz--js input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.godz--js .kal_pole { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; border-radius: 12px;
  border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); color: var(--muted); font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; }
.godz--js.kal--ma .kal_pole { color: var(--text); border-color: rgba(245, 192, 74, .55); }
.godz--js .kal_pole:hover { border-color: var(--gold); }
.godz--js.kal--pelny .kal_pole { width: 100%; min-width: 0; min-height: 46px; }
.godz_pory { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 10px; }
.godz_opcja { padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04); color: var(--text); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.godz_opcja:hover { border-color: var(--gold); }
.godz_opcja.on { background: var(--gold, #f4c977); color: #14100a; border-color: transparent; }
.godz_siatka { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; max-height: 220px; overflow-y: auto; }
.godz_siatka .kal_d { font-size: 13px; min-height: 34px; }
.godz--js .kal_pole span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* POLA FORMULARZY NA STRONIE — jeden wygląd wszędzie: duże, ciemne, ze złotym fokusem.
   :where() ma zerową wagę, więc każdy komponent z własną klasą (licznik, kalendarz,
   #rezerwacja…) nadal wygrywa; to tylko podłoga, żeby nigdzie nie wyskoczył
   systemowy, mały biały select. Panele (has_panel) mają swoje gęste tabele — bez zmian. */
:where(body:not(.has_panel)) :where(select, textarea, input:not([type]), input[type=text], input[type=email], input[type=tel],
  input[type=number], input[type=date], input[type=time], input[type=search], input[type=password], input[type=url]) {
  height: 48px; padding: 0 14px; border: 1px solid var(--line-2); border-radius: 12px;
  background-color: rgba(255, 255, 255, .05); color: var(--text); font: inherit; font-size: 15.5px;
  transition: border-color .15s, box-shadow .15s;
}
:where(body:not(.has_panel)) :where(textarea) { height: auto; padding: 12px 14px; min-height: 110px; line-height: 1.5; }
:where(body:not(.has_panel)) :where(select[multiple]) { height: auto; padding: 8px; background-image: none; }
:where(body:not(.has_panel)) :where(select) {
  -webkit-appearance: none; appearance: none; padding-right: 42px; cursor: pointer; font-weight: 600;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23f4c977' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px;
}
:where(body:not(.has_panel)) :where(select) option { background: #0b2134; color: #f9fbff; }
:where(body:not(.has_panel)) :where(select, textarea, input):hover:not(:disabled):not([type=checkbox]):not([type=radio]) { border-color: rgba(245, 192, 74, .45); }
:where(body:not(.has_panel)) :where(select, textarea, input):focus:not([type=checkbox]):not([type=radio]) {
  outline: 0; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(245, 192, 74, .18);
}
:where(body:not(.has_panel)) :where(select:disabled, input:disabled, textarea:disabled) { opacity: .5; cursor: default; }
:where(body:not(.has_panel)) .form_row :where(select) { padding-right: 42px; }
:where(body:not(.has_panel)) .form_row input, :where(body:not(.has_panel)) .form_row select { height: 48px; border-radius: 12px; }
:where(body:not(.has_panel)) .form_row textarea { border-radius: 12px; }

/* PASEK WYSZUKIWANIA — lista atrakcji, grupy. Ten sam układ co na stronach pakietów. */
.szuk { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: flex-end; padding: 16px 18px; margin: 0 0 26px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.szuk_pole { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.szuk_pole > span { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 800; }
.szuk_pole select { min-width: 180px; }
.szuk .btn { min-height: 48px; }
.szuk_czysc { align-self: flex-end; line-height: 48px; font-size: 14px; color: var(--muted); }
.seg { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 13px; background: rgba(255, 255, 255, .04); border: 1px solid var(--line); }
.seg a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 10px; font-weight: 700; font-size: 14px;
  color: var(--muted); text-decoration: none; white-space: nowrap; }
.seg a span { font-weight: 600; opacity: .7; margin-left: 5px; }
.seg a.on { background: var(--accent); color: var(--accent-ink, #1b1208); }
.seg a:hover { color: var(--text); text-decoration: none; }
.seg a.on:hover { color: var(--accent-ink, #1b1208); }
@media (max-width: 640px) {
  .szuk { padding: 14px; gap: 12px; }
  .szuk_pole { flex: 1 1 100%; }
  .szuk_pole select, .szuk .btn { width: 100%; }
  .seg { width: 100%; } .seg a { flex: 1; justify-content: center; }
}

/* NAGŁÓWEK PODSTRONY — „oczko" nad tytułem, tytuł ze złotym akcentem, lead. Zamiast pudełka z opisem. */
.nagl { padding: 34px 0 22px; max-width: 900px; }
.nagl_eb { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #bfe6d6; }
.nagl_eb::before { content: ""; width: 30px; height: 1px; background: var(--gold); flex: none; }
.nagl h1 { font-size: 46px; line-height: 1.08; letter-spacing: -.02em; font-weight: 800; margin: 14px 0 14px; max-width: 22ch; }
.nagl_zloto { background: linear-gradient(90deg, #f7dca6 0%, #f0b66f 55%, #e39a5b 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nagl_lead { font-size: 17.5px; line-height: 1.6; color: rgba(249, 251, 255, .82); max-width: 66ch; margin: 0 0 10px; }
.nagl_lead + .nagl_lead { font-size: 16px; color: var(--muted); }
.nagl_punkty { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; }
.nagl_punkty li { padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, .04);
  font-size: 13.5px; font-weight: 600; color: rgba(249, 251, 255, .86); }
.nagl_lista { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; max-width: 70ch; }
.nagl_lista li { position: relative; padding-left: 22px; line-height: 1.55; color: rgba(249, 251, 255, .82); }
.nagl_lista li::before { content: ""; position: absolute; left: 0; top: .72em; width: 12px; height: 2px; background: var(--gold); }
.nagl_stopka { margin: 14px 0 0; font-size: 14px; color: var(--muted); }
@media (max-width: 640px) { .nagl { padding-top: 22px; } .nagl h1 { font-size: 32px; } .nagl_lead { font-size: 16px; } }

/* Zniżki w dni tygodnia przy liczbie osób (pokoj.php, assets/rabat-dnia.js). */
.rd-pyt-wiersz:not([hidden]) ~ .rd-pyt-wiersz:not([hidden]) { margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(245, 192, 74, 0.35); }
.rd-licznik { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 6px; }
.rd-licznik span { flex-basis: 100%; }   /* pytanie w swojej linii, − liczba + razem pod nim (25.10.2026) */
.rd-licznik button { width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(245, 192, 74, 0.55); background: transparent;
  color: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.rd-licznik button:hover { background: rgba(245, 192, 74, 0.15); }
.rd-licznik input { width: 64px; height: 40px; text-align: center; font-size: 1.15rem; font-weight: 700; border-radius: 10px; }
.rd-suma { margin: 0 0 4px; font-weight: 700; color: var(--gold, #f5c04a); }
.rd-cena { color: var(--ok, #6fd08c); }
.rd-cena-po strong { font-size: 1.15em; }

/* Wolne terminy: szybkie przełączanie dnia (12.10.2026). */
.wolne-dni { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }

/* Usuwanie vouchera z podsumowania zamówienia (13.10.2026) — mały przycisk pod nazwą pozycji. */
.zam-usun { display: inline; margin: 0; }
.zam-usun button { all: unset; cursor: pointer; font-size: .82rem; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.zam-usun button:hover { color: var(--text); }
.zam-usun button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* „Więcej filtrów” w kalendarzu wolnych terminów (wolne.php, 14.10.2026). */
.finder_wiecej { margin-top: 10px; }
.finder_wiecej > summary { cursor: pointer; font-weight: 700; color: var(--gold, #e8c068); list-style: none; display: inline-flex; gap: 6px; align-items: center; }
.finder_wiecej > summary::-webkit-details-marker { display: none; }
.finder_wiecej > summary::before { content: '+'; font-weight: 900; }
.finder_wiecej[open] > summary::before { content: '−'; }
.finder_wiecej > .finder_grid { margin-top: 10px; }

/* Zaznaczenia jako pigułki (15.10.2026: dni tygodnia, rozrywki w misjach) — kratka zawsze mała i równa,
   napis w jednej linijce, zaznaczone wyróżnione kolorem. */
.chk_chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chk_chips label {
  display: inline-flex !important; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line, #2a2d34); background: rgba(255,255,255,.03); font-size: 14px; white-space: nowrap; margin: 0; width: auto;
}
.chk_chips label input[type=checkbox] { width: 17px !important; height: 17px !important; min-width: 0; flex: none; margin: 0; padding: 0; accent-color: var(--accent, #d8844e); }
.chk_chips label:has(input:checked) { border-color: var(--accent, #d8844e); background: var(--accent-soft, rgba(216,132,78,.14)); font-weight: 600; }

/* Przełącznik Operator | Firma dla właściciela OneSlot (lib/panel2.php: panel2_przelacznik_rol) */
.p2_role { display: flex; gap: 3px; padding: 3px; margin: 0 0 12px; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.p2_role a { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 8px; border-radius: 8px;
  font-size: 13.5px; font-weight: 600; color: #9aa3b2; text-decoration: none; }
.p2_role a:hover { color: #fff; text-decoration: none; }
.p2_role a.on { background: #7c9cff; color: #0b1020; }

/* Kratki i kółka w formularzach (15.10.2026): reguła .form_row input (100% szerokości, 46 px wysokości) robiła
   z nich wielkie białe kwadraty. Zawsze mała, równa kratka w kolorze akcentu. */
.form_row input[type=checkbox], .form_row input[type=radio], .citybar input[type=checkbox], .citybar input[type=radio] {
  width: 18px !important; height: 18px !important; min-width: 0; padding: 0; margin: 0; flex: none; border-radius: 4px;
  accent-color: var(--accent, #d8844e); vertical-align: middle; box-shadow: none;
}
.form_row label:has(> input[type=checkbox]), .form_row label:has(> input[type=radio]) { display: flex; align-items: center; gap: 8px; font-weight: 500; }
/* Listy rozwijane w tabelach panelu (np. „cała oferta” przy voucherach) — ciemne, jak reszta panelu */
body.has_panel .table select { background: #16181c; color: #e6e8eb; border: 1px solid #2a2d34; border-radius: 8px; padding: 6px 8px; height: auto; }
body.has_panel .table input:not([type=checkbox]):not([type=radio]):not([type=file]) { background: #16181c; color: #e6e8eb; border: 1px solid #2a2d34; border-radius: 8px; padding: 6px 8px; height: auto; }
body.has_panel .table input::placeholder { color: #6b7280; }

/* ===== Poprawki telefonu przed startem (18.10.2026) — jak w el.css (strona główna) ===== */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) { body { overflow-x: hidden; } }
@media (max-width: 899px) {
  /* iPhone powiększa stronę po dotknięciu pola z czcionką mniejszą niż 16 px. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea { font-size: 16px !important; }
  /* Pasek „Rezerwuję” na dole strony pokoju nie zasłania końca stopki. */
  body:has(#rezerwacja.rez-nowy .rez-dol) { padding-bottom: calc(92px + env(safe-area-inset-bottom)); }
}