@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800;900&display=swap');

/* =========================================================
   WARM ORANGE / CREAM AUTH THEME
========================================================= */

:root{
    --blue:#e87824;
    --blue2:#f39a4a;
    --blue3:#b95012;
    --cyan:#ffb66d;

    --text:#382a20;
    --muted:#817061;

    --font-family:"Vazirmatn", Tahoma, Arial, sans-serif;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    min-height:100%;
}

html{
    font-family:var(--font-family);
    background:#eee2d3;
}

body{
    direction:rtl;
    min-height:100vh;
    overflow-x:hidden;

    color:var(--text);

    font-family:var(--font-family) !important;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(232,120,36,.12),
            transparent 32%
        ),
        radial-gradient(
            circle at 10% 70%,
            rgba(201,137,82,.08),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #f3eadd 0%,
            #eee2d3 50%,
            #e9ddce 100%
        );
}

body::before{
    content:"";

    position:fixed;
    inset:0;

    z-index:-3;
    pointer-events:none;

    background:
        radial-gradient(
            circle at 20% 30%,
            rgba(232,120,36,.09),
            transparent 25%
        ),
        radial-gradient(
            circle at 80% 65%,
            rgba(243,154,74,.07),
            transparent 28%
        );
}

body::after{
    content:"";

    position:fixed;
    inset:0;

    z-index:-2;
    pointer-events:none;

    opacity:.07;

    background-image:
        radial-gradient(
            rgba(130,87,53,.55) 1px,
            transparent 1px
        );

    background-size:70px 70px;

    mask-image:linear-gradient(
        to bottom,
        black,
        transparent 90%
    );

    -webkit-mask-image:linear-gradient(
        to bottom,
        black,
        transparent 90%
    );
}

/*
|--------------------------------------------------------------------------
| عمومی
|--------------------------------------------------------------------------
*/

a{
    color:inherit;
    text-decoration:none;
}

button,
input,
textarea,
select{
    font-family:var(--font-family) !important;
}

input,
textarea,
button{
    direction:rtl;
}

::selection{
    color:#fffaf4;
    background:rgba(204,92,18,.40);
}

/*
|--------------------------------------------------------------------------
| صفحه
|--------------------------------------------------------------------------
*/

.auth-page{
    min-height:100vh;

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

    padding:35px 20px;

    position:relative;
}

.auth-page::before{
    content:"";

    position:fixed;

    left:50%;
    bottom:-220px;

    width:900px;
    height:400px;

    transform:translateX(-50%);

    border-radius:50%;

    background:
        radial-gradient(
            ellipse,
            rgba(232,120,36,.14),
            transparent 65%
        );

    filter:blur(35px);

    pointer-events:none;
}

/*
|--------------------------------------------------------------------------
| کارت ورود
|--------------------------------------------------------------------------
*/

.auth-card{
    width:min(470px,100%);

    position:relative;

    padding:42px 42px 35px;

    border-radius:24px;

    border:1px solid rgba(184,101,39,.30);

    background:
        linear-gradient(
            145deg,
            rgba(249,242,232,.98),
            rgba(239,227,211,.99)
        );

    box-shadow:
        0 30px 75px rgba(83,53,29,.12),
        0 0 35px rgba(232,120,36,.045),
        inset 0 1px 0 rgba(255,255,255,.55);

    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);

    overflow:hidden;
}

.auth-card::before{
    content:"";

    position:absolute;

    top:0;
    left:15%;
    right:15%;

    height:2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--blue),
            var(--cyan),
            var(--blue),
            transparent
        );

    box-shadow:
        0 0 14px rgba(232,120,36,.25),
        0 0 25px rgba(243,154,74,.15);
}

.auth-card::after{
    content:"";

    position:absolute;

    width:280px;
    height:280px;

    top:-180px;
    left:50%;

    transform:translateX(-50%);

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(232,120,36,.10),
            transparent 68%
        );

    pointer-events:none;
}

/*
|--------------------------------------------------------------------------
| لوگو
|--------------------------------------------------------------------------
*/

.auth-logo{
    position:relative;
    z-index:2;

    text-align:center;

    margin-bottom:25px;
}

