/* === استيراد الخطوط === */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700&family=Roboto:wght@400;500;700;900&display=swap');

/* === فئة مساعدة: إخفاء بصري مع الحفاظ على الوصول === */
/**
 * Screen Reader Only (sr-only)
 * ============================
 * 
 * الغرض:
 * -------
 * تُستخدم لإخفاء عناصر <label> بصرياً (للتصميم)
 * مع الحفاظ على إمكانية قراءتها بواسطة برامج قراءة الشاشة
 * للمستخدمين ذوي الإعاقة البصرية (Accessibility)
 * 
 * متى نستخدمها؟
 * ---------------
 * - عندما يكون placeholder واضح بما يكفي
 * - عندما يكون التصميم لا يحتاج label مرئي
 * - لكن معايير الوصول تتطلب وجود label
 * 
 * مثال:
 * ------
 * <label for="search" class="sr-only">البحث</label>
 * <input id="search" placeholder="ابحث...">
 * 
 * النتيجة:
 * - المستخدم العادي: يرى فقط حقل البحث مع placeholder
 * - المستخدم الأعمى: يسمع "البحث" من برنامج القراءة
 * 
 * الامتثال:
 * ----------
 * ✅ WCAG 2.1 Level AA
 * ✅ Material 3 من الدستور: إمكانية الوصول
 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* === متغيرات التصميم (النظام الأساسي) === */
:root {
  /* الألوان الرئيسية - محدثة حسب الدستور v3.5 */
  --brand-color: #10b981;     /* الأخضر الزمردي الأساسي (Emerald Green) */
  --brand-hover: #059669;     /* الأخضر الداكن لحالة Hover */
  --primary-green: #10b981;   /* نفس اللون الأساسي للتوافق مع الكود القديم */
  --green-glow: rgba(16, 185, 129, 0.15); /* وهج أخضر خفيف للخلفيات */
  
  /* خلفيات الصفحة */
  --bg-body: #0f172a;
  --bg-card: #1e293b;
  
  /* ألوان النص */
  --text-white: #ffffff;
  --text-gray: #94a3b8;
  
  /* ألوان الحالات */
  --danger: #ef4444;
  --success: #10b981;
  
  /* خلفيات زجاجية (للبطاقات والعناصر) */
  --glass-bg: rgba(30, 41, 59, 0.7);
  --glass-border: rgba(255, 255, 255, 0.08);
  
  /* الخطوط */
  --font-arabic: 'Cairo', sans-serif;
  --font-english: 'Roboto', sans-serif;
}

/* === إعادة ضبط العناصر (Reset) === */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
 * قفل النسخ والتحديد (Copy Lock):
 * ====================================
 * - نستخدم user-select: none لمنع تحديد النص في التطبيق
 * - هذا يعطي إحساس Native App (تطبيق أصلي) وليس موقع ويب
 * 
 * لماذا؟
 * - يمنع التحديد العرضي للنصوص أثناء التنقل
 * - يعطي تجربة مستخدم أكثر احترافية
 * - يحمي العناصر الحساسة من النسخ السريع
 * 
 * استثناءات (Exceptions):
 * - input, textarea (حقول الإدخال) - يجب السماح بالتحديد فيها
 * - .pin-code, .secret-code (الأكواد السرية) - نسمح بالنسخ لأن لها زر نسخ مخصص
 * 
 * تغطية كاملة للشاشة (Full Screen Coverage):
 * ============================================
 * - min-height: 100vh يضمن أن الخلفية تغطي الشاشة بالكامل
 * - padding-bottom: env(safe-area-inset-bottom) يضيف مساحة إضافية في الأسفل على أجهزة iPhone
 * - هذا يمنع قطع المحتوى خلف Home Indicator
 * - الخلفية (background) تمتد لكامل الشاشة بما في ذلك المناطق خلف Notch و Home Indicator
 */
body {
  font-family: var(--font-arabic);
  background-color: var(--bg-body);
  color: var(--text-white);
  min-height: 100vh;
  line-height: 1.5;
  padding-bottom: calc(6rem + env(safe-area-inset-bottom)); /* مساحة للتنقل السفلي + Safe Area */
  overflow-x: hidden;
  
  /* قفل التحديد والنسخ (Native App Feel) */
  -webkit-user-select: none; /* Safari/Chrome */
  -moz-user-select: none; /* Firefox */
  -ms-user-select: none; /* IE/Edge */
  user-select: none; /* Standard */
}

/**
 * استثناءات قفل النسخ:
 * ====================
 * - نسمح بالتحديد فقط في حقول الإدخال والأكواد السرية
 */
input,
textarea,
.pin-code,
.secret-code {
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

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

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

ul, ol {
  list-style: none;
}

.hidden {
  display: none !important;
}

/* === الهيدر العلوي الثابت (Top Header) === */
/**
 * الهيدر الثابت في أعلى الصفحة
 * 
 * التخطيط (RTL - من اليمين لليسار):
 * - اليمين: زر القائمة (Hamburger)
 * - الوسط: شعار MaliMor (Mali أبيض + Mor أخضر)
 * - اليسار: زر الإشعارات (Bell Icon)
 * 
 * لماذا position: sticky؟
 * - يبقى ثابتاً في الأعلى عند التمرير
 * - يوفر وصول سهل للقائمة والإشعارات دائماً
 * 
 * التصميم:
 * - خلفية Navy (--bg-body)
 * - حد سفلي رفيع جداً
 * - بدون box-shadow (Flat Design)
 */
.app-header {
  position: sticky;
  top: 0;
  z-index: 200; /* فوق المحتوى لكن تحت الـ Sidebar */
  background-color: var(--bg-body);
  padding: 1rem 1.25rem; /* 16px 20px */
  display: flex;
  align-items: center;
  justify-content: space-between; /* توزيع المحتوى: يمين-وسط-يسار */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1); /* حد سفلي رفيع */
  
  /* NO box-shadow - ممنوع حسب الدستور (Flat Design) */
}

/* === زر الدعم الفني (Support Button) - اليمين === */
/**
 * إعادة الهيكلة: من القائمة إلى الدعم الفني
 * ==========================================
 * 
 * القرار الاستراتيجي:
 * - تم نقل زر القائمة (Hamburger) من الهيدر إلى الشريط السفلي
 * - السبب: سهولة الوصول بيد واحدة (Mobile-First UX)
 * - تم وضع زر الدعم الفني هنا بدلاً منه
 * - الفائدة: زيادة ثقة المستخدم وسرعة التواصل عند الحاجة
 * 
 * الهوية البصرية (Emerald Identity):
 * - اللون الأخضر الزمردي (#10b981) عند Hover
 * - NO Glow Effects (Flat Design)
 * - حدود نظيفة بدون تأثيرات معقدة
 */
.header-action-btn {
  width: 2.5rem; /* 40px */
  height: 2.5rem; /* 40px */
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem; /* 12px */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-white);
  cursor: pointer;
  transition: all 0.3s;
  font-size: 1.125rem; /* 18px */
}

.header-action-btn:hover {
  background: rgba(16, 185, 129, 0.1); /* خلفية خضراء خفيفة */
  border-color: var(--brand-color);
  color: var(--brand-color); /* الأخضر الزمردي */
  /* NO glow - Flat Design */
}

/* === الشعار (Logo) - الوسط === */
.logo-wordmark {
  font-family: var(--font-english);
  font-weight: 900;
  font-size: 1.5rem; /* 24px - أصغر قليلاً للتناسب مع الأزرار */
  letter-spacing: -0.02em;
  flex: 1; /* يأخذ المساحة المتبقية */
  text-align: center; /* توسيط الشعار */
}

.logo-mali {
  color: var(--text-white);
}

.logo-mor {
  color: var(--brand-color); /* أخضر زمردي */
}

/* === زر الإشعارات (Notification Button) - اليسار === */
.notification-btn {
  width: 2.5rem; /* 40px */
  height: 2.5rem; /* 40px */
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: 0.75rem; /* 12px */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-white);
  cursor: pointer;
  transition: all 0.3s;
  font-size: 1.125rem; /* 18px */
  position: relative;
}

.notification-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--brand-color);
}

/* نقطة الإشعارات الحمراء (Notification Dot) */
.notification-btn.has-notifications::after {
  content: '';
  position: absolute;
  top: 0.375rem; /* 6px */
  left: 0.375rem; /* 6px */
  width: 0.5rem; /* 8px */
  height: 0.5rem; /* 8px */
  background: var(--danger);
  border-radius: 50%;
  border: 2px solid var(--bg-body);
}

/* ========================================================= */
/* === القائمة الجانبية (Sidebar Drawer) === */
/* ========================================================= */
/**
 * قائمة جانبية تنزلق من اليمين (RTL)
 * 
 * المنطق:
 * - افتراضياً: مخفية خارج الشاشة (transform: translateX(100%))
 * - عند الفتح: تنزلق للداخل (transform: translateX(0))
 * - تحتوي على قائمة خيارات (الدعم، اللغة، الشروط، إلخ)
 * 
 * التصميم:
 * - خلفية Navy Slate (--bg-card)
 * - حدود نظيفة
 * - بدون Glow
 * - Emerald Green للعناصر النشطة
 */

/* الخلفية المظلمة (Backdrop / Overlay) */
/**
 * طبقة مظلمة تغطي الشاشة عند فتح القائمة
 * 
 * الوظيفة:
 * - تعتيم المحتوى الخلفي
 * - منع التفاعل مع المحتوى الخلفي (pointer-events)
 * - النقر عليها يغلق القائمة
 * 
 * لماذا pointer-events: none افتراضياً؟
 * - عندما تكون القائمة مغلقة، الـ Backdrop يكون مخفي (opacity: 0)
 * - نريد السماح بالنقر على المحتوى الخلفي
 * - عند الفتح، نضيف class="active" فيصبح pointer-events: all
 */
.sidebar-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7); /* خلفية سوداء شفافة (70%) */
  z-index: 2000; /* فوق Bottom Nav (1000) وجميع Modals - الأولوية القصوى */
  opacity: 0; /* مخفي افتراضياً */
  pointer-events: none; /* لا يمنع التفاعل افتراضياً */
  transition: opacity 0.3s ease;
}

/* حالة الفتح (Active) */
.sidebar-backdrop.active {
  opacity: 1; /* إظهار الخلفية */
  pointer-events: all; /* السماح بالنقر لإغلاق القائمة */
}

/* === القائمة الجانبية (Sidebar Drawer) === */
/**
 * تحسين التصميم النهائي:
 * - تقليل العرض إلى 72% لمظهر عصري وأنيق (Slimmer Design)
 * - الحد الأقصى 18rem (288px) بدلاً من 22.5rem
 * 
 * لماذا عرض أصغر؟
 * - تجربة مستخدم أفضل على الأجهزة المحمولة
 * - يظهر جزء أكبر من المحتوى الخلفي (أكثر سياقاً للمستخدم)
 * - يبدو أكثر احترافية وحداثة (Modern & Sleek)
 */
.side-drawer {
  position: fixed;
  top: 0;
  right: 0; /* من اليمين (RTL) */
  width: 72%; /* 72% - أنحف من 85% (Slimmer Design) */
  max-width: 18rem; /* 288px - أصغر للمظهر العصري */
  height: 100%;
  background: var(--bg-card); /* خلفية Navy Slate (#1e293b) */
  border-left: 1px solid rgba(255, 255, 255, 0.1); /* حد يسار رفيع ونظيف */
  z-index: 2001; /* فوق الـ Backdrop (2000) والـ Bottom Nav (1000) - الأولوية القصوى */
  
  /* الانتقال السلس (Smooth Transition) */
  transform: translateX(100%); /* مخفي خارج الشاشة افتراضياً */
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  
  /* التمرير الداخلي */
  overflow-y: auto;
  overflow-x: hidden;
  
  /* NO box-shadow glow - ممنوع حسب الدستور */
}

/* شريط التمرير داخل القائمة الجانبية */
.side-drawer::-webkit-scrollbar {
  width: 0.5rem; /* 8px */
}

.side-drawer::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
}

.side-drawer::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0.25rem; /* 4px */
}

.side-drawer::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* حالة الفتح */
.side-drawer.active {
  transform: translateX(0); /* الانزلاق للداخل */
}

/* === رأس القائمة (Sidebar Header) === */
.drawer-header {
  padding: 1.5rem 1.25rem; /* 24px 20px */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* زر الإغلاق */
.close-drawer-btn {
  width: 2.5rem; /* 40px */
  height: 2.5rem; /* 40px */
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  border-radius: 0.75rem; /* 12px */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-white);
  cursor: pointer;
  transition: all 0.3s;
  font-size: 1.25rem; /* 20px */
}

.close-drawer-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--danger); /* أحمر عند Hover (رمز الإغلاق) */
}

.drawer-title {
  font-size: 1.25rem; /* 20px */
  font-weight: 800;
}

/* === قائمة عناصر القائمة (Sidebar Menu List) === */
.drawer-menu {
  padding: 1.25rem 0; /* 20px 0 */
}

/* عنصر قائمة واحد */
.drawer-menu-item {
  display: flex;
  align-items: center;
  gap: 1rem; /* 16px */
  padding: 1rem 1.25rem; /* 16px 20px */
  color: var(--text-white);
  cursor: pointer;
  transition: all 0.3s;
  border-right: 3px solid transparent; /* حد يميني للعنصر النشط */
}

.drawer-menu-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-right-color: var(--brand-color); /* حد أخضر عند Hover */
}

/* أيقونة العنصر */
.drawer-menu-item i {
  font-size: 1.25rem; /* 20px */
  width: 1.5rem; /* 24px - عرض ثابت للمحاذاة */
  text-align: center;
  color: var(--text-gray);
  transition: color 0.3s;
}

.drawer-menu-item:hover i {
  color: var(--brand-color); /* أخضر زمردي */
}

/* نص العنصر */
.drawer-menu-item span {
  font-size: 0.9375rem; /* 15px */
  font-weight: 600;
}

/* === العنصر النشط (Active Item) === */
.drawer-menu-item.active {
  background: rgba(16, 185, 129, 0.1); /* خلفية خضراء شفافة */
  border-right-color: var(--brand-color); /* حد أخضر */
}

.drawer-menu-item.active i {
  color: var(--brand-color);
}

.drawer-menu-item.active span {
  color: var(--brand-color);
  font-weight: 700;
}

/* فاصل بين الأقسام */
.drawer-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.05);
  margin: 0.625rem 0; /* 10px 0 */
}

/* === المحتوى الرئيسي === */
.app-main {
  min-height: calc(100vh - 7rem);
  padding: 1rem 1.25rem;
}

/* === إخفاء جميع الأقسام افتراضياً (SPA Routing) === */
/**
 * حسب الدستور v3.5 - القاعدة #6: Hybrid Multi-Page App
 * 
 * المنطق:
 * - نخفي جميع الأقسام الفرعية داخل .app-main باستثناء الأول (home-section)
 * - عند النقر على زر التنقل، يقوم JS بإظهار القسم المطلوب
 * - هذا يحقق تجربة SPA (Single Page Application) بدون إعادة تحميل الصفحة
 */
#app-main > section {
  display: none; /* إخفاء جميع الأقسام افتراضياً */
}

/* إظهار القسم الأول (الرئيسية) فقط عند تحميل الصفحة */
#home-section {
  display: block; /* القسم الأول يظهر تلقائياً */
}

/* === شريط التنقل السفلي (Bottom Navigation Bar) === */
/**
 * إعادة هيكلة كاملة - بدون ترقيع (Complete Refactor - No Patching):
 * =====================================================================
 * 
 * القاعدة #10 من الدستور: لا ترقيع (No Patchwork)
 * -----------------------------------------------
 * تم مسح التنسيقات القديمة تماماً واستبدالها بهيكل جديد نظيف
 * - لم يتم إضافة أكواد في نهاية الملف
 * - تم تعديل الكلاس الأصلي مباشرة
 * - الكود نظيف ومنظم بدون تراكمات
 * 
 * التصميم: مثبت بالكامل (Full-Width Docked)
 * ==========================================
 * 
 * المشكلة التي تم حلها:
 * -------------------
 * على أجهزة iPhone الحديثة (X وأحدث)، يوجد "Home Indicator" في الأسفل (~34px)
 * كان يترك فجوة بيضاء قبيحة خلف شريط التنقل
 * 
 * الحل النهائي - المفتاح السحري: 🔑
 * =================================
 * padding-bottom: env(safe-area-inset-bottom)
 * 
 * كيف يعمل؟
 * - يمدد الخلفية الكحلية (Navy Slate #0f172a) لتغطي المساحة خلف Home Indicator
 * - على iPhone حديث: env() = ~34px → الخلفية تمتد 34px إضافية → لا فجوة ✅
 * - على أجهزة قديمة/Android: env() = 0px → يلتصق بالأسفل مباشرة → مظهر عادي ✅
 * 
 * المواصفات النهائية:
 * ------------------
 * - الشريط يلتصق بأسفل الشاشة تماماً (bottom: 0)
 * - يمتد على كامل العرض (width: 100%)
 * - الخلفية الكحلية تغطي منطقة Safe Area
 * - لا زوايا دائرية (border-radius: 0)
 * - لا تحويلات أو توسيط (transform: none)
 * 
 * ملاحظة حاسمة: ⚠️
 * - يجب أن يحتوي meta tag على: viewport-fit=cover
 * - بدونه، env(safe-area-inset-bottom) لن يعمل
 *
 * عائم عصري: الزاويتان العلويتان دائريتان، السفليتان بزاوية (بدون استدارة)
 */
.bottom-nav {
  position: fixed;
  left: 1.25rem;
  right: 1.25rem;
  bottom: max(1.25rem, env(safe-area-inset-bottom));
  width: calc(100% - 2.5rem);
  max-width: 22rem;
  margin-left: auto;
  margin-right: auto;
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 1.25rem 1.25rem 0 0;
  z-index: 1000;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.22);
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 0.25rem;
  height: 4rem;
  padding: 0 0.5rem;
}

/* === عناصر التنقل (Navigation Items) === */
.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-gray);
  transition: color 0.2s ease, background 0.25s ease, transform 0.2s ease;
  flex: 1;
  min-width: 0;
  font-size: 0.625rem;
  gap: 0.2rem;
  position: relative;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-arabic);
  padding: 0.5rem 0.4rem;
  border-radius: 1rem;
}

.nav-item i {
  font-size: 1.2rem;
  transition: transform 0.2s ease;
}

/* العنصر النشط: حبة (pill) خلف الأيقونة والنص - أسلوب عصري */
.nav-item.active {
  color: var(--brand-color);
  font-weight: 700;
  background: rgba(16, 185, 129, 0.14);
}

