/* ============================================================
   SOROJ RENEWABLE ENERGY — Calculator wizard styles
   ============================================================ */

.calc-shell{
  background:var(--raise);border:1px solid var(--line);border-radius:24px;
  padding:clamp(26px,4vw,50px);box-shadow:var(--shadow);
}

/* Stepper */
.stepper{display:flex;justify-content:space-between;position:relative;margin-bottom:clamp(34px,5vw,56px)}
.stepper::before{
  content:"";position:absolute;top:19px;inset-inline:34px;height:2px;
  background:rgba(148,180,220,.15);
}
.stepper .prog{
  position:absolute;top:19px;inset-inline-start:34px;height:2px;width:0;
  background:linear-gradient(90deg,var(--sun),var(--volt));
  box-shadow:0 0 12px rgba(79,125,255,.5);transition:width .5s ease;
}
.step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;flex:1;text-align:center}
.step .num{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-mono);font-weight:600;
  background:var(--surface);border:2px solid rgba(148,180,220,.25);color:var(--muted);transition:.3s;
}
.step .lab{font-size:.8rem;color:var(--muted);transition:.3s}
.step.active .num{border-color:var(--sun);color:var(--sun);box-shadow:var(--glow-sun)}
.step.active .lab{color:var(--text);font-weight:600}
.step.done .num{background:linear-gradient(140deg,var(--sun),var(--sun-hot));border-color:transparent;color:#041028}
.step.done .lab{color:var(--sun)}

/* Panels */
.calc-step{display:none;animation:stepIn .45s ease}
.calc-step.on{display:block}
@keyframes stepIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* Assess-by toggle */
.assess{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-bottom:30px}
.assess .a-lab{font-weight:700}
.radio-pill{display:inline-flex;align-items:center;gap:10px;cursor:pointer;padding:10px 18px;border:1px solid var(--line);border-radius:999px;transition:.2s;font-size:.95rem}
.radio-pill input{accent-color:var(--sun);width:17px;height:17px}
.radio-pill:has(input:checked){border-color:var(--sun);color:var(--sun);background:rgba(79,125,255,.08);box-shadow:var(--glow-sun)}

/* Results cards */
.res-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;margin-block:8px 26px}
.res-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;text-align:center;position:relative;overflow:hidden;
}
.res-card::before{content:"";position:absolute;inset-inline:0;top:0;height:2px;background:linear-gradient(90deg,var(--sun),var(--volt))}
.res-card .rv-val{font-family:var(--font-mono);font-size:clamp(1.5rem,3vw,2.1rem);color:var(--sun);text-shadow:var(--glow-sun)}
.res-card.cyan .rv-val{color:var(--volt);text-shadow:var(--glow-volt)}
.res-card .rv-unit{font-size:.8rem;color:var(--volt);font-family:var(--font-mono)}
.res-card .rv-lab{font-size:.85rem;color:var(--muted);margin-top:6px}

/* Chart */
.chart-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin-block:10px 26px}
.chart-box h4{margin-bottom:14px;font-size:1rem}
.chart-box canvas{width:100%;height:280px}
.chart-note{font-size:.8rem;color:var(--muted);margin-top:12px}

/* Verdict / summary rows */
.verdict{
  display:flex;gap:16px;align-items:flex-start;border-radius:var(--radius);padding:20px 22px;margin-block:6px 24px;
  background:rgba(52,211,153,.07);border:1px solid rgba(52,211,153,.35);
}
.verdict.warn{background:rgba(79,125,255,.07);border-color:rgba(79,125,255,.4)}
.verdict .v-ico{font-size:1.4rem;line-height:1}
.verdict p{font-size:.95rem;color:var(--text)}
.sum-list{display:grid;gap:0;margin-block:8px 26px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.sum-row{display:flex;justify-content:space-between;gap:16px;padding:15px 20px;background:var(--surface);font-size:.95rem}
.sum-row:nth-child(even){background:rgba(17,26,46,.6)}
.sum-row b{font-family:var(--font-mono);color:var(--volt);font-weight:500}
.sum-row.hi b{color:var(--sun);text-shadow:var(--glow-sun)}

/* Wizard nav */
.calc-nav{display:flex;justify-content:space-between;gap:14px;margin-top:34px;flex-wrap:wrap}
.calc-nav .spacer{flex:1}

/* Disclaimer */
.calc-disc{font-size:.78rem;color:var(--muted);margin-top:26px;border-top:1px dashed var(--line);padding-top:16px}

@media(max-width:700px){
  .stepper .lab{display:none}
  .stepper::before,.stepper .prog{inset-inline:20px}
  .assess{gap:12px}
}