/* ✅ إعداد عام لكل العناصر */
* {
  box-sizing: border-box;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
 
}



/* ✅ الأزرار ومجالات الإدخال */
button, input, textarea, select {
  font-family: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  touch-action: manipulation;
  cursor: pointer;
  
}



body {
  width: var(--app-width);
  max-width: var(--app-width);
  padding-left: var(--safe-left);
  padding-right: var(--safe-right);
  font-weight: bold;
  margin:0;
  font-family:"Cairo",sans-serif;
}


 
button {
  margin: 22px 0;
  padding: 50px;
  width: 100%;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 40px;
  text-align: center;
  font-weight: bold;
}



  


    
   
  /* تصميم العناوين */
  button {
    padding: 15px;
    font-weight: bold;
   
  }
 
   /* تصميم الخيارات */
   button  {
    padding: 15px;
    display: flex;
     justify-content: space-between;
     cursor: pointer;
     font-weight: bolder;


     
   
 }
  
  
   
  /* ألوان الأيقونات */
  button.subscription { color: rgb(255, 240, 26); }
  button { color: #d57331; }
  
  

  


/* الوضع الداكن */
.light-mode  .sidebar{
  background-color: #FFFF;
  color: #000; /* نصوص التطبيق عامةً باللون الأسود */
}

.dark-mode .sidebar {
  background-color: #1c222b; /* خلفية القائمة داكنة */
  color: #FFFF;             /* نصوص القائمة باللون الأبيض */
}
  



/* الوضع الداكن */
.light-mode  .ss-1{
  background-color: #FFFF;
  color: #000; /* نصوص التطبيق عامةً باللون الأسود */
}

.dark-mode .ss-1 {
  background-color: #1c222b; /* خلفية القائمة داكنة */
  color: #FFFF;             /* نصوص القائمة باللون الأبيض */
}

/* الوضع الداكن */
.dark-mode .sidebar-icon {

  color: #FFFF; /* نصوص التطبيق عامةً بلون رصاصي (يمكن تعديله حسب الحاجة) */
}

.dark-mode .sidebar-icon { /* خلفية القائمة داكنة */
  color: #FFFF;             /* نصوص القائمة باللون الأبيض */
}
  
/* الوضع الداكن */
 .sidebar-menu ul li i {

  color: hwb(0 0% 100%); /* نصوص التطبيق عامةً بلون رصاصي (يمكن تعديله حسب الحاجة) */
}











/* الوضع الفاتح */
.light-mode .nav-bar {
  background-color: white; /* لون خلفية فاتح للقائمة العلوية */
 
}

/* الوضع الداكن */
.dark-mode .nav-bar {
  background-color: #2c313c; /* لون خلفية داكن للقائمة العلوية */
 
}



  




/* الوضع الفاتح */
.light-mode .a {
  background-color: #ffffffff; /* لون خلفية فاتح للقائمة العلوية */
}

/* الوضع الداكن */
.dark-mode .a {
  background-color: #2c313c; /* لون خلفية داكن للقائمة العلوية */
 
}
  

  

/* الوضع الفاتح */
.light-mode .c {
 color: #2c313c; /* لون خلفية داكن للقائمة العلوية */
}

/* الوضع الداكن */
.dark-mode .c {
  color: #ffffffff; /* لون خلفية فاتح للقائمة العلوية */
}
  


/* الوضع الفاتح */
.light-mode .page-title {
 
  color: hsl(0, 2%, 47%);             /* لون نص أسود للقائمة العلوية */
}

/* الوضع الداكن */
.dark-mode .page-title {
  color: #fff;               /* لون نص أبيض للقائمة العلوية */
}





/* الوضع الفاتح */
.light-mode .search-icon {
  color: hsl(0, 2%, 47%);              /* لون نص أسود للقائمة العلوية */
}

/* الوضع الداكن */
.dark-mode .search-icon {
  color: #ffffffff;            /* لون نص أبيض للقائمة العلوية */
}




/* الوضع الفاتح */
.light-mode .view-icon {
  color: hsl(0, 2%, 47%);              /* لون نص أسود للقائمة العلوية */
}

/* الوضع الداكن */
.dark-mode .view-icon {
  color: #ffffffff;              /* لون نص أبيض للقائمة العلوية */
}



/* الوضع الفاتح */
.light-mode .ct {
  color: hsl(0, 2%, 47%);              /* لون نص أسود للقائمة العلوية */
}

/* الوضع الداكن */
.dark-mode .ct{  
  color: #ffffffff;              /* لون نص أبيض للقائمة العلوية */
}




.light-mode .hgnbu {
 background-color: #FFFFFF;            /* لون نص أسود للقائمة العلوية */
}

/* الوضع الداكن */
.dark-mode .hgnbu{  
 background-color: #2c313c;               /* لون نص أبيض للقائمة العلوية */
}


.light-mode .r300 {
  color: #1a1a2e;            /* لون نص أسود للقائمة العلوية */
 }
 
 /* الوضع الداكن */
 .dark-mode .r300{  
  color: #FFFFFFFF;               /* لون نص أبيض للقائمة العلوية */
 }


 .r300{
  color: #000;
 }



/*--------------------------الشريط العلوي مع تنسيق ----------------------------*/

.light-mode .nb-3 .active {
  border-bottom: 3px solid #FF5722;
  color: #FF5722;
}


/* الوضع الداكن */
.dark-mode .nb-3  .active {
  border-bottom: 3px solid hwb(0 100% 0%);
  color: #ffffff;
}


/* الوضع الفاتح */
.light-mode .he i .active {
   color: orange;
}

/* الوضع الداكن */
.dark-mode .he i .active {
   color: orange;
}





/* الوضع الفاتح */
.light-mode .nb-3{
  background-color: #FFFFFF;
  color: #000;
}

/* الوضع الداكن */
.dark-mode .nb-3{
  background-color: #2c313c;
}











/* الوضع الفاتح */
.light-mode .bo-9{
  background-color: lch(0% 0 0);
  color: #000000;
}

/* الوضع الداكن */
.dark-mode .bo-9{
  background-color: lch(21.37% 16.88 293.92);
color: #FFFFFF;
}



/* الوضع الفاتح */
.light-mode .bo-12{
  background-color: lch(100% 0.01 296.81);

}

/* الوضع الداكن */
.dark-mode .bo-12{
  background-color: lab(18.05% 6.47 -14.52);
}


/* الوضع الفاتح */
.light-mode .bo-6{
  background-color: #fff;
  color: #000;
  font-weight: bolder;
}

/* الوضع الداكن */
.dark-mode .bo-6{
  background-color: #1a1e26;
  color: #000;
}


/* الوضع الفاتح */
.light-mode .b23-6{
  background-color: #FAFAFA;
  color: #000;
}

/* الوضع الداكن */
.dark-mode .b23-6{
  background-color: #1a1e26;
  color: #ffffff;
}


/* الوضع الفاتح */
.light-mode .bo-1{
  background-color: hsl(0, 0%, 100%);
  color: lch(0% 0 0);
}

/* الوضع الداكن */
.dark-mode .bo-1{
  background-color: #1a1e26;
color: #FFFFFF;
}

/* الوضع الفاتح */
.light-mode .bot{
  background-color: white;
  color: lch(0% 0 0);
  
}

/* الوضع الداكن */
.dark-mode .bot{
  background-color: #252932;
color: #FFFFFF;
}



/* الوضع الفاتح */
.light-mode .hj-9 {
  background-color: hsl(0, 0%, 100%);
  color: #000; /* <-- هنا خليته أسود واضح */
}

/* الوضع الداكن */
.dark-mode .hj-9 {
  background-color: #1a1e26;
  color: #fff;
}

/* الوضع الفاتح */
.light-mode .d-2{
  color: #000000;
  
}

/* الوضع الداكن */
.dark-mode .d-2{
color: #000000;
}

/* الوضع الفاتح */
.light-mode .dd-t{
  color: #000000;
}

/* الوضع الداكن */
.dark-mode .dd-t{
color: #FFFFFF;
}


/* 🔴 وسم فلر */
.filler-tag {
  background: #e53935;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  border-radius: 6px;
  padding: 3px 7px;
  display: inline-block;
  vertical-align: middle;
  box-shadow: 0 0 6px rgba(0,0,0,0.3);
}


/* 👁️ الأيقونة الجديدة */
.new-eye-icon {
  font-size: 18px;
  color: #4ade80; /* لون مميز */
  transition: 0.3s ease;
}

/* عند الوضع الفاتح / الداكن */
.light-mode .new-eye-icon {
  color: #000; /* أسود في الوضع الفاتح */
}


/* تأكيد أن الأيقونة تكون على اليسار فقط */
.episode-left-icons {
  flex: 0 0 auto;
  margin-left: 1090%;
}

/* 🎯 تنسيق أساسي للأيقونة في الجهة اليسرى */
.episode-left-icons {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 0 0 auto;
  margin-left: 6px;
  margin-right: auto;
  transform: translateY(1px);
  transition: all 0.25s ease;
}

/* 📱 الهواتف الصغيرة جداً */
@media (max-width: 480px) {
  .episode-left-icons {
    margin-left: 1200%;
  }
}

/* 📱 الهواتف المتوسطة (من 481px إلى 600px) */
@media (min-width: 481px) and (max-width: 600px) {
  .episode-left-icons {
    margin-left: 1600%;
  }
}

/* 💻 الأجهزة اللوحية (تابلت / آيباد) */
@media (min-width: 601px) and (max-width: 1024px) {
  .episode-left-icons {
    margin-left: 2300%;
  }
}

/* 🖥️ الشاشات الكبيرة (حاسبة / لابتوب) */
@media (min-width: 1025px) {
  .episode-left-icons {
    margin-left: 5680%;
    
  }
}


/* 🧭 ترتيب السطر للحلقات */
[class*="episode-line-"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* منع الأيقونة من الظهور يم الحلقة */
.episode-name-[idNum] i,
.episode-right-info i {
  display: none !important;
}


/* الوضع الفاتح */
.light-mode .search-button:active,
.light-mode .searchButtonNew61616:active,
.light-mode .searchButtonNew10101:active,
.light-mode .searchButtonNew120120120:active,
.light-mode .searchButtonNew19090922:active,
.light-mode .searchButtonNew212212210:active {
  background: rgba(0, 0, 0, 0.1);
}

/* الوضع الداكن */
.dark-mode .search-button:active,
.dark-mode .searchButtonNew61616:active,
.dark-mode .searchButtonNew10101:active,
.dark-mode .searchButtonNew120120120:active,
.dark-mode .searchButtonNew19090922:active,
.dark-mode .searchButtonNew212212210:active {
  background: rgba(255, 255, 255, 0.2);
}



/* الوضع الفاتح */
.light-mode .bd-dd{
  background-color: #FFFFFF;
  color: #000;
}

/* الوضع الداكن */
.dark-mode .bd-dd{
  background-color: #1a1e26;
  color: hsl(0, 0%, 100%);
}


/* الوضع الفاتح */
.light-mode .dd-9{
  color: hsl(191, 100%, 54%);
}

/* الوضع الداكن */
.dark-mode .dd-9{
color: #FFFFFF;
}


/* الوضع الفاتح */
.light-mode .cc-4{
  color: hwb(141 27% 0%);
}

/* الوضع الداكن */
.dark-mode .cc-4{
color: hwb(125 2% 17%);
}


/* الوضع الفاتح */
.light-mode .eer-4{
  color: lch(53.67% 84.81 33.84);
}

/* الوضع الداكن */
.dark-mode .eer-4{
 color: oklab(62.150000000000006% 0.18657 0.08927);
}

/* الوضع الفاتح */
.light-mode .c1-4{
  color: lab(37.82% 76.35 -94.6);
  background-color: rgba(56, 29, 145, 0.477);
  border-radius: 12px;
}

/* الوضع الداكن */
.dark-mode .c1-4{
color: lch(16.87% 70.65 308.97);
background-color: lch(37.6% 122.2 305.91 / 0.477);
  border-radius: 12px;
}


.light-mode .c1c-1{
  color: lch(21.35% 16.84 248.18);
  background-color: lab(73.45% -12.91 -41.07 / 0.477);
  border-radius: 12px;
}

/* الوضع الداكن */
.dark-mode .c1c-1{
color: lab(76.82% -19.46 -35.84);
background-color: hsla(201, 86%, 12%, 0.349);
border-radius: 12px;

height: 15%;
}



/* الوضع الفاتح */
.light-mode .cc-5{
  color: lab(91.61% -38.09 -13.25);
}

/* الوضع الداكن */
.dark-mode .cc-5{
color: lab(46.25% -16 -24.52);
}



/* الوضع الفاتح */
.light-mode .cc-6{
  color: lch(27.44% 98.18 305.11);
}

/* الوضع الداكن */
.dark-mode .cc-6{
color: lch(23.29% 59.25 303.48);
}



/* الوضع الفاتح */
.light-mode .c2c2-2{
  color: hsl(253, 75%, 62%);
}

/* الوضع الداكن */
.dark-mode .c2c2-2{
color: hsl(252, 91%, 47%);
}

/* الوضع الفاتح */
.light-mode .cc-3{
  color: hsl(29, 100%, 56%);
}

/* الوضع الداكن */
.dark-mode .cc-3{
color: hsl(16, 96%, 49%);
}

/* الوضع الفاتح */
.light-mode .cc-7{
  color: hwb(29 0% 78%);
}

/* الوضع الداكن */
.dark-mode .cc-7{
color: hwb(16 4% 32%);
}

/* الوضع الفاتح */
.light-mode .cc-2{
  color: hwb(53 0% 0%);
   background-color: #4948097a;
  border-radius: 12px;
}

/* الوضع الداكن */
.dark-mode .cc-2{
color: lab(95.38% -17.77 89.03);
 background-color: #fff8347a;
  border-radius: 12px;
}






/*--------------------------الشريط العلوي مع تنسيق ----------------------------*/



/* الوضع الفاتح */
.light-mode .single-column .episode-number {
  background-color: rgba(255, 127, 80, 0.2); /* خلفية شفافة باللون البرتقالي */
  color: hsl(240, 26%, 18%);
  }
  
  /* الوضع الداكن */
  .dark-mode .single-column .episode-number{
    background-color: rgba(255, 127, 80, 0.2); /* خلفية شفافة باللون البرتقالي */
  color: white;
  }
  
  
  

/* الوضع الفاتح */
.light-mode .ne-icon {
color: hsl(240, 26%, 18%);
}

/* الوضع الداكن */
.dark-mode .ne-icon {
color: #FFFFFF;
}




/* الوضع الفاتح */
.light-mode .bottom-nav {
  background-color: #FFFFFF; /* لون خلفية داكن للقائمة العلوية */
color: hsl(240, 26%, 18%);
}

/* الوضع الداكن */
.dark-mode .bottom-nav {
  background-color: #1a1e26;
color: #FFFFFF;
}





/* الوضع الفاتح */
.light-mode .bottom-nav a  {
 color: lch(21.37% 16.88 293.92);
}

/* الوضع الداكن */
.dark-mode .bottom-nav a  {
color: #FFFFFF;
}


/* الوضع الفاتح */
.light-mode .header-bar-12332109 {
  background-color: #FFFFFF; /* لون خلفية داكن للقائمة العلوية */
color: hsl(240, 27%, 18%);
}

/* الوضع الداكن */
.dark-mode .header-bar-12332109 {
  background-color:  rgb(23, 23, 33); /* لون خلفية داكن للقائمة العلوية */
color: #FFFFFF;
}





/* الوضع الفاتح */
.light-mode .top-header-anim {
  background-color: #FFFFFF; /* لون خلفية فاتح للقائمة العلوية */
 
}

/* الوضع الداكن */
.dark-mode .top-header-anim {
  background-color: hsl(240, 27%, 18%); /* لون خلفية داكن للقائمة العلوية */
}
  



/* الوضع الفاتح */
.light-mode .section-title-12332109 {

  color: hwb(0 0% 100%); /* لون خلفية داكن للقائمة العلوية */
}

/* الوضع الداكن */
.dark-mode .section-title-12332109 {
  color: hsl(240, 27%, 18%); /* لون خلفية داكن للقائمة العلوية */

}



/* الوضع الفاتح */
.light-mode .view-btn-12332109 {

  color: hwb(0 0% 100%); /* لون خلفية داكن للقائمة العلوية */
}

/* الوضع الداكن */
.dark-mode .view-btn-12332109 {
  color: hsl(240, 27%, 18%); /* لون خلفية داكن للقائمة العلوية */

}





/* الوضع الفاتح */
.light-mode .stats-12332109 {

  color: hwb(0 0% 100%); /* لون خلفية داكن للقائمة العلوية */
}

/* الوضع الداكن */
.dark-mode .stats-12332109 {
  color: hsl(240, 27%, 18%); /* لون خلفية داكن للقائمة العلوية */

}




/* الوضع الفاتح */
.light-mode .modal {

  background-color: #FAFAFA; /* لون خلفية داكن للقائمة العلوية */
}

/* الوضع الداكن */
.dark-mode .modal {
  background-color: #1a1e26; /* لون خلفية داكن للقائمة العلوية */

}





/* الوضع الفاتح */
.light-mode .ce {

color: hwb(0 32% 67%); /* لون خلفية داكن للقائمة العلوية */
}

/* الوضع الداكن */
.dark-mode .ce {
 color:  #FFFFFF; /* لون خلفية داكن للقائمة العلوية */

}



/* دعم الوضع الفاتح والداكن */
.light-mode .sidebar-menu li::before {
  background: rgba(0, 0, 0, 0.1);
}

.dark-mode .sidebar-menu li::before {
  background: rgba(255, 255, 255, 0.2);
}

/* أسماء كل الأزرار */
#ae-button i,
#etet-button i,
#areyou-button i,
#another-button i,
#ano-button i,
#ther-button i,
#io-button i,
#ieie-button i,
#trtro-button i {
  transition: transform 0.3s ease;
  display: inline-block; /* مهم للتدوير الصحيح */
}

/* عند فتح القائمة - تدوير كل الأيقونات 90 درجة */
body.sidebar-open #ae-button i,
body.sidebar-open #etet-button i,
body.sidebar-open #areyou-button i,
body.sidebar-open #another-button i,
body.sidebar-open #ano-button i,
body.sidebar-open #ther-button i,
body.sidebar-open #io-button i,
body.sidebar-open #ieie-button i,
body.sidebar-open #trtro-button i {
  transform: rotate(90deg);
}

