/* public/css/calculators/credit-card-payoff-calculator.css
   Page-specific styles for the credit card payoff calculator. Loaded after
   loan-calculator.css, which supplies the shared panel/result styling. */

.payoff-scroll {
    max-height: 480px;
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
}

.payoff-table,
.payoff-compare-table {
    margin-bottom: 0;
    font-variant-numeric: tabular-nums;
}

.payoff-table {
    white-space: nowrap;
}

.payoff-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    box-shadow: inset 0 -1px 0 var(--bs-border-color, #dee2e6);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
    font-weight: 600;
}

.payoff-compare-table thead th {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #6c757d;
    font-weight: 600;
    white-space: nowrap;
}

.payoff-compare-table td {
    font-size: .9rem;
}

.chart-box {
    position: relative;
    height: 320px;
}

@media print {
    .payoff-scroll { max-height: none; overflow: visible; border: 0; }
    .sticky-mobile-total,
    .page-header .breadcrumb,
    #calcTabs,
    .related-calculators-plain,
    .quick-tips { display: none !important; }
}

@media (max-width: 575.98px) {
    .payoff-compare-table td,
    .payoff-compare-table th { font-size: .8rem; padding: .4rem .35rem; }
    .payoff-scroll { max-height: 400px; }
}