/*
==================================================
Fee Collection System V1
Premium Login UI
Developed By : Weblength Software Solutions
==================================================
*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

:root{

    --primary:#2563eb;
    --primary-dark:#1d4ed8;

    --text:#1f2937;
    --muted:#6b7280;

    --border:#dbe3ec;

    --card:#ffffff;

    --success:#16a34a;
    --danger:#dc2626;

}

body{

    font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif;

    min-height:100vh;

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

    padding:30px;

    color:var(--text);

    background:
    radial-gradient(circle at top left,#dbeafe 0%,transparent 35%),
    radial-gradient(circle at bottom right,#dbeafe 0%,transparent 35%),
    linear-gradient(135deg,#eef4ff,#f7f9fc);

}

/*==========================================
Container
==========================================*/

.login-container{

    width:100%;
    max-width:450px;

}

/*==========================================
Card
==========================================*/

.login-card{

    background:#ffffff;

    border-radius:20px;

    padding:45px;

    border:1px solid #e8edf5;

    box-shadow:

        0 15px 40px rgba(15,23,42,.08),

        0 3px 8px rgba(15,23,42,.05);

}

/*==========================================
Logo
==========================================*/

.login-logo{

    display:flex;

    justify-content:center;

    margin-bottom:25px;

}

.logo-circle{

    width:78px;
    height:78px;

    border-radius:50%;

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

    font-size:28px;
    font-weight:700;

    color:#fff;

    background:linear-gradient(135deg,#2563eb,#1d4ed8);

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

}

/*==========================================
Heading
==========================================*/

.login-header{

    text-align:center;

    margin-bottom:30px;

}

.login-header h1{

    font-size:34px;

    font-weight:700;

    color:#1e3a8a;

    margin-bottom:8px;

}

.login-header p{

    font-size:15px;

    color:#64748b;

    line-height:1.6;

}

/*==========================================
Message
==========================================*/

.message{

    display:none;

    margin-bottom:20px;

    padding:14px 16px;

    border-radius:10px;

    font-size:14px;

}

.message.success{

    display:block;

    color:#166534;

    background:#dcfce7;

    border:1px solid #bbf7d0;

}

.message.error{

    display:block;

    color:#991b1b;

    background:#fee2e2;

    border:1px solid #fecaca;

}

/*==========================================
Form
==========================================*/

.form-group{

    margin-bottom:22px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-size:14px;

    font-weight:600;

    color:#374151;

}

.form-group input{

    width:100%;

    height:54px;

    padding:0 16px;

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

    border-radius:10px;

    background:#f8fafc;

    font-size:15px;

    color:#111827;

    transition:.25s;

    outline:none;

}

.form-group input::placeholder{

    color:#9ca3af;

}

.form-group input:focus{

    background:#ffffff;

    border-color:var(--primary);

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

}

/*==========================================
Button
==========================================*/

#loginBtn{

    width:100%;

    height:54px;

    border:none;

    border-radius:10px;

    cursor:pointer;

    font-size:16px;

    font-weight:600;

    color:#ffffff;

    background:linear-gradient(135deg,#2563eb,#1d4ed8);

    transition:.25s;

}

#loginBtn:hover{

    transform:translateY(-2px);

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

}

#loginBtn:active{

    transform:translateY(0);

}

#loginBtn:disabled{

    opacity:.70;

    cursor:not-allowed;

    transform:none;

    box-shadow:none;

}

/*==========================================
Footer
==========================================*/

.login-footer{

    margin-top:30px;

    text-align:center;

    font-size:13px;

    color:#94a3b8;

}

.login-footer strong{

    color:#2563eb;

}

/*==========================================
Responsive
==========================================*/

@media(max-width:576px){

    body{

        padding:20px;

    }

    .login-card{

        padding:30px 25px;

    }

    .logo-circle{

        width:68px;
        height:68px;

        font-size:24px;

    }

    .login-header h1{

        font-size:28px;

    }

}