/* ============================================================
   Kalkulator fotowoltaiki — komponenty kalkulatora
   (ładowane PO styles.css i water.css)
   Motyw: słoneczny bursztyn + grafit paneli
   ============================================================ */

:root {
  --pv: #F5A623;
  --pv-2: #E58A00;
  --pv-deep: #9A5B00;
  --pv-soft: #FEF3D9;
  --pv-softer: #FFFAEF;
  --pv-panel: #1B2A4A;
  --pv-grad: linear-gradient(135deg, #FFC734 0%, #EF8E00 100%);
}

/* akcenty marki na tej podstronie */
.solar .brand-name em { color: #FFD24D; }
.solar .hero h1 .serif { color: #FFD24D; }
.solar .nav-tel .ic { color: #FFD24D; }
.solar .dot-live { background: #FFD24D; box-shadow: 0 0 0 0 rgba(255,210,77,.6); }

/* ---------- kafle statystyk „słoneczne" ---------- */
.rain-stat.sun { background: var(--pv-soft); border-color: #F6E2B4; }
.rain-stat.sun .ss-v { color: var(--pv-deep); }

/* ---------- pigułka porady (bursztyn) ---------- */
.pv-mini {
  display: flex; align-items: center; gap: 9px; margin: 0 24px;
  background: var(--pv-soft); border: 1px solid #F6E2B4; color: var(--pv-deep);
  font-size: 13px; font-weight: 700; padding: 10px 14px; border-radius: 12px;
}
.pv-mini .ic { color: var(--pv); flex: none; }

/* ---------- lista zastrzeżeń w miejscu formularza leadowego (wynik) ---------- */
.lead-foot-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.lead-foot-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 13.5px; line-height: 1.5; color: var(--ink-2);
}
.lead-foot-list .ic { flex: none; margin-top: 1px; color: var(--pv-deep); width: 18px; height: 18px; }

/* ---------- podgląd dachu z panelami ---------- */
.roof-preview { background: linear-gradient(170deg, #FBF6EA 0%, #EEF2F1 100%); border-bottom: 1px solid var(--line); }
.roof-preview svg { width: 100%; height: auto; display: block; }
.result-preview .roof-preview { border-bottom: 0; }

/* ---------- roi w bursztynie ---------- */
.roi-card.sun { background: var(--pv-soft); border-color: #F6E2B4; }
.roi-card.sun .roi-v { color: var(--pv-deep); }

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

/* ---------- energia: paski produkcji i zużycia ---------- */
.eflow { display: grid; gap: 18px; }
.flow-row { display: grid; gap: 8px; }
.flow-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13.5px; }
.flow-head span { font-weight: 700; color: var(--ink-2); }
.flow-head b { font-family: var(--font-head); font-weight: 800; color: var(--ink); font-size: 15px; }

.split-bar {
  display: flex; height: 26px; border-radius: 8px; overflow: hidden;
  background: var(--surface-2); border: 1px solid var(--line-2);
}
.split-bar i {
  height: 100%; width: var(--w, 0%); display: block;
  transition: width .5s cubic-bezier(.3,.7,.3,1);
}
.split-bar i + i { box-shadow: -1px 0 0 rgba(255,255,255,.5); }

/* segmenty energii — spójna legenda kolorów */
.s-self { background: linear-gradient(90deg, #FFC94D, #F0980F); }
.s-batt { background: linear-gradient(90deg, #34D07E, #12B26A); }
.s-exp  { background: linear-gradient(90deg, #5BB8EA, #2E9EE0); }
.s-grid { background: repeating-linear-gradient(45deg, #C3CBD3 0 6px, #B4BCC5 6px 12px); }

.split-legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  font-size: 12px; font-weight: 700; color: var(--ink-2);
}
.split-legend span { display: inline-flex; align-items: center; gap: 6px; }
.split-legend i {
  width: 12px; height: 12px; border-radius: 4px; flex: none; display: inline-block;
}

.flow-foot {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-top: 4px; padding-top: 14px; border-top: 1px dashed var(--line-2);
}
.ff-stat { text-align: center; }
.ff-stat b {
  display: block; font-family: var(--font-head); font-weight: 800;
  font-size: clamp(18px, 3.2vw, 22px); color: var(--pv-deep); line-height: 1.1;
}
.ff-stat span { font-size: 11.5px; font-weight: 600; color: var(--ink-3); }

/* ---------- statystyki „jak często" na kartach opcji ---------- */
.opt-stat {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .02em; color: var(--pv-deep);
}
.opt-stat i {
  flex: none; width: 54px; height: 5px; border-radius: 99px; background: var(--line);
  position: relative; overflow: hidden;
}
.opt-stat i::after {
  content: ""; position: absolute; inset: 0; width: var(--w, 50%);
  border-radius: 99px; background: var(--pv-grad);
}

/* przycisk „słoneczny" (sekcja dotacji) */
.btn-sun { background: var(--pv-grad); color: #3A2600; box-shadow: 0 8px 24px -8px rgba(239,142,0,.55); }
.btn-sun:hover { filter: brightness(1.05); transform: translateY(-1px); }

@media (max-width: 560px) {
  .flow-foot { grid-template-columns: 1fr; gap: 6px; }
  .ff-stat { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
}
@media print {
  .pv-mini { border-color: #ccc; }
  .split-bar i { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}