/* ============================================================
   SOLAR SAVINGS CALCULATOR — Base Styles
   Override any variable in your theme CSS to customise.
   ============================================================ */

:root {
    --sc-primary:        #1a2b4a;
    --sc-primary-hover:  #243d6b;
    --sc-accent:         #f4a825;
    --sc-bg:             #ffffff;
    --sc-bg-alt:         #f8f9fa;
    --sc-border:         #e2e6ea;
    --sc-text:           #333333;
    --sc-text-muted:     #777777;
    --sc-label:          #555555;
    --sc-success:        #2e7d32;
    --sc-success-bg:     #e8f5e9;
    --sc-error:          #c62828;
    --sc-error-bg:       #ffebee;
    --sc-highlight-bg:   #1a2b4a;
    --sc-highlight-text: #ffffff;
    --sc-radius:         8px;
    --sc-radius-sm:      4px;
    --sc-font:           inherit;
    --sc-shadow:         0 2px 12px rgba(0,0,0,0.08);
}

/* ── Wrapper ─────────────────────────────────────────────── */

.sc-wrap {
    font-family: var(--sc-font);
    color:       var(--sc-text);
    max-width:   720px;
    margin:      0 auto;
}

/* ── Panel ───────────────────────────────────────────────── */

.sc-panel {
    background:    var(--sc-bg);
    border:        1px solid var(--sc-border);
    border-radius: var(--sc-radius);
    padding:       32px;
    box-shadow:    var(--sc-shadow);
}

.sc-panel-header {
    margin-bottom: 24px;
}

.sc-title {
    font-size:   1.5rem;
    font-weight: 700;
    margin:      0 0 8px;
    color:       var(--sc-primary);
}

.sc-subtitle {
    font-size:   0.9rem;
    color:       var(--sc-text-muted);
    margin:      0 0 12px;
    line-height: 1.5;
}

.sc-badge {
    display:       inline-block;
    background:    var(--sc-accent);
    color:         #ffffff;
    font-size:     0.72rem;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding:       4px 10px;
    border-radius: 20px;
}

/* ── Form grid ───────────────────────────────────────────── */

.sc-form-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   16px;
    margin-bottom:         16px;
}

@media (max-width: 540px) {
    .sc-form-grid {
        grid-template-columns: 1fr;
    }
    .sc-panel {
        padding: 20px;
    }
}

.sc-field {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.sc-field--full {
    grid-column: 1 / -1;
}

.sc-field label {
    font-size:   0.82rem;
    font-weight: 600;
    color:       var(--sc-label);
    display:     flex;
    justify-content: space-between;
    align-items: center;
}

.sc-slider-value {
    font-weight: 700;
    color:       var(--sc-primary);
}

/* Inputs */
.sc-wrap input[type="text"],
.sc-wrap input[type="number"],
.sc-wrap input[type="email"],
.sc-wrap input[type="tel"],
.sc-wrap select {
    width:         100%;
    padding:       10px 12px;
    border:        1px solid var(--sc-border);
    border-radius: var(--sc-radius-sm);
    font-size:     0.95rem;
    color:         var(--sc-text);
    background:    var(--sc-bg);
    box-sizing:    border-box;
    transition:    border-color 0.2s;
    -webkit-appearance: none;
    appearance:    none;
}

.sc-wrap input:focus,
.sc-wrap select:focus {
    outline:      none;
    border-color: var(--sc-primary);
    box-shadow:   0 0 0 3px rgba(26,43,74,0.1);
}

/* Range sliders */
.sc-wrap input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width:      100%;
    height:     6px;
    background: var(--sc-border);
    border:     none;
    border-radius: 3px;
    outline:    none;
    padding:    0;
    cursor:     pointer;
}

.sc-wrap input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width:       18px;
    height:      18px;
    border-radius: 50%;
    background:  var(--sc-primary);
    cursor:      pointer;
    border:      2px solid #ffffff;
    box-shadow:  0 1px 4px rgba(0,0,0,0.2);
}

