/* Sekwencyjna ścieżka klienta: pasek kroków i widget kosztu.
 *
 * Jeden plik dla wszystkich stron ścieżki (konfigurator, GAP, porównywarka),
 * żeby pasek wyglądał identycznie na każdym kroku — inaczej każdy krok
 * wyglądałby jak inna strona i sekwencja by się rozsypała.
 *
 * Mobile-first: układ domyślny jest wąski, szerokie ekrany dostają więcej
 * przez media query, nie odwrotnie.
 */

.jr-pasek{
  background:var(--white, #fff);
  border-bottom:1px solid var(--line, #E4E4E1);
  position:sticky; top:0; z-index:40;
}
/* Gdy strona ma własny sticky header (evfura.pl ma), pasek siada pod nim. */
.jr-pasek.pod-naglowkiem{ top:var(--jr-offset, 56px); }

.jr-in{ max-width:1180px; margin:0 auto; padding:10px 16px; }

.jr-kroki{
  display:flex; align-items:center; gap:0;
  list-style:none; margin:0; padding:0;
  /* Pięć kroków na wąskim ekranie nie zmieści się z podpisami — pasek
     przewija się w poziomie, a bieżący krok jest przewijany do widoku. */
  overflow-x:auto; scrollbar-width:none;
}
.jr-kroki::-webkit-scrollbar{ display:none; }

.jr-krok{ display:flex; align-items:center; gap:0; flex:none; }
.jr-krok-btn{
  display:flex; align-items:center; gap:8px;
  background:none; border:none; padding:7px 10px; border-radius:8px;
  font-family:inherit; font-size:13px; font-weight:600;
  color:var(--graphite, #6B6B6A); cursor:pointer; white-space:nowrap;
}
.jr-krok-btn[disabled]{ cursor:default; opacity:.55; }
.jr-krok-btn:not([disabled]):hover{ background:var(--paper, #FAFAF9); color:var(--charcoal, #3C3C3B); }

.jr-nr{
  width:22px; height:22px; border-radius:50%; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:11.5px; font-weight:700;
  background:var(--line, #E4E4E1); color:var(--graphite, #6B6B6A);
}
.jr-krok.zrobiony .jr-nr{ background:var(--acid, #00A768); color:#fff; }
.jr-krok.biezacy .jr-nr{ background:var(--charcoal, #3C3C3B); color:#fff; }
.jr-krok.biezacy .jr-krok-btn{ color:var(--charcoal, #3C3C3B); }
.jr-krok.zrobiony .jr-krok-btn{ color:var(--acid-dark, #00875A); }

.jr-lacznik{ width:14px; height:1px; background:var(--line, #E4E4E1); flex:none; }
.jr-krok.zrobiony + .jr-krok .jr-lacznik{ background:var(--acid, #00A768); }

/* Etykieta „opcjonalny" przy GAP — sekwencja nie może sugerować, że to
   kolejny obowiązkowy zakup. */
.jr-opc{
  font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--graphite, #6B6B6A); background:var(--paper, #FAFAF9);
  border:1px solid var(--line, #E4E4E1); border-radius:4px; padding:2px 5px;
}

/* ---------- widget kosztu ----------
   Ma informować, nie przerywać: bez przycisków, bez pól, bez niczego, co
   zabierałoby uwagę z bieżącego kroku. */
.jr-koszt{
  background:var(--ink, #1F1F1E); color:#D8D8D6;
  border-top:1px solid #000;
}
.jr-koszt-in{
  max-width:1180px; margin:0 auto; padding:9px 16px;
  display:flex; align-items:baseline; gap:10px 18px; flex-wrap:wrap;
}
.jr-koszt-lab{
  font-size:9.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:#8B938F; flex:none;
}
.jr-koszt-kwota{
  font-family:'Space Grotesk', 'Inter', sans-serif;
  font-size:19px; font-weight:700; letter-spacing:-.02em; color:#fff;
  font-variant-numeric:tabular-nums;
}
.jr-koszt-net{ font-size:10px; font-weight:700; letter-spacing:.1em; color:var(--acid, #00A768); }
.jr-koszt-skl{ font-size:12px; color:#B9B9B7; line-height:1.5; }
.jr-koszt-skl b{ color:#fff; font-weight:600; }

@media (min-width:760px){
  .jr-in{ padding:12px 24px; }
  .jr-koszt-in{ padding:11px 24px; }
  .jr-krok-btn{ font-size:13.5px; padding:8px 12px; }
  .jr-lacznik{ width:26px; }
  .jr-koszt-kwota{ font-size:22px; }
}