button{
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

    
 
  
  
  
  
  
  



/* لون السهم  في الاعدادات*/
.hgnbu {
  background-color: white;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
   top: 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  right: 0;
  z-index: 2000;
  height: 60px; /* تحديد ارتفاع ثابت للقائمة العلوية */
  display: flex;
  
}
/* الهيدر العام */
.hgnbu {
  background-color: white;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  right: 0;
  z-index: 2000;
  height: 60px; /* ارتفاع ثابت لكل الشاشات */
  padding: 0 15px;
  margin-top: 30px;
}

/* نص الإعدادات مع السهم */
.settings-text {
  display: flex;
  align-items: center;
  gap: 10px; /* مسافة بين السهم والنص */
  font-weight: bold;
  margin-top: 5px;
  position: relative;
}

/* السهم */
.bhgyw {
  font-size: 40px; /* حجم افتراضي */
  width: 55px;
  height: 55px;
  display: inline-flex;
   justify-content: center;
  align-items: center;
  transform: translateX(170px);
  border-radius: 50px;
  
}

.bhgyw:hover{
background-color: lch(22.17% 5.16 329.2 / 0.904);
}


/* ---------- ميديا كويريز لجميع الشاشات ---------- */

/* شاشة صغيرة (موبايل < 768px) */
@media (max-width: 768px) {
  .bhgyw {
    font-size: 28px;
    margin-right: 50px;
  }
  .settings-text {
    font-size: 18px;
    flex-direction: row; /* السهم دائمًا على اليمين */
  transform: translateX(-40px);
  }
}

/* شاشة متوسطة (تابلت 769px – 1280px) */
@media (min-width: 769px) and (max-width: 1280px) {
  .bhgyw {
    font-size: 26px;
    margin-right: -300px;

  }
  .settings-text {
    font-size: 20px;
    flex-direction: row; /* السهم دائمًا على اليمين */
   transform: translateX(100px);
  }
}

/* شاشة كبيرة (ديسكتوب + لابتوب > 1280px) */
@media (min-width: 1281px) {
  .bhgyw {
    font-size: 30px;
    margin-right: -1100px;
  }
  .settings-text {
    font-size: 23px;
    flex-direction: row; /* السهم دائمًا على اليمين */
  
  }
}




.ada{
  padding-bottom: 20%;
  z-index: 1000000;
  .bottom-bar, .tab-bar, #bottomNav {
  display : none !important;
  }
}



