/*
 * Marketplace Club - style aplikacji.
 * Vanilla CSS, custom properties, mobile-first (360-430 px to priorytet),
 * dark mode przez prefers-color-scheme.
 *
 * PALETA POCHODZI Z BRANDBOOKA COMMERION GROUP
 * (landing-pages/output/webinar-ai-allegro/brandbook-commerion.pdf, s. 2 i 6):
 *   Pomarańcz Commerion  #FD6902  (C0 M58 Y99 K1)
 *   Grafit Commerion     #3D3F41  (C6 M3 Y0 K75)
 *   Krój pisma           Montserrat (Regular 400 / ExtraBold 800), s. 4-5
 *
 * Dwa odstępstwa świadome, oba wynikają z ekranu, nie z gustu:
 *  1. Pomarańcz marki na białym daje kontrast 2,9:1 - za mało na tekst i na
 *     przyciski z białym napisem. Dlatego czysty #FD6902 jest kolorem PLAM
 *     (aktywna nawigacja, pasek akcentu), a do napisów i tła przycisków służy
 *     jego przyciemniona odmiana --marka-pomarancz-mocny (5,3:1 z białym).
 *     W trybie ciemnym rolę tekstową bierze rozjaśniona --marka-pomarancz-jasny.
 *  2. Montserrat nie jest dociągany z sieci (zero zależności, aplikacja musi
 *     działać offline) - jest pierwszy w font-stacku i wchodzi, gdy urządzenie
 *     go ma; w przeciwnym razie zostaje font systemowy.
 */

:root {
  /* ── Tokeny marki (dosłownie z brandbooka) ── */
  --marka-pomarancz: #fd6902;
  --marka-grafit: #3d3f41;

  /* Odmiany pochodne pomarańczu - patrz odstępstwo 1 w nagłówku */
  --marka-pomarancz-mocny: #b84800;
  --marka-pomarancz-jasny: #ff9d52;

  --font-marka: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ── Paleta bazowa (tryb jasny) ── */
  --tlo: #f3f4f5;
  --powierzchnia: #ffffff;
  --powierzchnia-2: #e9eaeb;
  --tekst: var(--marka-grafit);
  --tekst-2: #6b6e71;
  --obrys: #d9dbdd;
  --akcent: var(--marka-pomarancz);
  --akcent-mocny: var(--marka-pomarancz-mocny);
  --akcent-tekst: #ffffff;
  --fokus: var(--marka-pomarancz-mocny);

  /* Kategorie: tło etykiety / tekst etykiety */
  --kat-regulaminy-tlo: #dbeafe;
  --kat-regulaminy-tekst: #123f80;
  --kat-oplaty-tlo: #fdecc8;
  --kat-oplaty-tekst: #7c4a03;
  --kat-funkcje-tlo: #d3f1e0;
  --kat-funkcje-tekst: #0b5137;
  --kat-prawo-tlo: #e9e2fb;
  --kat-prawo-tekst: #4b2d92;

  /* Priorytety */
  --pilne-tlo: #fbdcdc;
  --pilne-tekst: #8f1d1d;

  /* Stany komunikatów (powiadomienia, strefa klubowa) */
  --stan-ok-tekst: #0b5137;
  --stan-blad-tekst: #8f1d1d;

  /* Kruczki */
  --kruczki-tlo: #fff4e8;
  --kruczki-obrys: var(--marka-pomarancz);

  --promien: 12px;
  --cien: 0 1px 3px rgba(61, 63, 65, 0.12);
  --naglowek-wys: 56px;
  --nawigacja-wys: 60px;

  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Grafit marki jako powierzchnia, ciemniejszy odcień jako tło strony */
    --tlo: #2a2c2e;
    --powierzchnia: var(--marka-grafit);
    --powierzchnia-2: #4a4c4f;
    --tekst: #f1f2f2;
    --tekst-2: #b6b9bb;
    --obrys: #55585b;
    --akcent: var(--marka-pomarancz);
    --akcent-mocny: var(--marka-pomarancz-jasny);
    --akcent-tekst: #241000;
    --fokus: var(--marka-pomarancz-jasny);

    --kat-regulaminy-tlo: #16324f;
    --kat-regulaminy-tekst: #a8cdf3;
    --kat-oplaty-tlo: #46320d;
    --kat-oplaty-tekst: #f3ce8e;
    --kat-funkcje-tlo: #12382a;
    --kat-funkcje-tekst: #94dcb9;
    --kat-prawo-tlo: #322450;
    --kat-prawo-tekst: #cbb8f5;

    --pilne-tlo: #4a1d1d;
    --pilne-tekst: #f3a8a8;

    --stan-ok-tekst: #94dcb9;
    --stan-blad-tekst: #f3a8a8;

    --kruczki-tlo: #3a2a19;
    --kruczki-obrys: var(--marka-pomarancz-jasny);

    --cien: 0 1px 3px rgba(0, 0, 0, 0.4);
  }
}