.auth-logo a{
    display:inline-flex;

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

.auth-logo img{
    display:block;

    width:auto;
    height:85px;

    max-width:230px;

    object-fit:contain;

    filter:
        drop-shadow(0 0 10px rgba(232,120,36,.22))
        drop-shadow(0 0 24px rgba(243,154,74,.10));
}

.auth-fallback{
    text-align:center;
}

.auth-fallback strong{
    display:block;

    color:#493426;

    font-family:var(--font-family) !important;

    font-size:28px;
    font-weight:900;
}

.auth-fallback span{
    display:block;

    margin-top:4px;

    color:#c45b19;

    font-family:Arial,Tahoma,sans-serif !important;

    font-size:8px;
    font-weight:900;

    letter-spacing:2px;
}

/*
|--------------------------------------------------------------------------
| عنوان
|--------------------------------------------------------------------------
*/

.auth-card h1{
    position:relative;
    z-index:2;

    margin:0 0 8px;

    text-align:center;

    color:#493426;

    font-family:var(--font-family) !important;

    font-size:29px;
    line-height:1.4;
    font-weight:900;
}

.auth-sub{
    position:relative;
    z-index:2;

    margin:0 0 25px;

    text-align:center;

    color:#887665;

    font-family:var(--font-family) !important;

    font-size:11px;
    line-height:2;
    font-weight:400;
}

/*
|--------------------------------------------------------------------------
| پیام خطا
|--------------------------------------------------------------------------
*/

.alert{
    position:relative;
    z-index:2;

    display:flex;
    align-items:center;

    min-height:52px;

    margin-bottom:20px;

    padding:0 15px;

    border-radius:11px;

    font-family:var(--font-family) !important;

    font-size:10px;
    line-height:1.8;
}

.alert-error{
    color:#a93630;

    border:1px solid rgba(203,78,66,.30);

    background:
        linear-gradient(
            90deg,
            rgba(203,78,66,.07),
            rgba(203,78,66,.035)
        );
}

/*
|--------------------------------------------------------------------------
| فرم
|--------------------------------------------------------------------------
*/

form{
    position:relative;
    z-index:2;
}

.field{
    margin-bottom:18px;
}

.field label{
    display:block;

    margin-bottom:8px;

    color:#594332;

    font-family:var(--font-family) !important;

    font-size:10px;
    font-weight:800;
}

.field input{
    width:100%;
    height:53px;

    display:block;

    padding:0 16px;

    outline:none;

    border-radius:11px;

    border:1px solid rgba(184,101,39,.25);

    background:
        linear-gradient(
            145deg,
            #f8f0e5,
            #f0e4d5
        );

    color:#382a20;

    font-family:var(--font-family) !important;

    font-size:12px;
    font-weight:500;

    transition:
        border-color .25s,
        box-shadow .25s,
        background .25s;
}

.field input::placeholder{
    color:#a08d79;
}

.field input:hover{
    border-color:rgba(204,92,18,.45);
}

.field input:focus{
    border-color:var(--blue);

    box-shadow:
        0 0 0 3px rgba(232,120,36,.08),
        0 0 20px rgba(232,120,36,.08);
}

/*
|--------------------------------------------------------------------------
| Autofill مرورگر
|--------------------------------------------------------------------------
*/

.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus{
    -webkit-text-fill-color:#382a20;

    -webkit-box-shadow:
        0 0 0 1000px #f4e9da inset,
        0 0 0 3px rgba(232,120,36,.035);

    transition:
        background-color 9999s ease-in-out 0s;
}

/*
|--------------------------------------------------------------------------
| راهنمای رمز
|--------------------------------------------------------------------------
*/

.password-hint{
    margin-top:6px;

    color:#96836f;

    font-family:var(--font-family) !important;

    font-size:8px;
    line-height:1.8;
}

/*
|--------------------------------------------------------------------------
| دکمه ورود
|--------------------------------------------------------------------------
*/

.auth-btn{
    width:100%;
    height:55px;

    margin-top:7px;

    border:0;
    border-radius:12px;

    cursor:pointer;

    color:#fffaf4;

    font-family:var(--font-family) !important;

    font-size:13px;
    font-weight:900;

    background:
        linear-gradient(
            105deg,
            #b95012,
            #e87824 45%,
            #f5a354
        );

    box-shadow:
        0 10px 28px rgba(184,80,18,.18),
        0 0 24px rgba(232,120,36,.06);

    transition:
        transform .25s,
        filter .25s,
        box-shadow .25s;
}

.auth-btn:hover{
    transform:translateY(-3px);

    filter:brightness(1.04);

    box-shadow:
        0 14px 35px rgba(184,80,18,.25),
        0 0 28px rgba(232,120,36,.12);
}

.auth-btn:active{
    transform:translateY(-1px);
}

.auth-btn:focus-visible{
    outline:none;

    box-shadow:
        0 0 0 3px rgba(184,101,39,.12),
        0 10px 28px rgba(184,80,18,.20);
}

/*
|--------------------------------------------------------------------------
| لینک‌ها
|--------------------------------------------------------------------------
*/

.auth-link{
    position:relative;
    z-index:2;

    margin-top:18px;

    text-align:center;

    color:#796655;

    font-family:var(--font-family) !important;

    font-size:10px;
    line-height:2;
}

.auth-link a{
    color:#b95012;

    font-family:var(--font-family) !important;

    font-weight:900;

    transition:
        color .25s,
        text-shadow .25s;
}

.auth-link a:hover{
    color:#e87824;

    text-shadow:
        0 0 10px rgba(232,120,36,.14);
}

.auth-link:last-child{
    margin-top:28px;

    padding-top:22px;

    border-top:1px solid rgba(184,101,39,.16);
}

.auth-link:last-child::before{
    content:"یا";

    position:absolute;

    top:-9px;
    left:50%;

    transform:translateX(-50%);

    padding:0 12px;

    color:#806b58;

    background:#f4eadd;

    font-family:var(--font-family) !important;

    font-size:11px;
    font-weight:600;
}

/*
|--------------------------------------------------------------------------
| اسکرول بار
|--------------------------------------------------------------------------
*/

::-webkit-scrollbar{
    width:7px;
}

::-webkit-scrollbar-track{
    background:#eee2d3;
}

::-webkit-scrollbar-thumb{
    background:
        linear-gradient(
            180deg,
            #e99551,
            #c56a2c
        );

    border-radius:20px;
}

::-webkit-scrollbar-thumb:hover{
    background:
        linear-gradient(
            180deg,
            #e87824,
            #b95012
        );
}

/*
|--------------------------------------------------------------------------
| موبایل
|--------------------------------------------------------------------------
*/

@media(max-width:600px){

    .auth-page{
        padding:20px 12px;
    }

    .auth-card{
        padding:35px 23px 28px;

        border-radius:20px;
    }

    .auth-logo{
        margin-bottom:20px;
    }

    .auth-logo img{
        height:72px;
        max-width:190px;
    }

    .auth-card h1{
        font-size:25px;
    }

    .auth-sub{
        font-size:10px;
        margin-bottom:22px;
    }

    .field{
        margin-bottom:16px;
    }

    .field input{
        height:51px;
        font-size:11px;
    }

    .auth-btn{
        height:53px;
        font-size:12px;
    }

    .auth-link{
        font-size:9px;
    }
}

/*
|--------------------------------------------------------------------------
| موبایل کوچک
|--------------------------------------------------------------------------
*/

@media(max-width:380px){

    .auth-page{
        padding:15px 10px;
    }

    .auth-card{
        padding:30px 18px 25px;

        border-radius:18px;
    }

    .auth-card h1{
        font-size:23px;
    }

    .auth-sub{
        font-size:9px;
    }

    .auth-logo img{
        height:65px;
        max-width:175px;
    }

    .field input{
        height:50px;
    }

    .auth-btn{
        height:52px;
    }
}

/*
|--------------------------------------------------------------------------
| کاهش انیمیشن
|--------------------------------------------------------------------------
*/

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

    *,
    *::before,
    *::after{
        scroll-behavior:auto !important;
        transition:none !important;
        animation:none !important;
    }
}