/*==================================================
    Login Page
    Sarzamin Danayi
    Theme Token Compatible
==================================================*/


/*==================================================
    Page Wrapper
==================================================*/

.login-page{

    min-height:100vh;

    display:flex;

    background:

    linear-gradient(
        135deg,
        rgba(108,99,255,.12),
        rgba(0,200,255,.10)
    ),

    url('/assets/images/auth/login-bg.webp');

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    position:relative;

    overflow:hidden;

}

.login-page::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
        180deg,
        rgba(245,247,255,.35),
        rgba(245,247,255,.85)
    );

    backdrop-filter:blur(3px);

}






/*==================================================
    Container
==================================================*/


.login-container{


    flex:1;


    display:flex;


    align-items:center;


    justify-content:center;

    padding:25px;

      z-index:2;



}





/*==================================================
    Card
==================================================*/


.login-card{


    width:100%;


    max-width:430px;


    background:var(--surface);


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


    border-radius:var(--radius-lg);


    padding:30px 15px;

    box-shadow:var(--shadow);


    animation:loginShow .4s ease;


}



@keyframes loginShow{


from{

    opacity:0;

    transform:translateY(25px);

}


to{

    opacity:1;

    transform:translateY(0);

}


}





/*==================================================
    Header
==================================================*/


.login-header{


    text-align:center;


    margin-bottom:25px;


}



.login-logo{


    width:90px;


    margin: 12px;


}



.login-title{


    font-size:1.55rem;


    font-weight:950;


    color:var(--text);


}



.login-description{


    margin-top:10px;


    color:var(--text-light);


    font-size:.95rem;


}







/*==================================================
    Section Title
==================================================*/


.login-section-title{


    text-align:center;


    font-size:1.05rem;


    font-weight:900;


    color:var(--text);


    margin-bottom:10px;


}







/*==================================================
    Form
==================================================*/


.login-form{

    border:

    1px solid var(--border);

     border-radius:24px;

     padding:

    22px;

    display:flex;


    flex-direction:column;


    gap:16px;

    background:

    rgba(255,255,255,.45);

}





.login-group{


    display:flex;


    flex-direction:column;


    gap:8px;


}





.login-group label{


    font-size:.85rem;


    font-weight:700;


    color:var(--text);


}








/*==================================================
    Inputs
==================================================*/


.login-input-wrapper,
.password-wrapper{


    position:relative;


    width:100%;


}




.login-input{


    width:100%;


    height:56px;


    box-sizing:border-box;


    padding:0 18px;


    border-radius:var(--radius);


    background:var(--bg);


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


    color:var(--text);


    font-size:.95rem;


    transition:var(--transition);


}



.login-input:hover{


    border-color:var(--primary-light);


}



.login-input:focus{


    background:var(--surface);


    border-color:var(--primary);


    box-shadow:

    0 0 0 4px

    color-mix(
        in srgb,
        var(--primary) 18%,
        transparent
    );


}







/*==================================================
    Mobile
==================================================*/


.login-input-wrapper .login-input{


    direction:ltr;


    text-align:left;


    padding-left:75px;


}



.login-prefix{


    position:absolute;


    left:18px;


    top:50%;


    transform:translateY(-50%);


    color:var(--text-light);


    font-weight:800;


}







/*==================================================
    Password Toggle
==================================================*/


.password-wrapper .login-input{


    padding-left:55px;


}



.password-toggle{


    position:absolute;


    left:15px;


    top:50%;


    transform:translateY(-50%);


    background:transparent;


    font-size:1.1rem;


    color:var(--text-light);


}






.password-toggle:hover{


    color:var(--primary);


}







/*==================================================
    Forgot Password
==================================================*/


.login-forgot{


    text-align:left;


}



.login-forgot a{


    color:var(--primary);


    font-size:.85rem;


    font-weight:800;


}



.login-forgot a:hover{


    color:var(--primary-dark);


}








/*==================================================
    Button
==================================================*/


.login-btn{


    width:100%;


    height:58px;


    border-radius:var(--radius-full);


    background:var(--primary);


    color:#fff;


    font-size:1rem;


    font-weight:900;


    display:flex;


    align-items:center;


    justify-content:center;


    gap:8px;


}



.login-btn img{


    width:30px;


    height:30px;

    border-radius: 50%;


}



.login-btn:hover{


    background:var(--primary-dark);


    transform:translateY(-3px);


    box-shadow:var(--shadow);


}








