/* =====================================
   RAGO SOFTWARE THEME
===================================== */

:root{

    --bg:#020817;
    --card:#071427;
    --card2:#0b1730;

    --border:rgba(255,255,255,.08);

    --text:#ffffff;
    --muted:#94a3b8;

    --primary:#7c3aed;
    --primary2:#2563eb;

    --radius:22px;

}

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}

body{

    background:
    radial-gradient(circle at top left,
    rgba(124,58,237,.15),
    transparent 40%),

    radial-gradient(circle at top right,
    rgba(37,99,235,.15),
    transparent 40%),

    var(--bg);

    color:var(--text);

    font-family:
    Inter,
    Segoe UI,
    sans-serif;

    min-height:100vh;

}

.loan-card{

    background:
    linear-gradient(
    180deg,
    rgba(12,20,40,.95),
    rgba(5,12,25,.95)
    );

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

    border-radius:24px;

    padding:24px;

    backdrop-filter:blur(14px);

    box-shadow:
    0 10px 40px rgba(0,0,0,.30);

}

.loan-header{

    padding:18px 24px;

    border-radius:20px;

    background:rgba(10,20,40,.75);

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

    backdrop-filter:blur(12px);

}

.loan-icon{

    width:58px;
    height:58px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:24px;

    background:
    linear-gradient(
    135deg,
    var(--primary),
    var(--primary2)
    );

}

.step{

    width:42px;
    height:42px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-weight:700;

    background:
    linear-gradient(
    135deg,
    var(--primary),
    var(--primary2)
    );

}

.card-header{

    display:flex;

    align-items:center;

    gap:14px;

    margin-bottom:22px;

}

.card-header span{

    color:var(--muted);

    font-size:13px;

}

.form-grid{

    display:grid;

    grid-template-columns:200px 1fr;

    gap:18px 30px;

    align-items:center;

}

.form-grid input,
.form-grid select,
textarea{

    width:100%;

    height:52px;

    border-radius:14px;

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

    background:#0c1930;

    color:#fff;

    padding:0 14px;

}

.emi-result{

    text-align:center;

    padding:28px;

    border-radius:20px;

    margin-bottom:20px;

    background:
    linear-gradient(
    135deg,
    rgba(124,58,237,.15),
    rgba(37,99,235,.15)
    );

}

#emiValue{

    font-size:46px;

    font-weight:800;

    color:#a855f7;

}

.result-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:14px;

}

.result-box{

    background:#0c1930;

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

    border-radius:16px;

    padding:18px;

}

.result-box strong{

    display:block;

    margin-top:8px;

    font-size:20px;

}

button{

    border:none;

    color:#fff;

    cursor:pointer;

    border-radius:12px;

    padding:12px 18px;

    background:
    linear-gradient(
    135deg,
    var(--primary),
    var(--primary2)
    );

}

.section-title{

    color:#ff8c00;

    margin:20px 0 12px;

}








/* =====================================
   RESULT SECTION HIGHLIGHT
===================================== */

.result-grid{

    margin-top:24px;

    padding:20px;

    border-radius:20px;

    background:
    linear-gradient(
    135deg,
    rgba(124,58,237,.08),
    rgba(37,99,235,.08)
    );

    border:1px solid rgba(124,58,237,.20);

}

.result-box{

    background:
    linear-gradient(
    180deg,
    #13203c,
    #0f1a31
    );

    border:1px solid rgba(124,58,237,.25);

    box-shadow:
    0 0 20px rgba(124,58,237,.08);

}




/* RESULT VALUE COLOR */

.result-box strong{

    display:block;

    margin-top:8px;

    font-size:20px;

    font-weight:800;

    color:#a855f7;

}

















/* =====================================
   WRAPPER
===================================== */

.loan-app{

    width:100%;

    padding:20px;

}

.loan-wrapper{

    max-width:1600px;

    margin:auto;

}


/* =====================================
   HEADER
===================================== */

.loan-header{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:24px;

}

.loan-title{

    display:flex;

    align-items:center;

    gap:15px;

}

.header-tools{

    margin-left:auto;

}

.loan-actions{

    flex-shrink:0;

}


/* =====================================
   TOP GRID
===================================== */

.loan-top-grid{

    display:grid;

    grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr);

    gap:24px;

    margin-bottom:24px;

}