.nav-item.active i {
  transform: scale(1.05);
  font-size: 1.25rem;
}

.nav-item.active::after {
  display: none;
}

/* === تأثير Hover === */
@media (hover: hover) {
  .nav-item:hover:not(.active) {
    color: var(--text-white);
    background: rgba(255, 255, 255, 0.04);
  }
}

/* ========================================================= */
/* === صفحة الشروط والأحكام (Terms & Conditions) === */
/* ========================================================= */
/**
 * صفحة قانونية تعرض الشروط والأحكام
 * 
 * الهوية البصرية:
 * - تم استبدال الذهبي (Gold) بالأخضر الزمردي (Emerald Green)
 * - لماذا الأخضر؟
 *   * يرمز للثقة والمصداقية (Trust)
 *   * يتطابق مع هوية MaliMor الموحدة
 *   * أكثر وضوحاً وراحة للعين في القراءة الطويلة
 * 
 * التصميم:
 * - Flat Design (بدون Glow)
 * - خلفية Navy Slate مسطحة
 * - بطاقات شفافة خفيفة
 */

/* تحديث آخر */
.last-update {
  display: block;
  font-size: 0.6875rem; /* 11px */
  color: var(--text-gray);
  margin-top: 0.3125rem; /* 5px */
}

/* === محتوى الشروط (Terms Content) === */
.terms-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem; /* 20px */
  padding-bottom: 5rem; /* 80px - مسافة لزر الموافقة العائم */
}

/* === بطاقة شرط واحد (Term Card) === */
.term-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 1.25rem; /* 20px */
  padding: 1.25rem; /* 20px */
  transition: all 0.3s;
}

.term-card:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(16, 185, 129, 0.2); /* حد أخضر زمردي عند Hover */
  transform: translateY(-0.125rem); /* 2px - رفع بسيط */
}

/* رأس الشرط (أيقونة + عنوان) */
.term-header {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* 12px */
  margin-bottom: 0.625rem; /* 10px */
}

/* أيقونة الشرط */
.term-icon {
  width: 2.1875rem; /* 35px */
  height: 2.1875rem; /* 35px */
  border-radius: 0.625rem; /* 10px */
  background: rgba(16, 185, 129, 0.1); /* خلفية خضراء شفافة */
  color: var(--brand-color); /* أخضر زمردي */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem; /* 16px */
  flex-shrink: 0;
}

/* عنوان الشرط */
.term-title {
  font-size: 0.9375rem; /* 15px */
  font-weight: 700;
  color: var(--text-white);
}

/* نص الشرط */
.term-text {
  font-size: 0.8125rem; /* 13px */
  color: var(--text-gray);
  line-height: 1.6;
  text-align: justify;
}

/* === ملاحظة مهمة (Important Note) === */
.important-note {
  background: rgba(239, 68, 68, 0.1);
  border: 1px dashed rgba(239, 68, 68, 0.3);
  border-radius: 1rem; /* 16px */
  padding: 0.9375rem; /* 15px */
  margin-top: 0.625rem; /* 10px */
  display: flex;
  gap: 0.75rem; /* 12px */
}

.note-icon {
  color: var(--danger);
  font-size: 1.125rem; /* 18px */
  margin-top: 0.125rem; /* 2px */
  flex-shrink: 0;
}

.note-text {
  font-size: 0.75rem; /* 12px */
  color: #fca5a5; /* أحمر فاتح */
  line-height: 1.5;
}

/* === زر الموافقة العائم (Accept Button) === */
/**
 * زر عائم في الأسفل للموافقة على الشروط
 * 
 * التموضع (z-index Layering):
 * - z-index: 900 (فوق المحتوى، تحت الـ Bottom Nav)
 * - position: fixed, bottom: 90px (فوق الشريط السفلي مباشرة)
 * - left: 50% + transform: translateX(-50%) للتوسيط
 * 
 * Mobile-First:
 * - width: 90% (مع max-width: 500px)
 * - height: 50px (كبير بما يكفي للنقر السهل)
 * - border-radius: 50px (حبوب دائرية)
 * 
 * التصميم:
 * - خلفية أخضر زمردي صلب (NOT GOLD GRADIENT)
 * - نص أبيض (NOT BROWN)
 * - بدون Glow shadow كبير
 */
.accept-container {
  position: fixed;
  bottom: 5.625rem; /* 90px - فوق الشريط السفلي مباشرة */
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 31.25rem; /* 500px */
  z-index: 900; /* فوق المحتوى، تحت Bottom Nav (1000) */
}

.accept-btn {
  width: 100%;
  height: 3.125rem; /* 50px - كبير للنقر السهل على الموبايل */
  border: none;
  border-radius: 3.125rem; /* 50px - حبوب دائرية */
  background: var(--brand-color); /* أخضر زمردي صلب */
  color: var(--text-white); /* نص أبيض */
  font-size: 0.9375rem; /* 15px */
  font-weight: 800;
  font-family: var(--font-arabic);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem; /* 10px */
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5); /* ظل للعمق فقط (ليس glow) */
  transition: all 0.3s;
}

.accept-btn:hover {
  transform: scale(1.02);
  filter: brightness(1.1); /* تفتيح بسيط */
}

.accept-btn i {
  font-size: 1.125rem; /* 18px */
}

/* ========================================================= */
/* === مودال تأكيد تسجيل الخروج (Logout Confirmation Modal) === */
/* ========================================================= */
/**
 * مودال يظهر عند النقر على "تسجيل الخروج" في صفحة الحساب
 *
 * لماذا اللون الأحمر للخروج؟
 * - حسب الدستور: اللون الأحمر (--danger: #ef4444) يُستخدم للإجراءات التدميرية (Destructive)
 * - تسجيل الخروج ينهي الجلسة ويُبعد المستخدم عن التطبيق، لذا نعرضه كإجراء خطير
 * - هذا يساعد المستخدم على التمييز بين "إلغاء" (محايد) و"خروج" (تحذيري)
 *
 * لماذا إزالة الذهبي (Gold)؟
 * - الذهبي لا يطابق هوية MaliMor (زمردي + Navy)
 * - الخلفية Navy Slate (#0f172a) والبطاقة --bg-card (#1e293b) للاتساق
 *
 * التوسيط (Centering):
 * - الحاوية .logout-modal-overlay تستخدم display: flex مع align-items: center و justify-content: center
 * - هذا يضع البطاقة في منتصف الشاشة أفقياً وعمودياً دون الحاجة لـ position: absolute
 */
.logout-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(6px);
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  z-index: 1100;
  animation: logoutOverlayFadeIn 0.25s ease-out;
}

.logout-modal-overlay.active {
  display: flex;
}

/* حقول مودال تعديل الملف الشخصي */
.profile-edit-fields {
  margin: 1.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.profile-edit-fields .input-group {
  margin-bottom: 0;
}

@keyframes logoutOverlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* بطاقة التأكيد - Flat Design، بدون Glow */
.logout-card {
  width: 100%;
  max-width: 22.5rem; /* 380px */
  background: var(--bg-card);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.5rem;
  padding: 1.875rem;
  text-align: center;
  position: relative;
  animation: logoutCardPopIn 0.3s ease-out;
}

/* Mobile-First: على الشاشات الصغيرة البطاقة تأخذ حتى 90% من العرض */
@media (max-width: 400px) {
  .logout-card {
    max-width: 90%;
  }
}

@keyframes logoutCardPopIn {
  from {
    transform: scale(0.96);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* أيقونة الخروج - لون خطر (أحمر) بدون تأثير نبض لبقاء التصميم مسطحاً */
.logout-icon-wrapper {
  width: 5rem;
  height: 5rem;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.logout-icon-wrapper i {
  font-size: 1.75rem;
  color: var(--danger);
}

.logout-modal-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--text-white);
  margin-bottom: 0.625rem;
}

.logout-modal-desc {
  font-size: 0.875rem;
  color: var(--text-gray);
  margin-bottom: 1.875rem;
  line-height: 1.6;
}

/* === مودال اختيار اللغة === */
.lang-modal-card .logout-modal-title {
  margin-bottom: 1.25rem;
}
.lang-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.lang-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.875rem 1rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem;
  color: var(--text-white);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  font-family: var(--font-arabic);
  text-align: right;
}
.lang-option:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(16, 185, 129, 0.4);
}
.lang-option.active .lang-option-check,
.lang-option .lang-option-check {
  opacity: 0;
  color: var(--brand-color);
}
.lang-option.active .lang-option-check {
  opacity: 1;
}
.lang-modal-close {
  width: 100%;
}

/* إعدادات الحساب: صف مع مفتاح تبديل (إشعارات) */
.settings-item-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.settings-item-toggle .switch {
  flex-shrink: 0;
}
.settings-item-clickable {
  cursor: pointer;
}
.item-right-lang {
  display: flex;
  align-items: center;
  gap: 0.3125rem;
}
.lang-current {
  font-size: 0.6875rem;
  color: var(--brand-color);
  font-weight: 700;
}

.logout-modal-actions {
  display: flex;
  gap: 0.9375rem;
}

.logout-btn-cancel,
.logout-btn-confirm {
  flex: 1;
  height: 3.125rem;
  border-radius: 0.875rem;
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s;
  border: none;
  font-family: var(--font-arabic);
}

/* زر الإلغاء - محايد (خلفية شفافة) */
.logout-btn-cancel {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-white);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.logout-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* زر التأكيد (خروج) - لون خطر فقط، بدون تدرج أو ظل قوي (Flat) */
.logout-btn-confirm {
  background: var(--danger);
  color: var(--text-white);
}

.logout-btn-confirm:hover {
  background: #dc2626;
}

/* ========================================================= */
/* === مركز المساعدة / الدعم الفني (Support / Help Center) === */
/* ========================================================= */
/**
 * صفحة الدعم الفني ومركز المساعدة
 *
 * الهوية البصرية:
 * - استبدال جميع ألوان الذهبي (Gold #fbbf24) بالأخضر الزمردي (Emerald #10b981)
 * - لماذا الزمردي؟
 *   * لأنه لون MaliMor الأساسي
 *   * يُستخدم في جميع عناصر الـ Call-to-Action
 *   * يوفر تناسقاً بصرياً عبر التطبيق
 *
 * التصميم المسطح (Flat Design):
 * - بدون Glow effects أو ظلال قوية
 * - حدود بسيطة (1px solid) مع شفافية
 * - Hover states باستخدام الألوان المسطحة فقط
 *
 * Mobile-First:
 * - شبكة الاتصال (contact-grid) تظل بتخطيط عمودين على الشاشات الصغيرة (360px+)
 * - أزرار FAQ كبيرة بما يكفي للنقر السهل (tap target 44px+)
 *
 * لماذا تم إزالة الـ Bottom Nav من السنيبت الأصلي؟
 * - MaliMor تستخدم نظام SPA موحد مع شريط تنقل سفلي واحد في index.html
 * - تكرار الشريط السفلي في كل قسم يخالف بنية الـ SPA ويسبب تضارب في الحالة النشطة (active state)
 * - الحل: قسم واحد (#support-section) يتم إظهاؤه/إخفاؤه عبر JavaScript
 */

/* صندوق الترحيب والبحث */
.support-hero {
  text-align: center;
  margin-bottom: 1.875rem; /* 30px */
}

.hero-text {
  color: var(--text-gray);
  font-size: 0.875rem; /* 14px */
  margin-bottom: 1.25rem; /* 20px */
}

/* شبكة قنوات التواصل (2 أعمدة على جميع الأحجام) */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* عمودين ثابتين حتى على الموبايل */
  gap: 0.9375rem; /* 15px */
  margin-bottom: 2.1875rem; /* 35px */
}

/* بطاقة قناة تواصل واحدة */
.contact-card {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 1.125rem; /* 18px */
  padding: 1.25rem; /* 20px */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem; /* 10px */
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none; /* لأن بعضها روابط <a> */
  color: inherit;
}

/**
 * Hover Effect (Flat Design):
 * - رفع بسيط (translateY)
 * - تغيير لون الحد فقط (بدون box-shadow أو glow)
 */
.contact-card:hover {
  transform: translateY(-0.1875rem); /* 3px */
  border-color: rgba(255, 255, 255, 0.2);
}

.contact-icon {
  font-size: 1.75rem; /* 28px */
  margin-bottom: 0.3125rem; /* 5px */
}

.contact-name {
  font-size: 0.8125rem; /* 13px */
  font-weight: 700;
  color: var(--text-white);
}

.contact-desc {
  font-size: 0.625rem; /* 10px */
  color: var(--text-gray);
  text-align: center;
}

/* تخصيص ألوان كل قناة تواصل */
.card-whatsapp:hover {
  background: rgba(37, 211, 102, 0.1);
  border-color: #25D366; /* أخضر واتساب */
}

.card-whatsapp .contact-icon {
  color: #25D366;
}

.card-telegram:hover {
  background: rgba(0, 136, 204, 0.1);
  border-color: #0088cc; /* أزرق تيليجرام */
}

.card-telegram .contact-icon {
  color: #0088cc;
}

/**
 * بطاقة "تذكرة دعم" - تستخدم الزمردي (بدلاً من الذهبي)
 * لماذا الزمردي؟
 * - لأنه لون العلامة التجارية الأساسي لـ MaliMor
 * - يتماشى مع باقي الأزرار الرئيسية (Primary Actions)
 */
.card-ticket:hover {
  background: rgba(16, 185, 129, 0.1); /* خلفية زمردية شفافة */
  border-color: var(--brand-color); /* حد زمردي */
}

.card-ticket .contact-icon {
  color: var(--brand-color); /* أيقونة زمردية */
}

.card-email:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: #ef4444; /* أحمر للبريد */
}

.card-email .contact-icon {
  color: #ef4444;
}

/* ========================================================= */
/* === الأسئلة الشائعة (FAQ Accordion) === */
/* ========================================================= */
/**
 * استخدمنا عنصر <details> HTML الأصلي للأكورديون
 *
 * لماذا <details> وليس JavaScript مخصص؟
 * - أكثر سهولة للوصول (Accessibility): يدعم قارئات الشاشة تلقائياً
 * - أقل تعقيداً: المتصفح يدير حالة الفتح/الإغلاق
 * - أداء أفضل: لا حاجة لـ addEventListener على كل عنصر
 *
 * التخصيص البصري:
 * - الأيقونة (chevron) تدور 180 درجة عند الفتح
 * - اللون الزمردي (بدلاً من الذهبي) للأيقونة والحد عند الفتح
 * - Flat Design: بدون ظلال أو تأثيرات معقدة
 */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem; /* 10px */
  margin-bottom: 1.875rem; /* 30px */
}

.faq-item {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0.875rem; /* 14px */
  border: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
  transition: all 0.3s;
}

/**
 * حالة الفتح [open]:
 * - خلفية أفتح قليلاً
 * - حد زمردي شفاف (بدلاً من الذهبي الأصلي)
 */
.faq-item[open] {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(16, 185, 129, 0.2); /* حد زمردي */
}

.faq-summary {
  padding: 0.9375rem; /* 15px */
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem; /* 13px */
  font-weight: 600;
  color: var(--text-white);
  list-style: none; /* إخفاء السهم الافتراضي للمتصفح */
  min-height: 2.75rem; /* 44px - Tap Target للموبايل */
}

/* إخفاء السهم الافتراضي في Chrome/Safari */
.faq-summary::-webkit-details-marker {
  display: none;
}

/**
 * أيقونة الـ chevron:
 * - لون زمردي (بدلاً من ذهبي)
 * - تدور 180 درجة عند فتح السؤال
 */
.faq-icon {
  color: var(--brand-color); /* زمردي */
  transition: transform 0.3s;
  font-size: 0.75rem; /* 12px */
  flex-shrink: 0;
}

.faq-item[open] .faq-icon {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 0.9375rem 0.9375rem; /* 0 15px 15px */
  font-size: 0.75rem; /* 12px */
  color: var(--text-gray);
  line-height: 1.6;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  margin-top: 0.3125rem; /* 5px */
  padding-top: 0.625rem; /* 10px */
}

/* ========================================================= */
/* === زر المحادثة المباشرة (Live Chat Button) === */
/* ========================================================= */
/**
 * زر كبير في أسفل صفحة الدعم لفتح المحادثة المباشرة
 *
 * التعديلات:
 * - استبدال الـ gradient الذهبي بلون زمردي صلب (Flat)
 * - استبدال لون النص من البني الداكن (#451a03) إلى الأبيض
 * - إزالة box-shadow الذهبي (Glow Effect)
 *
 * لماذا؟
 * - الذهبي لا يتماشى مع هوية MaliMor
 * - Flat Design يعني ألوان صلبة بدون تدرجات أو إشعاعات
 * - الأبيض أوضح للقراءة على خلفية خضراء
 */
.live-chat-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem; /* 10px */
  width: 100%;
  height: 3.4375rem; /* 55px */
  background: var(--brand-color); /* زمردي صلب (بدلاً من gold-gradient) */
  border-radius: 3.125rem; /* 50px */
  color: var(--text-white); /* أبيض (بدلاً من البني #451a03) */
  font-weight: 800;
  font-size: 1rem; /* 16px */
  margin-top: 1.875rem; /* 30px */
  cursor: pointer;
  border: none;
  font-family: var(--font-arabic);
  transition: all 0.3s;
  /* NO box-shadow with glow - Flat Design */
}

.live-chat-btn:hover {
  background: var(--brand-hover); /* أخضر داكن */
  transform: translateY(-0.125rem); /* 2px - رفع بسيط */
}

/* ========================================================= */
/* === ويدجت المحادثة المباشرة العائم (في قلب الموقع) === */
/* ========================================================= */
.live-chat-widget {
  position: fixed;
  bottom: 5rem; /* فوق الشريط السفلي */
  left: 1rem; /* على الحافة لعدم منع منتصف الشاشة */
  transform: none;
  z-index: 9998;
  pointer-events: none;
}
.live-chat-widget > * {
  pointer-events: auto;
}

.live-chat-fab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--brand-color);
  color: var(--text-white);
  border: none;
  cursor: pointer;
  font-family: var(--font-arabic);
  font-weight: 700;
  font-size: 1rem;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
  transition: transform 0.25s, box-shadow 0.25s, background 0.25s;
}
.live-chat-fab:hover {
  background: var(--brand-hover);
  transform: scale(1.08);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}
.live-chat-fab:focus-visible {
  outline: 2px solid var(--brand-color);
  outline-offset: 2px;
}
.live-chat-fab i {
  font-size: 1.25rem;
}
.live-chat-fab-label {
  display: none;
}
@media (min-width: 480px) {
  .live-chat-widget {
    left: auto;
    right: 1rem;
    bottom: 5.5rem;
    transform: none;
  }
  .live-chat-fab {
    width: auto;
    padding: 0 1rem;
    border-radius: 2rem;
  }
  .live-chat-fab-label {
    display: inline;
  }
}

