/*
 * ARENA - EKRANY WEJSCIA trzech paneli: logowanie, drugi skladnik, odzyskiwanie i ustawianie hasla, rejestracja,
 * abonament, bledy przed zalogowaniem. JEDEN WZOR (prosba Rafala 2026-09-20) i od etapu S2 JEDEN ARKUSZ:
 * do 2026-09-21 byly trzy (pay-wejscie.css z barwami wpisanymi wprost i osobnym blokiem regul ciemnych,
 * booking-wejscie.css, czesc pulpit.css), ktore roznily sie o 2-4 px i nazwami klas.
 *
 * LADOWANY PO arena.css I arena-komponenty.css (Http\Arkusze::WEJSCIE): pola, przyciski, komunikaty (.komunikat),
 * rzad z polem wyboru (.pole-wyboru) i przelacznik motywu (form.motyw) przychodza ze wspolnych komponentow. Tutaj jest
 * tylko to, co ma ekran wejscia: ciemne tlo strony w obu trybach, karta na srodku, znak marki i naglowek na OSI KARTY
 * (formularz zaczyna sie od lewej, wiec naglowek przy lewej krawedzi wygladal jak kolejne pole, a nie jak szyld),
 * wieksze pole (50,8 px) i przycisk (49 px) - to pierwszy ekran, czesto otwierany na telefonie.
 *
 * ZNACZNIKI (te same w trzech panelach):
 *   <body class="wejscie"><main class="karta-wejscia">
 *     <form class="motyw">...</form>  <img class="znak">  <h1>  <p class="podtytul">  <div class="komunikat blad|ok">
 *     <form> label + input ... <button class="glowny"> </form>  <p class="pod-formularzem"><a>...</a></p>
 *   </main></body>
 *
 * Barwy wylacznie ze zmiennych arena.css - tryb ciemny (z wyboru albo z systemu) nie ma tu ani jednej osobnej reguly.
 */

