/* ۱. تنظیمات فونت (اصلاح شده برای عدم تداخل با آیکون‌ها) */
@font-face {
    font-family: 'peyda';
    src: url('fonts/Peyda-Regular.woff2') format('woff2');
}

/* اعمال فونت فقط به متون و دکمه‌ها */
body.login, 
body.login label, 
body.login input, 
body.login #nav, 
body.login #backtoblog,
body.login .button {
    font-family: 'peyda', Tahoma, sans-serif !important;
    direction: rtl;
}

/* ۲. اصلاح ساختار ریسپانسیو (جلوگیری از اسکرول افقی) */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* جلوگیری از اسکرول افقی */
}

body.login {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-size: cover;
    background-attachment: fixed;
}

/* ۳. باکس شیشه‌ای (Glassmorphism) */
#login {
    padding: 20px 0 !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 320px !important; /* اندازه استاندارد موبایل */
    position: relative;
    z-index: 10;
}

/* در دسکتاپ کمی عریض‌تر شود */
@media screen and (min-width: 480px) {
    #login {
        max-width: 400px !important;
    }
}

.login form {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
    padding: 30px !important;
    margin-top: 20px !important;
    overflow: hidden;
}

/* ۴. اصلاح ورودی‌ها */
.login input[type="text"], 
.login input[type="password"], 
.login input[type="checkbox"] {
    border-radius: 10px !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    background: rgba(255, 255, 255, 0.5) !important;
    margin-bottom: 15px !important;
}

/* ۵. دکمه ورود */
.login .button-primary {
    background: linear-gradient(45deg, #667eea, #764ba2) !important;
    border: none !important;
    border-shadow: none !important;
    text-shadow: none !important;
    border-radius: 10px !important;
    height: 45px !important;
    width: 100% !important;
    float: none !important; /* جلوگیری از به هم ریختگی در ریسپانسیو */
    margin-top: 10px !important;
}

/* ۶. ذرات متحرک (فقط در پس‌زمینه) */
#particles-js {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* زیر باکس ورود */
    pointer-events: none; /* کلیک‌ها از آن عبور کنند */
}

/* ۷. اصلاح لینک‌های پایین (فراموشی رمز عبور) */
.login #nav, .login #backtoblog {
    text-align: center !important;
    padding: 10px 0 !important;
}

.login #nav a, .login #backtoblog a {
    color: #444 !important;
    transition: all 0.3s;
}

/* ۸. اصلاح فونت آیکون‌ها (جلوگیری از مربع شدن آیکون چشم) */
.dashicons, .dashicons-before:before {
    font-family: dashicons !important;
}
/* اصلاح سایز لوگو */
.login h1 a {
    width: 100% !important; /* اشغال کامل عرض باکس */
    height: 100px !important; /* ارتفاع دلخواه برای لوگو */
    background-size: contain !important; /* لوگو بدون دفرمه شدن بزرگ شود */
    background-position: center center !important;
    margin-bottom: 20px !important;
    padding-bottom: 0 !important;
}

/* اگر لوگو در موبایل باز هم کوچک بود، این بخش را اضافه کنید */
@media screen and (max-width: 480px) {
    .login h1 a {
        height: 80px !important;
    }
}