.live-chat-panel {
  position: absolute;
  bottom: calc(100% + 0.75rem);
  left: 0;
  transform: translateY(0.5rem);
  width: min(90vw, 320px);
  background: var(--bg-card);
  border: 1px solid var(--border-subtle);
  border-radius: 1rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}
.live-chat-widget.panel-open .live-chat-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (min-width: 480px) {
  .live-chat-panel {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(0.5rem);
  }
  .live-chat-widget.panel-open .live-chat-panel {
    transform: translateX(0) translateY(0);
  }
}

.live-chat-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.live-chat-panel-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
}
.live-chat-panel-close {
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 0.5rem;
  transition: background 0.2s, color 0.2s;
}
.live-chat-panel-close:hover {
  background: var(--bg-hover);
  color: var(--text-primary);
}

.live-chat-panel-desc {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  color: var(--text-secondary);
}

.live-chat-channels {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.live-chat-channel {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  text-decoration: none;
  color: var(--text-primary);
  background: var(--bg-hover);
  border: 1px solid transparent;
  transition: background 0.2s, border-color 0.2s;
}
.live-chat-channel:hover {
  background: var(--bg-card);
  border-color: var(--brand-color);
}
.live-chat-channel i {
  font-size: 1.5rem;
  width: 2rem;
  text-align: center;
}
.live-chat-channel span {
  font-weight: 600;
  flex: 1;
}
.live-chat-channel small {
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.live-chat-wa i { color: #25D366; }
.live-chat-tg i { color: #229ED9; }
.live-chat-email i { color: var(--brand-color); }

/* ========================================================= */
/* === قسم المجتمع / تيليجرام (Community / Telegram Section) === */
/* ========================================================= */
/**
 * صفحة دعوة المستخدمين للانضمام لقناة MaliMor على Telegram
 *
 * التوازن بين هوية MaliMor وهوية Telegram:
 * ===========================================
 * - لون Telegram الأزرق (#229ED9) يُستخدم فقط في:
 *   1. أيقونة Telegram في الـ Header (header-icon-box)
 *   2. أيقونة الطائرة الورقية في البطاقة الرئيسية (tg-icon-wrapper)
 *   3. زر "فتح في تيليجرام" (join-btn) - لأنه Call-to-Action خارجي
 * 
 * - لون MaliMor الزمردي (#10b981) يُستخدم في:
 *   1. أيقونات المزايا (feat-icon) - بدلاً من الذهبي
 *   2. أيقونة "عدد المشتركين" (stats-badge) - بدلاً من الذهبي
 *   3. Hover states على بطاقات المزايا - بدلاً من الأزرق
 *
 * لماذا هذا التوازن؟
 * - الأزرق يُبقي الارتباط الذهني بتطبيق Telegram (Brand Recognition)
 * - الزمردي يحافظ على هوية MaliMor الموحدة في باقي العناصر
 * - هذا يمنع تشتت الهوية البصرية ويحافظ على Visual Hierarchy
 *
 * الخلفية المسطحة (Flat Background):
 * - تم إزالة radial-gradient الأزرق من body
 * - الخلفية الآن Navy Slate صلبة (#0f172a)
 * - بطاقة Telegram: إزالة box-shadow مع glow، استخدام حد بسيط فقط
 *
 * Mobile-First (320px-360px):
 * - شبكة المزايا (features-grid) تظل 3 أعمدة حتى على الشاشات الصغيرة جداً
 * - استخدام gap صغير (10px) وpادding مخفض على الشاشات الصغيرة
 */

/* === بطاقة الدعوة الرئيسية (Main Invitation Card) === */
/**
 * البطاقة الكبيرة في الأعلى تدعو المستخدم للانضمام
 *
 * التعديلات من السنيبت الأصلي:
 * - إزالة linear-gradient الأزرق، استخدام خلفية شفافة بسيطة
 * - إزالة box-shadow مع glow (Flat Design)
 * - إزالة أيقونة Telegram العملاقة في الخلفية (::before) لبقاء التصميم نظيفاً
 */
.telegram-card {
  background: rgba(30, 41, 59, 0.4); /* خلفية بسيطة شفافة */
  border: 1px solid rgba(42, 171, 238, 0.2); /* حد أزرق خفيف (Telegram) */
  border-radius: 1.5rem; /* 24px */
  padding: 1.875rem 1.25rem; /* 30px 20px */
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 1.875rem; /* 30px */
  /* NO box-shadow with glow - Flat Design */
}

/* أيقونة تيليجرام الكبيرة (الطائرة الورقية) */
/**
 * هذه هي الأيقونة الوحيدة التي تستخدم لون Telegram الأزرق بالكامل
 * - لماذا؟ لأنها تمثل العلامة التجارية لـ Telegram نفسها
 * - gradient من الأزرق الفاتح للأزرق الداكن (Telegram الرسمي)
 */
.tg-icon-wrapper {
  width: 5rem; /* 80px */
  height: 5rem; /* 80px */
  background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%); /* Telegram Gradient */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.9375rem; /* 0 auto 15px */
  font-size: 2.5rem; /* 40px */
  color: #fff;
  box-shadow: 0 0.625rem 1.5625rem rgba(34, 158, 217, 0.3); /* ظل بسيط، ليس glow */
}

.tg-title {
  font-size: 1.125rem; /* 18px */
  font-weight: 800;
  margin-bottom: 0.3125rem; /* 5px */
}

.tg-desc {
  font-size: 0.8125rem; /* 13px */
  color: var(--text-gray);
  margin-bottom: 1.25rem; /* 20px */
}

/* شارة عدد المشتركين */
/**
 * الأيقونة هنا تستخدم الزمردي (بدلاً من الذهبي الأصلي)
 * - لماذا؟ لأن عدد المشتركين معلومة إحصائية داخلية لـ MaliMor
 * - ليست جزءاً من هوية Telegram، بل من محتوى MaliMor
 */
.stats-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem; /* 8px */
  background: rgba(255, 255, 255, 0.1);
  padding: 0.375rem 0.9375rem; /* 6px 15px */
  border-radius: 3.125rem; /* 50px */
  font-size: 0.75rem; /* 12px */
  font-weight: 600;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.stats-badge i {
  color: var(--brand-color); /* زمردي بدلاً من ذهبي */
}

/* === شبكة المزايا (Features Grid) === */
/**
 * 3 أعمدة على جميع الأحجام (حتى 320px)
 *
 * Mobile Optimization:
 * - على الشاشات الصغيرة جداً (<360px)، نخفض الـ gap والـ padding
 * - هذا يضمن بقاء التخطيط نظيفاً بدون تجاوز (overflow)
 */
.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 أعمدة ثابتة */
  gap: 0.9375rem; /* 15px */
  margin-bottom: 1.875rem; /* 30px */
}

/* على الشاشات الصغيرة جداً، نخفض الـ gap */
@media (max-width: 360px) {
  .features-grid {
    gap: 0.625rem; /* 10px */
  }
}

.feature-item {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 1rem; /* 16px */
  padding: 0.9375rem 0.625rem; /* 15px 10px */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem; /* 10px */
  text-align: center;
  transition: all 0.3s;
}

/* على الشاشات الصغيرة جداً، نخفض الـ padding */
@media (max-width: 360px) {
  .feature-item {
    padding: 0.75rem 0.5rem; /* 12px 8px */
  }
}

/**
 * Hover Effect:
 * - الحد يتحول للزمردي (بدلاً من الأزرق)
 * - لماذا؟ لأن المزايا (كوبونات، أخبار، جوائز) هي محتوى MaliMor، ليست Telegram
 */
.feature-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--brand-color); /* زمردي بدلاً من أزرق */
  transform: translateY(-0.1875rem); /* 3px */
}

/**
 * أيقونات المزايا:
 * - لون زمردي (بدلاً من ذهبي)
 * - لماذا؟ محتوى داخلي لـ MaliMor، ليس Telegram
 */
.feat-icon {
  font-size: 1.5rem; /* 24px */
  color: var(--brand-color); /* زمردي بدلاً من ذهبي */
}

.feat-text {
  font-size: 0.6875rem; /* 11px */
  font-weight: 600;
  color: var(--text-gray);
}

/* === قسم الـ QR Code === */
.qr-section {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 1.25rem; /* 20px */
  padding: 1.5625rem; /* 25px */
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  margin-bottom: 1.25rem; /* 20px */
}

.qr-frame {
  width: 9.375rem; /* 150px */
  height: 9.375rem; /* 150px */
  background: #fff;
  padding: 0.625rem; /* 10px */
  border-radius: 1rem; /* 16px */
  margin-bottom: 0.9375rem; /* 15px */
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.scan-text {
  font-size: 0.8125rem; /* 13px */
  color: var(--text-gray);
  margin-bottom: 1.25rem; /* 20px */
}

/* === زر الانضمام (Join Button) === */
/**
 * هذا الزر يستخدم لون Telegram الأزرق (الاستثناء الثاني)
 *
 * لماذا أزرق وليس زمردي؟
 * - لأنه Call-to-Action خارجي يفتح تطبيق Telegram
 * - المستخدم يجب أن يربط بصرياً بين اللون الأزرق وفتح Telegram
 * - هذا يُحسّن Conversion Rate (معدل الضغط)
 *
 * لو كان زمردياً:
 * - قد يظن المستخدم أنه سيبقى داخل MaliMor
 * - يفقد الارتباط الذهني مع Telegram
 */
.join-btn {
  width: 100%;
  height: 3.125rem; /* 50px */
  border: none;
  border-radius: 3.125rem; /* 50px */
  background: linear-gradient(135deg, #2AABEE 0%, #229ED9 100%); /* Telegram Gradient */
  color: #fff;
  font-size: 1rem; /* 16px */
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem; /* 10px */
  font-family: var(--font-arabic);
  text-decoration: none;
  box-shadow: 0 0.3125rem 1.25rem rgba(34, 158, 217, 0.3); /* ظل بسيط */
  transition: all 0.3s;
}

.join-btn:hover {
  transform: translateY(-0.1875rem); /* 3px */
  box-shadow: 0 0.625rem 1.875rem rgba(34, 158, 217, 0.4); /* ظل أكبر قليلاً، ليس glow */
}
/* === أنماط عرض المحفظة === */

/* --- الترويسة الداخلية (ترحيب المستخدم وأزرار الإجراءات) --- */
.wallet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.user-welcome h2 {
  font-size: 1.25rem;
  font-weight: 800;
}

.user-welcome span {
  color: var(--text-gray);
  font-size: 0.875rem;
}

.user-name-highlight {
  color: var(--primary-green);
}

.header-actions {
  display: flex;
  gap: 0.75rem;
}

.icon-btn {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-white);
  cursor: pointer;
  transition: 0.3s;
  position: relative;
}

.icon-btn:hover {
  background: var(--green-glow);
  color: var(--primary-green);
  border-color: rgba(0, 135, 109, 0.3);
}

/* نقطة حمراء للإشعارات */
.notification-dot::after {
  content: '';
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--danger);
  border-radius: 50%;
  border: 2px solid var(--bg-body);
}

/* --- البطاقة الرقمية (بطاقة المحفظة) --- */
.wallet-section {
  margin-bottom: 1.5rem;
}

/* === البطاقة الرقمية (Digital Card) === */
/**
 * بطاقة عرض المحفظة في الصفحة الرئيسية
 * 
 * التصميم المسطح (Flat Design):
 * - خلفية صلبة بدون gradients
 * - بدون تأثيرات Glow أو Pulse
 * - حد رفيع بالأخضر الزمردي
 * - ظل خفيف جداً مسموح (للعمق فقط، ليس Glow)
 */
.digital-card {
  width: 100%;
  height: 220px;
  border-radius: 1.5rem;
  background: var(--bg-card); /* خلفية صلبة (NO gradient) */
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(16, 185, 129, 0.2); /* حد أخضر زمردي */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* ظل خفيف للعمق فقط */
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* NO ::before pseudo element - ممنوع الـ Glow والـ Pulse Animation */

.card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 1;
}

.card-chip {
  width: 50px;
  height: 35px;
  background: linear-gradient(135deg, var(--primary-green) 0%, #006b54 100%);
  border-radius: 0.5rem;
  position: relative;
  overflow: hidden;
}

.card-chip::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.2);
}

.card-logo {
  font-family: var(--font-english);
  font-weight: 800;
  font-size: 1.25rem;
  text-transform: uppercase;
  color: var(--primary-green);
  letter-spacing: 0.05em;
}

.card-balance {
  z-index: 1;
}

.balance-label {
  font-size: 0.75rem;
  color: var(--text-gray);
  margin-bottom: 0.25rem;
}

.balance-amount {
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--text-white);
}

.currency {
  font-size: 0.875rem;
  color: var(--primary-green);
  margin-right: 0.25rem;
}

.card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  z-index: 1;
}

.card-holder {
  display: flex;
  flex-direction: column;
}

.holder-label {
  font-size: 0.625rem;
  color: var(--text-gray);
}

.holder-name {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.card-number {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.125rem;
}

/* --- الخدمات السريعة --- */
.section-title {
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.see-all {
  font-size: 0.75rem;
  color: var(--primary-green);
  cursor: pointer;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.service-item {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 1rem;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: all 0.3s;
}

.service-item:hover {
  transform: translateY(-0.25rem);
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(0, 135, 109, 0.3);
}

.service-icon {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.75rem;
  background: rgba(16, 185, 129, 0.1); /* خلفية خضراء شفافة بدون Glow */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--primary-green);
  transition: all 0.3s;
}

.service-item:hover .service-icon {
  background: var(--primary-green);
  color: var(--text-white);
  /* NO box-shadow glow - ممنوع حسب الدستور */
}

.service-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-gray);
  text-align: center;
}

.service-item:hover .service-name {
  color: var(--text-white);
}

/* --- قائمة العمليات --- */
.transactions-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* === عنصر عملية واحدة (Transaction Item) === */
/**
 * كل صف يمثل عملية واحدة
 * 
 * التصميم المسطح:
 * - خلفية شفافة خفيفة
 * - تأثير Hover بسيط جداً (بدون transform كبير)
 * - بدون حدود قوية أو ظلال
 */
.trans-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem; /* 16px */
  background: rgba(255, 255, 255, 0.02); /* خلفية شفافة جداً */
  border-radius: 1rem; /* 16px */
  border: 1px solid transparent;
  transition: background 0.2s, border-color 0.2s;
  margin-bottom: 0.625rem; /* 10px - مسافة بين العمليات */
}

/* تأثير Hover بسيط */
.trans-item:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.05);
  
  /* NO transform - ممنوع التحريك الكبير */
}

.trans-info {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.trans-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.625rem;
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-gray);
}

.trans-icon.up {
  color: var(--success);
  background: rgba(16, 185, 129, 0.1);
}

.trans-icon.down {
  color: var(--danger);
  background: rgba(239, 68, 68, 0.1);
}

.trans-details h4 {
  font-size: 0.875rem;
  margin-bottom: 0.125rem;
}

.trans-details span {
  font-size: 0.6875rem;
  color: var(--text-gray);
}

.trans-amount {
  font-weight: 700;
  font-size: 0.875rem;
  direction: ltr;
  unicode-bidi: embed;
}

.trans-amount.pos {
  color: var(--success);
}

.trans-amount.neg {
  color: var(--danger);
}

/* --- حاوية المتجر المؤقتة --- */
.store-placeholder {
  color: var(--text-gray);
  text-align: center;
  padding: 3rem 1rem;
  font-size: 1rem;
}

/* ========================================================= */
/* === قسم المحفظة (Wallet Section) === */
/* ========================================================= */

/* --- ترويسة قسم المحفظة --- */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.page-title {
  font-size: 1.375rem;
  font-weight: 800;
}

.header-icon {
  width: 2.5rem;
  height: 2.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.75rem;
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-white);
  cursor: pointer;
  transition: 0.3s;
}

.header-icon:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--primary-green);
}

/* --- بطاقة الرصيد الكبيرة (Balance Card) --- */
/**
 * بطاقة عرض الرصيد الإجمالي للمحفظة
 * 
 * لماذا التصميم المسطح؟
 * - حسب الدستور v3.5: NO GLOW EFFECTS ممنوع استخدام التأثيرات المضيئة
 * - التدرجات اللونية ممنوعة (gradients) لأنها تعطي انطباعاً ثلاثي الأبعاد
 * - الخلفية صلبة بدون ::before blur effect
 * 
 * التصميم:
 * - خلفية مسطحة بلون البطاقات (--bg-card)
 * - حد رفيع جداً بالأخضر الزمردي (ممنوع الذهبي)
 * - بدون box-shadow أو blur effects
 */
.balance-card {
  background: var(--bg-card); /* خلفية صلبة بدون gradients */
  border: 1px solid rgba(16, 185, 129, 0.15); /* حد أخضر زمردي خفيف */
  border-radius: 1.5rem; /* 24px - زوايا دائرية */
  padding: 1.875rem 1.5rem; /* 30px 25px */
  position: relative;
  overflow: hidden;
  margin-bottom: 1.875rem; /* 30px */
  text-align: center;
  
  /* NO box-shadow - ممنوع حسب الدستور (Flat Design) */
  /* NO ::before pseudo element with blur - ممنوع الـ Glow */
}

/* التسمية فوق مبلغ الرصيد (مع أيقونة إظهار/إخفاء) */
.balance-card .balance-label {
  font-size: 0.875rem; /* 14px */
  color: var(--text-gray);
  margin-bottom: 0.625rem; /* 10px */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem; /* 8px - مسافة بين النص والأيقونة */
  position: relative;
  z-index: 1; /* فوق أي عناصر خلفية */
}

/* قيمة الرصيد (الرقم الكبير) */
.balance-value {
  font-size: 2.625rem; /* 42px - حجم كبير للتركيز */
  font-weight: 800;
  color: var(--text-white); /* أبيض نقي بدون gradients */
  margin-bottom: 0.3125rem; /* 5px */
  letter-spacing: 0.05em; /* مسافة بين الأحرف للوضوح */
  position: relative;
  z-index: 1;
  
  /* NO gradient text effect - ممنوع حسب الدستور */
  /* اللون أبيض صلب فقط */
}

/* علامة العملة (TRY / ليرة تركية) */
.currency-tag {
  font-size: 1rem; /* 16px */
  color: var(--brand-color); /* الأخضر الزمردي (NOT GOLD) */
  background: rgba(16, 185, 129, 0.1); /* خلفية خضراء شفافة (NO glow) */
  padding: 0.25rem 0.75rem; /* 4px 12px */
  border-radius: 1.25rem; /* 20px - حبوب دائرية */
  font-weight: 700;
  display: inline-block;
  margin-top: 0.3125rem; /* 5px */
  position: relative;
  z-index: 1;
}

