/* pricing.css
   Cennik: lepki przełącznik klasy nadwozia i wiersze z czasem realizacji.
   Lucifer's Garage */

/* ---------- lepki pasek klas ----------
   Zostaje pod nawigacją przy przewijaniu, żeby dało się przełączyć klasę
   w połowie cennika, bez wracania na górę strony. */
.pricebar{
  position:sticky; top:var(--nav-h); z-index:20;
  margin:0 -22px 40px; padding:18px 22px;
  background:var(--bg);
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(12px) saturate(140%);
  border-bottom:1px solid var(--line);
}
.pricebar__in{max-width:var(--maxw); margin:0 auto}
.pricebar__t{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--dim); margin-bottom:12px;
}
.pricebar__now{
  font-family:var(--f-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--dim); margin-top:12px;
}
.pricebar__now b{color:var(--brass); font-weight:500}

/* Kafel klasy jest przyciskiem, więc resetujemy domyślne style formularza. */
.sizes .size{
  font:inherit; color:inherit; text-align:center;
  display:block; width:100%; appearance:none;
}
.size__k, .size__l{display:block}

/* ---------- wiersz cennika ---------- */
.pricerow__t{
  font-family:var(--f-mono); font-size:10px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--dim); white-space:nowrap;
}

/* ---------- podświetlenie po przeliczeniu ---------- */
.pricelist.is-fresh .pricerow__p{animation:priceFlash .7s ease}
@keyframes priceFlash{
  0%   {color:var(--text); transform:translateY(-2px)}
  35%  {color:var(--brass-2)}
  100% {color:var(--brass); transform:none}
}

@media (max-width:780px){
  .pricebar{margin:0 -22px 28px; padding:14px 22px}
  .pricebar__now{margin-top:10px}
  .pricerow{flex-wrap:wrap}
  .pricerow__t{order:3; flex-basis:100%; margin-top:2px}
}
@media (prefers-reduced-motion:reduce){
  .pricelist.is-fresh .pricerow__p{animation:none}
}