.xdx {
  padding-bottom: 50%;
 
}











/* الوضع الفاتح */
.light-mode .bb-9 {

 /* سحابة شفّافة لطيفة */
 background:
 radial-gradient(circle at 25% 35%, #FFFFFF 0%, #FFFFFF 70%),
 radial-gradient(circle at 75% 75%, #FFFFFF 0%, #FFFFFF 65%),
 #FFFFFF;
backdrop-filter:blur(3px);
}

/* الوضع الداكن */
.dark-mode .bb-9 {
 /* سحابة شفّافة لطيفة */
background:
  radial-gradient(circle at 25% 35%, #1a1e26 0%, #1a1e26 70%),
  radial-gradient(circle at 75% 75%, #1a1e26 0%, #1a1e26 65%),
  #1a1e26;
backdrop-filter: blur(3px);

}







/* الخلفية الشفافة */
.popup-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 10000000;
}

/* الصندوق */
.popup-box {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  width: 90%;
  max-width: 320px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  text-align: right;
  direction: rtl;
  position: relative;
}

/* عنوان النافذة */
.popup-box h3 {
  margin-top: 0;
  margin-bottom: 16px;
  font-size: 18px;
  color: #222;
}

/* تنسيق الراديو */
.popup-box label {
  display: flex;
  align-items: center;
  font-size: 16px;
  margin-bottom: 12px;
  cursor: pointer;
  color: #333;
}

/* إخفاء الراديو الأصلي */
.popup-box input[type="radio"] {
  display: none;
}

/* دائرة الراديو */
.popup-box input[type="radio"] + span {
  width: 18px;
  height: 18px;
  border: 2px solid #888;
  border-radius: 50%;
  display: inline-block;
  margin-left: 10px;
  position: relative;
}

/* الدائرة الداخلية */
.popup-box input[type="radio"]:checked + span::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  background-color: #f05454;
  border-radius: 50%;
}

/* زر موافق */
.popup-box button {
  width: 100%;
  padding: 10px;
  background-color: #f05454;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
}

.popup-box button:hover {
  background-color: #d94343;
}










 /* ------- متغيّرات مرنة وأساسيات -------- */
  :root{
    --nav-h: clamp(52px, 6vw, 64px);
    --space-1: clamp(4px, 0.6vw, 8px);
    --space-2: clamp(6px, 1vw, 12px);
    --space-3: clamp(10px, 1.6vw, 16px);
    --space-4: clamp(14px, 2.2vw, 24px);
    --radius: 10px;
  }
 

  /* ================== شريط علوي ================== */
  .nav-bar {
    background-color: #fff;
    width: 100%;
    position: fixed;
    top: 0; right: 0; left: 0;
    z-index: 2000;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    justify-content: center; /* العنوان بالوسط */
    box-shadow: 0 2px 5px rgba(0,0,0,.3);
  }

  /* أزرار الشريط العلوي — تموضع مرن */
  .menu-button,
  .menuButtonNew1,
  .view-button,
  .search-button,
  #sortButton,
  .page-title{
    position: fixed;
    top: calc( (var(--nav-h) - 20px) / 2 ); /* توسيط عمودي للزر بارتفاع 30px */
    height: 30px; width: 30px; 
    display:flex; align-items:center; justify-content:center;
  }

  /* يسار */
  .menuButtonNew1{
    left: 12px;
    top: -11px;
    font-size: 24px;
    border:none; border-radius: 50%;
    background: transparent; color:#000;
  }
  .menuButtonNew1:active{ background: rgba(0,0,0,.08); }

  .view-button{
    right: 18px;
    top: -10px;
    font-size: 20px;
    border-radius: 50%;
    background: transparent; color:#000;
  }
  .view-button:active{ background: rgba(0,0,0,.08); }

  /* يمين */
  #sortButton{
    right: 18px;
    top: -10px;
    padding: 0;
    color: #000;
    background: transparent;
    border: none;
    font-size: 26px;
    border-radius: 50%;
    transform: none; /* إلغاء الترجمات القديمة */
  }

#sortButton:hover{
   background: rgba(0,0,0,.08); 
}

  .search-button{
    right: 54px;
    top: -10px;
    font-size: 22px;
    border: none; border-radius: 50%;
    background: transparent; cursor: pointer;
    transition: background .3s ease;
  }
  .search-button:hover{ background: rgba(0,0,0,.08); }

  .page-title{
    position: fixed;
    left: 30%; transform: translateX(-50%);
    top: calc( (var(--nav-h) - 20px) / 2 );
    width: auto; height: 24px;
    font-size: clamp(16px, 2.5vw, 20px);
    font-weight: 700;
    color: #000;
    padding: 0;
    margin: 0;
  }

  /* ================== الحاوية الرئيسية ================== */
 .co500800123 {
   position: fixed;
    top: var(--nav-h);
    left: 0; right: 0; bottom: 0;
    margin: 0 auto;
    padding: var(--space-5);
    background: #fff;
    box-shadow: 0 4px 8px rgba(0,0,0,.2);
    z-index: 1001;
    overflow-y: auto;
    overflow-x: hidden;
    font-weight: bolder;

  will-change: transform;            /* يخبر المتصفح بتحسين الأداء */
  
}



  /* ================== شبكة البطاقات ================== */
  .sc{
    margin: 0;
    padding: var(--space-1);
    border-bottom: none;
  }

  .cg{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(110px, 74vw, 180px), 1fr));
    gap: var(--space-3);
  }
  

  .cd{
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    gap: 15px;
    transition: transform .2s ease;
    left: 3px;
    z-index: 1;
  padding-top: 5px;

  }

  .cd::after{
    content:"";
    position:absolute; inset:0;
    background: rgba(255,255,255,.2);
    transform: translateY(100%);
    transition: transform .3s ease;
    pointer-events:none;
  }
  .cd:active::after{ transform: translateY(0); }




  .cd img{
    width: 100%;
    height: auto;
    aspect-ratio: 2/3;
    object-fit: cover;
    display: block;
    
  }

  .ct{
    font-size: clamp(11px, 1.8vw, 13px);
    top: 20px;
    z-index: 10000;
    text-align: center;
    margin: 4px 0;
    color: #000;
    margin-top: 6px;
  }

  .ce, .cr{
    font-size: clamp(10px, 1.6vw, 12px);
    margin: 0;
    display: inline-block;
    line-height: 1;
    margin-top: 6px;
  }
  .ce{
    float: left;
    color: #000;
    width: auto;
    text-align: left;
    margin-left: var(--space-2);
  }
  .cr{
    float: right;
    color: hsl(14 94% 51%);
    margin-right: var(--space-2);
  }.episode-number{
    position: absolute;
    bottom: var(--space-2);
    right: var(--space-2);
   transform: translateY(-45px);
    color: #fff;
    font-size: clamp(10px, 1.6vw, 12px);
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 1;
    font-weight: bold;
    text-transform: uppercase;
    background-color: rgba(0,0,0,.35);
    backdrop-filter: blur(2px);
  }

  /* ================== شاشة البحث ================== */
  .search-overlay{
    display: none;
    position: fixed; inset: 0;
    width: 100vw; height: 100dvh;
    background-color: #ffffff;
    z-index: 9999;
    
    overflow-y: auto;
    padding: var(--space-3);
    box-sizing: border-box;
    color: #000;
  }
  .search-overlay .close-search{
    position: absolute;
    top: var(--space-2);
    right: var(--space-3);
    font-size: 28px;
    cursor: pointer;
    color: #000;
  }
  .close-search{
    transform: none;
    left: auto;
    font-size: 20px;
   margin-right: 10px;
   transform: translateY(6px);
  }


  

  .search-overlay input[type="text"]{
    width: 100%;
    padding: var(--space-2);
    font-size: 16px;
    margin-bottom: var(--space-3);
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
  }

  .search-results{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(clamp(110px, 24vw, 180px), 1fr));
    gap: var(--space-3);
    transform: none;
  }

  /* ================== المودال ================== */
  .modal {
  display: none;
  position: fixed;
  overflow-x: hidden; /* موجود عندك */
  z-index: 999999999999;
  left: 0;
  top: 0;
  width: 106%; /* خليته مثل ما عندك */
  height: 100dvh; /* خليته مثل ما عندك */
  background-color: #fff;
  scroll-behavior: smooth; /* تمرير ناعم */
  /* إضافات للسحب السلس */
  overscroll-behavior: contain; /* يمنع تمرير الجسم الخلفي */
  -webkit-overflow-scrolling: touch; /* سحب سلس بالموبايل */
}

