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

body{
    min-height:100vh;
    font-family:'Segoe UI',sans-serif;
    
}

.login-wrapper{
    min-height:100vh;
    display:flex;
}

/* LEFT */

.login-left{
    width:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:60px;
    color:#fff;
}

.logo{
    max-width:250px;
    margin-bottom:30px;
}

.brand-box h1{
    font-weight:700;
    margin-bottom:10px;
}

.brand-box p{
    font-size:18px;
    opacity:.9;
}

.features{
    margin-top:40px;
}

.features div{
    margin-bottom:18px;
    font-size:18px;
}

.features i{
    width:30px;
}

/* RIGHT */

.login-right{
    width:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:40px;
}

.login-card{
    width:100%;
    max-width:480px;
    background:rgba(255,255,255,.95);
    border-radius:25px;
    padding:40px;
}

.login-card h2{
    font-weight:700;
    color:#198754;
}

.form-control{
    height:50px;
}

.input-group-text{
    background:#198754;
    color:#fff;
    border:none;
}

.btn-success{
    height:55px;
    font-size:18px;
}

.forgot-link{
    text-decoration:none;
    color:#198754;
}

.forgot-link:hover{
    color:#146c43;
}

.login-footer{
    text-align:center;
    color:#6c757d;
}

.loadingAlert{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(255,255,255,.7);
    z-index:99999;
}

#loader{
    position:absolute;
    top:50%;
    left:50%;
    width:70px;
    height:70px;
    border:6px solid #ddd;
    
    border-radius:50%;
    animation:spin 1s linear infinite;
    transform:translate(-50%,-50%);
}

@keyframes spin{
    100%{
        transform:
        translate(-50%,-50%)
        rotate(360deg);
    }
}

/* MOBILE */

@media (max-width: 992px) {

    .login-wrapper{
        flex-direction: column;
    }

    .login-left{
        width: 100%;
        display: flex;
        padding: 30px 20px 10px;
        text-align: center;
    }

    .login-right{
        width: 100%;
        padding: 20px;
    }

    .logo{
        max-width: 180px;
        margin-bottom: 15px;
    }

    .brand-box h1{
        font-size: 2rem;
        margin-bottom: 5px;
    }

    .brand-box p{
        font-size: 1rem;
    }

    .features{
        margin-top: 20px;
        display: none; /* Optional */
    }

    .login-card{
        max-width: 100%;
        margin-top: 10px;
    }
}