/* =========================================================================
   Zostaje w głowie — arkusz stron pomocniczych („KOKPIT”)
   -------------------------------------------------------------------------
   Strony PHP (kup, partner, regulaminy, kontakt, usuwanie konta…) nigdy nie
   korzystały z arkusza kursu — każda miała własny blok <style> i własną
   paletę: kup.php fiolet #4b3fa8 na kremie, partner.php indygo #5661b3 na
   błękicie, regulaminy jeszcze inaczej. Wyglądały jak trzy różne serwisy.

   Ten plik jest JEDNYM źródłem wyglądu dla nich wszystkich, w języku
   „Kokpitu”: białe płótno, struktura z linii 1 px, zero cieni, kwadratowe
   promienie, gęsta typografia, lead szeryfem.

   Nazwy klas są dokładnie te, które były w blokach <style> — dzięki temu
   podmiana nie wymaga ruszania HTML-a stron:
     wspólne  .opak .srodek .karta .btn(.cichy/.grozny) .mala .uwaga .ok
              .blad .info .waga .dobrze .skrot .dane .pole tabele
     kup.php  .hero .cena .moduly .mod(.mam/.szukany) .kwota .waluty
              .tylko-web .tylko-apka
     partner  .link-box .kafle .kafel .tag .s-* .zakladki .zakl
     inne     .firma .np (kontakt) · .de (impressum) · .znak .dobrze (prawa)
   ========================================================================= */

:root {
  --tlo:      #ffffff;
  --arkusz:   #ffffff;
  --arkusz-2: #f5f5f2;
  --arkusz-3: #ebebe6;
  --atrament: #10131a;
  /* najmocniejsze wypelnienie — w ciemnym motywie musi sie ODWROCIC,
     inaczej czarny przycisk stoi na czarnym tle */
  --plama:    #10131a;
  --na-plamie:#ffffff;

  --tekst:    #0f1115;
  --tekst-2:  #474c57;
  --tekst-3:  #6b7280;

  --linia:    #e3e2dd;
  --linia-2:  #c8c7c1;

  --marka:    #2f3aa8;   /* jeden kolor linku i akcentu na wszystkich stronach */
  --marka-tlo:#eceefb;

  --ok:     #0b7a52;  --ok-tlo:     #e3f4ec;
  --uwaga:  #9a4c06;  --uwaga-tlo:  #fbeedd;
  --zle:    #c22619;  --zle-tlo:    #fdeae8;

  --r: 4px;

  --f-tekst: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-dek:   Georgia, "Times New Roman", serif;
}

/* Motyw idzie za WYBOREM KURSANTA (przycisk ☾ w kursie, localStorage
   `niemiecki:motyw`), a nie za ustawieniem systemu. Inaczej ktoś z ciemnym
   systemem klikał w kursie jasny motyw i wpadał na czarną stronę zakupu.
   Atrybut ustawia mały skrypt w <head> każdej z tych stron. */
html[data-motyw="ciemny"] {
  --plama: #eef1f6; --na-plamie: #0c0e13;
  --tlo: #0c0e13; --arkusz: #0c0e13; --arkusz-2: #14171e; --arkusz-3: #1b1f28;
  --tekst: #f2f4f8; --tekst-2: #b3b9c6; --tekst-3: #868d9c;
  --linia: #262b35; --linia-2: #39404d;
  --marka: #8fa0ff; --marka-tlo: rgba(47, 58, 168, .22);
  --ok: #4fd3a0; --ok-tlo: rgba(11, 122, 82, .24);
  --uwaga: #f2ac5c; --uwaga-tlo: rgba(154, 76, 6, .26);
  --zle: #ff8a7a; --zle-tlo: rgba(194, 38, 25, .24);
}

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

body {
  margin: 0;
  overflow-wrap: break-word;
  padding: 0 0 60px;
  background: var(--tlo);
  color: var(--tekst);
  font-family: var(--f-tekst);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}

/* strony z jedną kartą na środku ekranu (kontakt, potwierdzenie) */
body.na-srodku {
  display: grid; place-items: center; min-height: 100vh;
  padding: 24px 16px 40px;
}
body.na-srodku .karta { max-width: 560px; width: 100%; }

