/* Solar Pricing Calculator styles (v3.0) */
.spc-wrapper { --spc-gap: 16px; --spc-gap-sm: 10px; --spc-pad: 18px; --spc-radius: 14px; --spc-shadow: 0 8px 24px rgba(0,0,0,.08); --spc-border: #e7e7ea; }
.spc-card { background: #fff; border: 1px solid var(--spc-border); border-radius: var(--spc-radius); padding: 20px; box-shadow: var(--spc-shadow); }
.spc-title { margin: 0 0 6px; font-size: 1.6rem; line-height: 1.2; }
.spc-subtitle { margin: 0 0 12px; color: #555; }

.spc-helpbox { margin: 10px 0 18px; background:#f6f7fb; border:1px solid var(--spc-border); border-radius:12px; padding:12px 16px; }
.spc-helpbox summary { cursor:pointer; font-weight:700; }
.spc-helpbox[open] { box-shadow: var(--spc-shadow); }
.spc-helpbox ol { margin: 10px 0 0 18px; }
.spc-helpbox p, .spc-helpbox li { font-size: 14px; line-height: 1.45; }
.spc-note { font-size: 12px; color:#666; margin-top: 8px; }

.spc-section { border: 1px dashed var(--spc-border); border-radius: 12px; padding: var(--spc-pad); background: #fafafa; margin-bottom: var(--spc-gap); }
.spc-section h3 { margin-top: 0; }

.spc-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spc-gap); }
.spc-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--spc-gap); }
.spc-row-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: var(--spc-gap); }

.spc-section label { display: grid; font-weight: 600; gap: 6px; margin-bottom: 10px; }
.spc-section input, .spc-section select, .spc-section textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--spc-border); border-radius: 10px; font-size: 14px; }

.spc-labor-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1.2fr; gap: var(--spc-gap-sm); align-items: center; margin-bottom: 8px; }
.spc-labor-head { font-weight: 700; }
.spc-labor-total { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding: 10px 12px; background: #eef2ff; border-radius: 10px; border: 1px solid #dbe1ff; }

.spc-hide { display: none; }

.spc-results { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spc-gap); padding: var(--spc-pad); margin-top: 16px; background: #0f172a; color: #fff; border-radius: 12px; }
.spc-result { background: rgba(255,255,255,.06); padding: 12px; border-radius: 10px; display: grid; gap: 6px; }
.spc-result .spc-k { font-size: 12px; opacity: .85; }
.spc-result .spc-v { font-size: 18px; font-weight: 700; word-break: break-word; }
.spc-result.big .spc-v { font-size: 22px; }
.spc-result.slim .spc-v { font-size: 16px; }
.spc-divider { height: 1px; background: rgba(255,255,255,.2); grid-column: 1 / -1; margin: 4px 0; }

@media (max-width: 960px) {
  .spc-row-3, .spc-row-4, .spc-results { grid-template-columns: 1fr; }
  .spc-labor-grid { grid-template-columns: 1fr 1fr; }
  .spc-labor-grid > div:nth-child(n+3) { margin-top: 6px; }
}
