/* Ekrany konta klienta (strona dla klientow, szkielet konto.html): logowanie,
   zakladanie konta, potwierdzenie adresu, nowe haslo.
   Kolory i typografia pochodza z fundamentu (app-css-01), pasek naglowka ze spisu
   kursow (app-css-11). Wszystkie reguly celuja w KLASY `konto-*`, zadna w goly znacznik. */

/* Waska kolumna: jeden formularz, czytelny tak samo na telefonie i na duzym ekranie. */
.konto-strona {
  max-width: 30rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 4rem;
}

/* Napis w pasku trzyma sie tej samej waskiej kolumny co formularz (w spisie kursow
   kolumna jest szersza — stad nadpisanie szerokosci z app-css-11). */
.konto-pasek-srodek {
  max-width: 30rem;
}

.konto-naglowek {
  margin: 0 0 .75rem;
  font-size: 1.6rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--accent-dark);
}

.konto-wstep {
  margin: 0 0 1.5rem;
  color: var(--text);
  font-size: 1.05rem;
  line-height: 1.5;
}

.konto-blad,
.konto-info {
  margin: 0 0 1.25rem;
  padding: .9rem 1rem;
  border-radius: 10px;
  color: var(--text);
  line-height: 1.5;
}

.konto-blad {
  background: var(--warning-bg);
  border: 1px solid var(--danger-text);
}

.konto-info {
  background: var(--accent-soft);
  border: 1px solid var(--accent);
}

