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

body.login-page{

    margin:0;

    padding:0;

    direction:rtl;

    font-family:"IRANSans","Vazir",Tahoma,sans-serif;

    background:#F3F7FC;

    overflow-x:hidden;

    overflow-y:auto;

    min-height:100vh;

}

.login-wrapper{


    min-height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(135deg,#1565C0 0%,#42A5F5 100%);

    padding-bottom:60px;

    box-sizing:border-box;

}

/*=========================================================
    LEFT SIDE
=========================================================*/

.login-left{

    width:50%;

    min-height:100vh;

    color:#FFFFFF;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    padding:60px;

    box-sizing:border-box;

}



.login-brand h1{

    margin:0;

    font-size:34px;

    font-weight:bold;

}

.login-brand h2{

    margin:15px 0 10px;

    font-size:26px;

    font-weight:bold;

}

.login-brand p{

    margin:0;

    opacity:.9;

    font-size:15px;

}

.login-image{

    margin-top:50px;

}

.login-image img{

    width:420px;

    max-width:100%;

}
.login-logo{

    text-align:center;

    margin-bottom:8px;

}

.login-logo img{

    width:58px;

    height:auto;

    margin:0 auto;

    display:block;

}

/*=========================================================
    RIGHT SIDE
=========================================================*/

.login-right{

    width:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:40px;

    box-sizing:border-box;

}

.login-card{

    width:100%;

    max-width:420px;

    background:#FFFFFF;

    border-radius:22px;

    box-shadow:0 20px 50px rgba(0,0,0,.15);

    overflow:hidden;

}

.login-header{

    text-align:center;

    padding:20px 30px 15px;

}

.login-avatar{

    width:90px;

    height:90px;

    margin:auto;

    border-radius:50%;

    background:#E3F2FD;

    color:#1565C0;

    font-size:42px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.login-header h3{

    margin:20px 0 10px;

    color:#1565C0;

    font-size:20px;

}

.login-header p{

    margin:0;

    color:#607D8B;

    font-size:14px;

}

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

#loginForm{

    padding:0 35px 35px;

}

.form-group{

    margin-bottom:20px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    color:#455A64;

    font-size:13px;

    font-weight:bold;

}

.form-control,

.form-select{

    width:100%;

    height:44px;

    border:1px solid #CFD8DC;

    border-radius:10px;

    padding:0 15px;

    font-size:14px;

    background:#FFFFFF;

    box-sizing:border-box;

    transition:.25s;

}

.form-control:focus,

.form-select:focus{

    outline:none;

    border-color:#1565C0;

    box-shadow:0 0 0 3px rgba(21,101,192,.15);

}
/*=========================================================
    CAPTCHA
=========================================================*/

.captcha-row{

    display:flex;

    align-items:center;

    gap:10px;

}

.captcha-image{

    width:120px;

    height:44px;

    border:1px solid #CFD8DC;

    border-radius:10px;

    background:#FFFFFF;

    object-fit:cover;

}

.captcha-refresh{

    width:48px;

    height:44px;

    border:none;

    border-radius:10px;

    background:#1565C0;

    color:#FFFFFF;

    font-size:20px;

    cursor:pointer;

    transition:.25s;

}

.captcha-refresh:hover{

    background:#0D47A1;

    transform:rotate(180deg);

}

/*=========================================================
    REMEMBER ME
=========================================================*/

.remember-group{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.remember-label{

    display:flex;

    align-items:center;

    gap:8px;

    cursor:pointer;

    user-select:none;

    color:#455A64;

    font-size:13px;

}

.remember-label input{

    width:18px;

    height:18px;

}

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

.btn-login{

    width:100%;

    height:52px;

    border:none;

    border-radius:12px;

    background:#1565C0;

    color:#FFFFFF;

    font-size:16px;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;

}

.btn-login:hover{

    background:#0D47A1;

    transform:translateY(-2px);

    box-shadow:0 12px 24px rgba(21,101,192,.25);

}

.btn-login:active{

    transform:scale(.98);

}

.btn-loader{

    display:none;

}

/*=========================================================
    LINKS
=========================================================*/

.login-links{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    margin-top:22px;

    font-size:13px;

}

.login-links a{

    color:#1565C0;

    text-decoration:none;

    transition:.2s;

}

.login-links a:hover{

    color:#0D47A1;

    text-decoration:underline;

}

/*=========================================================
    MESSAGE
=========================================================*/

.login-message{

    margin-top:20px;

    padding:14px;

    border-radius:10px;

    font-size:13px;

    text-align:center;

    display:none;

}

.login-message.success{

    background:#E8F5E9;

    color:#2E7D32;

    border:1px solid #A5D6A7;

}

.login-message.error{

    background:#FDECEC;

    color:#C62828;

    border:1px solid #EF9A9A;

}

.login-message.warning{

    background:#FFF8E1;

    color:#EF6C00;

    border:1px solid #FFCC80;

}

/*=========================================================
    GLOBAL LOADER
=========================================================*/

.loading-box{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    padding:30px;

}

.spinner{

    width:42px;

    height:42px;

    border:4px solid #E3F2FD;

    border-top:4px solid #1565C0;

    border-radius:50%;

    animation:spin 1s linear infinite;

}

.loading-text{

    margin-top:15px;

    color:#455A64;

    font-size:14px;

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*=========================================================
    TOAST
=========================================================*/

/*=========================================================
    TOAST
=========================================================*/
#toastContainer{

    position:fixed;

    top:20px;

    right:20px;

    z-index:99999;

    display:flex;

    flex-direction:column;

    align-items:flex-end;

}

.toast{

    min-width:320px;

    max-width:420px;

    background:#263238;

    color:#FFFFFF;

    border-radius:12px;

    padding:14px 18px;

    display:flex;

    align-items:center;

    gap:12px;

    box-shadow:0 10px 25px rgba(0,0,0,.25);

    opacity:0;

    visibility:hidden;

    transform:translateY(-20px);

    transition:all .25s ease;

}

.toast.show{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.toast-icon{

    width:28px;

    height:28px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#FFFFFF;

    font-weight:bold;

    flex-shrink:0;

}

.toast-text{

    flex:1;

    font-size:14px;

    line-height:1.6;

    color:#FFFFFF;

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

.login-footer{

    position:fixed;

    bottom:0;

    right:0;

    left:0;

    height:34px;

    background:#FFFFFF;

    border-top:1px solid #E5EAF2;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:0 15px;

    box-sizing:border-box;

    color:#607D8B;

    font-size:12px;

    line-height:1;

    z-index:50;

}
/*=========================================================
    DISABLED
=========================================================*/

.form-control:disabled,

.form-select:disabled,

.btn-login:disabled{

    background:#ECEFF1;

    cursor:not-allowed;

    opacity:.7;

}

.btn-login.loading{

    pointer-events:none;

    opacity:.85;

}

/*=========================================================
    PLACEHOLDER
=========================================================*/

.form-control::placeholder{

    color:#B0BEC5;

}

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

.form-control.error,

.form-select.error{

    border-color:#D32F2F;

    box-shadow:0 0 0 3px rgba(211,47,47,.12);

}

.form-control.success,

.form-select.success{

    border-color:#2E7D32;

    box-shadow:0 0 0 3px rgba(46,125,50,.12);

}

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

.login-card{

    animation:loginFade .45s ease;

}

@keyframes loginFade{

    from{

        opacity:0;

        transform:translateY(25px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media (max-width:1100px){

    .login-left{

        display:none;

    }

    .login-right{

        width:100%;

        min-height:100vh;

        padding:30px;

    }

}

@media (max-width:768px){

    .login-card{

        max-width:100%;

        border-radius:16px;

    }

    #loginForm{

        padding:0 25px 25px;

    }

    .captcha-row{

        flex-wrap:wrap;

    }

    .captcha-image{

        width:100%;

        height:55px;

    }

    .captcha-refresh{

        width:100%;

    }

    .login-footer{

        height:50px;

        flex-direction:column;

        justify-content:center;

        gap:2px;

        font-size:11px;

        padding:4px 10px;

    }

}

@media (max-width:480px){

    .login-header{

        display:flex;

        flex-direction:column;

        align-items:center;

        justify-content:center;

        text-align:center;

        padding:35px 30px 25px;

    }




    .login-header h3{

        font-size:20px;

    }

    .btn-login{

        height:48px;

        font-size:15px;

    }

    .form-control,

    .form-select{

        height:46px;

    }

}

/*=========================================================
    UTILITIES
=========================================================*/

.hidden{

    display:none !important;

}

.text-center{

    text-align:center;

}

.mt-10{

    margin-top:10px;

}

.mt-20{

    margin-top:20px;

}

.mb-10{

    margin-bottom:10px;

}

.mb-20{

    margin-bottom:20px;

}

/*=========================================================
    END OF FILE
=========================================================*/