/* ==========================================================================
   Pure Print — kalkulator wynajmu drukarek
   Style specyficzne dla narzędzia. Tokeny, pasek, przyciski i stopka
   pochodzą z ../wspolne.css, ładowanego wcześniej.
   ========================================================================== */

/* Liczby jednakowej szerokości — kwoty nie „skaczą” przy przeliczaniu */
.pole__wartosc, .karta__cena-kwota, .pozycja__kwota,
.porownanie__kwota, .segment__tresc strong { font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Sekcja otwierająca
   ========================================================================== */

/* Jasna, tak jak sekcja otwierająca strony głównej */
.hero {
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(900px 420px at 15% -10%, rgba(56, 189, 248, .18), transparent 60%),
    radial-gradient(700px 380px at 88% 0%,  rgba(37, 99, 235, .14), transparent 62%),
    linear-gradient(165deg, #eaf1ff 0%, #f3f7ff 60%, var(--tlo) 100%);
  color: var(--tekst);
  padding: 60px 24px 128px;
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(37, 99, 235, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, .06) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 72%);
  -webkit-mask-image: radial-gradient(circle at 50% 0%, #000 0%, transparent 72%);
}

.hero__wnetrze { max-width: var(--szerokosc); margin: 0 auto; }

.hero .plakietka { margin-bottom: 22px; }

.hero__tytul {
  font-size: clamp(2rem, 5.4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -.035em;
  margin-bottom: 20px;
  color: var(--granat-noc);
}

.hero__tytul-akcent {
  background: linear-gradient(100deg, var(--akcent), #1d4ed8 55%, #3b82f6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lead {
  max-width: 56ch;
  font-size: clamp(1rem, 1.6vw, 1.13rem);
  color: var(--tekst-drugi);
  margin-bottom: 30px;
}

/* ==========================================================================
   Układ — treść wjeżdża na sekcję otwierającą
   ========================================================================== */

.strona {
  max-width: var(--szerokosc);
  margin: -84px auto 0;
  padding: 0 24px 56px;
  position: relative;
  z-index: 2;
}

.uklad {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: start;
}

@media (min-width: 960px) {
  .uklad { grid-template-columns: 366px 1fr; gap: 26px; }
  .panel { position: sticky; top: 24px; }
}

/* ==========================================================================
   Panel formularza
   ========================================================================== */

.panel {
  background: var(--powierzchnia);
  border: 1px solid var(--linia);
  border-radius: var(--r-duza);
  box-shadow: var(--cien-l);
  padding: 26px 24px 28px;
}

.panel__glowa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--linia);
}

.panel__tytul { font-size: 1.06rem; }

.panel__podtytul {
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tekst-drugi);
  white-space: nowrap;
}

/* ---------- Pole z suwakiem ---------- */

.pole { margin-bottom: 24px; }

.pole__glowa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.pole__etykieta { font-weight: 600; font-size: .93rem; }

.pole__wartosc { font-size: 1.02rem; font-weight: 700; color: var(--akcent); }

.pole__wejscie { position: relative; }

.pole__liczba {
  width: 100%;
  padding: 12px 96px 12px 14px;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--tekst);
  background: var(--powierzchnia-cicha);
  border: 1.5px solid var(--linia-mocna);
  border-radius: var(--r-mala);
  transition: border-color var(--przejscie), box-shadow var(--przejscie), background var(--przejscie);
}

.pole__liczba:hover { border-color: #bcc5d8; }

.pole__liczba:focus {
  outline: none;
  background: var(--powierzchnia);
  border-color: var(--akcent);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .13);
}

.pole__jednostka {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .82rem;
  color: var(--tekst-drugi);
  pointer-events: none;
}

/* ---------- Suwak ---------- */

.suwak {
  --postep: 0%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 26px;
  margin: 12px 0 2px;
  background: transparent;
  cursor: pointer;
  display: block;
}