/* أيقونة إظهار/إخفاء الرصيد (Eye Icon) */
.balance-toggle {
  cursor: pointer;
  font-size: 0.75rem; /* 12px */
  opacity: 0.8;
  transition: opacity 0.3s, color 0.3s;
}

.balance-toggle:hover {
  opacity: 1;
  color: var(--brand-color); /* تحول للأخضر عند التمرير */
}

/* === أزرار الإجراءات السريعة (Quick Actions) === */
/**
 * شبكة الإجراءات السريعة (إيداع، تحويل، سحب، المزيد)
 * 
 * نظام الألوان:
 * - الزر الأول (إيداع): الأخضر الزمردي (--brand-color)
 * - الزر الثاني (تحويل): معطل مؤقتاً (disabled)
 * - الزر الثالث (سحب): معطل مؤقتاً (disabled)
 * - الزر الرابع (المزيد): رمادي
 * 
 * لماذا حذفنا الألوان المتعددة؟
 * - الدستور يتطلب استخدام الأخضر الزمردي كلون أساسي
 * - الألوان الأخرى (أزرق، وردي) كانت من السنيبت القديم
 */
.actions-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4 أعمدة متساوية */
  gap: 0.9375rem; /* 15px */
  margin-bottom: 2.1875rem; /* 35px */
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem; /* 10px - مسافة بين الزر والنص */
  cursor: pointer;
}

/* الأزرار المعطلة (تحويل وسحب) */
.action-item.disabled {
  opacity: 0.4; /* شفافية أعلى لتوضيح التعطيل */
  cursor: not-allowed;
  pointer-events: none;
}

/* الزر نفسه (الدائرة) */
.action-btn {
  width: 3.75rem; /* 60px */
  height: 3.75rem; /* 60px */
  border-radius: 1.25rem; /* 20px */
  background: rgba(255, 255, 255, 0.03); /* خلفية شفافة خفيفة */
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem; /* 22px - حجم الأيقونة */
  color: var(--text-white);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ألوان الأزرار (حسب النوع) */
.action-item:not(.disabled):nth-child(1) .action-btn {
  color: var(--brand-color); /* إيداع: أخضر زمردي */
}

.action-item:not(.disabled):nth-child(4) .action-btn {
  color: var(--text-gray); /* المزيد: رمادي */
}

/* تأثير Hover (للأزرار غير المعطلة) */
.action-item:not(.disabled):hover .action-btn {
  transform: translateY(-0.3125rem); /* 5px - رفع الزر قليلاً */
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.2);
  
  /* ظل خفيف مسموح (ليس Glow) */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* النص أسفل الزر */
.action-label {
  font-size: 0.75rem; /* 12px */
  color: var(--text-gray);
  font-weight: 600;
}

/* === سجل العمليات (Transactions Section) === */
/**
 * قائمة عمليات المحفظة (إيداعات، مشتريات، سحوبات)
 * 
 * التصميم المسطح:
 * - خلفيات شفافة خفيفة جداً
 * - بدون ظلال أو حدود قوية
 * - ألوان واضحة للتمييز بين أنواع العمليات:
 *   * أخضر: إيداع (Deposit)
 *   * أحمر: سحب/شراء (Withdraw/Purchase)
 *   * أخضر زمردي: خدمة (Service)
 */

/* عنوان القسم */
#wallet-section .transactions-section h3 {
  font-size: 1.125rem; /* 18px */
  margin-bottom: 1rem;
  color: var(--text-white);
  font-weight: 700;
}

/* فواصل التاريخ (اليوم، أمس، إلخ) */
.date-divider {
  font-size: 0.75rem; /* 12px */
  color: var(--text-gray);
  margin: 1.25rem 0 0.625rem; /* 20px 0 10px */
  font-weight: 600;
  text-transform: capitalize;
}

.date-divider:first-of-type {
  margin-top: 0; /* الفاصل الأول بدون مسافة علوية */
}

/* الجزء الأيسر من كل عملية (أيقونة + تفاصيل) */
.trans-left {
  display: flex;
  align-items: center;
  gap: 0.9375rem; /* 15px */
}

/* صندوق الأيقونة */
.trans-icon-box {
  width: 2.8125rem; /* 45px */
  height: 2.8125rem; /* 45px */
  border-radius: 0.875rem; /* 14px */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem; /* 18px */
  flex-shrink: 0; /* منع التقلص */
}

/* أنواع العمليات بألوان مختلفة (Flat - بدون Glow) */
.type-deposit {
  background: rgba(16, 185, 129, 0.1); /* خلفية خضراء شفافة */
  color: var(--success); /* نص أخضر */
}

.type-withdraw {
  background: rgba(239, 68, 68, 0.1); /* خلفية حمراء شفافة */
  color: var(--danger); /* نص أحمر */
}

.type-service {
  background: rgba(16, 185, 129, 0.1); /* خلفية خضراء زمردية شفافة */
  color: var(--brand-color); /* نص أخضر زمردي (NOT GOLD) */
}

/* تفاصيل العملية (العنوان والوصف) */
.trans-details h4 {
  font-size: 0.875rem; /* 14px */
  margin-bottom: 0.25rem; /* 4px */
  color: var(--text-white);
  font-weight: 600;
}

.trans-details p {
  font-size: 0.6875rem; /* 11px */
  color: var(--text-gray);
}

/* === مبالغ العمليات (Transaction Amounts) === */
/**
 * الألوان حسب نوع المبلغ:
 * - أخضر: إيداع (+)
 * - أحمر: سحب/شراء (-)
 * - أبيض: محايد
 */
.amount-pos,
.trans-amount.pos {
  color: var(--success); /* أخضر للمبالغ الموجبة */
}

.amount-neg,
.trans-amount.neg {
  color: var(--danger); /* أحمر للمبالغ السالبة */
}

/* عرض الأرقام بشكل صحيح (LTR) */
.trans-amount {
  font-weight: 700;
  font-size: 0.9375rem; /* 15px */
  text-align: left;
  direction: ltr;
  unicode-bidi: embed;
}

/* ========================================================= */
/* === صفحة الإيداع (Deposit Page) === */
/* ========================================================= */
/**
 * صفحة إيداع الرصيد - قسم فرعي من المحفظة
 * 
 * المحتوى:
 * - اختيار طريقة الدفع (4 طرق)
 * - إدخال المبلغ + أزرار سريعة
 * - ملخص الفاتورة
 * - زر الدفع الآمن
 * 
 * التصميم:
 * - Flat Design (بدون Glow)
 * - الأخضر الزمردي بدلاً من الذهبي
 */

/* زر الرجوع في الترويسة */
.back-btn {
  width: 2.5rem; /* 40px */
  height: 2.5rem; /* 40px */
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.75rem; /* 12px */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-gray);
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid var(--glass-border);
}

.back-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--brand-color); /* أخضر زمردي عند Hover */
}

/* تسميات الأقسام */
.section-label {
  font-size: 0.875rem; /* 14px */
  font-weight: 700;
  color: var(--text-gray);
  margin-bottom: 0.9375rem; /* 15px */
  display: block;
}

/* === شبكة طرق الدفع (Payment Methods Grid) === */
/**
 * شبكة 2×2 تحتوي على 4 طرق دفع:
 * - Visa/MasterCard
 * - حوالة بنكية
 * - Crypto (USDT)
 * - Papara/Payfix
 */
.methods-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* عمودين */
  gap: 0.9375rem; /* 15px */
  margin-bottom: 1.875rem; /* 30px */
}

/* === بطاقة طريقة دفع واحدة (Payment Method Card) === */
/**
 * كل بطاقة تمثل طريقة دفع
 * 
 * التصميم المسطح:
 * - خلفية شفافة
 * - حد رفيع
 * - عند الاختيار: حد أخضر زمردي (NOT GOLD)
 */
.method-card {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 1rem; /* 16px */
  padding: 0.9375rem; /* 15px */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem; /* 10px */
  cursor: pointer;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  min-height: 7.5rem; /* 120px */
}

.method-card:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-0.1875rem); /* 3px */
}

.method-icon {
  font-size: 1.5rem; /* 24px */
  margin-bottom: 0.3125rem; /* 5px */
  color: var(--text-gray);
}

.method-name {
  font-size: 0.8125rem; /* 13px */
  font-weight: 600;
  text-align: center;
}

.method-fee {
  font-size: 0.625rem; /* 10px */
  color: var(--text-gray);
}

/* === الحالة النشطة (Active State) === */
/**
 * عند اختيار طريقة دفع:
 * - الحد يتحول للأخضر الزمردي (NOT GOLD)
 * - الخلفية تصبح خضراء شفافة (NOT GOLD)
 * - تظهر علامة صح خضراء في الزاوية
 * - بدون Glow shadow
 */
.method-card.active {
  background: rgba(16, 185, 129, 0.1); /* خلفية خضراء شفافة */
  border-color: var(--brand-color); /* حد أخضر زمردي */
  
  /* NO box-shadow glow - ممنوع حسب الدستور */
}

.method-card.active .method-icon {
  color: var(--brand-color); /* أيقونة خضراء */
}

.method-card.active .method-name {
  color: var(--text-white);
}

/* علامة الصح في الزاوية (Check Icon) */
.check-icon {
  position: absolute;
  top: 0.625rem; /* 10px */
  left: 0.625rem; /* 10px */
  font-size: 0.875rem; /* 14px */
  color: var(--brand-color); /* أخضر زمردي */
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s;
}

.method-card.active .check-icon {
  opacity: 1;
  transform: scale(1);
}

/* === حاوية إدخال المبلغ (Amount Container) === */
/**
 * صندوق كبير يحتوي على:
 * - حقل إدخال المبلغ (كبير ومركزي)
 * - أزرار مبالغ جاهزة (+100, +250, +500, +1000)
 */
.amount-container {
  background: rgba(30, 41, 59, 0.5);
  border-radius: 1.25rem; /* 20px */
  padding: 1.5625rem; /* 25px */
  margin-bottom: 1.875rem; /* 30px */
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* غلاف حقل الإدخال */
.input-wrapper {
  position: relative;
  margin-bottom: 1.25rem; /* 20px */
}

/* === حقل إدخال المبلغ (Amount Input) === */
/**
 * حقل كبير لإدخال المبلغ
 * 
 * التصميم:
 * - نص كبير (36px) في المنتصف
 * - خط سفلي يتحول للأخضر عند التركيز (NOT GOLD)
 * - بدون Glow
 */
.amount-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  color: var(--text-white);
  font-size: 2.25rem; /* 36px */
  font-weight: 800;
  padding: 0.625rem 0; /* 10px 0 */
  text-align: center;
  direction: ltr; /* الأرقام من اليسار لليمين */
  transition: border-color 0.3s;
}

.amount-input:focus {
  border-color: var(--brand-color); /* خط أخضر زمردي عند التركيز */
  outline: none;
}

/* رمز العملة (TRY, USD, إلخ) */
.currency-symbol {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.875rem; /* 14px */
  color: var(--text-gray);
  font-weight: 700;
}

/* === أزرار المبالغ الجاهزة (Preset Chips) === */
/**
 * أزرار صغيرة لإضافة مبالغ سريعة (+100, +250, إلخ)
 * 
 * التفاعل:
 * - عند النقر: يتم إضافة المبلغ للحقل
 * - Feedback بصري: الزر يتحول للأخضر لحظياً (NOT GOLD)
 */
.presets-row {
  display: flex;
  gap: 0.625rem; /* 10px */
  justify-content: center;
}

.preset-chip {
  padding: 0.5rem 1rem; /* 8px 16px */
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3.125rem; /* 50px */
  font-size: 0.8125rem; /* 13px */
  font-weight: 600;
  color: var(--text-gray);
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid transparent;
}

.preset-chip:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* عند النقر: تأثير فلاش أخضر */
.preset-chip:active {
  background: var(--brand-color); /* أخضر زمردي بدلاً من الذهبي */
  color: var(--text-white); /* نص أبيض بدلاً من البني */
  transform: scale(0.95);
}

/* === ملخص الفاتورة (Summary Box) === */
.summary-box {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 1rem; /* 16px */
  padding: 1.25rem; /* 20px */
  margin-bottom: 1.875rem; /* 30px */
}

.summary-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.625rem; /* 10px */
  font-size: 0.8125rem; /* 13px */
}

.summary-row:last-child {
  margin-bottom: 0;
  padding-top: 0.625rem; /* 10px */
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.summary-row .label {
  color: var(--text-gray);
}

.summary-row .value {
  font-weight: 700;
  color: var(--text-white);
}

/* المبلغ الإجمالي */
.total-value {
  color: var(--brand-color); /* أخضر زمردي بدلاً من الذهبي */
  font-size: 1rem; /* 16px */
}

/* === زر الدفع الآمن (Pay Button) === */
/**
 * زر كبير أخضر للمتابعة للدفع
 * 
 * التصميم:
 * - خلفية أخضر زمردي صلب (NOT GOLD GRADIENT)
 * - نص أبيض (NOT BROWN)
 * - بدون Glow shadow
 */
.pay-btn {
  width: 100%;
  height: 3.4375rem; /* 55px */
  border: none;
  border-radius: 3.125rem; /* 50px */
  background: var(--brand-color); /* أخضر زمردي صلب */
  color: var(--text-white); /* نص أبيض */
  font-size: 1rem; /* 16px */
  font-weight: 800;
  font-family: var(--font-arabic);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem; /* 10px */
  transition: all 0.3s;
  
  /* NO box-shadow glow - ممنوع حسب الدستور */
}

.pay-btn:hover {
  transform: translateY(-0.1875rem); /* 3px */
  filter: brightness(1.1); /* تفتيح بسيط */
}

.pay-btn:active {
  transform: scale(0.98);
}

/* ========================================================= */
/* === صفحة الفواتير (Invoices Page) === */
/* ========================================================= */
/**
 * صفحة الفواتير والدفعات
 * 
 * المحتوى:
 * - ملخص الشهر (إجمالي المدفوعات)
 * - قائمة الفواتير التفصيلية
 * - أزرار تحميل PDF لكل فاتورة
 * 
 * التصميم:
 * - Flat Design (بدون Glow أو Gradients)
 * - الأخضر الزمردي بدلاً من الذهبي
 * - Mobile-First: محسّن للشاشات الصغيرة (360px-430px)
 * 
 * لماذا في wallet.css؟
 * - الفواتير جزء من التاريخ المالي للمحفظة
 * - تشترك في نفس الهوية البصرية مع المحفظة
 * - توحيد أنماط العمليات المالية في ملف واحد
 */

/* أيقونة الهيدر */
.header-icon-box {
  width: 2.8125rem; /* 45px */
  height: 2.8125rem; /* 45px */
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.875rem; /* 14px */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-color); /* أخضر زمردي بدلاً من الذهبي */
  font-size: 1.25rem; /* 20px */
}

/* === بطاقة ملخص الشهر (Summary Card) === */
/**
 * بطاقة تعرض إجمالي المدفوعات للشهر الحالي
 * 
 * التصميم المسطح:
 * - خلفية صلبة (بدون gradient)
 * - بدون box-shadow glow
 * - زر التحميل بالأخضر الزمردي
 */
.summary-card {
  background: var(--bg-card); /* خلفية صلبة (NO gradient) */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.25rem; /* 20px */
  padding: 1.25rem; /* 20px */
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.875rem; /* 30px */
  gap: 1rem; /* 16px - مسافة بين العناصر للشاشات الصغيرة */
  
  /* NO box-shadow glow - ممنوع حسب الدستور */
}

.summary-info h4 {
  font-size: 0.8125rem; /* 13px */
  color: var(--text-gray);
  margin-bottom: 0.3125rem; /* 5px */
}

.summary-info span {
  font-size: 1.5rem; /* 24px */
  font-weight: 800;
  color: var(--text-white);
  direction: ltr;
  unicode-bidi: embed;
}

/* زر تحميل التقرير الشهري */
.download-all-btn {
  background: rgba(255, 255, 255, 0.05);
  color: var(--brand-color); /* أخضر زمردي */
  padding: 0.625rem 0.9375rem; /* 10px 15px */
  border-radius: 0.75rem; /* 12px */
  font-size: 0.75rem; /* 12px */
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 8px */
  cursor: pointer;
  transition: all 0.3s;
  border: 1px solid rgba(16, 185, 129, 0.2); /* حد أخضر */
  white-space: nowrap; /* منع التفاف النص */
}

.download-all-btn:hover {
  background: rgba(16, 185, 129, 0.1); /* خلفية خضراء عند Hover */
}

/* === قائمة الفواتير (Invoices List) === */
/**
 * قائمة عمودية لجميع الفواتير
 * 
 * الأداء على الموبايل:
 * - استخدام Flexbox بدلاً من Grid (أخف على الأداء)
 * - gap ثابت (15px) يعمل بشكل جيد على جميع الأحجام
 * - transform: translateX() بسيط للـ Hover (لا يؤثر على Layout)
 */
.invoices-list {
  display: flex;
  flex-direction: column;
  gap: 0.9375rem; /* 15px */
}

/* === بطاقة فاتورة واحدة (Invoice Card) === */
/**
 * كل بطاقة تمثل فاتورة واحدة
 * 
 * التخطيط (Mobile-First Flexbox):
 * - display: flex (يتكيف تلقائياً مع الشاشات الصغيرة)
 * - justify-content: space-between (توزيع المساحة)
 * - gap للمسافات (أفضل من margin للـ Responsive)
 * 
 * التصميم:
 * - خلفية شفافة خفيفة
 * - Hover بسيط (translateX)
 * - بدون Glow
 */
.invoice-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 1.125rem; /* 18px */
  padding: 1.125rem; /* 18px */
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s;
  gap: 0.625rem; /* 10px - مهم للشاشات الصغيرة */
}

.invoice-card:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  transform: translateX(-0.1875rem); /* 3px - تحريك بسيط */
}

/* الجزء الأيسر (الأيقونة + التفاصيل) */
.inv-left {
  display: flex;
  align-items: center;
  gap: 0.9375rem; /* 15px */
  flex: 1; /* يأخذ المساحة المتاحة */
  min-width: 0; /* للسماح بالـ text-overflow */
}

/* أيقونة الفاتورة */
.inv-icon {
  width: 2.8125rem; /* 45px */
  height: 2.8125rem; /* 45px */
  border-radius: 0.75rem; /* 12px */
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem; /* 18px */
  color: var(--text-gray);
  flex-shrink: 0; /* منع التقلص */
}

