/* ملف الألوان المخصصة - قريب من #6c7ae0 */

:root {
  /* اللون الأساسي الجديد */
  --primary-color: #6c7ae0;
  --primary-light: #8a96ec;
  --primary-dark: #4e5ac7;
  --primary-lighter: #a8b3f0;
  --primary-darker: #303cb8;
  
  /* ألوان متدرجة */
  --primary-gradient: linear-gradient(135deg, #6c7ae0 0%, #8a96ec 100%);
  --primary-gradient-hover: linear-gradient(135deg, #4e5ac7 0%, #6c7ae0 100%);
  
  /* ألوان النص */
  --text-primary: #6c7ae0;
  --text-secondary: #6c7ae0;
  --text-muted: #6c7ae0;
  
  /* ألوان الخلفية */
  --bg-primary: #6c7ae0;
  --bg-primary-light: rgba(108, 122, 224, 0.1);
  --bg-primary-lighter: rgba(108, 122, 224, 0.05);
  
  /* ألوان الحدود */
  --border-primary: #6c7ae0;
  --border-primary-light: #6c7ae0;
  
  /* ألوان الحالة */
  --hover-primary: #6c7ae0;
  --active-primary: #6c7ae0;
}

/* تطبيق الألوان الجديدة على العناصر */
.btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.btn-primary:hover {
  background-color: var(--hover-primary) !important;
  border-color: var(--hover-primary) !important;
}

.navbar-brand {
  color: var(--primary-color) !important;
}

.nav-link:hover {
  color: var(--primary-color) !important;
}

.text-primary {
  color: var(--primary-color) !important;
}

.bg-primary {
  background-color: var(--primary-color) !important;
}

.border-primary {
  border-color: var(--primary-color) !important;
}

/* تأثيرات إضافية */
.btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(108, 122, 224, 0.25) !important;
}

.form-control:focus {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 0.2rem rgba(108, 122, 224, 0.25) !important;
}

/* تخصيص الأزرار */
.btn-outline-primary {
  color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

.btn-outline-primary:hover {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

/* تخصيص الروابط */
a {
  color: var(--primary-color);
}

a:hover {
  color: var(--hover-primary);
}

/* تخصيص الجداول */
.table-primary {
  background-color: var(--bg-primary-light) !important;
}

.table-primary th {
  background-color: var(--primary-color) !important;
  color: white !important;
}

/* تخصيص التنبيهات */
.alert-primary {
  background-color: var(--bg-primary-light) !important;
  border-color: var(--border-primary-light) !important;
  color: var(--text-primary) !important;
}

/* تخصيص البطاقات */
.card-header-primary {
  background-color: var(--primary-color) !important;
  color: white !important;
}

/* تخصيص التقدم */
.progress-bar {
  background-color: var(--primary-color) !important;
}

/* تخصيص القوائم */
.list-group-item-primary {
  background-color: var(--bg-primary-light) !important;
  color: var(--text-primary) !important;
}

/* تخصيص الأيقونات */
.icon-primary {
  color: var(--primary-color) !important;
}

/* تخصيص الحدود */
.border-primary {
  border-color: var(--primary-color) !important;
}

/* تخصيص الظلال */
.shadow-primary {
  box-shadow: 0 0.125rem 0.25rem rgba(108, 122, 224, 0.075) !important;
}

/* تخصيص الخلفيات */
.bg-primary-light {
  background-color: var(--bg-primary-light) !important;
}

.bg-primary-lighter {
  background-color: var(--bg-primary-lighter) !important;
}

/* تخصيص النصوص */
.text-primary-light {
  color: var(--primary-light) !important;
}

.text-primary-dark {
  color: var(--primary-dark) !important;
}




/* إظهار عنصر li الذي يحتوي على الزر */
.menu-mobile li {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  text-align: right !important;
  direction: rtl !important;
}

.menu-mobile li a {
  text-align: right !important;
  display: block !important;
  padding-right: 30px !important;
  padding-left: 10px !important;
  font-size: 20px !important; /* حجم كبير */
  text-decoration: none !important; /* إلغاء الخط */
  transition: font-size 0.3s ease !important;
}

.menu-mobile li a:hover {
  font-size: 22px !important; /* تكبير عند التمرير */
}

/* خلفية ضبابية للقائمة المحمولة */
.menu-mobile ul,
.main-menu-m {
  text-align: right !important;
  direction: rtl !important;
  padding-right: 0 !important;
  background: #6c7ae0 !important; /* خلفية بنفسجية ضبابية */
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
}

/* إظهار الفورم التي تحتوي على الزر */
.menu-mobile form {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* إظهار الزر في main-menu-m */
.main-menu-m .btn-logout {
  width: auto !important;
  text-align: right !important;
  margin: 10px 0 !important;
  margin-right: 15px !important;
  background-color: white !important;
  border: 2px solid var(--primary-color) !important;
  color: var(--primary-color) !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  box-shadow: none !important;
  outline: none !important;
  text-shadow: none !important;
}

.main-menu-m li {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  text-align: right !important;
  direction: rtl !important;
}

.main-menu-m li a {
  text-align: right !important;
  display: block !important;
  padding-right: 30px !important;
  padding-left: 10px !important;
  font-size: 20px !important; /* حجم كبير */
  text-decoration: none !important; /* إلغاء الخط */
  transition: font-size 0.3s ease !important;
}

.main-menu-m li a:hover {
  font-size: 22px !important; /* تكبير عند التمرير */
}

.main-menu-m form {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.menu-mobile .btn-logout:hover {
  background-color: var(--primary-color) !important; /* عند التمرير يصبح بنفسجي */
  border-color: var(--primary-color) !important;
  color: white !important;
}

/* تجاوز أي تنسيقات من main.css - قواعد نهائية */
.main-menu .btn-logout,
.main-menu button.btn-logout,
.main-menu.user-authenticated .btn-logout,
.main-menu.user-authenticated button.btn-logout,
.main-menu.user-authenticated .btn-logout.cl11 {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: white !important;
}

.menu-mobile .btn-logout,
.menu-mobile button.btn-logout,
.menu-mobile.user-authenticated .btn-logout,
.menu-mobile.user-authenticated button.btn-logout,
.menu-mobile.user-authenticated .btn-logout.cl11,
.main-menu-m .btn-logout,
.main-menu-m button.btn-logout {
  background-color: white !important;
  border: 2px solid var(--primary-color) !important;
  color: var(--primary-color) !important;
  display: inline-block !important;
  width: auto !important;
  padding: 10px 20px !important;
  font-size: 16px !important;
}

button.btn-logout {
  color: white !important;
}

/* تنسيق الأيقونات للاب - من اليمين مع مسافة بسيطة */
.main-menu li a {
  font-size: 18px !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  flex-direction: row-reverse !important;
}

.main-menu li a i {
  margin-right: 0px !important; /* مسافة أكبر بين الأيقونة والكلمة */
  margin-left: 10 !important;
  font-size: 18px !important;
  color: inherit;
}

/* إلغاء الخط من تحت الكلمات */
.main-menu li a {
  text-decoration: none !important;
}

/* الـ hover يبقى كما هو */
.main-menu li a:hover {
  color: var(--primary-color) !important;
}

.main-menu li a:hover i {
  color: var(--primary-color) !important;
}

/* تجاوز اللون الأزرق عند التمرير على عناصر القائمة */
.main-menu > li:hover > a {
  color: var(--primary-color) !important;
}

.sub-menu > li:hover > a {
  color: var(--primary-color) !important;
}

/* تلوين الصفحة النشطة باللون البنفسجي */
.main-menu > li.active-menu > a {
  color: var(--primary-color) !important;
}

.main-menu > li.active-menu > a i {
  color: var(--primary-color) !important;
}

/* تحويل كل الألوان الزرقاء إلى بنفسجي */
.hov-cl1:hover,
.cl1 {
  color: var(--primary-color) !important;
}

.bg3,
.hov-btn3:hover {
  background-color: var(--primary-color) !important;
}

.bor2 {
  border: 1px solid var(--primary-color) !important;
}

/* الأزرار */
.flex-c-m.stext-101.cl0.size-107.bg3.bor2.hov-btn3 {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
}

/* روابط التفاصيل */
.stext-104.cl4.hov-cl1 {
  color: #333 !important;
}

.stext-104.cl4.hov-cl1:hover {
  color: var(--primary-color) !important;
}

/* أيقونات الهيدر */
.icon-header-item.hov-cl1:hover {
  color: var(--primary-color) !important;
}

/* تنسيق الأيقونات - الموبايل */
.main-menu-m li a i {
  margin-left: 8px;
  color: inherit;
  font-size: 1em;
}

/* تكبير اللوجو في الموبايل واللاب */
.logo img {
  max-height: 80px !important;
  width: auto !important;
}

.logo-mobile img {
  max-height: 60px !important;
  width: auto !important;
  max-width: 150px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
}

/* إظهار اللوجو في الموبايل */
.logo-mobile {
  display: block !important;
  position: relative !important;
  height: auto !important;
  padding-right: 15px !important;
  flex-grow: 1 !important;
}

.logo-mobile a {
  display: inline-block !important;
  height: auto !important;
}

/* جعل الناف ثابت في الموبايل */
.wrap-header-mobile {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 9999 !important;
  background: #e6e6e6 !important; /* نفس لون السكشن bg2 */
  transition: background 0.3s ease !important;
}

/* عند التحريك يصبح أبيض */
.wrap-header-mobile.scrolled {
  background: white !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* إضافة مسافة للمحتوى في الموبايل */
@media (max-width: 991px) {
  body {
    padding-top: 80px !important;
  /* }
  
  .wrap-header-mobile + * { */
    background: #e6e6e6 !important;
  }
}

/* Counter notification styles - keep red for cart and wishlist */
.icon-header-noti[data-notify]:not([data-notify="0"])::after {
  background-color: #ff4757 !important; /* Red color for notifications */
  color: white !important;
  border-radius: 50%;
  padding: 1px 5px;
  font-size: 12px;
  position: absolute;
  top: -5px;
  right: 0px;
  content: attr(data-notify);
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border: 1px solid white;
}