/* =========================================
   SOLAR ROI CALCULATOR
   ========================================= */

.roi-calculator {
    --roi-text: #17202a;
    --roi-muted: #667085;
    --roi-line: #e5e7eb;
    --roi-surface: #fff;
    --roi-accent: #f8bc2d;
    --roi-accent2: #0f5139;
    --roi-warning: #fff7e6;
    --roi-danger: #a33a2b;
    background:#f5f7f9;
}


/* =========================================
   HERO
   ========================================= */

.roi-calculator .hero {
    padding: 58px 0 32px;
    max-width: 780px;
}

.roi-calculator .eyebrow {
    font-size: 12px;
    letter-spacing: .12em;
    font-weight: 800;
    color: var(--roi-accent);
}

.roi-calculator h1 {
    font-size: 44px;
    line-height: 1.08;
    margin: 10px 0 14px;
    letter-spacing: -.035em;
}

.roi-calculator h2 {
    margin: 0;
    font-size: 24px;
    letter-spacing: -.02em;
}

.roi-calculator .hero p {
    font-size: 17px;
    color: var(--roi-muted);
    max-width: 690px;
}


/* =========================================
   CARDS
   ========================================= */

.roi-calculator .card {
    background: var(--roi-surface);
    border: 1px solid var(--roi-line);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(20, 35, 50, .05);
}

.roi-calculator .calculator-card {
    padding: 34px;
}


/* =========================================
   FORM SECTIONS
   ========================================= */

.roi-calculator .section-title {
    display: flex;
    gap: 15px;
    align-items: flex-start;
    padding: 6px 0 20px;
    border-top: 1px solid var(--roi-line);
    margin-top: 28px;
    padding-top: 28px;
}

.roi-calculator .section-title:first-child {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

.roi-calculator .section-title > span {
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background: #edf5f1;
    color: var(--roi-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
}

.roi-calculator .section-title h2 {
    font-size: 19px;
}

.roi-calculator .section-title p {
    margin: 2px 0 0;
    color: var(--roi-muted);
    font-size: 13px;
}


/* =========================================
   FORM GRID
   ========================================= */

.roi-calculator .grid {
    display: grid;
    gap: 18px;
}

.roi-calculator .grid.two {
    grid-template-columns: 1fr 1fr;
}


/* =========================================
   FORM FIELDS
   ========================================= */

.roi-calculator input,
.roi-calculator select {
    width: 100%;
    height: 50px;
    border: 1px solid #d7dce2;
    border-radius: 10px;
    background: #fff;
    padding: 0 14px;
    font: inherit;
    color: var(--roi-text);
    outline: none;
}

.roi-calculator input:focus,
.roi-calculator select:focus {
    border-color: var(--roi-accent);
    box-shadow: 0 0 0 3px rgba(23, 107, 77, .09);
}

.roi-calculator small {
    font-weight: 400;
    color: var(--roi-muted);
    font-size: 12px;
}


/* =========================================
   BUTTON
   ========================================= */

.roi-calculator .primary-btn {
    border: 0;
    border-radius: 10px;
    background: var(--roi-accent);
    color: #fff;
    padding: 14px 21px;
    font-weight: 750;
    font-size: 15px;
    cursor: pointer;
    margin-top: 27px;
}

.roi-calculator .primary-btn:hover {
    background: var(--roi-accent2);
}

.roi-calculator .primary-btn span {
    margin-left: 7px;
}


/* =========================================
   PRIVACY NOTE
   ========================================= */

.roi-calculator .privacy-note {
    font-size: 12px;
    color: var(--roi-muted);
    margin: 12px 0 0;
}


/* =========================================
   ALERT / ERROR
   ========================================= */

.roi-calculator .alert {
    padding: 14px 16px;
    border-radius: 10px;
    margin-bottom: 20px;
}

.roi-calculator .error {
    background: #fff0ee;
    color: var(--roi-danger);
    border: 1px solid #f3c9c2;
}


/* =========================================
   RESULTS
   ========================================= */

.roi-calculator .results {
    padding-bottom: 55px;
}

.roi-calculator .results-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
}

.roi-calculator .results-head p {
    margin: 5px 0 0;
    color: var(--roi-muted);
}

.roi-calculator .reset {
    font-size: 14px;
    color: var(--roi-accent);
    font-weight: 700;
    text-decoration: none;
}


/* =========================================
   RESULT METRICS
   ========================================= */

.roi-calculator .metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}

.roi-calculator .metric {
    background: #fff;
    border: 1px solid var(--roi-line);
    border-radius: 15px;
    padding: 21px;
}

.roi-calculator .metric.featured {
    border-color: #b9dacb;
    background: #f3faf6;
}

.roi-calculator .metric span,
.roi-calculator .metric small {
    display: block;
    color: var(--roi-muted);
    font-size: 12px;
}

.roi-calculator .metric strong {
    display: block;
    font-size: 27px;
    margin: 7px 0 4px;
    letter-spacing: -.03em;
}


/* =========================================
   RESULT GRID
   ========================================= */

.roi-calculator .result-grid {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 18px;
}

.roi-calculator .breakdown,
.roi-calculator .lead-card {
    padding: 25px;
}

.roi-calculator .breakdown h3,
.roi-calculator .lead-card h3 {
    margin: 0 0 17px;
    font-size: 18px;
}


/* =========================================
   RESULT ROWS
   ========================================= */

.roi-calculator .result-row {
    display: flex;
    justify-content: space-between;
    padding: 13px 0;
    border-bottom: 1px solid var(--roi-line);
    font-size: 14px;
}

.roi-calculator .result-row b {
    font-size: 14px;
}

.roi-calculator .result-row.total {
    font-size: 15px;
    font-weight: 750;
}

.roi-calculator .result-row.total b {
    font-size: 18px;
}


/* =========================================
   LEAD FORM
   ========================================= */

.roi-calculator .lead-card {
    background: #fbfcfd;
}

.roi-calculator .lead-card p {
    color: var(--roi-muted);
    font-size: 13px;
    margin-top: -7px;
}

.roi-calculator .lead-card input {
    margin-bottom: 11px;
}

.roi-calculator .compact {
    gap: 10px;
}

.roi-calculator .lead-card .primary-btn {
    width: 100%;
    margin-top: 3px;
}


/* =========================================
   RESPONSIVE
   ========================================= */

@media (max-width: 760px) {

    .roi-calculator h1 {
        font-size: 34px;
    }

    .roi-calculator .grid.two,
    .roi-calculator .result-grid {
        grid-template-columns: 1fr;
    }

    .roi-calculator .metrics {
        grid-template-columns: 1fr 1fr;
    }

    .roi-calculator .calculator-card {
        padding: 24px;
    }

    .roi-calculator .results-head {
        align-items: flex-start;
    }

    .roi-calculator .results-head .reset {
        margin-top: 25px;
    }
}


@media (max-width: 450px) {

    .roi-calculator .metrics {
        grid-template-columns: 1fr;
    }

    .roi-calculator .container {
        padding: 0 16px;
    }
}

#calculatorForm .nice-select .list {
    max-height: 300px;
    overflow-y: auto;
}



@media (max-width: 450px) {
    .roi-calculator .metrics {
        grid-template-columns: 1fr;
    }

    .roi-calculator {
        padding-left: 16px;
        padding-right: 16px;
    }
}