/* تفاصيل الفاتورة */
.inv-details {
  display: flex;
  flex-direction: column;
  gap: 0.125rem; /* 2px */
  min-width: 0; /* للسماح بالـ text-overflow */
}

.inv-title {
  font-size: 0.875rem; /* 14px */
  font-weight: 700;
  color: var(--text-white);
  white-space: nowrap; /* منع التفاف */
  overflow: hidden;
  text-overflow: ellipsis; /* نقاط إذا كان طويلاً */
}

.inv-meta {
  font-size: 0.6875rem; /* 11px */
  color: var(--text-gray);
}

/* رقم الفاتورة (Invoice ID) */
.inv-id {
  font-family: 'Courier New', monospace;
  color: var(--brand-color); /* أخضر زمردي بدلاً من الذهبي */
  letter-spacing: 0.03125rem; /* 0.5px */
  font-size: 0.6875rem; /* 11px */
}

/* الجزء الأيمن (المبلغ + الحالة + PDF) */
.inv-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem; /* 8px */
  flex-shrink: 0; /* منع التقلص */
}

/* المبلغ */
.inv-amount {
  font-size: 1rem; /* 16px */
  font-weight: 800;
  color: var(--text-white);
  direction: ltr;
  unicode-bidi: embed;
}

/* === حالة الفاتورة (Invoice Status) === */
.inv-status {
  font-size: 0.625rem; /* 10px */
  padding: 0.1875rem 0.5rem; /* 3px 8px */
  border-radius: 0.625rem; /* 10px */
  font-weight: 700;
  white-space: nowrap;
}

.st-paid {
  background: rgba(16, 185, 129, 0.15);
  color: var(--brand-color); /* أخضر زمردي */
}

.st-pending {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b; /* برتقالي */
}

/* زر تحميل PDF */
.pdf-btn {
  width: 1.875rem; /* 30px */
  height: 1.875rem; /* 30px */
  border-radius: 0.5rem; /* 8px */
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-gray);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  margin-top: 0.3125rem; /* 5px */
  font-size: 0.875rem; /* 14px */
}

.pdf-btn:hover {
  color: #ef4444; /* أحمر عند Hover (لون PDF) */
  border-color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

/* ========================================================= */
/* === قسم التحويل / إرسال الأموال (Transfer Section) === */
/* ========================================================= */
/**
 * صفحة تحويل الأموال بين المستخدمين
 *
 * الهوية البصرية:
 * - استبدال جميع ألوان الذهبي (#fbbf24) بالزمردي (#10b981)
 * - لماذا الزمردي للنجاح بدلاً من التوهج الذهبي؟
 *   * الزمردي هو لون MaliMor الأساسي
 *   * يرمز للنجاح والثقة (Success & Trust)
 *   * التوهج الذهبي (Glow) ممنوع حسب الدستور (Flat Design)
 *   * الزمردي الصلب أوضح وأكثر احترافية
 *
 * التصميم المسطح (Flat Design):
 * - إزالة radial-gradient من الخلفية
 * - إزالة box-shadow مع glow من slider-btn
 * - استخدام ألوان صلبة بدلاً من gradients
 *
 * Mobile-First (360px-430px):
 * - recent-list قابلة للتمرير الأفقي بسلاسة (overflow-x: auto)
 * - إخفاء scrollbar للحصول على مظهر نظيف
 */

/* حقل المستلم */
.recipient-box {
  position: relative;
  margin-bottom: 1.5625rem; /* 25px */
}

.recipient-input {
  width: 100%;
  height: 3.75rem; /* 60px */
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1rem; /* 16px */
  padding: 0 3.125rem 0 0.9375rem; /* 0 50px 0 15px */
  color: var(--text-white);
  font-size: 1rem; /* 16px */
  font-family: var(--font-arabic);
  transition: all 0.3s;
}

.recipient-input:focus {
  border-color: var(--brand-color); /* زمردي بدلاً من ذهبي */
  background: rgba(30, 41, 59, 0.8);
  outline: none;
}

.input-icon {
  position: absolute;
  right: 0.9375rem; /* 15px */
  top: 50%;
  transform: translateY(-50%);
  color: var(--brand-color); /* زمردي بدلاً من ذهبي */
  font-size: 1.25rem; /* 20px */
  pointer-events: none;
}

.scan-btn {
  position: absolute;
  left: 0.625rem; /* 10px */
  top: 50%;
  transform: translateY(-50%);
  width: 2.5rem; /* 40px */
  height: 2.5rem; /* 40px */
  background: rgba(255, 255, 255, 0.05);
  border-radius: 0.625rem; /* 10px */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-white);
  cursor: pointer;
  border: none;
  transition: all 0.3s;
}

.scan-btn:hover {
  background: rgba(16, 185, 129, 0.1);
  color: var(--brand-color);
}

/* === التحويل السريع (Recent List) === */
/**
 * قائمة أفقية قابلة للتمرير (Horizontally Scrollable)
 *
 * Mobile Optimization:
 * - overflow-x: auto للتمرير الأفقي السلس
 * - scrollbar-width: none (Firefox) و ::-webkit-scrollbar (Chrome/Safari) لإخفاء scrollbar
 * - padding-bottom: 10px لمنع قطع الظلال (shadows) عند التمرير
 * - min-width على العناصر لمنع انكماشها
 *
 * لماذا التمرير الأفقي؟
 * - يوفر مساحة عمودية على الموبايل
 * - تجربة مستخدم طبيعية (swipe للتصفح)
 * - يدعم قائمة أصدقاء طويلة بدون ازدحام
 */
.recent-list {
  display: flex;
  gap: 0.9375rem; /* 15px */
  overflow-x: auto; /* تفعيل التمرير الأفقي */
  padding-bottom: 0.625rem; /* 10px */
  margin-bottom: 1.875rem; /* 30px */
  scrollbar-width: none; /* إخفاء scrollbar في Firefox */
  -webkit-overflow-scrolling: touch; /* تمرير سلس على iOS */
}

/* إخفاء scrollbar في Chrome/Safari/Edge */
.recent-list::-webkit-scrollbar {
  display: none;
}

.recent-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem; /* 8px */
  cursor: pointer;
  min-width: 4.375rem; /* 70px - منع انكماش العنصر */
  flex-shrink: 0; /* منع تقلص العناصر */
  transition: transform 0.3s;
}

.recent-avatar {
  width: 3.75rem; /* 60px */
  height: 3.75rem; /* 60px */
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.1);
  padding: 0.125rem; /* 2px */
  transition: all 0.3s;
  overflow: hidden;
}

.recent-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.recent-item:hover .recent-avatar {
  border-color: var(--brand-color); /* زمردي بدلاً من ذهبي */
  transform: scale(1.05);
}

.recent-name {
  font-size: 0.75rem; /* 12px */
  color: var(--text-gray);
  text-align: center;
}

/* === بطاقة المبلغ (Amount Card) === */
.amount-card {
  background: rgba(30, 41, 59, 0.6); /* خلفية شفافة بسيطة بدلاً من gradient */
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 1.5rem; /* 24px */
  padding: 1.875rem; /* 30px */
  text-align: center;
  margin-bottom: 1.875rem; /* 30px */
}

.balance-hint {
  font-size: 0.75rem; /* 12px */
  color: var(--text-gray);
  margin-bottom: 0.9375rem; /* 15px */
}

.balance-hint span {
  color: var(--text-white);
  font-weight: 700;
}

.amount-wrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.amount-input-lg {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--text-white);
  font-size: 3rem; /* 48px */
  font-weight: 800;
  text-align: center;
  direction: ltr;
  outline: none;
  padding-bottom: 0.625rem; /* 10px */
  border-bottom: 2px solid rgba(255, 255, 255, 0.1);
  transition: border-color 0.3s;
}

.amount-input-lg:focus {
  border-color: var(--brand-color); /* زمردي بدلاً من ذهبي */
}

.currency {
  font-size: 1rem; /* 16px */
  color: var(--brand-color); /* زمردي بدلاً من ذهبي */
  font-weight: 700;
  margin-top: 0.3125rem; /* 5px */
  display: block;
}

/* ========================================================= */
/* === زر السحب للتأكيد (Slide to Confirm) === */
/* ========================================================= */
/**
 * واجهة تفاعلية للتأكيد عبر السحب (Swipe Gesture)
 *
 * أحداث اللمس (Touch Events) على الجوال:
 * ========================================
 * 1. touchstart: عند لمس المستخدم للزر
 *    - نبدأ تتبع حركة الإصبع (isDragging = true)
 *    - نحفظ الموقع الأولي
 *
 * 2. touchmove: أثناء تحريك الإصبع
 *    - نحسب المسافة المقطوعة (clientX - containerLeft)
 *    - نحدّث موقع الزر (slider-btn.style.left)
 *    - نتأكد من عدم تجاوز الحدود (min: 5px, max: containerWidth - 55px)
 *
 * 3. touchend: عند رفع الإصبع
 *    - إذا وصل للنهاية (>= containerWidth - 60px) -> success()
 *    - وإلا، يعود الزر للبداية (left: 5px) بحركة ناعمة (transition)
 *
 * لماذا هذه الطريقة؟
 * - أكثر أماناً من النقر العادي (يمنع التحويل بالخطأ)
 * - تجربة مستخدم طبيعية على الموبايل (swipe gesture)
 * - ردود فعل بصرية واضحة (الزر يتحرك مع الإصبع)
 *
 * التصميم المسطح (Flat):
 * - الزر يستخدم لون زمردي صلب (بدلاً من gold-gradient)
 * - إزالة box-shadow مع glow (فقط ظل بسيط)
 * - حالة النجاح: خلفية زمردية صلبة، بدون توهج
 */
.slider-container {
  position: relative;
  width: 100%;
  height: 3.75rem; /* 60px */
  background: rgba(30, 41, 59, 0.8);
  border-radius: 3.125rem; /* 50px */
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
  margin-top: 1.25rem; /* 20px */
  box-shadow: 0 0.3125rem 0.9375rem rgba(0, 0, 0, 0.2); /* ظل بسيط فقط */
}

.slider-text {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-gray);
  font-size: 0.875rem; /* 14px */
  font-weight: 600;
  letter-spacing: 0.0625rem; /* 1px */
  z-index: 1;
  pointer-events: none; /* للسماح بالسحب فوق النص */
  opacity: 0.7;
  transition: all 0.3s;
}

/**
 * زر السحب (Slider Button)
 * - لون زمردي صلب (بدلاً من gold-gradient)
 * - cursor: grab للإشارة لإمكانية السحب
 * - transition: transform 0.1s (حركة سريعة وسلسة)
 */
.slider-btn {
  position: absolute;
  left: 0.3125rem; /* 5px */
  top: 0.3125rem; /* 5px */
  width: 3.125rem; /* 50px */
  height: 3.125rem; /* 50px */
  background: var(--brand-color); /* زمردي صلب بدلاً من gold-gradient */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  z-index: 2;
  box-shadow: 0 0 0.625rem rgba(16, 185, 129, 0.3); /* ظل زمردي خفيف، ليس glow */
  color: #fff; /* أبيض بدلاً من البني الداكن */
  transition: transform 0.1s; /* حركة سريعة أثناء السحب */
  user-select: none;
}

.slider-btn:active {
  cursor: grabbing;
}

.slider-btn i {
  font-size: 1.25rem; /* 20px */
}

/* === حالة النجاح (Success State) === */
/**
 * عند اكتمال السحب، تتحول الحاوية للون الزمردي
 * - لماذا الزمردي للنجاح؟
 *   * هو لون MaliMor الأساسي
 *   * يرمز للنجاح والتأكيد (Confirmation)
 *   * أوضح من التوهج الذهبي القديم (Flat Design)
 */
.slider-container.success {
  background: var(--brand-color); /* زمردي بدلاً من success-color */
  border-color: var(--brand-color);
}

.slider-container.success .slider-btn {
  display: none; /* إخفاء الزر بعد النجاح */
}

.slider-container.success .slider-text {
  color: #fff;
  opacity: 1;
  font-weight: 800;
}
/* ========================================================= */
/* === أنماط صفحة المتجر (Store/Home Page) === */
/* ========================================================= */
/**
 * صفحة المتجر الرئيسية (Home Section)
 * 
 * المحتوى:
 * - شريط البحث
 * - سلايدر العروض الترويجية
 * - فئات المنتجات (Categories)
 * - شبكة المنتجات (Products Grid)
 * 
 * ملاحظة هامة - حذف نظام السلة (Cart):
 * - حسب الدستور v3.5: الشراء المباشر (Atomic Purchase) فقط
 * - لا يوجد زر Cart أو Badge
 * - النقر على المنتج → يفتح Modal مباشرة → الدفع
 */

/* === شريط البحث (Search Box) === */
.search-box {
  position: relative;
  margin-bottom: 1.5625rem; /* 25px */
}

.search-input {
  width: 100%;
  height: 3.125rem; /* 50px */
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.875rem; /* 14px */
  padding: 0 2.8125rem 0 0.9375rem; /* 0 45px 0 15px */
  color: var(--text-white);
  font-size: 0.875rem; /* 14px */
  font-family: var(--font-arabic);
  transition: border-color 0.3s;
}

.search-input::placeholder {
  color: var(--text-gray);
}

.search-input:focus {
  border-color: var(--brand-color); /* أخضر زمردي عند التركيز */
  outline: none;
}

.search-icon {
  position: absolute;
  right: 0.9375rem; /* 15px */
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-gray);
  font-size: 1.125rem; /* 18px */
  pointer-events: none;
}

/* === سلايدر العروض (Promo Slider) === */
/**
 * سلايدر أفقي للعروض الترويجية
 * 
 * التصميم المحدث:
 * - استبدال gradients الذهبية بألوان MaliMor
 * - الأخضر الزمردي للعروض المميزة
 * - بدون Glow effects
 */
.promo-slider {
  display: flex;
  gap: 0.9375rem; /* 15px */
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 0.625rem; /* 10px */
  margin-bottom: 1.5625rem; /* 25px */
  scrollbar-width: none;
}

.promo-slider::-webkit-scrollbar {
  display: none;
}

/* بطاقة عرض واحدة */
.promo-card {
  min-width: 17.5rem; /* 280px */
  height: 9.375rem; /* 150px */
  border-radius: 1.25rem; /* 20px */
  scroll-snap-align: center;
  position: relative;
  overflow: hidden;
  padding: 1.25rem; /* 20px */
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-shrink: 0;
}

/* خلفيات العروض (محدثة لهوية MaliMor) */
.promo-1 {
  background: linear-gradient(135deg, #1e293b, var(--brand-color)); /* Navy إلى أخضر */
}

.promo-2 {
  background: linear-gradient(135deg, #1e293b, #3b82f6); /* Navy إلى أزرق */
}

.promo-content {
  position: relative;
  z-index: 2;
}

.promo-tag {
  background: rgba(255, 255, 255, 0.2);
  padding: 0.25rem 0.625rem; /* 4px 10px */
  border-radius: 1.25rem; /* 20px */
  font-size: 0.625rem; /* 10px */
  color: var(--text-white);
  display: inline-block;
  margin-bottom: 0.5rem; /* 8px */
  font-weight: 700;
}

.promo-title {
  font-size: 1.125rem; /* 18px */
  font-weight: 800;
  color: var(--text-white);
  margin-bottom: 0.3125rem; /* 5px */
  width: 70%;
  line-height: 1.3;
}

.promo-img {
  position: absolute;
  bottom: -0.625rem; /* -10px */
  left: -0.625rem; /* -10px */
  font-size: 6.25rem; /* 100px */
  color: rgba(255, 255, 255, 0.1);
  transform: rotate(-15deg);
}

/* === صف الفئات (Categories Row) === */
/**
 * صف أفقي يحتوي على فئات المنتجات
 * 
 * التحديث الهام:
 * - الفئة النشطة: أخضر زمردي (NOT GOLD)
 * - بدون box-shadow glow
 */
.categories-row {
  display: flex;
  justify-content: space-between;
  gap: 0.625rem; /* 10px */
  margin-bottom: 1.875rem; /* 30px */
  overflow-x: auto;
  padding-bottom: 0.3125rem; /* 5px */
  scrollbar-width: none;
}

.categories-row::-webkit-scrollbar {
  display: none;
}

/* عنصر فئة واحد */
.cat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem; /* 8px */
  min-width: 4.375rem; /* 70px */
  cursor: pointer;
}

/* صندوق أيقونة الفئة */
.cat-icon-box {
  width: 3.75rem; /* 60px */
  height: 3.75rem; /* 60px */
  background: rgba(255, 255, 255, 0.05);
  border-radius: 1.125rem; /* 18px */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem; /* 24px */
  color: var(--text-gray);
  transition: all 0.3s;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* === الفئة النشطة (Active Category) === */
/**
 * عند اختيار فئة:
 * - الخلفية: أخضر زمردي صلب (NOT GOLD GRADIENT)
 * - النص: أبيض
 * - بدون Glow shadow
 */
.cat-item.active .cat-icon-box {
  background: var(--brand-color); /* أخضر زمردي صلب */
  color: var(--text-white);
  
  /* NO box-shadow glow - ممنوع حسب الدستور */
}

.cat-name {
  font-size: 0.75rem; /* 12px */
  font-weight: 600;
  color: var(--text-gray);
}

.cat-item.active .cat-name {
  color: var(--text-white);
}

/* === رأس القسم (Section Header) === */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 0.9375rem; /* 15px */
}

.sec-title {
  font-size: 1rem; /* 16px */
  font-weight: 800;
}

.view-all {
  font-size: 0.75rem; /* 12px */
  color: var(--brand-color); /* أخضر زمردي */
  cursor: pointer;
  font-weight: 600;
  transition: color 0.3s;
}

.view-all:hover {
  color: var(--brand-hover); /* أخضر داكن */
}

/* === شبكة المنتجات (Products Grid) === */
/**
 * شبكة 2×N للمنتجات
 * 
 * ملاحظة: بدون Cart System
 * - لا يوجد "أضف للسلة"
 * - الزر يفتح Purchase Modal مباشرة (Atomic Purchase)
 */
.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* عمودين متساويين */
  gap: 0.9375rem; /* 15px */
  margin-bottom: 1.25rem; /* 20px */
}

/* === بطاقة منتج واحدة (Product Card) === */
.product-card {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 1.125rem; /* 18px */
  padding: 0.9375rem; /* 15px */
  position: relative;
  transition: all 0.3s;
  display: flex;
  flex-direction: column;
}

.product-card:hover {
  transform: translateY(-0.3125rem); /* 5px */
  border-color: rgba(255, 255, 255, 0.1);
}