.suwak::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: var(--r-pigula);
  background:
    linear-gradient(90deg, var(--akcent) 0%, var(--akcent-neon) var(--postep), transparent var(--postep)),
    var(--linia-mocna);
}

.suwak::-moz-range-track {
  height: 6px;
  border-radius: var(--r-pigula);
  background:
    linear-gradient(90deg, var(--akcent) 0%, var(--akcent-neon) var(--postep), transparent var(--postep)),
    var(--linia-mocna);
}

.suwak::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--akcent);
  box-shadow: 0 2px 8px rgba(37, 99, 235, .3);
  transition: transform var(--przejscie), box-shadow var(--przejscie);
}

.suwak::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--akcent);
  box-shadow: 0 2px 8px rgba(37, 99, 235, .3);
}

.suwak:hover::-webkit-slider-thumb { transform: scale(1.12); }
.suwak:active::-webkit-slider-thumb { transform: scale(1.04); }
.suwak:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(37, 99, 235, .2); }

.suwak__skala {
  display: flex;
  justify-content: space-between;
  font-size: .72rem;
  color: var(--tekst-drugi);
}

/* ---------- Przełączniki ---------- */

.przelacznik {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  cursor: pointer;
  user-select: none;
}

.przelacznik input { position: absolute; opacity: 0; width: 0; height: 0; }

.przelacznik__tor {
  position: relative;
  flex: none;
  width: 42px;
  height: 24px;
  border-radius: var(--r-pigula);
  background: var(--linia-mocna);
  transition: background var(--przejscie);
}

.przelacznik__tor::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--cien-s);
  transition: transform var(--przejscie);
}

.przelacznik input:checked + .przelacznik__tor {
  background: linear-gradient(135deg, var(--akcent), var(--akcent-neon));
}

.przelacznik input:checked + .przelacznik__tor::after { transform: translateX(18px); }

.przelacznik input:focus-visible + .przelacznik__tor {
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .2);
}

.przelacznik__tekst { font-size: .93rem; }

.przelacznik--wyrozniony {
  background: var(--powierzchnia-cicha);
  border: 1px solid var(--linia);
  border-radius: var(--r-mala);
  padding: 11px 14px;
  margin-bottom: 20px;
  transition: border-color var(--przejscie);
}

.przelacznik--wyrozniony:hover { border-color: var(--linia-mocna); }

/* ---------- Grupy pól ---------- */

.grupa { border: 0; padding: 0; margin: 0 0 24px; }
.grupa:last-child { margin-bottom: 0; }

.grupa__tytul { font-weight: 600; font-size: .93rem; padding: 0; margin-bottom: 6px; }

.grupa__pomoc { margin-top: 10px; font-size: .78rem; color: var(--tekst-drugi); }

/* ---------- Wybór okresu ---------- */

.segmenty {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(62px, 1fr));
  gap: 5px;
  padding: 5px;
  background: var(--powierzchnia-cicha);
  border: 1px solid var(--linia);
  border-radius: var(--r-srednia);
  margin-top: 8px;
}

.segment { cursor: pointer; }

.segment input { position: absolute; opacity: 0; width: 0; height: 0; }

.segment__tresc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 9px 4px;
  border-radius: var(--r-mala);
  color: var(--tekst-drugi);
  transition: background var(--przejscie), color var(--przejscie), box-shadow var(--przejscie);
}

.segment__tresc strong { font-size: 1.06rem; font-weight: 700; line-height: 1.1; }

.segment__tresc small {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .8;
}

.segment:hover .segment__tresc { background: rgba(37, 99, 235, .07); color: var(--akcent); }

.segment input:checked + .segment__tresc {
  background: linear-gradient(135deg, var(--akcent), #1d4ed8);
  color: #fff;
  box-shadow: 0 4px 12px -3px rgba(37, 99, 235, .5);
}

.segment input:focus-visible + .segment__tresc { box-shadow: 0 0 0 4px rgba(37, 99, 235, .22); }

/* ==========================================================================
   Wyniki
   ========================================================================== */

.rezultaty { min-width: 0; }

.wyniki__glowa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 0 4px;
}

