/* Kalkulator ceny (suwaki) – strona główna, /oferta/ i panel (sklep, cennik). Kolory z site.css / admin.css. */
.rng{-webkit-appearance:none;appearance:none;display:block;width:100%;height:30px;margin:6px 0 2px;background:transparent;cursor:pointer;--f:0%;touch-action:pan-y}
.rng::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:linear-gradient(90deg,var(--accent) var(--f),#2a3140 var(--f))}
.rng::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-9px;border-radius:50%;background:#fff;border:5px solid var(--accent);box-shadow:0 2px 10px rgba(0,0,0,.45)}
.rng::-moz-range-track{height:8px;border-radius:99px;background:#2a3140}
.rng::-moz-range-progress{height:8px;border-radius:99px;background:var(--accent)}
.rng::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:#fff;border:5px solid var(--accent);box-shadow:0 2px 10px rgba(0,0,0,.45)}
.rng:focus{outline:none}
.rng:focus-visible{outline:2px solid #ffd23f;outline-offset:3px;border-radius:10px}
.sl{display:block}
.sl-h{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.sl-h output{font-weight:700;font-variant-numeric:tabular-nums}
.sl-s{display:flex;justify-content:space-between;color:var(--muted);font-size:12.5px}
@media (prefers-reduced-motion:reduce){.rng::-webkit-slider-thumb{transition:none}}

/* tabelka cen */
.ptab.ceny{display:table;border-collapse:collapse;width:100%;max-width:min(100%,640px);font-variant-numeric:tabular-nums}
.ptab.ceny th,.ptab.ceny td{padding:8px 12px 8px 0;border-bottom:1px solid var(--line);text-align:right}
.ptab.ceny th:first-child{text-align:left}

/* panel: zakup, przedłużenie, edytor cennika */
.pcalc{display:grid;grid-template-columns:1fr 1fr;gap:14px 30px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--card2)}
.pcalc .sl-h output,.renew.calc .sl-h output{font-size:16px}
.pcalc .ptot{grid-column:1/-1;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.pcalc .ptot output[data-o=price]{font-size:28px;font-weight:800;font-variant-numeric:tabular-nums}
.renew.calc{display:grid;gap:6px}
.renew .rtot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.renew .rtot output{font-weight:800;font-size:18px;margin-right:auto}
.calced{border:1px solid var(--line);border-radius:12px;padding:12px 16px 16px;margin:0}
.calced legend{padding:0 6px;font-weight:700}
.calced .row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0;color:var(--muted);font-size:13.5px}
.calced .row>span:first-child{min-width:220px;color:var(--text);font-weight:600}
.calced input{width:84px;padding:7px 9px;border-radius:7px;border:1px solid var(--line);background:var(--card2);color:var(--text);font:inherit}
.calced select{width:auto}
@media (max-width:640px){.pcalc{grid-template-columns:1fr}.calced .row>span:first-child{min-width:100%}}