/* صندوق صورة المنتج */
.prod-img-box {
  height: 6.25rem; /* 100px */
  background: rgba(0, 0, 0, 0.2);
  border-radius: 0.75rem; /* 12px */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.75rem; /* 12px */
  font-size: 2.5rem; /* 40px */
  color: var(--text-gray);
  position: relative;
}

/* شارة خاصة (Special Badge) */
.special-badge {
  position: absolute;
  top: 0.5rem; /* 8px */
  right: 0.5rem; /* 8px */
  background: var(--danger);
  color: var(--text-white);
  font-size: 0.5625rem; /* 9px */
  font-weight: 700;
  padding: 0.1875rem 0.5rem; /* 3px 8px */
  border-radius: 0.25rem; /* 4px */
}

/* عنوان المنتج */
.prod-title {
  font-size: 0.8125rem; /* 13px */
  font-weight: 700;
  color: var(--text-white);
  margin-bottom: 0.3125rem; /* 5px */
  line-height: 1.4;
}

/* وصف المنتج */
.prod-desc {
  font-size: 0.625rem; /* 10px */
  color: var(--text-gray);
  margin-bottom: 0.625rem; /* 10px */
  flex: 1; /* يأخذ المساحة المتبقية */
}

/* تذييل البطاقة (السعر + الزر) */
.prod-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* سعر المنتج */
.prod-price {
  font-size: 0.875rem; /* 14px */
  font-weight: 800;
  color: var(--brand-color); /* أخضر زمردي بدلاً من الذهبي */
}

/* === زر الشراء (Buy Button) === */
/**
 * زر "+" للشراء المباشر
 * 
 * ملاحظة هامة (حسب الدستور):
 * - لا يوجد "أضف للسلة" (NO CART SYSTEM)
 * - هذا الزر يفتح Purchase Modal مباشرة
 * - الشراء الذري (Atomic Purchase): منتج واحد → دفع → تسليم
 * 
 * التصميم:
 * - Hover: أخضر زمردي (NOT GOLD)
 */
.buy-btn {
  width: 1.875rem; /* 30px */
  height: 1.875rem; /* 30px */
  background: rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem; /* 8px */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-white);
  cursor: pointer;
  transition: all 0.3s;
  border: none;
  font-size: 0.875rem; /* 14px */
}

.buy-btn:hover {
  background: var(--brand-color); /* أخضر زمردي */
  color: var(--text-white); /* نص أبيض (NOT BROWN) */
}

/* ========================================================= */
/* === أنماط صفحة الطلبات (Orders Page) === */
/* ========================================================= */
/**
 * هذا القسم يحتوي على أنماط صفحة الطلبات:
 * - تبويبات الفلترة (Filter Tabs)
 * - بطاقات الطلبات (Order Cards)
 * - حالات الطلبات (Order Status)
 * - أكواد الطلبات (Order Codes)
 * 
 * التصميم:
 * - Flat Design (بدون Glow أو Gradients)
 * - استخدام الأخضر الزمردي بدلاً من الذهبي
 * - حدود رفيعة ونظيفة
 */

/* === تبويبات الفلترة (Filter Tabs) === */
/**
 * تبويبات لتصفية الطلبات حسب الحالة:
 * - الكل
 * - مكتملة
 * - قيد الانتظار
 * - ملغاة
 * 
 * المنطق:
 * - التبويب النشط يأخذ اللون الأخضر الزمردي (NOT GOLD)
 * - باقي التبويبات رمادية
 */
.filter-tabs {
  display: flex;
  gap: 0.625rem; /* 10px */
  margin-bottom: 1.5625rem; /* 25px */
  overflow-x: auto; /* التمرير الأفقي للشاشات الصغيرة */
  padding-bottom: 0.3125rem; /* 5px */
  
  /* إخفاء شريط التمرير (للمظهر النظيف) */
  scrollbar-width: none; 
  -ms-overflow-style: none;
}

.filter-tabs::-webkit-scrollbar {
  display: none; /* إخفاء في Chrome/Safari */
}

/* عنصر التبويب الواحد */
.tab-item {
  padding: 0.5rem 1.25rem; /* 8px 20px */
  border-radius: 3.125rem; /* 50px - حبوب دائرية */
  background: rgba(255, 255, 255, 0.05); /* خلفية شفافة خفيفة */
  color: var(--text-gray);
  font-size: 0.8125rem; /* 13px */
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap; /* منع التفاف النص */
  transition: all 0.3s;
  border: 1px solid transparent;
}

/* === التبويب النشط (Active Tab) === */
/**
 * التبويب المختار حالياً
 * 
 * الألوان:
 * - الخلفية: أخضر زمردي صلب (NOT GOLD GRADIENT)
 * - النص: أبيض
 * - بدون Glow أو Box Shadow (Flat Design)
 */
.tab-item.active {
  background: var(--brand-color); /* أخضر زمردي صلب */
  color: var(--text-white); /* نص أبيض */
  font-weight: 700;
  
  /* NO box-shadow glow - ممنوع حسب الدستور */
}

/* Hover على التبويبات غير النشطة */
.tab-item:not(.active):hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-white);
}

/* === قائمة الطلبات (Orders List) === */
.orders-list {
  display: flex;
  flex-direction: column;
  gap: 0.9375rem; /* 15px - مسافة بين البطاقات */
}

/* === بطاقة طلب واحدة (Order Card) === */
/**
 * كل بطاقة تمثل طلب واحد
 * 
 * التصميم المسطح:
 * - خلفية شفافة بدون gradients
 * - حد رفيع جداً
 * - بدون backdrop-filter blur (ممنوع)
 * - Hover بسيط جداً
 */
.order-card {
  background: rgba(30, 41, 59, 0.4); /* خلفية شفافة خفيفة */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.25rem; /* 20px */
  padding: 1.25rem; /* 20px */
  position: relative;
  transition: all 0.3s;
  
  /* NO backdrop-filter blur - ممنوع حسب الدستور */
}

/* تأثير Hover بسيط */
.order-card:hover {
  background: rgba(30, 41, 59, 0.6);
  border-color: rgba(16, 185, 129, 0.2); /* حد أخضر خفيف عند Hover */
  
  /* NO transform translateY - نبقيه ثابت (Flat) */
}

/* === رأس البطاقة (Order Header) === */
.order-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.9375rem; /* 15px */
  padding-bottom: 0.9375rem; /* 15px */
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* معلومات الطلب (الأيقونة + التفاصيل) */
.order-info {
  display: flex;
  align-items: center;
  gap: 0.75rem; /* 12px */
}

/* أيقونة نوع الطلب */
.order-icon {
  width: 2.8125rem; /* 45px */
  height: 2.8125rem; /* 45px */
  border-radius: 0.75rem; /* 12px */
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem; /* 20px */
  color: var(--text-white);
  flex-shrink: 0;
}

/* تفاصيل الطلب (الاسم ورقم الطلب) */
.order-details h4 {
  font-size: 0.9375rem; /* 15px */
  margin-bottom: 0.25rem; /* 4px */
  color: var(--text-white);
  font-weight: 600;
}

.order-details span {
  font-size: 0.6875rem; /* 11px */
  color: var(--text-gray);
}

/* === حالات الطلب (Order Status) === */
/**
 * شارة صغيرة تعرض حالة الطلب
 * 
 * الألوان حسب الحالة:
 * - مكتمل: أخضر (#10b981)
 * - قيد المعالجة: برتقالي (#f59e0b)
 * - ملغى: أحمر (#ef4444)
 * 
 * التصميم:
 * - خلفية شفافة (10% opacity)
 * - نص ملون
 * - بدون Glow
 */
.order-status {
  font-size: 0.625rem; /* 10px */
  padding: 0.25rem 0.625rem; /* 4px 10px */
  border-radius: 1.25rem; /* 20px */
  font-weight: 700;
  white-space: nowrap;
}

/* حالة مكتمل - أخضر زمردي */
.status-completed {
  background: rgba(16, 185, 129, 0.15);
  color: var(--brand-color); /* أخضر زمردي */
}

/* حالة قيد المعالجة - برتقالي */
.status-pending {
  background: rgba(245, 158, 11, 0.15);
  color: #f59e0b;
}

/* حالة ملغى - أحمر */
.status-canceled {
  background: rgba(239, 68, 68, 0.15);
  color: var(--danger);
}

/* === جسم البطاقة (Order Body) === */
.order-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

/* علامة السعر */
.price-tag {
  font-size: 1rem; /* 16px */
  font-weight: 800;
  color: var(--text-white);
  direction: ltr;
  unicode-bidi: embed;
}

.price-tag span {
  font-size: 0.625rem; /* 10px */
  color: var(--brand-color); /* أخضر زمردي بدلاً من الذهبي */
  margin-right: 0.125rem; /* 2px */
}

/* === حاوية الكود (للطلبات المكتملة) === */
/**
 * صندوق يحتوي على الكود السري + زر النسخ
 * 
 * التصميم:
 * - خلفية سوداء شفافة
 * - حد متقطع (dashed)
 * - الكود بلون أخضر زمردي (NOT GOLD)
 */
.code-container {
  display: flex;
  align-items: center;
  gap: 0.625rem; /* 10px */
  background: rgba(0, 0, 0, 0.3);
  padding: 0.5rem 0.75rem; /* 8px 12px */
  border-radius: 0.625rem; /* 10px */
  border: 1px dashed rgba(255, 255, 255, 0.1);
}

/* الكود السري */
.secret-code {
  font-family: 'Courier New', monospace;
  font-size: 0.875rem; /* 14px */
  color: var(--brand-color); /* أخضر زمردي بدلاً من الذهبي */
  letter-spacing: 0.0625rem; /* 1px */
  font-weight: 600;
}

/* زر النسخ */
.copy-btn {
  font-size: 0.75rem; /* 12px */
  color: var(--text-gray);
  cursor: pointer;
  transition: all 0.3s;
  padding: 0.25rem;
}

.copy-btn:hover {
  color: var(--text-white);
  transform: scale(1.1);
}

/* حالة النجاح بعد النسخ */
.copy-btn.copied {
  color: var(--brand-color); /* أخضر زمردي */
}

/* === رسائل الحالة (Status Messages) === */
/* رسالة "جارٍ تجهيز الكود..." */
.processing-message {
  font-size: 0.75rem; /* 12px */
  color: var(--text-gray);
  font-style: italic;
}

/* رسالة "تم الشحن المباشر" */
.success-message {
  font-size: 0.75rem; /* 12px */
  color: var(--brand-color); /* أخضر زمردي */
  font-weight: 600;
}

.success-message i {
  margin-left: 0.25rem;
}

/* رسالة "تم استرجاع الرصيد" */
.refund-message {
  font-size: 0.6875rem; /* 11px */
  color: var(--danger);
}

/* ========================================================= */
/* === أنماط صفحة الحساب الشخصي (Profile Page) === */
/* ========================================================= */
/**
 * أنماط صفحة الملف الشخصي للمستخدم:
 * - بطاقة الملف الشخصي (صورة + اسم + معرّف)
 * - شارة العضوية (Membership Badge)
 * - إحصائيات سريعة (Stats Grid)
 * - قائمة الإعدادات (Settings List)
 * - زر تسجيل الخروج
 * 
 * التصميم:
 * - Flat Design (بدون Glow أو Gradients)
 * - استخدام الأخضر الزمردي بدلاً من الذهبي
 */

/* === بطاقة الملف الشخصي (Profile Card) === */
/**
 * بطاقة كبيرة تعرض معلومات المستخدم الأساسية
 * 
 * التصميم المسطح:
 * - خلفية صلبة (بدون gradient)
 * - بدون box-shadow glow
 * - حدود رفيعة ونظيفة
 */
.profile-card {
  background: var(--bg-card); /* خلفية صلبة (NO gradient) */
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1.5rem; /* 24px */
  padding: 1.875rem 1.25rem; /* 30px 20px */
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-bottom: 1.5625rem; /* 25px */
  
  /* NO box-shadow glow - ممنوع حسب الدستور */
}

/* === صورة المستخدم (Avatar) === */
.avatar-container {
  position: relative;
  margin-bottom: 0.9375rem; /* 15px */
}

.avatar-img {
  width: 6.25rem; /* 100px */
  height: 6.25rem; /* 100px */
  border-radius: 50%;
  border: 3px solid var(--brand-color); /* حد أخضر زمردي بدلاً من الذهبي */
  padding: 0.1875rem; /* 3px */
  object-fit: cover;
  background-color: #334155;
  
  /* NO box-shadow glow - ممنوع حسب الدستور */
}

/* === شارة التوثيق (Verified Badge) === */
/**
 * أيقونة صغيرة تظهر أن المستخدم موثق
 * 
 * الألوان:
 * - الخلفية: أخضر زمردي صلب (NOT GOLD GRADIENT)
 * - الأيقونة: أبيض
 */
.verified-badge {
  position: absolute;
  bottom: 0.3125rem; /* 5px */
  right: 0.3125rem; /* 5px */
  width: 1.5rem; /* 24px */
  height: 1.5rem; /* 24px */
  background: var(--brand-color); /* أخضر زمردي صلب (NOT gradient) */
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg-body);
  color: var(--text-white); /* نص أبيض بدلاً من البني */
  font-size: 0.75rem; /* 12px */
}

/* معلومات المستخدم */
.user-name {
  font-size: 1.25rem; /* 20px */
  font-weight: 800;
  margin-bottom: 0.3125rem; /* 5px */
}

.user-id {
  font-size: 0.75rem; /* 12px */
  color: var(--text-gray);
  background: rgba(255, 255, 255, 0.05);
  padding: 0.25rem 0.75rem; /* 4px 12px */
  border-radius: 1.25rem; /* 20px */
  letter-spacing: 0.0625rem; /* 1px */
}

/* === صندوق المعلومات تحت الـ ID (جميع البيانات: مسجّلة أو غير مسجّلة) === */
.profile-info-box {
  width: 100%;
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.profile-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.875rem;
}
.profile-info-row:last-child {
  border-bottom: none;
}
.profile-info-label {
  color: var(--text-gray);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.profile-info-label i {
  width: 1.25rem;
  color: var(--brand-color);
  font-size: 0.8125rem;
}
.profile-info-value {
  color: var(--text-white);
  font-weight: 600;
  direction: ltr;
  text-align: left;
}

/* === شارة العضوية (Membership Badge) === */
/**
 * شارة تعرض نوع عضوية المستخدم
 * 
 * الألوان:
 * - الخلفية: أخضر زمردي شفاف (NOT GOLD)
 * - النص: أخضر زمردي (NOT GOLD)
 * - الحد: أخضر زمردي شفاف
 */
.membership-badge {
  margin-top: 0.9375rem; /* 15px */
  background: rgba(16, 185, 129, 0.1); /* أخضر زمردي شفاف */
  color: var(--brand-color); /* نص أخضر زمردي */
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 0.375rem 1rem; /* 6px 16px */
  border-radius: 0.75rem; /* 12px */
  font-size: 0.75rem; /* 12px */
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 8px */
}

.membership-badge i {
  color: var(--brand-color); /* أيقونة التاج بلون أخضر زمردي */
}

/* === شبكة الإحصائيات (Stats Grid) === */
/**
 * شبكة 2×1 تعرض إحصائيات سريعة:
 * - تاريخ الانضمام
 * - إجمالي الطلبات
 */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* عمودين متساويين */
  gap: 0.9375rem; /* 15px */
  margin-bottom: 1.875rem; /* 30px */
}

/* صندوق إحصائية واحدة */
.stat-box {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 1rem; /* 16px */
  padding: 0.9375rem; /* 15px */
  display: flex;
  align-items: center;
  gap: 0.75rem; /* 12px */
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* أيقونة الإحصائية */
.stat-icon {
  width: 2.5rem; /* 40px */
  height: 2.5rem; /* 40px */
  border-radius: 0.625rem; /* 10px */
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-gray);
  font-size: 1.125rem; /* 18px */
  flex-shrink: 0;
}

/* معلومات الإحصائية */
.stat-info {
  display: flex;
  flex-direction: column;
}

.stat-value {
  font-size: 1rem; /* 16px */
  font-weight: 700;
  color: var(--text-white);
}

.stat-label {
  font-size: 0.6875rem; /* 11px */
  color: var(--text-gray);
}

/* === قائمة الإعدادات (Settings List) === */
.settings-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem; /* 10px */
}

/* === عنصر إعدادات واحد (Settings Item) === */
/**
 * كل صف في قائمة الإعدادات
 * 
 * التصميم المسطح:
 * - خلفية شفافة
 * - Hover بسيط جداً (بدون transform كبير)
 */
.settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem; /* 16px */
  background: rgba(30, 41, 59, 0.5);
  border-radius: 1rem; /* 16px */
  border: 1px solid transparent;
  transition: all 0.3s;
  cursor: pointer;
}

.settings-item:hover {
  background: rgba(30, 41, 59, 0.8);
  border-color: rgba(255, 255, 255, 0.05);
  transform: translateX(-0.1875rem); /* 3px - تحريك بسيط */
}

/* الجزء الأيسر (أيقونة + نص) */
.item-left {
  display: flex;
  align-items: center;
  gap: 0.9375rem; /* 15px */
}

/* أيقونة العنصر */
.item-icon {
  width: 2.375rem; /* 38px */
  height: 2.375rem; /* 38px */
  border-radius: 0.625rem; /* 10px */
  background: rgba(255, 255, 255, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-gray);
  font-size: 1rem; /* 16px */
  flex-shrink: 0;
}

/* نص العنصر */
.item-text {
  font-size: 0.875rem; /* 14px */
  font-weight: 600;
  color: var(--text-white);
}

/* سهم الانتقال */
.item-arrow {
  color: rgba(255, 255, 255, 0.2);
  font-size: 0.75rem; /* 12px */
}

/* === زر تسجيل الخروج (Logout Button) === */
/**
 * زر أحمر كبير لتسجيل الخروج
 * 
 * التصميم:
 * - خلفية حمراء شفافة
 * - نص أحمر
 * - حد أحمر شفاف
 * - بدون Glow
 */
.logout-btn {
  margin-top: 1.25rem; /* 20px */
  width: 100%;
  padding: 0.9375rem; /* 15px */
  border-radius: 1rem; /* 16px */
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
  border: 1px solid rgba(239, 68, 68, 0.2);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem; /* 10px */
  cursor: pointer;
  transition: all 0.3s;
  font-family: var(--font-arabic);
  font-size: 0.9375rem; /* 15px */
}

.logout-btn:hover {
  background: rgba(239, 68, 68, 0.2);
  transform: translateY(-0.125rem); /* 2px - رفع بسيط */
}

