/* ==================== مكونات واجهة بنك أسئلة اللغة الإنجليزية ==================== */
/* مصمم لطلاب الصف الخامس في مدرسة رقية بنت الرسول، الأردن */
/* إصدار ٣.٠ - ٢٠٢٥/٠٣/٢٨ - نظام تعليمي مجاني */
/* يتطلب استيراد variables.css أولاً */

/* ==================== قواعد مركزية مشتركة ==================== */
/* تعريف قواعد مشتركة للمكونات المختلفة لتقليل التكرار */
:root {
  /* إضافة متغيرات مشتقة لتحسين إعادة الاستخدام والاتساق */
  --icon-base-size: 3rem;
  --icon-base-radius: var(--radius-circle);
  --component-transition: all var(--transition-base);
  --hover-transform-small: translateY(-0.125rem);
  --hover-transform-medium: translateY(-0.3125rem);
  --standard-gap: var(--space-md);
}

.icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--icon-base-radius);
  transition: var(--component-transition);
}

/* تحسين استجابة المكونات للتفضيلات الحركية */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01s !important;
    scroll-behavior: auto !important;
  }
}

/* ==================== مكون الشخصية المساعدة ==================== */
.mascot-container {
  position: relative;
  text-align: center;
  margin-block: var(--space-md);
}

.mascot-icon {
  font-size: 3.75rem;
  background-color: var(--bg-primary);
  width: 5rem;
  height: 5rem;
  margin-inline: auto;
  color: var(--primary-color);
  box-shadow: var(--shadow-md);
  transition: var(--component-transition);
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform; /* تحسين الأداء للعناصر المتحركة */
}

/* استخدام خصائص CSS المختصرة والمجمعة */
.mascot-icon.happy { color: var(--primary-color); }
.mascot-icon.studying { color: var(--secondary-color); }
.mascot-icon.thinking { color: var(--accent-color); }
.mascot-icon.celebration { color: var(--error-color); }
.mascot-icon.excited { color: var(--speaking-color); }
.mascot-icon.pointing { color: var(--writing-color); }

.mascot-speech {
  position: relative;
  background-color: var(--bg-primary);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-md);
  box-shadow: var(--shadow-sm);
  max-width: 12.5rem;
  margin-inline: auto;
  opacity: 1;
  transition: opacity var(--transition-fast);
}

.mascot-speech:after {
  content: '';
  position: absolute;
  top: -0.625rem;
  inset-inline-start: 50%; /* استخدام خاصية منطقية بدلاً من left لدعم RTL */
  transform: translateX(-50%);
  border-width: 0 0.625rem 0.625rem 0.625rem;
  border-style: solid;
  border-color: transparent transparent var(--bg-primary) transparent;
}

/* ==================== مكونات الرسوم التوضيحية ==================== */
/* تحسين باستخدام نهج البناء التكويني (Composition over Inheritance) */
.illustration-container {
  text-align: center;
  margin-block: var(--space-lg);
}

.illustration-icon {
  font-size: 7.5rem;
  color: var(--primary-color);
  margin: var(--space-lg) auto;
  text-align: center;
  display: block;
}

/* تجميع القواعد المشتركة للرسوم التوضيحية */
.help-illustration i,
.challenge-illustration i,
.welcome-illustration i {
  font-size: 6.25rem;
  color: var(--primary-color);
  background-color: var(--bg-secondary);
  width: 9.375rem;
  height: 9.375rem;
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline: auto;
  box-shadow: var(--shadow-md);
  transition: var(--component-transition);
}

/* استخدام :is() لتقليل تكرار الكود */
:is(.help-illustration, .challenge-illustration, .welcome-illustration) {
  text-align: center;
  margin-block: var(--space-lg);
}

:is(.help-illustration, .challenge-illustration, .welcome-illustration) i:hover {
  transform: scale(1.05);
  box-shadow: var(--shadow-lg);
}

/* ==================== مكونات الشارات والأيقونات ==================== */
/* تنسيق موحد للأيقونات باستخدام CSS Custom Properties لتقليل التكرار */
.badge-icon,
.avatar,
.reward-icon,
.achievement-icon {
  --icon-size: 5rem;
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--space-md);
  color: var(--primary-color);
  box-shadow: var(--shadow-sm);
  background-color: var(--bg-secondary);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50%;
  transition: var(--component-transition);
}

/* تفعيل تأثيرات التحويم بشكل موحد */
:is(.badge-icon, .avatar, .reward-icon, .achievement-icon):hover {
  transform: var(--hover-transform-small);
  box-shadow: var(--shadow-md);
}

/* تخصيص المتغيرات للأحجام المختلفة */
.badge-icon {
  --icon-size: 5rem;
  font-size: 2.25rem;
  background-image: var(--icon-badge-url, url('../img/icons/icons-set.svg'));
}

.avatar {
  --icon-size: 2.5rem;
  background-color: var(--primary-color);
  color: var(--text-on-primary);
  font-size: var(--fs-xs);
  border: 0.125rem solid var(--white);
  background-image: var(--icon-avatar-url, url('../img/icons/school-logo.svg'));
  background-size: 75%;
}

.reward-item .reward-image {
  --icon-size: 6.25rem;
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md);
  background-image: var(--icon-reward-url, url('../img/icons/icons-set.svg'));
  background-size: 60%;
}

.reward-item .reward-image i {
  font-size: 3.125rem;
  color: var(--primary-color);
  display: none; /* إخفاء الأيقونة واستخدام SVG كخلفية بدلاً منها */
}

/* ==================== مكونات الرسوم المتحركة ==================== */
/* تحسين أداء الرسوم المتحركة باستخدام will-change والتحكم في تغييرات GPU */
.animation-container {
  will-change: transform;
  transform: translateZ(0); /* تحفيز استخدام GPU للعناصر المتحركة */
}

.loader-character {
  text-align: center;
  margin-bottom: var(--space-lg);
}

.loader-character i {
  font-size: 5rem;
  color: var(--primary-color);
  animation: var(--animation-bounce);
}

.reward-animation .reward-mascot {
  text-align: center;
  margin-block: var(--space-md);
}

.reward-animation .reward-mascot i {
  font-size: 4.375rem;
  color: var(--error-color);
  animation: var(--animation-pulse);
}

/* تحسين أداء الرسوم المتحركة للنجوم باستخدام GPU */
.stars-container {
  position: relative;
  height: 6.25rem;
  margin-bottom: var(--space-lg);
  overflow: hidden;
  contain: layout; /* تحسين الأداء عبر عزل التأثيرات */
}

.star {
  position: absolute;
  width: 1.875rem;
  height: 1.875rem;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: transform, opacity; /* إخبار المتصفح بالتغييرات المتوقعة */
}

/* استخدام خصائص محددة وتوليد قواعد ديناميكية للنجوم */
.star:nth-child(1) {
  top: 1.25rem;
  inset-inline-start: 20%;
  animation: twinkle 2s infinite;
}

.star:nth-child(2) {
  top: 2.5rem;
  inset-inline-start: 50%;
  animation: twinkle 2.5s infinite;
}

.star:nth-child(3) {
  top: 0.625rem;
  inset-inline-start: 80%;
  animation: twinkle 1.8s infinite;
}

.star:before {
  content: '';
  width: 1.5rem;
  height: 1.5rem;
  background-image: var(--icon-star-url, url('../img/icons/icons-set.svg#star'));
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

@keyframes twinkle {
  0% { opacity: 0; transform: scale(0.5) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.2) rotate(180deg); }
  100% { opacity: 0; transform: scale(0.5) rotate(360deg); }
}

/* ==================== مكونات العلم الأردني ==================== */
.jordan-flag {
  position: relative;
  width: 1.875rem;
  height: 1.25rem;
  background: linear-gradient(to bottom,
      var(--jordan-black) 33%,
      var(--jordan-white) 33%, var(--jordan-white) 66%,
      var(--jordan-green) 66%);
  display: inline-block;
  margin-inline-start: var(--space-sm);
  border-radius: 0.1875rem;
  box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.2);
}

