/* Kalkulator Oszczędności — promocje-na-stacjach.pl
   Wszystkie klasy z prefiksem .pns- (bez kolizji z Divi/motywem).
   Sygnatura: bursztynowy wyświetlacz LED dystrybutora.
   Paleta dopasowana do strony: granat #234572 (Divi), font Poppins. */

.pns-kalk{
  --pns-ink:#16191D; --pns-muted:#6B7280; --pns-surface:#F4F5F6;
  --pns-paper:#FFFFFF; --pns-line:#E2E5E8;
  --pns-panel:#234572; --pns-panel-edge:#16304F;
  --pns-led:#FFB000; --pns-led-soft:rgba(255,176,0,.16);
  --pns-accent:#234572; --pns-accent-soft:rgba(35,69,114,.09);
  --pns-alert:#D92D20; --pns-alert-soft:rgba(217,45,32,.08);
  max-width:560px; margin:1.5em auto;
  font-family:"Poppins",Helvetica,Arial,Lucida,sans-serif;
  color:var(--pns-ink); background:var(--pns-paper);
  border:1px solid var(--pns-line); border-radius:14px;
  overflow:hidden; line-height:1.5; font-size:16px;
}
.pns-kalk *,.pns-kalk *::before,.pns-kalk *::after{box-sizing:border-box}
.pns-kalk p,.pns-kalk h3{margin:0}

.pns-kalk__head{padding:18px 18px 14px;border-bottom:1px solid var(--pns-line)}
.pns-kalk__eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--pns-accent)}
.pns-kalk__title{font-size:19px;font-weight:600;color:#234572;letter-spacing:-.01em;margin-top:3px;line-height:1.3}
.pns-kalk__promo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:11px}
.pns-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;padding:5px 10px;border-radius:999px;background:var(--pns-surface);border:1px solid var(--pns-line);color:var(--pns-ink)}
.pns-chip--rabat{background:var(--pns-accent-soft);border-color:transparent;color:var(--pns-accent)}
.pns-chip b{font-weight:800}

/* Zdanie cytowalne — statyczny HTML dla AI, czytelny też dla człowieka */
.pns-kalk__cite{padding:13px 18px 0;font-size:14px;color:var(--pns-ink)}

.pns-display{margin:14px 18px 4px;border-radius:12px;background:linear-gradient(180deg,var(--pns-panel),var(--pns-panel-edge));padding:16px 16px 18px;position:relative;overflow:hidden}
.pns-display__flow{position:absolute;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,transparent,var(--pns-led),transparent);opacity:0;transform:translateX(-100%)}
.pns-display.is-active .pns-display__flow{animation:pns-flow 1.1s ease-out}
@keyframes pns-flow{0%{opacity:.9;transform:translateX(-60%)}100%{opacity:0;transform:translateX(60%)}}
.pns-seg{display:inline-flex;background:rgba(255,255,255,.08);border-radius:999px;padding:3px;gap:2px}
.pns-seg button{appearance:none;border:0;background:transparent;cursor:pointer;color:rgba(255,255,255,.55);font-weight:700;font-size:12px;letter-spacing:.02em;padding:6px 12px;border-radius:999px;transition:.15s;font-family:inherit;line-height:1.2}
.pns-seg button[aria-pressed="true"]{background:var(--pns-led);color:#1a1300}
.pns-seg button:focus-visible{outline:2px solid var(--pns-led);outline-offset:2px}
.pns-display__value{margin-top:14px;font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;color:var(--pns-led);font-weight:700;font-size:clamp(38px,12vw,58px);letter-spacing:.01em;line-height:1;font-variant-numeric:tabular-nums;text-shadow:0 0 18px var(--pns-led-soft)}
.pns-display__value small{font-size:.42em;font-weight:700;margin-left:6px;opacity:.85}
.pns-display__sub{margin-top:9px;color:rgba(255,255,255,.62);font-size:12.5px}
.pns-display__tag{display:inline-block;margin-top:10px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--pns-led);background:var(--pns-led-soft);padding:3px 8px;border-radius:6px}

