/* ═══════════════════════════════════════════════════════════════════════
   vf-brand.css — v4.200.0 (التحديث 200)

   1) منظومة الهوية الموحّدة من #3e4e66:
      كل ألوان الموقع (الأكسنت والأزرار والنصوص والتدرجات والدرجات
      الباهتة والغامقة) صارت مشتقة من لون واحد — التوكنات أدناه
      هي المرجع الرسمي لأي إضافة مستقبلية.

   2) العناوين الرئيسية الموحّدة:
      «توحيد كل العناوين الرئيسية الكبيرة في الموقع 18 بكسل
      للديسكتوب وخط مناسب للشاشات الصغيرة»:
      • الديسكتوب (≥640px): كل عنوان رئيسي h1 + أي h2/h3/h4
        كبير (أكبر من 18px) = 18px بالضبط.
      • الشاشات الصغيرة (<640px): 16px — حجم مريح للقراءة
        على الموبايل دون تضخيم.
      • عنوان الصفحة في الهيدر (vf-topbar__title) يبقى 16px
        بتصميمه المدمج — هو عنصر الهيدر وليس عنوانًا داخل
        المحتوى، وصفحات الطباعة خارج هذا النظام.
      • أرقام البيانات الكبيرة (الأرصدة والمبالغ ونتائج الحاسبة)
        ليست عناوين — تبقى بحجمها المميز.
   هذا الملف يُحمَّل آخرًا في _head.php فيفوز بالأولوية فوق
   أي كلاس Tailwind أو قاعدة قديمة.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
    /* ── الهوية: مشتقات #3e4e66 ─────────────────────────────── */
    --vf-brand:        #3e4e66;   /* الأساس — الأكسنت والأزرار */
    --vf-brand-dark:   #33415a;   /* الغامق — hover والتأكيد */
    --vf-brand-deep:   #2c3849;   /* الأغمق — pressed والنصوص القوية */
    --vf-brand-muted:  #8595ae;   /* الباهت — النصوص الثانوية والمعطلة */
    --vf-brand-mid:    #a8b6ca;   /* متوسط فاتح — حدود ناعمة */
    --vf-brand-tint:   #e4e9f1;   /* خلفية فاتحة من اللون */
    --vf-brand-faint:  #f1f4f8;   /* أخف درجة خلفية */
    --vf-brand-border: #d3dbe7;   /* حدود فاتحة */

    /* ── سلم العناوين الموحّد ────────────────────────────────── */
    --vf-h-main: 18px;   /* العنوان الرئيسي — ديسكتوب */
    --vf-h-main-sm: 16px; /* العنوان الرئيسي — الشاشات الصغيرة */
}

/* ── 1) كل العناوين الرئيسية h1 = 18px ───────────────────────────────
   h1 المجرّد للعناوين بلا كلاسات، وh1[class] يتغلب على أي كلاس
   حجم من Tailwind (text-2xl / text-3xl / …) لأن خصوصيته أعلى.
   يستثنى: عنوان الهيدر المدمج وصفحات الطباعة. */
h1 {
    font-size: var(--vf-h-main);
    line-height: 1.45;
}

h1[class]:not(.vf-topbar__title):not(.prt-title) {
    font-size: var(--vf-h-main);
}

/* ── 2) أي h2/h3/h4 بعناوين كبيرة (>18px) يُقيَّد على 18px ──────────
   الحدود الصغيرة (text-sm / text-base) لا تُلمس — التوحيد للعناوين
   الكبيرة فقط، ولا نضخّم العناوين الصغيرة عمدًا. */
h2[class*="text-xl"],
h2[class*="text-2xl"],
h2[class*="text-3xl"],
h2[class*="text-4xl"],
h3[class*="text-xl"],
h3[class*="text-2xl"],
h3[class*="text-3xl"],
h3[class*="text-4xl"],
h4[class*="text-xl"],
h4[class*="text-2xl"],
h4[class*="text-3xl"],
h4[class*="text-4xl"] {
    font-size: var(--vf-h-main);
    line-height: 1.45;
}

/* ── 3) الشاشات الصغيرة: 16px ──────────────────────────────────────── */
@media (max-width: 639.98px) {
    h1,
    h1[class]:not(.vf-topbar__title):not(.prt-title),
    h2[class*="text-xl"],
    h2[class*="text-2xl"],
    h2[class*="text-3xl"],
    h2[class*="text-4xl"],
    h3[class*="text-xl"],
    h3[class*="text-2xl"],
    h3[class*="text-3xl"],
    h3[class*="text-4xl"],
    h4[class*="text-xl"],
    h4[class*="text-2xl"],
    h4[class*="text-3xl"],
    h4[class*="text-4xl"] {
        font-size: var(--vf-h-main-sm);
    }
}