.jordan-flag:before {
  content: '';
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  height: 100%;
  width: 33%;
  background-color: var(--jordan-red);
  clip-path: polygon(0 0, 50% 50%, 0 100%);
}

/* ==================== مكونات النوافذ المنبثقة ==================== */
/* تحسين باستخدام backdrop-filter وتنسيق متناسق */
.modal {
  position: fixed;
  inset: 0; /* استخدام inset كبديل لـ top, right, bottom, left */
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(0.3125rem);
  -webkit-backdrop-filter: blur(0.3125rem);
  display: grid; /* استخدام Grid بدلاً من Flexbox للتركيز */
  place-items: center; /* تبسيط محاذاة المركز */
  z-index: var(--z-modal);
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-base);
  overscroll-behavior: contain; /* منع تمرير الصفحة الأساسية */
}

.modal.show {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  background-color: var(--bg-primary);
  background-image: radial-gradient(circle at top right, rgba(76, 110, 245, 0.05), transparent 70%);
  border-radius: var(--radius-lg);
  width: min(90%, 37.5rem); /* استخدام min() للاستجابة التلقائية بدون media queries */
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--shadow-xl);
  transform: scale(0.9);
  transition: transform var(--transition-base);
  scrollbar-width: thin;
  scrollbar-color: var(--gray-300) transparent;
  display: flex;
  flex-direction: column;
}

.modal-content::-webkit-scrollbar {
  width: 0.375rem;
}

.modal-content::-webkit-scrollbar-track {
  background-color: transparent;
}

.modal-content::-webkit-scrollbar-thumb {
  background-color: var(--gray-300);
  border-radius: var(--radius-pill);
}

.modal.show .modal-content {
  transform: scale(1);
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-lg);
  border-bottom: 0.0625rem solid var(--gray-200);
  position: sticky;
  top: 0;
  background-color: var(--bg-primary);
  z-index: var(--z-sticky);
  backdrop-filter: blur(0.625rem);
  -webkit-backdrop-filter: blur(0.625rem);
}

.modal-header h3 {
  color: var(--primary-dark);
  margin-bottom: 0;
  display: flex;
  align-items: center;
}

.modal-header h3 i {
  margin-inline-end: var(--space-sm);
  color: var(--primary-color);
  font-size: 1.2em;
}

.close-btn {
  width: 1.875rem;
  height: 1.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-secondary);
  border-radius: var(--radius-circle);
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  position: relative;
  z-index: 1;
  border: none;
  cursor: pointer;
}

.close-btn:hover {
  background-color: var(--gray-200);
  color: var(--error-color);
  transform: rotate(90deg);
}

/* تحسين إمكانية الوصول للزر إغلاق النافذة */
.close-btn:focus-visible {
  outline: 0.125rem solid var(--primary-color);
  outline-offset: 0.125rem;
}

.modal-body {
  padding: var(--space-lg);
  flex: 1; /* يتيح للمحتوى النمو ليملأ المساحة المتاحة */
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--standard-gap);
  padding: var(--space-md) var(--space-lg);
  border-top: 0.0625rem solid var(--gray-200);
  position: sticky;
  bottom: 0;
  background-color: var(--bg-primary);
  backdrop-filter: blur(0.625rem);
  -webkit-backdrop-filter: blur(0.625rem);
}

/* ==================== مكونات علامات التبويب ==================== */
/* تحسين استخدام Flexbox مع gap لتبسيط الكود */
.tabs, .tab-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.tab, .tab-btn {
  padding: var(--space-sm) var(--space-md);
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--text-secondary);
  border: 0.0625rem solid transparent;
  user-select: none; /* تحسين تجربة المستخدم */
}

.tab i, .tab-btn i {
  font-size: var(--fs-md);
}

.tab.active, .tab-btn.active {
  background-color: var(--primary-color);
  color: var(--text-on-primary);
}

.tab:hover, .tab-btn:hover {
  background-color: var(--gray-200);
  transform: var(--hover-transform-small);
}

.tab.active:hover, .tab-btn.active:hover {
  background-color: var(--primary-dark);
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
  animation: fadeIn var(--transition-base);
}

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

/* ==================== مكونات الإشعارات ==================== */
.notification-area {
  position: fixed;
  bottom: var(--space-lg);
  inset-inline-end: var(--space-lg);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: min(21.875rem, 80vw); /* استخدام min() للاستجابة */
  width: 100%;
  pointer-events: none;
}

.notification {
  display: flex;
  align-items: center;
  padding: var(--space-md) var(--space-lg);
  background-color: var(--bg-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  border-inline-start: 0.25rem solid var(--primary-color); /* استخدام خاصية منطقية */
  transform: translateX(120%);
  opacity: 0;
  transition: all var(--transition-base);
  pointer-events: auto;
  backdrop-filter: blur(0.3125rem);
  -webkit-backdrop-filter: blur(0.3125rem);
}

.notification.show {
  transform: translateX(0);
  opacity: 1;
}

.notification i {
  margin-inline-end: var(--space-md);
  font-size: var(--fs-lg);
}

/* استخدام CSS Custom Properties لتوحيد الألوان */
/* تبسيط تعريفات الألوان مع الحفاظ على الوظائف */
.notification {
  --notification-color: var(--primary-color);
}

.notification.success {
  --notification-color: var(--success-color);
}

.notification.error {
  --notification-color: var(--error-color);
}

.notification.warning {
  --notification-color: var(--warning-color);
}

.notification.info {
  --notification-color: var(--info-color);
}

.notification {
  border-inline-start-color: var(--notification-color);
}

.notification i {
  color: var(--notification-color);
}

.notification-message {
  flex: 1;
  margin-inline-end: var(--space-md);
  font-size: var(--fs-sm);
}

.notification-close {
  color: var(--text-secondary);
  transition: color var(--transition-fast);
  background: none;
  border: none;
  font-size: var(--fs-lg);
  cursor: pointer;
}

.notification-close:hover {
  color: var(--text-primary);
  animation: spin 0.3s;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(90deg); }
}

/* ==================== مكونات الأزرار المختلفة ==================== */
/* CSS Component Pattern للأزرار */
.btn {
  --btn-bg: var(--bg-secondary);
  --btn-color: var(--text-primary);
  --btn-border: transparent;
  --btn-shadow: var(--shadow-sm);
  --btn-hover-bg: var(--gray-300);
  --btn-hover-color: var(--text-primary);
  --btn-hover-border: transparent;
  --btn-hover-shadow: var(--shadow-md);
  --btn-hover-transform: var(--hover-transform-small);
  
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-md);
  font-weight: 600;
  transition: all var(--transition-fast);
  text-align: center;
  cursor: pointer;
  gap: var(--space-sm);
  background-color: var(--btn-bg);
  color: var(--btn-color);
  border: 0.0625rem solid var(--btn-border);
  box-shadow: var(--btn-shadow);
  position: relative;
  overflow: hidden;
}

.btn i {
  font-size: 1.1em;
}

/* تأثير الريبل للأزرار */
.btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
  z-index: 0;
}

.btn:active::after {
  width: 200%;
  height: 200%;
}

.btn > * {
  position: relative;
  z-index: 1;
}

.btn:hover, .btn:focus-visible {
  background-color: var(--btn-hover-bg);
  color: var(--btn-hover-color);
  border-color: var(--btn-hover-border);
  box-shadow: var(--btn-hover-shadow);
  transform: var(--btn-hover-transform);
}

/* تعريف متغيرات للأزرار المختلفة */
.primary-btn {
  --btn-bg: var(--primary-color);
  --btn-color: var(--text-on-primary);
  --btn-hover-bg: var(--primary-dark);
  --btn-hover-color: var(--text-on-primary);
  --btn-hover-shadow: var(--shadow-primary);
}

.secondary-btn {
  --btn-bg: var(--gray-200);
  --btn-hover-bg: var(--gray-300);
}

