/* =========================
   KOVIA AUTH STYLE
========================= */


.auth-wrapper{

    min-height:100vh;

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

    padding:25px;

    background:#ffffff;

    direction:rtl;
}





.auth-card{

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

    background:#ffffff;

    padding:40px 35px;

    border-radius:28px;

    border:1px solid #eee5d8;

    box-shadow:
    0 20px 55px rgba(91,58,32,.10);

    text-align:center;

    animation:authShow .45s ease;

}




@keyframes authShow{

from{

    opacity:0;
    transform:translateY(15px);

}

to{

    opacity:1;
    transform:translateY(0);

}

}





/* برند */

.brand h1{

    margin:0;

    font-size:38px;

    letter-spacing:7px;

    color:#4b2d19;

    font-weight:900;

}



.brand span{

    display:block;

    margin-top:8px;

    color:#888;

    font-size:14px;

}





.auth-icon{

    width:75px;

    height:75px;

    display:flex;

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

    margin:25px auto;

    border-radius:50%;

    background:#faf5ef;

    font-size:38px;

}





.auth-card h2{

    margin-top:5px;

    color:#342116;

    font-size:24px;

}





.auth-card p{

    color:#777;

    font-size:14px;

    margin-bottom:25px;

}





/* فرم */

.auth-form{

    margin-top:20px;

}



.auth-form label{

    display:block;

    text-align:right;

    margin-bottom:8px;

    color:#4a3423;

    font-weight:600;

}





.auth-form input{

    width:100%;

    height:58px;

    border-radius:16px;

    border:1px solid #e5ddd4;

    background:#fff;

    font-size:20px;

    text-align:center;

    outline:none;

    transition:.2s;

}



.auth-form input:focus{

    border-color:#8b5e35;

    box-shadow:

    0 0 0 4px rgba(139,94,53,.12);

}





button{

    width:100%;

    height:58px;

    margin-top:25px;

    border:0;

    border-radius:16px;

    background:#5b3820;

    color:#fff;

    font-size:17px;

    font-weight:700;

    cursor:pointer;

    transition:.2s;

}



button:hover{

    transform:translateY(-2px);

    box-shadow:

    0 12px 30px rgba(91,56,32,.25);

}





/* OTP */


.otp-boxes{

    display:flex;

    direction:ltr;

    justify-content:center;

    gap:10px;

    margin:30px 0;

}





.otp-boxes input{

    width:50px;

    height:60px;

    border-radius:16px;

    border:1px solid #e5ddd4;

    text-align:center;

    font-size:25px;

    font-weight:700;

    color:#4b2d19;

    outline:none;

    transition:.2s;

}





.otp-boxes input:focus{

    border-color:#8b5e35;

    box-shadow:

    0 0 0 4px rgba(139,94,53,.12);

}





.phone-box{

    background:#faf5ef;

    color:#5b3820;

    padding:12px;

    border-radius:14px;

    margin:15px 0;

    font-weight:700;

}





.auth-message{

    margin:15px 0;

    padding:12px;

    border-radius:12px;

    background:#fff6e9;

    color:#7a4a1d;

}





.error{

    color:#c0392b;

    font-size:13px;

    margin-top:8px;

}





.logout{

    display:block;

    margin-top:25px;

    color:#5b3820;

    text-decoration:none;

    font-weight:600;

}





/* موبایل */


@media(max-width:480px){


.auth-wrapper{

    padding:15px;

}



.auth-card{

    padding:30px 20px;

    border-radius:24px;

}



.brand h1{

    font-size:32px;

}



.otp-boxes{

    gap:6px;

}



.otp-boxes input{

    width:42px;

    height:54px;

    font-size:22px;

}


}

.auth-icon{

    width:80px;
    height:80px;

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

    margin:25px auto;

    border-radius:50%;

    background:#faf5ef;

    color:#5b3820;

    font-size:36px;

    box-shadow:
    0 10px 25px rgba(91,56,32,.08);

}