/* ═══════════════════════════════════════════
   personal.css  v2.0
   Page-specific styles for Personal Loan Calculator
   All shared design tokens/components live in calc-global.css
═══════════════════════════════════════════ */

/* ── Lender Rate Banner ── */
.pl-rate-banner {
    background: var(--navy-light);
    border: 1px solid rgba(13, 37, 69, .1);
    border-radius: var(--r-md);
    padding: .6rem 1rem;
    margin-bottom: 1.25rem;
}
.plrb-inner {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
}
.plrb-label {
    font-size: .72rem;
    font-weight: 700;
    color: var(--navy);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
}
.plrb-label i { color: var(--amber); }
.plrb-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.plrb-chip {
    background: var(--white);
    border: 1px solid var(--slate-line);
    border-radius: 20px;
    padding: .18rem .65rem;
    font-size: .69rem;
    font-weight: 600;
    color: var(--navy);
    white-space: nowrap;
}
.pl-chip-note {
    color: var(--slate);
    font-style: italic;
    font-weight: 500;
    background: transparent;
    border-color: transparent;
    padding-left: 0;
}

/* ── Rate badge accent for high rates ── */
.ig-tag.rate-high {
    background: #FEF2F2;
    color: #B91C1C;
}

/* ── Processing fee result item accent ── */
#rProcFee { color: var(--danger); }
#rNetDisbursal {
    font-size: .62rem;
    color: var(--slate);
    margin-top: 3px;
    font-weight: 400;
}

/* ════════════════════════════════════════════
   FEES SECTION REDESIGN
════════════════════════════════════════════ */

/* Section sub-heading inside accordion */
.fees-section-head {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .75rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: .65rem;
    flex-wrap: wrap;
}
.fees-section-sub {
    font-size: .68rem;
    font-weight: 400;
    color: var(--slate);
    margin-left: .15rem;
}

/* Percentage badge + range row */
.fee-pct-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: .35rem;
}
.fee-pct-badge {
    background: var(--navy);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    border-radius: 6px;
    padding: .18rem .45rem;
    min-width: 32px;
    text-align: center;
    flex-shrink: 0;
}
.fee-range { flex: 1; }

/* Smaller number input for fee sliders */
.fee-num-sm {
    width: 52px !important;
    min-width: 52px !important;
}

/* Contextual hint box */
.fee-hint {
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 8px;
    padding: .5rem .75rem;
    font-size: .7rem;
    color: #1E40AF;
    margin-top: .5rem;
    line-height: 1.5;
    display: flex;
    gap: .45rem;
    align-items: flex-start;
}
.fee-hint i {
    margin-top: .1rem;
    flex-shrink: 0;
    opacity: .7;
}

/* pl-fee-note stays small grey */
.pl-fee-note {
    display: block;
    font-size: .64rem;
    color: var(--slate);
    font-weight: 400;
    margin-top: .12rem;
}

/* ── Expand accordion height — global caps at 600px which clips the button ── */
#feesFields.open {
    max-height: 1400px !important;
    overflow: visible !important;
}

/* ── Apply / Add Lump-sum button — override global apply-btn ── */
#applyOnetimeBtn {
    width: 100% !important;
    padding: .82rem 1rem !important;
    margin-top: .75rem !important;
    border: none !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: .55rem !important;
    background: linear-gradient(135deg, var(--navy), #163a63) !important;
    color: #fff !important;
    font-size: .82rem !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 8px 18px rgba(13,37,69,.18), inset 0 1px 0 rgba(255,255,255,.08) !important;
    transition: transform .18s ease, box-shadow .2s ease !important;
    font-family: var(--font-body) !important;
    opacity: 1 !important;
    visibility: visible !important;
}
#applyOnetimeBtn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 24px rgba(13,37,69,.22), inset 0 1px 0 rgba(255,255,255,.08) !important;
}
#applyOnetimeBtn:active {
    transform: scale(.985) !important;
}

/* ── Fee hint: fix alignment — use block, not flex, for inline bold text ── */
.fee-hint {
    background: #EFF6FF !important;
    border: 1px solid #BFDBFE !important;
    border-radius: 8px !important;
    padding: .55rem .75rem !important;
    font-size: .7rem !important;
    color: #1E40AF !important;
    margin-top: .55rem !important;
    line-height: 1.6 !important;
    display: block !important;   /* block so inline <strong> wraps naturally */
}

/* ════════════════════════════════════════════
   PREPAYMENT IMPACT CARD
   Rendered by renderPrepayImpact() in personal.js
════════════════════════════════════════════ */
.prepay-impact-card {
    margin-top: 1rem;
}



/* Impact rows */
.pi-impact {
    padding: .6rem .9rem .75rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.pi-row {
    display: flex;
    align-items: flex-start;
    gap: .65rem;
}
.pi-row-icon {
    font-size: .95rem;
    flex-shrink: 0;
    margin-top: .05rem;
}
.pi-row-info {
    flex: 1;
    min-width: 0;
}
.pi-row-label {
    font-size: .72rem;
    font-weight: 600;
    color: var(--navy);
    line-height: 1.3;
}
.pi-row-sub {
    font-size: .63rem;
    color: var(--slate);
    margin-top: .1rem;
    line-height: 1.4;
}
.pi-time-saved {
    display: block;
    font-size: .63rem;
    color: var(--slate);
    margin-top: .1rem;
}
.pi-time-saved strong { color: #059669; }

.pi-row-val {
    font-weight: 800;
    font-size: .82rem;
    font-family: system-ui, sans-serif;
    white-space: nowrap;
    flex-shrink: 0;
    margin-top: .05rem;
}
.pi-val--green { color: #059669; }
.pi-val--red   { color: #DC2626; }

.pi-divider {
    height: 1px;
    background: #BBF7D0;
    margin: .1rem 0;
}

/* Net row highlighted */
.pi-row--net {
    background: #fff;
    border: 1.5px solid #6EE7B7;
    border-radius: 8px;
    padding: .5rem .65rem;
    margin: 0 -.1rem;
}
.pi-row--net .pi-row-label {
    font-size: .76rem;
    color: #064E3B;
}

/* ── Responsive ── */
@media (max-width: 700px) {
    .plrb-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: .4rem;
    }
    .pl-chip-note { display: none; }

    .pi-row-val { font-size: .76rem; }
}