/* =====================================
   CALCULATOR CARD
===================================== */

.calculator-card{

    width:100%;

}


/* =====================================
   CUSTOMER CARD
===================================== */

.customer-card{

    width:100%;

}


/* =====================================
   BOTTOM GRID
===================================== */

.loan-bottom-grid{

    display:grid;

    grid-template-columns:
    minmax(0,1fr)
    minmax(0,1fr);

    gap:24px;

    align-items:start;

}


/* =====================================
   CHART CARD
===================================== */
.chart-card,
.preview-card{

    min-height:380px;

}
/* =====================================
   PIE CHART
===================================== */

#loanPieChart{

    width:240px !important;
    height:240px !important;

    max-width:240px;
    max-height:240px;

    display:block;
    margin:auto;

}












#lenderAddress{

    width:100%;

    min-height:64px;

    padding:18px 16px;

    line-height:1.5;

    resize:vertical;

}









.field-group{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.field-label{

    font-size:12px;

    font-weight:700;

    color:#94a3b8;

    letter-spacing:.5px;

    text-transform:uppercase;

    padding-left:12px;

}












/* =====================================
   CALCULATOR CARD
===================================== */

.calculator-card{

    position:relative;

}


/* =====================================
   CURRENCY DROPDOWN
===================================== */

.currency-selector-wrap{

    position:absolute;

    top:24px;

    right:24px;

    z-index:10;

}






.currency-selector-wrap select{

    width:220px;

    height:44px;

    border-radius:12px;

    border:1px solid rgba(255,255,255,.08);

    background:#0c1930;

    color:#fff;

    padding:0 12px;

}






/* =====================================
   TENURE TITLE
===================================== */

.tenure-title{

    margin-top:6px;

    margin-bottom:-4px;
    

    color:#a855f7;

    font-size:15px;

    font-weight:700;

    letter-spacing:.5px;

}




















/* =====================================
   HEADER SPACE FOR DROPDOWN
===================================== */

.card-header{

    padding-right:260px;

}










/* =====================================
   FORM GRID SPACING
===================================== */

.form-grid{

    margin-bottom:24px;

}

/* =====================================
   PROCESSING FEE FULL WIDTH
===================================== */

#processingFee{

    grid-column:1 / -1;

}








/* =====================================
   BASELIGHT STYLE SLIDER
===================================== */

.loan-slider{

    -webkit-appearance:none;

    appearance:none;

    width:100%;

    height:3px;

    margin:0;

    padding:0;

    align-self:center;

    background:linear-gradient(
        90deg,
        #7c3aed,
        #2563eb
    );

    border-radius:20px;

    box-shadow:
    0 0 10px rgba(124,58,237,.50),
    0 0 20px rgba(37,99,235,.30);

    outline:none;

    cursor:pointer;

}


/* =====================================
   THUMB
===================================== */

.loan-slider::-webkit-slider-thumb{

    -webkit-appearance:none;

    width:16px;

    height:16px;

    border-radius:50%;

    background:#ffffff;

    border:2px solid #7c3aed;

    cursor:pointer;

    box-shadow:
    0 0 10px rgba(124,58,237,.70),
    0 0 20px rgba(37,99,235,.50);

}

.loan-slider::-moz-range-thumb{

    width:16px;

    height:16px;

    border-radius:50%;

    background:#ffffff;

    border:2px solid #7c3aed;

    cursor:pointer;

    box-shadow:
    0 0 10px rgba(124,58,237,.70),
    0 0 20px rgba(37,99,235,.50);

}


/* =====================================
   HOVER
===================================== */

.loan-slider:hover{

    box-shadow:
    0 0 14px rgba(124,58,237,.80),
    0 0 24px rgba(37,99,235,.60);

}













.tenure-title{

    grid-column:1 / -1;

    color:#a855f7;

    font-size:15px;

    font-weight:700;

    margin:10px 0 0;

}

/* =====================================
   THUMB
===================================== */

.loan-slider::-webkit-slider-thumb{

    -webkit-appearance:none;

    width:14px;

    height:14px;

    border-radius:50%;

    background:#d1d5db;

    border:2px solid #ffffff;

    cursor:pointer;

    box-shadow:
    0 0 10px rgba(255,255,255,.5),
    0 0 20px rgba(124,58,237,.4);

}

