/*
 * Strona /pricing. Tokeny marki wziete z assets/styles/pricelist.css, zeby strona
 * wygladala jak dalszy ciag cennika ze strony glownej, a nie jak obca tabela.
 *
 *   granat   #1f2670   naglowki, tekst glowny
 *   magenta  #bf3664   przekreslona cena katalogowa
 *   fiolet   #380552   cena realna
 *   lawenda  #dcdef9   pasy grup funkcji
 *   bursztyn #faa633 / #fde0b7   plan rekomendowany
 *   szary    #606060   tekst drugorzedny
 *   karta:   border-radius 14px, box-shadow 0 3px 23px rgba(0,0,0,.15)
 */

:root {
  --jrp-navy: #1f2670;
  --jrp-magenta: #bf3664;
  --jrp-purple: #380552;
  --jrp-lavender: #dcdef9;
  --jrp-amber: #faa633;
  --jrp-amber-soft: #fde0b7;
  --jrp-grey: #606060;
  --jrp-line: #e9ebf5;
  --jrp-card: 0 3px 23px rgba(0, 0, 0, 0.15);
}

.jrp {
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px 20px 96px;
  color: #2b2f45;
}

.jrp .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;
}

/* ---------- hero ---------- */

.jrp-hero { text-align: center; padding: 24px 0 44px; }

.jrp-eyebrow {
  text-transform: uppercase; letter-spacing: .18em; font-size: 13px; font-weight: 700;
  color: var(--jrp-magenta); margin-bottom: 10px;
}

.jrp-hero h1 {
  font-size: 50px; line-height: 1.14; font-weight: 700;
  color: var(--jrp-navy); margin: 0 0 18px;
}

.jrp-lead {
  font-size: 19px; line-height: 1.6; color: var(--jrp-grey);
  max-width: 720px; margin: 0 auto;
}

.jrp-pills {
  list-style: none; display: flex; flex-wrap: wrap; justify-content: center;
  gap: 10px; padding: 0; margin: 26px 0 0;
}
.jrp-pills li {
  background: var(--jrp-lavender); color: var(--jrp-navy);
  border-radius: 100px; padding: 7px 18px; font-size: 15px; font-weight: 700;
}

/* ---------- tabela ---------- */

.jrp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 26px 4px 8px; }

table.jrp-table {
  width: 100%; border-collapse: separate; border-spacing: 0; min-width: 860px;
}

table.jrp-table th, table.jrp-table td {
  text-align: center; padding: 13px 16px; vertical-align: middle;
}

/* pierwsza kolumna: nazwy funkcji, przyklejona przy przewijaniu w bok */
table.jrp-table tbody th[scope="row"],
table.jrp-table tfoot th[scope="row"],
table.jrp-table .jrp-corner {
  text-align: left; font-weight: 400; font-size: 15px; color: #3d4155;
  position: sticky; left: 0; background: #fff; z-index: 2; min-width: 260px;
}

