/*=========================================================
    MOBILE.CSS
=========================================================*/


/*=========================================================
    LARGE DESKTOP
=========================================================*/

@media (min-width:1600px){

    .login-card{

        max-width:540px;

        margin:auto;

        padding:60px;

    }

}


/*=========================================================
    LAPTOP
=========================================================*/

@media (max-width:1200px){

    .login-card{

        padding:42px;

    }

}


/*=========================================================
    TABLET
=========================================================*/

@media (max-width:992px){

    #login-page{

        padding:30px;

    }

    .login-card{

        padding:40px;

    }

}


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

@media (max-width:768px){

    #login-page{

        padding:20px;

    }

    .login-card{

        padding:34px 28px;

        border-radius:24px;

    }

    .login-logo{

        width:90px;

        height:90px;

        margin-bottom:26px;

    }

    .logo-heart{

        font-size:34px;

    }

    .login-header h1{

        font-size:28px;

    }

    .login-header p{

        font-size:14px;

        line-height:1.9;

    }

    .input-wrapper{

        height:58px;

    }

    #loginButton{

        height:58px;

    }

}


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

@media (max-width:576px){

    body{

        overflow-x:hidden;

    }

    #loader h2{

        font-size:14px;

    }

    .loader-heart{

        width:60px;

        height:60px;

    }

    .loader-heart::before,

    .loader-heart::after{

        width:60px;

        height:60px;

    }

    .loader-heart::before{

        top:-30px;

    }

    .loader-heart::after{

        left:-30px;

    }

    .login-card{

        padding:28px 22px;

    }

    .login-logo{

        width:82px;

        height:82px;

    }

    .logo-heart{

        font-size:30px;

    }

    .login-header{

        margin-bottom:28px;

    }

    .login-header h1{

        font-size:24px;

    }

    .login-header p{

        font-size:13px;

    }

    .input-box label{

        font-size:13px;

    }

    .input-wrapper{

        height:54px;

        border-radius:18px;

    }

    .input-wrapper i{

        width:48px;

        font-size:16px;

    }

    #togglePassword{

        width:48px;

        height:54px;

    }

    .input-wrapper input{

        font-size:14px;

    }

    #loginButton{

        height:54px;

        border-radius:18px;

        font-size:15px;

    }

}
/*=========================================================
    EXTRA SMALL DEVICES
=========================================================*/

@media (max-width:380px){

    #login-page{

        padding:16px;

    }

    .login-card{

        padding:24px 18px;

        border-radius:20px;

    }

    .login-logo{

        width:74px;

        height:74px;

        margin-bottom:20px;

    }

    .logo-heart{

        font-size:28px;

    }

    .login-header h1{

        font-size:22px;

    }

    .login-header p{

        font-size:12px;

        line-height:1.8;

    }

    .input-wrapper{

        height:50px;

    }

    .input-wrapper>i{

        width:44px;

        font-size:15px;

    }

    #togglePassword{

        width:44px;

        height:50px;

    }

    #loginButton{

        height:50px;

        font-size:14px;

    }

    .remember-me{

        font-size:12px;

    }

}

/*=========================================================
    LANDSCAPE
=========================================================*/

@media (max-height:700px){

    #login-page{

        padding:20px;

    }

    .login-card{

        padding:26px;

    }

    .login-logo{

        width:72px;

        height:72px;

        margin-bottom:18px;

    }

    .login-header{

        margin-bottom:22px;

    }

    .login-header h1{

        font-size:24px;

        margin-bottom:8px;

    }

    .login-header p{

        font-size:13px;

        line-height:1.7;

    }

}

/*=========================================================
    FOLD DEVICES
=========================================================*/

@media (max-width:300px){

    .login-card{

        padding:18px 14px;

    }

    .login-header h1{

        font-size:20px;

    }

    .input-wrapper{

        height:46px;

    }

    #loginButton{

        height:46px;

    }

}

/*=========================================================
    SAFE AREA (iPhone)
=========================================================*/

@supports (padding:max(0px)){

    body{

        padding-left:max(0px, env(safe-area-inset-left));

        padding-right:max(0px, env(safe-area-inset-right));

        padding-top:max(0px, env(safe-area-inset-top));

        padding-bottom:max(0px, env(safe-area-inset-bottom));

    }

}

/*=========================================================
    TOUCH DEVICES
=========================================================*/

@media (hover:none){

    .login-card:hover{

        transform:none;

    }

    #loginButton:hover{

        transform:none;

    }

}

/*=========================================================
    REDUCED MOTION
=========================================================*/

@media (prefers-reduced-motion:reduce){

    .loader-heart,

    .logo-ring,

    .logo-heart,

    #aurora span{

        animation:none !important;

    }

}

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

@media (max-width:768px){

    #aurora span{

        filter:blur(110px);

        opacity:.24;

    }

    #noise{

        opacity:.015;

    }

}

/* ===========================================
   Force Persian Fonts
=========================================== */

h1,
h2,
h3,
h4,
h5,
h6,
strong,
b,
.card-title,
.section-header h1,
.section-header h2,
.section-header h3,
.section-header h4,
.section-header h5,
.section-header h6 {
    font-family: "Rokh", "Vazirmatn", sans-serif !important;
    font-weight: inherit !important;
}

body,
button,
input,
textarea,
select,
option,
a,
span,
p,
div,
li,
td,
th,
label,
small {
    font-family: "Vazirmatn", sans-serif !important;
}