/*==================================================
    Divider
==================================================*/


.login-divider{


    display:flex;


    align-items:center;


    gap:12px;


    margin:5px 0;


}



.login-divider span{


    height:1px;


    flex:1;


    background:var(--border);


}



.login-divider p{


    color:var(--text-light);


    font-size:.9rem;


    font-weight:700;


}







/*==================================================
    Parent Login
==================================================*/


.parent-login-btn{


    height:56px;


    border-radius:var(--radius-full);


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


    color:var(--secondary);


    display:flex;


    align-items:center;


    justify-content:center;


    gap:10px;


    font-weight:900;


    transition:var(--transition);


}



.parent-login-btn img{


    width:30px;


    height:30px;

   border-radius: 50%;


}



.parent-login-btn:hover{


    background:var(--secondary);


    color:#fff;


}







/*==================================================
    Register Link
==================================================*/


.register-link{


    display:flex;


    justify-content:center;


    align-items:center;


    gap:6px;


    margin-top:10px;


}



.register-link p{


    color:var(--text-light);


    font-size:.9rem;


}



.register-link a{


    color:var(--primary);


    font-weight:900;


}



.register-link a:hover{


    color:var(--primary-dark);


}








/*==================================================
    Message
==================================================*/


.login-message{


    display:none;


    padding:14px 18px;


    border-radius:var(--radius);


    font-size:.9rem;


    font-weight:800;


}



.login-message.success{


    display:block;


    background:

    color-mix(
        in srgb,
        var(--success) 15%,
        transparent
    );


    color:var(--success);


}




.login-message.error{


    display:block;


    background:

    color-mix(
        in srgb,
        var(--danger) 15%,
        transparent
    );


    color:var(--danger);


}


/*==================================================
    Login Responsive
    Tablet / Small Laptop
    769px - 1024px
==================================================*/


@media (min-width:769px) and (max-width:1024px){



/*==================================================
    Page
==================================================*/


.login-page{

    min-height:100vh;

    background-position:center;

}




/*==================================================
    Container
==================================================*/


.login-container{

    padding:

    20px;

}





/*==================================================
    Card
==================================================*/


.login-card{


    max-width:420px;


    padding:

    28px 32px;


    border-radius:

    30px;


}







/*==================================================
    Header
==================================================*/


.login-header{


    margin-bottom:22px;


}



.login-logo{


    width:78px;


    margin:

    8px auto 15px;


}



.login-title{


    font-size:

    1.45rem;


}



.login-description{


    font-size:

    .9rem;


    line-height:1.8;


}







/*==================================================
    Form Box
==================================================*/


.login-form{


    padding:

    20px;


    border-radius:

    22px;


    gap:

    15px;


}







/*==================================================
    Section Title
==================================================*/


.login-section-title{


    font-size:

    1rem;


    margin-bottom:

    8px;


}







/*==================================================
    Groups
==================================================*/


.login-group{


    gap:

    7px;


}



.login-group label{


    font-size:

    .82rem;


}








/*==================================================
    Inputs
==================================================*/


.login-input{


    height:

    54px;


    font-size:

    .9rem;


    border-radius:

    16px;


}








/*==================================================
    Mobile Input
==================================================*/


.login-input-wrapper .login-input{


    padding-left:

    70px;


}



.login-prefix{


    left:

    16px;


    font-size:

    .9rem;


}







/*==================================================
    Password Toggle
==================================================*/


.password-wrapper .login-input{


    padding-left:

    52px;


}



.password-toggle{


    left:

    12px;


}







/*==================================================
    Forgot
==================================================*/


.login-forgot a{


    font-size:

    .82rem;


}







/*==================================================
    Button
==================================================*/


.login-btn{


    height:

    56px;


    font-size:

    .95rem;


}



.login-btn img{


    width:

    26px;


    height:

    26px;


}







/*==================================================
    Divider
==================================================*/


.login-divider{


    gap:

    10px;


}



.login-divider p{


    font-size:

    .85rem;


}







/*==================================================
    Parent Button
==================================================*/


.parent-login-btn{


    height:

    54px;


    font-size:

    .9rem;


}



.parent-login-btn img{


    width:

    26px;


    height:

    26px;


}







/*==================================================
    Register Link
==================================================*/


.register-link{


    margin-top:

    8px;


}



.register-link p,
.register-link a{


    font-size:

    .85rem;


}




/*==================================================
    Message
==================================================*/


.login-message{


    padding:

    12px 15px;


    font-size:

    .85rem;


}



}