.text-btn {
  --btn-bg: transparent;
  --btn-color: var(--primary-color);
  --btn-shadow: none;
  --btn-hover-bg: transparent;
  --btn-hover-color: var(--primary-dark);
  --btn-hover-shadow: none;
  --btn-hover-transform: none;
  padding: var(--space-xs) var(--space-sm);
}

.text-btn:hover {
  text-decoration: underline;
}

.icon-btn {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle);
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--text-secondary);
  font-size: var(--fs-md);
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
  border: none;
  cursor: pointer;
}

.icon-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s, height 0.5s;
}

.icon-btn:hover::before {
  width: 150%;
  height: 150%;
}

.icon-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
  transform: var(--hover-transform-small);
}

.icon-btn i {
  position: relative;
  z-index: 1;
}

.danger-btn {
  --btn-bg: var(--error-color);
  --btn-color: var(--text-on-primary);
  --btn-hover-bg: var(--accent-dark);
  --btn-hover-color: var(--text-on-primary);
  --btn-hover-shadow: var(--shadow-md);
}

/* تحسين إمكانية الوصول للأزرار */
.btn:focus-visible,
.icon-btn:focus-visible {
  outline: 0.125rem solid var(--primary-color);
  outline-offset: 0.125rem;
}

/* ==================== فئات الحالة والتفاعل ==================== */
.badge {
  --badge-bg: var(--primary-light);
  --badge-color: var(--text-on-primary);
  
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-sm);
  height: 1.25rem;
  font-size: var(--fs-xs);
  border-radius: var(--radius-pill);
  font-weight: bold;
  background-color: var(--badge-bg);
  color: var(--badge-color);
}

/* تبسيط تعريفات الشارات باستخدام CSS Custom Properties */
.badge.success { --badge-bg: var(--success-color); }
.badge.error { --badge-bg: var(--error-color); }
.badge.warning { --badge-bg: var(--warning-color); }
.badge.info { --badge-bg: var(--info-color); }

.badge.new {
  --badge-bg: var(--primary-light);
  animation: var(--animation-pulse);
}

.badge.hot {
  --badge-bg: var(--error-color);
  animation: var(--animation-pulse);
}

/* ==================== مكونات التبديل والتحكم ==================== */
.switch {
  position: relative;
  display: inline-block;
  width: 2.5rem;
  height: 1.25rem;
  user-select: none;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  inset: 0; /* استخدام inset بدلاً من top, left, right, bottom */
  background-color: var(--gray-300);
  transition: var(--transition-base);
  border-radius: 2.125rem;
}

.slider:before {
  position: absolute;
  content: "";
  height: 1rem;
  width: 1rem;
  inset-inline-start: 0.125rem; /* استخدام خاصية منطقية بدلاً من left */
  bottom: 0.125rem;
  background-color: var(--white);
  transition: var(--transition-base);
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--primary-color);
}

input:checked + .slider:before {
  transform: translateX(1.25rem);
}

.switch.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/* تحسين إمكانية الوصول لمفاتيح التبديل */
input:focus-visible + .slider {
  box-shadow: 0 0 0 0.125rem var(--primary-color);
}

/* ==================== مكونات التقدم ==================== */
.progress-bar-container {
  height: 0.625rem;
  background-color: var(--gray-200);
  border-radius: var(--radius-pill);
  overflow: hidden;
  margin-bottom: var(--space-xxs);
  box-shadow: var(--shadow-inner);
  position: relative; /* للنص النسبي */
}

.progress-bar {
  height: 100%;
  background-color: var(--primary-color);
  background-image: linear-gradient(to left, var(--primary-color), var(--primary-light));
  border-radius: var(--radius-pill);
  transition: width var(--transition-slow);
  position: relative;
  overflow: hidden;
  min-width: 0.5rem; /* لضمان الرؤية حتى عند 0% */
}

.progress-bar::after {
  content: '';
  position: absolute;
  inset: 0; /* استخدام inset بدلاً من top, left, right, bottom */
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.1) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.1) 50%,
    rgba(255, 255, 255, 0.1) 75%,
    transparent 75%
  );
  background-size: 0.9375rem 0.9375rem;
  animation: progressStripes 1s linear infinite;
}

/* إضافة نسبة للشريط (اختياري) */
.progress-bar-container.with-label::before {
  content: attr(data-progress);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.7rem;
  color: var(--text-on-primary);
  z-index: 1;
  font-weight: bold;
  text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}

@keyframes progressStripes {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0.9375rem 0;
  }
}

/* ==================== مكونات القائمة ==================== */
.list-item {
  display: flex;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
  transition: all var(--transition-fast);
  background-color: var(--bg-secondary);
}

.list-item:hover {
  background-color: var(--gray-100);
  transform: var(--hover-transform-small);
  box-shadow: var(--shadow-sm);
}

.list-item-icon {
  margin-inline-end: var(--space-md);
  color: var(--primary-color);
  font-size: var(--fs-lg);
}

.list-item-content {
  flex: 1;
}

.list-item-title {
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.125rem;
}

.list-item-description {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-bottom: 0;
}

/* استخدام CSS Grid للقوائم المعقدة */
.list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

/* ==================== مكونات البطاقات ==================== */
.card {
  --card-padding: var(--space-lg);
  background-color: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--card-padding);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-lg);
  transition: var(--component-transition);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  border: 0.0625rem solid var(--gray-200);
}

.card:hover {
  transform: var(--hover-transform-medium);
  box-shadow: var(--shadow-lg);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 0.0625rem solid var(--gray-200);
}

.card-title {
  font-size: var(--fs-lg);
  color: var(--text-primary);
  margin-bottom: 0;
  display: flex;
  align-items: center;
}

.card-title i {
  margin-inline-end: var(--space-sm);
  color: var(--primary-color);
}

.card-body {
  margin-bottom: var(--space-md);
  flex: 1;
}

.card-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 0.0625rem solid var(--gray-200);
  margin-top: auto; /* ضمان أن الفوتر دائماً في الأسفل */
}

/* تنويعات البطاقات */
.card.flat {
  box-shadow: none;
  border: 0.0625rem solid var(--gray-200);
}

.card.no-padding {
  --card-padding: 0;
}

.card.no-padding .card-header,
.card.no-padding .card-footer {
  padding-inline: var(--space-lg);
}

.card.no-padding .card-body {
  padding: 0 var(--space-lg) var(--space-md);
}

/* ==================== مكونات قائمة الأسئلة الشائعة ==================== */
.faq-item {
  margin-bottom: var(--space-md);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--component-transition);
}

.faq-item:hover {
  box-shadow: var(--shadow-md);
}

.faq-question {
  padding: var(--space-md);
  background-color: var(--bg-secondary);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all var(--transition-fast);
}

.faq-question:hover {
  background-color: var(--gray-200);
}

.faq-question i {
  transition: transform var(--transition-fast);
}

.faq-question.active i {
  transform: rotate(180deg);
}

.faq-answer {
  background-color: var(--bg-primary);
  padding: 0 var(--space-md);
  max-height: 0;
  overflow: hidden;
  transition: all var(--transition-base);
}

.faq-question.active + .faq-answer {
  padding: var(--space-md);
  max-height: 18.75rem;
}

/* ==================== مكونات النماذج والحقول ==================== */
.form-group {
  margin-bottom: var(--space-md);
}

.form-group label {
  display: block;
  margin-bottom: var(--space-xs);
  font-weight: 500;
  color: var(--text-primary);
}

.form-control {
  width: 100%;
  padding: var(--space-sm);
  font-size: var(--fs-base);
  border: 0.0625rem solid var(--gray-300);
  border-radius: var(--radius-md);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-control:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.1875rem rgba(76, 110, 245, 0.1);
  outline: none;
}

/* تحسين إمكانية الوصول لعناصر النموذج */
.form-control:focus-visible {
  outline: 0.125rem solid var(--primary-color);
  outline-offset: 0.125rem;
}

/* تحسين نمط Select */
.select-wrapper {
  position: relative;
}