.modal-content {
  width: 100%;
  height: 100%;
  overflow-y: auto; /* السكرول فقط هنا */
  padding: var(--space-3);
  box-sizing: border-box;
  position: relative;
}


 

  /* ================== أنماط single-column (كما هي لكن مرتبة) ================== */
  .single-column .cd{
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    transform: none;
    z-index: 1;
  }
  .multi-column .cd{
    flex-direction: row;
    align-items: center;
  }

  .single-column .cd img{
    width: clamp(90px, 22vw, 120px);
    aspect-ratio: 2/3;
    border-radius: 6px;
  }

 .single-column .ct{
  font-size: clamp(13px, 2.6vw, 16px);
  margin-top: var(--space-2);
 transform: translateY(-120px);
}

  .single-column .cr,
  .single-column .ce,
  .single-column .episode-number{
    transform: none;
    margin: 0;
  }
  .single-column .cr{
    font-size: clamp(12px, 2.4vw, 14px);
    float: right; margin-right: var(--space-2);
    transform: translateY(-60px);
    margin-right: 130px;
  }
  .single-column .ce{
    font-size: clamp(12px, 2.4vw, 14px);
    float: left; margin-left: var(--space-2);
     transform: translateY(-60px);
     margin-left: 130px;
  }
  .single-column .episode-number{
    font-size: clamp(10px, 2vw, 12px);
    background-color: rgba(255,127,80,.2);
    right: var(--space-2); bottom: var(--space-2);
    transform: translateY(-90px);
    right: 170px;
    font-weight: bold;
  }
  .single-column .sc{ padding: 0; }

  
  /* تابلت وما فوق */
  @media (min-width: 900px){
    .single-column .episode-number{
      right: 206px;
     }
    }


