/* ════════════════════════════════════════════════════════════════════════════
   RECATOOLS — Mortgage Calculator — style.css
   Tool-specific overrides only.
   Base styles live in /assets/css/tool-page.css.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Loan type tab pills ─────────────────────────────────────────────────────── */
.loan-type-tabs {
    display:         flex;
    gap:             0.5rem;
    margin-bottom:   1.5rem;
    flex-wrap:       wrap;
}

.loan-tab-btn {
    padding:         0.45rem 1.1rem;
    border-radius:   999px;
    border:          1.5px solid var(--border, #E2E4E8);
    background:      #fff;
    color:           var(--text-secondary, #64748B);
    font-family:     'IBM Plex Sans', sans-serif;
    font-size:       0.875rem;
    font-weight:     600;
    cursor:          pointer;
    transition:      background 0.15s, color 0.15s, border-color 0.15s;
    white-space:     nowrap;
}

.loan-tab-btn:hover {
    border-color:    #E8472F;
    color:           #E8472F;
}

.loan-tab-btn.active {
    background:      #E8472F;
    border-color:    #E8472F;
    color:           #fff;
}

/* ── Input group with prefix label ──────────────────────────────────────────── */
.input-group {
    display:         flex;
    flex-direction:  column;
    gap:             0.35rem;
    margin-bottom:   1.1rem;
}

.input-group label {
    font-size:       0.8125rem;
    font-weight:     600;
    color:           var(--text-secondary, #64748B);
    letter-spacing:  0.01em;
}

.input-group .hint {
    font-size:       0.75rem;
    color:           var(--muted, #9b9690);
    margin-top:      0.15rem;
}

.input-with-prefix {
    display:         flex;
    align-items:     stretch;
    border:          1.5px solid var(--border, #E2E4E8);
    border-radius:   8px;
    overflow:        hidden;
    background:      #fff;
    transition:      border-color 0.15s;
}

.input-with-prefix:focus-within {
    border-color:    #E8472F;
}

.input-prefix {
    display:         flex;
    align-items:     center;
    padding:         0 0.75rem;
    background:      #FFFFFF;
    color:           var(--text-secondary, #64748B);
    font-size:       0.875rem;
    font-weight:     600;
    border-right:    1.5px solid var(--border, #E2E4E8);
    white-space:     nowrap;
    user-select:     none;
}

.input-with-prefix input {
    flex:            1;
    border:          none;
    outline:         none;
    padding:         0.6rem 0.75rem;
    font-family:     'IBM Plex Sans', sans-serif;
    font-size:       0.9375rem;
    font-weight:     500;
    color:           var(--text-primary, #0D1B2A);
    background:      transparent;
    min-width:       0;
}

.input-with-prefix input:read-only {
    background:      #FFFFFF;
    color:           var(--text-secondary, #64748B);
    cursor:          not-allowed;
}

/* ── Down payment row (amount + percent toggle) ──────────────────────────────── */
.dp-row {
    display:         flex;
    gap:             0.5rem;
    align-items:     stretch;
}

.dp-row .input-with-prefix {
    flex:            1;
}

.dp-pct-toggle {
    display:         flex;
    gap:             0;
    border:          1.5px solid var(--border, #E2E4E8);
    border-radius:   8px;
    overflow:        hidden;
    flex-shrink:     0;
}

.dp-pct-btn {
    padding:         0 0.8rem;
    border:          none;
    background:      #fff;
    color:           var(--text-secondary, #64748B);
    font-family:     'IBM Plex Sans', sans-serif;
    font-size:       0.8125rem;
    font-weight:     600;
    cursor:          pointer;
    transition:      background 0.15s, color 0.15s;
    border-right:    1px solid var(--border, #E2E4E8);
    white-space:     nowrap;
}

.dp-pct-btn:last-child {
    border-right:    none;
}

.dp-pct-btn.active {
    background:      #E8472F;
    color:           #fff;
}

/* ── Tenure slider ───────────────────────────────────────────────────────────── */
.tenure-row {
    display:         flex;
    align-items:     center;
    gap:             0.75rem;
}

.tenure-slider {
    flex:            1;
    -webkit-appearance: none;
    appearance:      none;
    height:          6px;
    border-radius:   3px;
    background:      #E8472F30;
    outline:         none;
    cursor:          pointer;
}

.tenure-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance:      none;
    width:           20px;
    height:          20px;
    border-radius:   50%;
    background:      #E8472F;
    cursor:          pointer;
    box-shadow:      0 1px 4px rgba(232,98,42,0.3);
}

.tenure-slider::-moz-range-thumb {
    width:           20px;
    height:          20px;
    border-radius:   50%;
    background:      #E8472F;
    cursor:          pointer;
    border:          none;
    box-shadow:      0 1px 4px rgba(232,98,42,0.3);
}

.tenure-num-input {
    width:           56px;
    border:          1.5px solid var(--border, #E2E4E8);
    border-radius:   8px;
    padding:         0.4rem 0.5rem;
    font-family:     'IBM Plex Sans', sans-serif;
    font-size:       0.9375rem;
    font-weight:     600;
    color:           var(--text-primary, #0D1B2A);
    text-align:      center;
    outline:         none;
}

.tenure-num-input:focus {
    border-color:    #E8472F;
}

.tenure-unit {
    font-size:       0.8125rem;
    font-weight:     600;
    color:           var(--text-secondary, #64748B);
    white-space:     nowrap;
}

/* ── Currency pills ──────────────────────────────────────────────────────────── */
.currency-pills {
    display:         flex;
    gap:             0.4rem;
    flex-wrap:       wrap;
    margin-bottom:   1.25rem;
}

.currency-pill {
    padding:         0.35rem 0.9rem;
    border-radius:   999px;
    border:          1.5px solid var(--border, #E2E4E8);
    background:      #fff;
    color:           var(--text-secondary, #64748B);
    font-family:     'IBM Plex Sans', sans-serif;
    font-size:       0.8125rem;
    font-weight:     600;
    cursor:          pointer;
    transition:      background 0.15s, color 0.15s, border-color 0.15s;
}

.currency-pill:hover {
    border-color:    #E8472F;
    color:           #E8472F;
}

.currency-pill.active {
    background:      #E8472F;
    border-color:    #E8472F;
    color:           #fff;
}

/* ── Calculate button ────────────────────────────────────────────────────────── */
.calc-btn {
    display:         block;
    width:           100%;
    padding:         0.85rem 1.5rem;
    background:      #E8472F;
    color:           #fff;
    border:          none;
    border-radius:   8px;
    font-family:     'IBM Plex Sans', sans-serif;
    font-size:       1rem;
    font-weight:     700;
    cursor:          pointer;
    transition:      background 0.15s, transform 0.1s;
    letter-spacing:  0.01em;
    margin-top:      0.5rem;
}

.calc-btn:hover {
    background:      #d4561f;
}

.calc-btn:active {
    transform:       scale(0.98);
}

/* ── Results panel ───────────────────────────────────────────────────────────── */
.results-panel {
    display:         none;
    margin-top:      2rem;
    border-top:      2px solid var(--border, #E2E4E8);
    padding-top:     1.75rem;
}

.results-panel.visible {
    display:         block;
}

.result-monthly {
    text-align:      center;
    margin-bottom:   1.5rem;
}

.result-monthly-label {
    font-size:       0.8125rem;
    font-weight:     600;
    color:           var(--text-secondary, #64748B);
    text-transform:  uppercase;
    letter-spacing:  0.08em;
    margin-bottom:   0.25rem;
}

.result-monthly-value {
    font-family:     'IBM Plex Serif', serif;
    font-size:       2.5rem;
    color:           #E8472F;
    line-height:     1.1;
}

.results-grid {
    display:         grid;
    grid-template-columns: repeat(3, 1fr);
    gap:             1rem;
    margin-bottom:   1.75rem;
}

@media (max-width: 600px) {
    .results-grid {
        grid-template-columns: 1fr;
    }
}

.result-stat {
    background:      #FFFFFF;
    border-radius:   10px;
    padding:         1rem;
    text-align:      center;
}

.result-stat-label {
    font-size:       0.75rem;
    font-weight:     600;
    color:           var(--text-secondary, #64748B);
    text-transform:  uppercase;
    letter-spacing:  0.06em;
    margin-bottom:   0.35rem;
}

.result-stat-value {
    font-family:     'IBM Plex Sans', sans-serif;
    font-size:       1.1rem;
    font-weight:     700;
    color:           var(--text-primary, #0D1B2A);
}

/* ── SVG Donut chart ─────────────────────────────────────────────────────────── */
.donut-chart-wrap {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             2rem;
    margin:          1.5rem 0;
    flex-wrap:       wrap;
}

.donut-svg {
    width:           160px;
    height:          160px;
    flex-shrink:     0;
}

.donut-legend {
    display:         flex;
    flex-direction:  column;
    gap:             0.6rem;
}

.donut-legend-item {
    display:         flex;
    align-items:     center;
    gap:             0.6rem;
    font-size:       0.875rem;
    font-weight:     500;
    color:           var(--text-primary, #0D1B2A);
}

.donut-legend-swatch {
    width:           14px;
    height:          14px;
    border-radius:   3px;
    flex-shrink:     0;
}

/* ── Amortisation table ──────────────────────────────────────────────────────── */
.amort-toggle-btn {
    display:         flex;
    align-items:     center;
    gap:             0.5rem;
    width:           100%;
    background:      none;
    border:          1.5px solid var(--border, #E2E4E8);
    border-radius:   8px;
    padding:         0.65rem 1rem;
    font-family:     'IBM Plex Sans', sans-serif;
    font-size:       0.875rem;
    font-weight:     600;
    color:           var(--text-primary, #0D1B2A);
    cursor:          pointer;
    transition:      border-color 0.15s;
    margin-bottom:   0.5rem;
}

.amort-toggle-btn:hover {
    border-color:    #E8472F;
    color:           #E8472F;
}

.amort-toggle-icon {
    margin-left:     auto;
    transition:      transform 0.2s;
    font-style:      normal;
    font-size:       1rem;
}

.amort-toggle-btn[aria-expanded="true"] .amort-toggle-icon {
    transform:       rotate(180deg);
}

.amort-table-wrap {
    overflow-x:      auto;
    border-radius:   10px;
    border:          1.5px solid var(--border, #E2E4E8);
    display:         none;
}

.amort-table-wrap.open {
    display:         block;
}

.amort-table {
    width:           100%;
    border-collapse: collapse;
    font-family:     'IBM Plex Sans', sans-serif;
    font-size:       0.8125rem;
}

.amort-table th {
    background:      #FFFFFF;
    padding:         0.6rem 0.9rem;
    text-align:      right;
    font-size:       0.75rem;
    font-weight:     700;
    color:           var(--text-secondary, #64748B);
    text-transform:  uppercase;
    letter-spacing:  0.05em;
    border-bottom:   1.5px solid var(--border, #E2E4E8);
    white-space:     nowrap;
}

.amort-table th:first-child {
    text-align:      center;
}

.amort-table td {
    padding:         0.55rem 0.9rem;
    text-align:      right;
    border-bottom:   1px solid #f0efec;
    color:           var(--text-primary, #0D1B2A);
    font-weight:     500;
    white-space:     nowrap;
}

.amort-table td:first-child {
    text-align:      center;
    font-weight:     700;
    color:           #E8472F;
}

.amort-table tr:last-child td {
    border-bottom:   none;
}

.amort-table tr:nth-child(even) td {
    background:      #fafaf9;
}

/* ── HDB callout box ─────────────────────────────────────────────────────────── */
.hdb-callout {
    background:      #fff4ee;
    border:          1.5px solid #f5cbb5;
    border-radius:   10px;
    padding:         1rem 1.25rem;
    margin-top:      1.25rem;
    font-size:       0.875rem;
    line-height:     1.6;
    color:           #7a3010;
    display:         none;
}

.hdb-callout.visible {
    display:         block;
}

.hdb-callout strong {
    color:           #c04b1a;
}

/* ── Finance disclaimer ──────────────────────────────────────────────────────── */
.finance-disclaimer {
    background:      #FFFFFF;
    border-left:     4px solid #E8472F;
    border-radius:   0 8px 8px 0;
    padding:         0.75rem 1rem;
    margin-top:      1.25rem;
    font-size:       0.78125rem;
    color:           var(--text-secondary, #64748B);
    line-height:     1.6;
}

/* ── Separator between inputs and results ────────────────────────────────────── */
.form-section-sep {
    height:          1px;
    background:      var(--border, #E2E4E8);
    margin:          1.25rem 0;
}

/* ── Input grid: two columns on desktop ──────────────────────────────────────── */
.input-grid-2 {
    display:         grid;
    grid-template-columns: 1fr 1fr;
    gap:             0 1.25rem;
}

@media (max-width: 540px) {
    .input-grid-2 {
        grid-template-columns: 1fr;
    }
}

/* cache-buster: 2026-05-24T05:06:05Z */