/* SurePress® ROI Calculator — Scoped CSS (v12.6) */
#spc-root-inline, #spc-root-inline * { box-sizing: border-box; }

#spc-root-inline {
  background: transparent;
  /* No global text color here. */
  --brand-dark:#1e293b; --gain-green:#059669; --surepress-green:#10b981;
  --text-muted:#64748b; --bg-light:#f8fafc; --border:#e2e8f0; --light-gray:#e5e7eb;
}

#spc-root-inline .spc-wrap { max-width:1100px; margin:0 auto; padding:12px; background:transparent; }

/* Card (fixed height on desktop so right column stays static while left scrolls) */
#spc-root-inline .spc-card {
  background:#fff; border-radius:20px; overflow:hidden;
  border:1px solid rgba(2,6,23,0.10); box-shadow:0 8px 16px rgba(0,0,0,.06);
  height:720px;               /* lock desktop height */
  display:flex; flex-direction:column;
}

/* Header (explicit title/sub colors — no global inheritance) */
#spc-root-inline .spc-head {
  background:linear-gradient(135deg, var(--brand-dark), #334155);
  padding:18px 24px; text-align:center;
}
#spc-root-inline .spc-title { font-size:24px; font-weight:800; margin:0 0 4px; color:#fff; }
#spc-root-inline .spc-sub   { font-size:13px; margin:0; color:rgba(255,255,255,.9); }

/* Two-column body with local scrolling only on left when advanced is open */
#spc-root-inline .spc-body { display:flex; gap:0; flex:1; min-height:0; }
#spc-root-inline .spc-left {
  flex:1; padding:20px; border-right:1px solid var(--border); background:#fff;
  /* default: no internal scroll */
  overflow-y:hidden; min-height:0;
  color:var(--brand-dark);    /* explicit text color (not global) */
}
#spc-root-inline.adv-open .spc-left { overflow-y:auto; } /* only scroll fields when advanced is open */

#spc-root-inline .spc-right{
  width:340px; flex-shrink:0; padding:20px; background:linear-gradient(135deg,#f0fdf4,#dcfce7);
  overflow:hidden;            /* keep Results static */
  color:var(--brand-dark);    /* explicit text color */
}

/* Inputs */
#spc-root-inline .spc-section { background:var(--bg-light); border:1px solid var(--border); border-radius:10px; padding:14px; margin-bottom:14px; }
#spc-root-inline .spc-h3 { margin:0 0 10px; font-size:15px; font-weight:700; color:var(--brand-dark); }
#spc-root-inline .spc-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#spc-root-inline .spc-group{ display:flex; flex-direction:column; }
#spc-root-inline .spc-label{ font-size:12px; font-weight:600; margin-bottom:4px; color:var(--brand-dark); }
#spc-root-inline .spc-input{
  padding:10px 12px; border:2px solid var(--border); border-radius:8px; background:#fff; font-size:14px;
  transition:border-color .2s, box-shadow .2s; color:var(--brand-dark);
}
#spc-root-inline .spc-input:focus{ outline:none; border-color:var(--surepress-green); box-shadow:0 0 0 3px rgba(16,185,129,.1); }
#spc-root-inline .spc-help{ font-size:11px; color:var(--text-muted); }

#spc-root-inline .spc-autocalc{ margin-top:8px; padding:8px; font-size:12px; text-align:center; background:var(--light-gray); border:1px solid #d1d5db; border-radius:8px; }

/* Advanced toggle */
#spc-root-inline .spc-advbtn{
  display:block; width:100%; background:none; border:none; color:var(--surepress-green); text-decoration:underline; cursor:pointer;
  padding:10px 0; font-weight:600; margin:6px 0;
}
#spc-root-inline .spc-adv { display:none; }
#spc-root-inline .spc-adv.show { display:block; }

/* Results */
#spc-root-inline .spc-rwrap{ height:100%; display:flex; flex-direction:column; }
#spc-root-inline .spc-rhead{ text-align:center; margin-bottom:16px; }
#spc-root-inline .spc-rtitle{ font-size:18px; font-weight:700; margin-bottom:8px; color:var(--brand-dark); }
#spc-root-inline .spc-annual{ font-size:40px; font-weight:900; color:var(--gain-green); }

#spc-root-inline .spc-break{ background:rgba(255,255,255,.7); border-radius:10px; padding:16px; font-size:12px; flex:1; }
#spc-root-inline .spc-bh{ font-weight:700; text-transform:uppercase; font-size:12px; padding-bottom:8px; margin-bottom:12px; border-bottom:1px solid rgba(30,41,59,.2); color:var(--brand-dark); }
#spc-root-inline .spc-mt-16{ margin-top:16px; }
#spc-root-inline .spc-row{ display:flex; justify-content:space-between; margin-bottom:8px; }
#spc-root-inline .spc-row:last-child{ margin-bottom:0; }
#spc-root-inline .spc-total{ border-top:1px solid rgba(16,185,129,.3); padding-top:8px; margin-top:10px; }
#spc-root-inline .spc-lab { color:var(--text-muted); }
#spc-root-inline .spc-val { color:var(--gain-green); font-weight:600; }
#spc-root-inline .spc-cost{ color:#dc2626; font-weight:600; }

#spc-root-inline .spc-ctas { margin-top:14px; }
#spc-root-inline .spc-btn {
  width:100%; padding:14px 18px; border:0; border-radius:8px; background:var(--surepress-green); color:#fff; font-weight:700; cursor:pointer;
}
#spc-root-inline .spc-btn:hover{ background:var(--gain-green); }

/* Modal */
#spc-root-inline .spc-modal{ position:fixed; inset:0; background:rgba(0,0,0,.8); display:none; align-items:center; justify-content:center; padding:20px; z-index:9999; }
#spc-root-inline .spc-modal.show{ display:flex; }
#spc-root-inline .spc-mcard{ width:100%; max-width:640px; background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 25px 60px rgba(0,0,0,.3); }
#spc-root-inline .spc-mhead{ background:linear-gradient(135deg,var(--brand-dark),#334155); color:#fff; padding:18px 20px; text-align:center; }
#spc-root-inline .spc-mbody{ padding:20px; background:#fff; }

/* Responsive — on mobile stack columns and allow natural page scroll */
@media (max-width: 900px) {
  #spc-root-inline .spc-card{ height:auto; }
  #spc-root-inline .spc-body{ flex-direction:column; }
  #spc-root-inline .spc-right{ width:100%; }
  #spc-root-inline .spc-grid{ grid-template-columns:1fr; }
  #spc-root-inline .spc-left{ overflow:visible; } /* no internal scroll on mobile */
}