/* ==========================================================================
   🔤 الخطوط الموحّدة — العربية: 'IBM Plex Sans Arabic' · English: 'IBM Plex Sans Condensed'
   (نفس المتغيّر المستخدم في style.css لضمان التوحيد)
   ========================================================================== */
:root {
    --safa-font-ar: 'IBM Plex Sans Arabic', 'IBM Plex Sans', 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif;
    --safa-font-en: 'IBM Plex Sans Condensed', 'IBM Plex Sans Arabic', 'IBM Plex Sans', 'Tajawal', 'Cairo', system-ui, -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif;
    --safa-font: var(--safa-font-ar);
}
button, input, select, textarea, optgroup { font-family: inherit; }
html[lang="en"], html[lang="en"] body { --safa-font: var(--safa-font-en); }


/* ==========================================================================
   SAFA — UI Enhancements (تحسينات الواجهة العامة)
   --------------------------------------------------------------------------
   يُحمَّل بعد style.css ويعزّزه فقط (لا يستبدل أي شيء).
   الهدف: هيدر مريح بلا ازدحام + لمسات Depth & Micro-interactions حديثة.
   الهوية كما هي: --primary #5B2C86 · --secondary #00B0AD · --accent #FDB714
   ========================================================================== */

:root {
    /* ===== احتياطيات صريحة (تطابق هوية style.css) =====
       تضمن عمل التحسينات في كل الأقسام حتى لو حمّل القسم ملف CSS لا يعرّف
       هذه المتغيّرات (سبب مشكلة: خلفية زر اللغة الشفافة في هيدر الأعضاء). */
    --primary: #5B2C86;
    --primary-hover: #472269;
    --primary-soft: #F8F5FB;
    --secondary: #00B0AD;
    --secondary-hover: #008A89;
    --secondary-soft: #EEFBFA;
    --accent: #FDB714;
    --white: #FFFFFF;
    --ink: #211A2A;
    --body-text: #51495B;
    --muted: #7C7484;
    --border: #E4DEE7;
    --soft-bg: #F7F5F8;
    --canvas: #FCFBFD;
    --focus-ring: 0 0 0 4px rgba(0, 176, 173, 0.16);
    --shadow-sm: 0 2px 8px rgba(41, 24, 58, 0.06);
    --shadow-card: 0 10px 30px rgba(58, 37, 77, 0.06);
    --shadow-hover: 0 20px 54px rgba(41, 24, 58, 0.12);

    /* ===== إيقاع الهيدر ===== */
    --hd-h: clamp(68px, 5.4vw, 84px);
    --hd-pad-x: clamp(0.85rem, 1.6vw, 1.6rem);
    --hd-link-size: clamp(0.82rem, 0.22vw + 0.76rem, 0.98rem);
    --hd-link-pad: clamp(0.55rem, 0.9vw, 1.05rem);

    /* ظلال ناعمة طبقية (بدل الظلال الحادة) */
    --hd-shadow: 0 4px 20px rgba(41, 24, 58, 0.05), 0 1px 3px rgba(41, 24, 58, 0.03);
    --hd-shadow-scrolled: 0 10px 34px rgba(41, 24, 58, 0.10), 0 2px 6px rgba(41, 24, 58, 0.04);

    --hd-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ==========================================================================
   1) الهيدر: sticky + تمويه زجاجي + ظل متدرّج
   ========================================================================== */
.header {
    position: sticky !important;
    top: 0;
    background-color: rgba(255, 255, 255, 0.86) !important;
    /* ⚡ الأداء: تمويه أخف (6px بدل 10px) — نفس الإحساس البصري بتكلفة أقل
       بكثير على معالج الرسوميات، خصوصاً مع القوائم المنسدلة داخل الهيدر. */
    -webkit-backdrop-filter: saturate(140%) blur(6px);
    backdrop-filter: saturate(140%) blur(6px);
    border-bottom: 1px solid var(--border) !important;
    box-shadow: var(--hd-shadow);
    transition: box-shadow 0.3s var(--hd-ease), background-color 0.3s var(--hd-ease);
}

.header.is-scrolled {
    box-shadow: var(--hd-shadow-scrolled);
    background-color: rgba(255, 255, 255, 0.94) !important;
}

/* مساحة أوسع للقائمة بدل 1280 (تحل جزءاً كبيراً من الازدحام) — الموقع العام فقط */
.safa-public-header .nav {
    max-width: 1400px !important;
    height: var(--hd-h) !important;
    padding: 0 var(--hd-pad-x) !important;
    gap: clamp(0.6rem, 1.2vw, 1.4rem);
}

/* الشعار: حجم سائل في كل الأقسام */
.logo img {
    transition: transform 0.3s var(--hd-ease);
}

.safa-public-header .logo img {
    height: clamp(40px, 3.6vw, 52px) !important;
}

