/* modern_style.css */

/* --- الخطوط والأساسيات --- */
@import url('https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700&display=swap');

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* --- متغيرات CSS (الوضع النهاري الافتراضي) --- */
:root {
  --font-family: 'Tajawal', sans-serif;

  /* Light Mode Colors */
  --bg-primary: #f7f9fc;        /* خلفية الصفحة الرئيسية */
  --bg-secondary: #ffffff;      /* خلفية العناصر (الحاوية، البطاقات) */
  --bg-tertiary: #eef2f7;       /* خلفية خفيفة للعناصر المميزة (مثل صندوق الرصيد) */
  --text-primary: #2d3748;      /* لون النص الأساسي */
  --text-secondary: #5a6a85;    /* لون النص الثانوي (أفتح) */
  --text-link: #3a6fff;         /* لون الروابط والألوان الأساسية */
  --text-link-hover: #2a5ae0;
  --border-color: #e2e8f0;      /* لون الحدود */
  --shadow-color: rgba(45, 55, 72, 0.1); /* لون الظل */
  --shadow-sm: 0 2px 4px var(--shadow-color);
  --shadow-md: 0 4px 8px var(--shadow-color);
  --shadow-lg: 0 10px 20px var(--shadow-color);
  --icon-color: #718096;        /* لون الأيقونات العام */

  --color-success: #38a169;
  --color-warning: #dd6b20;
  --color-danger: #e53e3e;
  --color-info: #3182ce;
  --color-purple: #805ad5;
  --color-dark: #2d3748;

  /* Transitions */
  --transition-speed: 0.3s;
  --transition-ease: ease;
}

/* --- متغيرات CSS (الوضع الليلي) --- */
body.dark-mode {
  --bg-primary: #1a202c;        /* خلفية داكنة جداً */
  --bg-secondary: #2d3748;      /* خلفية أفتح للعناصر */
  --bg-tertiary: #4a5568;       /* خلفية ثالثة داكنة */
  --text-primary: #e2e8f0;      /* نص فاتح */
  --text-secondary: #a0aec0;    /* نص ثانوي أفتح */
  --text-link: #63b3ed;         /* لون روابط سماوي */
  --text-link-hover: #90cdf4;
  --border-color: #4a5568;      /* حدود أغمق */
  --shadow-color: rgba(0, 0, 0, 0.3); /* ظل أغمق */
  --icon-color: #a0aec0;        /* أيقونات فاتحة */

  /* يمكن تعديل ألوان الحالة لتناسب الوضع الداكن إذا لزم الأمر */
  --color-success: #68d391;
  --color-warning: #f6ad55;
  --color-danger: #fc8181;
  --color-info: #63b3ed;
  --color-purple: #b794f4;
  --color-dark: #e2e8f0; /* اللون الداكن يصبح فاتحاً في الوضع الليلي */
}

/* --- تنسيق الجسم والصفحة --- */
body {
  font-family: var(--font-family);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  line-height: 1.6;
  direction: rtl;
  transition: background-color var(--transition-speed) var(--transition-ease),
              color var(--transition-speed) var(--transition-ease);
}

.container {
  max-width: 1200px; /* زيادة عرض الحاوية قليلاً */
  margin-left: auto;
  margin-right: auto;
  padding: 0 15px;
}

/* --- الحاوية الرئيسية --- */
.dashboard-container {
  position: relative;
  max-width: 1100px;
  margin: 100px auto 40px auto; /* زيادة الهامش العلوي للشعار */
  padding: 40px; /* زيادة الحشو الداخلي */
  background-color: var(--bg-secondary);
  border-radius: 24px; /* تدوير أكبر */
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border-color);
  transition: background-color var(--transition-speed) var(--transition-ease),
              border-color var(--transition-speed) var(--transition-ease),
              box-shadow var(--transition-speed) var(--transition-ease);
}

/* --- الشعار --- */
.dashboard-logo {
  position: absolute;
  top: -60px; /* تعديل ليتناسب مع الهامش الجديد */
  left: 50%;
  transform: translateX(-50%);
  width: 120px; /* تكبير الشعار */
  height: 120px;
  background-color: var(--bg-secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  z-index: 10;
  overflow: hidden;
  border: 4px solid var(--bg-primary); /* استخدام لون خلفية الصفحة */
  transition: background-color var(--transition-speed) var(--transition-ease),
              border-color var(--transition-speed) var(--transition-ease);
}

.dashboard-logo img {
  max-width: 85%;
  height: auto;
}

/* --- الهيدر وعناصر التحكم --- */
.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 40px; /* مسافة داخلية بعد الشعار */
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 20px;
}

.welcome-text {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--text-primary);
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 20px; /* مسافة بين صندوق الرصيد وزر التبديل */
}

.balance-box {
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--text-primary);
  background-color: var(--bg-tertiary);
  padding: 12px 20px;
  border-radius: 12px; /* تدوير */
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--border-color);
  transition: background-color var(--transition-speed) var(--transition-ease),
              color var(--transition-speed) var(--transition-ease),
              border-color var(--transition-speed) var(--transition-ease);
}

.balance-box i.fa-wallet {
  font-size: 1.3rem;
  color: var(--text-link);
}

.deposit-btn {
  margin-right: auto; /* دفعه لليسار (في RTL) */
  color: var(--color-success);
  font-size: 1.6rem;
  transition: transform var(--transition-speed) var(--transition-ease);
  text-decoration: none;
}

.deposit-btn:hover {
  transform: scale(1.1);
}

/* زر تبديل الوضع */
.theme-toggle-btn {
  background: none;
  border: 1px solid var(--border-color);
  color: var(--icon-color);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.2rem;
  transition: background-color var(--transition-speed) var(--transition-ease),
              color var(--transition-speed) var(--transition-ease),
              border-color var(--transition-speed) var(--transition-ease),
              transform var(--transition-speed) var(--transition-ease);
}

.theme-toggle-btn:hover,
.theme-toggle-btn:focus {
  background-color: var(--bg-tertiary);
  color: var(--text-link);
  outline: none;
  transform: rotate(15deg);
}
/* أيقونات الشمس والقمر ستُدار بواسطة JavaScript */

/* --- الشبكة والبطاقات --- */
.grid-container {
  display: grid;
  /* جعل الأعمدة تتكيف مع المحتوى، مع حد أدنى للعرض */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px; /* فجوة أكبر */
}

.card-custom {
  background-color: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 16px; /* تدوير أكبر للبطاقات */
  padding: 30px; /* حشو أكبر */
  text-align: center;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-speed) var(--transition-ease),
              box-shadow var(--transition-speed) var(--transition-ease),
              background-color var(--transition-speed) var(--transition-ease),
              border-color var(--transition-speed) var(--transition-ease);
}

.card-custom:hover {
   transform: translateY(-6px); /* رفع أكثر عند المرور */
   box-shadow: var(--shadow-md);
}

.card-custom .icon {
  font-size: 3rem; /* أيقونات أكبر */
  margin-bottom: 20px;
  color: var(--text-link); /* لون الأيقونة الافتراضي */
}
/* تخصيص ألوان أيقونات البطاقات */
.card-custom .fa-user-tie { color: var(--color-purple); }
.card-custom .fa-key { color: var(--color-warning); }
.card-custom .fa-users { color: var(--color-info); }
.card-custom .fa-calendar-times { color: var(--color-danger); }
.card-custom .fa-check-circle { color: var(--color-success); }

.card-custom h4 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--text-secondary); /* عنوان بلون ثانوي */
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.card-custom p {
  font-size: 1.2rem; /* تكبير النص الرئيسي */
  font-weight: 500;
  color: var(--text-primary);
  margin: 0;
}
.card-custom p .text-danger {
   color: var(--color-danger); /* استخدام متغير اللون */
   font-weight: 700;
}

/* --- شريط التقدم --- */
.progress {
  height: 10px; /* شريط أنحف وأكثر حداثة */
  border-radius: 5px;
  overflow: hidden;
  background-color: var(--bg-tertiary); /* استخدام لون خلفية ثالث */
  margin-top: 15px;
  border: 1px solid var(--border-color);
}