.select-wrapper select {
  appearance: none;
  width: 100%;
  padding: var(--space-md);
  border: 0.0625rem solid var(--gray-300);
  border-radius: var(--radius-md);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  /* اضافة مسافة للأيقونة */
  padding-inline-start: 2rem;
}

.select-wrapper select:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.1875rem rgba(76, 110, 245, 0.1);
  outline: none;
}

.select-wrapper::after {
  content: '';
  position: absolute;
  inset-inline-end: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  border-width: 0.3125rem;
  border-style: solid;
  border-color: var(--text-secondary) transparent transparent transparent;
  pointer-events: none;
}

.select-wrapper:hover::after {
  border-color: var(--primary-color) transparent transparent transparent;
}

/* تبسيط التنسيق للاختيار الفاخر */
.select-wrapper.fancy-select {
  background-color: var(--bg-primary);
  border: 0.125rem solid var(--gray-300);
  border-radius: var(--radius-md);
  transition: all var(--transition-fast);
  position: relative;
  z-index: 1;
}

.select-wrapper.fancy-select:hover {
  border-color: var(--primary-light);
}

.select-wrapper.fancy-select:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.1875rem rgba(76, 110, 245, 0.1);
}

.select-wrapper.fancy-select::before {
  content: '';
  position: absolute;
  bottom: -0.3125rem;
  inset-inline-end: 0.625rem;
  width: calc(100% - 1.25rem);
  height: 0.625rem;
  background-color: rgba(0, 0, 0, 0.03);
  border-radius: 50%;
  filter: blur(0.1875rem);
  z-index: 0;
  transition: opacity var(--transition-fast);
}

.select-wrapper.fancy-select:hover::before {
  opacity: 0.8;
}

.select-wrapper.fancy-select select {
  border: none;
  background-color: transparent;
  position: relative;
  z-index: 2;
}

.select-icon {
  position: absolute;
  inset-inline-start: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-600);
  pointer-events: none;
  z-index: 2;
  transition: transform var(--transition-fast);
}

.select-wrapper:hover .select-icon {
  transform: translateY(-50%) rotate(-90deg);
  color: var(--primary-color);
}

/* ==================== مكونات القائمة المنسدلة ==================== */
.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.dropdown-toggle i {
  transition: transform var(--transition-fast);
}

.dropdown.active .dropdown-toggle i {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  width: 12.5rem;
  background-color: var(--bg-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-sm) 0;
  visibility: hidden;
  opacity: 0;
  transform: translateY(0.625rem);
  transition: all var(--transition-fast);
  z-index: var(--z-dropdown);
}

.dropdown.active .dropdown-menu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0.3125rem);
}

.dropdown-item {
  display: flex;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  color: var(--text-primary);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.dropdown-item:hover {
  background-color: var(--gray-100);
  color: var(--primary-color);
}

.dropdown-item i {
  margin-inline-end: var(--space-sm);
  color: var(--text-secondary);
}

.dropdown-item:hover i {
  color: var(--primary-color);
}

.dropdown-divider {
  height: 0.0625rem;
  background-color: var(--gray-200);
  margin: var(--space-xs) 0;
}

/* ==================== مكونات التلميحات ==================== */
.tooltip-container {
  position: relative;
  display: inline-block;
}

.tooltip {
  position: absolute;
  bottom: -2.5rem;
  inset-inline-end: 50%;
  transform: translateX(50%);
  background-color: var(--gray-800);
  color: var(--white);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all var(--transition-fast);
  z-index: var(--z-tooltip);
  pointer-events: none;
  box-shadow: var(--shadow-md);
}

.tooltip::after {
  content: '';
  position: absolute;
  top: -0.3125rem;
  inset-inline-end: 50%;
  transform: translateX(50%);
  border-width: 0 0.3125rem 0.3125rem 0.3125rem;
  border-style: solid;
  border-color: transparent transparent var(--gray-800) transparent;
}

.tooltip-container:hover .tooltip {
  opacity: 1;
  visibility: visible;
  bottom: -2.1875rem;
}

/* تبسيط تنسيقات التلميحات المختلفة باستخدام CSS Custom Properties */
.tooltip {
  --tooltip-translate: translateY(0);
  --tooltip-rotate: rotate(0);
  --tooltip-arrow-top: -0.3125rem;
  --tooltip-arrow-left: auto;
  --tooltip-arrow-right: 50%;
  --tooltip-arrow-bottom: auto;
  --tooltip-arrow-transform: translateX(50%);
  --tooltip-arrow-border: 0 0.3125rem 0.3125rem 0.3125rem;
  --tooltip-arrow-color: transparent transparent var(--gray-800) transparent;
}

.tooltip-container:hover .tooltip {
  transform: var(--tooltip-translate);
}

.tooltip::after {
  top: var(--tooltip-arrow-top);
  left: var(--tooltip-arrow-left);
  right: var(--tooltip-arrow-right);
  bottom: var(--tooltip-arrow-bottom);
  transform: var(--tooltip-arrow-transform);
  border-width: var(--tooltip-arrow-border);
  border-color: var(--tooltip-arrow-color);
  transform: var(--tooltip-arrow-transform) var(--tooltip-rotate);
}

.tooltip.tooltip-top {
  --tooltip-translate: translateY(0);
  bottom: auto;
  top: -2.1875rem;
  --tooltip-arrow-top: auto;
  --tooltip-arrow-bottom: -0.3125rem;
  --tooltip-arrow-border: 0.3125rem 0.3125rem 0 0.3125rem;
  --tooltip-arrow-color: var(--gray-800) transparent transparent transparent;
}

.tooltip.tooltip-right {
  --tooltip-translate: translateY(-50%);
  bottom: auto;
  right: auto;
  left: calc(100% + 0.625rem);
  top: 50%;
  --tooltip-arrow-top: 50%;
  --tooltip-arrow-right: auto;
  --tooltip-arrow-left: -0.3125rem;
  --tooltip-arrow-transform: translateY(-50%);
  --tooltip-arrow-border: 0.3125rem 0.3125rem 0.3125rem 0;
  --tooltip-arrow-color: transparent var(--gray-800) transparent transparent;
}

.tooltip.tooltip-left {
  --tooltip-translate: translateY(-50%);
  bottom: auto;
  right: calc(100% + 0.625rem);
  left: auto;
  top: 50%;
  --tooltip-arrow-top: 50%;
  --tooltip-arrow-right: -0.3125rem;
  --tooltip-arrow-left: auto;
  --tooltip-arrow-transform: translateY(-50%);
  --tooltip-arrow-border: 0.3125rem 0 0.3125rem 0.3125rem;
  --tooltip-arrow-color: transparent transparent transparent var(--gray-800);
}

/* إضافة توافق للوضع RTL للتلميحات */
[dir="rtl"] .tooltip.tooltip-right {
  --tooltip-arrow-left: auto;
  --tooltip-arrow-right: -0.3125rem;
}

[dir="rtl"] .tooltip.tooltip-left {
  --tooltip-arrow-left: -0.3125rem;
  --tooltip-arrow-right: auto;
}

/* ==================== مكونات الخطوات ==================== */
.step-guide {
  counter-reset: step;
  margin: var(--space-lg) 0;
  display: grid;
  gap: var(--space-md);
}

.step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-md);
  position: relative;
}

.step::before {
  content: '';
  position: absolute;
  top: 1.875rem;
  inset-inline-start: 0.9375rem;
  bottom: -1.875rem;
  width: 0.125rem;
  background-color: var(--gray-200);
  z-index: 0;
}

.step:last-child::before {
  display: none;
}

.step-number {
  width: 1.875rem;
  height: 1.875rem;
  background-color: var(--primary-color);
  color: var(--text-on-primary);
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  z-index: 1;
}

.step-number::before {
  content: counter(step);
  counter-increment: step;
}

.step-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.step-content h5 {
  margin-bottom: var(--space-xs);
  color: var(--text-primary);
}

.step-content p {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  margin-bottom: 0;
}