.logo a:hover img {
    transform: translateY(-1px) scale(1.02);
}

/* ==========================================================================
   2) روابط القائمة: الموقع العام (أسماء طويلة) — بلا التفاف + حجم سائل
   ========================================================================== */
.safa-public-header .nav-items {
    gap: clamp(0.1rem, 0.5vw, 0.55rem);
}

.safa-public-header .nav-item > a {
    padding: 0 var(--hd-link-pad) !important;
    font-size: var(--hd-link-size) !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em;              /* يمنح النص العربي كثافة أنيقة */
    white-space: nowrap;                   /* 🔑 لا التفاف ⇒ ارتفاع موحّد */
    border-radius: 12px;
    border-bottom: 0 !important;           /* نستبدل الخط السفلي الصريح بمؤشر ناعم */
    position: relative;
    transition: color 0.25s var(--hd-ease), background-color 0.25s var(--hd-ease),
                transform 0.25s var(--hd-ease);
}

/* قائمة العضو/الإدارة (روابط مباشرة داخل nav-items) — تحسين آمن بلا فرض أحجام */
.nav-items > a {
    border-radius: 10px;
    padding: 6px 8px;
    transition: color 0.25s var(--hd-ease), background-color 0.25s var(--hd-ease);
}

.nav-items > a:hover {
    background-color: var(--primary-soft, #F8F5FB);
}

.nav-items > a:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring, 0 0 0 4px rgba(0, 176, 173, 0.16));
}

/* مؤشر سفلي ناعم بدل border-bottom السميك — الموقع العام فقط */
.safa-public-header .nav-item > a::before {
    content: "";
    position: absolute;
    inset-inline: var(--hd-link-pad);
    bottom: 16%;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary, #5B2C86), var(--secondary, #00B0AD));
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.28s var(--hd-ease);
}

.safa-public-header .nav-item:hover > a::before,
.safa-public-header .nav-item:focus-within > a::before,
.safa-public-header .nav-item.active-mega > a::before {
    transform: scaleX(1);
}

.nav-item > a:focus-visible {
    outline: none;
    border-radius: 12px;
    box-shadow: var(--focus-ring, 0 0 0 4px rgba(0, 176, 173, 0.16));
}