* {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--tlo);
  color: var(--tekst);
  font-family: var(--font-marka);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Dostępność ── */

.pomin-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--akcent-mocny);
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 0 0 var(--promien) 0;
  z-index: 20;
}

.pomin-link:focus {
  left: 0;
}

a {
  color: var(--akcent-mocny);
}

:focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Nagłówek ── */

.naglowek {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--naglowek-wys);
  padding: 0 16px;
  padding-top: env(safe-area-inset-top);
  background: var(--tlo);
  border-bottom: 1px solid var(--obrys);
}

.naglowek-logo {
  width: 28px;
  height: 28px;
  color: var(--akcent);
  flex: none;
}

/* ExtraBold - brandbook, s. 4 */
.naglowek-tytul {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0;
  letter-spacing: 0.01em;
}

/* ── Układ główny ── */

.widok {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px;
  padding-bottom: calc(var(--nawigacja-wys) + env(safe-area-inset-bottom) + 24px);
}

.widok:focus {
  outline: none;
}

.wczytywanie,
.pusto {
  color: var(--tekst-2);
  text-align: center;
  padding: 32px 16px;
}

/* ── Nawigacja dolna ── */

.nawigacja {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-around;
  background: var(--powierzchnia);
  border-top: 1px solid var(--obrys);
  padding-bottom: env(safe-area-inset-bottom);
}

.nawigacja-pozycja {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 4px 6px;
  min-height: var(--nawigacja-wys);
  color: var(--tekst-2);
  text-decoration: none;
  font-size: 0.72rem;
  font-weight: 600;
}

.nawigacja-pozycja svg {
  width: 24px;
  height: 24px;
}

.nawigacja-pozycja[aria-current="page"] {
  color: var(--akcent-mocny);
}

/* ── Chipy filtra kategorii ── */

.filtr {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 12px;
  scrollbar-width: none;
}

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

.chip {
  flex: none;
  border: 1px solid var(--obrys);
  background: var(--powierzchnia);
  color: var(--tekst);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
}

.chip[aria-pressed="true"] {
  background: var(--akcent-mocny);
  border-color: var(--akcent-mocny);
  color: var(--akcent-tekst);
}

/* ── Karty wpisów ── */

.lista-wpisow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.karta {
  background: var(--powierzchnia);
  border: 1px solid var(--obrys);
  border-radius: var(--promien);
  box-shadow: var(--cien);
}

.karta-link {
  display: block;
  padding: 14px 16px;
  color: inherit;
  text-decoration: none;
  border-radius: var(--promien);
}

.karta-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.etykieta {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.etykieta-regulaminy { background: var(--kat-regulaminy-tlo); color: var(--kat-regulaminy-tekst); }
.etykieta-oplaty     { background: var(--kat-oplaty-tlo);     color: var(--kat-oplaty-tekst); }
.etykieta-funkcje    { background: var(--kat-funkcje-tlo);    color: var(--kat-funkcje-tekst); }
.etykieta-prawo      { background: var(--kat-prawo-tlo);      color: var(--kat-prawo-tekst); }

.etykieta-pilne { background: var(--pilne-tlo); color: var(--pilne-tekst); }

.karta-data {
  color: var(--tekst-2);
  font-size: 0.8rem;
}

.karta-tytul {
  margin: 0 0 4px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
}

.karta-zajawka {
  margin: 0;
  color: var(--tekst-2);
  font-size: 0.88rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── Szczegół wpisu ── */

.wroc {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  color: var(--akcent-mocny);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}

.wpis {
  background: var(--powierzchnia);
  border: 1px solid var(--obrys);
  border-radius: var(--promien);
  box-shadow: var(--cien);
  padding: 18px 16px;
}

.wpis-tytul {
  margin: 8px 0 12px;
  font-size: 1.25rem;
  line-height: 1.3;
}

.wpis-tresc {
  margin: 0 0 16px;
}

.kruczki {
  background: var(--kruczki-tlo);
  border-left: 4px solid var(--kruczki-obrys);
  border-radius: 0 var(--promien) var(--promien) 0;
  padding: 12px 14px;
  margin: 0 0 16px;
}

.kruczki-tytul {
  margin: 0 0 8px;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 6px;
}

.kruczek + .kruczek {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed var(--kruczki-obrys);
}

.kruczek-cytat {
  margin: 0 0 6px;
  padding-left: 10px;
  border-left: 2px solid var(--kruczki-obrys);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--tekst);
}

.kruczek-znaczenie {
  margin: 0;
  font-size: 0.9rem;
}

.wpis-zrodla {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.9rem;
}

/* ── Formularze ── */

.sekcja-tytul {
  margin: 0 0 4px;
  font-size: 1.25rem;
}

.sekcja-opis {
  margin: 0 0 16px;
  color: var(--tekst-2);
  font-size: 0.92rem;
}

.formularz {
  background: var(--powierzchnia);
  border: 1px solid var(--obrys);
  border-radius: var(--promien);
  box-shadow: var(--cien);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pole label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.pole input[type="text"],
.pole input[type="number"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--obrys);
  border-radius: 8px;
  background: var(--tlo);
  color: var(--tekst);
  font-size: 1rem;
  font-family: inherit;
}

.pole .podpis {
  display: block;
  margin-top: 3px;
  font-size: 0.78rem;
  color: var(--tekst-2);
}

.przycisk {
  appearance: none;
  border: none;
  border-radius: 999px;
  background: var(--akcent-mocny);
  color: var(--akcent-tekst);
  font-size: 1rem;
  font-weight: 800;
  font-family: inherit;
  padding: 12px 20px;
  cursor: pointer;
}

.przycisk:disabled {
  opacity: 0.55;
  cursor: default;
}

.przycisk-drugi {
  background: var(--powierzchnia-2);
  color: var(--tekst);
}

/* ── Ustawienia ── */

.panel {
  background: var(--powierzchnia);
  border: 1px solid var(--obrys);
  border-radius: var(--promien);
  box-shadow: var(--cien);
  padding: 16px;
  margin-bottom: 16px;
}

.panel h3 {
  margin: 0 0 8px;
  font-size: 1rem;
}

.panel p {
  margin: 0 0 12px;
  color: var(--tekst-2);
  font-size: 0.9rem;
}

.przelacznik {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--obrys);
}