/* naglowki planow udaja karty z cennika na stronie glownej */
th.jrp-plan {
  position: relative; background: #fff; border-radius: 14px 14px 0 0;
  box-shadow: 0 -3px 23px rgba(0, 0, 0, .07); padding: 30px 16px 22px; min-width: 190px;
}
th.jrp-plan.is-rec { background: #fffaf2; box-shadow: 0 -3px 23px rgba(250, 166, 51, .28); }

.jrp-ribbon {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  background: var(--jrp-amber); color: #fff; font-size: 12px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  border-radius: 100px; padding: 5px 16px; white-space: nowrap;
}

.jrp-plan-name {
  display: block; font-size: 21px; font-weight: 700; letter-spacing: .06em;
  color: var(--jrp-navy); margin-bottom: 8px;
}
.jrp-price { display: block; line-height: 1.05; }
.jrp-price s { font-size: 20px; color: var(--jrp-magenta); font-weight: 400; margin-right: 4px; }
.jrp-price strong { font-size: 40px; font-weight: 700; color: var(--jrp-purple); }
.jrp-per { display: block; font-size: 15px; color: var(--jrp-grey); margin-top: 6px; }
.jrp-year { display: block; font-size: 13px; color: #8b8fa3; margin-top: 8px; line-height: 1.4; }

/* wiersze */
table.jrp-table tbody tr:not(.jrp-group) td { border-bottom: 1px solid var(--jrp-line); }
table.jrp-table tbody tr:not(.jrp-group) th[scope="row"] { border-bottom: 1px solid var(--jrp-line); }
table.jrp-table tbody td.is-rec { background: #fffdf9; }

tr.jrp-key th[scope="row"], tr.jrp-key td { padding-top: 18px; padding-bottom: 18px; font-size: 16px; }
tr.jrp-key td strong { color: var(--jrp-navy); font-size: 17px; }

tr.jrp-group th {
  background: var(--jrp-lavender); color: var(--jrp-navy);
  font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
  padding: 10px 16px; position: sticky; left: 0;
}

/* Komorki musza byc position: relative, bo .sr-only jest position: absolute.
   Bez tego kotwiczy sie w bloku poczatkowym (viewport), a nie w komorce, i ~96
   ukrytych etykiet "included/not included" laduje na x 400-860 px, rozpychajac
   dokument do 801 px na telefonie mimo poprawnie dzialajacego kontenera scrolla.
   Zdiagnozowane 2026-07-26 metoda wygaszania kolejnych czesci tabeli. */
table.jrp-table td { position: relative; }

td.yes span[aria-hidden] { color: #1a9c5b; font-size: 19px; font-weight: 700; }
td.no span[aria-hidden]  { color: #c9cdda; font-size: 19px; }

/* stopka tabeli z przyciskami */
table.jrp-table tfoot td { padding-top: 24px; padding-bottom: 30px; }
table.jrp-table tfoot td.is-rec { background: #fffdf9; border-radius: 0 0 14px 14px; }

.jrp-cta {
  display: inline-block; border: 2px solid var(--jrp-navy); color: var(--jrp-navy);
  background: transparent; border-radius: 100px; padding: 10px 24px;
  font-size: 15px; font-weight: 700; text-decoration: none; transition: all .15s ease;
}
.jrp-cta:hover { background: var(--jrp-navy); color: #fff; text-decoration: none; }
.jrp-cta.is-rec { background: var(--jrp-amber); border-color: var(--jrp-amber); color: #fff; }
.jrp-cta.is-rec:hover { background: #e8940f; border-color: #e8940f; color: #fff; }
.jrp-cta--lg { font-size: 18px; padding: 14px 34px; }
.jrp-cta-note { display: block; font-size: 13px; color: #8b8fa3; margin-top: 10px; }

.jrp-scroll-hint { display: none; text-align: center; font-size: 14px; color: #8b8fa3; margin-top: 6px; }

/* ---------- karty pod tabela ---------- */

.jrp-cards {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 64px;
}
.jrp-card {
  background: #fff; border-radius: 14px; box-shadow: var(--jrp-card); padding: 28px 26px;
}
.jrp-card--muted { background: #fafbfe; }
.jrp-card h2 { font-size: 20px; font-weight: 700; color: var(--jrp-navy); margin: 0 0 14px; }
.jrp-card ul { padding-left: 20px; margin: 0; }
.jrp-card li { font-size: 15px; line-height: 1.6; color: #4a4f66; margin-bottom: 10px; }
.jrp-card a { color: var(--jrp-magenta); }

/* ---------- FAQ ---------- */

.jrp-faq { margin-top: 76px; }
.jrp-faq h2 {
  font-size: 34px; font-weight: 700; color: var(--jrp-navy);
  text-align: center; margin-bottom: 34px;
}
.jrp-faq dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 34px; margin: 0; }
.jrp-faq-item {
  border-left: 3px solid var(--jrp-lavender); padding-left: 20px;
}
.jrp-faq dt { font-size: 17px; font-weight: 700; color: var(--jrp-navy); margin-bottom: 8px; }
.jrp-faq dd { font-size: 15px; line-height: 1.65; color: #4a4f66; margin: 0; }

/* ---------- domkniecie ---------- */

.jrp-final {
  margin-top: 76px; text-align: center; background: var(--jrp-lavender);
  border-radius: 14px; padding: 48px 24px;
}
.jrp-final h2 { font-size: 32px; font-weight: 700; color: var(--jrp-navy); margin: 0 0 10px; }
.jrp-final p { font-size: 17px; color: #4a4f66; margin-bottom: 22px; }
.jrp-verified { font-size: 14px; color: #6f748c; margin: 22px 0 0; }
.jrp-verified a { color: var(--jrp-navy); text-decoration: underline; }

/* ---------- responsywnosc ---------- */

@media (max-width: 991px) {
  .jrp-hero h1 { font-size: 34px; }
  .jrp-lead { font-size: 17px; }
  .jrp-cards { grid-template-columns: 1fr; }
  .jrp-faq dl { grid-template-columns: 1fr; }
  .jrp-faq h2, .jrp-final h2 { font-size: 26px; }
  .jrp-scroll-hint { display: block; }
  table.jrp-table tbody th[scope="row"],
  table.jrp-table tfoot th[scope="row"],
  table.jrp-table .jrp-corner { min-width: 190px; font-size: 14px; }
  th.jrp-plan { min-width: 165px; }
  .jrp-price strong { font-size: 32px; }
}

@media (max-width: 575px) {
  .jrp { padding: 16px 12px 72px; }
  .jrp-hero h1 { font-size: 28px; }
  .jrp-final { padding: 34px 18px; }
}

/* ---------- naglowek strony ----------
 * Globalny .header ma min-height 690px (zaprojektowany pod hero strony glownej),
 * a nawigacja jest w nim pozycjonowana absolutnie i sama ma wysokosc 0. Bez tego
 * nad H1 zostaje 690 px pustki; przy min-height 0 nawigacja wchodzi na tresc.
 * 96 px = wysokosc samego paska.
 * Wariant "light" logo jest bialy, wiec na jasnej podstronie znika, a wariant
 * kolorowy ma opacity 0 do czasu scrolla (na LP odslania go zmiana nawigacji).
 */
.jr-header-slim { min-height: 96px !important; }
.jr-header-slim .navigation__logo--light { display: none !important; }
.jr-header-slim .navigation__logo--colorful { display: block !important; opacity: 1 !important; }
/* 🚨 Logo wychodzilo POD naglowek. `.navigation-default` z LP ma `padding-top: 40px`
   (zaprojektowane pod wysokie hero strony glownej), a slim header ma tylko 96 px.
   Logo ma 82 px, wiec 40 + 82 = 122 px i wystawalo 26 px ponizej belki, wchodzac na
   tresc. Zerujemy padding do 5 px, czyli tyle, ile LP ustawia w stanie po scrollu.
   Selektor ma wyzsza specyficznosc niz .navigation-default, wiec bez !important. */
.jr-header-slim .navigation { padding-top: 5px; }

/* 🚨 Logo jest `position: absolute` w rodzicu o wysokosci 0, ktory flexbox ustawia na
   LINII SRODKA belki. Czyli logo zawsze zwisa w dol od srodka: przy belce 66 px i logo
   82 px wystawalo 51 px pod belke, wprost na tresc. Na LP tego nie widac, bo pod belka
   jest ciemne hero strony glownej, ale na jasnej podstronie wyglada jak blad.
   Centrujemy je na tej linii (translateY) i ograniczamy do 52 px, zeby zmiescilo sie
   w belce (srodek 33 px, polowa logo 26 px, czyli 7-59 px). */
.jr-header-slim .navigation__logo {
  max-height: 52px; width: auto;
  transform: translateY(-50%);
}