body.wejscie {
    min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
    padding: 24px; background: var(--gradient-wejscia);
}
.karta-wejscia {
    position: relative; width: 100%; max-width: 420px; margin: 0; padding: 32px 28px;
    background: var(--papier); color: var(--tekst); border: 1px solid var(--linia); border-radius: 16px;
    box-shadow: var(--cien-wejscia);
    display: flex; flex-direction: column;
}
/* Znak marki to PLIK z oryginalnej aplikacji, a nie litery w CSS - jeden znak we wszystkich narzedziach. */
.karta-wejscia .znak { display: block; width: 48px; height: 48px; margin: 0 auto 18px; }
/* Przelacznik motywu: na dole karty, wysrodkowany (prosba Rafala 2026-09-22). */
.karta-wejscia > .motyw {
    order: 99; margin: 24px auto 0; justify-content: center; position: static;
}
.karta-wejscia > .motyw button {
    color: var(--tekst-trzeci);
}
.karta-wejscia > .motyw button:hover {
    color: var(--tekst);
    background: var(--tlo-delikatne);
}
.karta-wejscia > .motyw button[aria-pressed="true"] {
    color: var(--motyw-wybrany);
    border-color: var(--motyw-wybrany-linia);
    background: var(--motyw-wybrany-tlo);
}
.karta-wejscia h1 {
    margin: 0 0 4px; font-size: 22px; font-weight: 800; letter-spacing: -.02em; text-align: center; color: var(--tekst);
    font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.karta-wejscia .podtytul { margin: 0 0 22px; text-align: center; }
.karta-wejscia .komunikat { margin: 0 0 4px; }
.karta-wejscia label { margin: 14px 0 6px; }
.karta-wejscia input[type="text"], .karta-wejscia input[type="email"], .karta-wejscia input[type="password"],
.karta-wejscia input[type="tel"], .karta-wejscia select { margin: 0; padding: 12px; min-height: 46px; }
/* Przycisk konczacy formularz: na cala szerokosc karty. Glowny ma barwe ekranow wejscia (w ciemnym trybie pelne indygo
   z bialym napisem - jasniejsza barwa marki z panelu swiecilaby na ciemnej karcie mocniej niz naglowek). */
.karta-wejscia form:not(.motyw) > button { width: 100%; margin-top: 20px; padding: 14px 18px 12px; min-height: 48px; }
.karta-wejscia form:not(.motyw) > button + button { margin-top: 8px; }
.karta-wejscia button.glowny { background: var(--w-przycisk); color: var(--w-przycisk-tekst); }
.karta-wejscia button.glowny:hover { background: var(--w-przycisk-najazd); color: var(--w-przycisk-najazd-tekst); }
.karta-wejscia .pole-wyboru { margin: 16px 0 0; font-size: 13.5px; align-items: center; }
.karta-wejscia .pole-wyboru input[type="checkbox"] { margin: 0; }
/* Napis przy polu wyboru w jednej linii z polem - bez odstepu napisow nad polami tekstowymi (.karta-wejscia label wyzej wygrywal
   z .pole-wyboru label ze wspolnych komponentow: ta sama waga, pozniejszy arkusz; "Zapamietaj mnie" stal nizej niz pole). */
.karta-wejscia .pole-wyboru label { margin: 0; }
.karta-wejscia .pod-formularzem { margin: 16px 0 0; font-size: 13.5px; color: var(--tekst-trzeci); text-align: center; }
/* ZNAK STANU nad tytulem ekranow rejestracji, oplaty z linku i stron bledow (1.363/1.365; samo kolko - od 1.366 w arena-komponenty.css, bo
   uzywa go tez pulpit operatora): znak produktu nad nim maleje. */
.karta-wejscia:has(.znak-stanu) .znak { width: 28px; height: 28px; margin-bottom: 14px; }
/* Glowna czynnosc ekranu jako przycisk-odnosnik (1.363) - jak przycisk konczacy formularz; szary, gdy to tylko droga dalej (logowanie). */
.karta-wejscia a.przycisk-wejscia { display: flex; width: 100%; margin-top: 20px; padding: 14px 18px 12px; min-height: 48px; justify-content: center; }
.karta-wejscia a.przycisk-wejscia.glowny { background: var(--w-przycisk); color: var(--w-przycisk-tekst); }
.karta-wejscia a.przycisk-wejscia.glowny:hover { background: var(--w-przycisk-najazd); color: var(--w-przycisk-najazd-tekst); }
.karta-wejscia a { font-weight: 600; }
.karta-wejscia p { margin: 0 0 12px; }
.karta-wejscia ul { margin: 0 0 12px; padding-left: 20px; }

/* --- SAMODZIELNA REJESTRACJA (Http\EkranyRejestracji - panele ArenaBooking i ArenaPay; do 1.196 w booking-wejscie.css) --------- */
.opcjonalne { color:var(--tekst-trzeci); font-weight:400; }
.blad-pola { margin:4px 0 0; font-size:13px; color:var(--zn-czerwony-tekst); }
/* Zgody: tekst pelnej wielkosci (czytany przed podpisaniem), nie drobny dopisek. */
.formularz-rejestracji .pole-wyboru { margin:14px 0 0; font-size:14px; align-items:flex-start; }
.formularz-rejestracji .pole-wyboru input[type=checkbox] { margin:3px 0 0; }
/* Pole-pulapka: poza ekranem, a nie display:none - czesc automatow pomija pola ukryte stylem wprost. */
.pulapka { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }

/* PAKIETY W REJESTRACJI (BLUEPRINT 1.170 krok B): karta na plan, pola wyboru okresu pod lista funkcji; wybrana karta
   w barwie marki (:has - przegladarka bez niego pokazuje karty bez podswietlenia, wybor dziala tak samo). */
.pakiety-rejestracji { border:0; margin:0; padding:0; min-width:0; }
.pakiet-rejestracji { border:1px solid var(--linia-pola); border-radius:14px; padding:14px 16px 16px; margin-bottom:12px;
    transition:border-color .15s, background-color .15s; }
.pakiet-rejestracji:hover { border-color:color-mix(in srgb, var(--marka) 45%, var(--linia-pola)); }
.pakiet-rejestracji:has(input:checked) { border-color:var(--marka); box-shadow:inset 0 0 0 1px var(--marka);
    background:color-mix(in srgb, var(--marka) 6%, var(--papier)); }
.nazwa-pakietu { margin:0; display:flex; justify-content:space-between; align-items:baseline; font-weight:800; font-size:17px; }
.cena-pakietu { font-weight:700; }
/* Funkcje z "ptaszkiem" w barwie marki zamiast kropek. */
.funkcje-pakietu { margin:8px 0 4px; padding:0; list-style:none; font-size:13.5px; color:var(--tekst-drugi); }
.funkcje-pakietu li { position:relative; padding-left:22px; }
.funkcje-pakietu li::before { content:""; position:absolute; left:3px; top:.42em; width:9px; height:5px;
    border-left:2px solid var(--marka); border-bottom:2px solid var(--marka); transform:rotate(-45deg); }
.funkcje-pakietu li + li { margin-top:3px; }
/* Okresy jako wiersze do klikniecia - wybrany z obwodka marki. */
.karta-wejscia .pakiet-rejestracji .pole-wyboru { margin:12px 0 0; padding:10px 12px; border:1px solid var(--linia); border-radius:10px;
    background:var(--papier); cursor:pointer; }
.karta-wejscia .pakiet-rejestracji .pole-wyboru + .pole-wyboru { margin-top:8px; }
.karta-wejscia .pakiet-rejestracji .pole-wyboru:has(input:checked) { border-color:var(--marka); }
.karta-wejscia .pakiet-rejestracji .pole-wyboru input[type=radio] { margin:3px 0 0; }
/* PLAN Z ODNOSNIKA (1.714): krotka lista pol wyboru bez list funkcji - wiersze jak okresy w kartach, wybrany jak wybrana karta. */
.karta-wejscia .plan-z-linku .pole-wyboru { margin:0; padding:10px 12px; border:1px solid var(--linia-pola); border-radius:10px;
    background:var(--papier); cursor:pointer; }
.karta-wejscia .plan-z-linku .pole-wyboru + .pole-wyboru { margin-top:8px; }
.karta-wejscia .plan-z-linku .pole-wyboru:has(input:checked) { border-color:var(--marka); box-shadow:inset 0 0 0 1px var(--marka);
    background:color-mix(in srgb, var(--marka) 6%, var(--papier)); }
.karta-wejscia .plan-z-linku .pole-wyboru input[type=radio] { margin:3px 0 0; }
/* Adres do faktury i prosba o start przed terminem odstapienia (1.208) tylko przy pakiecie platnym: zaznaczony FREE chowa oba
   (serwer i tak wymaga ich tylko dla platnego). */
.karta-wejscia .naglowek-sekcji { margin:22px 0 2px; font-weight:700; }
.formularz-rejestracji:has(input[name="pakiet"][value="free"]:checked) .dane-faktury,
.formularz-rejestracji:has(input[name="pakiet"][value="free"]:checked) .zgoda-start { display:none; }
.kod-i-miasto { display:grid; grid-template-columns:7.5rem minmax(0, 1fr); gap:0 12px; }

/* UKLAD FORMULARZA REJESTRACJI (1.263, Rafal 2026-09-28: "moze dwukolumnowa na komputerze albo jakos lepiej niz ten dlugi pasek").
   Trzy kroki z numerami (licznik CSS - legenda pakietow i naglowki sekcji): 1. pakiet z "co dalej", 2. dane, 3. zgody i wyslanie.
   Karta rejestracji szersza niz karta logowania (:has - tylko ekran z formularzem rejestracji); od 880 px dwie kolumny: pakiety po
   lewej, przyklejone przy przewijaniu, dane i zgody po prawej. Wezej - jedna kolumna w tej samej kolejnosci. */
.karta-wejscia:has(> .formularz-rejestracji) { max-width:960px; }
.formularz-rejestracji { counter-reset:krok; }
.rodzaj-rejestracji > legend, .pakiety-rejestracji > legend, .krok-rejestracji > h2 {
    display:flex; align-items:center; gap:10px; margin:0 0 12px; padding:0; border:0;
    font-size:16px; font-weight:800; letter-spacing:-.01em; color:var(--tekst);
}
.rodzaj-rejestracji > legend::before, .pakiety-rejestracji > legend::before, .krok-rejestracji > h2::before {
    counter-increment:krok; content:counter(krok); flex:none; display:inline-flex; align-items:center; justify-content:center;
    width:26px; height:26px; border-radius:50%; background:var(--marka); color:var(--na-marce); font-size:13px; font-weight:800;
}
.krok-rejestracji > h2 + label { margin-top:0; }
.krok-rejestracji + .krok-rejestracji { margin-top:28px; padding-top:24px; border-top:1px solid var(--linia); }
.kolumna-danych { margin-top:28px; }
/* CO PROWADZISZ? (1.609): formularz z kilkoma ofertami (ArenaBooking: Noclegi i Szkola) zaczyna sie od ich wyboru - krok nad kolumnami,
   dwa przyciski obok siebie takze na telefonie. Przycisk drugiej oferty wysyla formularz (bez skryptu); wybrany wyglada jak wybrana karta
   pakietu. */
.rodzaj-rejestracji { border:0; margin:0 0 24px; padding:0; min-width:0; }
.rodzaje { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.karta-wejscia .rodzaje .rodzaj { display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:2px; width:100%;
    margin:0; padding:13px 16px 11px; text-align:left; line-height:1.35; border:1px solid var(--linia-pola); border-radius:14px;
    background:var(--papier); color:var(--tekst); transition:border-color .15s, background-color .15s; }
.karta-wejscia .rodzaje .rodzaj:hover { border-color:color-mix(in srgb, var(--marka) 45%, var(--linia-pola)); background:var(--papier); }
.karta-wejscia .rodzaje .rodzaj[aria-pressed="true"] { border-color:var(--marka); box-shadow:inset 0 0 0 1px var(--marka); cursor:default;
    background:color-mix(in srgb, var(--marka) 6%, var(--papier)); }
.nazwa-rodzaju { font-size:16px; font-weight:800; }
.opis-rodzaju { font-size:13px; font-weight:400; color:var(--tekst-drugi); }
/* Co dalej: trzy kroki po wyslaniu - pod kartami pakietow. */
.co-dalej { margin:4px 0 0; padding:14px 16px; border-radius:12px; background:var(--tlo-delikatne); font-size:13.5px; color:var(--tekst-drugi); }
.karta-wejscia .co-dalej-tytul { margin:0 0 6px; font-weight:700; color:var(--tekst); }
.co-dalej ol { margin:0; padding:0; list-style:none; counter-reset:krok; display:grid; gap:8px; }
/* Kroki z numerem w kolku jak Pierwsze kroki w panelu (1.363). */
.co-dalej li { counter-increment:krok; display:grid; grid-template-columns:22px minmax(0, 1fr); gap:10px; align-items:start; }
.co-dalej li::before { content:counter(krok); display:grid; place-items:center; width:22px; height:22px; border-radius:50%; font-size:12px; font-weight:700;
    background:var(--zn-fiolet-tlo); color:var(--zn-fiolet-tekst); }
/* NIP z przyciskiem "Pobierz dane" w jednej linii (przycisk tej samej wysokosci co pole). */
.nip-i-przycisk { display:flex; gap:8px; }
.nip-i-przycisk input { flex:1 1 auto; min-width:0; }
.nip-i-przycisk .pobierz-dane { flex:none; min-height:46px; padding:10px 16px 8px; white-space:nowrap; border-color:var(--linia-pola); }
.info-pola { margin:6px 0 0; font-size:13px; color:var(--zn-zielony-tekst); }
.obiekt-i-telefon { display:grid; grid-template-columns:minmax(0, 1fr); gap:0 12px; }
.karta-wejscia .informacja-o-danych { margin:16px 0 0; font-size:13px; color:var(--tekst-trzeci); }
.formularz-rejestracji .zgody-rejestracji > button.glowny { width:100%; margin-top:20px; padding:14px 18px 12px; min-height:48px; }
/* Przycisk domyslny (Enter = wyslanie zgloszenia, nie "Pobierz dane"): poza ekranem jak pulapka. */
.przycisk-domyslny { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
@media (min-width: 560px) {
    .obiekt-i-telefon { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
}
@media (min-width: 880px) {
    .karta-wejscia:has(> .formularz-rejestracji) { padding:36px 40px; }
    .kolumny-rejestracji { display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:0 44px; align-items:start; }
    .kolumna-pakietow { position:sticky; top:24px; }
    .kolumna-danych { margin-top:0; }
}
/* PLAN Z ODNOSNIKA NA TELEFONIE (1.714): "Co dalej?" pod przyciskiem wyslania, zeby pole e-mail bylo na pierwszym ekranie
   (z kartami planow i na komputerze - pod planem jak dotad). */
@media (max-width: 879.98px) {
    .kolumny-rejestracji:has(.plan-z-linku) { display:flex; flex-direction:column; }
    .kolumny-rejestracji:has(.plan-z-linku) > .kolumna-pakietow { display:contents; }
    .kolumny-rejestracji:has(.plan-z-linku) .co-dalej { order:1; margin-top:24px; }
}

/* PLATNOSC ZA PAKIET Z REJESTRACJI (BLUEPRINT 1.174 krok D2): podsumowanie jak paragon - etykieta po lewej, wartosc po prawej,
   kwota do zaplaty wyrozniona pod kreska. */
/* Odstep kolumn jako wciecie etykiety, nie "gap": kreska nad kwota do zaplaty idzie wtedy przez cala szerokosc bez przerwy. */
.podsumowanie-pakietu { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:8px 0; margin:4px 0 0; padding:14px 16px;
    border:1px solid var(--linia-pola); border-radius:12px; font-size:14.5px; }
.podsumowanie-pakietu dt { color:var(--tekst-drugi); padding-right:16px; }
.podsumowanie-pakietu dd { margin:0; text-align:right; font-weight:600; overflow-wrap:anywhere; }
/* Ostatni wiersz: wspolna wysokosc linii - etykieta na wysokosci wiekszej kwoty, a kreska nad nim w jednej linii (wyrownanie do linii
   bazowej przesunelo by pola, a z nimi kreske). */
.podsumowanie-pakietu dt:last-of-type, .podsumowanie-pakietu dd:last-of-type { padding-top:10px; border-top:1px solid var(--linia-pola); line-height:26px; }
.podsumowanie-pakietu .do-zaplaty { font-size:18px; font-weight:800; }
.podsumowanie-pakietu .bez-lamania { white-space:nowrap; }

/* CZEKANIE NA ROZLICZENIE WPLATY (1.262, EkranyRejestracji): pasek zapelnia sie do automatycznego odswiezenia strony - 5 s, tyle co
   EkranyRejestracji::ODSWIEZ_SEKUND (meta refresh). Sam CSS; przy ograniczonym ruchu pasek stoi (strona i tak sie odswiezy). */
.odliczanie { height: 4px; margin: 16px 0 0; border-radius: 999px; background: var(--linia); overflow: hidden; }
.odliczanie > span { display: block; height: 100%; background: var(--marka); transform: scaleX(0); transform-origin: left center;
                     animation: odliczanie 5s linear forwards; }
@keyframes odliczanie { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .odliczanie > span { animation: none; transform: scaleX(1); opacity: .35; } }
.odliczanie + .pod-formularzem { margin-top: 8px; }