/* ------------------------------------------------------ pasek strony -- */

.pasek-strony {
  display: flex; align-items: center; gap: 14px;
  padding: 11px clamp(16px, 4vw, 32px);
  border-bottom: 1px solid var(--linia);
  background: var(--arkusz);
  margin-bottom: clamp(20px, 3vw, 34px);
}
.pasek-marka {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--tekst);
}
.pasek-marka img {
  width: 34px; height: 34px; display: block;
  border-radius: 3px; background: #faf7f0; padding: 3px;
}
.pasek-marka b { display: block; font-size: .95rem; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; }
.pasek-marka span span {
  display: block;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tekst-3);
}
.pasek-powrot {
  margin-left: auto;
  font-size: .85rem; font-weight: 650;
  color: var(--tekst-2); text-decoration: none;
  padding: 8px 12px; border: 1px solid var(--linia); border-radius: var(--r);
}
.pasek-powrot:hover { background: var(--arkusz-2); color: var(--tekst); }

/* ------------------------------------------------------------ układ --- */

.opak, .srodek {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 32px);
}
body.na-srodku .opak, body.na-srodku .srodek { padding: 0; }

/* karta to teraz panel z linią, nie unoszący się prostokąt */
.karta {
  background: var(--arkusz);
  border: 1px solid var(--linia);
  border-radius: var(--r);
  box-shadow: none;
  padding: clamp(20px, 3vw, 28px);
  margin-bottom: 16px;
}

/* ------------------------------------------------------- typografia --- */

h1 {
  margin: 0 0 .35em;
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
}
h2 {
  position: relative;
  margin: 2em 0 .55em;
  padding-top: 13px;
  font-size: 1.15rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.25;
}
h2::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 40px; height: 3px; background: var(--plama);
}
.karta > h1 + h2, .karta > h2:first-child { margin-top: .3em; }
h3 { margin: 1.5em 0 .4em; font-size: 1rem; font-weight: 750; letter-spacing: -.012em; }

p, li { color: var(--tekst-2); }
p { margin: .55em 0; }
ul, ol { padding-left: 20px; margin: .5em 0; line-height: 1.65; }
li { margin: .25em 0; }
b, strong { color: var(--tekst); }

.mala { font-size: .875rem; line-height: 1.58; color: var(--tekst-3); }

a { color: var(--marka); }
a:hover { text-decoration: none; }

s { color: var(--tekst-3); }

/* --------------------------------------------------------- przyciski -- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 46px;
  padding: 11px 20px;
  border: 1px solid var(--plama);
  border-radius: var(--r);
  background: var(--plama);
  color: var(--na-plamie);
  font: inherit; font-size: .95rem; font-weight: 700; letter-spacing: .005em;
  text-align: center; text-decoration: none; cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: var(--plama); border-color: var(--plama); color: var(--na-plamie); opacity: .86; }
.btn.cichy { background: var(--arkusz); color: var(--tekst); border-color: var(--linia-2); }
.btn.cichy:hover { background: var(--arkusz-2); border-color: var(--tekst-3); color: var(--tekst); }
.btn.grozny { background: var(--zle); border-color: var(--zle); color: var(--tlo); }
.btn.grozny:hover { opacity: .86; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ----------------------------------------------------------- ramki ---- */

.uwaga, .ok, .blad, .info, .waga, .dobrze, .skrot {
  margin: 16px 0;
  padding: 13px 16px;
  border: 1px solid var(--linia);
  border-left: 4px solid var(--tekst-3);
  border-radius: var(--r);
  background: var(--arkusz-2);
  font-size: .95rem;
}
.uwaga, .waga { border-left-color: var(--uwaga); background: var(--uwaga-tlo); }
.ok, .dobrze  { border-left-color: var(--ok);    background: var(--ok-tlo); }
.blad         { border-left-color: var(--zle);   background: var(--zle-tlo); }
.info, .skrot { border-left-color: var(--marka); background: var(--marka-tlo); }
.uwaga p, .ok p, .blad p, .info p, .waga p, .dobrze p, .skrot p,
.uwaga li, .ok li, .blad li, .info li, .waga li, .dobrze li, .skrot li { color: var(--tekst); }

