/* kalkulator.css: styles for the mortgage vs. cash calculator only
   (the shared theme lives in ../wspolne/style.css) */

/* A/B badges: same colours as the strategy lines on the chart */
.badge {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    border-radius: 6px;
    text-align: center;
    font-size: 14px;
    font-weight: 700;
    margin-right: 10px;
    vertical-align: middle;
}

.badge-a { background: #6d4aff; color: #ffffff; }
.badge-b { background: #6cd0a5; color: #13111f; }

.param-section.strategy-a { border-left: 3px solid #6d4aff; padding-left: 14px; }
.param-section.strategy-b { border-left: 3px solid var(--green); padding-left: 14px; }
.param-section.strategy-b h3 { color: var(--green); }

.kpi-card.highlight { grid-column: 1 / -1; }   /* winner card spans the full width */

.kpi-card.kpi-a { border-top: 3px solid #6d4aff; }
.kpi-card.kpi-b { border-top: 3px solid var(--green); }

/* Chart legend: A/B groups in the colours of the strategies */
.legend-group.legend-a { border-top: 3px solid #6d4aff; }
.legend-group.legend-b { border-top: 3px solid var(--green); }
.legend-a .legend-title { color: var(--accent-soft); }
.legend-b .legend-title { color: var(--green); }

.results-table th.col-a { color: var(--accent-soft); }
.results-table th.col-b { color: var(--green); }

.results-table tr.gain td {
    color: var(--text-muted);
    border-bottom: none;
}

.results-table tr.baseline td {
    font-weight: 600;
    color: var(--text);
}

.results-table tr.reversed td {
    background: rgba(255, 159, 110, 0.10);
}

.what-if td:nth-child(2),
.what-if th:nth-child(2) {
    text-align: center;
}

.badge.badge-small {
    width: 20px;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    margin-right: 0;
}

.text-a { color: var(--accent-soft); }
.text-b { color: var(--green); }

/* Checkbox in section B (e.g. "living with parents") keeps the B colour */
.strategy-b .param-option input {
    accent-color: var(--green);
}