/* قياسات شاشات كبيرة */
@media (min-width: 1200px) {
  .single-column .episode-number{
     right: 742px;
  }
}
 
  

  /* ================== تحسينات استجابة إضافية ================== */

  /* شاشات صغيرة جداً */
  @media (max-width: 370px){
    .page-title{ font-size: 16px; }
    .search-button, #sortButton, .view-button, .menuButtonNew1{ width:28px; height:28px; }
    .cg, .search-results{
      grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
      gap: var(--space-2);}
  }

  /* تابلت وما فوق */
  @media (min-width: 900px){
    .container500800123{ padding: var(--space-4); }
    .cg, .search-results{
     grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: var(--space-4); }
    .page-title{ font-size: 20px; }
  
  }

  





/* Sidebar الأساسي (مخفي افتراضيًا) */
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 80%; /* نسبة عرض افتراضية */
  max-width: 300px; /* الحد الأقصى */
  min-width: 180px; /* الحد الأدنى */
  height: 100%;
  background: #fff;
  transform: translateX(-100%); /* مخفية */
  overflow-y: auto; /* تمرير عمودي */
  z-index: 13000;

  transition: transform 0.3s ease; /* حركة سلسة */
scroll-behavior: smooth; /* تمرير ناعم */
  /* إضافات للسحب السلس */
  overscroll-behavior: contain; /* يمنع تمرير الجسم الخلفي */
  -webkit-overflow-scrolling: touch; /* سحب سلس بالموبايل */
}