.wyniki__tytul { font-size: 1.16rem; }

.wyniki__licznik { font-size: .82rem; color: var(--tekst-drugi); }

.komunikat {
  background: var(--powierzchnia);
  border: 1px dashed var(--linia-mocna);
  border-radius: var(--r-duza);
  padding: 44px 28px;
  text-align: center;
  color: var(--tekst-drugi);
  box-shadow: var(--cien-s);
}

.komunikat--pusty {
  border-style: solid;
  border-left: 4px solid var(--akcent);
  text-align: left;
}

.komunikat a { color: var(--akcent); font-weight: 600; }

/* ---------- Karta urządzenia ---------- */

.karta {
  position: relative;
  background: var(--powierzchnia);
  border: 1px solid var(--linia);
  border-radius: var(--r-duza);
  box-shadow: var(--cien-m);
  padding: 24px;
  margin-bottom: 16px;
  animation: wjazd 340ms cubic-bezier(.22, .8, .3, 1) backwards;
  transition: box-shadow var(--przejscie), transform var(--przejscie);
}

.karta:hover { box-shadow: var(--cien-l); transform: translateY(-2px); }

@keyframes wjazd {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.karta--polecana {
  background:
    radial-gradient(620px 220px at 88% -8%, rgba(56, 189, 248, .2), transparent 62%),
    linear-gradient(158deg, var(--granat-glebia), var(--granat-noc));
  border-color: transparent;
  color: #fff;
  box-shadow: var(--cien-neon);
  padding-top: 28px;
}

.karta--polecana:hover { box-shadow: var(--cien-neon), var(--cien-l); }

.znacznik {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(56, 189, 248, .14);
  border: 1px solid rgba(56, 189, 248, .34);
  color: var(--akcent-neon);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  padding: 5px 12px;
  border-radius: var(--r-pigula);
  margin-bottom: 14px;
}

.karta__nazwa { font-size: 1.2rem; margin-bottom: 5px; }
.karta--polecana .karta__nazwa { color: #fff; }

.karta__opis { font-size: .92rem; color: var(--tekst-drugi); margin-bottom: 14px; }
.karta--polecana .karta__opis { color: rgba(255, 255, 255, .7); }

.cechy { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }

.cecha {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .03em;
  padding: 4px 11px;
  border-radius: var(--r-pigula);
  background: rgba(37, 99, 235, .08);
  color: var(--akcent);
}

.karta--polecana .cecha { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .88); }

/* ---------- Cena ---------- */

.karta__cena {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding-bottom: 18px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--linia);
}

.karta--polecana .karta__cena { border-bottom-color: rgba(255, 255, 255, .14); }