/*==================================================
    Login Responsive
    Tablet Portrait
    487px - 768px
==================================================*/


@media (min-width:487px) and (max-width:768px){



/*==================================================
    Page
==================================================*/


.login-page{

    min-height:100vh;

    background-position:center;

}




/*==================================================
    Container
==================================================*/


.login-container{


    padding:

    20px 16px;


    align-items:

    center;


}






/*==================================================
    Card
==================================================*/


.login-card{


    max-width:

    390px;


    padding:

    26px 22px;


    border-radius:

    28px;


}







/*==================================================
    Header
==================================================*/


.login-header{


    margin-bottom:

    20px;


}



.login-logo{


    width:

    75px;


    margin:

    5px auto 15px;


}



.login-title{


    font-size:

    1.35rem;


    line-height:

    1.8;


}



.login-description{


    font-size:

    .88rem;


    line-height:

    1.9;


}







/*==================================================
    Form Box
==================================================*/


.login-form{


    padding:

    18px;


    border-radius:

    20px;


    gap:

    14px;


}







.login-section-title{


    font-size:

    1rem;


    margin-bottom:

    5px;


}







/*==================================================
    Groups
==================================================*/


.login-group{


    gap:

    7px;


}



.login-group label{


    font-size:

    .82rem;


}








/*==================================================
    Inputs
==================================================*/


.login-input{


    height:

    54px;


    border-radius:

    16px;


    font-size:

    .9rem;


    padding:

    0 16px;


}







.login-input-wrapper .login-input{


    padding-left:

    68px;


}





.login-prefix{


    left:

    15px;


    font-size:

    .85rem;


}







/*==================================================
    Password
==================================================*/


.password-wrapper .login-input{


    padding-left:

    50px;


}



.password-toggle{


    left:

    12px;


    font-size:

    1rem;


}








/*==================================================
    Forgot
==================================================*/


.login-forgot{


    margin-top:

    -3px;


}



.login-forgot a{


    font-size:

    .82rem;


}







/*==================================================
    Main Button
==================================================*/


.login-btn{


    height:

    56px;


    font-size:

    .95rem;


}



.login-btn img{


    width:

    26px;


    height:

    26px;


}








/*==================================================
    Divider
==================================================*/


.login-divider{


    gap:

    10px;


}



.login-divider p{


    font-size:

    .85rem;


}







/*==================================================
    Parent Button
==================================================*/


.parent-login-btn{


    height:

    54px;


    font-size:

    .9rem;


}



.parent-login-btn img{


    width:

    26px;


    height:

    26px;


}







/*==================================================
    Register
==================================================*/


.register-link{


    margin-top:

    8px;


}



.register-link p,
.register-link a{


    font-size:

    .85rem;


}








/*==================================================
    Message
==================================================*/


.login-message{


    padding:

    12px;


    font-size:

    .82rem;


}

/* حذف هایلایت پیشفرض موبایل */
        * {
            -webkit-tap-highlight-color: transparent;
        }
    
        /* فوکوس حرفه‌ای */
        a,
        button,
        input,
        select,
        textarea {
            transition: all 0.2s ease;
            border-radius: 12px;
        }
    
        /* افکت لمس موبایل */
        a:active,
        button:active {
            transform: scale(0.95);
        }




}

/*==================================================
    Login Mobile Background
    486px and below
==================================================*/

