/* ======================================================================
   Loan calculator typography & layout-stabilization overrides
   Loaded by the Loan Calculator plugin when imc_typography_css_enabled
   option is active.
   ====================================================================== */

.imc-calculator,
.imc-calculator * {
    font-family: 'Poppins', sans-serif !important;
}

.imc-calc-trust,
.imc-calc-period-label,
.imc-calc-header,
.imc-calc-trust-info {
    font-family: 'Quicksand', sans-serif !important;
    font-weight: 400;
}

/* Stabilize dynamic value fields to avoid layout jumping/flicker */
.imc-calculator .loan-amount-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 0.5rem;
}

.imc-calculator #amount-val,
.imc-calculator #installment,
.imc-calculator #full-amount,
.imc-calculator #rrso-display,
.imc-calculator #celebration-value {
    display: inline-block;
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1, "lnum" 1;
    line-height: 1.2;
    text-align: right;
    white-space: nowrap;
}

.imc-calculator #amount-val {
    min-inline-size: 12ch;
    min-block-size: 2.2rem;
    padding-block: 0.25rem;
}

.imc-calculator .result p {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    column-gap: 0.5rem;
    margin: 0;
    min-block-size: 1.8rem;
}

.imc-calculator .result p + p {
    margin-top: 0.2rem;
}

.imc-calculator .result #installment,
.imc-calculator .result #full-amount,
.imc-calculator .result #rrso-display {
    justify-self: end;
}

.imc-calculator .result #installment,
.imc-calculator .result #full-amount {
    min-inline-size: 12ch;
}

.imc-calculator .result #rrso-display {
    min-inline-size: 8ch;
}

.imc-calculator #celebration-value {
    min-inline-size: 2.5ch;
}

@media (max-width: 520px) {
    .imc-calculator #amount-val {
        min-inline-size: 11ch;
    }

    .imc-calculator .result #installment,
    .imc-calculator .result #full-amount {
        min-inline-size: 11ch;
    }
}