/* =====================================================================
   Karta MOSiR Toruń — portal klienta
   ---------------------------------------------------------------------
   Kierunek: TABLICA WYNIKÓW.
   Portal w całości operuje liczbami — saldo, punkty, godziny wejść,
   wolne miejsca — więc język graficzny bierzemy z hali sportowej,
   a nie z ogólnego „ładnego panelu": kondensowany krój na liczby
   i nagłówki, cyfry tabelaryczne, oznaczenia jak na tablicy wyników.

   Element rozpoznawczy: PASY TORU — cienkie poziome linie z basenu
   i bieżni. Pojawiają się w pasku górnym, na krawędzi kafla karty
   i w nagłówku strony startowej. Nigdzie indziej, bo powtórzone
   wszędzie przestałyby cokolwiek znaczyć.

   Kolory wprost z logo MOSiR: granat #004A71, błękit wody #01B0F3,
   żółty #FDBA2E. Żółty rezerwujemy dla rzeczy wymagających uwagi —
   kończąca się ważność karty, wejście na dziś.

   Panel administracyjny ma własny arkusz (panel.css) dokładany po tym.
   ===================================================================== */

:root {
    /* Barwy z logo — punkt odniesienia. Do malowania używamy ról poniżej. */
    --granat:        #004A71;
    --granat-ciemny: #00344F;
    --granat-gleboki:#022639;
    --blekit:        #0192CC;
    --blekit-jasny:  #01B0F3;
    --zolty:         #FDBA2E;
    --zolty-ciemny:  #E09A0B;

    /* ROLE oddzielone od nazw firmowych. Granat pełni w portalu trzy różne
       zadania — kolor tekstu, wypełnienie przycisku i podkład paska — a po
       zmroku tekst musi się rozjaśnić, podczas gdy wypełnienie ma zostać
       ciemne, bo leży pod białym napisem. Jedna zmienna nie obsłuży obu ról
       naraz i właśnie stąd brał się brak kontrastu w ciemnym motywie. */
    --akcent:            #004A71;  /* granat jako kolor tekstu i ikon      */
    --plama:             #004A71;  /* granat jako wypełnienie przycisku    */
    --plama-hover:       #00344F;
    --pasek-tlo:         #00344F;  /* podkład paska górnego, zawsze ciemny */
    --fokus:             #0083B8;  /* obrys fokusu: 4,25:1 na bieli        */
    --blad-plama:        #B02A21;
    --blad-plama-hover:  #8E1E18;

    /* Neutralne z domieszką błękitu — czysta szarość wygląda na niedobraną. */
    --tlo:             #EEF3F6;
    --tlo-glebia:      #E1EBF1;
    --powierzchnia:    #FFFFFF;
    --powierzchnia-alt:#F1F6F9;
    --tekst:           #0A1E2B;
    --tekst-slaby:     #55707F;
    --linia:           #D7E4EC;
    --linia-mocna:     #6E8EA1;

    --ok:    #12734A;
    --uwaga: #9A5400;
    --blad:  #B02A21;

    --ok-tlo:    #E1F4EA;
    --uwaga-tlo: #FDF1DC;
    --blad-tlo:  #FBE7E5;

    --cien-1: 0 1px 2px rgba(10, 30, 43, .05);
    --cien-2: 0 2px 4px rgba(10, 30, 43, .05), 0 12px 28px -12px rgba(10, 30, 43, .22);
    --cien-3: 0 4px 8px rgba(10, 30, 43, .06), 0 24px 48px -20px rgba(10, 30, 43, .30);

    --r-mala:  10px;
    --r-duza:  18px;
    --r-pelna: 999px;

    --display:  "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
    --tekstowy: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Ciemny motyw systemowy. Kolory firmowe zostają, zmienia się podłoże —
   portal bywa otwierany wieczorem, na parkingu przed obiektem. */
@media (prefers-color-scheme: dark) {
    :root {
        --tlo:             #071A26;
        --tlo-glebia:      #04131C;
        --powierzchnia:    #0E2B3C;
        --powierzchnia-alt:#123449;
        --tekst:           #E6F1F7;
        --tekst-slaby:     #9FBAC9;
        --linia:           #1D465E;
        --linia-mocna:     #4A88A8;
        /* Granat NIE jest tu rozjaśniany globalnie: pasek i przyciski muszą
           zostać ciemne pod białym napisem. Rozjaśniamy tylko rolę tekstową
           (--akcent) oraz wypełnienie przycisku — na tyle, żeby odcinało się
           od powierzchni (3,02:1), zachowując biały napis 4,86:1. */
        --akcent:            #4FA8D8;
        --plama:             #1478AD;
        --plama-hover:       #0F6B9E;
        --fokus:             #01B0F3;
        --blad-plama:        #D14237;
        --blad-plama-hover:  #B93125;
        --ok:              #5CCB93;
        --uwaga:           #F0B45C;
        --blad:            #F19087;
        --ok-tlo:          #0F3B2B;
        --uwaga-tlo:       #3D2E10;
        --blad-tlo:        #3D1B18;
        --cien-2: 0 2px 4px rgba(0, 0, 0, .30), 0 12px 28px -12px rgba(0, 0, 0, .60);
        --cien-3: 0 4px 8px rgba(0, 0, 0, .35), 0 24px 48px -20px rgba(0, 0, 0, .70);
    }
}

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

/* Odnośnik „przejdź do treści”: niewidoczny do chwili, w której ktoś wejdzie
   na niego klawiszem Tab. Bez niego użytkownik klawiatury przechodzi przez
   cały pasek nawigacji na każdej podstronie z osobna. */
.pomin {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background: var(--zolty);
    color: var(--granat-gleboki);
    font-family: var(--display);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 0 0 var(--r-mala) 0;
}

.pomin:focus { left: 0; }

/* Tekst wyłącznie dla czytnika ekranu: nagłówek kolumny z przyciskami akcji
   albo nazwa, dla której na ekranie nie ma miejsca. Nie „display: none" ani
   „visibility: hidden" — jedno i drugie usuwa treść także z czytnika. Stąd
   wycięcie do prostokąta o zerowej powierzchni: element nadal jest w drzewie
   dostępności, a nie widać go i nie rozpycha układu. */
.tylko-czytnik {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Cel odnośnika. Fokus przenosimy programowo, więc obrys byłby tu tylko
   prostokątem wokół całej treści strony. */
main:focus { outline: none; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--tlo);
    color: var(--tekst);
    font-family: var(--tekstowy);
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.kontener { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ---------- pasek górny ---------- */

.pasek {
    position: sticky;
    top: 0;
    z-index: 20;
    /* Jednolite tło. Wcześniej leżały tu poziome pasy toru basenowego
       (repeating-linear-gradient co 9 px). Przy tekście i logo w tym samym
       pasku dawały wrażenie prążkowania ekranu, a na matrycach o mniejszej
       gęstości wchodziły w mory z siatką pikseli. Znak firmowy niesie
       tożsamość wystarczająco — tło ma być tłem. */
    background: var(--pasek-tlo);
    border-bottom: 3px solid var(--zolty);
}

.pasek-tresc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 64px;
    flex-wrap: wrap;
}

.logo { display: flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; }

.logo-tekst {
    font-family: var(--display);
    font-size: 23px;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    line-height: 1;
}

.logo-tekst strong { color: var(--zolty); font-weight: 700; }

/* Znak MOSiR-u zamiast dawnego kółka z gradientem.
   Logo jest granatowe, a pasek też — bez jasnej podkładki znak zniknąłby
   w tle. Biały kafelek jest więc wymogiem czytelności, nie ozdobą. */
.logo-obraz {
    display: block;
    height: 40px;
    width: auto;
    flex: none;
    background: #fff;
    border-radius: 8px;
    padding: 3px 7px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
}

/* ---------- pasek na telefonie ----------
   Pasek składa się z trzech rzeczy o stałej szerokości: znaku, napisu
   „KARTA MOSIR TORUŃ" wersalikami i przycisku „Wyloguj". Przy 360 px nie
   mieszczą się w jednym rzędzie, a `flex-wrap` zawijał wtedy nawigację pod
   logo — stąd rozjeżdżający się nagłówek. Zamiast pozwalać na zawijanie,
   napis kurczy się i w ostateczności ucina, bo znak i wyjście z konta są
   ważniejsze niż pełne brzmienie nazwy. */
@media (max-width: 560px) {
    /* ---- KIEDY PASEK MA PRAWO ZAJĄĆ DRUGI RZĄD ----
       Wcześniej stało tu `nowrap`, bo pasek trzymał trzy rzeczy i zawijanie
       robiło z nagłówka bałagan. Po dołożeniu „Regulaminu" (2.09.2026) menu
       gościa ma cztery pozycje i mierzy 365 px — przy 390 px ekranu nie zmieści
       się obok znaku ŻADNYM sposobem, a `nowrap` znaczyłby wtedy poziome
       przewijanie CAŁEJ strony.

       Dlatego `wrap`, ale bez wymuszania drugiego rzędu: zawija się dopiero
       to, co się nie mieści. Zalogowany ma w pasku trzy pozycje (~265 px),
       więc od 360 px w górę zostaje przy jednym rzędzie — a to on ogląda ekran
       biletu, na którym wysoki nagłówek boli najbardziej. Gość dostaje dwa
       rzędy na logowaniu i rejestracji, gdzie nie kosztuje to nic.

       `overflow-x` na samej nawigacji jest zabezpieczeniem na 320 px: tam
       nawet własny rząd bywa za wąski, a przewijanie ma dotyczyć menu, nie
       strony (tak samo jak w pasku panelu). */
    .pasek-tresc {
        flex-wrap: wrap;
        gap: 4px 8px;
        min-height: 56px;
    }

    .nawigacja {
        flex-wrap: nowrap;
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .nawigacja::-webkit-scrollbar { display: none; }

    /* min-width: 0 pozwala kurczyć się poniżej treści — bez tego element
       flex trzyma swoją szerokość i to on rozpycha pasek. */
    .logo { gap: 8px; min-width: 0; }

    .logo-tekst {
        font-size: 17px;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .logo-obraz { height: 30px; padding: 2px 5px; }

    .nawigacja { flex: none; }
}

@media (max-width: 380px) {
    .logo-tekst { font-size: 15px; }
    .logo-obraz { height: 26px; }
}

/* ---------- pozycje paska górnego ----------

   JEDEN GŁOS NA CAŁY PASEK (2.09.2026). Stały tu obok siebie trzy sposoby
   pisania tego samego: odnośniki krojem tekstowym 14,5 px małymi literami,
   przycisk „Załóż konto" krojem nagłówkowym wersalikami (bo dziedziczy po
   `.przycisk`) i znak firmowy — też nagłówkowym, też wersalikami. W jednym
   rzędzie widać było dwa kroje i dwa sposoby zapisu, a pasek gościa
   „Zaloguj · ZAŁÓŻ KONTO · Instrukcja" pokazywał oba na przemian.

   Pasek mówi teraz krojem znaku, który w nim stoi. Różnicę między pozycją
   menu a wezwaniem do działania niesie WYPEŁNIENIE (żółte tło przycisku),
   a nie inny krój — bo krój odróżnia rodzaje treści, nie rangę odnośnika.

   Te same reguły powtarza `app/Views/tresc/instrukcja.html`. Tamten plik nie
   może wczytać tego arkusza (arkusz definiuje `body`, `p`, `h2` i `a`, czyli
   wszystko, na czym stoi układ dokumentu), a nowego pliku w /assets nie da
   się tam podpiąć bezpiecznie: instrukcja jest statyczna, więc jej odnośniki
   nie niosą `?v=`, a serwis roboczy trzyma /assets/ z pamięci podręcznej
   bezterminowo. Kopia w tamtym pliku jest świadoma — ZMIANA TUTAJ TO ZMIANA
   I TAM. */
.nawigacja { display: flex; align-items: center; gap: 4px; }

.nawigacja a,
.nawigacja .link-przycisk {
    font-family: var(--display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #CBE4F1;
    text-decoration: none;
    padding: 8px 12px;
    /* Zaokrąglenie jak u przycisków w treści (--r-mala), a nie pigułka.
       Pigułka była tu niespójna dwa razy: żółte „Załóż konto" w pasku miało
       inny kształt niż ten sam przycisk na stronie, a żółta belka bieżącej
       pozycji, wpuszczona w kształt o promieniu 999 px, wyginała się w łuk
       i czytała jak obwódka, a nie jak podkreślenie. */
    border-radius: var(--r-mala);
}

.nawigacja a:hover,
.nawigacja .link-przycisk:hover { color: #fff; background: rgba(255, 255, 255, .1); }

/* BIEŻĄCA POZYCJA BYŁA NIEWIDOCZNA. Układ od początku wystawiał tu klasę
   `aktywna` i `aria-current="page"` (audyt Ś6), ale arkusz opisywał wyłącznie
   `.dolna-nawigacja a.aktywna` — na telefonie było więc widać, na której
   stronie się stoi, a na komputerze nie. Zaznaczenie jest to samo co w panelu:
   żółta belka pod pozycją plus biały tekst, żeby nie zależało wyłącznie od
   koloru. Kontrasty na tle #00344F: tekst #FFFFFF 13,1:1, belka #FDBA2E
   7,6:1 (element graficzny wymaga 3:1). */
.nawigacja a.aktywna {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    box-shadow: inset 0 -3px 0 var(--zolty);
}

.nawigacja .przycisk { color: var(--granat-gleboki); }
.nawigacja .przycisk:hover { background: var(--zolty-ciemny); }
.wyloguj { margin: 0; }

.link-przycisk {
    background: none; border: 0; padding: 8px 12px;
    color: #CBE4F1; font: inherit; font-size: 14.5px; font-weight: 500;
    cursor: pointer; border-radius: var(--r-pelna);
}

.link-przycisk:hover { color: #fff; background: rgba(255, 255, 255, .1); }

/* ---------- dolna nawigacja (telefon) ---------- */

.dolna-nawigacja { display: none; }

@media (max-width: 720px) {
    /* Na telefonie górne odnośniki znikają — ich rolę przejmuje dolny pasek.
       Portal obsługuje się jedną ręką, stojąc przy wejściu z kodem QR,
       a góra ekranu jest wtedy poza zasięgiem kciuka. */
    /* Zalogowanemu odnośniki z paska zastępuje nawigacja dolna. Niezalogowany
       jej nie ma, więc jego „Zaloguj" musi zostać — inaczej z telefonu nie da
       się wejść na konto inaczej niż przez rejestrację. */
    /* Wyjątki są trzy i wszystkie dlatego, że dolna nawigacja ich NIE
       przejmuje — ma cztery pozycje i piątej by w niej nie zmieścił. */
    .nawigacja:not(.nawigacja-gosc) a:not(.przycisk):not(.dokument) { display: none; }

    /* 1. „Wyloguj": sesja daje dostęp do salda i historii przez dwie godziny
          od ostatniego kliknięcia — ukryty tutaj, zostawiał otwarte konto na
          pożyczonym albo zgubionym telefonie.
       2. „Instrukcja" i „Regulamin": po przeniesieniu ich do menu górnego
          (2.09.2026) stopka już ich nie ma, więc ukryte tutaj znikałyby
          z telefonu zupełnie — a instrukcji szuka się właśnie z telefonu,
          stojąc przed bramką, i to jest dokładnie ten moment, w którym
          regulamin też bywa potrzebny.
       Zostają w pasku, tylko ciaśniej. */
    .nawigacja .link-przycisk,
    .nawigacja .dokument { padding: 8px 10px; }

    .dolna-nawigacja {
        display: grid;
        grid-auto-flow: column;
        position: fixed;
        left: 0; right: 0; bottom: 0;
        z-index: 30;
        background: var(--powierzchnia);
        border-top: 1px solid var(--linia);
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -6px 24px -14px rgba(10, 30, 43, .5);
    }

    .dolna-nawigacja a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        /* min-width: 0 jest tu obowiązkowe: element siatki domyślnie nie
           kurczy się poniżej swojej treści, więc cztery pozycje rozpychały
           pasek szerzej niż ekran i CAŁA strona jechała w bok. */
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        padding: 9px 4px 7px;
        text-decoration: none;
        color: var(--tekst-slaby);
        font-family: var(--display);
        font-size: 13px;
        font-weight: 600;
        letter-spacing: .04em;
        text-transform: uppercase;
    }

    .dolna-nawigacja a.aktywna { color: var(--akcent); }
    .dolna-nawigacja a.aktywna .ikona { background: var(--akcent); }

    .ikona {
        width: 22px; height: 22px;
        background: var(--tekst-slaby);
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-size: contain;
    }

    /* Zapas nad wysokoscia paska (~63 px) wynosil 1 px, a na iPhonie pasek rosnie
       o belke gestow i na stale zakrywal dol strony. Wcięcie musi wejsc TAKZE
       do treści, nie tylko do paska. */
    body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- treść i typografia ---------- */

.tresc { flex: 1; padding: 30px 20px 72px; }

h1 {
    font-family: var(--display);
    font-size: clamp(30px, 6vw, 40px);
    font-weight: 700;
    line-height: 1.05;
    text-transform: uppercase;
    margin: 0 0 10px;
    color: var(--tekst);
}

h2 {
    font-family: var(--display);
    font-size: clamp(21px, 3.4vw, 26px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .01em;
    margin: 36px 0 14px;
    color: var(--tekst);
}

h3 { font-family: var(--display); font-size: 20px; font-weight: 600; text-transform: uppercase; margin: 0 0 8px; }

.podtytul { color: var(--tekst-slaby); margin: 0 0 26px; max-width: 60ch; }

a { color: var(--akcent); text-underline-offset: 3px; }

code {
    font-family: "Consolas", "SF Mono", monospace;
    font-size: .9em;
    background: var(--powierzchnia-alt);
    border: 1px solid var(--linia);
    border-radius: 5px;
    padding: 1px 6px;
}

/* ---------- karty treści ---------- */

.panel {
    background: var(--powierzchnia);
    border: 1px solid var(--linia);
    border-radius: var(--r-duza);
    box-shadow: var(--cien-2);
    padding: 26px;
}

.panel-waski { max-width: 440px; margin: 0 auto; }

/* ---------- kolumna dokumentu ----------

   JEDNA SZEROKOŚĆ DLA WSZYSTKICH DOKUMENTÓW (decyzja właściciela 2.09.2026).
   Każda strona z dokumentem miała dotąd własną: regulaminy i klauzula RODO
   820 px, prywatność 760 px, deklaracja dostępności 760 px z osobnej reguły,
   a instrukcja 52 rem w swoim pliku. Cztery szerokości na pięć stron.

   Gorsze było to, że mierzył się nią wyłącznie PANEL: nagłówek i podtytuł
   stały dalej w pełnym kontenerze, więc tytuł zaczynał się przy lewej
   krawędzi strony, a biała płyta pod nim — sto kilkadziesiąt pikseli dalej.
   Dlatego kolumna obejmuje CAŁĄ treść dokumentu, od nagłówka po ostatni
   akapit; tytuł i płyta mają jedną lewą krawędź, tak jak na pozostałych
   stronach portalu.

   Szerokości nie zrównujemy z kontenerem (1080 px) świadomie: wiersz
   regulaminu miałby wtedy ponad 120 znaków, a to się czyta gorzej, nie
   lepiej. 820 px to około 90 znaków. */
.kolumna-dokumentu { max-width: 820px; margin-inline: auto; }

/* Zakładka „Konto": jedna kolumna panelu na 680 px, dosunięta do lewej,
   zostawiała przy pełnym kontenerze pół ekranu pustki — zakładka wyglądała
   na węższą od pozostałych. Na szerokim ekranie panele płyną więc w dwie
   kolumny (break-inside pilnuje, by panel nie pękał między nimi), a na
   węższym wraca jedna kolumna o szerokości czytelnego wiersza, wyśrodkowana
   jak .kolumna-waska. */
.siatka-konta { max-width: 680px; margin-inline: auto; }
.siatka-konta > .panel { margin-bottom: 22px; break-inside: avoid; }
.siatka-konta > .panel:last-child { margin-bottom: 0; }

@media (min-width: 900px) {
    .siatka-konta { max-width: none; columns: 2; column-gap: 22px; }
}

/* Powiązane karty w zakładce Konto: lista zamiast tabeli, bo tabela ma
   globalne `min-width: 520px` i w kolumnie siatki konta zawsze skończyłaby
   się suwakiem poziomym. */
.lista-kart { list-style: none; margin: 0; padding: 0; }

.lista-kart-wiersz {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 13px 0;
    border-bottom: 1px solid var(--linia);
}

.lista-kart-wiersz:first-child { padding-top: 0; }
.lista-kart-wiersz:last-child { border-bottom: 0; padding-bottom: 0; }
.lista-kart-wiersz .karta-numer { color: var(--tekst); }
.lista-kart-wiersz .podpowiedz { margin: 2px 0 0; }

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

/* auto-fit (nie auto-fill): puste kolumny znikają, więc dwie karty dzielą
   szerokość zamiast tłoczyć się po lewej z pustką po prawej. Ograniczenie
   szerokości samego kafla broni przed rozciągnięciem jednej karty na cały
   ekran, a justify-items ustawia ją wtedy na środku kolumny. */
.siatka-kart {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    justify-items: center;
    gap: 16px;
}

.siatka-kart > * { width: 100%; max-width: 520px; }

.karta-kafel {
    position: relative;
    display: block;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background: var(--powierzchnia);
    border: 1px solid var(--linia);
    border-radius: var(--r-duza);
    box-shadow: var(--cien-2);
    padding: 22px 22px 20px 28px;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

/* Pasy toru na krawędzi kafla — ta sama sygnatura co w pasku górnym. */
.karta-kafel::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: repeating-linear-gradient(
        180deg,
        var(--blekit-jasny) 0 7px,
        var(--akcent) 7px 14px
    );
}

.karta-kafel:hover {
    transform: translateY(-3px);
    border-color: var(--linia-mocna);
    box-shadow: var(--cien-3);
}

.karta-numer {
    font-family: var(--display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tekst-slaby);
}

.karta-saldo {
    font-family: var(--display);
    font-size: 46px;
    font-weight: 700;
    line-height: 1;
    color: var(--akcent);
    font-variant-numeric: tabular-nums;
    margin: 8px 0 2px;
}

.karta-waznosc { font-size: 14px; color: var(--tekst-slaby); }

.pasek-waznosci {
    height: 7px;
    border-radius: var(--r-pelna);
    background: var(--tlo-glebia);
    overflow: hidden;
    margin: 16px 0 10px;
}

.pasek-waznosci span { display: block; height: 100%; border-radius: var(--r-pelna); background: var(--blekit); }
.pasek-waznosci.blisko span { background: var(--zolty); }
.pasek-waznosci.po span { background: var(--blad); }

/* ---------- oznaczenia ---------- */

.znaczniki { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }

.znacznik {
    font-family: var(--display);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 3px 11px;
    border-radius: var(--r-pelna);
    background: var(--powierzchnia-alt);
    color: var(--akcent);
    border: 1px solid var(--linia);
}

.stan {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 3px 11px;
    border-radius: var(--r-pelna);
    background: var(--powierzchnia-alt);
    color: var(--tekst-slaby);
}

.stan-ok    { background: var(--ok-tlo);    color: var(--ok); }
.stan-uwaga { background: var(--uwaga-tlo); color: var(--uwaga); }
.stan-blad  { background: var(--blad-tlo);  color: var(--blad); }

/* ---------- formularze ---------- */

label {
    display: block;
    font-family: var(--display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 20px 0 7px;
    color: var(--tekst);
}

.grupa { border: 0; padding: 0; margin: 0; min-width: 0; }

/* Wspólna etykieta grupy pól — wygląda jak <label>, ale jest <legend>, więc
   czytnik ekranu powtarza ją przy każdej opcji w grupie. */
.grupa > legend {
    display: block;
    float: left;
    width: 100%;
    font-family: var(--display);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 20px 0 7px;
    padding: 0;
    color: var(--tekst);
}

.grupa > legend + * { clear: both; }

input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="time"], select, textarea {
    width: 100%;
    padding: 13px 15px;
    font-size: 16px;
    font-family: inherit;
    color: var(--tekst);
    background: var(--powierzchnia);
    border: 1.5px solid var(--linia-mocna);
    border-radius: var(--r-mala);
    transition: border-color .14s ease, box-shadow .14s ease;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--blekit);
    box-shadow: 0 0 0 4px rgba(1, 176, 243, .16);
}

/* Obrys fokusu w kolorze --fokus. Jaśniejszy błękit #01B0F3 dawał na bieli
   2,47:1, czyli mniej niż wymagane 3:1. W ciemnym motywie --fokus wraca do
   #01B0F3, bo tam kontrast liczy się względem ciemnego podłoża. */
:focus-visible {
    outline: 3px solid var(--fokus);
    outline-offset: 2px;
    /* Pasek górny jest przyklejony, a dolna nawigacja na telefonie stoi na
       stałe przy krawędzi — bez zapasu przeglądarka przewijałaby element
       dokładnie pod nie i fokus znikałby z oczu. */
    scroll-margin: 84px 0;
}

/* Reguła input:focus powyżej ma wyższą swoistość niż :focus-visible i gasiła
   obrys na polach formularza — sama zmiana koloru ramki to za mało. */
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--fokus);
    outline-offset: 2px;
}

textarea { line-height: 1.55; resize: vertical; }

.podpowiedz { font-size: 13.5px; color: var(--tekst-slaby); margin: 7px 0 0; }

.przycisk {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--plama);
    color: #fff;
    border: 0;
    border-radius: var(--r-mala);
    padding: 14px 24px;
    font-family: var(--display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: background .14s ease, transform .1s ease;
}

.przycisk:hover { background: var(--plama-hover); }
.przycisk:active { transform: translateY(1px); }

.przycisk-pelny { width: 100%; margin-top: 24px; }

.przycisk-maly { padding: 9px 16px; font-size: 15px; background: var(--zolty); color: var(--granat-gleboki); }
.przycisk-maly:hover { background: var(--zolty-ciemny); }

.przycisk-usun { background: var(--blad-plama); color: #fff; }
.przycisk-usun:hover { background: var(--blad-plama-hover); }

.pod-formularzem {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--linia);
    font-size: 14px;
    color: var(--tekst-slaby);
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

/* ---------- komunikaty ---------- */

.komunikat {
    padding: 14px 18px;
    border-radius: var(--r-mala);
    margin-bottom: 20px;
    font-size: 15px;
    border: 1px solid transparent;
}

.komunikat-ok   { background: var(--ok-tlo);   border-color: rgba(18, 115, 74, .3);  color: var(--ok); }
.komunikat-blad { background: var(--blad-tlo); border-color: rgba(176, 42, 33, .3);  color: var(--blad); }
.komunikat-info { background: var(--powierzchnia-alt); border-color: var(--linia); color: var(--tekst); }

/* Czwarty wariant: rzecz, która nie jest błędem, ale zmienia to, co klient
   ma zrobić — jak godziny wpuszczania inne niż godziny imprezy. Tokeny
   `--uwaga` istniały od początku, brakowało samego wariantu komunikatu,
   więc takie treści szły dotąd jako „info" i gubiły się w tle. */
.komunikat-uwaga { background: var(--uwaga-tlo); border-color: rgba(154, 84, 0, .3); color: var(--uwaga); }

/* ---------- tabele ---------- */

/* Kolor tekstu jawnie razem z tłem: ten sam blok stoi też w panelu, którego
   body ma jasny tekst pod ciemne podłoże. Bez tej deklaracji treść tabel
   panelu (numery zamówień, e-maile, kwoty) dziedziczyła jasny kolor i przy
   jasnym motywie systemu leżała na białym tle z kontrastem 1,28:1. */
.tabela-otoczka {
    overflow-x: auto;
    background: var(--powierzchnia);
    color: var(--tekst);
    border: 1px solid var(--linia);
    border-radius: var(--r-duza);
    box-shadow: var(--cien-1);
}

/* Przewijana w poziomie tabela jest osobnym obszarem dostępnym z klawiatury
   (tabindex + role w widoku) — obrys fokusu musi być widoczny na krawędzi. */
.tabela-otoczka:focus-visible { outline-offset: -3px; }

table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 520px; }

th, td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--linia); }

th {
    background: var(--powierzchnia-alt);
    font-family: var(--display);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tekst-slaby);
}

tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--powierzchnia-alt); }

