/* ═══════════════════════════════════════════════════════════════════════════
 * stduent-loan-calc.css  —  Student Loan Calculator
 * Namespace: slc-*  |  No global class conflicts
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ── Wrap ────────────────────────────────────────────────────────────────── */
.slc-wrap {
    font-family: inherit;
    color: var(--clr-text-primary);
}

/* ── Plan Selector Bar ───────────────────────────────────────────────────── */
.slc-plan-bar {
    display: flex;
    gap: 4px;
    background: var(--clr-bg-muted);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 18px;
}

.slc-plan-btn {
    flex: 1;
    padding: 9px 12px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--clr-text-secondary);
    font-size: 0.845rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.17s, color 0.17s, box-shadow 0.17s;
    white-space: nowrap;
    text-align: center;
}

.slc-plan-btn:hover {
    background: var(--clr-bg);
    color: var(--clr-text-primary);
}

.slc-plan-btn--active {
    background: var(--clr-bg);
    color: var(--clr-accent-dark);
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

/* ── Common Inputs ───────────────────────────────────────────────────────── */
.slc-common-inputs {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.slc-row {
    display: grid;
    gap: 12px;
}

.slc-row--3 { grid-template-columns: repeat(3, 1fr); }
.slc-row--2 { grid-template-columns: repeat(2, 1fr); }

/* ── IDR Panel ───────────────────────────────────────────────────────────── */
.slc-idr-inputs {
    margin-top: 14px;
    border: 1.5px solid var(--clr-accent-hover);
    border-radius: 10px;
    padding: 12px 14px 14px;
    background: var(--clr-accent-light);
    display: none;
}

.slc-idr-inputs.slc-idr-visible {
    display: block;
}

.slc-idr-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--clr-accent-dark);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}

/* ── Field ───────────────────────────────────────────────────────────────── */
.slc-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.slc-label {
    font-size: 0.775rem;
    font-weight: 600;
    color: var(--clr-text-secondary);
    display: flex;
    align-items: center;
    gap: 5px;
}

.slc-hint {
    font-size: 0.69rem;
    font-weight: 400;
    color: var(--clr-text-muted);
}

.slc-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.slc-input-wrap--select::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--clr-text-muted);
    pointer-events: none;
}

.slc-prefix, .slc-suffix {
    position: absolute;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--clr-text-muted);
    pointer-events: none;
    z-index: 1;
}

.slc-prefix { left: 10px; }
.slc-suffix { right: 10px; }

.slc-input {
    width: 100%;
    padding: 8px 10px;
    border: 1.5px solid var(--clr-border);
    border-radius: 7px;
    background: var(--clr-bg);
    color: var(--clr-text-primary);
    font-size: 0.875rem;
    font-weight: 500;
    transition: border-color 0.17s, box-shadow 0.17s;
    -moz-appearance: textfield;
    appearance: textfield;
    min-width: 0;
}

.slc-input::-webkit-inner-spin-button,
.slc-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.slc-input--pre { padding-left: 24px; }
.slc-input--suf { padding-right: 28px; }

.slc-input:focus {
    outline: none;
    border-color: var(--clr-accent);
    box-shadow: var(--shadow-focus);
}

.slc-select {
    padding-right: 28px;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.slc-desc {
    font-size: 0.695rem;
    color: var(--clr-text-muted);
    line-height: 1.3;
}

/* ── Actions ─────────────────────────────────────────────────────────────── */
.slc-actions {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.slc-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.17s, box-shadow 0.17s, transform 0.1s;
}

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

.slc-btn--primary {
    background: var(--clr-accent);
    color: #fff;
    box-shadow: 0 2px 8px rgba(14,165,233,.22);
}
.slc-btn--primary:hover {
    background: var(--clr-accent-dark);
    box-shadow: 0 4px 14px rgba(14,165,233,.32);
}

.slc-btn--ghost {
    background: var(--clr-bg-muted);
    color: var(--clr-text-secondary);
    border: 1.5px solid var(--clr-border);
}
.slc-btn--ghost:hover {
    background: var(--clr-bg-soft);
    color: var(--clr-text-primary);
}

/* ── Results ─────────────────────────────────────────────────────────────── */
.slc-results {
    margin-top: 20px;
    border-top: 1.5px solid var(--clr-border-soft);
    padding-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Plan badge */
.slc-plan-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    background: var(--clr-accent-light);
    color: var(--clr-accent-dark);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    align-self: flex-start;
}

/* ── Metrics ─────────────────────────────────────────────────────────────── */
.slc-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.slc-metric {
    background: var(--clr-bg-soft);
    border: 1.5px solid var(--clr-border);
    border-radius: 10px;
    padding: 12px 11px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.slc-metric--accent {
    background: var(--clr-accent-light);
    border-color: var(--clr-accent-hover);
}

.slc-metric-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--clr-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.slc-metric-val {
    font-size: 1.18rem;
    font-weight: 800;
    color: var(--clr-text-primary);
    line-height: 1.15;
}

.slc-metric--accent .slc-metric-val {
    color: var(--clr-accent-dark);
}

.slc-metric-sub {
    font-size: 0.67rem;
    color: var(--clr-text-muted);
    line-height: 1.2;
}

/* ── Savings Banner ──────────────────────────────────────────────────────── */
.slc-savings-banner,
.slc-forgiveness-banner {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 13px;
    border-radius: 9px;
    font-size: 0.815rem;
    line-height: 1.4;
    font-weight: 500;
}

.slc-savings-banner {
    background: #f0fdf4;
    border: 1.5px solid #86efac;
    color: #166534;
}

.slc-forgiveness-banner {
    background: var(--clr-warning-bg);
    border: 1.5px solid var(--clr-warning-brd);
    color: var(--clr-warning-text);
}

.slc-savings-banner svg,
.slc-forgiveness-banner svg { flex-shrink: 0; margin-top: 1px; }

/* ── Breakdown Bar ───────────────────────────────────────────────────────── */
.slc-breakdown {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.slc-breakdown-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--clr-text-muted);
}

.slc-bar {
    display: flex;
    height: 10px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--clr-bg-muted);
}

