/* =========================================================
   ishop – warstwa uzupełniająca

   Tu są WYŁĄCZNIE komponenty, których makieta nie miała: kroki rejestracji, komunikaty
   błędów, cena odnowienia na karcie pakietu, przełącznik okresu, ramy panelu klienta.
   Wszystko korzysta z tokenów z `ishop.css` — kolor wiodący zmienia się w jednym miejscu.
   ========================================================= */

/* ---------- dostępność ---------- */
.skip-link{
  position:absolute;
  left:-9999px;
  top:0;
  z-index:200;
  background:var(--blue);
  color:#fff;
  padding:12px 18px;
  border-radius:0 0 var(--radius-sm) 0;
  font-weight:600;
}
.skip-link:focus{left:0}

:focus-visible{outline:3px solid var(--blue);outline-offset:2px}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ---------- kontenery ---------- */
.container--narrow{max-width:900px}
.section--narrow{padding:64px 0 96px}
.h3{font-size:22px;font-weight:700;letter-spacing:-.02em;margin:0 0 12px}

/* ---------- komunikaty ---------- */
.alert{
  display:flex;
  gap:14px;
  align-items:flex-start;
  padding:16px 18px;
  border-radius:var(--radius-sm);
  border:1px solid var(--line);
  background:var(--soft);
  margin:0 0 20px;
}
.alert__icon{
  width:22px;height:22px;flex:none;margin-top:1px;
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.alert__text{margin:0;font-size:15px;line-height:1.5}
/* Kod błędu drobnym drukiem: użytkownik ma czym opisać zgłoszenie, ale nie czyta go pierwszy. */
.alert__code{margin:6px 0 0;font-size:12px;color:var(--muted);letter-spacing:.02em}
/* ODNOŚNIK W RAMCE MUSI WYGLĄDAĆ NA ODNOŚNIK. Reguła globalna to `a{color:inherit;
   text-decoration:none}`, więc odnośnik w tym akapicie dziedziczył szarość drobnego druku
   i nie różnił się niczym od daty obok. Dotyczy trzech miejsc, w których cała treść ramki
   sprowadza się do „kliknij tutaj": zawieszony sklep na pulpicie, droga do historii konta
   i nieopłacone faktury. Ramka, z której nie widać wyjścia, jest samym komunikatem. */
.alert__code a{color:var(--blue);text-decoration:underline}
.alert--error .alert__code a{color:#8d1f24}
.alert--error{background:#fdf1f1;border-color:#f3c9cb;color:#8d1f24}
.alert--error .alert__text{color:#7a1a1f}
.alert--info{background:var(--blue-light);border-color:#c9d8ff;color:var(--blue-dark)}
.alert--success{background:#eef8f1;border-color:#bfe3cb;color:#1c6b39}
/* Ostrzezenie: cos wymaga uwagi, ale nie jest bledem. Te same barwy, co `alert--warn`
   w `shop.css` - tamten arkusz laduja WYLACZNIE strony sklepu, wiec w panelu klienta
   ta sama klasa renderowala sie jako zwykla szara ramka. Ostrzezenie, ktore nie wyglada
   na ostrzezenie, nie jest ostrzezeniem. */
.alert--warn{background:#fff8e8;border-color:#f0dca8;color:#7a5a12}

/* ---------- formularze wspólne ---------- */
.form .field + .field{margin-top:16px}
.field__hint{margin:8px 2px 0;font-size:13px;color:var(--muted)}
/* ETYKIETA I POMOC W JEDNYM RZEDZIE (makieta: `.row-between`). Odnosnik „Nie pamietam hasla"
   stal pod przyciskiem i czytal sie jak DRUGIE dzialanie formularza; przy etykiecie jest tym,
   czym jest — pomoca do tego jednego pola. `align-items:baseline`, zeby linia pisma etykiety
   i odnosnika stala na tej samej wysokosci mimo roznych rozmiarow. */
.field__row{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.field__pomoc{font-size:13px;color:var(--blue);text-decoration:none;white-space:nowrap}
.field__pomoc:hover{text-decoration:underline}
/* ODSTEP PO PODPOWIEDZI. `.field + .field` nie zadziala, gdy miedzy polami stoi zdanie
   podpowiedzi albo caly rzad `clookup` — a od rundy 80 stoi, bo formularz danych firmy sklada
   sie z fragmentow. Bez tego etykieta nastepnego pola siadala tuz pod podpowiedzia i ekran
   wygladal na sklejony; widac to bylo dopiero na zrzucie, nie w zadnym tescie. */
.form .field__hint + .field,
.form .field__hint + .cgrid-2,
.form .field__hint + .clookup,
.form .clookup + .field{margin-top:16px}
/* Zdanie o jezyku dokumentu przed checkboxem zgody. Zwykla podpowiedz (`field__hint`) jest
   szara i 13 px - dla przypisu pod polem to wlasciwe, ale wlasciciel prosil o informacje
   WIDOCZNA przed przyciskiem, na ktorej klient opiera zgode. Stad kolor tekstu zamiast
   szarosci i odstep, ktory oddziela zdanie od samego checkboxa. */
.field__hint--consent{margin:0 2px 10px;color:var(--ink)}
/* Pole wielolinijkowe. `height` z jednej klasy pola trzeba wylaczyc wprost, inaczej
   `min-height` wygrywa dopiero przypadkiem, a `resize` nie ma czego powiekszac. */
.field--area .field__input{height:auto;min-height:130px;padding:12px 15px;resize:vertical}

/* PRZYCISK FORMULARZA MA WYSOKOSC POLA, POD KTORYM STOI.

   `INTERFEJS.md` par. 1 mowi o polu i przycisku jako o JEDNYM ksztalcie i wymienia trzy
   wartosci: promien 14px, wysokosc 52px, etykieta nad polem. Promien zszedl do wspolnego
   tokenu w rundzie 62 i zgadza sie wszedzie — wysokosc nie. `.field__input` ma 52 px
   z wlasnej reguly, a `.btn` liczy swoja z paddingu i wychodzi 42. Na ekranie logowania
   tego nie widac, bo tam przycisk ma dodatkowo `.btn--block` z `height:52px` (`auth.css`) —
   i to jest cala przyczyna, dla ktorej roznica przezyla rundy 62-86: sprawdzano ja tam,
   gdzie akurat byla naprawiona.

   Zmierzone 11.08.2026 na wdrozonej usludze, przed ta regula: pole 52 px, przycisk 42 px
   na `/account/domains`, `/account/security/2fa/setup` i `/account/security/2fa/disable`.

   `min-height`, nie `height`: napis w innym jezyku bywa dluzszy i przycisk musi miec prawo
   urosnac, zamiast przycinac tekst. `.btn--sm` zostaje maly — to akcja w wierszu tabeli albo
   w karcie, nie przycisk formularza (makieta ma dla nich osobna wysokosc, 38 px).
   Selektor jest z `>`, wiec dotyczy WYLACZNIE wlasnych dzialan formularza; przyciski
   w srodku kart i tabel wewnatrz formularza zostaja, jakie byly. */
.form > .btn:not(.btn--sm){min-height:52px}
.field__input--code{
  letter-spacing:.5em;
  font-size:20px;
  font-weight:700;
  text-align:center;
}

.check{
  display:flex;
  gap:12px;
  align-items:flex-start;
  margin:18px 0 0;
  font-size:14px;
  line-height:1.5;
  color:var(--muted-2);
  cursor:pointer;
}
.check input{margin-top:3px;width:18px;height:18px;flex:none;accent-color:var(--blue)}
.check a{color:var(--blue);text-decoration:underline}
.check[aria-invalid="true"]{color:#8d1f24}

/* ---------- kroki rejestracji ---------- */
.steps{
  display:flex;
  gap:8px;
  margin:0 0 28px;
  padding:0;
  list-style:none;
  font-size:12px;
  font-weight:600;
  color:var(--muted);
}
.steps li{
  display:flex;
  align-items:center;
  gap:8px;
  flex:1;
  /*
    `min-width:0` jest tu warunkiem dzialania `text-overflow` nizej, a nie kosmetyka.
    Element listy jest polem elastycznym, a takie pole ma domyslnie `min-width:auto` —
    czyli nie skurczy sie ponizej swojej tresci, mimo `flex:1`. Skutkiem byl licznik
    krokow SZERSZY niz kolumna: trzeci krok wychodzil poza nia i obcinala go krawedz,
    zamiast skrocic go wielokropkiem.

    Widoczne dopiero po angielsku (`20260731-0912-r29-rejestracja-en.png`): „Dane i haslo"
    ma 12 znakow, „Details and password" — 20. Polska wersja miescila sie przypadkiem,
    wiec ta usterka czekala na pierwszy dluzszy jezyk.
  */
  min-width:0;
  padding:8px 10px;
  border-radius:999px;
  background:var(--soft);
  border:1px solid transparent;
}
.steps__num{
  width:20px;height:20px;flex:none;
  display:grid;place-items:center;
  border-radius:50%;
  background:var(--line-2);
  color:#fff;
  font-size:11px;
}
.steps__label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.steps li.is-current{background:var(--blue-light);border-color:#c9d8ff;color:var(--blue-dark)}
.steps li.is-current .steps__num{background:var(--blue)}
.steps li.is-done{color:var(--muted-2)}
.steps li.is-done .steps__num{background:#1c6b39}

@media (max-width:520px){
  .steps__label{display:none}
  .steps li{flex:none;padding:8px}
}

/* ---------- ekrany logowania: dodatki ---------- */
.auth__note{
  margin:18px 0 0;
  font-size:13px;
  line-height:1.6;
  color:var(--muted);
}
.auth__note--warn{
  padding:10px 14px;
  border-radius:var(--radius-sm);
  background:#fff8e8;
  border:1px solid #f0dca8;
  color:#7a5a12;
}
.auth__note a{color:var(--blue);text-decoration:underline}

/*
  Wskazanie na drugie logowanie. Musi być widoczne, a nie schowane w stopce —
  klient nie odróżnia konta w ishop od konta w swoim sklepie.
*/
.auth__switch{
  margin:22px 0 0;
  padding:14px 16px;
  border-radius:var(--radius-sm);
  background:var(--blue-light);
  font-size:14px;
  color:var(--blue-dark);
}
.auth__switch a{font-weight:600;text-decoration:underline;white-space:nowrap}

.auth__resend{margin-top:12px}
.auth__resend .btn--block{margin-top:0}

/* ---------- cennik: elementy, których makieta nie miała ---------- */
.period-switch{
  display:inline-flex;
  gap:4px;
  padding:4px;
  border-radius:999px;
  background:var(--soft-2);
  margin:0 auto 8px;
}
.period-switch a{
  padding:10px 22px;
  border-radius:999px;
  font-size:14px;
  font-weight:600;
  color:var(--muted-2);
  transition:background .18s ease,color .18s ease;
}
.period-switch a.is-active{background:#fff;color:var(--ink);box-shadow:var(--shadow)}

/*
  Kwota odnowienia. Stoi przy cenie, tym samym krojem, mniejszym stopniem — nie pod
  gwiazdką i nie w regulaminie. To jest zdanie, którego brak wraca jako obciążenie zwrotne.
*/
.plan__renewal{
  margin:6px 0 0;
  font-size:14px;
  font-weight:500;
  color:var(--muted-2);
}
.plan__renewal b{font-weight:700;color:var(--ink)}

.plan__omnibus{
  margin:8px 0 0;
  font-size:12px;
  line-height:1.5;
  color:var(--muted);
  /* Zdanie o cenie z 30 dni lamie sie na dwie linie tylko po angielsku - jest dluzsze niz
     polskie. Bez tego kwota zostawala SAMA w drugim wierszu ("...before the reduction:" /
     "PLN 29 net"), czyli jedyna liczba w tym zdaniu wygladala jak osobny podpis pod karta.
     `balance` rozklada wiersze rowno; przegladarka bez tej wlasciwosci lamie jak dotad. */
  text-wrap:balance;
}
.plan__old--empty{min-height:26px;margin:0}
.plan__contact-note{
  margin:12px 0 0;
  font-size:13px;
  line-height:1.5;
  color:var(--muted);
}

/*
  Tryb awaryjny cennika musi być widoczny, a nie subtelny. Cennik pokazujący kwoty
  z kodu, gdy backend milczy, jest najgorszym trybem awaryjnym w sklepie — więc kwoty
  są opisane jako poglądowe, a przycisk zakupu zamieniony na pytanie o cenę.
*/
.plans__notice{max-width:860px;margin:0 auto 28px}
.plans__notice .alert{background:#fff8e8;border-color:#e8c877;color:#7a5a12}
.plan[data-fallback] .plan__price b,
.plan[data-fallback] .plan__price span{opacity:.65}
.plan__fallback{
  margin:8px 0 0;
  padding:8px 12px;
  border-radius:10px;
  background:#fff8e8;
  border:1px solid #f0dca8;
  font-size:12px;
  line-height:1.5;
  color:#7a5a12;
}
.plans__legal{
  max-width:860px;
  margin:36px auto 0;
  font-size:13px;
  line-height:1.7;
  color:var(--muted);
  text-align:center;
}

.trial-cta{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin:24px 0 0}
.trial-cta__note{font-size:13px;color:var(--muted)}
.cta .trial-cta{align-items:center}
.cta .trial-cta__note{color:rgba(255,255,255,.7)}
.wow .trial-cta__note{color:rgba(255,255,255,.7)}

/* ---------- formularz kontaktowy pakietu ---------- */
.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:40px;
  align-items:start;
  margin-top:32px;
}
.contact-aside .plan{margin:0}
@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr}
}

.checklist{margin:0 0 16px;padding:0;list-style:none}
.checklist li{
  position:relative;
  padding:0 0 0 28px;
  margin:0 0 10px;
  font-size:15px;
  line-height:1.6;
  color:var(--muted-2);
}
.checklist li::before{
  content:"";
  position:absolute;left:6px;top:9px;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--blue);
}


/* ---------- strony dokumentowe (/terms, /privacy, /help, …) ---------- */
/*
  Jeden zestaw stylów dla wszystkich siedmiu. Dokument czyta się w jednej kolumnie
  i szerokość jest tu treścią, nie ozdobnikiem: wiersz dłuższy niż ~75 znaków gubi
  się przy przejściu do następnego, a regulamin ktoś czyta wtedy, kiedy szuka
  konkretnego zdania.
*/
/* Zawezenie WYLACZNIE w dokumencie: `.container--narrow` jest juz uzywane gdzie indziej
   (900px) i podmiana go globalnie zwezilaby cudze ekrany. */
.doc .container--narrow{max-width:760px}
.doc{padding:48px 0 72px}
.doc__head{margin:0 0 32px}
.doc__stamp{margin:12px 0 0;font-size:13px;color:var(--muted)}
.doc__block{margin:0 0 28px}
/* Rozdzial z kotwica musi wyladowac PONIZEJ przyklejonego paska, nie pod nim: bez tego
   odnosnik "Pierwsze kroki" przewija strone tak, ze naglowek rozdzialu chowa sie za paskiem,
   a klient widzi srodek akapitu i nie wie, czy trafil tam, gdzie chcial. Widziane w Chrome
   po kliknieciu w stopke - `id` bylo poprawne, przewiniecie tez, a wynik i tak myli. */
.doc__block[id]{scroll-margin-top:calc(var(--header-h) + 24px)}
.doc__heading{margin:0 0 10px;font-size:19px;font-weight:700;letter-spacing:-.01em}
.doc__text{margin:0 0 12px;font-size:15px;line-height:1.75;color:var(--muted-2)}
.doc__list{margin:0 0 12px;padding:0 0 0 22px;font-size:15px;line-height:1.75;color:var(--muted-2)}
.doc__list li{margin:0 0 6px}
.doc__list a,.doc__text a{color:var(--blue)}
.doc__list a:hover,.doc__text a:hover{text-decoration:underline}
.doc__contact dt{margin:0 0 2px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.doc__contact dd{margin:0;font-size:15px;font-weight:600}
.doc__back{margin:36px 0 0}

/* ---------------------------------------------------------------------------------------
   DANE FIRMY: NUMER, KRAJ I POBRANIE Z REJESTRU.

   Styl stoi tutaj, a nie w `checkout.css`, bo od rundy 80 ten formularz jest w DWoCH
   miejscach - w kasie i na ekranie danych firmy w koncie - z jednego fragmentu Thymeleaf.
   `views.css` laduja obie strony; `checkout.css` tylko kasa, wiec styl zostawiony tam
   dawalby w panelu rzad bez ukladu. Zlapal to `KsztaltPolaTest`.

   `align-items:end`, a nie `start`: obok pol stoja etykiety nad nimi, wiec przycisk
   wyrownany do gory usiadlby na wysokosci NAPISU, nie pola.

   Kraj stoi w tym rzedzie, a nie nizej przy adresie, bo to on rozstrzyga, w ktorym rejestrze
   pytamy - a te zaleznosc widac tylko wtedy, gdy oba pola stoja przy przycisku, ktory ich uzywa.
   --------------------------------------------------------------------------------------- */
.clookup{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,14rem) auto;gap:12px;align-items:end}
.clookup__btn{height:52px;white-space:nowrap}
.field--kraj{min-width:0}
/* `select` musi miec te sama wysokosc co `input` obok, inaczej rzad wyglada na zlamany. */
.field--kraj .field__input{height:52px}
@media (max-width:860px){
  .clookup{grid-template-columns:minmax(0,1fr) minmax(0,12rem)}
  .clookup__btn{grid-column:1 / -1;width:100%}
}
@media (max-width:560px){
  .clookup{grid-template-columns:1fr}
  .clookup__btn{width:100%}
}
/* Uwaga, ktora NIE jest bledem: przedrostek numeru VAT rozni sie od wybranego kraju.
   Bywa to poprawne, wiec kolor ostrzezenia, a nie czerwien odrzucenia. */
.field__hint--uwaga{color:#8a6100}

/* --- strona stanu uslugi (/status) --------------------------------------------------------- */
/* Pomiar stoi NAD trescia redakcyjna: klient wchodzi tu z jednym pytaniem ("czy to u was?")
   i ma dostac odpowiedz w pierwszym ekranie, bez przewijania. */
.stan{margin:0 0 2rem}
.stan__naglowek{font-size:1.25rem;font-weight:600;margin:0 0 .25rem}
.stan__naglowek--dziala{color:#1c6b39}
.stan__naglowek--awaria{color:#8d1f24}
.stan__naglowek--niepewny{color:#7a5a12}
.stan__czas{color:#5b6470;font-size:.9rem;margin:0 0 1rem}
.stan__lista{list-style:none;margin:0;padding:0;border:1px solid #e3e7ec;border-radius:14px}
.stan__pozycja{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem;
  padding:.75rem 1rem;border-top:1px solid #eef1f4}
.stan__pozycja:first-child{border-top:0}
.stan__nazwa{flex:1 1 14rem}
/* Slowo stanu niesie znaczenie samo, bez koloru - dlatego ma wage, a nie tylko barwe. */
.stan__wynik{font-weight:600}
.stan__pozycja--dziala .stan__wynik{color:#1c6b39}
.stan__pozycja--nie_dziala .stan__wynik{color:#8d1f24}
.stan__pozycja--nie_wiem .stan__wynik,
.stan__pozycja--nie_mierzymy .stan__wynik{color:#7a5a12}
/* Powod jest techniczny i drugorzedny: ma pomoc przy zglaszaniu awarii, a nie krzyczec. */
.stan__powod{flex:1 1 100%;color:#5b6470;font-size:.85rem}
@media (max-width:560px){
  .stan__nazwa{flex:1 1 100%}
}