@charset "UTF-8";

/* افتراضي = مخفي */
.mobile-only { display: none; }
.desktop-only { display: block; }

/* على الموبايل */
@media (max-width: 991px) {
  .mobile-only { display: block !important; }
  .desktop-only { display: none !important; }
}

/* خلي هيدر الموبايل فوق أي حاجة */
header.mobile-only{
    position: relative;
    z-index: 9999;
    display:block;
}

/* امنع أي عنصر قبله يغطيه */
.specialHeader,
.leaderboard,
.takeOverAds {
    position: relative;
    z-index: 1;
}

/* الهيدر فوق كل حاجة */
header.mobile-only{
    position: relative;
    z-index: 99999;
    background:#0a0a0a;
}

/* أي بانر أو هيدر إعلان تحته */
.specialHeader,
.takeOverAds,
.leaderboard{
    position: relative;
    z-index: 1;
}

.mobile-only{display:none;}
.desktop-only{display:block;}

@media (max-width: 991px){
    .mobile-only{display:block !important;}
    .desktop-only{display:none !important;}
}

.mobile-menu {
  display: none;
  background: #111; /* خلفية داكنة */
  position: fixed; /* ثابتة */
  top: 60px; /* أسفل الهيدر */
  right: 0; /* من جهة اليمين */
  width: 250px; /* عرض مناسب */
  height: calc(100vh - 60px); /* ارتفاع الشاشة بدون الهيدر */
  overflow-y: auto;
  z-index: 20000;
  padding: 20px;
  box-shadow: -2px 0 5px rgba(0,0,0,0.5);
  transition: transform 0.3s ease;
  transform: translateX(100%); /* مخفية خارجة يمين */
}

/* عند التفعيل (عرض القائمة) */
.mobile-menu.active {
  display: block;
  transform: translateX(0); /* تظهر داخل الشاشة */
}

/* تنسيق روابط القائمة */
.mobile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-menu ul li {
  margin-bottom: 15px;
}

.mobile-menu ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  display: block;
  padding: 8px 10px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.mobile-menu ul li a:hover {
  background-color: #e30613; /* لون أحمر مشابه ليالاكورة */
  color: #fff;
}








/* العنصر الذي لديه قائمة فرعية */
.mobile-menu li.has-submenu > a {
  position: relative;
  font-weight: bold;
  background: #161616;
  border-radius: 6px;
}

/* السهم */
.mobile-menu li.has-submenu > a .arrow {
  float: left;
  font-size: 14px;
  transition: transform 0.3s ease;
}

/* عند الفتح السهم يلف */
.mobile-menu li.has-submenu.open > a .arrow {
  transform: rotate(180deg);
}

.mobile-menu .submenu {
  display: none;
  margin-top: 8px;
  padding: 8px;
  background: #1d1d1d;
  border-radius: 6px;
  border-right: 3px solid #e10600; /* خط أحمر مثل يلاكورة */
}

.mobile-menu .submenu ul {
  padding: 0;
  margin: 0;
}

.mobile-menu .submenu li {
  margin-bottom: 8px;
}

.mobile-menu .submenu li a {
  font-size: 14px;
  padding: 6px 10px;
  background: #111;
  border-radius: 4px;
}

/* عند الفتح */
.mobile-menu li.open > .submenu {
  display: block;
}