/* حالة الفتح */
.sidebar.sidebar-open {
  transform: translateX(0);
}



/* الهواتف المتوسطة / الهواتف الكبيرة (481px - 767px) */
@media screen and (min-width: 481px) and (max-width: 767px) {
  .sidebar {
    width: 100%;
    max-width: 300px;
  }
}

/* الأجهزة اللوحية مثل iPad (768px - 1024px) */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .sidebar {
    width: 300%;
    max-width: 300px;
  }
}

/* الحواسيب الصغيرة (1025px - 1366px) */
@media screen and (min-width: 1025px) and (max-width: 1366px) {
  .sidebar {
    width: 300%;
    max-width: 300px;
  }
}

/* الحواسيب الكبيرة (>= 1367px) */
@media screen and (min-width: 1367px) {
  .sidebar {
    width: 299%;
    max-width: 300px;
  }
}



.sidebar li {
  color: hsl(0, 0%, 0%);
}



.sidebar-inner {
  width: 300px;
  transform: translateY(13%);
}

.sidebar-logo {
  height: 30px;
  opacity: 0;
  transition: all 0.4s;
}



.sidebar-burger {
  transform: translateY(-100%);
  padding-left: 90%;
}




  /* هذا يضبط كل الروابط داخل القائمة */
a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  text-decoration: none;
  border-radius: 6px;
  font-size: 14px;
  margin: 5px 0;
}