/* تحسين للوضع RTL */
[dir="rtl"] .step::before {
  inset-inline-start: auto;
  inset-inline-end: 0.9375rem;
}

/* ==================== مكونات المساعدة ==================== */
.helper-text {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  margin-top: var(--space-xs);
  display: flex;
  align-items: center;
}

.helper-text i {
  margin-inline-end: var(--space-xxs);
  color: var(--info-color);
  font-size: 0.9em;
}

.quick-buttons {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-top: var(--space-sm);
}

.quick-btn {
  display: flex;
  align-items: center;
  padding: var(--space-xs) var(--space-md);
  background-color: var(--gray-100);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
  border: 0.0625rem solid transparent;
}

.quick-btn:hover {
  background-color: var(--primary-light);
  color: var(--white);
  transform: var(--hover-transform-small);
  border-color: var(--primary-color);
}

.quick-btn i {
  margin-inline-end: var(--space-xs);
  font-size: 0.9em;
}

/* ==================== مكونات التبديل بين الوحدات ==================== */
.unit-selector {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: var(--space-md);
  margin: var(--space-md) 0;
}

.unit-selector .unit-item {
  padding: var(--space-md);
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md);
  text-align: center;
  cursor: pointer;
  transition: var(--component-transition);
  box-shadow: var(--shadow-sm);
  border: 0.125rem solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.unit-selector .unit-item:hover {
  transform: var(--hover-transform-medium);
  box-shadow: var(--shadow-md);
}

.unit-selector .unit-item.active {
  background-color: var(--primary-color);
  color: var(--text-on-primary);
  transform: var(--hover-transform-medium);
  box-shadow: var(--shadow-md);
}

.unit-selector .unit-item .unit-icon {
  font-size: var(--fs-xl);
  margin-bottom: var(--space-sm);
  color: var(--primary-color);
  transition: transform var(--transition-fast);
}

.unit-selector .unit-item:hover .unit-icon {
  transform: scale(1.1);
}

.unit-selector .unit-item.active .unit-icon {
  color: var(--white);
}

.unit-selector .unit-item .unit-title {
  font-weight: bold;
  margin-bottom: var(--space-xxs);
}

.unit-selector .unit-item .unit-subtitle {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.unit-selector .unit-item.active .unit-subtitle {
  color: rgba(255, 255, 255, 0.8);
}

/* ==================== مكونات الصعوبة ==================== */
.difficulty-selector {
  display: flex;
  gap: var(--space-md);
  margin-top: var(--space-sm);
}

.difficulty-selector input[type="radio"] {
  display: none;
}

.difficulty-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: var(--space-sm);
  border: 0.125rem solid var(--gray-300);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
  overflow: hidden;
}

.difficulty-label::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0) 100%);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.difficulty-label:hover::before {
  opacity: 1;
}

.difficulty-label:hover {
  border-color: var(--primary-light);
  transform: var(--hover-transform-small);
}

.difficulty-label i {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-xs);
  color: var(--gray-600);
  transition: transform var(--transition-base), color var(--transition-fast);
}

.difficulty-label:hover i {
  transform: scale(1.2);
  color: var(--primary-color);
}

input[type="radio"]:checked + .difficulty-label {
  border-color: var(--primary-color);
  background-color: rgba(76, 110, 245, 0.05);
  color: var(--primary-dark);
  transform: var(--hover-transform-small);
  box-shadow: 0 0.25rem 0.5rem rgba(76, 110, 245, 0.1);
}

input[type="radio"]:checked + .difficulty-label i {
  color: var(--primary-color);
  animation: bounce 0.5s;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
  40% { transform: translateY(-0.5rem); }
  60% { transform: translateY(-0.25rem); }
}

/* ==================== مكونات تغيير الحجم ==================== */
.font-size-controls {
  display: flex;
  gap: var(--space-sm);
}

.font-btn {
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md);
  border: 0.0625rem solid var(--gray-300);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.font-btn:hover {
  background-color: var(--primary-color);
  color: var(--text-on-primary);
  transform: var(--hover-transform-small);
}

/* ==================== مكونات خاصة بالإمتحانات ==================== */
.exam-option {
  display: flex;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.exam-option input {
  margin-inline-end: var(--space-sm);
}

.exam-question {
  margin-bottom: var(--space-md);
}

.exam-section {
  margin-bottom: var(--space-lg);
}

.section-title {
  font-size: var(--fs-md);
  font-weight: bold;
  margin-bottom: var(--space-md);
  text-decoration: underline;
  color: var(--primary-dark);
  padding-inline-start: var(--space-sm);
  border-inline-start: 0.1875rem solid var(--primary-color);
}

.exam-reading-passage {
  background-color: var(--bg-secondary);
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-md);
  font-size: var(--fs-sm);
  line-height: 1.8;
  box-shadow: var(--shadow-sm);
  border-inline-start: 0.125rem solid var(--primary-light);
}

/* ==================== مكونات المكافآت والتحفيز ==================== */
.achievement-item {
  background-color: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  transition: var(--component-transition);
  border: 0.0625rem solid transparent;
}

.achievement-item:hover {
  transform: var(--hover-transform-medium);
  box-shadow: var(--shadow-md);
  border-color: var(--gray-300);
}

.achievement-icon {
  width: 3.75rem;
  height: 3.75rem;
  background-color: var(--primary-color);
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline-end: var(--space-md);
  color: var(--text-on-primary);
  font-size: var(--fs-xl);
  background-image: var(--icon-achievement-url, url('../img/icons/icons-set.svg'));
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60%;
}

.achievement-info {
  flex: 1;
}

.achievement-title {
  font-weight: bold;
  margin-bottom: var(--space-xxs);
  color: var(--text-primary);
}

.achievement-description {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.achievement-progress {
  width: 100%;
  margin-top: var(--space-xs);
}

.achievement-progress .progress-text {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  margin-bottom: var(--space-xxs);
  text-align: left;
}

.achievement-item.locked {
  opacity: 0.7;
}

.achievement-item.locked .achievement-icon {
  background-color: var(--gray-500);
}

/* ==================== مكونات المسابقات والتحديات ==================== */
.challenge-task {
  display: flex;
  align-items: center;
  background-color: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
  transition: var(--component-transition);
  border: 0.0625rem solid transparent;
}

.challenge-task:hover {
  transform: var(--hover-transform-small);
  box-shadow: var(--shadow-sm);
  border-color: var(--gray-300);
}

.task-checkbox {
  margin-inline-end: var(--space-md);
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gray-400);
  transition: color var(--transition-fast), transform var(--transition-fast);
}

.task-checkbox.completed {
  color: var(--success-color);
}

.challenge-task:hover .task-checkbox {
  transform: scale(1.1);
}

.task-details {
  flex: 1;
}

.task-details h5 {
  font-weight: 600;
  margin-bottom: var(--space-xxs);
  color: var(--text-primary);
}

.task-details p {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-bottom: 0;
}

.task-btn {
  --btn-bg: var(--primary-color);
  --btn-color: var(--text-on-primary);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-md);
  font-weight: 500;
  transition: all var(--transition-fast);
  background-color: var(--btn-bg);
  color: var(--btn-color);
  border: none;
  cursor: pointer;
}

.task-btn:hover {
  --btn-bg: var(--primary-dark);
  transform: var(--hover-transform-small);
  box-shadow: var(--shadow-sm);
}

.reward-icon {
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--accent-color);
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline-end: var(--space-md);
  color: var(--text-on-primary);
  font-size: var(--fs-lg);
  background-image: var(--icon-reward-url, url('../img/icons/icons-set.svg'));
  background-position: center;
  background-repeat: no-repeat;
  background-size: 65%;
}

.reward-info h5 {
  font-weight: 600;
  margin-bottom: var(--space-xxs);
}

.reward-info p {
  font-size: var(--fs-sm);
  margin-bottom: 0;
}

/* ==================== مكونات الاتصال بالواجهة وواجهة المستخدم ==================== */
.color-options {
  display: flex;
  gap: var(--space-sm);
}