.safa-public-header .nav-item > a:focus-visible {
    background-color: var(--primary-soft, #F8F5FB);
}

.safa-public-header .nav-item:hover > a {
    background-color: var(--primary-soft, #F8F5FB);
    color: var(--primary, #5B2C86) !important;
}

.safa-public-header .nav-item.active-mega > a {
    background-color: var(--primary, #5B2C86) !important;
    color: var(--white, #FFFFFF) !important;
    box-shadow: 0 8px 20px rgba(91, 44, 134, 0.25);
}

/* السهم: أنعم وبلا هامش زائد على الشاشات المتوسطة */
.safa-public-header .nav-item > a:not([href="index"])::after,
.safa-public-header .nav-item > a:not([href="index.php"])::after {
    margin-inline-start: 6px !important;
    margin-right: 0 !important;
    font-size: 0.68rem !important;
    opacity: 0.75;
}

@media (max-width: 1320px) {
    .safa-public-header .nav-item > a::after { display: none !important; }   /* توفير مساحة */
}

/* ==========================================================================
   3) زر اللغة: التصميم الأساسي مطبوع من lang/i18n.php (بقيم صريحة و!important)
      — هنا مجرد لمسات إضافية لا تعتمد على متغيّرات قد لا تكون معرّفة.
   ========================================================================== */
.safa-lang {
    align-self: center;
}

.header .safa-lang a:hover { transform: translateY(-1px); }
.header .safa-lang a:active { transform: translateY(0) scale(0.97); }

/* ==========================================================================
   4) زر قائمة الجوال
   ========================================================================== */
.menu-toggle {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    align-self: center;
    background: var(--primary-soft);
    border: 1px solid var(--border) !important;
    transition: background-color 0.25s var(--hd-ease), transform 0.25s var(--hd-ease);
}

.menu-toggle:hover { background: #EFE8F6; transform: translateY(-1px); }
.menu-toggle:active { transform: translateY(0) scale(0.97); }
.menu-toggle:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ==========================================================================
   5) القائمة الضخمة (Mega Menu): أنعم وأعمق
   ========================================================================== */
/* ==========================================================================
   5) القائمة الضخمة (Mega Menu): نعومة كاملة — حركة على معالج الرسوميات فقط
   --------------------------------------------------------------------------
   🔍 سبب التقطيع (تشخيص دقيق بعد فحص الكود):
     1) backdrop-filter: blur(8px) على لوحة بعرض الشاشة ⇒ المتصفح يعيد تمويه
        كل المساحة خلفها في كل إطار (الأثقل على الإطلاق) — وكانت داخل هيدر
        له backdrop-filter خاص به ⇒ تكلفة مضاعفة.
     2) style.css: transition: all 0.3s ⇒ المتصفح يراقب كل الخصائص، ويشمل ذلك
        z-index و visibility (غير قابلين للتحريك بسلاسة = قفزات).
     3) z-index من -1 إلى 999 ⇒ إنشاء/إزالة طبقة (layer) في وسط الحركة.
     4) box-shadow بتمويه 60px على عرض الشاشة ⇒ إعادة رسم ثقيلة كل إطار.
   ✅ الحل: تحريك opacity + transform فقط (خصائص لا تلمس التخطيط ولا تُنتج
      إعادة رسم)، خلفية صلبة، ظل أخف، وطبقة GPU مُرقّاة مسبقاً.
   ⚠️ ملاحظة: style.css يضع z-index: -1 للوحة المغلقة (لتحتفظ تحت الهيدر)
      وهذا يسبب تبديل طبقات؛ نُثبّته هنا على 999 دائماً مع الاعتماد على
      visibility: hidden للإخفاء (وهي تُلغي التفاعل بالماوس تلقائياً).
   ========================================================================== */
.mega-menu {
    z-index: 999;
    background: #ffffff !important;          /* خلفية صلبة = بلا تمويه خلفي */
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    box-shadow: 0 14px 32px rgba(41, 24, 58, 0.12), 0 3px 10px rgba(41, 24, 58, 0.05) !important;
    border-radius: 0 0 20px 20px;
    border-bottom: 0 !important;

    /* ⚡ طبقة GPU مُرقّاة + تحريك بلا إعادة تخطيط/رسم */
    transform: translateY(10px) translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    /* ⚡ بدل transition: all — الخصائص المطلوبة فقط، ومدة أقصر أنعم */
    transition: opacity 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
                visibility 0s linear 0.2s;
}

/* تلميح للمتصفح عند الاستعداد للفتح (عند التحويم أو الفتح) — لا نُبقيه دائماً
   على ست لوحات بعرض الشاشة حفاظاً على ذاكرة معالج الرسوميات */
.nav-item:hover .mega-menu,
.nav-item.active-mega .mega-menu {
    will-change: opacity, transform;
}

/* الحالة المفتوحة: نفس الخصائص فقط (بلا z-index متحرك) */
.nav-item.active-mega .mega-menu {
    transform: translateY(0) translateZ(0);
    transition: opacity 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
                visibility 0s;
}

.mega-link-list a {
    display: inline-block;
    transition: color 0.2s var(--hd-ease), transform 0.2s var(--hd-ease);
}

.mega-link-list a:hover { transform: translateX(-3px); }
[dir="ltr"] .mega-link-list a:hover { transform: translateX(3px); }

/* ==========================================================================
   6) ضغط ذكي + قائمة الجوال (مطابق لنقطة التحول في style.css = 1024px)
   ========================================================================== */

/* 6-أ) المدى الضيّق (1025px–1180px): ضغط إضافي بلا التفاف — الموقع العام فقط */
@media (min-width: 1025px) and (max-width: 1180px) {
    .safa-public-header .nav { padding: 0 0.75rem !important; gap: 0.4rem; }
    .safa-public-header .nav-item > a {
        font-size: 0.8rem !important;
        padding: 0 0.5rem !important;
    }
    .safa-public-header .nav-item > a::before { inset-inline: 0.5rem; }
    .safa-public-header .logo img { height: 40px !important; }
    .header .safa-lang a { min-width: 30px !important; padding: 4px 6px !important; }
}

/* 6-ب) قائمة الجوال (<= 1024px) + إبقاء زر اللغة ظاهراً دائماً */
@media (max-width: 1024px) {
    .safa-public-header .nav { height: auto !important; min-height: 68px; }
    .nav-items { height: auto !important; }
    .safa-public-header .nav-item > a { white-space: normal; }

    /* ---- زر قائمة الجوال (☰): مساحة لمس مريحة + موضع صحيح في الاتجاهين ---- */
    /* [dir] للوصول إلى خصوصية 0-2-0 حتى يتغلّب على [dir="rtl"] .menu-toggle
       في style.css / member_style.css (auto تدفعه للطرف المقابل للشعار في RTL و LTR) */
    [dir] .menu-toggle {
        order: 2;
        width: 46px;
        height: 46px;
        padding: 0;
        display: flex;                  /* توسيط الأيقونة داخل الزر */
        align-items: center;
        justify-content: center;
        margin: 0;
        margin-inline-start: auto;
        border-radius: 12px;
        flex: 0 0 auto;
    }

    [dir] .menu-toggle i { font-size: 1.35rem; line-height: 1; }

    /* ---- اللوحة المنسدلة للجوال: عمق أوضح + تمرير داخلي فلا تُقطع الروابط الطويلة ---- */
    .nav-items.active {
        border-radius: 0 0 16px 16px;
        box-shadow: 0 22px 44px rgba(41, 24, 58, 0.18);
        max-height: calc(100vh - 96px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    /* زر اللغة شقيق للقائمة => يبقى ظاهراً حتى والقائمة مغلقة */
    .header .nav > .safa-lang {
        order: 3;
        align-self: center;
        margin-inline-end: 0.35rem;
    }
}

/* ==========================================================================
   7) لمسات عامة: أزرار أنعم + بطاقات بعمق + حقول بتركيز متوهّج
   ========================================================================== */

/* الأزرار: رفع ناعم عند المرور + حالة ضغط واضحة */
.btn {
    border-radius: 12px !important;
    transition: transform 0.25s var(--hd-ease), box-shadow 0.25s var(--hd-ease),
                background-color 0.25s var(--hd-ease), color 0.2s ease !important;
}

.btn:hover,
.btn-primary:hover,
.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(41, 24, 58, 0.12);
}

.btn:active { transform: translateY(0) scale(0.985); }

.btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* البطاقات: حواف أنعم + ظل طبقى + رفع خفيف */
.card,
.feature-card,
.stats-card,
.event-card,
.news-card {
    border-radius: 18px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 20px rgba(41, 24, 58, 0.05), 0 1px 3px rgba(41, 24, 58, 0.03);
    transition: transform 0.3s var(--hd-ease), box-shadow 0.3s var(--hd-ease);
}

.card:hover,
.feature-card:hover,
.stats-card:hover,
.event-card:hover,
.news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 44px rgba(41, 24, 58, 0.10), 0 2px 6px rgba(41, 24, 58, 0.04);
}

/* الحقول: حلقة تركيز متوهّجة بلون الهوية */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--secondary) !important;
    box-shadow: var(--focus-ring) !important;
}

/* عناوين الأقسام: تدرّج لوني ناعم يحافظ على الهوية */
.section-title {
    letter-spacing: -0.01em;
}

.section-title::after {
    content: "";
    display: block;
    width: 64px;
    height: 4px;
    margin-top: 0.6rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
}

[dir="ltr"] .section-title::after { margin-inline-start: 0; }
[dir="rtl"] .section-title::after { margin-inline-start: 0; }

/* شارات/كبسولات */
.badge,
.filter-badge,
.filter-tag {
    border-radius: 999px !important;
}

/* ==========================================================================
   9) الفوتر: هوية غنية + عمق + تفاعلات ناعمة
   ========================================================================== */
.footer {
    position: relative;
    background-color: var(--dark-surface, #29183A);
    /* تدرّج ناعم يمنح عمقاً بدل اللون المسطّح */
    background-image:
        radial-gradient(900px 320px at 88% -10%, rgba(0, 176, 173, 0.16), transparent 62%),
        radial-gradient(760px 300px at 8% 0%, rgba(253, 183, 20, 0.10), transparent 60%),
        linear-gradient(180deg, #2E1B42 0%, #241534 100%);
    padding: clamp(3rem, 5vw, 4.5rem) var(--hd-pad-x, 1.25rem) 0;
    overflow: hidden;
}

/* شريط علوي متدرّج رقيق يفصل الفوتر عن المحتوى */
.footer::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    background: linear-gradient(90deg, #5B2C86, #00B0AD, #FDB714);
    opacity: 0.85;
}

.footer-content {
    max-width: 1280px;
    gap: clamp(2rem, 4vw, 3.25rem);
}

/* عناوين الأقسام: أوضح + خط متدرّج أسفلها */
.footer-section h3 {
    font-size: clamp(1rem, 1.6vw, 1.15rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    color: #FFFFFF !important;
    margin-bottom: 0.85rem !important;
    padding-bottom: 0.55rem;
    position: relative;
}

.footer-section h3::after {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    bottom: 0;
    width: 42px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #00B0AD, #FDB714);
}

/* الروابط: انزلاق ناعم + لون مميز */
.footer-section ul li {
    margin-bottom: 0.7rem !important;
}

/* الروابط النصية داخل القوائم فقط (لا تشمل أيقونات التواصل)
   ملاحظة مهمة: كان النطاق `.footer-section a` سابقًا فيطال روابط
   `.social-icons` أيضًا، فيمنحها display:inline-block فيُلغي
   display:flex القادم من style.css -> تظهر الأيقونة منزاحة لأعلى-يمين. */
.footer-section ul a {
    position: relative;
    display: inline-block;
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 0.95rem;
    line-height: 1.7;
    transition: color 0.2s var(--hd-ease), transform 0.2s var(--hd-ease) !important;
}

.footer-section ul a:hover,
.footer-section ul a:focus-visible {
    color: #FDB714 !important;
    transform: translateX(-4px);
}

[dir="ltr"] .footer-section ul a:hover,
[dir="ltr"] .footer-section ul a:focus-visible { transform: translateX(4px); }

.footer-section ul a:focus-visible {
    outline: none;
    border-radius: 6px;
    box-shadow: 0 0 0 3px rgba(253, 183, 20, 0.28);
}

/* أيقونات التواصل: كبسولات أنيقة بتدرّج عند المرور */
.social-icons { gap: 0.75rem !important; margin-top: 0.5rem !important; }

.social-icons a { font-size: 1.05rem; }
.social-icons a i { line-height: 1; }

/* 🔒 تمركز مضمون: نُعيد إعلان التمركز هنا بـ specificity أعلى
   ليكون محصّنًا ضد أي قاعدة عامة تطال روابط الفوتر (.footer-section a ...) */
.social-icons a,
.footer-section .social-icons a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 !important;
    text-align: center;
    transform: none;
}

.social-icons a i,
.social-icons a i::before {
    display: inline-block;
    line-height: 1;
    margin: 0;
    padding: 0;
    transform: none;
}

.social-icons a {
    width: 46px;
    height: 46px;
    background-color: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #FFFFFF !important;
    transition: transform 0.25s var(--hd-ease), background-color 0.25s var(--hd-ease),
                border-color 0.25s var(--hd-ease), box-shadow 0.25s var(--hd-ease) !important;
}

.social-icons a:hover,
.social-icons a:focus-visible {
    background: linear-gradient(135deg, #5B2C86, #7A46A8) !important;
    border-color: transparent !important;
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(91, 44, 134, 0.45);
}

.social-icons a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 176, 173, 0.35);
}

/* عدّاد الزوار: أرقام بصناديق زجاجية بتدرّج */
.visitor-counter {
    display: inline-flex !important;
    gap: 5px !important;
    padding: 6px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18);
}

.visitor-counter .digit {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 38px;
    border-radius: 9px !important;
    font-weight: 800;
    font-size: 1.05rem !important;
    font-variant-numeric: tabular-nums;
    color: #FFFFFF !important;
    background: linear-gradient(180deg, rgba(91, 44, 134, 0.95), rgba(46, 27, 66, 0.95)) !important;
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* الفوتر السفلي: تنظيم أنظف وفواصل ناعمة */
.footer-bottom {
    margin-top: clamp(2rem, 3.5vw, 3rem) !important;
    padding: clamp(1.25rem, 2vw, 1.75rem) 0 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 0.68) !important;
    gap: 1rem;
}

.footer-bottom a {
    color: rgba(255, 255, 255, 0.78) !important;
    text-decoration: none;
    border-radius: 8px;
    padding: 2px 4px;
    transition: color 0.2s var(--hd-ease), background-color 0.2s var(--hd-ease);
}

.footer-bottom a:hover,
.footer-bottom a:focus-visible {
    color: #FDB714 !important;
    background-color: rgba(255, 255, 255, 0.06);
}

.footer-bottom a:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(253, 183, 20, 0.28);
}

.footer-bottom img {
    height: 34px;
    width: auto;
    opacity: 0.95;
    transition: transform 0.25s var(--hd-ease), opacity 0.25s var(--hd-ease);
}

.footer-bottom img:hover { transform: translateY(-2px); opacity: 1; }

/* استجابة الفوتر: شبكة أذكى (عمودان للمتوسط ثم عمود واحد) */
@media (max-width: 992px) and (min-width: 769px) {
    .footer-content {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 2.25rem !important;
    }
}

@media (max-width: 768px) {
    .footer { padding-top: 2.5rem !important; }
    .footer-content { gap: 1.75rem !important; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .footer-section h3::after { inset-inline-start: auto; inset-inline-end: 0; }
}
/* ==========================================================================
   10) لمسات عامة: جداول + تنبيهات + ترقيم + حالات (آمنة على كل الأقسام)
   ========================================================================== */

/* الجداول: رأس مميز + صفوف بلون تبادلي ناعم + تمرير مريح */
.admin-table,
table.table,
.as-table table {
    border-collapse: separate;
    border-spacing: 0;
}

.admin-table thead th,
table.table thead th,
.main-table thead th {
    font-weight: 700;
    letter-spacing: 0.01em;
}

.admin-table tbody tr,
table.table tbody tr {
    transition: background-color 0.2s var(--hd-ease);
}

.admin-table tbody tr:hover,
table.table tbody tr:hover {
    background-color: var(--primary-soft, #F8F5FB);
}

/* أول/آخر خلية: حواف دائرية أنيقة للصف */
.admin-table thead tr th:first-child { border-start-start-radius: 12px; }
.admin-table thead tr th:last-child { border-start-end-radius: 12px; }

/* التنبيهات: حواف ناعمة + شريط جانبي ملوّن */
.alert {
    border-radius: 14px !important;
    border-width: 1px !important;
    border-inline-start-width: 4px !important;
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(41, 24, 58, 0.06));
}

.alert-success { border-inline-start-color: var(--success, #168A62) !important; }
.alert-danger { border-inline-start-color: var(--danger, #B53A4B) !important; }
.alert-info { border-inline-start-color: var(--secondary, #00B0AD) !important; }
.alert-warning { border-inline-start-color: var(--accent, #FDB714) !important; }

/* الترقيم: أزرار كبسولية */
.pagination a,
.pagination span {
    border-radius: 10px !important;
    transition: background-color 0.2s var(--hd-ease), color 0.2s var(--hd-ease),
                transform 0.2s var(--hd-ease);
}

.pagination a:hover {
    transform: translateY(-2px);
    background-color: var(--primary-soft, #F8F5FB);
}

.pagination a:focus-visible,
.pagination span:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring, 0 0 0 4px rgba(0, 176, 173, 0.16));
}

/* الحالات/الشارات: كبسولة + تباين واضح */
.status,
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px !important;
    border-radius: 999px !important;
    font-weight: 700;
    font-size: 0.8rem;
    line-height: 1;
}

/* بطاقات الإحصاء والأقسام: تنفّس داخلي أوسع */
.stat-card,
.summary-card,
.info-card {
    border-radius: 18px;
    padding: clamp(1rem, 1.8vw, 1.6rem);
    box-shadow: var(--shadow-card, 0 10px 30px rgba(58, 37, 77, 0.06));
    transition: transform 0.3s var(--hd-ease), box-shadow 0.3s var(--hd-ease);
}

.stat-card:hover,
.summary-card:hover,
.info-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover, 0 20px 54px rgba(41, 24, 58, 0.12));
}
/* ==========================================================================
   8) هيدر المتجر: لمسات ناعمة (بلا فرض أحجام — تصميمه مستقل)
   ========================================================================== */
.store-navbar {
    transition: box-shadow 0.3s var(--hd-ease);
    box-shadow: var(--hd-shadow, 0 4px 20px rgba(41, 24, 58, 0.05));
}

.store-nav-links a {
    border-radius: 10px;
    padding: 6px 10px;
    transition: color 0.25s var(--hd-ease), background-color 0.25s var(--hd-ease);
}

.store-nav-links a:hover {
    background-color: var(--primary-soft, #F8F5FB);
}

.store-nav-links a:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring, 0 0 0 4px rgba(0, 176, 173, 0.16));
}

.store-profile-btn,
.store-login-btn {
    border-radius: 999px !important;
    transition: transform 0.25s var(--hd-ease), box-shadow 0.25s var(--hd-ease),
                background-color 0.25s var(--hd-ease) !important;
}

.store-profile-btn:hover,
.store-login-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(91, 44, 134, 0.16);
}

.store-dropdown-content {
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(41, 24, 58, 0.14), 0 2px 6px rgba(41, 24, 58, 0.05);
    overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
    .header, .nav-item > a, .safa-lang a, .menu-toggle, .logo img, .mega-link-list a {
        transition: none !important;
    }
    .nav-item > a::before { transition: none !important; }
}


/* ==========================================================================
   11) الحاوية الرئيسية: قياس موحّد لكل الأقسام + بطاقة أنيقة لصفحات
       العضو والإدارة (class="safa-app")
   --------------------------------------------------------------------------
   سبب المظهر "الرقيق وغير الموحّد" سابقاً:
     • member_style.css  .main-content      : 1200px · margin 2rem · padding 2rem · بلا خلفية ولا حدود
     • style.css         .main-content      : 1280px · margin 3rem · padding 0 2rem · بلا خلفية ولا حدود
     • style.css         .main-content.form : بطاقة بيضاء بحواف وظل — في الموقع العام فقط
   => عرضان مختلفان للموقع نفسه + حالة "بطاقة" وحالة "شريط بلا حدود" = تفاوت واضح.
   الحل: قيمة واحدة للعرض/الهوامش/الحشو في كل الأقسام (1200px · 2.5rem · 2rem)
   + بطاقة بيضاء بحدود وظل لصفحات العضو والإدارة (خلفيتها #f5f5f5).
   ========================================================================== */

.main-content {
    width: 100%;
    max-width: 1200px;                 /* موحّد: بدل 1200px/1280px */
    margin: 2.5rem auto;
    padding: 2rem;
}

/* --------------------------------------------------------------------------
   البطاقة: لصفحات العضو والإدارة فقط (class="safa-app" في ترويستهما).
   لماذا مقيّدة؟ خلفية تلك الأقسام #f5f5f5 (رمادي واضح) => البطاقة البيضاء
   تُحدث فرقاً كبيراً ومظهراً أنيقاً وموحّداً.
   أما الموقع العام فخلفيته #FCFBFD (شبه بيضاء) فالبطاقة فيه غير مرئية عملياً،
   كما أن الصفحة الرئيسية تصميم hero بعرض كامل لا يصلح له إطار بطاقة.
   -------------------------------------------------------------------------- */
.main-content.safa-app {
    background: var(--white, #FFFFFF);
    border: 1px solid var(--border, #E4DEE7);
    border-radius: 20px;
    box-shadow: 0 12px 32px rgba(41, 24, 58, 0.07), 0 2px 6px rgba(41, 24, 58, 0.03);
}

/* صفحات النماذج: نفس الحشو الموحّد تماماً (كان 3rem في style.css للموقع العام) */
.main-content.form {
    padding: 2rem;
}

/* بعد إزالة العنوان العلوي: لا نريد فراغاً مضاعفاً من هوامش العنصر الأول/الأخير */
.main-content.safa-app > :first-child { margin-top: 0; }
.main-content.safa-app > :last-child  { margin-bottom: 0; }

/* غلاف الجدول: كان بطاقة داخل بطاقة => حدود أنعم وبلا ظل مزدوج (يبقى التمرير الأفقي) */
.main-content.safa-app .admin-table-container {
    border: 1px solid var(--border, #E4DEE7);
    border-radius: 14px;
    box-shadow: none;
}

/* الجداول: تناسق الوزن في كل الأقسام (بعض الجداول لا تحمل .admin-table) */
.main-content table thead th { font-weight: 700; }

/* --------------------------------------------------------------------------
   تجاوب: تعديلات الحشو/الهوامش تُعاد هنا صريحة لأن هذا الملف يُحمَّل بعد
   style.css و member_style.css (وإلا لبقي حشو 2rem على الجوال).
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .main-content,
    .main-content.form {
        margin: 1.75rem auto;
        padding: 1.5rem;
        border-radius: 18px;
    }
}

@media (max-width: 640px) {
    .main-content,
    .main-content.form {
        margin: 1rem auto;
        padding: 1.15rem;
        border-radius: 14px;
    }

    /* جداول أريح على الجوال: حشو وخط أصغر => أعمدة أكثر داخل المساحة */
    .admin-table th,
    .admin-table td {
        padding: 0.7rem 0.6rem;
        font-size: 0.85rem;
    }
}

/* ==========================================================================
   12) إصلاح انضغاط (سحق) الشعار — يظهر بوضوح في الوضع الإنجليزي
   --------------------------------------------------------------------------
   السبب: style.css يحتوي قاعدة عامة  img { max-width: 100% }  و  .logo
   (بدون flex-shrink) داخل flex container. في العربية أسماء القوائم قصيرة
   فتتّسع، أما في الإنجليزية (Disclosure and Transparency …) فيصبح مجموع
   العرض أكبر من المساحة، فيبدأ flex بتقليص الشعار: العرض يُقصّ بفعل
   max-width بينما الارتفاع ثابت ⇒ صورة مسحوقة (تشوّه في النسبة).
   الحل: الشعار لا يتقلّص إطلاقاً، والقائمة هي التي تتنازل عن المساحة.
   ========================================================================== */
.logo,
.logo a {
    flex: 0 0 auto !important;      /* 🔑 لا يتقلّص الشعار أبداً */
    width: auto !important;
}

.logo a {
    display: flex;
    align-items: center;
}

.logo img {
    width: auto !important;         /* العرض يُحسب من نسبة الصورة نفسها */
    max-width: none !important;     /* يُلغي أثر  img { max-width: 100% } */
    flex: 0 0 auto !important;
    object-fit: contain;            /* لا تشويه مهما كان القياس */
}

/* القائمة هي التي تتكيّف بدل الشعار */
.safa-public-header .nav-items {
    min-width: 0;
}

/* في الإنجليزية النصوص أطول: حشو أقل قليلاً + بلا تباعد حروف سلبي
   (التباعد السالب يخدم العربية فقط ويضغط اللاتينية) */
html[lang="en"] .safa-public-header .nav-item > a {
    letter-spacing: 0 !important;
    padding: 0 clamp(0.4rem, 0.7vw, 0.85rem) !important;
}

/* ==========================================================================
   13) صفحة تفاصيل الخبر (show_news_announcement_details) — تصميم بعمودين
   --------------------------------------------------------------------------
   التقسيم: العمود الأساسي الأكبر = العنوان + صورة الخبر + التفاصيل/المحتوى
            العمود الجانبي الأصغر = التاريخ · النوع · الفرع · آخر تحديث · المشاركة
   المحاذاة مع الهيدر: نفس عرضه (1400px) ونفس حشوه الجانبي (--hd-pad-x)
            ⇒ حواف الصفحة تنطبق على حواف القائمة العلوية تماماً.
   الاتجاه: RTL → الأساسي يميناً والجانبي يساراً (كما طُلب) ·
            LTR في الإنجليزية → ينعكس تلقائياً لترتيب القراءة الصحيح.
   ========================================================================== */

.main-content.news-details-page {
    max-width: 1400px;                 /* = .safa-public-header .nav */
    margin: 2.25rem auto 3rem;
    padding: 0 var(--hd-pad-x);        /* = حشو الهيدر الجانبي */
}

.nd-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;   /* [الأكبر] [الأصغر] */
    gap: clamp(1.25rem, 2.4vw, 2.25rem);
    align-items: start;
}

/* ------------------------- العمود الأساسي (الأكبر) ------------------------- */
.nd-main {
    min-width: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: clamp(1.1rem, 2.4vw, 2.25rem);
    box-shadow: var(--shadow-card);
}

.nd-title {
    margin: 0 0 1.1rem;
    color: var(--primary);
    font-size: clamp(1.35rem, 2.2vw, 1.95rem);
    font-weight: 700;
    line-height: 1.5;
}

.nd-figure {
    margin: 0 0 1.35rem;
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
    background: var(--canvas);
}

.nd-figure img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    object-fit: contain;
}

.nd-content {
    color: #444;
    font-size: clamp(0.95rem, 1.05vw, 1.05rem);
    line-height: 1.95;
}

.nd-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
}

.nd-content h1,
.nd-content h2,
.nd-content h3 {
    color: var(--primary);
    line-height: 1.5;
}

.nd-content a { color: var(--secondary); }

.nd-footnav {
    margin-top: 1.6rem;
    padding-top: 1.15rem;
    border-top: 1px solid var(--border);
}

/* ------------------------- العمود الجانبي (الأصغر) ------------------------- */
.nd-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    position: sticky;                              /* يلازم الشاشة أثناء التمرير */
    top: calc(var(--hd-h) + 1rem);
}

.nd-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.1rem 1.15rem;
    box-shadow: var(--shadow-sm);
}

.nd-card-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.85rem;
    color: var(--primary);
    font-size: 0.95rem;
    font-weight: 700;
}

.nd-card-title i { color: var(--secondary); }

.nd-info {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nd-info li {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
}

.nd-info-ico {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 0.85rem;
}

.nd-info-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.nd-info-label {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.nd-info-value {
    color: var(--ink);
    font-size: 0.9rem;
    font-weight: 700;
    word-break: break-word;
}

.nd-badge {
    align-self: flex-start;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
}

.nd-badge--news { background: rgba(92, 44, 135, 0.10); color: var(--primary); }
.nd-badge--ann  { background: rgba(0, 176, 173, 0.12); color: #047a78; }

/* ------------------------- أزرار المشاركة ------------------------- */
.nd-share {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

.nd-share-btn {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    color: var(--ink);
    font-size: 1.05rem;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s var(--hd-ease), background-color 0.2s var(--hd-ease),
                color 0.2s var(--hd-ease), border-color 0.2s var(--hd-ease);
}

.nd-share-btn:hover { transform: translateY(-2px); color: #fff; }

.nd-share-btn--x:hover  { background: #000000; border-color: #000000; }
.nd-share-btn--fb:hover { background: #1877F2; border-color: #1877F2; }
.nd-share-btn--in:hover { background: #0A66C2; border-color: #0A66C2; }
.nd-share-btn--ig:hover {
    background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4);
    border-color: #DD2A7B;
}

.nd-share-note {
    margin: 0.7rem 0 0;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.6;
}

.nd-toast {
    margin: 0.55rem 0 0;
    padding: 0.45rem 0.7rem;
    border-radius: 10px;
    background: var(--secondary-soft);
    color: #047a78;
    font-size: 0.8rem;
    font-weight: 700;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: opacity 0.25s var(--hd-ease), transform 0.25s var(--hd-ease);
}

.nd-toast.is-visible { opacity: 1; transform: none; }

/* ------------------------- زر الرجوع للقائمة ------------------------- */
.nd-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 1.1rem;
    border-radius: 12px;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none;
    transition: background-color 0.2s var(--hd-ease), color 0.2s var(--hd-ease),
                transform 0.2s var(--hd-ease);
}

.nd-btn--ghost { background: var(--primary-soft); color: var(--primary); }
.nd-btn--ghost:hover { background: var(--primary); color: #fff; transform: translateY(-1px); }

/* سهم "رجوع" يتجه لليمين في RTL وإلى اليسار في LTR */
html[dir="ltr"] .nd-btn--ghost i { transform: scaleX(-1); }

/* ------------------------- التجاوب ------------------------- */
@media (max-width: 1024px) {
    .nd-layout { grid-template-columns: 1fr; }
    .nd-side {
        position: static;
        top: auto;
        display: grid;                  /* بطاقتان جنباً إلى جنب */
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

@media (max-width: 640px) {
    .main-content.news-details-page { margin: 1.25rem auto 2rem; }
    .nd-main { border-radius: 16px; }
    .nd-side { grid-template-columns: 1fr; }
    .nd-share-btn { width: 40px; height: 40px; }
}