/* ========================================================= */
/* === صفحة المزيد - الإجراءات السريعة (More Page - Quick Actions) === */
/* ========================================================= */
/**
 * صفحة المزيد تحتوي على شبكة إجراءات سريعة (Quick Actions Grid)
 * 
 * الإجراءات المتاحة:
 * - تحويل (Transfer)
 * - إيداع (Deposit)
 * - سحب (Withdraw)
 * - شراء (Purchase)
 * - فواتير (Bills)
 * - مسح QR (QR Scan)
 * 
 * التصميم:
 * - Flat Design (بدون Glow)
 * - أزرار دائرية كبيرة مع أيقونات
 * - ألوان متعددة للتمييز بين الإجراءات
 */

/* عنوان القسم */
.sheet-title {
  text-align: center;
  font-size: 1.25rem; /* 20px */
  font-weight: 800;
  margin-bottom: 1.5625rem; /* 25px */
  color: var(--text-white);
}

/* === شبكة الإجراءات السريعة (Quick Actions Grid) === */
/**
 * شبكة 3×2 تحتوي على 6 أزرار للإجراءات السريعة
 */
.quick-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 أعمدة */
  gap: 1.25rem; /* 20px */
  margin-bottom: 1.25rem; /* 20px */
}

/* عنصر إجراء واحد (أيقونة + نص) */
.qa-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem; /* 10px */
  cursor: pointer;
  transition: all 0.3s;
}

/* === الزر الدائري (Quick Action Button) === */
/**
 * زر دائري كبير يحتوي على أيقونة
 * 
 * التصميم المسطح:
 * - خلفية شفافة خفيفة
 * - حد رفيع
 * - بدون box-shadow glow (مسموح فقط ظل خفيف للعمق)
 */
.qa-btn {
  width: 4.375rem; /* 70px */
  height: 4.375rem; /* 70px */
  border-radius: 1.5rem; /* 24px */
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* ظل خفيف للعمق فقط */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem; /* 24px */
  color: var(--text-white);
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
}

/* تأثير خفيف عند Hover */
.qa-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 100%);
  opacity: 0;
  transition: 0.3s;
}

/* === حالة Hover للزر === */
/**
 * عند التمرير على الزر:
 * - رفع بسيط (translateY)
 * - تغيير اللون للأخضر الزمردي (NOT GOLD)
 * - بدون Glow shadow
 */
.qa-item:hover .qa-btn {
  transform: translateY(-0.3125rem); /* 5px */
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--brand-color); /* حد أخضر زمردي */
  color: var(--brand-color); /* أيقونة خضراء */
  
  /* NO glow shadow - ممنوع حسب الدستور */
}

.qa-item:hover .qa-btn::after {
  opacity: 1;
}

/* نص الإجراء */
.qa-label {
  font-size: 0.8125rem; /* 13px */
  font-weight: 600;
  color: var(--text-gray);
  transition: color 0.3s;
}

.qa-item:hover .qa-label {
  color: var(--text-white);
}

/* === بطاقة العرض الترويجي (Promo Card) === */
/**
 * بطاقة صغيرة أسفل الإجراءات لعرض العروض الخاصة
 * 
 * التصميم المسطح:
 * - خلفية صلبة (NO gradient)
 * - حد أخضر زمردي بدلاً من ذهبي
 * - بدون box-shadow glow
 */
.promo-card {
  background: var(--bg-card); /* خلفية صلبة */
  border: 1px solid rgba(16, 185, 129, 0.2); /* حد أخضر زمردي */
  border-radius: 1.25rem; /* 20px */
  padding: 0.9375rem; /* 15px */
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.625rem; /* 10px */
  cursor: pointer;
  transition: all 0.3s;
  
  /* NO box-shadow glow - ممنوع حسب الدستور */
}

.promo-card:hover {
  background: rgba(30, 41, 59, 0.8);
  border-color: var(--brand-color);
}

.promo-text h4 {
  font-size: 0.875rem; /* 14px */
  margin-bottom: 0.125rem; /* 2px */
  color: var(--brand-color); /* عنوان أخضر زمردي */
  font-weight: 700;
}

.promo-text p {
  font-size: 0.6875rem; /* 11px */
  color: var(--text-gray);
}

.promo-icon {
  font-size: 1.25rem; /* 20px */
  color: var(--text-white);
}

/* ========================================================= */
/* === إيصال الشراء (Purchase Receipt Modal) === */
/* ========================================================= */
/**
 * إيصال الشراء يظهر كـ Modal منبثق في منتصف الشاشة
 * 
 * البنية:
 * - receipt-modal: الحاوية الخارجية (backdrop + centering)
 * - receipt: الإيصال نفسه (بطاقة بيضاء)
 * 
 * التصميم:
 * - خلفية بيضاء للإيصال (للطباعة)
 * - نص داكن (Navy Slate) للقراءة الواضحة
 * - الأخضر الزمردي للعناصر المهمة (الشعار، الكود، السعر)
 * - Flat Design بدون Glow
 */

/* === حاوية الـ Modal (Receipt Modal Container) === */
/**
 * الحاوية الخارجية التي تحتوي على الإيصال
 * 
 * التموضع:
 * - position: fixed لتغطية الشاشة بالكامل
 * - display: flex لتوسيط الإيصال
 * - justify-content: center & align-items: center للتوسيط التام
 * 
 * الخلفية المظلمة (Backdrop):
 * - background: rgba(0, 0, 0, 0.85) خلفية سوداء شفافة (85%)
 * - تعتيم المحتوى الخلفي
 * - z-index: 500 (فوق كل شيء)
 * 
 * الحالة الافتراضية:
 * - display: none (مخفي)
 * - عند الفتح، يتم تغييره إلى display: flex
 */
.receipt-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85); /* backdrop مظلم */
  z-index: 500; /* فوق الـ Sidebar و Bottom Nav */
  
  /* توسيط الإيصال باستخدام Flexbox */
  display: none; /* مخفي افتراضياً */
  justify-content: center;
  align-items: center;
  padding: 1.25rem; /* 20px - مسافة من الحواف */
  
  /* Animation عند الفتح */
  animation: fadeIn 0.3s ease-out;
}

/* حالة الفتح */
.receipt-modal.active {
  display: flex; /* إظهار الـ Modal */
}

/* === الإيصال نفسه (Receipt Card) === */
/**
 * بطاقة بيضاء تحتوي على تفاصيل الشراء
 * 
 * التصميم:
 * - خلفية بيضاء (#ffffff) للطباعة
 * - نص داكن (Navy Slate) للقراءة
 * - زوايا دائرية (16px)
 * - بدون shadows كبيرة (Flat Design)
 */
.receipt {
  width: 100%;
  max-width: 21.25rem; /* 340px */
  background: #ffffff; /* خلفية بيضاء */
  border-radius: 1rem; /* 16px */
  overflow: hidden;
  position: relative;
  
  /* ظل خفيف جداً للعمق فقط */
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  
  /* Animation عند الظهور */
  animation: slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes slideUp {
  from {
    transform: translateY(3.125rem); /* 50px */
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* === رأس الإيصال (Receipt Header) === */
.rec-head {
  padding: 1.25rem; /* 20px */
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 2px dashed #e2e8f0; /* خط متقطع */
}

/* الشعار والنوع */
.receipt-logo-section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem; /* 4px */
}

/* === شعار MaliMor في الإيصال === */
/**
 * الشعار في الإيصال (Mali أبيض + Mor أخضر)
 * 
 * ملاحظة: الخلفية بيضاء، لذلك:
 * - Mali يكون بلون داكن (Navy Slate)
 * - Mor يبقى أخضر زمردي
 */
.receipt-logo {
  font-family: var(--font-english);
  font-weight: 900;
  font-size: 1.25rem; /* 20px */
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 0.375rem; /* 6px */
}

.receipt-logo i {
  color: var(--brand-color); /* أيقونة الحقيبة بلون أخضر */
}

.receipt-logo-mali {
  color: #0f172a; /* Navy Slate للخلفية البيضاء */
}

.receipt-logo-mor {
  color: var(--brand-color); /* أخضر زمردي */
}

/* نوع الإيصال */
.receipt-type {
  font-size: 0.6875rem; /* 11px */
  color: #64748b;
  font-weight: 700;
  text-transform: uppercase;
}

/* رمز QR */
.receipt-qr {
  width: 3.4375rem; /* 55px */
  height: 3.4375rem; /* 55px */
  border: 1px solid #e2e8f0;
  padding: 0.125rem; /* 2px */
  border-radius: 0.25rem; /* 4px */
  background: #fff;
}

/* === جسم الإيصال (Receipt Body) === */
.rec-body {
  padding: 1.25rem; /* 20px */
}

/* صف معلومات واحد */
.receipt-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem; /* 8px */
  font-size: 0.75rem; /* 12px */
}

.receipt-label {
  color: #64748b;
}

.receipt-value {
  color: #1e293b; /* Navy Slate */
  font-weight: 700;
}

/* قيم بخط monospace (الأرقام والأكواد) */
.receipt-value.monospace {
  font-family: 'Share Tech Mono', monospace;
}

/* فاصل متقطع */
.receipt-divider {
  margin: 0.625rem 0; /* 10px 0 */
  border-top: 1px dashed #e2e8f0;
}

/* === صندوق الكود/PIN (PIN Box) === */
/**
 * الصندوق الذي يحتوي على الكود القابل للنسخ
 * 
 * التصميم:
 * - خلفية خضراء فاتحة جداً (#f0fdf4)
 * - حد أخضر زمردي
 * - cursor: pointer (قابل للنقر)
 * 
 * الوظيفة:
 * - عند النقر: نسخ الكود + إظهار Toast (بدون alert)
 */
.pin-box {
  background: #f0fdf4; /* خلفية خضراء فاتحة جداً */
  border: 1px solid var(--brand-color);
  border-radius: 0.5rem; /* 8px */
  padding: 0.625rem; /* 10px */
  text-align: center;
  margin: 0.9375rem 0; /* 15px 0 */
  cursor: pointer;
  transition: all 0.3s;
}

.pin-box:hover {
  background: #dcfce7; /* أخضر أفتح عند Hover */
  transform: scale(1.02);
}

/* الكود نفسه */
.pin-code {
  font-family: 'Share Tech Mono', monospace;
  font-size: 1rem; /* 16px */
  color: #000000; /* أسود للوضوح */
  font-weight: 700;
  display: block;
  letter-spacing: 0.05em;
}

/* نص "اضغط لنسخ الكود" */
.copy-hint {
  font-size: 0.625rem; /* 10px */
  color: var(--brand-color); /* أخضر زمردي */
  margin-top: 0.125rem; /* 2px */
  display: block;
}

/* === صف المجموع (Total Row) === */
.receipt-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #f1f5f9;
  padding-top: 0.625rem; /* 10px */
  margin-top: 0.625rem; /* 10px */
}

.receipt-total-label {
  color: #1e293b;
  font-weight: 700;
  font-size: 0.875rem; /* 14px */
}

/* السعر الإجمالي */
.total-price {
  font-family: 'Share Tech Mono', monospace;
  font-size: 1.375rem; /* 22px */
  color: var(--brand-color); /* أخضر زمردي */
  font-weight: 700;
}

/* === زر إغلاق الإيصال === */
.close-receipt-btn {
  position: absolute;
  top: 0.625rem; /* 10px */
  left: 0.625rem; /* 10px */
  width: 2rem; /* 32px */
  height: 2rem; /* 32px */
  background: rgba(0, 0, 0, 0.05);
  border: none;
  border-radius: 0.5rem; /* 8px */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #64748b;
  cursor: pointer;
  transition: all 0.3s;
  font-size: 1rem; /* 16px */
}

.close-receipt-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}

/* === أنماط الطباعة (Print Styles) === */
@media print {
  body {
    background: #ffffff;
  }
  
  .receipt {
    border: 1px solid #ddd;
    box-shadow: none;
  }
  
  .close-receipt-btn {
    display: none; /* إخفاء زر الإغلاق عند الطباعة */
  }
}

/* ========================================================= */
/* === إشعار Toast المخصص (Custom Toast Notification) === */
/* ========================================================= */
/**
 * نظام Toast لعرض رسائل النجاح/الخطأ
 * 
 * لماذا Toast بدلاً من alert()؟
 * - حسب الدستور v3.5: ZERO BROWSER ALERT POLICY
 * - window.alert() محظور تماماً
 * - Toast يوفر تجربة مستخدم أفضل:
 *   * لا يوقف تنفيذ الكود
 *   * لا يحجب الشاشة بالكامل
 *   * يختفي تلقائياً بعد ثوان
 *   * يمكن تخصيصه ليتطابق مع هوية MaliMor
 * 
 * التصميم:
 * - يظهر في الأعلى (top: 20px)
 * - خلفية خضراء للنجاح (--brand-color)
 * - خلفية حمراء للخطأ (--danger)
 * - Animation: slide down + fade in
 */

/* حاوية Toast (تحتوي على جميع الـ Toasts) */
.toast-container {
  position: fixed;
  top: 5rem; /* 80px - تحت الهيدر */
  left: 50%;
  transform: translateX(-50%);
  z-index: 999; /* فوق كل شيء */
  display: flex;
  flex-direction: column;
  gap: 0.625rem; /* 10px */
  pointer-events: none; /* لا تمنع التفاعل مع الخلفية */
}

/* Toast واحد */
.toast {
  min-width: 18.75rem; /* 300px */
  max-width: 90vw; /* لا يتجاوز 90% من عرض الشاشة */
  background: var(--brand-color); /* أخضر زمردي (Success) */
  color: var(--text-white);
  padding: 1rem 1.25rem; /* 16px 20px */
  border-radius: 0.75rem; /* 12px */
  display: flex;
  align-items: center;
  gap: 0.75rem; /* 12px */
  font-size: 0.875rem; /* 14px */
  font-weight: 600;
  pointer-events: all; /* السماح بالنقر على Toast */
  
  /* Animation */
  animation: slideDown 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  
  /* NO box-shadow glow - ممنوع حسب الدستور */
}

/* Toast للأخطاء */
.toast.error {
  background: var(--danger); /* أحمر */
}

/* أيقونة Toast */
.toast i {
  font-size: 1.25rem; /* 20px */
}

/* Animation: انزلاق من الأعلى */
@keyframes slideDown {
  from {
    transform: translateY(-1.875rem); /* 30px */
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Animation: الاختفاء */
@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translateY(-0.625rem); /* 10px */
  }
}

.toast.fade-out {
  animation: fadeOut 0.3s ease-out forwards;
}
/* === أنماط صفحات المصادقة (تسجيل الدخول والتسجيل) === */

/* تخطيط صفحة المصادقة - عرض كامل وشاشة مركزة */
.auth-page {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 1rem;
  padding-bottom: 2rem;
  overflow-x: hidden;
  background-image: radial-gradient(circle at 50% 0%, var(--green-glow) 0%, transparent 50%);
}

/* --- بطاقة المصادقة (مشتركة) --- */
.auth-card {
  width: 100%;
  max-width: 400px;
  padding: 2.5rem 1.875rem;
  background: var(--bg-card);
  border: 1px solid var(--glass-border);
  border-radius: 1.5rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: authFadeIn 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.signup-card {
  max-width: 420px;
}

@keyframes authFadeIn {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* --- الشعار (MaliMor) --- */
.brand-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.875rem;
  line-height: 1.2;
}

.brand-en {
  font-family: var(--font-english);
  font-size: 2.375rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.auth-page .logo-mali {
  color: var(--text-white);
}

.auth-page .logo-mor {
  color: var(--primary-green);
}

.brand-ar {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--text-gray);
  letter-spacing: 0.125rem;
  margin-top: -0.25rem;
}

.title {
  color: var(--text-white);
  font-size: 1.5rem;
  font-weight: 800;
  margin-bottom: 0.25rem;
}

.subtitle {
  color: var(--text-gray);
  font-size: 0.8125rem;
  margin-bottom: 2rem;
  text-align: center;
}

.auth-form {
  width: 100%;
}

/* --- حقول الإدخال والتسميات العائمة --- */
.input-group {
  width: 100%;
  margin-bottom: 1.5rem;
  position: relative;
}

.input-box {
  width: 100%;
  height: 3.75rem;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 1rem;
  padding: 0 2.8125rem 0 1.25rem;
  color: var(--text-white);
  font-size: 0.875rem;
  font-weight: 600;
  font-family: var(--font-arabic);
  transition: all 0.3s ease;
}

.input-box:focus {
  /* لون الحدود أخضر زمردي حاد */
  border-color: #10b981 !important;
  
  /* إلغاء الوهج تماماً */
  box-shadow: none !important;
  
  /* التأكد من عدم ظهور حدود المتصفح الافتراضية */
  outline: none;
}


.input-box::placeholder {
  color: transparent;
}

/* التسمية العائمة */
.floating-label {
  position: absolute;
  right: 2.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-gray);
  font-size: 0.8125rem;
  pointer-events: none;
  transition: all 0.25s ease-out;
  padding: 0 0.25rem;
  background-color: transparent;
  z-index: 10;
}

.input-box:focus ~ .floating-label,
.input-box:not(:placeholder-shown) ~ .floating-label {
  top: 0;
  font-size: 0.6875rem;
  color: var(--primary-green);
  font-weight: 700;
  background-color: var(--bg-card);
  right: 1.25rem;
}

.input-icon {
  position: absolute;
  right: 0.9375rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-gray);
  font-size: 1.125rem;
  transition: 0.3s;
}

.input-box:focus ~ .input-icon {
  color: var(--primary-green);
}

/* زر إظهار/إخفاء كلمة المرور */
.toggle-password-btn {
  position: absolute;
  left: 0.9375rem;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: none;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  transition: 0.3s;
  color: var(--text-gray);
}

.toggle-password-btn:hover {
  color: var(--primary-green);
  transform: translateY(-50%) scale(1.1);
}

.toggle-password-btn svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- صف الخيارات --- */
.options-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.875rem;
  font-size: 0.75rem;
}

.remember-me {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-gray);
  cursor: pointer;
}

.custom-checkbox {
  width: 1.125rem;
  height: 1.125rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.3125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
}

.remember-me input[type="checkbox"] {
  display: none;
}

.remember-me input[type="checkbox"]:checked + .custom-checkbox {
  background: var(--primary-green);
  border-color: transparent;
}

.remember-me input[type="checkbox"]:checked + .custom-checkbox::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: var(--text-white);
  font-size: 0.625rem;
}

.forgot-link {
  color: var(--text-gray);
  transition: 0.3s;
}

.forgot-link:hover {
  color: var(--primary-green);
  text-decoration: underline;
}

/* --- زر تسجيل الدخول --- */
.btn-login {
  width: 100%;
  height: 3.125rem;
  border: none;
  border-radius: 3.125rem;
  background: var(--primary-green);
  color: var(--text-white);
  font-size: 1rem;
  font-weight: 800;
  font-family: var(--font-arabic);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3); /* محدث: ظل أخضر زمردي */
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.btn-login::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: 0.5s;
}