.loan-slider::-moz-range-thumb{

    width:14px;

    height:14px;

    border-radius:50%;

    background:#d1d5db;

    border:2px solid #ffffff;

    box-shadow:
    0 0 10px rgba(255,255,255,.5),
    0 0 20px rgba(124,58,237,.4);

}


/* =====================================
   HOVER
===================================== */

.loan-slider:hover{

    box-shadow:
    0 0 12px rgba(124,58,237,.7),
    0 0 20px rgba(37,99,235,.5);

}









/* =====================================
   REPORT HEADER
===================================== */

.report-header{

    text-align:center;

    padding-bottom:20px;

    border-bottom:2px solid #e5e7eb;

    margin-bottom:20px;

}

/* REPORT TITLE */

.report-header h2{

    margin:0;

    font-size:28px;

    color:#123caa;

    font-weight:700;

}

/* GENERATED TEXT */

.report-header span{

    color:#6b7280;

    font-size:13px;

}


/* =====================================
   REPORT BODY
===================================== */

.report-section{

    margin-top:15px;

}


/* =====================================
   REPORT ROW
===================================== */

.report-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 0;

    border-bottom:1px solid #e5e7eb;

}


/* LEFT LABEL */

.report-row span{

    color:#4b5563;

    font-size:14px;

}


/* RIGHT VALUE */

.report-row strong{

    color:#123caa;

    font-size:16px;

    font-weight:700;

}


/* =====================================
   REPORT FOOTER
===================================== */

.report-footer{

    margin-top:40px;

    text-align:center;

    font-size:12px;

    color:#6b7280;

}









/* =====================================
   LIVE REPORT PREVIEW
===================================== */
.preview-window{

    width:100%;

    height:600px;

}

.loan-preview-frame{

    width:100%;

    height:100%;

    border:none;

    display:block;

}









/* =====================================
   REPORT HEADER
===================================== */

.report-header{

    text-align:center;

    padding-bottom:24px;

    margin-bottom:30px;

    border-bottom:3px solid #2563eb;

}

.report-header h2{

    margin:0;

    font-size:30px;

    font-weight:800;

    letter-spacing:1px;

    color:#123caa;

    text-transform:uppercase;

}

.report-header p{

    margin-top:8px;

    color:#64748b;

    font-size:14px;

}


/* =====================================
   REPORT ROWS
===================================== */

.report-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:16px 0;

    border-bottom:1px solid #e5e7eb;

}

.report-row span{

    font-size:15px;

    color:#64748b;

    font-weight:500;

}

.report-row strong{

    font-size:17px;

    font-weight:700;

    color:#123caa;

}


/* =====================================
   HOVER EFFECT
===================================== */

.report-row:hover{

    background:#f8fbff;

}


/* =====================================
   PREMIUM SUMMARY BAR
===================================== */

.report-header::after{

    content:'Advanced EMI & Repayment Planner';

    display:block;

    margin-top:10px;

    color:#94a3b8;

    font-size:12px;

    letter-spacing:1px;

}


/* =====================================
   FOOTER
===================================== */

.report-footer{

    margin-top:40px;

    text-align:center;

    color:#94a3b8;

    font-size:12px;

}


/* =====================================
   GLASS LOOK INSIDE PREVIEW
===================================== */

.preview-window{

    background:
    linear-gradient(
        135deg,
        rgba(37,99,235,.08),
        rgba(124,58,237,.08)
    );

}















/* =========================
LOGO + DATE ROW
========================= */

.lender-top-row{

    display:grid;
    grid-template-columns:1fr 1fr;

    gap:24px;

    margin:18px 0 24px;

    align-items:stretch;

}


/* =========================
COMMON CARD
========================= */

.logo-upload-wrap,
.loan-date-wrap{

    height:150px;

    border-radius:20px;

    padding:20px 24px;

    box-sizing:border-box;

    display:flex;

    flex-direction:column;

    justify-content:center;

    position:relative;

    overflow:hidden;

    transition:.3s ease;

}


/* =========================
LOGO CARD
========================= */

.logo-upload-wrap{

    border:1px dashed rgba(168,85,247,.45);

    background:
    linear-gradient(
        180deg,
        rgba(124,58,237,.10),
        rgba(124,58,237,.03)
    );

    align-items:center;

    text-align:center;

    gap:10px;

}

