/* ==========================================
   EMI Calculator - Modern Premium UI
   style.css
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

:root{

    --primary:#2563eb;
    --primary-dark:#1d4ed8;
    --secondary:#06b6d4;

    --success:#10b981;
    --danger:#ef4444;

    --white:#ffffff;
    --text:#1e293b;
    --light:#64748b;

    --border:#e2e8f0;

    --bg:#f1f5f9;

    --shadow:0 15px 35px rgba(0,0,0,.08);

    --radius:18px;

}

body{

    background:linear-gradient(135deg,#eef5ff,#f8fbff,#ffffff);

    min-height:100vh;

    color:var(--text);

    padding:20px 20px;

}

/* ========================= */

.container{

    max-width:1200px;

    margin:auto;

}

h1{

    text-align:center;

    font-size:32px;

    color:var(--primary);

    font-weight:700;

    margin-bottom:10px;

}

.subtitle{

    text-align:center;

    color:var(--light);

    max-width:700px;

    margin:auto;

    margin-bottom:45px;

    line-height:1.7;

}

/* ========================= */

.calculator{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:35px;

}

/* ========================= */

.left,
.right{

    background:#fff;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    padding:35px;

}

/* ========================= */

label{

    display:block;

    margin-top:20px;

    margin-bottom:8px;

    font-weight:600;

    color:#334155;

}

/* ========================= */

input,
select{

    width:100%;

    padding:15px 18px;

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

    border-radius:12px;

    font-size:16px;

    transition:.3s;

    background:#fff;

}

input:focus,
select:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(37,99,235,.15);

}

/* ========================= */

.tenureBox{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:15px;

}

/* ========================= */

.buttons{

    display:flex;

    gap:15px;

    margin-top:35px;

}

button{

    flex:1;

    padding:16px;

    border:none;

    cursor:pointer;

    border-radius:12px;

    color:#fff;

    font-size:16px;

    font-weight:600;

    transition:.3s;

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

}

button:hover{

    transform:translateY(-3px);

    box-shadow:0 12px 30px rgba(37,99,235,.30);

}

.reset{

    background:linear-gradient(135deg,#ef4444,#dc2626);

}

.reset:hover{

    box-shadow:0 12px 30px rgba(239,68,68,.30);

}

/* ========================= */

.card{

    background:linear-gradient(135deg,#2563eb,#3b82f6);

    color:#fff;

    border-radius:18px;

    text-align:center;

    padding:30px;

    margin-bottom:25px;

}

.card h3{

    font-weight:500;

    font-size:18px;

    opacity:.9;

}

.value{

    margin-top:15px;

    font-size:40px;

    font-weight:700;

    word-break:break-word;

}

/* ========================= */

.summary{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

    margin-bottom:30px;

}

.box{

    background:#f8fafc;

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

    border-radius:15px;

    text-align:center;

    padding:25px 15px;

    transition:.3s;

}

.box:hover{

    transform:translateY(-4px);

    box-shadow:0 10px 25px rgba(0,0,0,.08);

}

.box span{

    color:var(--light);

    display:block;

    margin-bottom:12px;

    font-size:15px;

}

.box h2{

    color:var(--primary);

    font-size:30px;

    font-weight:700;

}

/* ========================= */

canvas{

    width:100%!important;

    max-height:360px;

}

/* ========================= */

input::-webkit-inner-spin-button,
input::-webkit-outer-spin-button{

    appearance:none;

    margin:0;

}

input[type=number]{

    appearance:textfield;

}

/* ========================= */

@media(max-width:991px){

.calculator{

grid-template-columns:1fr;

}

.left{

order:1;

}

.right{

order:2;

}

}

/* ========================= */

@media(max-width:600px){

body{

padding:15px;

}

.left,
.right{

padding:22px;

}

h1{

font-size:32px;

}

.summary{

grid-template-columns:1fr;

}

.buttons{

flex-direction:column;

}

.value{

font-size:32px;

}

.box h2{

font-size:24px;

}

.tenureBox{

grid-template-columns:1fr;

}

}

/* ========================= */

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(20px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.left,
.right{

animation:fadeUp .6s ease;

}

/* ========================= */

::selection{

background:var(--primary);

color:#fff;

}