/* ==========================================
   LOAN / EMI CALCULATOR - CLEAN VERSION
========================================== */

.loan-page{
    max-width:1320px;
    margin:45px auto 70px;
    padding:20px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:35px;
    align-items:stretch;
}

.loan-card,
.loan-result-card{
    min-height:520px;
}

.loan-card,
.loan-result-card,
.loan-info{
    background:var(--tool-card-bg);
    color:var(--tool-text);

    border:
        1px solid
        var(--tool-border);

    border-radius:24px;

    box-shadow:
        var(--tool-shadow);

    padding:35px;
}

.loan-card h1,
.loan-result-card h2,
.loan-info h2{
    color:#10b981;
    text-align:center;
}

.loan-subtitle{
    text-align:center;
    color:var(--tool-muted);
    margin-bottom:28px;
    line-height:1.6;
}

.loan-card label{
    display:block;
    font-weight:700;
    margin-bottom:8px;
}

.loan-card input,
.loan-card select{
    width:100%;
    padding:15px 16px;
    font-size:16px;

    background:var(--tool-input-bg);
    color:var(--tool-input-text);

    border:1px solid var(--tool-border);
    outline:none;
    margin-bottom:20px;
}

.loan-card input::placeholder{
    color:var(--tool-muted);
    opacity:.75;
}

.loan-card input:focus,
.loan-card select:focus{
    border-color:#10b981;
    box-shadow:0 0 0 4px rgba(16,185,129,.18);
}

.loan-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    margin-top:24px;
}

.loan-actions button{
    border:none;
    border-radius:14px;
    padding:15px 20px;
    font-size:16px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
}

.loan-actions button:first-child{
    background:#10b981;
    color:white;
}

.loan-actions button:last-child,
.clear-btn{
    background:#334155 !important;
    color:white;
}

.loan-actions button:hover{
    transform:translateY(-2px);
}

.loan-result{
    min-height:210px;

    background:var(--tool-result-bg);
    color:var(--tool-text);

    border:2px dashed var(--tool-result-border);
    border-radius:20px;
    padding:28px;
}

.loan-result.active{
    display:block;
    text-align:left;
}

.result-line{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:13px 0;

    border-bottom:
        1px solid
        var(--tool-result-border);

    font-weight:700;
}

.result-line strong{
    color:#10b981;
    text-align:right;
}

.loan-bars{
    margin-top:28px;
}

.bar-row{
    margin-bottom:20px;
    font-weight:700;
}

.bar-row span{
    display:block;
    margin-bottom:8px;
}

.bar-bg{
    width:100%;
    height:16px;
    background:var(--tool-border);
    border-radius:50px;
    overflow:hidden;
}

.bar{
    height:100%;
    width:0%;
    border-radius:50px;
    transition:width .8s ease;
}

.principal-bar{
    background:#10b981;
}

.interest-bar{
    background:#f59e0b;
}

.loan-info{
    max-width:1200px;
    margin:0 auto 50px;
    line-height:1.7;
}

/* RESPONSIVE */

@media(max-width:900px){
    .loan-page{
        grid-template-columns:1fr;
        padding:25px 15px;
    }

    .loan-actions{
        grid-template-columns:1fr;
    }

    .result-line{
        flex-direction:column;
        align-items:flex-start;
        gap:5px;
    }
}
/* RELATED TOOLS - FINAL FIX */

#related-tools-section{
    max-width:1000px;
    margin:70px auto 50px;
    padding:20px;
}

#relatedTools{
    display:grid !important;
    grid-template-columns:repeat(4, 1fr) !important;
    gap:20px !important;
}

#relatedTools .tool-card{
    background:#1d2d44 !important;
    border:1px solid #2f4058 !important;
    border-radius:18px !important;
    padding:18px !important;
    text-align:left !important;
}

#relatedTools .tool-card a{
    display:inline-block !important;
    margin-top:14px !important;
    padding:9px 16px !important;
    background:#10b981 !important;
    color:white !important;
    border-radius:999px !important;
    text-decoration:none !important;
    font-weight:700 !important;
}

@media(max-width:1000px){
    #relatedTools{
        grid-template-columns:repeat(1, 1fr) !important;
    }
}

@media(max-width:600px){
    #relatedTools{
        grid-template-columns:1fr !important;
    }
}
/* ======================================
   LOAN NUMBER WORDS
   ====================================== */

.loan-result-item{
    display:grid;
    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:4px 12px;
    align-items:center;
}

.loan-result-item strong{
    font-variant-numeric:
        tabular-nums;

    text-align:right;
}

.loan-number-words{
    grid-column:1 / -1;

    display:block;
    margin-top:4px;
    padding:8px 10px;

    border:
        1px solid
        var(--tool-words-border);

    border-radius:8px;

    background:
        var(--tool-words-bg);

    color:
        var(--tool-words-text);

    font-size:.76rem;
    font-weight:600;
    line-height:1.45;
    text-align:center;

    overflow-wrap:anywhere;
}