/* ==========================================================================
   THEME.CSS — المصدر الوحيد لألوان وخطوط الموقع
   ==========================================================================
   أي تخصيص شكلي مستقبلي (تغيير لون العلامة التجارية، إضافة ثيم تاني...)
   يبدأ من هنا. القيم دلوقتي هي بالظبط نفس القيم اللي كانت متكررة يدوي
   جوه includes/header.php و includes/guest-header.php — يعني مفيش أي
   تغيير شكلي حالًا، ده بس تجميع وتنظيف.
   ========================================================================== */

:root {
    /* -- الخط الأساسي -------------------------------------------------- */
    /* الموقع إنجليزي (LTR). صفحات الدخول شغالة بـ Poppins وباقي الموقع
       بـ Cairo - رجّعتها زي ما كانت لحد ما تقرر توحد على إيه.
       لو قررت، غيّر --font-guest هنا بس وكل صفحات الزوار هتتحدث تلقائيًا. */
    --font-main: 'Cairo', sans-serif;
    --font-guest: 'Poppins', sans-serif;

    /* -- ألوان العلامة التجارية (Brand / Accent) ------------------------ */
    --brand-primary: #e11d48;
    --brand-primary-dark: #be123c;
    --brand-primary-light: #f43f5e;
    --brand-gradient: linear-gradient(135deg, var(--brand-primary-light) 0%, var(--brand-primary) 100%);
    --brand-logo-gradient: linear-gradient(135deg, var(--brand-primary) 0%, var(--brand-primary-dark) 100%);

    /* -- ألوان الحالة (Success / Wallet) -------------------------------- */
    --success: #22c55e;
    --success-dark: #16a34a;
    --success-light: #34d399;
    --success-emerald: #059669;
    --wallet-gradient: linear-gradient(135deg, var(--success), var(--success-dark));

    /* -- الوضع الفاتح: أسطح وخلفيات ------------------------------------- */
    --surface-page: #F4F7FE;
    --surface-card: #ffffff;
    --text-body: #374151;
    --text-heading: #0f1c3f;
    --text-muted: #9ca3af;
    --text-muted-2: #6b7280;
    --border-light: #e5e7eb;

    /* -- الوضع الداكن: أسطح وخلفيات (نفس باليتة صفحة تسجيل الدخول) ------ */
    /* --dark-bg بقت زي --dark-surface بالظبط، عشان خلفية الصفحة (body) ما
       تختلفش عن خلفية الـ sidebar - ده اللي كان يسبب المنطقة السودة/الغامقة
       اللي بتظهر تحت الـ footer وهي مش متطابقة مع باقي الصفحة. */
    --dark-bg: #0F2418;
    --dark-surface: #0F2418;
    --dark-border: #14301F;
    --dark-surface-hover: #1a4a2b;
    --dark-text: #e5e7eb;
    --dark-text-muted: #AEB9C9;
    --dark-accent-blue: #0f1c3f;

    /* -- ألوان تنبيه/تمييز إضافية (order-help, badges) ------------------ */
    --highlight-gold: #f59e0b;
    --highlight-gold-text: #fcd34d;
    --recent-item-bg: #faf3e0;
    --recent-item-border: #f5e3b8;
    --recent-item-hover: #fde9c2;

    /* -- أبعاد مشتركة (Layout) ------------------------------------------ */
    --ef-topbar-h: 64px;
    --ef-catbar-h: 0px;
    --ef-scroll-gap: 16px;
    --ef-catbar-gap: 10px;
}

/* ==========================================================================
   مكونات مشتركة تستخدم المتغيرات فوق — بدل ما تتكرر (أو تتكتب بألوان
   صريحة) في كل صفحة على حدة.
   ========================================================================== */

body { font-family: var(--font-main); }

.logo-badge { background: var(--brand-logo-gradient); }
.btn-primary { background: var(--brand-gradient); }
.wallet-pill { background: var(--wallet-gradient); }

