/* ============================================================
   Kalkulator SKD — style komponentu
   Przeniesione z praca/makieta-obszar-skd/index-v1.html.

   Dwie świadome różnice wobec makiety:
   1) Prefiks .saskd zamiast .calc — w makiecie .calc jest bezpieczne,
      bo to jeden plik. We wtyczce nie: motyw albo inna wtyczka może
      mieć własne .calc i wtedy kalkulator rozjeżdża się bez ostrzeżenia.
   2) Każda zmienna ma FALLBACK (var(--x, wartość)). Makieta dziedziczy
      zmienne z home V4, wtyczka nie może na to liczyć — musi wyglądać
      poprawnie także w motywie, który tych zmiennych nie definiuje.
      Gdy motyw je ma, kalkulator dopasuje się do niego sam.
   ============================================================ */

.saskd{
  --saskd-steel:   var(--steel, #1e88c7);
  --saskd-navy:    var(--navy, #04254c);
  --saskd-ink:     var(--ink, #16212c);
  --saskd-muted:   var(--muted, #5f6b76);
  --saskd-graphite:var(--graphite, #33414f);
  --saskd-line:    var(--line, #e4e7eb);

  border:1px solid #cfe3f3;
  border-radius:12px;
  background:linear-gradient(180deg,#fbfdff,#fff);
  padding:clamp(1.4rem,3vw,2rem);
  margin:1.6rem 0;
  color:var(--saskd-ink);
}

.saskd *{box-sizing:border-box}

.saskd__head{display:flex;gap:.9rem;align-items:flex-start;margin-bottom:1.3rem}
.saskd__head svg{width:34px;height:34px;flex:0 0 34px;color:var(--saskd-steel)}
.saskd__head h3{margin:0 0 .2rem;font-size:1.22rem;line-height:1.3;color:var(--saskd-navy)}
.saskd__head p{margin:0;font-size:.92rem;color:var(--saskd-muted)}

.saskd__grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1.1rem}
@media (max-width:575.98px){.saskd__grid{grid-template-columns:1fr}}

.saskd__field label{display:block;font-size:.82rem;font-weight:700;color:var(--saskd-graphite);margin-bottom:.3rem}
.saskd__input{position:relative;display:flex;align-items:center}
.saskd__input input{width:100%;border:1.5px solid var(--saskd-line);border-radius:6px;padding:.62rem .9rem;font:inherit;font-size:.98rem;font-variant-numeric:tabular-nums;background:#fff;color:var(--saskd-ink)}
.saskd__input input:focus{border-color:var(--saskd-steel);outline:none}
.saskd__unit{position:absolute;right:.85rem;font-size:.85rem;font-weight:700;color:var(--saskd-muted);pointer-events:none}
.saskd__input input[type=date]{padding-right:.6rem}

.saskd__check{display:flex;gap:.6rem;align-items:flex-start;margin:.9rem 0 0;font-size:.86rem;color:var(--saskd-muted);cursor:pointer}
.saskd__check input{width:17px;height:17px;flex:0 0 17px;margin-top:.2rem;accent-color:var(--saskd-steel)}

.saskd__out{margin-top:1.4rem;border-top:1px solid var(--saskd-line);padding-top:1.3rem}
.saskd__rows{display:grid;gap:.1rem;margin-bottom:1rem}
.saskd__row{display:flex;justify-content:space-between;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--saskd-line);font-size:.95rem}
.saskd__row span:last-child{font-weight:700;font-variant-numeric:tabular-nums;color:var(--saskd-navy);white-space:nowrap}

.saskd__total{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;background:var(--saskd-navy);color:#fff;border-radius:10px;padding:1.1rem 1.3rem}
.saskd__total span:first-child{font-size:.92rem;color:#c3d2e2;max-width:22ch;line-height:1.35}
.saskd__total b{font-size:clamp(1.5rem,3.4vw,2.05rem);font-variant-numeric:tabular-nums;line-height:1;white-space:nowrap}

.saskd__note{font-size:.84rem;color:var(--saskd-muted);margin:1rem 0 0}

.saskd__alert{display:none;gap:.7rem;align-items:flex-start;border-radius:8px;padding:.9rem 1.1rem;margin-top:1.1rem;font-size:.88rem;line-height:1.55;background:#fff6e8;border:1px solid #f3ddb6;color:#7a5314}
.saskd__alert svg{width:20px;height:20px;flex:0 0 20px;margin-top:.15rem;color:#c9871a}
.saskd__alert.is-on{display:flex}

/* Przyciski własne — kalkulator ma wyglądać poprawnie także tam,
   gdzie strona nie ładuje Bootstrapa (uwaga wdrożeniowa z makiety). */
.saskd__cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.3rem}
.saskd__btn{display:inline-block;border-radius:6px;padding:.7rem 1.3rem;font-weight:700;font-size:.95rem;line-height:1.4;text-decoration:none;transition:background .15s,color .15s,border-color .15s;cursor:pointer}
.saskd__btn--steel{background:var(--saskd-steel);color:#fff;border:1.5px solid var(--saskd-steel)}
.saskd__btn--steel:hover,.saskd__btn--steel:focus{background:var(--saskd-navy);border-color:var(--saskd-navy);color:#fff}
.saskd__btn--line{background:transparent;color:var(--saskd-navy);border:1.5px solid var(--saskd-line)}
.saskd__btn--line:hover,.saskd__btn--line:focus{border-color:var(--saskd-steel);color:var(--saskd-steel)}

/* Widoczny focus — bez tego wtyczka pogarsza dostępność strony. */
.saskd__input input:focus-visible,
.saskd__check input:focus-visible,
.saskd__btn:focus-visible{outline:2px solid var(--saskd-steel);outline-offset:2px}

@media (prefers-reduced-motion:reduce){
  .saskd__btn{transition:none}
}