@media (max-width:486px){


.login-page{

    min-height:100vh;

    background:

    linear-gradient(
        180deg,
        rgba(108,99,255,.15),
        rgba(0,200,255,.12)
    ),

    url('/assets/images/auth/login-bg-mobile.webp');


    background-size:cover;

    background-position:center top;

    background-repeat:no-repeat;

}





.login-page::before{

    background:

    linear-gradient(
        180deg,
        rgba(245,247,255,.35),
        rgba(245,247,255,.9)
    );


    backdrop-filter:blur(2px);

}




.login-container{

    padding:

    15px;


    align-items:center;


}




.login-card{


    max-width:100%;


    padding:

    25px 14px;


    border-radius:28px;


    box-shadow:

    0 20px 50px rgba(54,67,120,.15);


}





.login-header{

    margin-bottom:20px;

}



.login-logo{

    width:75px;

    margin:8px;

}



.login-title{


    font-size:1.25rem;

    line-height:1.8;


}



.login-description{


    font-size:.85rem;


    line-height:1.8;

}





.login-form{


    padding:

    18px;


    border-radius:22px;


    gap:14px;


}





.login-section-title{


    font-size:1rem;


    margin-bottom:5px;

}




.login-input{


    height:52px;


    font-size:.9rem;


}





.login-btn{


    height:54px;

    font-size:.95rem;


}





.login-btn img{


    width:24px;

    height:24px;

}




.parent-login-btn{


    height:52px;

    font-size:.9rem;

}



.parent-login-btn img{


    width:24px;

    height:24px;

}




.login-forgot a{

    font-size:.8rem;

}



.register-link{

    font-size:.85rem;

}

/* حذف هایلایت پیشفرض موبایل */
        * {
            -webkit-tap-highlight-color: transparent;
        }
    
        /* فوکوس حرفه‌ای */
        a,
        button,
        input,
        select,
        textarea {
            transition: all 0.2s ease;
            border-radius: 12px;
        }
    
        /* افکت لمس موبایل */
        a:active,
        button:active {
            transform: scale(0.95);
        }




}


/*==================================================
    Login Mobile Small
    360px and below
==================================================*/


@media (max-width:360px){



/*==================================================
    Page
==================================================*/


.login-page{


    background-position:

    center top;


}





/*==================================================
    Container
==================================================*/


.login-container{


    padding:

    12px;


    width:

    100%;


    box-sizing:

    border-box;


}







/*==================================================
    Card
==================================================*/


.login-card{


    width:

    100%;


    max-width:

    100%;


    box-sizing:

    border-box;


    padding:

    22px 10px;


    border-radius:

    24px;


}








/*==================================================
    Header
==================================================*/


.login-header{


    margin-bottom:

    16px;


}



.login-logo{


    width:

    65px;


    margin:

    5px auto 10px;


}



.login-title{


    font-size:

    1.15rem;


    line-height:

    1.9;


}



.login-description{


    font-size:

    .8rem;


    margin-top:

    6px;


}








/*==================================================
    Form
==================================================*/


.login-form{


    width:

    100%;


    box-sizing:

    border-box;


    padding:

    15px 10px;


    border-radius:

    18px;


    gap:

    12px;


}







.login-section-title{


    font-size:

    .95rem;


}







/*==================================================
    Inputs
==================================================*/


.login-input-wrapper,
.password-wrapper{


    width:

    100%;


}





.login-input{


    width:

    100%;


    height:

    50px;


    border-radius:

    14px;


    font-size:

    .85rem;


    padding:

    0 14px;


}





.login-input-wrapper .login-input{


    padding-left:

    62px;


}





.login-prefix{


    left:

    14px;


    font-size:

    .8rem;


}







/*==================================================
    Password
==================================================*/


.password-wrapper .login-input{


    padding-left:

    45px;


}



.password-toggle{


    left:

    10px;


    font-size:

    .95rem;


}








/*==================================================
    Forgot
==================================================*/


.login-forgot a{


    font-size:

    .78rem;


}







/*==================================================
    Buttons
==================================================*/


.login-btn{


    height:

    52px;


    border-radius:

    30px;


    font-size:

    .9rem;


}



.login-btn img{


    width:

    22px;


    height:

    22px;


}





.parent-login-btn{


    height:

    50px;


    font-size:

    .85rem;


}



.parent-login-btn img{


    width:

    22px;


    height:

    22px;


}







/*==================================================
    Divider
==================================================*/


.login-divider{


    margin:

    0;


}



.login-divider p{


    font-size:

    .8rem;


}







/*==================================================
    Register
==================================================*/


.register-link{


    gap:

    4px;


}



.register-link p,
.register-link a{


    font-size:

    .8rem;


}







/*==================================================
    Message
==================================================*/


.login-message{


    padding:

    10px;


    font-size:

    .78rem;


}

/* حذف هایلایت پیشفرض موبایل */
        * {
            -webkit-tap-highlight-color: transparent;
        }
    
        /* فوکوس حرفه‌ای */
        a,
        button,
        input,
        select,
        textarea {
            transition: all 0.2s ease;
            border-radius: 12px;
        }
    
        /* افکت لمس موبایل */
        a:active,
        button:active {
            transform: scale(0.95);
        }



}