/* blok danych (adres firmy, wyliczenia) */
.dane {
  background: var(--arkusz-2);
  border: 1px solid var(--linia);
  border-radius: var(--r);
  padding: 16px 20px;
  line-height: 1.85;
}

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

/* tabele w regulaminach bywają szersze niż telefon — sztywny układ plus
   łamanie długich słów trzyma je w kolumnie zamiast przewijać całą stronę */
table { border-collapse: collapse; width: 100%; table-layout: fixed; font-size: .92rem; margin: 14px 0; }
th, td { overflow-wrap: break-word; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--linia); vertical-align: top; }
th {
  background: var(--plama); color: var(--na-plamie);
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  border-bottom: none;
}
tbody tr:nth-child(even) td { background: var(--arkusz-2); }

/* ----------------------------------------------------------- pola ----- */

label { display: block; margin-top: 14px; font-size: .88rem; font-weight: 650; color: var(--tekst); }
input, textarea, select {
  font: inherit;
  width: 100%;
  min-height: 46px;
  margin-top: 5px;
  padding: 11px 13px;
  border: 1px solid var(--linia-2);
  border-radius: var(--r);
  background: var(--arkusz);
  color: var(--tekst);
}
input:focus, textarea:focus, select:focus { outline: 2px solid var(--marka); outline-offset: -1px; border-color: var(--marka); }
textarea { min-height: 130px; resize: vertical; line-height: 1.55; }

.pole { display: block; margin-bottom: 12px; }
.pole span {
  display: block; margin-bottom: 5px;
  font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tekst-2);
}
.pole input { margin-top: 0; }

.np { position: absolute; left: -9999px; }   /* pułapka na roboty w formularzu */

/* stopka z danymi firmy pod formularzem kontaktowym */
.firma {
  margin-top: 24px; padding-top: 16px;
  border-top: 1px solid var(--linia);
  font-size: .86rem; line-height: 1.7; color: var(--tekst-3);
}
/* wersja niemiecka Impressum */
.de { border-top: 1px solid var(--linia); margin-top: 2.4em; padding-top: 1.6em; }
/* duży znak © na stronie praw autorskich */
.znak { font-size: 2.2rem; line-height: 1; margin: 0 0 .3em; }

/* =========================================================================
   ============================ K U P . P H P =============================
   ========================================================================= */

/* przełącznik waluty: kwadratowe zakładki, nie pigułki */
.waluty { display: flex; gap: 0; margin: 0 0 18px; border: 1px solid var(--linia-2); border-radius: var(--r); width: fit-content; overflow: hidden; }
.waluty a {
  padding: 9px 18px;
  text-decoration: none;
  border: none;
  border-right: 1px solid var(--linia-2);
  color: var(--tekst-2); background: var(--arkusz);
  font-weight: 700; font-size: .88rem;
}
.waluty a:last-child { border-right: none; }
.waluty a.wybrana { background: var(--plama); color: var(--na-plamie); }

/* karta ceny kompletu — jedyne miejsce z ciemnym wypełnieniem, bo to
   najważniejsza decyzja na stronie */
/* karta ceny kompletu: w jasnym motywie ciemna plama, w ciemnym jasna —
   w obu wypadkach ODWROTNOSC strony, zeby zwracala uwage */