.karta__cena-kwota {
  font-size: clamp(2.2rem, 5.4vw, 2.9rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  color: var(--granat);
}

.karta--polecana .karta__cena-kwota {
  background: linear-gradient(100deg, #fff, var(--akcent-neon));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.karta__cena-okres { font-size: .88rem; font-weight: 500; color: var(--tekst-drugi); }
.karta--polecana .karta__cena-okres { color: rgba(255, 255, 255, .62); }

/* ---------- Rozbicie kosztu ---------- */

.rozbicie { margin-bottom: 18px; }

.pozycja {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  font-size: .89rem;
  border-bottom: 1px solid var(--linia);
}

.karta--polecana .pozycja { border-bottom-color: rgba(255, 255, 255, .09); }

.pozycja:last-child { border-bottom: 0; }

.pozycja__nazwa { color: var(--tekst-drugi); }
.karta--polecana .pozycja__nazwa { color: rgba(255, 255, 255, .66); }

.pozycja__kwota { font-weight: 600; white-space: nowrap; text-align: right; }

.pozycja--suma {
  border-top: 1px solid var(--linia);
  border-bottom: 0;
  margin-top: 4px;
  padding-top: 12px;
}

.karta--polecana .pozycja--suma { border-top-color: rgba(255, 255, 255, .14); }

.pozycja--suma .pozycja__nazwa { color: var(--tekst); font-weight: 500; }
.karta--polecana .pozycja--suma .pozycja__nazwa { color: rgba(255, 255, 255, .82); }

.pozycja__kwota--dobrze { color: var(--zysk); font-weight: 600; }
.karta--polecana .pozycja__kwota--dobrze { color: #6ee7b7; }

/* ---------- Uwagi ---------- */

.uwaga {
  display: flex;
  gap: 10px;
  font-size: .85rem;
  line-height: 1.5;
  padding: 12px 14px;
  border-radius: var(--r-mala);
  background: rgba(37, 99, 235, .06);
  color: var(--tekst-drugi);
  margin-bottom: 18px;
}

.karta--polecana .uwaga { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .78); }

.uwaga--alarm {
  background: var(--alarm-tlo);
  color: var(--alarm);
  border: 1px solid rgba(180, 83, 9, .2);
}

.karta--polecana .uwaga--alarm {
  background: rgba(251, 191, 36, .13);
  color: #fcd34d;
  border-color: rgba(251, 191, 36, .3);
}

.uwaga__ikona { flex: none; font-weight: 700; }

/* Przycisk zapytania rozciągnięty na szerokość karty */
.karta .przycisk--glowny { width: 100%; }

.karta--polecana .przycisk--glowny {
  background: linear-gradient(135deg, var(--akcent-neon), var(--akcent-jasny));
  color: var(--granat-noc);
  box-shadow: 0 8px 22px -8px rgba(56, 189, 248, .8);
}

/* ==========================================================================
   Porównanie oszczędności
   ========================================================================== */

.porownanie {
  background: var(--powierzchnia);
  border: 1px solid var(--linia);
  border-radius: var(--r-duza);
  box-shadow: var(--cien-m);
  padding: 24px;
  margin-bottom: 16px;
  overflow: hidden;
}

.porownanie__tytul { font-size: 1.1rem; margin-bottom: 18px; }

.slupek { margin-bottom: 16px; }

.slupek__glowa {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}

.slupek__etykieta { font-size: .84rem; color: var(--tekst-drugi); }

.porownanie__kwota { font-weight: 700; font-size: 1.05rem; }
.porownanie__kwota--drogo { color: var(--tekst-drugi); }
.porownanie__kwota--tanio { color: var(--zysk); }

.slupek__tor {
  height: 12px;
  border-radius: var(--r-pigula);
  background: var(--powierzchnia-cicha);
  border: 1px solid var(--linia);
  overflow: hidden;
}

.slupek__wypelnienie {
  height: 100%;
  border-radius: var(--r-pigula);
  transition: width 520ms cubic-bezier(.22, .8, .3, 1);
}

.slupek__wypelnienie--drogo { background: linear-gradient(90deg, #cbd5e1, #94a3b8); }
.slupek__wypelnienie--tanio { background: linear-gradient(90deg, var(--zysk), #34d399); }

.zysk-podsumowanie {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--zysk-tlo);
  border: 1px solid rgba(5, 150, 105, .18);
  border-radius: var(--r-srednia);
  padding: 14px 16px;
  margin-top: 20px;
}

.zysk-podsumowanie__ikona {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--zysk);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 700;
}

.zysk-podsumowanie__tekst { font-size: .92rem; color: #065f46; }
.zysk-podsumowanie__tekst strong { color: #064e3b; }

/* ==========================================================================
   Wezwanie do kontaktu
   ========================================================================== */

.cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-duza);
  padding: 30px 26px;
  color: #fff;
  background:
    radial-gradient(560px 220px at 92% 0%, rgba(56, 189, 248, .26), transparent 60%),
    linear-gradient(150deg, var(--granat-glebia), var(--granat-noc));
  box-shadow: var(--cien-l);
}

.cta__tytul { font-size: 1.25rem; margin-bottom: 8px; }

.cta__opis {
  color: rgba(255, 255, 255, .74);
  font-size: .94rem;
  max-width: 52ch;
  margin-bottom: 20px;
}

.cta__przyciski { display: flex; flex-wrap: wrap; gap: 10px; }

/* ==========================================================================
   Telefony
   ========================================================================== */

@media (max-width: 620px) {
  .hero { padding: 40px 20px 104px; }
  .strona { padding: 0 16px 40px; }
  .panel { padding: 22px 18px 24px; }
  .karta, .porownanie, .cta { padding: 20px 18px; }
  .hero .atuty { flex-direction: column; gap: 10px; }
  .cta__przyciski .przycisk { width: 100%; }
}

/* ==========================================================================
   Panel dodatkowych wymagań
   Zwinięty domyślnie — podstawowe wybory zostają na wierzchu, reszta
   dostępna dla tych, którzy mają szczegółowe potrzeby.
   ========================================================================== */

.wiecej {
  margin-top: 14px;
  border: 1px solid var(--linia);
  border-radius: var(--r-mala);
  background: var(--powierzchnia-cicha);
  overflow: hidden;
}

.wiecej__przelacz {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--akcent);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: background var(--przejscie);
}

.wiecej__przelacz::-webkit-details-marker { display: none; }

.wiecej__przelacz::after {
  content: "▾";
  margin-left: auto;
  font-size: .85rem;
  transition: transform var(--przejscie);
}

.wiecej[open] .wiecej__przelacz::after { transform: rotate(180deg); }

.wiecej__przelacz:hover { background: rgba(37, 99, 235, .06); }

.wiecej__licznik {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pigula);
  background: var(--akcent);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.wiecej__tresc {
  padding: 4px 14px 16px;
  border-top: 1px solid var(--linia);
  animation: rozwin-panel 220ms ease;
}

@keyframes rozwin-panel {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

.wiecej__podtytul {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tekst-drugi);
  margin: 16px 0 4px;
}

.wiecej__podtytul:first-child { margin-top: 10px; }

.wiecej .przelacznik { padding: 7px 0; }
.wiecej .przelacznik__tekst { font-size: .89rem; }

/* ---------- Listy wyboru parametrów ---------- */

.lista { display: block; margin-bottom: 12px; }

.lista__etykieta {
  display: block;
  font-size: .86rem;
  color: var(--tekst-drugi);
  margin-bottom: 5px;
}

.lista__pole {
  width: 100%;
  padding: 9px 11px;
  font-family: inherit;
  font-size: .9rem;
  color: var(--tekst);
  background: var(--powierzchnia);
  border: 1.5px solid var(--linia-mocna);
  border-radius: var(--r-mala);
  cursor: pointer;
  transition: border-color var(--przejscie), box-shadow var(--przejscie);
}

.lista__pole:hover { border-color: #bcc5d8; }

.lista__pole:focus {
  outline: none;
  border-color: var(--akcent);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, .13);
}

/* ---------- Czyszczenie wymagań ---------- */

.wiecej__reset {
  width: 100%;
  margin-top: 14px;
  padding: 9px 14px;
  font-family: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--tekst-drugi);
  background: transparent;
  border: 1px dashed var(--linia-mocna);
  border-radius: var(--r-mala);
  cursor: pointer;
  transition: color var(--przejscie), border-color var(--przejscie), background var(--przejscie);
}

.wiecej__reset:hover {
  color: var(--akcent);
  border-color: var(--akcent);
  background: rgba(37, 99, 235, .05);
}

.wiecej__reset:focus-visible { outline: 3px solid rgba(37, 99, 235, .45); outline-offset: 2px; }

/* Nagłówki panelu nie powinny zaznaczać się przy przewijaniu na telefonie */
.panel__tytul, .panel__podtytul, .grupa__tytul, .pole__etykieta,
.pole__wartosc, .suwak__skala { user-select: none; }

/* ==========================================================================
   Oszczędność na prądzie
   ========================================================================== */

.energia-box {
  background: var(--powierzchnia);
  border: 1px solid var(--linia);
  border-left: 4px solid #f59e0b;
  border-radius: var(--r-duza);
  box-shadow: var(--cien-m);
  padding: 24px;
  margin-bottom: 16px;
  overflow: hidden;
}

.energia-box .zysk-podsumowanie {
  background: #fffbeb;
  border-color: rgba(245, 158, 11, .25);
}

.energia-box .zysk-podsumowanie__ikona { background: #f59e0b; }
.energia-box .zysk-podsumowanie__tekst { color: #92400e; }
.energia-box .zysk-podsumowanie__tekst strong { color: #78350f; }

.energia-box .slupek__wypelnienie--tanio {
  background: linear-gradient(90deg, #f59e0b, #fbbf24);
}

.energia-box .porownanie__kwota--tanio { color: #b45309; }

.energia-box__nota {
  margin-top: 14px;
  font-size: .8rem;
  color: var(--tekst-drugi);
}

@media (max-width: 620px) {
  .energia-box { padding: 20px 18px; }
}

/* ---------- Zdjęcie urządzenia w karcie wyniku ---------- */

/* Flex, nie grid: w siatce procentowa wysokość zdjęcia nie ma się do czego
   odnieść, więc wysokie zdjęcia (urządzenia wielofunkcyjne) wychodziły poza
   ramkę i było widać tylko ich górę — sam ADF. */
.karta__ilustracja {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  margin-bottom: 16px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--linia);
  border-radius: var(--r-srednia);
  overflow: hidden;
}

/* W ciemnej karcie polecanej białe pole zostaje — zdjęcia produktowe
   są robione na białym tle, więc inaczej znikłyby. */
.karta--polecana .karta__ilustracja { border-color: rgba(255, 255, 255, .2); }

.karta__zdjecie {
  width: 100%;
  height: 100%;
  min-width: 0;
  object-fit: contain;
}

/* ---------- Wybór konfiguracji urządzenia ---------- */

.warianty { margin-bottom: 18px; }

.warianty__tytul {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tekst-drugi);
  margin-bottom: 8px;
}

.karta--polecana .warianty__tytul { color: rgba(255, 255, 255, .6); }

.warianty__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 6px;
}

.wariant {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 10px;
  font-family: inherit;
  text-align: left;
  background: var(--powierzchnia-cicha);
  border: 1.5px solid var(--linia);
  border-radius: var(--r-mala);
  cursor: pointer;
  transition: border-color var(--przejscie), background var(--przejscie), color var(--przejscie);
}

.wariant:hover { border-color: var(--akcent); }

.wariant--wybrany {
  background: rgba(37, 99, 235, .08);
  border-color: var(--akcent);
}

.wariant__nazwa { font-size: .84rem; font-weight: 600; }

.wariant__szczegol {
  font-size: .72rem;
  color: var(--tekst-drugi);
  font-variant-numeric: tabular-nums;
}

.wariant--wybrany .wariant__nazwa { color: var(--akcent); }

/* Warianty w ciemnej karcie polecanej */
.karta--polecana .wariant {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
}

.karta--polecana .wariant:hover { border-color: var(--akcent-neon); }

.karta--polecana .wariant--wybrany {
  background: rgba(56, 189, 248, .18);
  border-color: var(--akcent-neon);
}

.karta--polecana .wariant__szczegol { color: rgba(255, 255, 255, .6); }
.karta--polecana .wariant--wybrany .wariant__nazwa { color: var(--akcent-neon); }

.wariant:focus-visible { outline: 3px solid rgba(37, 99, 235, .45); outline-offset: 2px; }