/* =======================================================================
   Solar BER Uplift Calculator – App-specific styles
   Global element spacing comes from /css/40-typography.css.
   Component spacing comes from /css/30-components.css.
   All colours are declared as variables in /css/10-variables.css.
   This file covers only patterns unique to this app.
   ======================================================================= */

    /* ------------------------------------------------------------------ */
    /*  BER energy-rating colour scale                                     */
    /* ------------------------------------------------------------------ */
:root {
    --ber-color-a: #00a650;
    --ber-color-b: #4cbd38;
    --ber-color-c: #b3dc18;
    --ber-color-d: #fff200;
    --ber-color-e: #fab20a;
    --ber-color-f: #f35c19;
    --ber-color-g: #ed1c24;
}



/* ===================================================================== */
/*  AREA INPUTS  (m² / ft² side by side)                                  */
/* ===================================================================== */

.ber-area-container {
    display: flex;
    gap: var(--space-sm);
}

.ber-area-container > div { flex: 1; }

.ber-area-unit {
    margin-left: var(--space-xs);
    color: var(--grey);
    font-size: 0.85em;
}


/* ===================================================================== */
/*  BER GRADE SLIDER  (color-coded track using BER palette variables)     */
/* ===================================================================== */

.ber-slider-container .kw-range {
    --kw-range-track: linear-gradient(90deg,
        var(--ber-color-g)  0%,
        var(--ber-color-f) 18.18%,
        var(--ber-color-e) 30.91%,
        var(--ber-color-d) 45.45%,
        var(--ber-color-c) 59.09%,
        var(--ber-color-b) 72.73%,
        var(--ber-color-a) 86.36%,
        var(--ber-color-a) 100%
    );
}

.ber-slider-container .kw-range::-webkit-slider-runnable-track {
    background: linear-gradient(90deg,
        var(--ber-color-g)  0%,
        var(--ber-color-f) 18.18%,
        var(--ber-color-e) 30.91%,
        var(--ber-color-d) 45.45%,
        var(--ber-color-c) 59.09%,
        var(--ber-color-b) 72.73%,
        var(--ber-color-a) 86.36%,
        var(--ber-color-a) 100%
    );
}

.ber-slider-container .kw-range::-moz-range-track {
    background: linear-gradient(90deg,
        var(--ber-color-g)  0%,
        var(--ber-color-f) 18.18%,
        var(--ber-color-e) 30.91%,
        var(--ber-color-d) 45.45%,
        var(--ber-color-c) 59.09%,
        var(--ber-color-b) 72.73%,
        var(--ber-color-a) 86.36%,
        var(--ber-color-a) 100%
    );
}


/* ===================================================================== */
/*  BER GRADE DISPLAY  (slider readout + numeric controls)                */
/* ===================================================================== */

.ber-grade-badge {
    font-size: 1.1em;
    min-width: 70px;
}

.ber-numeric-row {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

/* Step-grade buttons — inherit .kw-btn shape, override colours to match
   the site's secondary/outline style */
.ber-grade-button {
    padding: 0;
    width: 2.5rem;
    height: 2.5rem;
    font-size: 1.25rem;
    font-weight: 700;
    flex-shrink: 0;
    background-color: var(--grey-light);
    color: var(--near-black);
    border: 1px solid var(--grey-border);
}

.ber-grade-button:hover {
    background-color: var(--grey-border);
    transform: none;
}

/* Wrapper that stacks the input and its unit label */
.ber-numeric-field {
    width: 120px;
    flex-shrink: 0;
}

/* Numeric BER value field — uses .kw-input for all base styles */
.ber-numeric-input {
    text-align: right;
    font-weight: 700;
}

/* Unit label sits just below the input, inheriting .kw-help-text colour/size */
.ber-numeric-unit {
    display: block;
    margin-top: var(--space-xs);
    text-align: right;
}


/* ===================================================================== */
/*  RESULTS  (before → after comparison boxes)                            */
/* ===================================================================== */

.ber-results-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-lg);
}

.ber-result-column {
    text-align: center;
    width: 45%;
}

.ber-result-box {
    width: 80%;
    padding: 20px 30px;
    border-radius: var(--radius-md);
    text-align: center;
    color: var(--white);
    margin: 0 auto;
}

.ber-result-title {
    text-align: center;
    margin-bottom: var(--space-sm);
    font-size: 1.2em;
    font-weight: bold;
    color: var(--near-black);
}

.ber-arrow {
    font-size: 28px;
    color: var(--grey);
    margin: 0 var(--space-md);
}

.ber-result-grade {
    font-size: 2.2em;
    font-weight: bold;
    display: block;
}

.ber-result-numeric {
    font-size: 1em;
    display: block;
}

.ber-text-dark  { color: var(--near-black); }
.ber-text-light { color: var(--white); }


/* ===================================================================== */
/*  CALCULATION OUTPUTS                                                   */
/* ===================================================================== */

/* Inline computed value spans (peak power, generation, energy reduction) */
.ber-result-value {
    font-weight: 700;
}


/* ===================================================================== */
/*  DIVIDER between inputs and detail results                             */
/* ===================================================================== */

.ber-divider {
    border: 0;
    border-top: 1px solid var(--grey-border);
    margin-top: var(--space-lg);
    margin-bottom: var(--space-md);
}



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

@media (max-width: 768px) {
    .ber-results-container {
        flex-direction: column;
        gap: var(--space-md);
    }

    .ber-result-column { width: 100%; }

    .ber-arrow {
        transform: rotate(90deg);
        margin: 0;
    }

    .ber-area-container { flex-direction: column; }

    .ber-numeric-row {
        gap: var(--space-xs);
    }
}