.hero {
  background: var(--plama);
  border-color: var(--plama);
  color: var(--na-plamie);
}
.hero h1, .hero b, .hero li b { color: var(--na-plamie); }
.hero p, .hero li { color: var(--na-plamie); opacity: .82; }
.hero li b { opacity: 1; }
.hero .cena {
  font-size: clamp(2.2rem, 6vw, 3rem);
  font-weight: 800; letter-spacing: -.04em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.hero s { opacity: .55; font-size: 1.05rem; font-weight: 600; color: var(--na-plamie); }
.hero .btn {
  background: #ffd93b; border-color: #ffd93b; color: #10131a;
  font-size: 1rem; padding: 14px 24px;
}
.hero .btn:hover { background: #ffe873; border-color: #ffe873; color: #10131a; }

/* poziomy do kupienia osobno.
   Uwaga: siatka bywa niepełna (4 poziomy w 3 kolumnach), więc NIE można tu
   użyć sztuczki „gap:1px na tle linii” — pusta komórka pokazałaby wtedy
   szary prostokąt. Linie rysują same kafelki. */
/* Cztery poziomy w siatce 2 × 2 — dokładnie zapełnionej. Wcześniej było
   `auto-fit`, przez co przy trzech kolumnach czwarty poziom zostawał sam,
   a obok niego stała pusta, szara komórka. */
.moduly { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .moduly { grid-template-columns: 1fr 1fr; } }

.mod {
  --poziom: var(--tekst-2);
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 18px 18px;
  border: 1px solid var(--linia);
  border-top: 3px solid var(--poziom);
  border-radius: var(--r);
  background: var(--arkusz);
}
.mod-a1 { --poziom: #2f5bd9; }
.mod-a2 { --poziom: #0b7a52; }
.mod-b1 { --poziom: #9a4c06; }
.mod-b2 { --poziom: #6d28d9; }

/* nazwa poziomu jako barwny znaczek, nie kolejny nagłówek sekcji */
.mod h2 {
  align-self: flex-start;
  margin: 0; padding: 6px 11px;
  border-radius: 2px;
  background: var(--poziom); color: #fff;
  font-size: .84rem; font-weight: 800; letter-spacing: .08em;
}
.mod h2::before { display: none; }

.mod.mam     { background: var(--ok-tlo); border-color: var(--ok); }
.mod.szukany { background: var(--uwaga-tlo); border-color: var(--uwaga); }
.mod .kwota { font-size: 1.4rem; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--tekst); }
.mod .btn { margin-top: auto; min-height: 40px; padding: 9px 14px; font-size: .9rem; }

/* wersja przeglądarkowa kontra aplikacja z Google Play */
.tylko-apka { display: none; }
.w-aplikacji .tylko-web { display: none; }
.w-aplikacji .tylko-apka { display: block; }

/* =========================================================================
   ========================= P A R T N E R . P H P ========================
   ========================================================================= */

.link-box { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 14px 0; }
.link-box input { flex: 1; min-width: 240px; margin-top: 0; background: var(--arkusz-2); }

.kafle {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin: 18px 0;
}
.kafel {
  background: var(--arkusz-2);
  border: 1px solid var(--linia); border-radius: var(--r);
  padding: 14px 16px;
}
.kafel b {
  display: block;
  font-size: 1.55rem; font-weight: 800; letter-spacing: -.03em; line-height: 1.1;
  color: var(--tekst); font-variant-numeric: tabular-nums;
}

.tag {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid currentColor;
  border-radius: 2px;
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  white-space: nowrap;
}
.s-oczekuje       { color: var(--uwaga); background: var(--uwaga-tlo); }
.s-do_wyplaty     { color: var(--ok);    background: var(--ok-tlo); }
.s-wyplacone      { color: var(--tekst-2); background: var(--arkusz-2); }
.s-zarejestrowany { color: var(--marka); background: var(--marka-tlo); }
.s-anulowane      { color: var(--zle);   background: var(--zle-tlo); }

.zakladki { display: flex; gap: 0; margin: 18px 0 14px; border-bottom: 1px solid var(--linia); }
.zakl {
  font: inherit; font-size: .9rem; font-weight: 700;
  padding: 10px 16px;
  border: none; border-bottom: 3px solid transparent;
  border-radius: 0;
  background: none; color: var(--tekst-2);
  cursor: pointer;
}
.zakl:hover { color: var(--tekst); }
.zakl.wybrana { color: var(--tekst); border-bottom-color: var(--plama); background: none; }

/* =========================================================================
   ============================ T E L E F O N =============================
   ========================================================================= */

@media (max-width: 560px) {
  .pasek-strony { padding: 10px 16px; }
  .pasek-marka span span { display: none; }
  .karta { padding: 18px 16px; }
  .btn { width: 100%; }
  .link-box .btn, .waluty a { width: auto; }
  .moduly { grid-template-columns: 1fr; }
  table { font-size: .86rem; }
  th, td { padding: 8px 9px; }
}