.ef-balance-badge { background: #ecfdf5; color: var(--success-emerald); }
.ef-balance-badge:hover { background: #d1fae5; }
html.dark .ef-balance-badge { background: rgba(16, 185, 129, .12); color: var(--success-light); }
html.dark .ef-balance-badge:hover { background: rgba(16, 185, 129, .2); }

.ef-status-dot { box-shadow: 0 0 0 2px #fff; }
html.dark .ef-status-dot { box-shadow: 0 0 0 2px #12161c; }

/* الوضع الداكن: الأسطح الرئيسية للتخطيط العام */
html.dark body { background: var(--dark-bg); color: var(--dark-text); }
html.dark #efSidebar { background: var(--dark-surface); border-color: var(--dark-border); }
html.dark #efSidebar .nav-item:not(.active) { color: #ffffff; font-weight: 800; }
html.dark #efSidebar .nav-item:not(.active):hover { background: rgba(255, 255, 255, .06) !important; }
html.dark header { background: rgba(15, 36, 24, .9); border-color: var(--dark-border); }
html.dark .ef-page-heading { color: #ffffff !important; }

#efSidebar .nav-item.active::before { background: var(--success); }

/* Tailwind CDN لا يعيد توليد كلاسات dark: بالقيم العشوائية دايمًا، فبنفرضها
   يدويًا هنا بمطابقة اسم الكلاس نفسه. القيم بقت بتتغذى من نفس متغيرات فوق. */
html.dark [class*="dark:bg-[#0F2418]"]     { background: var(--dark-surface) !important; }
html.dark [class*="dark:bg-[#1b1b1f]"]     { background: var(--dark-border) !important; }
html.dark [class*="dark:bg-[#141416]"]     { background: var(--dark-border) !important; }
html.dark [class*="dark:bg-[#12161c]"]     { background: var(--dark-surface) !important; }
html.dark [class*="dark:bg-[#17171c]"]     { background: var(--dark-surface) !important; }
html.dark [class*="dark:bg-[#0b0f14]"]     { background: var(--dark-bg) !important; }
html.dark [class*="dark:bg-[#14301F]"]     { background: var(--dark-border) !important; }
html.dark [class*="dark:bg-[#14301F]/60"]  { background: rgba(20, 48, 31, .6) !important; }
html.dark [class*="dark:border-[#14301F]"] { border-color: var(--dark-border) !important; }
html.dark [class*="dark:border-[#2a2a2f]"] { border-color: var(--dark-border) !important; }
html.dark [class*="dark:border-[#232327]"] { border-color: var(--dark-border) !important; }
html.dark [class*="dark:ring-[#12161c]"]   { --tw-ring-color: var(--dark-surface) !important; }
html.dark [class*="dark:hover:bg-[#14301F]/60"]:hover { background: rgba(20, 48, 31, .6) !important; }
html.dark [class*="dark:hover:bg-[#232329]"]:hover    { background: var(--dark-surface-hover) !important; }
html.dark [class*="dark:hover:bg-[#232327]"]:hover    { background: var(--dark-surface-hover) !important; }
html.dark [class*="dark:text-[#AEB9C9]"]   { color: var(--dark-text-muted) !important; }
html.dark [class*="dark:text-[#34d399]"]   { color: var(--success-light) !important; }
html.dark [class*="dark:text-[#7A8B7F]"]   { color: var(--dark-text-muted) !important; }
html.dark [class*="dark:text-[#2A4A3A]"]   { color: var(--dark-border) !important; }
html.dark [class*="dark:text-[#4C5B52]"]   { color: var(--dark-text-muted) !important; }
html.dark [class*="dark:text-[#4A90E2]"]   { color: #4A90E2 !important; }

/* السبب الحقيقي للكروت "السودة" اللي بتظهر في الأدمن (Provider Balances،
   Quick Actions، كروت الإحصائيات فوق): مش الخلفية (اللي بتتفرض فوق دي أصلًا)
   ده الأرقام والعناوين اللي بتستخدم dark:text-gray-XXX عادي - Tailwind CDN
   نفس المشكلة بتاعة الخلفيات، مش بيولّد كلاس اللون الداكن، فالنص بيفضل
   بلونه الأصلي الغامق (text-gray-800/900) فوق خلفية غامقة = نص شبه مختفي.
   بنفرض هنا ألوان Tailwind الأصلية نفسها بدل ما نسيبها لـ CDN. */
html.dark [class*="dark:text-white"]    { color: #ffffff !important; }
html.dark [class*="dark:text-gray-100"] { color: #f3f4f6 !important; }
html.dark [class*="dark:text-gray-200"] { color: #e5e7eb !important; }
html.dark [class*="dark:text-gray-300"] { color: #d1d5db !important; }
html.dark [class*="dark:text-gray-400"] { color: #9ca3af !important; }
html.dark [class*="dark:text-gray-500"] { color: #6b7280 !important; }
html.dark [class*="dark:text-gray-600"] { color: #4b5563 !important; }
html.dark [class*="dark:text-slate-300"]   { color: #cbd5e1 !important; }
html.dark [class*="dark:text-emerald-300"] { color: #6ee7b7 !important; }
html.dark [class*="dark:text-emerald-400"] { color: #34d399 !important; }
html.dark [class*="dark:text-green-400"]   { color: #4ade80 !important; }
html.dark [class*="dark:text-teal-400"]    { color: #2dd4bf !important; }
html.dark [class*="dark:text-sky-400"]     { color: #38bdf8 !important; }
html.dark [class*="dark:text-blue-400"]    { color: #60a5fa !important; }
html.dark [class*="dark:text-purple-400"]  { color: #c084fc !important; }
html.dark [class*="dark:text-rose-400"]    { color: #fb7185 !important; }
html.dark [class*="dark:text-red-400"]     { color: #f87171 !important; }
html.dark [class*="dark:text-orange-400"]  { color: #fb923c !important; }
html.dark [class*="dark:text-amber-100"]   { color: #fef3c7 !important; }
html.dark [class*="dark:text-amber-200"]   { color: #fde68a !important; }
html.dark [class*="dark:text-amber-300"]   { color: #fcd34d !important; }
html.dark [class*="dark:text-amber-400"]   { color: #fbbf24 !important; }
html.dark [class*="dark:text-amber-500"]   { color: #f59e0b !important; }
html.dark [class*="dark:text-yellow-400"]  { color: #facc15 !important; }

/* كارت المساعدة على الطلب (order help) */
#orderHelpCard { background: var(--surface-card); border-radius: 16px; box-shadow: 0 4px 24px rgba(17, 24, 39, .05); }
html.dark #orderHelpCard { background: var(--dark-surface); border: 1px solid var(--dark-border); box-shadow: 0 4px 24px rgba(0, 0, 0, .35); }

.order-help-tab-btn { background: var(--surface-card); border: 1px solid var(--border-light); color: var(--dark-accent-blue); }
.order-help-tab-btn:hover { border-color: var(--highlight-gold); }
.order-help-tab-btn.active { background: var(--dark-accent-blue); border-color: var(--dark-accent-blue); color: var(--highlight-gold-text); }
html.dark .order-help-tab-btn { background: var(--dark-surface); border-color: var(--dark-border); color: #f3f4f6; }
html.dark .order-help-tab-btn.active { background: var(--dark-accent-blue); border-color: var(--dark-accent-blue); color: var(--highlight-gold-text); }

.order-help-panel { color: var(--text-body); }
html.dark .order-help-panel { color: #d1d5db; }
.order-help-panel strong { color: var(--dark-accent-blue); }
html.dark .order-help-panel strong { color: #fff; }
.order-help-empty { color: var(--text-muted); }

.order-help-recent-item { background: var(--recent-item-bg); border: 1px solid var(--recent-item-border); }
.order-help-recent-item:hover { background: var(--recent-item-hover); }
html.dark .order-help-recent-item { background: var(--dark-border) !important; border-color: #1c4029 !important; }
html.dark .order-help-recent-item:hover { background: var(--dark-surface-hover) !important; }
.order-help-recent-title { color: var(--dark-accent-blue); }
html.dark .order-help-recent-title { color: #ffffff !important; }
.order-help-recent-date { color: var(--text-muted-2); }
html.dark .order-help-recent-date { color: #b7c4bd !important; }

html.dark .ef-card-green { background: var(--dark-surface) !important; border-color: var(--dark-border) !important; }
html.dark .ef-card-green .text-\[\#1b1145\],
html.dark .ef-card-green .text-\[\#0f1c3f\],
html.dark .ef-card-green .text-\[\#0B1F3A\] { color: #fff !important; }
html.dark .ef-card-green .text-gray-400,
html.dark .ef-card-green .text-gray-500,
html.dark .ef-card-green .text-gray-700 { color: rgba(255, 255, 255, .85) !important; }
html.dark .ef-page-label { color: rgba(255, 255, 255, .7) !important; }

.ef-card {
    position: relative;
    background: var(--surface-card);
    border-radius: 20px;
    box-shadow: 0 4px 24px rgba(17, 24, 39, .05);
    padding: 24px;
    scroll-margin-top: calc(var(--ef-topbar-h, 64px) + var(--ef-catbar-h, 0px) + var(--ef-scroll-gap, 16px));
}
html.dark .ef-card { background: var(--dark-surface); border: 1px solid var(--dark-border); box-shadow: 0 4px 24px rgba(0, 0, 0, .35); }

/* ==========================================================================
   من includes/guest-header.php — نفس الأسلوب: نفس القيم، بس مركزية دلوقتي
   ========================================================================== */

.prose-content p { margin-bottom: 1.25rem; line-height: 1.9; }
.prose-content img { border-radius: 1rem; margin: 1.5rem 0; }

.green-atmosphere { position: relative; isolation: isolate; overflow: hidden; }

.dark .green-atmosphere::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background: radial-gradient(circle at 50% 25%, #0f3d2c 0%, #082418 35%, #04140d 65%, #020906 100%);
}
.dark .green-atmosphere::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 42px 42px;
    -webkit-mask-image: radial-gradient(circle at 50% 30%, black 0%, transparent 75%);
    mask-image: radial-gradient(circle at 50% 30%, black 0%, transparent 75%);
}
.green-glow {
    position: absolute;
    border-radius: 9999px;
    filter: blur(90px);
    z-index: -1;
    pointer-events: none;
}
.dark .glass-card {
    background: rgba(10, 26, 20, .55) !important;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-color: rgba(255, 255, 255, .08) !important;
}