/* ================================================================
   Solar Savings Output Widget
   ================================================================ */

.stbp-solar-savings-output {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* ── Metrics list ────────────────────────────────────────────── */
.stbp-solar-metrics {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.stbp-solar-metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--stbp-row-padding-top, 16px) 0
             var(--stbp-row-padding-bottom, 16px) 0;
    border-bottom: var(--stbp-divider-height, 1px) solid var(--stbp-divider-color, #e0d8cc);
    gap: 12px;
}
.stbp-solar-metric-row:last-child {
    border-bottom: none;
}

.stbp-metric-label {
    color: var(--stbp-metric-label-color, #555555);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

.stbp-metric-value {
    color: var(--stbp-metric-value-color, #1a1a1a);
    font-size: 14px;
    font-weight: 600;
    text-align: right;
    white-space: nowrap;
}

/* ── Responsive defaults ─────────────────────────────────────── */
@media (max-width: 1024px) {
    .stbp-solar-metric-row {
        padding-top:    var(--stbp-row-padding-top-tablet, var(--stbp-row-padding-top, 13px));
        padding-bottom: var(--stbp-row-padding-bottom-tablet, var(--stbp-row-padding-bottom, 13px));
    }
    .stbp-metric-label,
    .stbp-metric-value {
        font-size: 13px;
    }
}
@media (max-width: 767px) {
    .stbp-solar-metric-row {
        padding-top:    var(--stbp-row-padding-top-mobile, var(--stbp-row-padding-top, 12px));
        padding-bottom: var(--stbp-row-padding-bottom-mobile, var(--stbp-row-padding-bottom, 12px));
    }
    .stbp-metric-label,
    .stbp-metric-value {
        font-size: 12px;
    }
}