.color-option {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-circle);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: 0.125rem solid transparent;
}

.color-option.active {
  border-color: var(--gray-600);
  transform: scale(1.2);
}

.color-option:hover {
  transform: var(--hover-transform-small);
}

/* ==================== مكونات استعراض البيانات والإحصائيات ==================== */
.stat-card {
  background-color: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  display: flex;
  align-items: center;
  box-shadow: var(--shadow-sm);
  transition: var(--component-transition);
  border: 0.0625rem solid transparent;
}

.stat-card:hover {
  transform: var(--hover-transform-medium);
  box-shadow: var(--shadow-md);
  border-color: var(--gray-300);
}

.stat-icon {
  width: 3rem;
  height: 3rem;
  background-color: rgba(76, 110, 245, 0.1);
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline-end: var(--space-md);
  color: var(--primary-color);
  font-size: var(--fs-xl);
  background-image: var(--icon-stats-url, url('../img/icons/stats.svg'));
  background-position: center;
  background-repeat: no-repeat;
  background-size: 60%;
}

.stat-info {
  flex: 1;
}

.stat-title {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-xxs);
}

.stat-value {
  font-size: var(--fs-lg);
  font-weight: bold;
  color: var(--text-primary);
}

.stat-change {
  font-size: var(--fs-xs);
  padding: var(--space-xxs) var(--space-xs);
  border-radius: var(--radius-pill);
}

.stat-change.positive {
  background-color: rgba(64, 192, 87, 0.1);
  color: var(--success-color);
}

.stat-change.negative {
  background-color: rgba(250, 82, 82, 0.1);
  color: var(--error-color);
}

.stat-change.neutral {
  background-color: rgba(108, 117, 125, 0.1);
  color: var(--text-secondary);
}

/* استخدم CSS Grid للإحصائيات بدلاً من Flexbox لتحقيق مرونة أكبر */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--space-md);
  margin: var(--space-lg) 0;
}

/* ==================== مكونات النشاط الأخير ==================== */
.activity-item {
  display: flex;
  align-items: center;
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
  background-color: var(--bg-secondary);
  transition: all var(--transition-fast);
  border: 0.0625rem solid transparent;
}

.activity-item:hover {
  transform: translateX(-0.3125rem);
  border-color: var(--gray-300);
}

.activity-time {
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  margin-inline-end: var(--space-sm);
  white-space: nowrap;
}

.activity-icon {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-inline-end: var(--space-sm);
}

/* تبسيط الاستخدام باستخدام CSS Custom Properties */
.activity-item {
  --activity-bg: rgba(76, 110, 245, 0.1);
  --activity-color: var(--primary-color);
}

.activity-item.correct {
  --activity-bg: rgba(64, 192, 87, 0.1);
  --activity-color: var(--success-color);
}

.activity-item.incorrect {
  --activity-bg: rgba(250, 82, 82, 0.1);
  --activity-color: var(--error-color);
}

.activity-item .activity-icon {
  background-color: var(--activity-bg);
  color: var(--activity-color);
}

.activity-text {
  flex: 1;
  font-size: var(--fs-sm);
}

.activity-item.placeholder {
  color: var(--text-secondary);
  justify-content: center;
  font-style: italic;
}

/* ==================== تصميم المقاطع الصوتية ==================== */
.audio-player {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  background-color: var(--bg-secondary);
  background-image: linear-gradient(to right, var(--bg-secondary), var(--bg-primary));
  padding: var(--space-md);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: var(--component-transition);
}

.audio-player:hover {
  box-shadow: var(--shadow-md);
}

.audio-progress {
  flex: 1;
  height: 0.5rem;
  background-color: var(--gray-300);
  border-radius: var(--radius-pill);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  box-shadow: var(--shadow-inner);
}

.audio-progress .progress-bar {
  height: 100%;
  background-color: var(--primary-color);
  background-image: linear-gradient(to right, var(--primary-light), var(--primary-color));
  width: 0;
  position: relative;
}

.play-btn, .replay-btn {
  width: 2.5rem;
  height: 2.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-circle);
  background-color: var(--primary-color);
  background-image: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
  color: var(--white);
  transition: all var(--transition-fast);
  box-shadow: 0 0.125rem 0.3125rem rgba(76, 110, 245, 0.3);
  position: relative;
  z-index: 1;
  border: none;
  cursor: pointer;
}

.play-btn:hover, .replay-btn:hover {
  background-color: var(--primary-dark);
  transform: translateY(-0.125rem) scale(1.05);
  box-shadow: 0 0.25rem 0.5rem rgba(76, 110, 245, 0.4);
}

/* ==================== تنسيقات الرسومات البيانية ==================== */
.chart-container {
  height: 18.75rem;
  margin: var(--space-lg) 0;
  position: relative;
}

.chart-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background-color: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  text-align: center;
}

.chart-placeholder i {
  font-size: var(--fs-xxxl);
  color: var(--gray-300);
  margin-bottom: var(--space-md);
}

.chart-placeholder p {
  color: var(--text-secondary);
  max-width: 18.75rem;
  margin-bottom: 0;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-md);
}

.chart-header h4 {
  margin-bottom: 0;
  color: var(--text-primary);
}

.chart-legend {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.legend-item {
  display: flex;
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.color-dot {
  display: inline-block;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--radius-circle);
  margin-inline-end: var(--space-xs);
}

/* ==================== تنسيقات البحث ==================== */
.search-container {
  position: relative;
  margin-bottom: var(--space-md);
}

.search-input {
  width: 100%;
  padding: var(--space-sm) var(--space-lg);
  padding-inline-start: calc(var(--space-lg) + 1.25rem);
  border: 0.125rem solid var(--gray-300);
  border-radius: var(--radius-pill);
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: all var(--transition-fast);
}

.search-input:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 0.1875rem rgba(76, 110, 245, 0.1);
  outline: none;
}

.search-icon {
  position: absolute;
  inset-inline-start: var(--space-md);
  top: 50%;
  transform: translateY(-50%);
  color: var(--gray-500);
  pointer-events: none;
  transition: color var(--transition-fast);
}

.search-input:focus + .search-icon {
  color: var(--primary-color);
}

.search-results {
  position: absolute;
  top: 100%;
  inset-inline: 0;
  background-color: var(--bg-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  margin-top: var(--space-xs);
  padding: var(--space-sm);
  z-index: var(--z-dropdown);
  max-height: 18.75rem;
  overflow-y: auto;
  display: none;
  border: 0.0625rem solid var(--gray-300);
}

.search-results.show {
  display: block;
  animation: fadeIn var(--transition-fast);
}

.search-result-item {
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.search-result-item:hover {
  background-color: var(--gray-100);
}

.search-result-item.active {
  background-color: rgba(76, 110, 245, 0.1);
}

.search-result-title {
  font-weight: 500;
  color: var(--text-primary);
  margin-bottom: var(--space-xxs);
}

.search-result-description {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.search-highlight {
  background-color: rgba(253, 126, 20, 0.2);
  padding: 0 0.125rem;
  border-radius: 0.125rem;
}

.search-no-results {
  padding: var(--space-md);
  text-align: center;
  color: var(--text-secondary);
  font-style: italic;
}

/* ==================== تنسيقات الوضع المركز للدراسة ==================== */
.focus-mode-toggle {
  position: fixed;
  top: 6.25rem;
  inset-inline-start: 1.25rem;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--bg-primary);
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-md);
  cursor: pointer;
  z-index: var(--z-fixed);
  transition: all var(--transition-fast);
  border: none;
}

.focus-mode-toggle:hover {
  transform: scale(1.1);
}

.focus-mode-toggle i {
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.focus-mode-active .focus-mode-toggle i {
  color: var(--primary-color);
}

.focus-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: var(--z-sticky);
  display: none;
  backdrop-filter: blur(0.1875rem);
  -webkit-backdrop-filter: blur(0.1875rem);
}

.focus-mode-active .focus-overlay {
  display: block;
}

.focus-mode-active .question-display {
  position: relative;
  z-index: var(--z-elevated);
  max-width: 50rem;
  margin: 0 auto;
  transform: translateY(1.25rem);
  box-shadow: var(--shadow-xl);
  background-color: var(--bg-primary);
}

/* ==================== تنسيقات النص المميز ==================== */
.highlight {
  background-color: rgba(76, 110, 245, 0.1);
  padding: 0 0.1875rem;
  border-radius: 0.1875rem;
  position: relative;
  transition: background-color var(--transition-fast);
}

.highlight::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.125rem;
  background-color: var(--primary-color);
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s ease;
}