.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
td.liczba, th.liczba { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.plus  { color: var(--ok);   font-weight: 600; font-variant-numeric: tabular-nums; }
.minus { color: var(--blad); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- pustostan ---------- */

.pusto {
    text-align: center;
    padding: 48px 26px;
    color: var(--tekst-slaby);
    background: var(--powierzchnia);
    border: 1.5px dashed var(--linia-mocna);
    border-radius: var(--r-duza);
}

.pusto strong {
    display: block;
    font-family: var(--display);
    font-size: 22px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--tekst);
    margin-bottom: 10px;
}

/* Wąska kolumna wyśrodkowana w treści — formularze (zakup, doładowanie)
   mają swoją szerokość z czytelności wiersza, więc dosunięte do lewej
   krawędzi zostawiały pół ekranu pustki. */
.kolumna-waska { max-width: 560px; margin-inline: auto; }

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

.stopka { background: var(--granat-gleboki); color: #9FC2D5; padding: 30px 0; font-size: 14px; }
.stopka p { margin: 0 0 4px; }
.stopka a { color: #D6EAF5; }
.drobne { font-size: 13px; opacity: .85; }

/* ---------- drobiazgi ---------- */

.wroc {
    display: inline-block;
    font-family: var(--display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .05em;
    text-transform: uppercase;
    margin-bottom: 16px;
    text-decoration: none;
    color: var(--tekst-slaby);
}

.wroc:hover { color: var(--akcent); }

/* ---------- doładowanie ---------- */

.kwoty-szybkie { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }

.kwota-przycisk {
    flex: 1 1 auto;
    min-width: 88px;
    padding: 13px 10px;
    font-family: var(--display);
    font-size: 19px;
    font-weight: 600;
    color: var(--akcent);
    background: var(--powierzchnia-alt);
    border: 1.5px solid var(--linia-mocna);
    border-radius: var(--r-mala);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}

.kwota-przycisk:hover { border-color: var(--blekit); }
.kwota-przycisk.wybrana { background: var(--plama); border-color: var(--plama); color: #fff; }

.podsumowanie {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
    background: var(--powierzchnia-alt);
    border: 1px solid var(--linia);
    border-radius: var(--r-mala);
    padding: 18px;
    margin: 24px 0 4px;
}

.podsumowanie strong {
    display: block;
    font-family: var(--display);
    font-size: 24px;
    font-weight: 700;
    color: var(--akcent);
    font-variant-numeric: tabular-nums;
    margin-top: 3px;
}

.akcje-karty { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

/* ---------- katalog terminów ---------- */

.obiekty { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }

.obiekt {
    padding: 10px 20px;
    border: 1.5px solid var(--linia-mocna);
    border-radius: var(--r-pelna);
    background: var(--powierzchnia);
    color: var(--akcent);
    text-decoration: none;
    font-family: var(--display);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.obiekt:hover { border-color: var(--blekit); }
.obiekt.wybrany { background: var(--plama); border-color: var(--plama); color: #fff; }
/* ---------- kalendarz terminów ----------
   Jedno wejście dziennie to najczęstszy przypadek w MOSiR, a osobna sekcja
   na każdy dzień zamieniała 60 dni sprzedaży w niekończące się przewijanie.
   Dzień jest więc kaflem, a wejścia w nim wierszami — układ działa tak samo
   dla jednego wejścia dziennie, jak dla ślizgawki z pięcioma godzinami. */

.kalendarz {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
    align-items: start;
}

.dzien {
    background: var(--powierzchnia);
    border: 1px solid var(--linia);
    border-radius: var(--r-duza);
    box-shadow: var(--cien-1);
    overflow: hidden;
}

/* Weekend wyróżniony podkładem nagłówka — w obiektach sportowych to dni
   z największym ruchem i najczęściej szukane. */
/* Weekendowe główki dni miały tu szare tło. Usunięte świadomie: szarość
   w tym portalu wszędzie indziej znaczy „nieaktywne", a sobota i niedziela
   to godziny NAJWIĘKSZEJ sprzedaży. Wygaszony wyglądały więc dokładnie
   odwrotnie do stanu faktycznego, a dwa pierwsze dni na liście wyglądały
   inaczej niż reszta bez żadnego powodu widocznego dla kupującego.
   Sobotę i niedzielę i tak nazywa `.dzien-nazwa` — słowem, nie kolorem. */

.dzien-dalszy { display: none; }

.dzien-glowa {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--linia);
}

.dzien-liczba {
    font-family: var(--display);
    font-size: 34px;
    font-weight: 700;
    line-height: 1;
    color: var(--akcent);
    font-variant-numeric: tabular-nums;
}

.dzien-opis { display: flex; flex-direction: column; line-height: 1.25; }

.dzien-miesiac {
    font-family: var(--display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--tekst-slaby);
    font-variant-numeric: tabular-nums;
}

.dzien-nazwa {
    font-size: 13px;
    color: var(--tekst-slaby);
    text-transform: lowercase;
}

/* Wejście: godzina — opis — cena. Trzy kolumny, bo oko szuka najpierw
   godziny, a decyduje ceną. */
.wejscie {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 4px 12px;
    align-items: center;
    padding: 14px 18px;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--linia);
    transition: background .12s ease;
}

.dzien .wejscie:last-child { border-bottom: 0; }
.wejscie:hover { background: var(--powierzchnia-alt); }
/* Kafel przed otwarciem puli albo po jej wyczerpaniu: widoczny, ale nie do kliknięcia. */
.wejscie-zamkniete { cursor: default; }
.wejscie-zamkniete:hover { background: transparent; }
.wejscie-zamkniete .wejscie-godzina, .wejscie-zamkniete .wejscie-cena { opacity: .55; }
.wejscie-stan { font-weight: 600; color: var(--tekst); }

.wejscie-godzina {
    font-family: var(--display);
    font-size: 25px;
    font-weight: 700;
    line-height: 1.05;
    color: var(--akcent);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.wejscie-do { font-size: 17px; font-weight: 600; color: var(--tekst-slaby); }

/* Rodzaj wejścia pod godzinami — „wejście o 08:00" albo „wejście ciągłe".
   Osobny wiersz i krój tekstowy, bo to podpis do liczb nad nim, a nie kolejna
   liczba; obie postacie terminu mają dzięki niemu ten sam układ. */
.wejscie-rodzaj {
    display: block;
    font-family: var(--tekstowy);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0;
    color: var(--tekst-slaby);
}

.wejscie-opis { display: flex; flex-direction: column; min-width: 0; }

.wejscie-usluga {
    font-size: 14px;
    color: var(--tekst);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Nazwa obiektu w wierszu wejścia — potrzebna tylko tam, gdzie w jednym
   kalendarzu stoją terminy z kilku obiektów (strona główna). */
.wejscie-obiekt {
    font-family: var(--display);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1.15;
    text-transform: uppercase;
    color: var(--tekst);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wejscie-miejsca { font-size: 12.5px; color: var(--tekst-slaby); }
.wejscie-miejsca.malo { color: var(--uwaga); font-weight: 600; }

.wejscie-cena {
    font-family: var(--display);
    font-size: 20px;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.wejscie-punkty {
    display: block;
    font-family: var(--tekstowy);
    font-size: 12px;
    font-weight: 400;
    color: var(--tekst-slaby);
}

.wiecej-dni { text-align: center; margin-top: 26px; }

@media (max-width: 420px) {
    .wejscie { padding: 13px 15px; }
    .wejscie-godzina { font-size: 22px; }
    .wejscie-cena { font-size: 18px; }
}

/* ---------- wybór sposobu zapłaty ---------- */

.wybor {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 10px 0 0;
    padding: 15px 17px;
    border: 1.5px solid var(--linia-mocna);
    border-radius: var(--r-mala);
    background: var(--powierzchnia-alt);
    cursor: pointer;
    font-family: var(--tekstowy);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.wybor input { margin-top: 4px; accent-color: var(--akcent); }

.wybor strong {
    display: block;
    font-family: var(--display);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--akcent);
}

.wybor .podpowiedz { margin-top: 3px; }

.wybor:has(input:checked) {
    border-color: var(--blekit);
    background: var(--powierzchnia);
    box-shadow: 0 0 0 3px rgba(1, 176, 243, .12);
}

/* ---------- moje kody ---------- */

.siatka-kodow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
    justify-items: center;
    gap: 18px;
}

.siatka-kodow > * { width: 100%; max-width: 380px; }

.kod {
    position: relative;
    background: var(--powierzchnia);
    border: 1px solid var(--linia);
    border-radius: var(--r-duza);
    padding: 24px 22px;
    box-shadow: var(--cien-2);
    text-align: center;
}

.kod-dzis { border: 2px solid var(--zolty); box-shadow: var(--cien-3); }

.kod-dzis-plakietka {
    position: absolute;
    top: 14px;
    right: 14px;
    background: var(--zolty);
    color: var(--granat-gleboki);
    font-family: var(--display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: 2px 12px;
    border-radius: var(--r-pelna);
}

/* Kod QR zawsze na białym polu, także w ciemnym motywie: czytniki oczekują
   ciemnych modułów na jasnym tle, a nie odwrotnie. */
.kod-obraz {
    background: #fff;
    padding: 12px;
    border-radius: var(--r-mala);
    display: inline-block;
    max-width: 100%;
    border: 1px solid var(--linia);
}

/* max-width, bo przy 320 px kafel kodu jest węższy niż 220 px podglądu
   i obrazek wychodził poza kartę, przewijając całą stronę w bok. */
.kod-obraz img { display: block; width: 220px; max-width: 100%; height: auto; }

.kod-obiekt {
    font-family: var(--display);
    font-size: 22px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--akcent);
    margin-top: 16px;
}

.kod-usluga { font-size: 14px; color: var(--tekst-slaby); }

.kod-termin {
    font-family: var(--display);
    font-size: 20px;
    font-weight: 600;
    margin-top: 10px;
    font-variant-numeric: tabular-nums;
}

/* ---- ODŚWIEŻENIE LISTY BILETÓW: TYLKO W APLIKACJI ----

   Aplikacja dodana do ekranu początkowego nie ma paska adresu, więc nie ma
   czym odświeżyć strony — a lista biletów pokazuje stan sprzed wejścia przez
   bramkę, dopóki ktoś jej nie przeładuje. W przeglądarce ten sam przycisk
   byłby dubletem przycisku, który użytkownik ma nad stroną, więc go tam nie ma.

   `display-mode: standalone` odpowiada dokładnie na pytanie „czy jest pasek",
   a odpowiada na nie przeglądarka — lepiej niż jakikolwiek test w skrypcie. */
.odswiez-wiersz { display: none; }

@media (display-mode: standalone) {
    .odswiez-wiersz { display: block; margin: -6px 0 18px; }
}

/* Rodzaj wejścia pod terminem — ta sama para nazw co na liście i na bilecie. */
.kod-rodzaj {
    display: block;
    font-family: var(--tekstowy);
    font-size: 12.5px;
    font-weight: 400;
    color: var(--tekst-slaby);
}

/* Numer kodu bywa jedyną drogą wejścia: gdy klient nie widzi ekranu albo
   czytnik nie łapie kodu QR, obsługa wpisuje numer ręcznie. Musi więc być
   czytelny, a nie tylko obecny — stąd 13px zamiast 11px i pełny kontrast
   tekstu (17,02:1) zamiast koloru osłabionego. */
.kod-numer { margin-top: 12px; }

.kod-numer-etykieta {
    display: block;
    font-family: var(--display);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tekst-slaby);
}

.kod-numer-wartosc {
    display: block;
    font-size: 13px;
    letter-spacing: .05em;
    color: var(--tekst);
    word-break: break-all;
    font-variant-numeric: tabular-nums;
}

/* ---------- deklaracja dostępności ---------- */

/* Miejsca, w których MOSiR musi wpisać własne dane. Wyróżnienie jest celowo
   krzykliwe: deklaracja z niewypełnioną luką jest gorsza niż jej brak. */
.do-uzupelnienia {
    background: var(--uwaga-tlo);
    color: var(--tekst);
    border: 1px dashed var(--uwaga);
    border-radius: 6px;
    padding: 1px 8px;
    font-weight: 600;
}

/* Wyśrodkowana jak pozostałe strony treści (regulamin, prywatność) —
   dosunięta do lewej zostawiała pół ekranu pustki. */
/* Bez własnej szerokości — o niej decyduje `.kolumna-dokumentu` wokół całej
   treści, tak samo jak na pozostałych stronach z dokumentem. */
.deklaracja h2 { margin-top: 32px; }
.deklaracja h2:first-child { margin-top: 0; }
.deklaracja h3 { margin-top: 22px; }
.deklaracja dt { font-weight: 700; margin-top: 12px; }
.deklaracja dd { margin: 2px 0 0; }

/* ---------- ruch ---------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
}

/* Nazwa usługi nad kalendarzem — pokazywana raz, gdy obiekt sprzedaje
   tylko jedną. Powtórzona w każdym wierszu wymuszała ucinanie tekstu. */
.usluga-nad-kalendarzem { margin: 0 0 16px; }
.usluga-nad-kalendarzem .znacznik { font-size: 15px; padding: 5px 14px; }

/* Nazwa usługi w wierszu (gdy obiekt ma ich kilka) — zawijamy zamiast ucinać:
   „Wejście na stadi…" nie mówi klientowi nic. */
.wejscie-usluga {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.3;
}

.kod-akcja { margin: 16px 0 0; }
.kod-obraz { display: inline-block; text-decoration: none; transition: transform .14s ease; }
.kod-obraz:hover { transform: scale(1.02); }

/* ---------- pole wyboru z opisem ---------- */

/* Etykieta obejmuje CAŁY wiersz, więc kliknięcie w tekst zaznacza pole —
   na telefonie sam kwadracik ma 16 px i trafia się w niego kciukiem co drugi
   raz. Podpowiedź jest w środku etykiety, żeby czytnik ekranu przeczytał ją
   razem z pytaniem, a nie jako osobny, wiszący akapit. */
.pole-wyboru {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 18px 0 4px;
    cursor: pointer;
    font-weight: 500;
}

.pole-wyboru input[type="checkbox"] {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 2px 0 0;
    accent-color: var(--plama);
    cursor: pointer;
}

.pole-wyboru .podpowiedz { display: block; margin-top: 3px; font-weight: 400; }

/* ---------- podpowiedź o dodaniu do ekranu początkowego (iPhone) ---------- */

/* Nad dolną nawigacją, nie pod nią: pasek nawigacji jest przypięty do dołu,
   więc podpowiedź umieszczona niżej byłaby niewidoczna. Wcięcie systemowe
   doliczone, bo na iPhonie z belką gestów pasek rośnie. */
.podpowiedz-apka {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--r-mala);
    background: var(--granat-ciemny);
    color: #E6F1F7;
    font-size: 13.5px;
    line-height: 1.4;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6);
}

.podpowiedz-apka strong { color: var(--zolty); font-weight: 600; }

.podpowiedz-apka button {
    flex: none;
    background: rgba(255, 255, 255, .12);
    border: 0;
    border-radius: var(--r-pelna);
    color: #E6F1F7;
    font: inherit;
    font-size: 13px;
    padding: 7px 13px;
    cursor: pointer;
}

.podpowiedz-apka button:hover { background: rgba(255, 255, 255, .22); }

/* Bez dolnej nawigacji (gość niezalogowany, szeroki ekran) podpowiedź siada
   przy samej krawędzi. */
@media (min-width: 721px) {
    .podpowiedz-apka {
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        left: auto;
        right: 20px;
        max-width: 420px;
    }
}

/* „Nie pokazuj więcej" i „×" to dwie różne decyzje, więc wyglądają różnie:
   pierwsza jest pełnym napisem, druga samym znakiem zamknięcia. Napis odsunięty
   od treści, krzyżyk przy krawędzi — tak jak wszędzie indziej. */
.podpowiedz-apka-nigdy { margin-left: auto; white-space: nowrap; }

.podpowiedz-apka-zamknij {
    font-size: 20px;
    line-height: 1;
    padding: 5px 11px;
}

/* ---------- zgody przy rejestracji ---------- */

/* Same pola korzystają z `.pole-wyboru`; ten blok daje im wspólny odstęp
   i zwęża odstęp MIĘDZY zgodami, żeby czytało się je jako jedną grupę
   oświadczeń, a nie dwa niezależne przełączniki gdzieś w formularzu. */
.zgody { margin: 20px 0 6px; }
.zgody .pole-wyboru { margin: 10px 0; font-weight: 400; }
.zgody a { text-decoration: underline; }

/* ---------- regulamin obiektu pod biletem ---------- */

.regulamin-obiektu {
    margin: 14px auto 0;
    max-width: 420px;
    text-align: center;
    font-size: 13.5px;
    color: var(--tekst-slaby);
}

/* ---------- treść prawna: regulaminy ---------- */

/* Regulamin sam odsyła do własnej numeracji („ust. 8", „§ 3 ust. 12"), więc
   numery MUSZĄ być widoczne i muszą się zgadzać z dokumentem źródłowym.
   Numeruje je przeglądarka z `<ol>`, a nie tekst — dzięki temu nie da się
   ich rozjechać przy edycji. Poziom drugi dostaje litery, tak jak punkty
   w dokumencie. */
.tresc-prawna { line-height: 1.65; }
.tresc-prawna h2 { margin: 26px 0 10px; font-size: 17px; }
.tresc-prawna h2:first-of-type { margin-top: 8px; }
.tresc-prawna ol { margin: 0 0 14px; padding-left: 26px; }
.tresc-prawna li { margin: 7px 0; }
.tresc-prawna ol.punkty { list-style: lower-alpha; margin: 8px 0 4px; }
.tresc-prawna code { font-size: 13px; }