/* Refinance calculator page (/refinance-calculator/): the parts lq-ui.css and mortgage.css don't already have. */

.lq-refi-first {
    margin-top: 0;
}

.lq-refi-check {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 10px;
    font-size: 14px;
    color: var(--lq-ink2);
    cursor: pointer;
}

    .lq-refi-check input {
        width: 18px;
        height: 18px;
        margin-top: 1px;
        flex-shrink: 0;
        accent-color: var(--lq-g700);
    }

/* "Down from $2,138.60: $291.45 a month less" under the big number */
.lq-refi-delta {
    margin: 4px 0 0;
    font-size: 15px;
    color: #cfe3e1;
}

    .lq-refi-delta b {
        color: #fff;
    }

/* The verdict uses .lq-mtg-save; a refinance that costs more overall gets a warning colour. */
.lq-refi-bad {
    background: rgba(236, 115, 68, .16);
    border-color: rgba(236, 115, 68, .4);
}

    .lq-refi-bad .bi {
        color: #f3a07f;
    }

.lq-refi .lq-results-kv {
    margin-top: 14px;
}

.lq-mtg-busy .lq-refi-delta {
    opacity: .6;
    transition: opacity .2s;
}

.lq-mtg-stale .lq-refi-delta,
.lq-mtg-stale .lq-refi-verdict {
    opacity: .35;
}

/* Current vs new loan */
.lq-refi-table-card {
    margin-top: 16px;
    padding: 6px 4px;
}

.lq-refi-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

    .lq-refi-table th,
    .lq-refi-table td {
        padding: 11px 14px;
        text-align: right;
        border-bottom: 1px solid var(--lq-line);
        white-space: nowrap;
    }

    .lq-refi-table thead th {
        font-size: 13px;
        font-weight: 600;
        color: var(--lq-muted);
    }

    .lq-refi-table tbody th {
        text-align: left;
        font-weight: 600;
        color: var(--lq-ink);
    }

    .lq-refi-table tbody tr:last-child th,
    .lq-refi-table tbody tr:last-child td {
        border-bottom: 0;
    }

.lq-refi-good {
    color: var(--lq-ok);
    font-weight: 600;
}

.lq-refi-worse {
    color: var(--lq-bad);
    font-weight: 600;
}

.lq-refi-same {
    color: var(--lq-muted);
}

@media (max-width: 575.98px) {
    .lq-refi-table {
        font-size: 14px;
    }

        .lq-refi-table th,
        .lq-refi-table td {
            padding: 10px 6px;
        }

        .lq-refi-table tbody th {
            white-space: normal;
        }

    /* Phones: the savings are in the results card already, so the table keeps just the two loans. */
    .lq-refi-diff {
        display: none;
    }
}