.r300{
margin-right: 10%;
}



/* الأيقونة */
a i {
  font-size: 23px;
  transform: translateX(10%);
}
/* الخط بعد أول عنصرين */
#sidebar-menu li:nth-child(2)::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ccc; /* يبقى رمادي دائمًا */
  margin: 8px 0;
}

/* الخط بعد كل 3 عناصر لاحقة */
#sidebar-menu li:nth-child(n+3):nth-child(3n+2)::after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ccc; /* يبقى رمادي دائمًا */
  margin: 8px 0;
}
/* العنصر النشط */
#sidebar-menu li.active {
 color: #FF5722 !important; /* لون الخلفية فقط */
  font-weight: bold;
}

/* تلوين النص + الأيقونة فقط */
#sidebar-menu li.active a,
#sidebar-menu li.active i {
  color: #FF5722 !important; /* لون الخلفية فقط */
  font-weight: bold;
}

.sidebar a {
  position: relative;
  overflow: hidden;
}

.sidebar a span.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple-effect 0.6s linear;
  background: rgba(255, 255, 255, 0.3); /* لون شفاف */
  pointer-events: none;
  width: 100%;
  transform: translateX(50%);
}

@keyframes ripple-effect {
  to {
    transform: scale(4);
    opacity: 0;
  }
}