.konto-formularz {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding: 1.5rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.konto-etykieta {
  margin-top: .5rem;
  font-weight: 600;
  color: var(--text);
}

/* 16 px to minimum, przy ktorym telefon nie powieksza strony po dotknieciu pola. */
.konto-pole {
  width: 100%;
  box-sizing: border-box;
  padding: .8rem .9rem;
  font-family: var(--sans);
  font-size: 1.05rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.konto-pole:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.konto-podpowiedz {
  margin: 0;
  color: var(--muted);
  font-size: .92rem;
  line-height: 1.45;
}

.konto-przycisk {
  margin-top: 1rem;
  padding: .85rem 1rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: #fff;
  background: var(--accent-dark);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}

.konto-przycisk:hover,
.konto-przycisk:focus-visible {
  background: var(--accent);
}

/* Formularz z samym przyciskiem (platnosc Autopay) — bez odstepu od pol, ktorych tu nie ma. */
.konto-formularz-przycisk .konto-przycisk {
  margin-top: 0;
}

/* Odnosniki pod formularzem („Nie pamietam hasla", „Nie mam jeszcze konta"). */
.konto-linki {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1.5rem;
  margin: 1.25rem 0 0;
}

.konto-odnosnik {
  color: var(--accent-dark);
  font-weight: 600;
}

.konto-pomoc {
  margin: 2rem 0 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.5;
}

/* Pod przyciskiem zakupu: na ktore konto trafi kurs i jak zmienic konto. */
.konto-stopka {
  margin: 1.25rem 0 0;
  color: var(--muted);
  line-height: 1.5;
}

/* --- Zamowienie (zamowienia_http.py) --- */

/* Podsumowanie tuz nad przyciskiem zakupu: nazwa po lewej, wartosc po prawej. */
.konto-podsumowanie {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .6rem 1.25rem;
  margin: 0 0 1.25rem;
  padding: 1.25rem 1.5rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  line-height: 1.45;
}

.konto-podsumowanie-nazwa {
  color: var(--muted);
}

.konto-podsumowanie-wartosc {
  margin: 0;
  color: var(--text);
  font-weight: 600;
}

.konto-cena {
  font-size: 1.3rem;
  color: var(--accent-dark);
}

/* Oswiadczenie do zaznaczenia: kwadrat po lewej, tekst obok, klikalna cala linijka. */
.konto-zgoda {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  margin-top: .5rem;
  color: var(--text);
  line-height: 1.5;
  cursor: pointer;
}

.konto-zgoda-pole {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  margin: .1rem 0 0;
  accent-color: var(--accent-dark);
  cursor: pointer;
}

/* Strona „Moje konto" (moje_konto_http.py): sekcje jedna pod druga, kazda jedna karta
   bez ramek w srodku (audyt wygladu 2026-11-04). Szersza kolumna niz przy formularzu
   logowania, zeby kafelki kursow staly obok siebie; pasek trzyma te sama szerokosc. */
.konto-strona:has(.konto-panel),
body:has(.konto-panel) .konto-pasek-srodek {
  max-width: 52rem;
}

.konto-sekcja {
  margin: 1.5rem 0 0;
  padding: 1.25rem 1.5rem;
  background: var(--panel);
  border-radius: 12px;
  scroll-margin-top: 72px;
}

.konto-sekcja-tytul {
  margin: 0 0 .75rem;
  font-size: 1.15rem;
  color: var(--accent-dark);
}

/* Przyciski drugiego rzedu (zgoda, pobranie danych): obrys zamiast wypelnienia. */
.konto-zgoda-przycisk {
  display: inline-block;
  padding: .5rem .9rem;
  text-decoration: none;
  font: inherit;
  font-weight: 600;
  color: var(--accent-dark);
  background: transparent;
  border: 1px solid var(--accent-dark);
  border-radius: 8px;
  cursor: pointer;
}

.konto-zgoda-przycisk:hover,
.konto-zgoda-przycisk:focus-visible {
  color: #fff;
  background: var(--accent-dark);
}

/* Wiersz ustawien: nazwa i stan po lewej, przycisk po prawej, drobny opis pod spodem. */
.konto-wiersz {
  padding: .9rem 0;
  border-top: 1px solid var(--border);
}

.konto-sekcja-tytul + .konto-wiersz {
  border-top: 0;
  padding-top: .25rem;
}

.konto-wiersz:last-child {
  padding-bottom: 0;
}

.konto-wiersz-glowa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
}

.konto-wiersz-tekst {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}

.konto-wiersz-nazwa {
  margin: 0;
  font-weight: 600;
  color: var(--text);
}

.konto-wiersz-wartosc {
  margin: 0;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.konto-wiersz-opis {
  margin: .5rem 0 0;
  max-width: 40rem;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.45;
}

.konto-wiersz-akcja {
  margin: 0;
}

/* Wiersz rozwijany (haslo, usuniecie konta): formularz dopiero po kliknieciu przycisku. */
.konto-rozwin > .konto-wiersz-glowa {
  list-style: none;
  cursor: pointer;
}

.konto-rozwin > .konto-wiersz-glowa::-webkit-details-marker {
  display: none;
}

.konto-rozwin > .konto-wiersz-glowa:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 8px;
}

.konto-rozwin > .konto-wiersz-glowa:hover .konto-rozwin-przycisk {
  color: #fff;
  background: var(--accent-dark);
}

.konto-rozwin-zamknij,
.konto-rozwin[open] .konto-rozwin-otworz {
  display: none;
}

.konto-rozwin[open] .konto-rozwin-zamknij {
  display: inline;
}

.konto-rozwin-tresc {
  max-width: 26rem;
  padding-top: .75rem;
}

/* Formularz w rozwinietym wierszu stoi wprost w karcie sekcji — bez drugiej ramki. */
.konto-rozwin-tresc .konto-formularz {
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Usuniecie konta: kolor ostrzegawczy, zeby nie wygladalo jak zwykla akcja. */
.konto-rozwin-ryzyko .konto-rozwin-przycisk {
  color: var(--danger-text);
  border-color: var(--danger-text);
}

.konto-rozwin-ryzyko > .konto-wiersz-glowa:hover .konto-rozwin-przycisk {
  color: #fff;
  background: var(--danger);
  border-color: var(--danger);
}

/* Rozwiniety: przycisk to juz tylko „Anuluj" — zwykly kolor, ostrzega przycisk w formularzu. */
.konto-rozwin-ryzyko[open] .konto-rozwin-przycisk {
  color: var(--accent-dark);
  border-color: var(--accent-dark);
}

.konto-rozwin-ryzyko[open] > .konto-wiersz-glowa:hover .konto-rozwin-przycisk {
  color: #fff;
  background: var(--accent-dark);
  border-color: var(--accent-dark);
}

.konto-przycisk-ryzyko,
.konto-przycisk-ryzyko:hover,
.konto-przycisk-ryzyko:focus-visible {
  background: var(--danger);
}

.konto-przycisk-ryzyko:hover,
.konto-przycisk-ryzyko:focus-visible {
  filter: brightness(.9);
}

/* --- Regulamin i polityka prywatnosci (dokumenty/*.html, buduje dokumenty_prawne.py) --- */

/* Dlugi tekst do czytania: szersza kolumna niz przy formularzu (pasek trzyma te sama
   szerokosc, zeby naglowek i tresc zaczynaly sie w jednej linii). */
.konto-strona:has(.dok),
body:has(.dok) .konto-pasek-srodek {
  max-width: 44rem;
}

.dok {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.6;
}

.dok-rozdzial {
  margin: 2rem 0 .6rem;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--accent-dark);
}

.dok-akapit {
  margin: 0 0 .9rem;
}

.dok-lista {
  margin: 0 0 .9rem;
  padding-left: 1.5rem;
}

.dok-lista--numery {
  list-style: decimal;
}

.dok-punkt {
  margin: 0 0 .45rem;
}

.dok-punkt > .dok-lista {
  margin: .45rem 0 0;
}

.dok-kreska {
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid var(--border);
}

/* Luka w dokumencie (dane do uzupelnienia przed startem sprzedazy) — widoczna od razu. */
.dok-luka {
  padding: 0 .2rem;
  color: var(--text);
  background: var(--warning-bg);
  border-bottom: 2px solid var(--warning-border);
}