/* =================================
   RESET
================================= */

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

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

body{

    font-family:"Inter",sans-serif;

    background:#f5f7fb;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:100vh;

}

/* =================================
   LOGIN CONTAINER
================================= */

.login-container{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

}

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

.login-card{

    width:100%;

    max-width:420px;

    background:#ffffff;

    border-radius:20px;

    padding:40px;

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

}

/* =================================
   BRAND
================================= */

.login-brand{

    text-align:center;

    margin-bottom:35px;

}

.login-logo{

    width: 170px;
    height: 80px;

    margin-top:15px;

}

/*.login-brand h1{

    color:#10B981;

    font-size:30px;

    font-weight:800;

}

.login-brand p{

    color:#6B7280;

    margin-top:8px;

}*/

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

.login-header{

    margin-bottom:30px;

}

.login-header h2{

    font-size:26px;

    margin-bottom:8px;

}

.login-header p{

    color:#6B7280;

}

/* =================================
   INPUTS
================================= */

.input-group{

    margin-bottom:20px;

}

.input-group label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

}

.input-wrapper{

    display:flex;

    align-items:center;

    border:1px solid #d1d5db;

    border-radius:12px;

    padding:0 15px;

}

.input-wrapper i{

    color:#9ca3af;

}

.input-wrapper input{

    width:100%;

    border:none;

    outline:none;

    padding:15px;

    font-size:15px;

}

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

.login-button{

    width:100%;

    border:none;

    border-radius:12px;

    padding:15px;

    background:#10B981;

    color:white;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.3s;

}

.login-button:hover{

    background:#059669;

}

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

.error-message{

    margin-top:15px;

    color:#ef4444;

    text-align:center;

    min-height:20px;

}

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

.login-footer{

    margin-top:30px;

    text-align:center;

    color:#9CA3AF;

    font-size:13px;

}

/* =========================================
   FITIZEN AUTH LOADING SCREEN
========================================= */

.fitizen-auth-loading {
    position: fixed;
    inset: 0;
    z-index: 99999;

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

    background: #ffffff;

    opacity: 1;
    visibility: visible;

    transition:
        opacity 0.25s ease,
        visibility 0.25s ease;
}

.fitizen-auth-loading.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.fitizen-auth-loading-logo {
    margin-bottom: 22px;

    font-family:
        "Arial Narrow",
        "Roboto Condensed",
        Impact,
        sans-serif;

    font-size: 24px;
    font-weight: 900;
    letter-spacing: 1.5px;

    color: #111827;
}

.fitizen-auth-spinner {
    width: 30px;
    height: 30px;

    border: 3px solid #e5e7eb;
    border-top-color: #059669;

    border-radius: 50%;

    animation:
        fitizenAuthSpin 0.8s linear infinite;
}

.fitizen-auth-loading p {
    margin: 14px 0 0;

    font-size: 10px;
    font-weight: 600;

    color: #6b7280;

    letter-spacing: 0.4px;
}

@keyframes fitizenAuthSpin {

    to {
        transform: rotate(360deg);
    }

}