.logo-upload-wrap:hover{

    border-color:#a855f7;

    box-shadow:
    0 0 20px rgba(168,85,247,.18);

}


/* ICON */

.logo-icon{

    font-size:34px;

    color:#a855f7;

    line-height:1;

}


/* TITLE */

.logo-placeholder{

    color:#a855f7;

    font-size:18px;

    font-weight:700;

    margin:0;

}


/* SUBTITLE */

.logo-subtitle{

    font-size:12px;

    color:#94a3b8;

    margin-top:-4px;

}


/* FILE INPUT */

#lenderLogo{

    width:100%;

    max-width:240px;

    padding:8px;

    border-radius:12px;

    background:#0c1930;

    border:1px solid rgba(255,255,255,.08);

    color:#fff;

}


/* =========================
DATE CARD
========================= */

.loan-date-wrap{

    border:1px dashed rgba(37,99,235,.45);

    background:
    linear-gradient(
        180deg,
        rgba(37,99,235,.10),
        rgba(37,99,235,.03)
    );

}

.loan-date-wrap:hover{

    border-color:#60a5fa;

    box-shadow:
    0 0 20px rgba(37,99,235,.18);

}


/* DATE HEADER */

.date-title{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:12px;

}


/* DATE ICON */

.date-icon{

    font-size:26px;

    color:#60a5fa;

    line-height:1;

}


/* DATE LABEL */

.loan-date-wrap label{

    color:#60a5fa;

    font-size:18px;

    font-weight:700;

    margin:0;

}


/* DATE INPUT */

.loan-date-wrap input{

    width:100%;

    height:50px;

    border-radius:14px;

    border:1px solid rgba(255,255,255,.08);

    background:#0c1930;

    color:#ffffff;

    padding:0 16px;

}











.logo-icon{

    width:58px;
    height:58px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0 auto 10px;

    border-radius:50%;

    background:rgba(168,85,247,.12);

    border:1px solid rgba(168,85,247,.30);

}

.logo-icon i{

    font-size:28px;

    color:#a855f7;

}



















.chart-summary{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
    margin-bottom:20px;

}

.chart-item{

    padding:14px;
    border-radius:14px;
    background:#101c35;
    border:1px solid rgba(255,255,255,.08);

}

.chart-item strong{

    display:block;
    margin:6px 0;
    font-size:20px;
    font-weight:700;

}

.chart-item.principal strong{

    color:#a855f7;

}

.chart-item.interest strong{

    color:#3b82f6;

}

















.chart-card{

    position:relative;

}

.chart-arrow{

    position:absolute;

    font-size:80px;

    font-weight:100;

    color:#ffd400;

    line-height:1;

    pointer-events:none;

    animation:
    arrowHeartbeat 1.2s ease-in-out infinite;

    text-shadow:
    0 0 10px #ffd400,
    0 0 20px #ffd400,
    0 0 40px #ffae00,
    0 0 70px #ffae00;

    z-index:10;

}

/* LEFT ARROW */

.arrow-left{

    left:120px;

    top:200px;

    rotate:10deg;

}

/* RIGHT ARROW */

.arrow-right{

    right:120px;

    top:200px;

    rotate:-10deg;

}


/* HEARTBEAT GLOW */

@keyframes arrowHeartbeat{

    0%{

        scale:1;

        opacity:.7;

    }

    25%{

        scale:1.15;

        opacity:1;

    }

    50%{

        scale:1.35;

        opacity:1;

        text-shadow:
        0 0 20px #ffd400,
        0 0 40px #ffd400,
        0 0 80px #ffae00,
        0 0 120px #ffae00;

    }

    75%{

        scale:1.15;

        opacity:1;

    }

    100%{

        scale:1;

        opacity:.7;

    }

}












.loan-breakdown{

    margin-top:20px;

    border-radius:16px;

    overflow:hidden;

    border:1px solid rgba(255,255,255,.08);

    background:#101c35;

}

.break-row{

    display:grid;

    grid-template-columns:
    1fr auto auto;

    gap:20px;

    align-items:center;

    padding:16px 18px;

    border-bottom:1px solid
    rgba(255,255,255,.06);

}

.break-row:last-child{

    border-bottom:none;

}

.break-row span{

    color:#dbe4ff;

}

.break-row strong{

    font-size:24px;

    font-weight:700;

}