.highlight:hover {
  background-color: rgba(76, 110, 245, 0.2);
}

.highlight:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* تبسيط تعريفات التمييز المختلفة باستخدام CSS Custom Properties */
.highlight {
  --highlight-bg: rgba(76, 110, 245, 0.1);
  --highlight-hover-bg: rgba(76, 110, 245, 0.2);
  --highlight-line-color: var(--primary-color);
  background-color: var(--highlight-bg);
}

.highlight:hover {
  background-color: var(--highlight-hover-bg);
}

.highlight::after {
  background-color: var(--highlight-line-color);
}

.highlight.yellow {
  --highlight-bg: rgba(253, 126, 20, 0.1);
  --highlight-hover-bg: rgba(253, 126, 20, 0.2);
  --highlight-line-color: var(--accent-color);
}

.highlight.green {
  --highlight-bg: rgba(64, 192, 87, 0.1);
  --highlight-hover-bg: rgba(64, 192, 87, 0.2);
  --highlight-line-color: var(--secondary-color);
}

/* ==================== تنسيقات قارئ الشاشة والوصول ==================== */
.sr-only {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  padding: 0;
  margin: -0.0625rem;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.skip-link {
  position: absolute;
  top: -2.5rem;
  left: 0;
  background: var(--primary-color);
  color: white;
  padding: 0.5rem;
  z-index: 10000;
  transition: top 0.3s;
}

.skip-link:focus {
  top: 0;
}

/* تحسين التباين والقراءة - باستخدام CSS Custom Properties */
.high-contrast-mode {
  --primary-color: #0066cc;
  --primary-light: #0077e6;
  --primary-dark: #004c99;
  --secondary-color: #008000;
  --secondary-light: #00a600;
  --secondary-dark: #006600;
  --accent-color: #cc0000;
  --accent-light: #ff8800;
  --accent-dark: #994c00;
  --text-primary: #000000;
  --text-secondary: #333333;
  --bg-primary: #ffffff;
  --bg-secondary: #f0f0f0;
  --error-color: #cc0000;
  --success-color: #008000;
  --warning-color: #cc6600;
  --info-color: #0066cc;
  
  --shadow-sm: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.3);
  --shadow-md: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.3);
  
  /* تعزيز حدود العناصر التفاعلية */
  --border-width: 2px;
}

.large-text-mode {
  --fs-base: 1.2rem;
  --fs-xxxl: calc(var(--fs-base) * 2.25);
  --fs-xxl: calc(var(--fs-base) * 1.875);
  --fs-xl: calc(var(--fs-base) * 1.5);
  --fs-lg: calc(var(--fs-base) * 1.25);
  --fs-md: var(--fs-base);
  --fs-sm: calc(var(--fs-base) * 0.875);
  --fs-xs: calc(var(--fs-base) * 0.75);
}

.dyslexic-font-mode {
  --font-primary: 'OpenDyslexic', 'Tajawal', sans-serif;
  --font-heading: 'OpenDyslexic', 'Tajawal', sans-serif;
  --font-reading: 'OpenDyslexic', 'Nunito', sans-serif;
  --font-exam: 'OpenDyslexic', 'Nunito', sans-serif;
}

.reduced-motion {
  --transition-fast: 0ms;
  --transition-base: 0ms;
  --transition-slow: 0ms;
  --animation-bounce: none;
  --animation-pulse: none;
  --animation-float: none;
  --animation-wave: none;
  --component-transition: none;
}

.reading-guide-active .reading-guide {
  position: absolute;
  height: 2em;
  width: 100%;
  background-color: rgba(255, 255, 0, 0.1);
  pointer-events: none;
  z-index: var(--z-base);
  border-radius: var(--radius-sm);
  border: 0.0625rem solid rgba(0, 0, 0, 0.1);
}

/* ==================== تنسيقات قارئ PDF ==================== */
.pdf-viewer {
  width: 100%;
  height: 37.5rem;
  margin: var(--space-lg) 0;
  border: 0.0625rem solid var(--gray-300);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.pdf-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background-color: var(--gray-100);
  border-bottom: 0.0625rem solid var(--gray-300);
}