.progress-bar {
  height: 100%;
  transition: width 0.6s ease-out; /* انتقال أبطأ قليلاً */
  border-radius: 5px;
  background: linear-gradient(90deg, var(--text-link), var(--text-link-hover)); /* تدرج في الشريط */
}
/* تغيير التدرج بناءً على النسبة (اختياري ومعقد قليلاً، يمكن الإبقاء على الألوان الصلبة) */
.progress-bar.low { background: linear-gradient(90deg, #68d391, #38a169); } /* أخضر */
.progress-bar.medium { background: linear-gradient(90deg, #f6ad55, #dd6b20); } /* برتقالي */
.progress-bar.high { background: linear-gradient(90deg, #fc8181, #e53e3e); } /* أحمر */


/* --- شارة الحالة --- */
.status-badge {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: var(--button-radius, 50px); /* استخدام متغير أو قيمة ثابتة */
  color: #fff; /* لون النص غالباً أبيض */
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.status-active { background-color: var(--color-success); }
.status-inactive { background-color: var(--color-danger); }

/* --- منطقة الأزرار --- */
.actions-area {
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  transition: border-color var(--transition-speed) var(--transition-ease);
}

/* --- الأزرار المخصصة --- */
.btn-custom {
  padding: 14px 28px; /* حشو أكبر */
  border-radius: 50px; /* تدوير كامل */
  font-size: 1rem;
  font-weight: 700; /* خط أثقل */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: 2px solid transparent; /* حد شفاف للتحضير للحالات الأخرى */
  cursor: pointer;
  transition: transform var(--transition-speed) var(--transition-ease),
              background-color var(--transition-speed) var(--transition-ease),
              color var(--transition-speed) var(--transition-ease),
              border-color var(--transition-speed) var(--transition-ease),
              box-shadow var(--transition-speed) var(--transition-ease);
}

.btn-custom:hover {
  transform: translateY(-3px); /* رفع عند المرور */
  box-shadow: var(--shadow-sm);
}
.btn-custom:active {
    transform: translateY(-1px);
    box-shadow: none;
}
/* حالة التركيز لتحسين الواجهة لذوي الاحتياجات الخاصة */
.btn-custom:focus-visible {
    outline: 2px solid var(--text-link);
    outline-offset: 2px;
}


.btn-custom i {
  margin-left: 10px; /* مسافة لليسار في RTL */
  font-size: 1.1em;
}

/* --- ألوان الأزرار --- */
.btn-primary { background-color: var(--text-link); color: #fff; }
.btn-primary:hover { background-color: var(--text-link-hover); }

/* زر ثانوي (Outline) */
.btn-secondary {
  background-color: transparent;
  color: var(--text-link);
  border-color: var(--text-link);
}
.btn-secondary:hover {
  background-color: var(--text-link);
  color: #fff;
  border-color: var(--text-link);
}

.btn-warning { background-color: var(--color-warning); color: #fff; }
.btn-warning:hover { background-color: #c05621; } /* أغمق قليلاً */

.btn-danger { background-color: var(--color-danger); color: #fff; }
.btn-danger:hover { background-color: #c53030; } /* أغمق قليلاً */

.btn-info { background-color: var(--color-info); color: #fff; }
.btn-info:hover { background-color: #2b6cb0; } /* أغمق قليلاً */

.btn-success { background-color: var(--color-success); color: #fff; }
.btn-success:hover { background-color: #2f855a; } /* أغمق قليلاً */

.btn-dark { background-color: var(--color-dark); color: var(--bg-primary); } /* يعكس الألوان */
.btn-dark:hover { background-color: #4a5568; } /* أغمق قليلاً */

.btn-purple { background-color: var(--color-purple); color: #fff; }
.btn-purple:hover { background-color: #6b46c1; } /* أغمق قليلاً */

/* زر فاتح (Outline رمادي) */
.btn-light {
    background-color: transparent;
    color: var(--text-secondary);
    border-color: var(--border-color);
}
.btn-light:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
}


/* --- رسالة عدم وجود ترخيص --- */
.no-license-message {
  padding: 50px 30px;
  background-color: var(--bg-tertiary);
  border: 1px dashed var(--color-warning); /* استخدام حد متقطع */
  border-radius: 16px;
  text-align: center;
  transition: background-color var(--transition-speed) var(--transition-ease),
              border-color var(--transition-speed) var(--transition-ease);
}
.no-license-message h4 {
   color: var(--color-warning);
   font-weight: 700;
   margin-bottom: 15px;
   font-size: 1.5rem;
}
.no-license-message p {
    color: var(--text-secondary);
    margin-bottom: 25px;
    font-size: 1.1rem;
}
.no-license-message .btn-success {
    /* يمكن استخدام نفس الستايل أو تخصيصه */
}

/* --- زر تسجيل الخروج --- */
.logout-section { /* قسم منفصل لزر الخروج */
    text-align: center;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--border-color);
    transition: border-color var(--transition-speed) var(--transition-ease);
}
.logout-btn {
  /* استخدام كلاس btn-danger أو تخصيصه */
}

/* --- تجاوبية --- */
@media (max-width: 768px) {
  .dashboard-container {
      margin-top: 80px;
      padding: 25px;
  }
  .dashboard-logo {
      width: 100px;
      height: 100px;
      top: -50px;
  }
  .dashboard-header {
      flex-direction: column;
      align-items: flex-start;
      margin-top: 30px;
      margin-bottom: 30px;
  }
  .welcome-text {
      font-size: 1.5rem;
  }
  .header-controls {
      width: 100%;
      justify-content: space-between; /* توزيع العناصر في الجوال */
  }
  .grid-container {
      grid-template-columns: 1fr; /* عمود واحد */
      gap: 20px;
   }
   .card-custom { padding: 20px; }
   .actions-area { gap: 10px; }
   .btn-custom {
      width: 100%; /* جعل الأزرار تملأ العرض */
      padding: 12px 20px;
      font-size: 0.9rem;
   }
   .logout-section { margin-top: 30px; padding-top: 20px; }
}

.btn-custom {
  padding: 12px 28px; /* تعديل الحشو قليلاً */
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: none; /* نعتمد على الخلفية والظل */
  cursor: pointer;
  position: relative; /* للسماح بتأثيرات داخلية */
  overflow: hidden; /* لإخفاء أي تجاوزات للتأثيرات */
  transition: transform 0.2s ease-out, /* تسريع الانتقال قليلاً */
              box-shadow 0.3s var(--transition-ease);
  box-shadow: 0 3px 6px rgba(0,0,0, 0.1); /* ظل أساسي خفيف */
}

.btn-custom::before { /* طبقة للتأثير اللامع أو التدرج */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.btn-custom span, /* لتكون النصوص والأيقونات فوق الطبقة */
.btn-custom i {
    position: relative;
    z-index: 2;
    transition: color 0.3s ease; /* انتقال لون النص/الأيقونة */
}


.btn-custom:hover {
  transform: translateY(-4px) scale(1.02); /* رفع وتكبير طفيف */
  box-shadow: var(--shadow-md); /* استخدام ظل أكبر من المتغيرات */
}
.btn-custom:active {
    transform: translateY(-1px) scale(0.98); /* ضغط للأسفل قليلاً */
    box-shadow: var(--shadow-sm);
}
/* حالة التركيز */
.btn-custom:focus-visible {
    outline: 3px solid var(--text-link-hover); /* إطار أوضح */
    outline-offset: 3px;
    box-shadow: var(--shadow-md);
}


.btn-custom i {
  margin-left: 10px; /* المسافة لليسار في RTL */
  font-size: 1.2em; /* تكبير الأيقونة قليلاً */
  transition: transform 0.3s ease; /* إضافة انتقال للأيقونة */
}

.btn-custom:hover i {
    transform: rotate(5deg) scale(1.1); /* حركة طفيفة للأيقونة عند المرور */
}

/* --- ألوان الأزرار (مع تدرجات خفيفة) --- */
.btn-primary { color: #fff; }
.btn-primary::before { background: linear-gradient(135deg, var(--text-link), var(--text-link-hover)); }
.btn-primary:hover::before { opacity: 0.9; } /* يصبح أفتح قليلاً عند المرور */

.btn-secondary {
    color: var(--text-link);
    border: 2px solid var(--text-link); /* إظهار الحد لهذا النوع */
    background-color: transparent;
    box-shadow: none; /* إزالة الظل الافتراضي للزر الثانوي */
}
.btn-secondary:hover {
    background-color: var(--text-link);
    color: var(--bg-secondary); /* لون الخلفية ك لون نص */
    border-color: var(--text-link);
    box-shadow: var(--shadow-sm);
}
.btn-secondary::before { background: none; } /* لا يحتاج لطبقة تدرج */


.btn-success { color: #fff; }
.btn-success::before { background: linear-gradient(135deg, #68d391, var(--color-success)); }
.btn-success:hover::before { opacity: 0.9; }

.btn-warning { color: #fff; }
.btn-warning::before { background: linear-gradient(135deg, #f6ad55, var(--color-warning)); }
.btn-warning:hover::before { opacity: 0.9; }

.btn-danger { color: #fff; }
.btn-danger::before { background: linear-gradient(135deg, #fc8181, var(--color-danger)); }
.btn-danger:hover::before { opacity: 0.9; }

.btn-info { color: #fff; }
.btn-info::before { background: linear-gradient(135deg, #63b3ed, var(--color-info)); }
.btn-info:hover::before { opacity: 0.9; }

.btn-purple { color: #fff; }
.btn-purple::before { background: linear-gradient(135deg, #b794f4, var(--color-purple)); }
.btn-purple:hover::before { opacity: 0.9; }

/* زر فاتح (حدود فقط) */
.btn-light {
    background-color: transparent;
    color: var(--text-secondary);
    border: 2px solid var(--border-color);
    box-shadow: none;
}
.btn-light:hover {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-color);
    box-shadow: var(--shadow-sm);
}
.btn-light::before { background: none; }

/* زر داكن (حدود فقط في الوضع النهاري، والعكس في الليلي) */
.btn-dark {
    background-color: transparent;
    color: var(--text-primary); /* استخدام لون النص الأساسي */
    border: 2px solid var(--text-primary);
    box-shadow: none;
}
.btn-dark:hover {
    background-color: var(--text-primary);
    color: var(--bg-primary); /* لون الخلفية كلون للنص */
    border-color: var(--text-primary);
    box-shadow: var(--shadow-sm);
}
.btn-dark::before { background: none; }

/* --- تعديل أيقونات البطاقات --- */
.card-custom .icon {
  font-size: 2.8rem; /* حجم أقل قليلاً من السابق */
  margin-bottom: 20px;
  color: var(--icon-color); /* لون أيقونة عام أكثر حيادية */
  transition: transform 0.3s ease, color 0.3s ease; /* إضافة انتقال */
}
.card-custom:hover .icon {
    transform: scale(1.1) translateY(-3px); /* تكبير بسيط للأيقونة عند مرور الماوس على البطاقة */
    color: var(--text-link); /* تغيير لون الأيقونة للون الروابط عند المرور */
}
/* تخصيص ألوان أيقونات البطاقات عند عدم المرور (يمكن الإبقاء عليها أو حذفها) */
.card-custom .fa-user-tie { color: var(--color-purple); }
.card-custom .fa-key { color: var(--color-warning); }
.card-custom .fa-users { color: var(--color-info); }
.card-custom .fa-calendar-times { color: var(--color-danger); }
.card-custom .fa-check-circle { color: var(--color-success); }
.user-count-card {
    /* يمكنك إضافة خلفية مميزة لهذه البطاقة إذا أردت */
    /* background: linear-gradient(135deg, var(--bg-secondary), var(--bg-tertiary)); */
    display: flex; /* استخدام flexbox لتنظيم المحتوى عمودياً */
    flex-direction: column;
    align-items: center; /* توسيط المحتوى */
    justify-content: center; /* توزيع المسافات */
    padding-top: 35px; /* زيادة الحشو العلوي */
    padding-bottom: 35px;
    /* يمكنك جعلها أطول قليلاً إذا كانت الشبكة تسمح */
    /* grid-row: span 2; */ /* قد تحتاج لتعديل تعريف الشبكة */
}

.user-count-icon {
    font-size: 2.5rem; /* حجم أيقونة مناسب */
    color: var(--text-link);
    margin-bottom: 15px;
    transition: none; /* إزالة الانتقال من الأيقونة الأساسية هنا */
    transform: none;
}
.user-count-card:hover .user-count-icon {
     transform: none; /* إلغاء تأثير المرور العام */
     color: var(--text-link); /* الحفاظ على اللون */
}

.user-count-numbers {
    font-weight: 700; /* خط سميك */
    line-height: 1;
    margin-bottom: 5px;
    display: inline-block; /* ليعمل التعليق بين الـ spans */
}

.user-count-numbers .current-users {
    font-size: 4.5rem; /* حجم كبيــــر جداً للرقم الحالي */
    color: var(--text-primary);
    margin-right: 5px; /* مسافة بسيطة لليمين */
}

.user-count-numbers .separator {
    font-size: 2rem; /* حجم أصغر للفاصلة */
    color: var(--text-secondary);
    margin: 0 5px; /* هوامش للفاصلة */
    position: relative;
    top: -5px; /* لضبط المحاذاة الرأسية */
}

.user-count-numbers .max-users {
    font-size: 2rem; /* حجم أصغر للحد الأقصى */
    color: var(--text-secondary);
}

.user-count-label {
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 20px; /* مسافة قبل النسبة */
}

.user-percentage-text {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 8px; /* مسافة قبل الشريط */
    /* استخدام نفس ألوان الشريط كنص */
}
.user-percentage-text.low { color: #38a169; }
.user-percentage-text.medium { color: #dd6b20; }
.user-percentage-text.high { color: #e53e3e; }
/* ألوان الوضع الليلي للنص */
body.dark-mode .user-percentage-text.low { color: #68d391; }
body.dark-mode .user-percentage-text.medium { color: #f6ad55; }
body.dark-mode .user-percentage-text.high { color: #fc8181; }


.user-progress.progress {
    height: 18px; /* شريط أكثر سمكاً */
    width: 80%; /* تحديد عرض للشريط */
    margin: 0 auto; /* توسيط الشريط */
    border-radius: 9px; /* تدوير يتناسب مع الارتفاع */
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    overflow: visible; /* السماح للنسبة بالظهور خارج الشريط إذا أردت */
    position: relative;
}

.user-progress .progress-bar {
    border-radius: 9px; /* نفس التدوير */
    /* إزالة التدرج لتبسيطه أو تعديله */
    /* background: var(--text-link); */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.8); /* لون النسبة داخل الشريط (إذا أردت وضعها بالداخل) */
    transition: width 0.6s ease-out, background-color 0.3s ease; /* إضافة انتقال للون */
}
/* استخدام ألوان صلبة للشريط */
.user-progress .progress-bar.low { background-color: var(--color-success); }
.user-progress .progress-bar.medium { background-color: var(--color-warning); }
.user-progress .progress-bar.high { background-color: var(--color-danger); }


/* إزالة الهوامش الافتراضية لـ h4 و p داخل هذه البطاقة */
.user-count-card h4,
.user-count-card p {
    margin: 0;
}

/* إزالة العنوان H4 الافتراضي إذا لم نعد نستخدمه */
.user-count-card h4 {
    display: none;
}
.actions-area {
  --actions-gap: 15px; /* تعريف متغير للمسافة بين الأزرار */
  margin-top: 40px;
  padding-top: 30px;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--actions-gap); /* استخدام المتغير هنا */
  transition: border-color var(--transition-speed) var(--transition-ease);
}

/* --- إضافة فاصل رأسي بين الأزرار --- */
.actions-area .btn-custom {
    position: relative; /* ضروري لتحديد موضع ::after */
}

.actions-area .btn-custom:not(:last-child)::after {
    content: ''; /* ضروري لعرض العنصر الوهمي */
    position: absolute;
    /* تحديد الموضع ليكون على يسار الزر (لأن الصفحة RTL) */
    /* نضعه في منتصف المسافة (gap) */
    left: calc(-1 * var(--actions-gap) / 2 - 1px); /* نصف المسافة ناقص نصف عرض الخط */
    top: 50%; /* توسيط رأسي */
    transform: translateY(-50%); /* ضبط التوسيط الرأسي */
    height: 50%; /* ارتفاع الخط (يمكن تعديله حسب الرغبة) */
    width: 1px; /* عرض الخط (يمكن تعديله) */
    background-color: var(--border-color); /* استخدام لون الحدود للفاصل */
    opacity: 0.6; /* جعله شفافاً قليلاً */
    transition: background-color var(--transition-speed) var(--transition-ease);
}

/* إخفاء الفاصل في الشاشات الصغيرة جداً إذا كانت الأزرار تحت بعضها */
@media (max-width: 576px) { /* أو النقطة التي تصبح فيها الأزرار عمودية */
     /* (تأكد من تعديل كود التجاوبية للأزرار إذا لم تكن تملأ العرض) */
    .actions-area .btn-custom:not(:last-child)::after {
       /* display: none; */ /* يمكنك إخفاؤه إذا أردت عندما تكون الأزرار فوق بعضها */
       /* أو تعديل الموضع إذا بقيت بجانب بعضها لكن بمسافة مختلفة */
    }
     /* تأكد من أن كود التجاوبية يجعل الأزرار تملأ العرض كما يجب */
    .actions-area {
        gap: 10px; /* تقليل المسافة في الجوال */
        --actions-gap: 10px; /* تحديث المتغير للمحاذاة الصحيحة للخط */
    }
    /* إذا كانت الأزرار 100% width في الجوال، الفاصل قد لا يكون منطقياً */
     .actions-area .btn-custom {
        /* width: 100%; */ /* تأكد من وجود هذا إذا كنت تريده */
        /* justify-content: center; */
    }
     /* إذا كانت الأزرار 100%، فإخفاء الفاصل هو الأفضل */
     .actions-area .btn-custom:not(:last-child)::after {
         display: none; /* إخفاء الفاصل عندما تكون الأزرار 100% */
     }
}

/* --- (أضف هذا الكود في نهاية modern_style.css) --- */

/* --- Popup Message Styling --- */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6); /* Darker overlay */
  z-index: 999;
  opacity: 0; /* Start hidden */
  visibility: hidden;
  /* Delay visibility transition until opacity starts changing */
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.overlay.show {
  opacity: 1;
  visibility: visible;
  /* Remove delay on show */
  transition: opacity 0.3s ease;
}

.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9); /* Start slightly smaller */
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  padding: 30px 40px; /* More padding */
  border-radius: 16px; /* Match card radius */
  box-shadow: var(--shadow-lg);
  opacity: 0; /* Start hidden */
  visibility: hidden;
  font-size: 1.1rem;
  text-align: center;
  z-index: 1000;
  width: 90%;
  max-width: 400px; /* Max width */
  border-left: 6px solid var(--color-info); /* Default border */
  transition: transform 0.3s ease, opacity 0.3s ease, visibility 0s linear 0.3s, border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.popup.show {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1); /* Scale to full size */
  transition: transform 0.3s ease, opacity 0.3s ease; /* Only transform and opacity on show */
}


.popup-success { border-left-color: var(--color-success); }
.popup-error { border-left-color: var(--color-danger); }

/* تنسيق محتوى الرسالة داخل ال popup */
.popup .popup-message {
    margin-bottom: 20px; /* مسافة قبل زر الإغلاق إذا كان منفصلاً */
    line-height: 1.7;
}

.popup .popup-close-btn { /* Style the close button */
  background: none;
  border: none;
  font-size: 1.8rem; /* Larger close icon */
  font-weight: bold;
  color: var(--text-secondary);
  cursor: pointer;
  position: absolute;
  top: 10px; /* أقرب للحافة العلوية */
  /* Adjust for RTL */
  left: 15px; /* Place on the left for RTL */
  right: auto;
  padding: 5px; /* إضافة padding لتسهيل النقر */
  line-height: 1;
  transition: color 0.2s ease, transform 0.2s ease;
}

.popup .popup-close-btn:hover {
  color: var(--color-danger);
  transform: rotate(90deg) scale(1.1);
}

/* --- (أضف هذا الكود في نهاية modern_style.css) --- */

/* --- Styling for Status Messages within Forms --- */
.form-status-message {
  padding: 15px 20px;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 12px; /* تدوير أكبر */
  font-weight: 500;
  font-size: 1rem;
  border-left: 5px solid; /* Colored border on the left */
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.form-status-message i { /* تنسيق الأيقونة داخل الرسالة */
    font-size: 1.3rem;
}

.form-status-message.success {
  background-color: rgba(var(--rgb-success, 56, 161, 105), 0.1);
  color: var(--color-success);
  border-left-color: var(--color-success);
}

.form-status-message.error {
  background-color: rgba(var(--rgb-danger, 229, 62, 62), 0.1);
  color: var(--color-danger);
  border-left-color: var(--color-danger);
}
body.dark-mode .form-status-message.success {
   background-color: rgba(var(--rgb-success-dark, 104, 211, 145), 0.15);
   color: var(--color-success);
}
body.dark-mode .form-status-message.error {
    background-color: rgba(var(--rgb-danger-dark, 252, 129, 129), 0.15);
    color: var(--color-danger);
}

/* --- Styling for Form Elements --- */
.styled-form label {
    display: block;
    text-align: right;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.95rem;
     transition: color var(--transition-speed) var(--transition-ease);
}

.styled-form input[type="text"],
.styled-form input[type="password"],
.styled-form input[type="email"],
.styled-form input[type="number"],
.styled-form select,
.styled-form textarea {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px; /* تدوير أقل */
    border: 1px solid var(--border-color);
    background-color: var(--bg-tertiary); /* استخدام لون خلفية ثالث */
    color: var(--text-primary);
    font-size: 1rem;
    margin-bottom: 20px; /* مسافة ثابتة */
    transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.styled-form input:focus,
.styled-form select:focus,
.styled-form textarea:focus {
    outline: none;
    border-color: var(--text-link);
    background-color: var(--bg-secondary); /* تغيير الخلفية عند التركيز */
    box-shadow: 0 0 0 3px rgba(var(--rgb-link, 58, 111, 255), 0.2); /* استخدام متغير RGB للون الرابط */
}

/* --- (يجب إضافة متغيرات RGB في :root و body.dark-mode) --- */
/* في :root أضف: */
/* --rgb-link: 58, 111, 255; */
/* --rgb-success: 56, 161, 105; */
/* --rgb-danger: 229, 62, 62; */

/* في body.dark-mode أضف: */
/* --rgb-link: 99, 179, 237; */ /* مثال للون الرابط في الوضع الداكن */
/* --rgb-success-dark: 104, 211, 145; */
/* --rgb-danger-dark: 252, 129, 129; */

/* --- Info Box Styling --- */
.info-box-styled {
    background-color: var(--bg-tertiary);
    padding: 20px 25px;
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 30px;
    font-size: 1rem;
    color: var(--text-secondary);
    text-align: right;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.info-box-styled p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--border-color);
     transition: border-color 0.3s ease;
}
.info-box-styled p:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.info-box-styled p strong {
    color: var(--text-primary);
    font-weight: 600;
    margin-left: 8px; /* مسافة بعد النص السميك */
     transition: color 0.3s ease;
}
.info-box-styled p i {
    font-size: 1.2rem;
    color: var(--text-link);
    margin-left: 10px;
    width: 20px; /* تحديد عرض للأيقونة للمحاذاة */
    text-align: center;
}
/* تنسيق شارة الحالة داخل الـ info-box */
.info-box-styled .status-badge {
    font-size: 0.8rem;
    padding: 4px 12px;
    font-weight: 700;
}
/* --- (أضف هذا الكود في نهاية modern_style.css) --- */

/* --- Styling for Server Info Boxes --- */
.info-grid { /* حاوية المعلومات */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); /* أعمدة متجاوبة */
    gap: 25px;
    padding: 20px 0; /* لا حاجة لحشو إضافي إذا كانت داخل content-container */
}

/* استخدام نفس كلاس info-box-styled من صفحة سابقة أو اسم جديد */
.info-box-styled {
    background-color: var(--bg-tertiary); /* خلفية مختلفة قليلاً */
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 25px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    display: flex; /* استخدام flex لتنظيم الأيقونة والنص */
    flex-direction: column;
    align-items: center;
    justify-content: center; /* توسيط رأسي */
    min-height: 180px; /* ارتفاع أدنى للتوحيد */
    transition: transform var(--transition-speed) var(--transition-ease),
                box-shadow var(--transition-speed) var(--transition-ease),
                background-color var(--transition-speed) var(--transition-ease),
                border-color var(--transition-speed) var(--transition-ease);
}

.info-box-styled:hover {
   transform: translateY(-5px) scale(1.03); /* تأثير مرور أفضل */
   box-shadow: var(--shadow-md);
   background-color: var(--bg-secondary);
}

.info-box-styled .info-icon {
    font-size: 2.8rem; /* حجم الأيقونة */
    color: var(--text-link);
    margin-bottom: 15px;
    width: 50px; /* تحديد حجم ثابت للأيقونة */
    height: 50px;
    line-height: 50px; /* توسيط الأيقونة */
    transition: color 0.3s ease, transform 0.3s ease;
}
.info-box-styled:hover .info-icon {
    transform: scale(1.1) rotate(5deg); /* دوران بسيط للأيقونة */
}

.info-box-styled .info-text {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.6;
    transition: color 0.3s ease;
}
.info-box-styled .info-text .info-label { /* تسمية المعلومة */
    display: block;
    font-weight: 700;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.info-box-styled .info-text .status-online {
    color: var(--color-success);
    font-weight: 700;
}
/* حالة عدم الاتصال ستكون في صفحة خطأ منفصلة */

/* زر تحميل الباك أب */
.info-box-styled .btn-download-backup {
    /* يرث الأنماط من .btn-custom .btn-success */
    margin-top: 15px;
    display: inline-block;
    width: auto;
    padding: 10px 20px;
}

/* --- Main Content Container (يمكن إعادة استخدامه من صفحات أخرى) --- */
.content-container {
    width: 95%; /* استخدام نسبة أكبر */
    max-width: 1100px; /* عرض أكبر للمعلومات */
    margin: 40px auto;
    padding: 30px 40px;
    background-color: var(--bg-secondary);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    position: relative;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.content-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    transition: border-color 0.3s ease;
}
.content-header h2 {
    color: var(--text-primary);
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: color 0.3s ease;
}
.content-header h2 i {
    color: var(--text-link);
    font-size: 1.6rem;
}
/* زر الثيم في الهيدر */
.content-header .theme-toggle-btn {
    /* نفس أنماط زر الثيم في لوحة التحكم */
    background: none; border: 1px solid var(--border-color); color: var(--icon-color);
    width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; cursor: pointer; font-size: 1.2rem; transition: all 0.3s ease;
}
.content-header .theme-toggle-btn:hover,
.content-header .theme-toggle-btn:focus {
   background-color: var(--bg-tertiary); color: var(--text-link);
   outline: none; transform: rotate(15deg);
}

/* --- Error Page Styling --- */
.error-page-container {
     width: 90%;
     max-width: 600px;
     margin: 40px auto; /* نفس الهوامش الرأسية */
     padding: 50px 40px; /* حشو أكبر */
     background-color: var(--bg-secondary);
     border-radius: 20px;
     box-shadow: var(--shadow-lg);
     border: 1px solid var(--border-color);
     text-align: center;
     position: relative;
     transition: background-color 0.3s ease, border-color 0.3s ease;
}
.error-icon {
    font-size: 4.5rem; /* أيقونة أكبر */
    margin-bottom: 30px;
    display: block; /* تأكيد العرض كبلوك */
    color: var(--color-danger); /* اللون الافتراضي */
}
.error-icon.warning {
    color: var(--color-warning);
}
.error-page-container h1 {
     color: var(--text-primary);
     font-size: 2rem; /* عنوان أكبر */
     font-weight: 700;
     margin-bottom: 20px;
     transition: color 0.3s ease;
}
.error-page-container p {
     color: var(--text-secondary);
     font-size: 1.1rem;
     line-height: 1.8; /* تباعد أسطر أفضل */
     margin-bottom: 30px;
     transition: color 0.3s ease;
}
.error-page-container strong {
    color: var(--text-primary);
     font-weight: 600;
}
/* زر العودة في صفحة الخطأ */
.error-page-container .btn-back {
    margin-top: 20px;
}
/* --- (أضف هذا الكود في نهاية modern_style.css) --- */

/* --- Styling for Settings/Bot Page Container --- */
.settings-container { /* حاوية الصفحة الرئيسية */
    width: 90%;
    max-width: 750px; /* عرض مناسب للنموذج */
    margin: 40px auto;
    padding: 30px 40px;
    background-color: var(--bg-secondary);
    border-radius: 20px;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border-color);
    position: relative;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
/* الهيدر (يمكن إعادة استخدامه من content-header إذا كان مطابقاً) */
.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    transition: border-color 0.3s ease;
}
.settings-header h2 {
    color: var(--text-primary);
    font-size: 1.8rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: color 0.3s ease;
}
.settings-header h2 i {
    color: var(--text-link);
    font-size: 1.6rem;
}
/* زر الثيم في الهيدر */
.settings-header .theme-toggle-btn {
    background: none; border: 1px solid var(--border-color); color: var(--icon-color);
    width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; cursor: pointer; font-size: 1.2rem; transition: all 0.3s ease;
}
.settings-header .theme-toggle-btn:hover,
.settings-header .theme-toggle-btn:focus {
   background-color: var(--bg-tertiary); color: var(--text-link);
   outline: none; transform: rotate(15deg);
}

/* تنسيق مجموعات الحقول */
.form-group {
    margin-bottom: 25px; /* زيادة المسافة بين الحقول */
    text-align: right; /* محاذاة لليمين في RTL */
}

/* تنسيق منطقة عرض Webhook URL */
.webhook-display-area {
  background-color: var(--bg-primary); /* استخدام لون خلفية الصفحة للتمييز */
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px 25px;
  margin-top: 30px;
  text-align: right;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.webhook-display-area .webhook-label { /* تسمية حقل الويب هوك */
    display: block;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 12px;
}
.webhook-url-wrapper { /* حاوية الرابط والأزرار */
    display: flex;
    align-items: stretch; /* جعل العناصر بنفس الارتفاع */
    gap: 10px;
    background-color: var(--bg-secondary);
    padding: 8px; /* تقليل الحشو الداخلي */
    border-radius: 8px;
    border: 1px solid var(--border-color);
    flex-wrap: wrap; /* السماح بالالتفاف */
}
.webhook-url-text { /* الرابط نفسه */
  font-family: 'Courier New', Courier, monospace; /* خط مميز للرابط */
  font-size: 1rem;
  color: var(--text-primary);
  word-break: break-all;
  direction: ltr;
  text-align: left;
  flex-grow: 1;
  padding: 8px 12px; /* حشو داخلي للنص */
  background-color: var(--bg-tertiary); /* خلفية للنص */
  border-radius: 6px; /* تدوير طفيف */
  align-self: center; /* محاذاة رأسية */
  min-height: 42px; /* ليتناسب مع الأزرار */
  line-height: 1.5;
}
.webhook-actions { /* حاوية الأزرار */
    display: flex;
    gap: 8px;
    align-items: center; /* محاذاة الأزرار رأسياً */
}
.webhook-actions .btn-custom { /* تنسيق أزرار النسخ والتجديد */
    padding: 8px 12px;
    font-size: 0.9rem;
    min-width: 40px; /* عرض أدنى للأزرار الصغيرة */
    height: 42px; /* نفس ارتفاع حقل النص */
}
.webhook-actions .btn-custom i {
    margin: 0; /* لا حاجة لهامش للأيقونة فقط */
    font-size: 1.1em;
}

/* تنسيق رسالة الحالة التي تظهر بواسطة AJAX */
#messageBox { /* استهداف الـ ID */
    padding: 15px 20px;
    margin-bottom: 25px; /* زيادة المسافة السفلية */
    border-radius: 12px;
    font-weight: 500;
    font-size: 1rem;
    border-left: 5px solid var(--color-success); /* لون النجاح الافتراضي */
    background-color: rgba(var(--rgb-success, 56, 161, 105), 0.1);
    color: var(--color-success);
    display: flex; /* استخدام flex */
    align-items: center;
    gap: 10px;
     transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
#messageBox.error { /* كلاس إضافي للخطأ إذا احتجت له */
    border-left-color: var(--color-danger);
    background-color: rgba(var(--rgb-danger, 229, 62, 62), 0.1);
    color: var(--color-danger);
}
#messageBox.hidden { /* لإخفاء الرسالة */
    display: none;
}
/* أيقونة لرسالة الحالة */
#messageBox::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f058"; /* أيقونة check-circle */
    font-size: 1.3rem;
}
#messageBox.error::before {
    content: "\f071"; /* أيقونة exclamation-triangle */
}

/* تعديل بسيط لكلاس hidden */
.hidden {
  display: none !important; /* استخدام important لضمان الإخفاء */
}

/* --- (أضف هذا الكود في نهاية modern_style.css) --- */

/* --- Styling for Data Tables --- */
.styled-table-wrapper { /* حاوية للسماح بالتمرير الأفقي إذا لزم الأمر */
    overflow-x: auto;
    margin-top: 30px;
     border: 1px solid var(--border-color);
     border-radius: 12px;
     background-color: var(--bg-secondary); /* خلفية للحاوية */
}

.styled-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    color: var(--text-secondary);
     transition: background-color 0.3s ease; /* انتقال للخلفية */
}

.styled-table thead th {
    background-color: var(--bg-tertiary); /* Header background */
    color: var(--text-primary);
    font-weight: 700;
    padding: 15px 20px;
    text-align: right;
    border-bottom: 2px solid var(--border-color);
    font-size: 0.9rem; /* خط أصغر قليلاً للهيدر */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap; /* منع التفاف الهيدر */
     transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.styled-table tbody tr {
    transition: background-color 0.2s ease;
    border-bottom: 1px solid var(--border-color); /* خط بين الصفوف */
}
.styled-table tbody tr:last-child {
     border-bottom: none; /* إزالة الخط من آخر صف */
}


.styled-table tbody tr:hover {
    background-color: rgba(var(--rgb-text-link, 58, 111, 255), 0.05);
}
body.dark-mode .styled-table tbody tr:hover {
     background-color: rgba(var(--rgb-link, 99, 179, 237), 0.08);
}


.styled-table td {
    padding: 12px 20px; /* تقليل الحشو الرأسي قليلاً */
    vertical-align: middle;
     transition: color 0.3s ease, border-color 0.3s ease;
}

.styled-table td img {
    max-width: 60px; /* تصغير الصورة أكثر */
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    display: block; /* لمنع مسافة إضافية تحت الصورة */
     transition: border-color 0.3s ease;
}

.styled-table .action-buttons a.btn-custom,
.styled-table .action-buttons button.btn-custom {
    padding: 6px 12px; /* أزرار أصغر في الجدول */
    font-size: 0.8rem;
    margin: 0 3px;
}
.styled-table .action-buttons a.btn-custom i,
.styled-table .action-buttons button.btn-custom i {
    margin: 0; /* لا مسافة إذا كانت أيقونة فقط */
}

/* تنسيق رسالة التحذير (عند عدم السماح بالإضافة) */
.add-restriction-warning {
  padding: 15px 20px;
  margin-bottom: 25px;
  border-radius: 12px;
  font-weight: 500;
  font-size: 1rem;
  border-left: 5px solid var(--color-warning);
  background-color: rgba(var(--rgb-warning, 221, 107, 32), 0.1); /* استخدام متغير أو قيمة RGB */
  color: var(--color-warning);
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.add-restriction-warning::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f071"; /* أيقونة exclamation-triangle */
    font-size: 1.3rem;
}
/* يجب إضافة --rgb-warning في :root و body.dark-mode */
/* :root { --rgb-warning: 221, 107, 32; } */
/* body.dark-mode { --rgb-warning-dark: 246, 173, 85; } */
/* body.dark-mode .add-restriction-warning { background-color: rgba(var(--rgb-warning-dark, 246, 173, 85), 0.15); } */


/* تنسيق حقل رفع الملفات ومعاينة الصورة */
.image-upload-group {
    position: relative;
    border: 2px dashed var(--border-color);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    background-color: var(--bg-tertiary);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
.image-upload-group:hover {
    background-color: var(--bg-secondary);
    border-color: var(--text-link);
}
.image-upload-group input[type="file"] {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; /* إخفاء الحقل الأصلي */
    cursor: pointer;
}
.image-upload-group .upload-icon {
    font-size: 2.5rem;
    color: var(--text-link);
    margin-bottom: 10px;
}
.image-upload-group .upload-text {
    color: var(--text-secondary);
    font-weight: 500;
}

.image-preview {
    max-width: 200px; /* عرض أقصى للمعاينة */
    max-height: 150px;
    height: auto;
    margin: 15px auto 0 auto; /* توسيط وعرض بعد الرفع */
    border-radius: 8px;
    border: 1px solid var(--border-color);
    display: none; /* يبدأ مخفياً */
    transition: border-color 0.3s ease;
}

/* تنسيق أزرار النسخ والفتح */
.link-actions {
    display: flex;
    gap: 10px;
    margin-top: 10px; /* مسافة فوق الأزرار */
}
.link-actions .btn-custom {
    flex-grow: 1; /* جعل الزرين يملآن المساحة */
    padding: 8px 15px; /* تقليل حشو الأزرار الصغيرة */
    font-size: 0.9rem;
}

/* رسالة الحالة لـ AJAX */
#networkFormMessage {
    /* استخدام نفس أنماط form-status-message */
    padding: 15px 20px; margin-top: 20px; margin-bottom: 20px;
    border-radius: 12px; font-weight: 500; font-size: 1rem;
    border-left: 5px solid; display: none; /* يبدأ مخفياً */
    align-items: center; gap: 10px;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
#networkFormMessage.success {
  background-color: rgba(var(--rgb-success, 56, 161, 105), 0.1); color: var(--color-success); border-left-color: var(--color-success);
}
#networkFormMessage.error {
  background-color: rgba(var(--rgb-danger, 229, 62, 62), 0.1); color: var(--color-danger); border-left-color: var(--color-danger);
}
/* ... (أضف أنماط الوضع الداكن للرسالة إذا لزم الأمر) ... */
#networkFormMessage::before { font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 1.3rem; }
#networkFormMessage.success::before { content: "\f058"; }
#networkFormMessage.error::before { content: "\f071"; }
#networkFormMessage.show { display: flex; } /* لإظهار الرسالة */

/* Responsive Table (تحسين) */
@media (max-width: 768px) {
    .styled-table-wrapper { border: none; background: none; }
    .styled-table thead { display: none; }
    .styled-table tr {
        display: block; margin-bottom: 15px; border-radius: 12px;
        background-color: var(--bg-secondary); border: 1px solid var(--border-color);
        box-shadow: var(--shadow-sm); padding: 10px; /* إضافة padding */
    }
    .styled-table tbody tr:hover { background-color: var(--bg-secondary); transform: none; box-shadow: var(--shadow-md);}
    .styled-table td {
        display: block; text-align: right; padding: 10px 5px;
        padding-right: 45%; position: relative; border-bottom: 1px dashed var(--border-color);
    }
    .styled-table td:last-child { border-bottom: none; }
    .styled-table td::before {
        content: attr(data-label); position: absolute; right: 15px; top: 50%;
        transform: translateY(-50%); width: 40%; padding-left: 10px; font-weight: 700;
        color: var(--text-primary); white-space: normal; /* السماح بالتفاف النص */ text-align: right; font-size: 0.85rem; /* تصغير الخط */
    }
    .styled-table td img { max-width: 50px; margin-top: 5px; }
    .styled-table .action-buttons { text-align: center; padding-top: 10px; }
    .styled-table .action-buttons a.btn-custom,
    .styled-table .action-buttons button.btn-custom { margin: 5px; width: auto; } /* تعديل عرض الأزرار */
}

/* --- (أضف هذا الكود في نهاية modern_style.css) --- */

/* --- Styling for Status Badges in Tables/Lists --- */
.status-badge { /* النمط الأساسي للشارة */
  display: inline-flex; /* استخدام flex لمحاذاة الأيقونة والنص */
  align-items: center;
  gap: 6px; /* مسافة بين الأيقونة والنص */
  font-size: 0.85rem; /* حجم خط مناسب */
  font-weight: 700; /* خط سميك */
  padding: 5px 12px; /* حشو داخلي */
  border-radius: 50px; /* حواف دائرية جداً (شكل حبة الدواء) */
  text-transform: uppercase; /* أحرف كبيرة (اختياري) */
  letter-spacing: 0.5px; /* تباعد أحرف طفيف */
  color: #fff; /* لون النص الافتراضي أبيض */
  background-color: var(--secondary-color, #6c757d); /* لون خلفية افتراضي */
}
.status-badge i { /* تنسيق الأيقونة داخل الشارة */
    font-size: 0.9em; /* حجم الأيقونة بالنسبة للنص */
}

/* حالة "مقبول" */
.status-badge.status-badge-approved {
  background-color: var(--color-success, #28a745);
  color: #fff;
}
/* يمكنك إضافة تنسيق خاص بالوضع الليلي إذا أردت تغيير الألوان */
/* body.dark-mode .status-badge.status-badge-approved { ... } */

/* حالة "مرفوض" */
.status-badge.status-badge-rejected {
  background-color: var(--color-danger, #dc3545);
  color: #fff;
}
/* body.dark-mode .status-badge.status-badge-rejected { ... } */

/* حالة "معلق" */
.status-badge.status-badge-pending {
  background-color: var(--color-warning, #ffc107);
  color: #212529; /* استخدام لون نص داكن للخلفية الصفراء */
}
body.dark-mode .status-badge.status-badge-pending {
   color: #343a40; /* تعديل طفيف للون النص في الوضع الداكن */
}

/* --- إزالة التنسيقات القديمة من خلايا الجدول (إذا كانت موجودة) --- */
/* هذا يضمن عدم تطبيق الألوان القديمة على الصف بأكمله */
.styled-table td.status-approved, .styled-table tr.status-approved,
.styled-table td.status-rejected, .styled-table tr.status-rejected,
.styled-table td.status-pending, .styled-table tr.status-pending {
    background-color: transparent !important;
    color: inherit !important; /* استخدام لون الخلية الافتراضي */
}
/* --- (أضف هذا الكود في نهاية modern_style.css) --- */

/* --- Styling for Input Groups --- */
.input-group { /* تنسيق مجموعة الإدخال (أيقونة + حقل) */
    display: flex;
    width: 100%;
    /* margin-top: 5px; */ /* الهامش العلوي يأتي من .form-group */
}
.input-group .input-group-text { /* تنسيق الأيقونة الجانبية */
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-left: none; /* إزالة الحد الأيسر (لـ RTL) */
    border-radius: 0 8px 8px 0; /* تدوير الحافة اليمنى لتطابق الحقل */
    color: var(--text-secondary);
    padding: 0 15px;
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
.input-group .form-control { /* تنسيق حقل الإدخال داخل المجموعة */
    border-radius: 8px 0 0 8px; /* تدوير الحافة اليسرى */
    margin-top: 0;
    border-left: 1px solid var(--border-color); /* إضافة الحد الأيسر */
}
/* حالة التركيز للمجموعة */
.input-group .form-control:focus {
    border-left-color: var(--text-link);
    position: relative; /* لضمان ظهور ظل التركيز */
    z-index: 2;
}
.input-group:focus-within .input-group-text { /* تنسيق الأيقونة عند التركيز على الحقل */
    border-color: var(--text-link);
    color: var(--text-link);
    background-color: var(--bg-secondary);
    border-left: none;
    border-right: 1px solid var(--text-link); /* تظليل الحد الأيمن أيضاً */
}

/* --- Styling for Webhook Box --- */
.webhook-box-styled {
  background-color: var(--bg-tertiary);
  border: 1px dashed var(--border-color);
  border-radius: 12px;
  padding: 20px 25px;
  margin-top: 25px;
  text-align: right;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.webhook-box-styled strong { /* التسمية */
    display: block;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 10px;
}
.webhook-box-styled .input-group { margin-top: 0; }
.webhook-box-styled input[readonly].form-control { /* حقل الرابط للقراءة فقط */
    background-color: var(--bg-secondary) !important;
    cursor: text; /* مؤشر النص للسماح بالتحديد */
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.95rem;
    direction: ltr;
    text-align: left;
    color: var(--text-primary);
}
.webhook-box-styled .input-group .btn-custom { /* زر النسخ */
     border-radius: 8px 0 0 8px; /* تدوير يسار الزر */
     height: auto;
     padding-top: 12px; /* يجب أن يتطابق مع حشو الحقل */
     padding-bottom: 12px;
     border-left: 1px solid var(--border-color);
     flex-shrink: 0; /* منع الزر من التقلص */
}
.webhook-box-styled .input-group .btn-custom i { margin: 0; }

/* --- Styling for JSON Example Box --- */
.json-example-box {
  --code-bg: #f0f3f7; /* لون خلفية الكود في الوضع النهاري */
  --code-text: #333; /* لون نص الكود */
  background-color: var(--code-bg);
  border: 1px solid var(--border-color);
  padding: 25px;
  padding-top: 50px; /* مساحة أكبر للعنوان والزر */
  border-radius: 12px;
  margin-top: 30px;
  font-family: 'Courier New', Courier, monospace;
  white-space: pre-wrap;
  word-wrap: break-word;
  color: var(--code-text);
  position: relative;
  text-align: left; /* محاذاة لليسار للكود */
  direction: ltr; /* اتجاه يسار لليمين للكود */
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
body.dark-mode .json-example-box {
    --code-bg: #2d3748;
    --code-text: #e2e8f0;
    border-color: #4a5568;
}

.json-example-box .json-label { /* التسمية "مثال JSON" */
    display: block;
    margin-bottom: 15px;
    font-size: 1rem;
    font-family: var(--font-family);
    color: var(--text-primary); /* استخدام لون النص الأساسي */
    position: absolute;
    top: 18px;
    right: 25px; /* لـ RTL */
    direction: rtl; /* إعادة الاتجاه للتسمية */
    font-weight: 600;
}
.json-example-box .copy-json-btn { /* زر نسخ JSON */
    position: absolute;
    top: 15px;
    left: 15px; /* لـ RTL */
    right: auto;
    /* يتم تطبيق أنماط .btn-custom عليه مباشرة في HTML */
    padding: 6px 10px; /* زر أصغر */
    font-size: 0.85rem;
}
.json-example-box .copy-json-btn i { margin: 0; }
.json-example-box pre { /* للحفاظ على التنسيق */
    margin: 0;
    font-family: inherit; /* وراثة خط الكود */
    font-size: 0.95rem; /* حجم مناسب للكود */
    line-height: 1.6;
}

/* --- SweetAlert2 Dark Mode (Basic Adjustments) --- */
body.dark-mode .swal2-popup {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color); /* إضافة حد */
}
body.dark-mode .swal2-title {
    color: var(--text-primary) !important;
}
body.dark-mode .swal2-html-container,
body.dark-mode .swal2-content { /* استهداف المحتوى أيضاً */
     color: var(--text-secondary) !important;
}
body.dark-mode .swal2-confirm,
body.dark-mode .swal2-cancel,
body.dark-mode .swal2-deny {
     border: none !important; /* إزالة الحدود الافتراضية */
     box-shadow: none !important;
}
body.dark-mode .swal2-confirm {
     background-color: var(--text-link) !important;
}
body.dark-mode .swal2-cancel {
     background-color: var(--secondary-color, #6c757d) !important;
}
body.dark-mode .swal2-loader { /* تغيير لون مؤشر التحميل */
     border-color: var(--text-link) transparent var(--text-link) transparent !important;
}
/* --- نهاية التعديلات --- */

/* --- (أضف هذا الكود في نهاية modern_style.css) --- */

/* --- Pagination Styling --- */
.pagination-nav { /* حاوية أزرار الترقيم */
    display: flex;
    justify-content: center; /* توسيط */
    align-items: center;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
    transition: border-color 0.3s ease;
}

.pagination { /* قائمة ul */
    display: flex;
    padding-left: 0; /* إزالة الحشو الافتراضي للقائمة */
    list-style: none; /* إزالة نقاط القائمة */
    border-radius: 10px; /* تدوير الحاوية */
    overflow: hidden; /* لإخفاء تجاوز الحدود المدورة */
    box-shadow: var(--shadow-sm);
}

.page-item { /* عنصر li */
    /* لا حاجة لتنسيق خاص هنا مع flex */
}

.page-link { /* الرابط أو الزر داخل li */
    position: relative;
    display: block;
    padding: 10px 15px; /* حشو الرابط */
    /* margin-right: -1px; */ /* لدمج الحدود (لأننا RTL، نستخدم right) - تم استبداله بـ border-left */
    line-height: 1.25;
    color: var(--text-link);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-left: none; /* إزالة الحد الأيسر لمنع التكرار (RTL) */
    text-decoration: none;
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    font-weight: 500;
    font-size: 0.95rem;
}
/* أول عنصر (يمين في RTL) */
.pagination > .page-item:first-child > .page-link {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    border-left: 1px solid var(--border-color); /* إضافة الحد */
}
/* آخر عنصر (يسار في RTL) */
.pagination > .page-item:last-child > .page-link {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.page-link:hover {
    z-index: 2;
    color: var(--text-link-hover);
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

.page-link:focus {
    z-index: 3;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(var(--rgb-link, 58, 111, 255), 0.25);
}
/* العنصر النشط */
.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: var(--text-link);
    border-color: var(--text-link);
}
/* العنصر المعطل */
.page-item.disabled .page-link {
    color: var(--text-secondary);
    pointer-events: none;
    cursor: auto;
    background-color: var(--bg-secondary);
    border-color: var(--border-color);
    opacity: 0.6;
}

/* --- Per Page Selector Styling --- */
.per-page-selector-form {
    display: flex;
    justify-content: flex-end; /* محاذاة لليسار (نهاية السطر في RTL) */
    align-items: center;
    gap: 10px;
    margin-bottom: 20px; /* مسافة قبل الجدول */
}
.per-page-selector-form label {
     font-weight: 600;
     color: var(--text-secondary);
     font-size: 0.95rem;
     margin-bottom: 0; /* إزالة الهامش السفلي */
}
.per-page-selector-form select {
     /* استخدام أنماط حقول الفورم */
     width: auto; /* عرض تلقائي */
     padding: 8px 25px 8px 12px; /* تعديل الحشو ليتناسب مع السهم */
     border-radius: 8px;
     border: 1px solid var(--border-color);
     background-color: var(--bg-secondary); /* استخدام لون الخلفية الثانوي */
     color: var(--text-primary);
     font-size: 0.95rem;
     cursor: pointer;
     transition: border-color 0.3s ease, background-color 0.3s ease;
     /* مظهر افتراضي للسهم */
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23aaa" d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>'); /* سهم بسيط */
     background-repeat: no-repeat;
     background-position: left 0.75rem center; /* لـ RTL */
     background-size: 8px 10px;
}
body.dark-mode .per-page-selector-form select {
     background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 5"><path fill="%23ccc" d="M2 0L0 2h4zm0 5L0 3h4z"/></svg>'); /* سهم أفتح */
}

.per-page-selector-form select:focus {
     outline: none;
     border-color: var(--text-link);
     box-shadow: 0 0 0 3px rgba(var(--rgb-link, 58, 111, 255), 0.2);
}
/* --- (تأكد من وجود هذه الأنماط أو أضفها/عدلها في modern_style.css) --- */

/* حاوية المحتوى الرئيسية (مثل content-container أو settings-container) */
.dashboard-section { /* يمكن استخدام اسم جديد أو إعادة استخدام info-box-styled */
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 25px 30px;
    margin-bottom: 30px; /* مسافة بين الأقسام */
    box-shadow: var(--shadow-sm);
     transition: background-color 0.3s ease, border-color 0.3s ease;
}
.dashboard-section h2 { /* عنوان القسم */
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 10px;
     transition: color 0.3s ease, border-color 0.3s ease;
}
.dashboard-section h2 i { /* أيقونة العنوان */
    color: var(--text-link);
    font-size: 1.3em; /* حجم بالنسبة لـ h2 */
}

/* تنسيق خاص لتاريخ الانتهاء الملون */
.expiry-date { font-weight: 600; }
.expiry-date.near-expiry { color: var(--color-warning); }
.expiry-date.expired { color: var(--color-danger); }
.expiry-date.far-expiry { color: var(--color-success); }

/* تنسيق رسالة الاستجابة لتجديد الاشتراك */
#renewResponseMessage {
     /* استخدام نفس أنماط form-status-message */
    padding: 15px 20px; margin-top: 20px; margin-bottom: 0; /* لا حاجة لهامش سفلي هنا */
    border-radius: 12px; font-weight: 500; font-size: 1rem;
    border-left: 5px solid; display: none; /* يبدأ مخفياً */
    align-items: center; gap: 10px;
    transition: all 0.3s ease; /* انتقال لكل شيء */
}
#renewResponseMessage.success {
  background-color: rgba(var(--rgb-success, 56, 161, 105), 0.1); color: var(--color-success); border-left-color: var(--color-success);
}
#renewResponseMessage.error {
  background-color: rgba(var(--rgb-danger, 229, 62, 62), 0.1); color: var(--color-danger); border-left-color: var(--color-danger);
}
/* ... (أضف أنماط الوضع الداكن للرسالة إذا لزم الأمر) ... */
#renewResponseMessage::before { font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 1.3rem; }
#renewResponseMessage.success::before { content: "\f058"; }
#renewResponseMessage.error::before { content: "\f071"; }
#renewResponseMessage.show { display: flex; } /* لإظهار الرسالة */
#renewResponseMessage .redirect-link { /* تنسيق رابط الشحن */
    color: var(--text-link);
    text-decoration: underline;
    font-weight: 600;
}


/* --- (تأكد من وجود أنماط .styled-form, .styled-table, .btn-custom, .status-badge وغيرها...) --- */
/* --- (تأكد من وجود هذا في modern_style.css) --- */

.styled-form input[type="text"],
.styled-form input[type="password"],
.styled-form input[type="email"],
.styled-form input[type="number"],
.styled-form input[type="tel"], /* التأكد من وجود هذا النوع */
.styled-form select,
.styled-form textarea {
    width: 100%;
    padding: 12px 15px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    font-size: 1rem;
    /* لا نضع margin-bottom هنا لأن form-group يعالجه */
    transition: border-color 0.3s ease, background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

/* أنماط التركيز (Focus) */
.styled-form input:focus,
.styled-form select:focus,
.styled-form textarea:focus {
    outline: none;
    border-color: var(--text-link);
    background-color: var(--bg-secondary);
    box-shadow: 0 0 0 3px rgba(var(--rgb-link, 58, 111, 255), 0.2);
}

/* تنسيق Label إذا لم تكن الأنماط العامة كافية */
 .styled-form label {
    display: block;
    text-align: right;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.95rem;
     transition: color var(--transition-speed) var(--transition-ease);
     display: flex; /* لمحاذاة الأيقونة والنص */
     align-items: center;
     gap: 8px; /* مسافة بين الأيقونة والنص */
}
 .styled-form label i { /* تنسيق الأيقونة داخل الـ label */
     color: var(--text-link); /* لون مميز للأيقونة */
     font-size: 1.1em; /* حجم الأيقونة */
 }
 /* --- (أضف/عدل في modern_style.css) --- */

/* تنسيق بطاقات الباقات */
.plan-card {
    /* يمكنك إعادة استخدام card-custom أو إنشاء جديد */
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 25px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* لدفع الزر للأسفل */
    height: 100%; /* لجعل البطاقات بنفس الارتفاع في الصف */
}

.plan-card.current-plan { /* تمييز الباقة الحالية */
    border-color: var(--color-success);
    box-shadow: 0 0 15px rgba(var(--rgb-success, 56, 161, 105), 0.3);
    position: relative;
    overflow: hidden;
}
.plan-card.current-plan::after { /* شريط "الحالية" */
    content: 'الباقة الحالية';
    position: absolute;
    top: 15px;
    right: -40px; /* لـ RTL */
    background-color: var(--color-success);
    color: white;
    padding: 5px 40px;
    font-size: 0.8rem;
    font-weight: bold;
    transform: rotate(-45deg);
    transform-origin: top right;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}


.plan-card:hover {
   transform: translateY(-5px);
   box-shadow: var(--shadow-md);
}

.plan-card h3 { /* اسم الباقة */
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-link);
    margin-bottom: 15px;
}

.plan-price { /* سعر الباقة */
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 10px;
}
.plan-price small { /* المدة بجانب السعر */
    font-size: 0.7em;
    font-weight: 500;
    color: var(--text-secondary);
}

.plan-features { /* قائمة الميزات */
    list-style: none;
    padding: 0;
    margin: 20px 0;
    text-align: right;
    color: var(--text-secondary);
}
.plan-features li {
    margin-bottom: 10px;
    padding-right: 25px; /* مسافة للأيقونة */
    position: relative;
}
.plan-features li i { /* أيقونة الميزة */
    color: var(--color-success);
    position: absolute;
    right: 0;
    top: 4px;
    font-size: 1.1em;
}

.plan-card .btn-custom {
    margin-top: auto; /* دفع الزر للأسفل */
}

/* حاوية الباقات (باستخدام Grid) */
.plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* أعمدة متجاوبة */
    gap: 30px;
    margin-top: 30px;
}

/* صندوق المعلومات الحالي */
.current-info-box {
     /* يمكن استخدام info-box-styled أو dashboard-section */
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px 25px;
    margin-bottom: 30px;
    display: flex;
    justify-content: space-around; /* توزيع العناصر */
    flex-wrap: wrap;
    gap: 15px;
}
.current-info-box div {
    text-align: center;
}
.current-info-box .info-label {
    display: block;
    font-weight: 600;
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 5px;
}
.current-info-box .info-value {
    font-weight: 700;
    font-size: 1.3rem;
    color: var(--text-primary);
}
.current-info-box .info-value.balance {
    color: var(--text-link);
}
/* --- (أضف/عدل في modern_style.css) --- */

.plan-features li {
    margin-bottom: 10px;
    padding-right: 25px; /* مسافة للأيقونة */
    position: relative;
    font-size: 0.95rem; /* حجم خط الميزات */
}
.plan-features li i { /* أيقونة الميزة */
    position: absolute;
    right: 0;
    top: 4px; /* ضبط المحاذاة الرأسية للأيقونة */
    font-size: 1.1em;
    width: 16px; /* تحديد عرض لتوحيد المسافة */
    text-align: center;
}
/* لون أيقونة الميزة المتاحة */
.plan-features li i.feature-available {
    color: var(--color-success);
}
/* لون أيقونة الميزة غير المتاحة */
.plan-features li i.feature-unavailable {
    color: var(--color-danger);
}
/* خط يتوسطه خط للميزة غير المتاحة (اختياري) */
.plan-features li.feature-unavailable-text {
     text-decoration: line-through;
     opacity: 0.7;
}

/* --- (تأكد من وجود هذه الأنماط أو أضفها/عدلها في modern_style.css) --- */

body {
    padding-top: 80px; /* إضافة حشو علوي لمنع المحتوى من الاختباء خلف الهيدر الثابت */
}

/* تنسيق الهيدر الثابت */
.sticky-header {
    position: fixed; /* تثبيت في الأعلى */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000; /* ليكون فوق العناصر الأخرى */
    background-color: var(--bg-secondary);
    box-shadow: var(--shadow-md);
    padding: 10px 0; /* حشو رأسي أقل للهيدر */
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.sticky-header .container { /* حاوية داخلية للهيدر */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* للسماح بالالتفاف في الشاشات الصغيرة */
    gap: 15px;
}
.sticky-header .logo img {
    max-height: 50px; /* تصغير الشعار في الهيدر */
    width: auto;
}
.sticky-header .header-actions { /* مجموعة الأزرار في الهيدر */
    display: flex;
    align-items: center;
    gap: 10px; /* مسافة بين الأزرار */
}
.sticky-header .theme-toggle-btn { /* زر تبديل الوضع في الهيدر */
    background: none; border: 1px solid var(--border-color); color: var(--icon-color);
    width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center;
    justify-content: center; cursor: pointer; font-size: 1rem; transition: all 0.3s ease;
}
.sticky-header .theme-toggle-btn:hover {
     background-color: var(--bg-tertiary); color: var(--text-link); transform: rotate(15deg);
}
.sticky-header .btn-custom { /* أزرار الهيدر */
    padding: 8px 18px; /* حشو أصغر */
    font-size: 0.9rem;
}

/* قسم Hero */
.hero-section {
    padding: 100px 0 80px 0; /* حشو كبير */
    text-align: center;
    background: linear-gradient(135deg, rgba(var(--rgb-link, 58, 111, 255), 0.8), rgba(var(--rgb-purple, 128, 90, 213), 0.8)), url('img/background-image.png') no-repeat center center/cover; /* مثال لخلفية مع تدرج فوقها - استبدل بالصورة أو التدرج المناسب */
    color: #fff; /* لون نص فاتح على الخلفية الداكنة */
    border-bottom: 5px solid var(--primary-color); /* خط سفلي مميز */
    margin-bottom: 50px; /* مسافة بعد القسم */
}
body.dark-mode .hero-section {
     background: linear-gradient(135deg, rgba(var(--rgb-link-dark, 99, 179, 237), 0.7), rgba(var(--rgb-purple-dark, 183, 148, 244), 0.7)), url('img/background-image.png') no-repeat center center/cover;
     border-bottom-color: var(--primary-color);
}

.hero-section h1 {
    font-size: 3.5rem; /* عنوان كبير جداً */
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.3);
}
.hero-section p {
    font-size: 1.3rem;
    margin-bottom: 40px;
    max-width: 700px; /* تحديد عرض للنص */
    margin-left: auto;
    margin-right: auto;
    opacity: 0.9;
}
.hero-section .btn-custom { /* أزرار الـ CTA */
    padding: 15px 35px;
    font-size: 1.1rem;
    margin: 0 10px;
}

/* قسم الخطط */
.plans-section {
    padding: 50px 0;
}
.plans-section .section-title { /* عنوان قسم الخطط */
    text-align: center;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 50px;
    position: relative;
}
/* خط سفلي للعنوان */
.plans-section .section-title::after {
    content: '';
    display: block;
    width: 80px;
    height: 4px;
    background-color: var(--primary-color);
    margin: 15px auto 0;
    border-radius: 2px;
}

/* قسم الميزات (اختياري) */
.features-section {
     padding: 60px 0;
     background-color: var(--bg-tertiary); /* خلفية مختلفة قليلاً */
}
.features-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 30px;
}
.feature-item {
     text-align: center;
     padding: 20px;
}
.feature-item .feature-icon {
     font-size: 3rem;
     color: var(--primary-color);
     margin-bottom: 20px;
     display: inline-block;
     transition: transform 0.3s ease;
}
.feature-item:hover .feature-icon {
     transform: scale(1.1) rotate(5deg);
}
.feature-item h4 {
     font-size: 1.3rem;
     font-weight: 600;
     color: var(--text-primary);
     margin-bottom: 10px;
}
.feature-item p {
     color: var(--text-secondary);
     font-size: 0.95rem;
     line-height: 1.7;
}

/* الفوتر */
.main-footer {
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    padding: 40px 0 20px 0;
    margin-top: 50px;
    border-top: 1px solid var(--border-color);
    text-align: center;
     transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.main-footer .footer-contact a { /* تنسيق رابط الهاتف في الفوتر */
    display: inline-block;
    margin-top: 10px;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}
.main-footer .footer-contact a:hover {
    color: var(--text-link-hover);
}
.main-footer .footer-contact i {
    margin-left: 8px;
}
.main-footer .copyright {
    margin-top: 20px;
    font-size: 0.9rem;
    opacity: 0.8;
}

/* تعديلات للمتغيرات لتكون موجودة */
:root {
    /* ... باقي المتغيرات ... */
    --rgb-link: 58, 111, 255; /* أزرق Bootstrap */
    --rgb-purple: 128, 90, 213; /* بنفسجي مقترح */
    --rgb-success: 56, 161, 105;
    --rgb-danger: 229, 62, 62;
    --rgb-warning: 221, 107, 32;
    --code-bg: #f0f3f7;
    --code-text: #333;
}
body.dark-mode {
     /* ... باقي المتغيرات ... */
     --rgb-link-dark: 99, 179, 237; /* سماوي */
     --rgb-purple-dark: 183, 148, 244; /* بنفسجي أفتح */
     --rgb-success-dark: 104, 211, 145;
     --rgb-danger-dark: 252, 129, 129;
     --rgb-warning-dark: 246, 173, 85;
     --code-bg: #2d3748;
     --code-text: #e2e8f0;
}