/* ── 4) شبكة أمان لكلاسات العناوين المخصّصة القديمة ──────────────────
   أي كلاس عنوان معروف في الثيم يُوحَّد على السلم نفسه (desktop/mobile). */
.vf-cover__title,
.vf-section-title h2,
.auth-title,
.app-hero-title,
.page-title,
.vf-gate-title,
.vf-profit-hero__title,
.vf-profit-section__title,
.vf-center-title,
.event-section-title {
    font-size: var(--vf-h-main);
}

@media (max-width: 639.98px) {
    .vf-cover__title,
    .vf-section-title h2,
    .auth-title,
    .app-hero-title,
    .page-title,
    .vf-gate-title,
    .vf-profit-hero__title,
    .vf-profit-section__title,
    .vf-center-title,
    .event-section-title {
        font-size: var(--vf-h-main-sm);
    }
}

/* ── 5) v4.202.0 (التحديث 202) — نص الأزرار يبقى أبيض عند التمرير ────
   القاعدة القديمة في style-3.1.css:
       a:hover, a:active, a:focus { color: var(--vr-theme-color) !important; }
   كانت تُطبَّق على كل روابط الموقع — بما فيها الأزرار المبنية من
   <a> — فكان نص الزر يتحول إلى لون الهوية نفسه (#3e4e66) وهو نفسه
   لون أرضية الزر، فيختفي النص تمامًا عند التمرير.
   هذه القواعد تحمي كل أنماط أزرار الروابط ذات الأرضية الملونة:
   نصها يبقى أبيض عند التمرير والنقر والتركيز — والأولوية لها لأن
   هذا الملف يُحمَّل آخرًا وخصوصية سيليكتوراتها أعلى. */
a.vf-btn-primary:hover, a.vf-btn-primary:active, a.vf-btn-primary:focus,
a.bg-primary:hover, a.bg-primary:active, a.bg-primary:focus,
a.vf-profit-cta:hover, a.vf-profit-cta:active, a.vf-profit-cta:focus,
a.vf-social-btn:hover, a.vf-social-btn:active, a.vf-social-btn:focus,
a.bg-slate-600:hover, a.bg-slate-600:active, a.bg-slate-600:focus {
    color: #fff !important;
}

/* ── 6) v4.203.0 (التحديث 203) — التابات النشطة والأزرار العائمة ────
   نفس الجذر (a:hover/a:active/a:focus مع !important في style-3.1.css)
   لكن الحماية السابقة غطّت الأزرار فقط عند التمرير؛ بقي عناصر نصّها
   يختفي فوق أرضيتها الداكنة في الحالة الثابتة نفسها:
     • التاب النشط في شريط التابات الأفقي (مركز الموارد وبقية الصفحات —
       vf-center-tab.is-active): أرضية الهوية ونص أبيض، لكن بمجرد النقر
       يبقى الرابط focused/active فتقلبه القاعدة العامة إلى لون الهوية
       #3e4e66 فوق أرضية الهوية نفسها = يختفي تمامًا.
     • تابات المحفظة والمحتوى المقيد (vf-wtab.is-active): نفس النمط.
     • زر البحث العائم (vf-search-fab): أرضيته لون الهوية وأيقونته ترث
       لون الرابط — تختفي عند التمرير/التركيز.
     • زر النشر العائم (vf-author-fab): أرضية بيضاء بنص داكن في الوضع
       الفاتح وداكنة بنص فاتح في الداكن — نثبّت لون تصميمه في كل وضع.
   القواعد أدناه تحمي الحالة الثابتة و hover/active/focus معًا،
   والملف يُحمَّل آخرًا فيفوز بالأولوية. */
a.vf-center-tab.is-active,
a.vf-center-tab.is-active:hover,
a.vf-center-tab.is-active:active,
a.vf-center-tab.is-active:focus,
a.vf-wtab.is-active,
a.vf-wtab.is-active:hover,
a.vf-wtab.is-active:active,
a.vf-wtab.is-active:focus,
a.vf-search-fab,
a.vf-search-fab:hover,
a.vf-search-fab:active,
a.vf-search-fab:focus {
    color: #fff !important;
}
a.vf-author-fab:hover,
a.vf-author-fab:active,
a.vf-author-fab:focus {
    color: #0f172a !important;
}
[data-bs-theme="dark"] a.vf-author-fab:hover,
[data-bs-theme="dark"] a.vf-author-fab:active,
[data-bs-theme="dark"] a.vf-author-fab:focus {
    color: #f8fafc !important;
}

