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

*{
    box-sizing:border-box;
}

html{
    min-height:100%;
    background:var(--bg-body);
}

body{
    min-height:100dvh;
    margin:0;

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

    background:var(--bg-body);
    color:var(--text-dark);

    font-family:"Poppins",sans-serif;
}


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

.login-page{
    width:100%;
    max-width:var(--container-width);
    min-height:100dvh;

    display:flex;
    flex-direction:column;

    padding:var(--space-2xl);

    background:var(--bg-card);
    box-shadow:var(--shadow);
}

/* =========================
   LOGO
========================= */

.login-logo-area{
    display:flex;
    justify-content:center;
    align-items:center;

    margin-bottom:100px;
}

.login-logo-box{
    width:116px;
    height:116px;

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

    overflow:hidden;
    border-radius:18px;

    background:#f1582c;
    padding: 10px;
}

.login-logo-box img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
}


/* =========================
   TITLE
========================= */

.login-title{
    margin:0 0 38px;

    color:var(--primary-light);
    text-align:center;

    font-size:42px;
    font-weight:var(--fw-medium);
    line-height:1.2;
}


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

.login-form{
    width:100%;
}

.login-field{
    margin-bottom:30px;
}

.login-label{
    display:block;

    margin-bottom:10px;

    color:var(--text-title);

    font-size:18px;
    font-weight:var(--fw-normal);
}


/* =========================
   INPUT GROUP
========================= */

.login-input-group{
    width:100%;
    min-height:50px;

    display:flex;
    align-items:center;

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

    transition:var(--transition);
}

.login-input-group:focus-within{
    border-bottom-color:var(--primary);
}

.login-prefix{
    flex:0 0 auto;

    padding:0 10px 0 8px;

    color:var(--text-dark);

    font-size:22px;
    font-weight:var(--fw-bold);
}

.login-input{
    width:100%;
    min-width:0;
    height:50px;

    padding:0 8px;

    border:0;
    outline:0;

    background:transparent;
    color:var(--text-dark);

    font-family:inherit;
    font-size:17px;
    font-weight:var(--fw-normal);
}

.login-input::placeholder{
    color:#c7c7c7;
    opacity:1;
}

.login-input:focus{
    outline:0;
    box-shadow:none;
}


/* =========================
   PASSWORD TOGGLE
========================= */

.password-toggle{
    flex:0 0 42px;
    height:42px;

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

    padding:0;

    border:0;
    outline:0;

    background:transparent;
    color:#909090;

    cursor:pointer;
}

.password-toggle i{
    font-size:18px;
    transition:var(--transition);
}

.password-toggle:hover i{
    color:var(--primary);
}


/* =========================
   CUSTOMER SERVICE
========================= */

.customer-service{
    margin-top:4px;

    text-align:right;
}

.customer-service a{
    color:var(--primary);
    text-decoration:none;

    font-size:18px;
    font-weight:var(--fw-normal);
}

.customer-service a:hover{
    color:var(--primary-dark);
}


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

.login-submit{
    width:100%;
    min-height:62px;

    margin-top:82px;
    padding:0 24px;

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

    border:0;
    border-radius:var(--radius-sm);

    background:linear-gradient(
        90deg,
        #ff6817,
        #ff8738
    );

    color:var(--text-white);

    font-family:inherit;
    font-size:25px;
    font-weight:var(--fw-bold);

    box-shadow:0 7px 14px rgba(238,77,45,.25);

    cursor:pointer;
    transition:var(--transition);
}

.login-submit i{
    font-size:25px;
    font-weight:var(--fw-normal);
}

.login-submit:hover{
    background:var(--primary);
    transform:translateY(-1px);
}

.login-submit:active{
    transform:translateY(0);
}


/* =========================
   REGISTER LINK
========================= */

.register-link{
    margin-top:auto;
    padding-top:34px;

    color:var(--text-light);
    text-align:center;

    font-size:15px;
}

.register-link a{
    color:var(--text-light);
    text-decoration:none;
}

.register-link a:hover{
    color:var(--primary);
}


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

.login-alert{
    width:100%;

    display:flex;
    align-items:flex-start;
    gap:var(--space-sm);

    margin-bottom:var(--space-xl);
    padding:var(--space-md) var(--space-lg);

    border:1px solid rgba(239,68,68,.25);
    border-radius:var(--radius-sm);

    background:rgba(239,68,68,.08);
    color:var(--danger);

    font-size:var(--font-sm);
    line-height:1.5;
}

.login-alert i{
    margin-top:2px;
    flex:0 0 auto;
}


/* =========================
   RESPONSIVE
========================= */

@media (max-width:547px){

    body{
        background:var(--bg-card);
    }

    .login-page{
        max-width:100%;
        padding:50px 40px 22px;
    }
}

@media (max-width:400px){

    .login-page{
        padding:40px 28px 20px;
    }

    .login-logo-area{
        margin-bottom:75px;
    }

    .login-logo-box{
        width:100px;
        height:100px;
    }

    .login-title{
        margin-bottom:34px;
        font-size:36px;
    }

    .login-label{
        font-size:15px;
    }

    .login-input{
        font-size:15px;
    }

    .login-prefix{
        font-size:19px;
    }

    .customer-service a{
        font-size:15px;
    }

    .login-submit{
        min-height:58px;
        margin-top:66px;

        font-size:21px;
    }
}