.break-row small{

    color:#9ca3af;

}

#breakPrincipal{

    color:#a855f7;

}

#breakInterest{

    color:#3b82f6;

}

#breakTotal{

    color:#fbbf24;

}

.total-row{

    background:
    rgba(255,255,255,.02);

}
























.tenure-label{

    grid-column:1 / -1;

    font-size:11px;

    font-weight:300;

   color:#fff;

   

    letter-spacing:2px;

    margin-top:-15px;

    margin-bottom:10px;

    padding-left:10px;

}






















/* =========================
MOBILE
========================= */

@media(max-width:768px){

    .lender-top-row{

        grid-template-columns:1fr;

        gap:16px;

    }

    .logo-upload-wrap,
    .loan-date-wrap{

        height:auto;

        min-height:140px;

    }

}













































/* =====================================
   TABLET
===================================== */

@media (max-width:1024px){

    .loan-app{

        padding:16px;

    }

    .loan-top-grid,
    .loan-bottom-grid{

        grid-template-columns:1fr;

        gap:20px;

    }

    .loan-header{

        flex-wrap:wrap;

        gap:15px;

    }

    .header-tools{

        margin-left:0;

    }

    .chart-card,
    .preview-card{

        min-height:auto;

    }

    #loanPieChart{

        width:220px !important;

        height:220px !important;

        max-width:220px;

        max-height:220px;

    }

    .preview-window{

        height:380px;

        overflow:hidden;

        display:flex;

        justify-content:center;

        align-items:flex-start;

    }

    .a4-page{

        transform:scale(.34);

        transform-origin:top center;

        margin-top:-90px;

    }

}







/* =====================================
   MOBILE
===================================== */

@media (max-width:768px){

    .loan-app{

        padding:12px;

    }

    .loan-card{

        padding:18px;

        border-radius:18px;

    }

    .loan-header{

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

    }

    .loan-title{

        width:100%;

    }

    .header-tools{

        width:100%;

        display:grid;

        grid-template-columns:repeat(2,1fr);

        gap:10px;

    }

    .header-tools button{

        width:100%;

    }

    .loan-actions{

        width:100%;

    }

    .loan-actions button{

        width:100%;

    }

    .form-grid{

        grid-template-columns:1fr;

    }

    .result-grid{

        grid-template-columns:1fr;

    }

    #emiValue{

        font-size:34px;

    }

    #loanPieChart{

        width:260px !important;

        height:260px !important;

        max-width:260px;

        max-height:260px;

    }

  

    .a4-page{

        transform:scale(.28);

        transform-origin:top center;

        margin-top:-120px;

    }

}


/* =====================================
   SMALL MOBILE
===================================== */

@media (max-width:480px){

    .loan-app{

        padding:8px;

    }

    .loan-card{

        padding:15px;

    }

    .loan-title h2{

        font-size:22px;

    }

    .card-header{

        gap:10px;

    }

    .step{

        width:34px;
        height:34px;

        font-size:14px;

    }

    .loan-icon{

        width:48px;
        height:48px;

        font-size:20px;

    }

    #emiValue{

        font-size:28px;

    }

    .result-box{

        padding:14px;

    }

    .result-box strong{

        font-size:18px;

    }

    #loanPieChart{

        width:220px !important;

        height:220px !important;

        max-width:220px;

        max-height:220px;

    }
    
    
    
    
    
    
    .loan-card{

    width:100%;

    max-width:100%;

    overflow:hidden;

}

    .preview-window{

        height:180px;

    }

    .a4-page{

        transform:scale(.5);

        transform-origin:top center;

        margin-top:-170px;

    }

}













/* =====================================
   MOBILE CURRENCY FIX
===================================== */

@media (max-width:768px){

    .currency-selector-wrap{

        position:static !important;

        width:100% !important;

        margin-top:8px !important;

    }

    .currency-selector-wrap select{

        width:100% !important;

    }

    .card-header{

        padding-right:0 !important;

    }

}



@media (max-width:768px){

    .emi-result{

        margin-top:15px !important;

    }

}












/* =====================================
   PREVIEW HEIGHT FIX
===================================== */

/* Tablet */

@media (max-width:1024px){

    .preview-window{

        height:800px !important;

    }

}

/* Mobile */

@media (max-width:768px){

    .preview-window{

        height:350px !important;

    }

}