@font-face{
    font-family:Vazirmatn;
    src:url("/assets/css/font/Vazirmatn-Regular.woff2") format("woff2");
    font-weight:400;
}

@font-face{
    font-family:Vazirmatn;
    src:url("/assets/css/font/Vazirmatn-Medium.woff2") format("woff2");
    font-weight:500;
}

@font-face{
    font-family:Vazirmatn;
    src:url("/assets/css/font/Vazirmatn-Bold.woff2") format("woff2");
    font-weight:700;
}

:root{

    --primary:#ef4056;
    --primary-hover:#e61f3b;
    --border:#e0e0e2;
    --text:#3f4064;
    --muted:#81858b;
    --bg:#f5f5f5;
    --white:#fff;

}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Vazirmatn,sans-serif;
}

body{

    direction:rtl;
    background:var(--bg);
    color:var(--text);

}

.auth-page{

    width:100%;
    min-height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:32px;

}

.auth-card{

    width:100%;
    max-width:430px;

    background:#fff;

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

    border-radius:20px;

    padding:42px;

    transition:.25s;

}

.auth-card:hover{

    box-shadow:0 15px 40px rgba(0,0,0,.06);

}

.logo{

    display:flex;

    justify-content:center;

    margin-bottom:30px;

}

.logo img{

    width:150px;

}

.title{

    text-align:center;

    font-size:28px;

    font-weight:700;

    margin-bottom:10px;

}

.subtitle{

    text-align:center;

    color:var(--muted);

    line-height:30px;

    margin-bottom:35px;

}

.form-group{

    margin-bottom:22px;

}

.form-group label{

    display:block;

    margin-bottom:8px;

    font-size:15px;

    font-weight:600;

}

.form-control{

    width:100%;

    height:56px;

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

    border-radius:12px;

    padding:0 18px;

    font-size:15px;

    transition:.2s;

}

.form-control:focus{

    outline:none;

    border-color:var(--primary);

    box-shadow:0 0 0 4px rgba(239,64,86,.10);

}

.btn{

    width:100%;

    height:56px;

    border:none;

    border-radius:12px;

    background:var(--primary);

    color:#fff;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

    transition:.2s;

}

.btn:hover{

    background:var(--primary-hover);

}

.rules{

    margin-top:30px;

    text-align:center;

    color:#777;

    font-size:13px;

    line-height:28px;

}

.rules a{

    color:#19bfd3;

    text-decoration:none;

}

.link{

    margin-top:25px;

    text-align:center;

}

.link a{

    color:#19bfd3;

    text-decoration:none;

}

.error{

    background:#fff5f5;

    color:#d32f2f;

    border:1px solid #ffd5d5;

    border-radius:10px;

    padding:15px;

    margin-bottom:20px;

}

.success{

    background:#f4fff6;

    color:#11833b;

    border:1px solid #bde8ca;

    border-radius:10px;

    padding:15px;

    margin-bottom:20px;

}

@media(max-width:768px){

body{

    background:#fff;

}

.auth-page{

    padding:0;

    align-items:flex-start;

}

.auth-card{

    max-width:100%;

    min-height:100vh;

    border:none;

    border-radius:0;

    padding:38px 24px;

    box-shadow:none;

}

.logo{

    margin-top:15px;

    margin-bottom:35px;

}

.logo img{

    width:170px;

}

.title{

    font-size:30px;

}

.subtitle{

    font-size:15px;

    margin-bottom:30px;

}

.form-control{

    height:58px;

    font-size:17px;

}

.btn{

    height:58px;

    font-size:17px;

}

}