/* ==========================
   LOGIN PAGE
========================== */

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

body{

font-family:
Arial,
Helvetica,
sans-serif;

background:#f5f5f5;

margin:0;

padding:0;

color:#111;

}

.login-page{

min-height:calc(100vh - 250px);

display:flex;

justify-content:center;

align-items:center;

padding:140px 20px 80px;

}

/* ==========================
   LOGIN CARD
========================== */

.login-wrapper{
    width:100%;
    max-width:800px;   /* 👈 increase container width */
    margin:auto;
}

.login-card{
    background:#ffffff;
    padding:40px;
    border-radius:24px;
    box-shadow:
    0 25px 60px rgba(0,0,0,.08),
    0 5px 18px rgba(0,0,0,.05);
    width:100%;
}

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

.login-logo{

text-align:center;

font-size:14px;

font-weight:700;

letter-spacing:2px;

margin-bottom:15px;

color:#555;

}

.login-card h2{

text-align:center;

font-size:32px;

font-weight:800;

margin-bottom:10px;

}

.login-subtitle{

text-align:center;

color:#666;

font-size:15px;

margin-bottom:35px;

line-height:1.7;

}

/* ==========================
   FORM
========================== */

.form-group{

margin-bottom:20px;

}

.form-group label{

display:block;

font-size:14px;

font-weight:700;

margin-bottom:8px;

}

.form-group input{

width:100%;

padding:14px 16px;

border:1px solid #ddd;

border-radius:12px;

font-size:15px;

outline:none;

transition:.25s;

background:#fff;

}

.form-group input:focus{

border-color:#111;

box-shadow:
0 0 0 4px rgba(0,0,0,.05);

}

/* ==========================
   BUTTON
========================== */

.login-btn{

width:100%;

padding:15px;

border:none;

border-radius:12px;

background:#111;

color:#fff;

font-size:15px;

font-weight:700;

cursor:pointer;

transition:.25s;

}

.login-btn:hover{

background:#000;

transform:translateY(-2px);

}

/* ==========================
   ERROR
========================== */

.error-message{

background:#ffeaea;

border:1px solid #ffb5b5;

color:#c40000;

padding:14px;

border-radius:12px;

margin-bottom:25px;

text-align:center;

font-size:14px;

}

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

.login-footer{

text-align:center;

margin-top:25px;

font-size:13px;

color:#777;

}

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

@media(max-width:600px){

.login-card{

padding:35px 25px;

}

.login-card h2{

font-size:28px;

}

/* ==========================
   SUCCESS MESSAGE (GLOW)
========================== */

/* SUCCESS MESSAGE (GLOBAL - NOT MOBILE ONLY) */
.flash-success-wrapper{
    width:100%;
    display:flex;
    justify-content:center;
    margin-bottom:20px;
}

.flash-success{
    background:#eaffea !important;
    border:2px solid #3ddc84 !important;
    color:#0a7a3b !important;

    font-weight:900 !important;
    font-size:16px !important;

    padding:16px 22px !important;
    border-radius:14px !important;

    text-align:center !important;

    display:inline-block !important;

    box-shadow:0 0 25px #3ddc84, 0 0 50px rgba(61,220,132,0.7) !important;

    animation: glowPulse 1.2s infinite alternate !important;
}

@keyframes glowPulse{
    from{
        box-shadow:0 0 10px rgba(61,220,132,0.4);
    }
    to{
        box-shadow:0 0 20px rgba(61,220,132,0.9);
    }
}

}