/* ══════════════════════════════════════════════════════════════════
   v4.206.0 (تحديث 206 — البند 1) — أساسيات صفحات الدخول المفقودة ══

   قالب feedtok لا يحمّل شبكة Bootstrap ولا ملف common.css الذي يضم
   كتلة تنسيقات الأوث — لذلك كانت بطاقات صفحات (تسجيل الحساب / نسيان
   كلمة المرور / إعادة تعيينها) بلا عرض أقصى ولا شكل بطاقة، وكان زر
   «عين» إظهار كلمة المرور بلا تنفيذ في كل النماذج (تعريفه موجود في
   ملف style-3.1.min.css غير المحمّل فقط).

   هذه القواعد تُضيف الحد الأدنى المطلوب فقط:
   • بطاقة الأوث: عرض أقصى 480px في المنتصف، خلفية وحواف وظل بوضعي
     الفاتح/الداكن (نفس لغة مودال تسجيل الدخول: أبيض / slate-900).
     لا تمسّ مودال الدخول نفسه — لا يستخدم هذه الكلاسات.
   • زر العين: تثبيت داخل الحقل (inset-inline-end يتكفل بالـRTL
     تلقائيًا) + مساحة داخل الحقل له.
   • العنوان الفرعي للبطاقة بنفس لغة مودال الدخول. */

.auth-module-container {
    display: flex;
    justify-content: center;
    padding: 2rem 1rem;
}

.auth-module-container .auth-card {
    width: 100%;
    max-width: 480px;
    background: #ffffff;
    border: 1px solid #edf1f5;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08);
    padding: 2rem 1.5rem;
}

[data-bs-theme="dark"] .auth-module-container .auth-card {
    background: #0f172a;
    border-color: #1e293b;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
}

.auth-subtitle {
    font-size: 0.95rem;
    font-weight: 400;
    color: #64748b;
    margin: 0.25rem 0 0;
}

[data-bs-theme="dark"] .auth-subtitle {
    color: #94a3b8;
}

/* زر إظهار/إخفاء كلمة المرور — داخل الحقل في الاتجاهين */
.password-wrapper {
    position: relative;
}

.password-wrapper .vf-input {
    padding-inline-end: 2.75rem;
}

.auth-password-toggle {
    align-items: center;
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    display: flex;
    justify-content: center;
    padding: 0.5rem;
    position: absolute;
    inset-inline-end: 0.438rem;
    top: 50%;
    transform: translateY(-50%);
    transition: color 0.2s ease;
    z-index: 5;
}

.auth-password-toggle:hover,
.auth-password-toggle:active {
    color: var(--vr-theme-color, #3e4e66);
}

[data-bs-theme="dark"] .auth-password-toggle {
    color: #64748b;
}

[data-bs-theme="dark"] .auth-password-toggle:hover,
[data-bs-theme="dark"] .auth-password-toggle:active {
    color: #e2e8f0;
}

.auth-password-toggle svg {
    height: 1.25em;
    width: 1.25em;
    fill: currentColor;
}

.auth-password-toggle .icon-eye {
    display: block;
}

.auth-password-toggle .icon-eye-slash,
.auth-password-toggle.show-pass .icon-eye {
    display: none;
}

.auth-password-toggle.show-pass .icon-eye-slash {
    display: block;
}

/* ═══════════════════════════════════════════════════════════════════════
   v4.207.0 (التحديث 207 — البند 1): أرضية عالمية لكل المودال شيتس
   ─────────────────────────────────────────────────────────────────────
   المشكلة: app.css يعرّف .modal-content بدون background-color إطلاقًا
   (بديل بووتستراب مخصص)، وقائمة v4.136 كانت تمنح الخلفية الصلبة
   لمودالات محددة بالاسم فقط (vfReadModal / vfCommentModal / vfShareModal
   / vfReactionModal / vfAboutModal / vfFollowersModal / vfFollowingModal
   / vfViewersModal + صفحات الفيد). أي مودال خارج القائمة وبلا كلاس
   Tailwind (bg-white …) ظل شفافًا تمامًا — أبرزها شيت «خيارات المنشور»
   (vfPostActionsModal) وشيت «الإبلاغ» (vfReportModal) في صفحة المنشور
   الفردى داخل تطبيق الأندرويد وباقي المودالات الشيت.

   الحل: أرضية احتياطية عالمية بنفس لوحة الشيتات العاملة
   (#ffffff فاتح / #0f172a داكن). تُكتب بـ :where(.modal-content)
   (خصوصية صفر للجزء الأخير) فلا تتغلب أبدًا على أي خلفية مقصودة
   موجودة — قواعد v4.136 !important، وkلاسات Tailwind bg-white /
   dark:bg-slate-900، و#vfNutriModal، و.vf-lp-modal، و
   .post-format-modal (يتغلب بالخصوصية 0,2,0) كلها تبقى كما هي
   بأمان؛ القاعدة تعمل فقط حين لا يوجد أي تعريف آخر للخلفية.
   ═══════════════════════════════════════════════════════════════════════ */
:where(.modal-content) {
    background-color: #ffffff;
}

[data-bs-theme="dark"]:where(html) :where(.modal-content),
html.dark :where(.modal-content) {
    background-color: #0f172a;
}