/* ============================================================
   Komponenty kalkulatora termomodernizacji
   (ładowane PO styles.css i water.css)
   ============================================================ */

:root {
  --termo: #E9762B;
  --termo-deep: #C25415;
  --termo-soft: #FDF1E6;
  --termo-grad: linear-gradient(135deg, #F59E0B 0%, #DC5F1E 100%);
}

/* ciepłe akcenty marki na tej podstronie */
.termo .brand-name em { color: #FBBF24; }
.termo .hero h1 .serif { color: #FBBF24; }
.termo .nav-tel .ic { color: #FBBF24; }
.termo .dot-live { background: #FBBF24; }

/* ---------- kafle statystyk „ciepłe” ---------- */
.rain-stat.fire { background: var(--termo-soft); border-color: #F6DDC2; }
.rain-stat.fire .ss-v { color: var(--termo-deep); }

/* ---------- klasa energetyczna: drabinka świadectwa ---------- */
.eclass { display: grid; gap: 7px; }
.ec-row { position: relative; display: flex; align-items: center; min-height: 27px; }
.ec-bar {
  height: 27px; width: var(--w, 40%); background: var(--c, #999);
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 0 100%);
  border-radius: 6px 0 0 6px;
  display: flex; align-items: center; gap: 10px; padding: 0 22px 0 11px;
  color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 13.5px;
  transition: width .5s cubic-bezier(.3,.7,.3,1);
}
.ec-bar small { font-family: var(--font-body); font-weight: 700; font-size: 10.5px; opacity: .85; letter-spacing: .02em; }
.ec-pin {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 11.5px; font-weight: 800; letter-spacing: .02em; white-space: nowrap;
  padding: 5px 12px; border-radius: 99px; color: #fff;
  box-shadow: 0 8px 18px -8px rgba(6,35,48,.55);
  animation: pinIn .45s cubic-bezier(.3,1.4,.5,1);
}
@keyframes pinIn { from { opacity: 0; transform: translate(8px, -50%); } to { opacity: 1; transform: translate(0, -50%); } }
.ec-pin::before {
  content: ""; position: absolute; left: -5px; top: 50%; transform: translateY(-50%);
  border: 5px solid transparent; border-left: 0;
}
.ec-pin.now { background: var(--deep); }
.ec-pin.now::before { border-right-color: var(--deep); }
.ec-pin.after { background: #0E7A42; }
.ec-pin.after::before { border-right-color: #0E7A42; }
.ec-foot { font-size: 13px; color: var(--ink-2); background: var(--surface-2); border: 1px dashed var(--line-2); border-radius: 12px; padding: 11px 14px; margin-top: 6px; }

/* ---------- badge klasy (sidebar, chipsy) ---------- */
.ec-badge {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px;
  border-radius: 7px; color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 13.5px;
  vertical-align: -5px;
}
.ec-arrow { font-weight: 800; color: var(--ink-3); margin: 0 4px; }

/* ---------- bilans rachunków (przed / po) ---------- */
.bal-now i { background: linear-gradient(90deg, #F0865C, #DD4F2A); }
.bal-after i { background: linear-gradient(90deg, #23B968, #0E7A42); }

/* ---------- podgląd domu ---------- */
.house-preview { background: linear-gradient(170deg, #F2F7F4 0%, #E6EFE7 100%); }
.house-preview svg { width: 100%; height: auto; display: block; }

/* ---------- zakres prac: legenda pod schematem (zamiast mikroopisów w SVG) ---------- */
.sum-scope { list-style: none; margin: 0; padding: 4px 20px 12px; display: grid; background: var(--surface); }
.sum-scope li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line-2); font-size: 13px; }
.sum-scope li:last-child { border-bottom: 0; }
.sum-scope .ic { width: 16px; height: 16px; color: var(--termo); }
.sc-name { font-weight: 600; color: var(--ink); }
.sc-meta { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.sum-scope .sc-empty .ic { color: var(--ink-3); }
.sum-scope .sc-empty .sc-name { font-weight: 500; color: var(--ink-3); }
.result-preview .sum-scope { padding: 10px 22px 16px; }
.msheet .sum-scope { padding-bottom: 6px; }

/* ---------- hotspoty na ilustracji domu ---------- */
.hotspot { cursor: pointer; outline: none; }
.hotspot .hs-pulse { fill: #E9762B; opacity: .35; transform-box: fill-box; transform-origin: center; animation: hsPulse 2.4s ease-out infinite; }
.hotspot .hs-ring { fill: #fff; stroke: #E9762B; stroke-width: 2; transition: stroke .15s; }
.hotspot .hs-dot { fill: #E9762B; transition: fill .15s; }
.hotspot:hover .hs-ring, .hotspot:focus-visible .hs-ring { stroke: #C25415; }
.hotspot:hover .hs-dot, .hotspot:focus-visible .hs-dot { fill: #C25415; }
@keyframes hsPulse {
  0% { transform: scale(.55); opacity: .5; }
  70% { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .hotspot .hs-pulse { animation: none; opacity: .18; } }
@media print { .hotspot { display: none; } }

@media print {
  .ec-pin { box-shadow: none; }
}