.przelacznik:first-of-type {
  border-top: none;
}

.przelacznik input[type="checkbox"] {
  width: 20px;
  height: 20px;
  accent-color: var(--akcent-mocny);
  flex: none;
}

.przelacznik label {
  font-size: 0.95rem;
  font-weight: 600;
}

.stan-powiadomien {
  font-size: 0.9rem;
  margin: 10px 0 0;
}

.stan-powiadomien.stan-blad {
  color: var(--stan-blad-tekst);
}

.stan-powiadomien.stan-ok {
  color: var(--stan-ok-tekst);
}

/* ── O aplikacji ── */

.o-aplikacji p {
  margin: 0 0 12px;
}

.cta {
  display: block;
  text-align: center;
  margin: 16px 0 8px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--akcent-mocny);
  color: var(--akcent-tekst);
  font-weight: 800;
  text-decoration: none;
}

.drobne {
  color: var(--tekst-2);
  font-size: 0.8rem;
}

/* ── Zachęta pod treścią nowości ── */

.zacheta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border-radius: var(--promien);
  border: 2px solid var(--akcent);
  background: var(--kruczki-tlo);
  color: var(--tekst);
  text-decoration: none;
  font-weight: 700;
}

.zacheta-tekst {
  font-size: 0.95rem;
  line-height: 1.35;
}

.zacheta-strzalka {
  flex: none;
  color: var(--akcent-mocny);
  font-size: 1.2rem;
}

/* ── Strefa klubowa ── */

.stan-strefy {
  margin: 12px 0 0;
  padding: 12px 14px;
  border-radius: var(--promien);
  background: var(--powierzchnia-2);
  font-size: 0.9rem;
}

.stan-strefy.stan-blad {
  color: var(--stan-blad-tekst);
}

.stan-strefy.stan-ok {
  color: var(--tekst);
}

.pole input.pole-kod {
  letter-spacing: 0.35em;
  text-transform: lowercase;
  font-size: 1.35rem;
  font-weight: 700;
  text-align: center;
}

.wroc-przycisk {
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}

.panel-podglad {
  border-style: dashed;
  box-shadow: none;
}

.lista-wydan {
  list-style: none;
  margin: 0;
  padding: 0;
}

.wydanie {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--obrys);
}

.wydanie:first-child {
  border-top: none;
  padding-top: 0;
}

.wydanie-numer {
  flex: none;
  min-width: 3.2em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--powierzchnia-2);
  color: var(--akcent-mocny);
  font-size: 0.8rem;
  font-weight: 800;
  text-align: center;
}

.wydanie-opis {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wydanie-tytul {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
}

.wydanie-data {
  color: var(--tekst-2);
  font-size: 0.8rem;
}

/* ── Większe ekrany ── */

@media (min-width: 640px) {
  .naglowek {
    padding-left: calc((100% - 640px) / 2 + 16px);
  }
}