.pdf-page-controls {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.pdf-page-number {
  width: 2.5rem;
  text-align: center;
  font-size: var(--fs-sm);
  border: 0.0625rem solid var(--gray-300);
  border-radius: var(--radius-sm);
  padding: var(--space-xxs);
}

.pdf-content {
  height: calc(100% - 3.125rem);
  overflow-y: auto;
  padding: var(--space-md);
  display: flex;
  justify-content: center;
  background-color: var(--gray-200);
  flex: 1;
}

.pdf-page {
  background-color: var(--white);
  box-shadow: var(--shadow-md);
  margin-bottom: var(--space-md);
}

/* ==================== تنسيقات أزرار المشاركة ==================== */
.share-buttons {
  display: flex;
  gap: var(--space-sm);
  margin: var(--space-md) 0;
  flex-wrap: wrap;
}

.share-button {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-circle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: all var(--transition-fast);
  border: none;
  cursor: pointer;
}

.share-button:hover {
  transform: var(--hover-transform-small);
  box-shadow: var(--shadow-md);
  filter: brightness(1.1);
}

/* تبسيط تعريفات أزرار المشاركة باستخدام CSS Custom Properties */
.share-button.facebook { background-color: #1877f2; }
.share-button.twitter { background-color: #1da1f2; }
.share-button.whatsapp { background-color: #25d366; }
.share-button.email { background-color: #ea4335; }
.share-button.copy { background-color: var(--gray-600); }

/* ==================== تنسيقات الوضع المظلم ==================== */
/* ملاحظة: هذه فقط بعض المتغيرات الأساسية، التفاصيل الكاملة في ملف dark-mode.css */
.dark-mode {
  --bg-primary: var(--dark-bg-primary);
  --bg-secondary: var(--dark-bg-secondary);
  --text-primary: var(--dark-text-primary);
  --text-secondary: var(--dark-text-secondary);
  
  /* تأكيد من توافق الظلال في الوضع المظلم */
  --shadow-sm: 0 0.125rem 0.3125rem rgba(0, 0, 0, 0.3);
  --shadow-md: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 0.5rem 1rem rgba(0, 0, 0, 0.5);
  --shadow-xl: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.6);
  --shadow-inner: inset 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
  --shadow-primary: 0 0.25rem 0.5rem rgba(76, 110, 245, 0.3);
}

/* ==================== استعلامات الوسائط للتكيف مع الشاشات المختلفة ==================== */
/* تحسين باستخدام تسميات توضيحية واستخدام متغيرات الشاشة لتوحيد النقاط الفاصلة */
:root {
  --screen-sm: 576px;
  --screen-md: 768px;
  --screen-lg: 992px;
  --screen-xl: 1200px;
}

/* شاشات الجوال - الشاشات الصغيرة جداً (أقل من 576 بكسل) */
@media (max-width: calc(var(--screen-sm) - 1px)) {
  .icon-container, .avatar, .badge-icon, .reward-icon, .achievement-icon {
    --icon-size: calc(var(--icon-base-size) * 0.8);
  }
  
  .modal-content {
    width: 95%; /* زيادة العرض على الشاشات الصغيرة */
  }
  
  .unit-selector {
    grid-template-columns: repeat(auto-fill, minmax(5.625rem, 1fr));
  }
  
  .stats-grid {
    grid-template-columns: 1fr; /* عمود واحد في الشاشات الصغيرة */
  }
  
  .card {
    padding: var(--space-md); /* تقليل حشو البطاقات */
  }
  
  .tab-btn, .tab {
    font-size: var(--fs-sm);
    padding: var(--space-xs) var(--space-sm);
  }
  
  .difficulty-selector {
    flex-direction: column;
  }
  
  .list-grid {
    grid-template-columns: 1fr;
  }
}

/* شاشات الجوال الأفقية والأجهزة اللوحية الصغيرة */
@media (min-width: var(--screen-sm)) and (max-width: calc(var(--screen-md) - 1px)) {
  .unit-selector {
    grid-template-columns: repeat(auto-fill, minmax(6.25rem, 1fr));
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .list-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* الأجهزة اللوحية والشاشات المتوسطة */
@media (min-width: var(--screen-md)) and (max-width: calc(var(--screen-lg) - 1px)) {
  .unit-selector {
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .list-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* الشاشات المكتبية والكبيرة */
@media (min-width: var(--screen-lg)) {
  .icon-container, .avatar, .badge-icon, .reward-icon, .achievement-icon {
    --icon-size: var(--icon-base-size);
  }
  
  .unit-selector {
    grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr));
  }
  
  .stats-grid {
    grid-template-columns: repeat(4, 1fr);
  }
  
  .list-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* تحسينات للأجهزة التي تدعم الحركة */
@media (hover: hover) {
  .btn:hover, .card:hover, .achievement-item:hover, .unit-selector .unit-item:hover {
    transform: var(--hover-transform-small);
    transition: var(--component-transition);
  }
}

/* ==================== دعم RTL ==================== */
[dir="rtl"] {
  /* تخصيصات لدعم اللغة العربية والعرض من اليمين لليسار */
  --tooltip-arrow-transform: translateX(-50%);
}

[dir="rtl"] .dropdown-menu {
  inset-inline-start: auto;
  inset-inline-end: 0;
}

[dir="rtl"] .modal-header h3 i,
[dir="rtl"] .card-title i,
[dir="rtl"] .notification i,
[dir="rtl"] .list-item-icon,
[dir="rtl"] .badge-icon,
[dir="rtl"] .achievement-icon {
  margin-inline-start: var(--space-sm);
  margin-inline-end: 0;
}

/* ==================== دعم الطباعة ==================== */
@media print {
  * {
    background-color: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  
  .no-print,
  .notification-area,
  .modal,
  .search-container,
  .nav,
  .footer,
  .focus-mode-toggle {
    display: none !important;
  }
  
  .card,
  .tabs,
  .tab-content,
  .achievement-item,
  .unit-selector .unit-item {
    break-inside: avoid;
    border: 0.0625rem solid #ddd;
  }
  
  .page-break {
    page-break-before: always;
  }
  
  .chart-container {
    height: auto;
    max-height: 12.5rem;
  }
  
  /* تحسين ظهور الأيقونات عند الطباعة */
  .icon-container, .badge-icon, .avatar, .reward-icon, .achievement-icon {
    border: 0.0625rem solid #ddd;
    background-size: 40% !important;
  }
  
  /* تحسين مظهر الجداول والقوائم */
  table, .list-item {
    border-collapse: collapse;
    border: 0.0625rem solid #ddd;
  }
  
  th, td {
    border: 0.0625rem solid #ddd;
    padding: 0.3125rem;
  }
}

/* ==================== توافق المتصفحات ==================== */
/* الدعم لمتصفح Safari */
@supports (-webkit-appearance: none) {
  .modal-content,
  .notification,
  .card {
    -webkit-backdrop-filter: blur(0.625rem);
  }
  
  /* إصلاح مشاكل الزّر في Safari */
  .btn, .icon-btn, .tab-btn {
    -webkit-appearance: none;
  }
}

/* الدعم لمتصفح Firefox */
@supports (-moz-appearance: none) {
  .scrollbar {
    scrollbar-color: var(--gray-300) transparent;
    scrollbar-width: thin;
  }
  
  .select-wrapper select {
    -moz-appearance: none;
  }
}

/* ==================== تحسينات أداء ومواضيع متقدمة ==================== */
/* استخدام content-visibility لتحسين الأداء */
.offscreen-content,
.lazy-load-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 31.25rem; /* تقدير للحجم المتوقع */
}

/* كود CSS لمعالجة طبقات التحميل والبيانات غير المتوفرة */
.skeleton-loader {
  background: linear-gradient(90deg, 
    var(--gray-200) 25%, 
    var(--gray-300) 37%, 
    var(--gray-200) 63%
  );
  background-size: 25rem 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: var(--radius-md);
}

@keyframes skeleton-loading {
  0% { background-position: -18.75rem 0; }
  100% { background-position: 18.75rem 0; }
}

.data-empty-state {
  text-align: center;
  padding: var(--space-lg);
  color: var(--text-secondary);
}

.data-empty-state i {
  font-size: var(--fs-xxxl);
  color: var(--gray-300);
  margin-bottom: var(--space-md);
  display: block;
}

.data-empty-state p {
  max-width: 21.875rem;
  margin-inline: auto;
}

/* ==================== دعم التنقل بلوحة المفاتيح ==================== */
:focus-visible {
  outline: 0.125rem solid var(--primary-color);
  outline-offset: 0.125rem;
}

.keyboard-navigation-active *:focus {
  outline: 0.125rem solid var(--primary-color) !important;
  outline-offset: 0.125rem !important;
}

/* تحسين التباين والوضوح لوضع عالي التباين */
@media (forced-colors: active) {
  .btn,
  .icon-btn,
  .card,
  .modal-content,
  .tab,
  .switch,
  .badge,
  .progress-bar,
  .avatar,
  .badge-icon,
  .reward-icon,
  .achievement-icon {
    border: 0.125rem solid currentColor;
  }
  
  .progress-bar {
    background-color: Highlight;
  }
  
  .badge, .notification {
    background-color: ButtonFace;
    color: ButtonText;
  }
  
  .form-control:focus,
  .btn:focus,
  .icon-btn:focus {
    outline: 0.125rem solid ButtonText;
  }
}

/* ==================== تنسيقات لمكونات إضافية ==================== */
/* مكون برنامج تدريس القواعد والصوتيات */
.phonics-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  background-color: var(--bg-secondary);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-lg);
  box-shadow: var(--shadow-md);
  max-width: 31.25rem;
  margin-inline: auto;
}

.phonics-example {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-sm);
  background-color: var(--bg-primary);
  border-radius: var(--radius-md);
}

.phonics-word {
  font-size: var(--fs-lg);
  font-weight: bold;
  color: var(--primary-color);
  text-align: center;
  flex: 1;
}

.phonics-image {
  width: 5rem;
  height: 5rem;
  border-radius: var(--radius-sm);
  background-color: var(--gray-100);
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-sm);
}

/* مكون بطاقات الكلمات المتحركة للمفردات */
.flashcard-container {
  perspective: 62.5rem;
  height: 15.625rem;
  margin-bottom: var(--space-lg);
}

.flashcard {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s;
  border-radius: var(--radius-lg);
}

.flashcard.flipped {
  transform: rotateY(180deg);
}

.flashcard-front, .flashcard-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.flashcard-front {
  background-color: var(--primary-light);
  color: var(--text-on-primary);
}

.flashcard-back {
  background-color: var(--bg-primary);
  transform: rotateY(180deg);
}

.flashcard-word {
  font-size: var(--fs-xxl);
  font-weight: bold;
  margin-bottom: var(--space-md);
}

.flashcard-phonetic {
  font-size: var(--fs-md);
  font-style: italic;
  margin-bottom: var(--space-sm);
}

.flashcard-meaning {
  font-size: var(--fs-lg);
  text-align: center;
}

.flashcard-example {
  font-size: var(--fs-sm);
  font-style: italic;
  margin-top: var(--space-md);
  color: var(--text-secondary);
}