.btn-login:hover::before {
  left: 100%;
}

.btn-login:hover {
  transform: translateY(-0.1875rem) scale(1.02);
  box-shadow: 0 10px 25px rgba(16, 185, 129, 0.4); /* محدث: ظل أقوى عند Hover */
  filter: brightness(1.1);
}

.btn-login:active {
  transform: scale(0.98);
}

/* --- نص التذييل --- */
.footer-text {
  margin-top: 1.5rem;
  color: var(--text-gray);
  font-size: 0.8125rem;
}

.register-link {
  color: var(--text-white);
  font-weight: 700;
  margin-right: 0.25rem;
  position: relative;
}

.register-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  right: 0;
  background-color: var(--primary-green);
  transition: 0.3s;
}

.register-link:hover {
  color: var(--primary-green);
}

.register-link:hover::after {
  width: 100%;
}

/* --- حقول إضافية لصفحة التسجيل --- */
.input-select {
  appearance: none;
  cursor: pointer;
}

.input-select option {
  background: var(--bg-card);
  color: var(--text-white);
}

/* التسمية العائمة للـ select - تطفو عند اختيار قيمة */
.input-select:focus ~ .floating-label,
.input-select:valid ~ .floating-label {
  top: 0;
  font-size: 0.6875rem;
  color: var(--primary-green);
  font-weight: 700;
  background-color: var(--bg-card);
  right: 1.25rem;
}

.btn-signup {
  margin-top: 0.5rem;
}

.btn-signup i {
  margin-right: 0.25rem;
}

/* === صف الشروط والأحكام (Terms & Conditions Row) === */
/* يستخدم في صفحة التسجيل - يتطلب موافقة المستخدم قبل التسجيل */
.terms-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0.625rem; /* 10px - مسافة بين العناصر */
  margin-bottom: 1.5625rem; /* 25px - مسافة قبل زر التسجيل */
  font-size: 0.75rem; /* 12px - حجم خط صغير */
}

/* نص الشروط الرمادي */
.terms-text {
  color: var(--text-gray);
}

/* رابط الشروط والأحكام بالأخضر الزمردي */
.terms-link {
  color: var(--primary-green);
  font-weight: 700;
  text-decoration: underline;
  transition: color 0.3s;
}

.terms-link:hover {
  color: var(--brand-hover); /* يتحول للأخضر الداكن عند التمرير */
}

/* === زر التسجيل (Register Button) === */
/* مشابه لزر تسجيل الدخول لكن مخصص لصفحة التسجيل */
.btn-register {
  width: 100%;
  height: 3.125rem; /* 50px */
  border: none;
  border-radius: 3.125rem; /* زوايا دائرية كاملة */
  background: var(--primary-green); /* خلفية خضراء زمردية صلبة */
  color: var(--text-white);
  font-size: 1rem;
  font-weight: 800;
  font-family: var(--font-arabic);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem; /* 10px - مسافة بين النص والأيقونة */
  box-shadow: 0 5px 15px rgba(16, 185, 129, 0.3); /* ظل أخضر خفيف (مسموح) */
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

/* تأثير اللمعان المتحرك عند التمرير (Shine Effect) - مسموح لأنه ليس Glow */
.btn-register::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: 0.5s;
}

.btn-register:hover::before {
  left: 100%; /* تحريك اللمعان من اليسار لليمين */
}

.btn-register:hover {
  transform: translateY(-0.1875rem) scale(1.02); /* رفع الزر قليلاً */
  box-shadow: 0 10px 25px rgba(16, 185, 129, 0.4); /* ظل أقوى عند Hover */
  filter: brightness(1.1); /* زيادة السطوع قليلاً */
}

.btn-register:active {
  transform: scale(0.98); /* تقليص عند الضغط */
}

/* فاصل "أو" بين زر البريد وزر Google */
.auth-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.25rem 0;
  color: var(--text-gray);
  font-size: 0.8125rem;
  font-weight: 600;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}
.auth-divider span {
  padding: 0 0.25rem;
}

/* زر تسجيل الدخول / إنشاء حساب بـ Google - هوية MaliMor */
.btn-google {
  width: 100%;
  height: 3.125rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 1rem;
  color: var(--text-white);
  font-size: 0.9375rem;
  font-weight: 700;
  font-family: var(--font-arabic);
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-google i {
  font-size: 1.25rem;
  color: #fff;
}
.btn-google:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: var(--brand-color);
  color: var(--text-white);
}
.btn-google:hover i {
  color: var(--brand-color);
}
.btn-google:active {
  transform: scale(0.98);
}

/* === رابط تسجيل الدخول في التذييل === */
/* يظهر في صفحة التسجيل للانتقال إلى صفحة تسجيل الدخول */
.login-link {
  color: var(--text-white);
  font-weight: 700;
  margin-right: 0.3125rem; /* 5px */
  position: relative;
}

/* خط تحتي متحرك يظهر عند التمرير */
.login-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  right: 0;
  background-color: var(--primary-green);
  transition: 0.3s;
}

.login-link:hover {
  color: var(--primary-green);
}

.login-link:hover::after {
  width: 100%; /* توسيع الخط ليملأ عرض الرابط */
}

/* ========================================================= */
/* === صفحة منتجات PUBG (PUBG Products Section) === */
/* ========================================================= */
/**
 * إعادة الهيكلة من TeleCard إلى MaliMor:
 * =======================================
 * 
 * التعديلات البصرية (Visual Overhaul):
 * - استبدال جميع ألوان الذهبي (Gold #fbbf24, #FFD700, #FDB931) بالأخضر الزمردي (#10b981)
 * - إزالة radial-gradient الذهبي من الخلفية
 * - تطبيق Flat Design (بدون Glow Effects)
 * - استخدام Navy Slate Background (#0f172a)
 * 
 * التكامل مع SPA:
 * - تم إزالة Bottom Nav (يستخدم التنقل الموحد)
 * - تم إزالة Cart Button (ممنوع حسب الدستور - Atomic Purchase)
 * - زر Back يستدعي showSection('home-section')
 * 
 * ميزة جديدة: مودال الشراء (Purchase Modal)
 * - يظهر عند النقر على "شراء الآن"
 * - يطلب Player ID من المستخدم
 * - يؤكد الشراء مع Custom Toast (بدون window.alert)
 */

/* === غلاف اللعبة (Game Banner) === */
.game-banner {
  width: 100%;
  height: 10rem; /* 160px */
  border-radius: 1.25rem; /* 20px */
  position: relative;
  overflow: hidden;
  margin-bottom: 1.5625rem; /* 25px */
  box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.banner-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* صورة خلفية PUBG من URL خارجي (توفير مساحة Firebase) */
  background: linear-gradient(to right, #000, transparent), 
              url('https://wallpaperaccess.com/full/1164574.jpg') center/cover;
}

.banner-content {
  position: absolute;
  bottom: 1.25rem; /* 20px */
  right: 1.25rem; /* 20px */
  z-index: 2;
}

.game-title {
  font-size: 1.5rem; /* 24px */
  font-weight: 800;
  color: #fff;
  text-shadow: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.8);
}

/**
 * Subtitle اللعبة:
 * - تم تغيير اللون من الذهبي (#fbbf24) إلى الزمردي (#10b981)
 * - لماذا؟ لأنه جزء من هوية MaliMor الموحدة
 */
.game-subtitle {
  font-size: 0.75rem; /* 12px */
  color: var(--brand-color); /* زمردي بدلاً من ذهبي */
  font-weight: 700;
  text-shadow: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.8);
}

/* === فلاتر المنتجات (Region Filters) === */
.filters-scroll {
  display: flex;
  gap: 0.625rem; /* 10px */
  overflow-x: auto;
  margin-bottom: 1.5625rem; /* 25px */
  padding-bottom: 0.3125rem; /* 5px */
  scrollbar-width: none;
}

.filters-scroll::-webkit-scrollbar {
  display: none;
}

.filter-chip {
  padding: 0.5rem 1.125rem; /* 8px 18px */
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3.125rem; /* 50px */
  font-size: 0.75rem; /* 12px */
  font-weight: 600;
  color: var(--text-gray);
  white-space: nowrap;
  cursor: pointer;
  transition: 0.3s;
  border: 1px solid transparent;
}

/**
 * حالة الفلتر النشط:
 * - تم استبدال gold-gradient بلون زمردي صلب (Flat Design)
 * - النص أبيض (بدلاً من البني الداكن #451a03)
 * - بدون box-shadow مع glow
 */
.filter-chip.active {
  background: var(--brand-color); /* زمردي صلب */
  color: var(--text-white); /* أبيض */
  font-weight: 700;
  border-color: var(--brand-color);
  /* NO box-shadow - Flat Design */
}

/* === شبكة منتجات PUBG === */
.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.9375rem; /* 15px */
}

.product-card {
  background: rgba(30, 41, 59, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 1.125rem; /* 18px */
  padding: 0.9375rem; /* 15px */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  transition: 0.3s;
  overflow: hidden;
}

/**
 * Hover Effect (Flat):
 * - رفع بسيط
 * - حد زمردي (بدلاً من ذهبي)
 * - بدون box-shadow كبير (Flat Design)
 */
.product-card:hover {
  transform: translateY(-0.3125rem); /* 5px */
  border-color: rgba(16, 185, 129, 0.3); /* زمردي شفاف */
  background: rgba(30, 41, 59, 0.8);
  box-shadow: 0 0.625rem 1.25rem rgba(0, 0, 0, 0.2);
}

/* شارة التسليم الفوري */
.instant-badge {
  position: absolute;
  top: 0.625rem; /* 10px */
  left: 0.625rem; /* 10px */
  font-size: 0.625rem; /* 10px */
  color: var(--brand-color); /* زمردي */
  background: rgba(16, 185, 129, 0.1);
  padding: 0.125rem 0.375rem; /* 2px 6px */
  border-radius: 0.25rem; /* 4px */
}

/**
 * أيقونة الشدات (UC Icon):
 * - تم استبدال radial-gradient الذهبي بشفافية زمردية
 */
.uc-icon-box {
  width: 3.75rem; /* 60px */
  height: 3.75rem; /* 60px */
  margin-bottom: 0.625rem; /* 10px */
  background: radial-gradient(circle, rgba(16, 185, 129, 0.15) 0%, transparent 70%); /* زمردي */
  display: flex;
  align-items: center;
  justify-content: center;
}

/**
 * صورة الشدات:
 * - تم تغيير اللون من الذهبي إلى الزمردي
 * - بدون drop-shadow قوي (Flat Design)
 */
.uc-icon-box i {
  font-size: 2rem; /* 32px */
  color: var(--brand-color); /* زمردي بدلاً من ذهبي */
}

.prod-title {
  font-size: 1rem; /* 16px */
  font-weight: 800;
  color: var(--text-white);
  margin-bottom: 0.3125rem; /* 5px */
}

.prod-subtitle {
  font-size: 0.6875rem; /* 11px */
  color: var(--text-gray);
  margin-bottom: 0.9375rem; /* 15px */
}

/* === صف السعر === */
.price-row {
  display: flex;
  align-items: center;
  gap: 0.5rem; /* 8px */
  margin-bottom: 0.75rem; /* 12px */
}

/**
 * السعر الجديد:
 * - تم تغيير اللون من الذهبي إلى الزمردي
 * - يبرز السعر كـ Call-to-Action
 */
.price-new {
  font-size: 1rem; /* 16px */
  font-weight: 800;
  color: var(--brand-color); /* زمردي بدلاً من ذهبي */
}

.price-old {
  font-size: 0.75rem; /* 12px */
  color: var(--text-gray);
  text-decoration: line-through;
}

/**
 * زر الشراء:
 * - في الحالة العادية: شفاف
 * - عند Hover: خلفية زمردية صلبة (بدلاً من gold-gradient)
 * - نص أبيض (بدلاً من البني #451a03)
 */
.buy-btn {
  width: 100%;
  padding: 0.625rem; /* 10px */
  border-radius: 0.75rem; /* 12px */
  border: none;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-white);
  font-weight: 700;
  font-size: 0.75rem; /* 12px */
  cursor: pointer;
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.3125rem; /* 5px */
}

/**
 * Hover Effect:
 * - خلفية زمردية صلبة (Flat Design)
 * - نص أبيض (أوضح من البني الداكن)
 */
.product-card:hover .buy-btn {
  background: var(--brand-color); /* زمردي صلب */
  color: var(--text-white); /* أبيض */
  /* NO glow shadow - Flat Design */
}

/* ========================================================= */
/* === مودال الشراء (Purchase Modal) === */
/* ========================================================= */
/**
 * ميزة جديدة: مودال لتأكيد الشراء
 * ==================================
 * 
 * الهدف:
 * - تطبيق مبدأ Atomic Purchase من الدستور
 * - عند النقر على "شراء الآن"، يظهر مودال فوراً
 * - المستخدم يدخل Player ID ويؤكد
 * - بدون سلة تسوق (NO CART)
 * 
 * التصميم:
 * - Emerald Identity: الأزرار والعناصر النشطة باللون الزمردي
 * - Flat Design: بدون glow أو gradients
 * - Mobile-First: حجم مناسب للنقر السهل
 * 
 * Zero-Alert Policy:
 * - بدون window.alert() أو window.confirm()
 * - استخدام Custom Toast للرسائل
 */

.purchase-modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.9); /* Navy Slate شفاف */
  backdrop-filter: blur(8px);
  z-index: 2500; /* فوق كل شيء */
  align-items: center;
  justify-content: center;
  padding: 1.25rem; /* 20px */
  animation: modalFadeIn 0.25s ease-out;
}

.purchase-modal-overlay.active {
  display: flex;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* === بطاقة المودال === */
.purchase-modal {
  width: 100%;
  max-width: 28rem; /* 448px */
  background: var(--bg-card); /* Navy Slate #1e293b */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 1.5rem; /* 24px */
  padding: 1.875rem; /* 30px */
  position: relative;
  animation: modalPopIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalPopIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* زر الإغلاق */
.close-modal-btn {
  position: absolute;
  top: 1rem; /* 16px */
  left: 1rem; /* 16px */
  width: 2rem; /* 32px */
  height: 2rem; /* 32px */
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.5rem; /* 8px */
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-gray);
  cursor: pointer;
  transition: 0.3s;
}

.close-modal-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  color: var(--danger);
}

/* === محتوى المودال === */
.modal-product-info {
  text-align: center;
  margin-bottom: 1.5rem; /* 24px */
}

.modal-product-icon {
  width: 4rem; /* 64px */
  height: 4rem; /* 64px */
  margin: 0 auto 0.75rem; /* 0 auto 12px */
  background: rgba(16, 185, 129, 0.1); /* خلفية زمردية */
  border-radius: 1rem; /* 16px */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem; /* 28px */
  color: var(--brand-color); /* زمردي */
}

.modal-product-name {
  font-size: 1.125rem; /* 18px */
  font-weight: 800;
  color: var(--text-white);
  margin-bottom: 0.5rem; /* 8px */
}

.modal-product-price {
  font-size: 1.5rem; /* 24px */
  font-weight: 800;
  color: var(--brand-color); /* زمردي */
}

/* === حقل إدخال Player ID === */
.modal-input-group {
  margin-bottom: 1.5rem; /* 24px */
}

.modal-label {
  display: block;
  font-size: 0.875rem; /* 14px */
  font-weight: 600;
  color: var(--text-gray);
  margin-bottom: 0.5rem; /* 8px */
}

.modal-input {
  width: 100%;
  padding: 0.875rem 1rem; /* 14px 16px */
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.75rem; /* 12px */
  color: var(--text-white);
  font-size: 1rem; /* 16px */
  font-family: 'Share Tech Mono', monospace;
  text-align: center;
  transition: 0.3s;
}

.modal-input:focus {
  outline: none;
  border-color: var(--brand-color); /* حد زمردي عند Focus */
  background: rgba(16, 185, 129, 0.05);
}

.modal-input::placeholder {
  color: var(--text-gray);
  opacity: 0.5;
}

/* === أزرار المودال === */
.modal-actions {
  display: flex;
  gap: 0.75rem; /* 12px */
}

.modal-btn {
  flex: 1;
  padding: 0.875rem; /* 14px */
  border-radius: 0.75rem; /* 12px */
  border: none;
  font-size: 0.9375rem; /* 15px */
  font-weight: 700;
  cursor: pointer;
  transition: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem; /* 8px */
}

/* زر الإلغاء */
.modal-btn-cancel {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-white);
}

.modal-btn-cancel:hover {
  background: rgba(255, 255, 255, 0.1);
}

/**
 * زر التأكيد:
 * - خلفية زمردية صلبة (Flat)
 * - نص أبيض
 * - بدون gradient أو glow
 */
.modal-btn-confirm {
  background: var(--brand-color); /* زمردي */
  color: var(--text-white);
}

.modal-btn-confirm:hover {
  background: var(--brand-hover); /* زمردي داكن */
  transform: translateY(-0.125rem); /* 2px */
}

/* ========================================================= */
/* === مؤشر الحالة عبر الإنترنت (Online Status Indicator) === */
/* ========================================================= */
/**
 * النقطة الخضراء (Online Dot)
 * ===========================
 * 
 * الغرض:
 * - عرض حالة "متصل" للمستخدم المسجّل دخول
 * - تظهر على زر "حسابي" في الشريط السفلي
 * - لون زمردي نابض (Pulsing Emerald)
 * 
 * التصميم:
 * - دائرة صغيرة (8px × 8px)
 * - خلفية زمردية (#10b981)
 * - حد أبيض لتبرز على الخلفية الداكنة
 * - أنيميشن نبض (Pulse) لجذب الانتباه
 * 
 * الموقع:
 * - أعلى يمين أيقونة المستخدم
 * - position: absolute (نسبة إلى الأيقونة)
 */
.online-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  background: var(--brand-color); /* زمردي */
  border: 2px solid var(--bg-body); /* حد داكن */
  border-radius: 50%; /* دائرة كاملة */
  z-index: 10; /* فوق الأيقونة */
  animation: pulse 2s ease-in-out infinite;
}

/**
 * أنيميشن النبض (Pulse Animation)
 * ================================
 * 
 * التأثير:
 * - تكبير وتصغير الدائرة بشكل متكرر
 * - تغيير الشفافية (Opacity) للتأثير البصري
 * - دورة كاملة كل ثانيتين
 * 
 * لماذا؟
 * - يجذب انتباه المستخدم بشكل طبيعي
 * - يؤكد أن الحساب نشط ومتصل
 * - تأثير بصري احترافي (Professional UX)
 */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.3);
    opacity: 0.7;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}