.sc-wrap input[type="range"]::-moz-range-thumb {
    width:       18px;
    height:      18px;
    border-radius: 50%;
    background:  var(--sc-primary);
    cursor:      pointer;
    border:      2px solid #ffffff;
}

/* ── Indicators ──────────────────────────────────────────── */

.sc-indicators {
    display:     flex;
    gap:         16px;
    flex-wrap:   wrap;
    font-size:   0.8rem;
    color:       var(--sc-text-muted);
    margin-bottom: 20px;
}

/* ── Errors & Success ────────────────────────────────────── */

.sc-field-error {
    background:    var(--sc-error-bg);
    color:         var(--sc-error);
    border:        1px solid var(--sc-error);
    border-radius: var(--sc-radius-sm);
    padding:       10px 14px;
    font-size:     0.85rem;
    margin-bottom: 12px;
}

.sc-success-msg {
    background:    var(--sc-success-bg);
    color:         var(--sc-success);
    border:        1px solid #a5d6a7;
    border-radius: var(--sc-radius-sm);
    padding:       10px 14px;
    font-size:     0.85rem;
    margin-bottom: 12px;
}

/* ── Buttons ─────────────────────────────────────────────── */

.sc-btn {
    display:       inline-block;
    padding:       13px 24px;
    border:        none;
    border-radius: var(--sc-radius-sm);
    font-size:     0.9rem;
    font-weight:   700;
    cursor:        pointer;
    text-align:    center;
    transition:    background 0.2s, opacity 0.2s;
    width:         100%;
    box-sizing:    border-box;
}

.sc-btn--primary {
    background: var(--sc-primary);
    color:      #ffffff;
}

.sc-btn--primary:hover {
    background: var(--sc-primary-hover);
}

.sc-btn--primary:disabled {
    opacity: 0.6;
    cursor:  not-allowed;
}

.sc-btn--ghost {
    background:  transparent;
    color:       var(--sc-primary);
    border:      1px solid var(--sc-border);
    margin-top:  12px;
}

.sc-btn--ghost:hover {
    background: var(--sc-bg-alt);
}

/* ── Results Panel ───────────────────────────────────────── */

.sc-results-title {
    font-size:     1.15rem;
    font-weight:   700;
    color:         var(--sc-primary);
    margin:        0 0 20px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Stats grid */
.sc-stats-grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   10px;
    margin-bottom:         20px;
}

@media (max-width: 540px) {
    .sc-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.sc-stat {
    background:    var(--sc-bg-alt);
    border:        1px solid var(--sc-border);
    border-radius: var(--sc-radius-sm);
    padding:       14px 12px;
    text-align:    center;
}

.sc-stat--highlight {
    background: var(--sc-highlight-bg);
    border-color: var(--sc-highlight-bg);
}

.sc-stat--highlight .sc-stat-label {
    color: rgba(255,255,255,0.7);
}

.sc-stat--highlight .sc-stat-value {
    color: var(--sc-highlight-text);
}

.sc-stat-label {
    font-size:  0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color:      var(--sc-text-muted);
    margin-bottom: 6px;
}

.sc-stat-value {
    font-size:   1.3rem;
    font-weight: 700;
    color:       var(--sc-primary);
}

/* Insight grid */
.sc-insight-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   12px;
    margin-bottom:         24px;
}

@media (max-width: 540px) {
    .sc-insight-grid {
        grid-template-columns: 1fr;
    }
}

.sc-insight {
    background:    var(--sc-bg-alt);
    border-left:   3px solid var(--sc-accent);
    border-radius: var(--sc-radius-sm);
    padding:       14px;
}

.sc-insight-label {
    font-size:     0.8rem;
    font-weight:   700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color:         var(--sc-primary);
    margin-bottom: 6px;
}

.sc-insight-text {
    font-size:   0.85rem;
    line-height: 1.55;
    color:       var(--sc-text-muted);
}

/* Email section */
.sc-email-section {
    border-top:  1px solid var(--sc-border);
    padding-top: 24px;
    margin-top:  8px;
}

.sc-email-title {
    font-size:     1rem;
    font-weight:   700;
    color:         var(--sc-primary);
    margin:        0 0 16px;
}