.pns-status{margin:14px 18px 0;border-radius:10px;padding:11px 13px;font-size:13px;background:var(--pns-accent-soft);color:#1b3a63;display:flex;gap:9px;align-items:flex-start}
.pns-status.is-trap{background:var(--pns-alert-soft);color:#9b1c14}
.pns-status.is-note{background:var(--pns-surface);color:var(--pns-ink)}
.pns-status svg{flex:0 0 auto;margin-top:1px}
.pns-status b{font-weight:800}

.pns-controls{padding:16px 18px 6px}
.pns-group + .pns-group{margin-top:18px}
.pns-group__label{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--pns-muted)}
.pns-field{margin-top:11px}
.pns-field__top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.pns-field__name{font-size:14px;font-weight:600}
.pns-field__val{font-family:ui-monospace,Menlo,monospace;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.pns-field__val input{width:64px;text-align:right;font:inherit;color:inherit;border:1px solid var(--pns-line);border-radius:7px;padding:4px 7px;background:var(--pns-paper)}
.pns-field__val input:focus-visible{outline:2px solid var(--pns-accent);outline-offset:1px;border-color:var(--pns-accent)}
.pns-field__unit{color:var(--pns-muted);font-weight:600;margin-left:4px}

.pns-kalk input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;margin-top:11px;border-radius:999px;background:var(--pns-line);cursor:pointer;padding:0;border:0}
.pns-kalk input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--pns-accent);border:3px solid var(--pns-paper);box-shadow:0 1px 4px rgba(0,0,0,.2);cursor:pointer}
.pns-kalk input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--pns-accent);border:3px solid var(--pns-paper);box-shadow:0 1px 4px rgba(0,0,0,.2);cursor:pointer}
.pns-kalk input[type=range]:focus-visible{outline:2px solid var(--pns-accent);outline-offset:4px}

.pns-params{margin-top:18px;border-top:1px dashed var(--pns-line);padding-top:14px}
.pns-params__head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.pns-params__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin-top:12px}
.pns-mini label{display:block;font-size:12px;font-weight:600;color:var(--pns-muted);margin-bottom:4px}
.pns-mini input,.pns-mini select{width:100%;font:inherit;font-size:14px;padding:8px 9px;border:1px solid var(--pns-line);border-radius:8px;background:var(--pns-paper);color:inherit}
.pns-mini input:focus-visible,.pns-mini select:focus-visible{outline:2px solid var(--pns-accent);outline-offset:1px;border-color:var(--pns-accent)}
.pns-toggle{display:flex;align-items:center;gap:9px;font-size:13.5px;font-weight:600;cursor:pointer;user-select:none}
.pns-toggle input{width:18px;height:18px;accent-color:var(--pns-accent);cursor:pointer}
.pns-linkbtn{appearance:none;background:none;border:0;color:var(--pns-accent);font:inherit;font-size:13px;font-weight:700;cursor:pointer;padding:2px 0}
.pns-linkbtn:focus-visible{outline:2px solid var(--pns-accent);outline-offset:2px;border-radius:4px}
.pns-span2{grid-column:1 / -1}

.pns-kalk__foot{padding:14px 18px 18px;border-top:1px solid var(--pns-line);font-size:11.5px;color:var(--pns-muted);margin-top:14px}
.pns-kalk__foot p + p{margin-top:6px}

@media (max-width:420px){.pns-params__grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.pns-display.is-active .pns-display__flow{animation:none}}

/* PNS seg mobile fit — skróć etykiety okresu, by zmieściły się na wąskich ekranach (PL dłuższe niż EN) */
@media (max-width:540px){.pns-seg{padding:2px}.pns-seg button{font-size:10px !important;padding:6px 6px !important;letter-spacing:0 !important}}