.slc-bar-p {
    background: var(--clr-accent);
    transition: width 0.5s ease;
    border-radius: 6px 0 0 6px;
}

.slc-bar-i {
    background: var(--clr-interest);
    transition: width 0.5s ease;
    flex: 1;
    border-radius: 0 6px 6px 0;
}

/* ── Chart ───────────────────────────────────────────────────────────────── */
.slc-chart-wrap {
    border: 1.5px solid var(--clr-border);
    border-radius: 10px;
    overflow: hidden;
}

.slc-chart-title {
    background: var(--clr-bg-muted);
    padding: 8px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--clr-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1.5px solid var(--clr-border);
}

.slc-canvas-wrap {
    padding: 12px 14px;
    background: var(--clr-bg);
    position: relative;
    height: 170px;
}

.slc-canvas-wrap canvas {
    max-height: 146px;
}

/* ── Plan Comparison Table ───────────────────────────────────────────────── */
.slc-compare {
    border: 1.5px solid var(--clr-border);
    border-radius: 10px;
    overflow: hidden;
}

.slc-compare-hdr {
    background: var(--clr-bg-muted);
    padding: 8px 14px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--clr-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: 1.5px solid var(--clr-border);
}

.slc-compare-grid {
    background: var(--clr-bg);
}

.slc-compare-row {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.2fr 1.2fr;
    gap: 6px;
    padding: 9px 14px;
    font-size: 0.81rem;
    color: var(--clr-text-secondary);
    border-bottom: 1px solid var(--clr-border-soft);
    align-items: center;
}

.slc-compare-row:last-child { border-bottom: none; }

.slc-compare-row--head {
    background: var(--clr-bg-soft);
    font-size: 0.69rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--clr-text-muted);
    padding: 7px 14px;
}

.slc-compare-row span:not(:first-child) {
    font-weight: 600;
    color: var(--clr-text-primary);
    text-align: right;
}

.slc-compare-row--head span { text-align: right; color: var(--clr-text-muted); font-weight: 700; }
.slc-compare-row--head span:first-child { text-align: left; }

.slc-compare-row .slc-cmp-name { font-weight: 600; color: var(--clr-text-primary); display: flex; align-items: center; gap: 5px; }

.slc-cmp-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--clr-bg-muted);
    color: var(--clr-text-muted);
}

/* Active plan row highlight */
.slc-compare-row--active {
    background: var(--clr-accent-light);
    border-left: 3px solid var(--clr-accent);
}

.slc-compare-row--active .slc-cmp-badge {
    background: var(--clr-accent-hover);
    color: var(--clr-accent-dark);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 680px) {
    .slc-row--3 { grid-template-columns: 1fr 1fr; }
    .slc-row--3 .slc-field:last-child { grid-column: 1 / -1; }
    .slc-row--2 { grid-template-columns: 1fr; }
    .slc-metrics { grid-template-columns: repeat(2, 1fr); }

    .slc-compare-row {
        grid-template-columns: 1.4fr 1fr 1fr;
    }
    /* Hide Total Cost column on mobile */
    .slc-compare-row > span:nth-child(4),
    .slc-compare-row--head > span:nth-child(4) { display: none; }
}

@media (max-width: 420px) {
    .slc-plan-btn { font-size: 0.78rem; padding: 8px 8px; }
    .slc-row--3 { grid-template-columns: 1fr; }
    .slc-metrics { grid-template-columns: repeat(2, 1fr); }
    .slc-metric-val { font-size: 1.05rem; }

    .slc-compare-row {
        grid-template-columns: 1fr 1fr;
        padding: 8px 10px;
        gap: 4px;
    }
    .slc-compare-row > span:nth-child(3),
    .slc-compare-row > span:nth-child(4),
    .slc-compare-row--head > span:nth-child(3),
    .slc-compare-row--head > span:nth-child(4) { display: none; }
}