/*
 * Płatny przewodnik — strony dostępu i zamknięte moduły.
 *
 * Osobny arkusz, bo dział będzie rósł, a wczytuje go tylko ten, kto wszedł
 * na te strony. Kolory i promienie bierzemy ze zmiennych `site.css`, żeby
 * to wyglądało jak reszta serwisu, a nie jak doklejona część.
 */

.prz-blok { margin-top: 34px; }
.prz-blok h2 { margin: 0 0 10px; }

/* Stan dostępu: data ma być tym, co widać z odległości ręki. */
.prz-stan {
  background: var(--teal-light); border: 1px solid #9fd9d1;
  border-radius: var(--r); padding: 18px 20px; margin: 18px 0 24px;
}
.prz-stan__data { margin: 0; font-size: 1.15rem; color: #0b5f57; }
.prz-stan .hint { margin: 6px 0 0; }

/*
 * Pole na kod. Duże i jednoznaczne — wpisuje się je raz, zwykle na telefonie,
 * często przepisując z papieru. Odstępy między znakami ułatwiają sprawdzenie,
 * czy nie zgubiła się litera.
 */
.prz-form { margin: 18px 0 6px; display: grid; gap: 16px; justify-items: start; }
.prz-form .pole { width: 100%; max-width: 340px; }
.prz-form input[name="kod"] {
  font-size: 1.25rem; letter-spacing: .12em; text-transform: uppercase;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.prz-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0; }

.prz-pakiety {
  display: grid; gap: 14px; margin: 14px 0 16px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.prz-pakiet {
  border: 1px solid var(--sand-2); border-radius: var(--r);
  padding: 16px 18px; background: #fff;
}
.prz-pakiet__nazwa { margin: 0; font-weight: 700; }
.prz-pakiet__cena { margin: 4px 0 6px; font-size: 1.5rem; color: var(--deep); }
.prz-pakiet .hint { margin: 0; }

.prz-spis { margin: 10px 0 12px; padding-left: 1.1em; }
.prz-spis li { margin: 4px 0; }