body.myeqy{
  margin:0;
  font-family: Tahoma, Arial, sans-serif;
  background:#F4eedd;
  color:#303020;
  font-size:12px;
}

*{ box-sizing:border-box; }

a{ color:#1a5fb4; text-decoration:none; }
a:hover{ text-decoration:underline; }

/* =========================
   WRAP + LAYOUT (Responsive)
   ========================= */
.wrap{
  /* بدل 1800 ثابت: خليها مرنة بس بنفس إحساس التصميم */
  max-width: 1800px;
  padding: 0 20px;
  margin: 0 auto;
}

/* عمودين: محتوى + سايدبار (السايدبار يمين دايمًا) */
.layout{
  display:flex;
  align-items:flex-start;
  gap:20px;
}

/* في RTL: نخلي السايدبار يمين والمحتوى شمال */
.sidebar{ order: 1; }
.leftcol{ order: 2; }

.leftcol{
  flex: 1 1 auto;
  min-width: 0; /* مهم عشان المحتوى مايفرش */
}

.sidebar{
  flex: 0 0 260px; /* عرض ثابت للسايدبار قريب من اللي عندك */
  margin-top:20px;
}

/* =========================
   TOPBAR
   ========================= */
.topbar{
  background: linear-gradient(#f7efe6, #e9d7c4);
  border-bottom:1px solid #D0C0B0;
  padding:2px 0;
}

.topbar-inner{
  /* كان فيه margin-left ثابت بيبوّظ الدنيا */
  max-width: 1322px;
  margin: 0 auto;
  border:0px solid #D0C0B0;
  padding:18px 20px;
}

.logo{
  float: right;
  display: flex;
  align-items: center;
}

.logo img{
  height: 42px;        /* 👈 اتحكم في حجم اللوجو */
  width: auto;
  display: block;
}

.siteurl{
  float:left;
  padding-top:18px;
  color:#8a7a6a;
}

/* إعلان الهيدر */
.topbar-ad{ padding:0; border-bottom:1px solid #D0C0B0; }
.topbar-ad-link{ display:block; text-align:center; }
.topbar-ad-img{ max-width:100%; height:auto; display:block; margin:0 auto; }

/* =========================
   NAVBOX
   ========================= */
.navbox{
  width:100%;
  background:#fff;
  border:1px solid #D0C0B0;
  padding:22px;
  margin:15px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.navbox-right{
  display:flex;
  align-items:center;
  gap:14px;
  flex: 1 1 auto;
  min-width: 0;
}

.navitem{
  width:90px;
  text-align:center;
  font-weight:bold;
  color:#333;
  text-decoration:none;
  flex: 0 0 auto;
}

.navimg{
  width:80%;
  display:block;
  margin:0 auto 4px auto;
}

.navtext{
  display:block;
  font-size:13px;
  text-decoration:none;
  color:inherit;
}

.navtext,
.navtext:hover,
.navtext:focus{
  text-decoration:none !important;
}

.navbox-left{
  flex: 0 0 340px; /* زي ما كنت عامل */
}

.searchform{
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
  padding:0;
  justify-content:flex-start;
}

.searchlabel{
  font-weight:bold;
  color:#333;
  white-space:nowrap;
  margin:0;
  padding:0;
  line-height:1;
}

.searchinput{
  width:180px;
  height:26px;
  border:1px solid #b9b0a5;
  outline:none;
}

.searchbtn{
  height:28px;
  padding:0 12px;
  border:1px solid #b7772a;
  background: linear-gradient(#f1a259, #d97a1e);
  color:#fff;
  cursor:pointer;
  font-weight:bold;
}

/* =========================
   CONTENT
   ========================= */
.content{
  width:1260px;
  max-width:100%;
  margin-top:10px;
  background: transparent;
  border:0;
  position:relative;

  /* مهم عشان نسيب مساحة للشريط الفاتح */
  padding-top:30px;
  box-sizing:border-box;
}

/* الشريط اللي فوق المحتوى (بدل ::before بعرض ثابت) */
.content::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:60px;                 /* ارتفاع الشريط الفاتح */
  background:#f5f3ee;
  border:1px solid #D0C0B0;
  box-sizing:border-box;
  z-index:0;

  /* بدل width: 1322px */
  width:100%;
}

/* عنوان الصفحة إن وجد */
.page-title{
  background:#f5f3ee;
  border:0;
  padding:8px 10px;
  margin-bottom:10px;
  font-weight:bold;
  z-index:1;
  position:relative;
}

/* =========================
   SIDEBAR
   ========================= */
.sidebox{
  background:#8f8a7f;
  border:1px solid #6f6a60;
  margin-bottom:10px;
  width:100%;
  border-top-left-radius:8px;
  border-top-right-radius:8px;
  overflow:hidden;
}

.sidebox-title{
  background: linear-gradient(#f1a259, #d97a1e);
  border-bottom:1px solid #6f6a60;
  padding:26px 26px;
  font-weight:bold;
  color:#fff;
  text-align:center;
  margin-top:-3px
}

/* ✅ استبدال الهيدر الأورنج بصورة للـ Main Menu فقط */
.sidebox-title-main{
  /* الصورة اللي عندك: public/images/jjk.png */
  background-image: url("/images/jjk.png");
  background-repeat: no-repeat;
  background-position: center top;

  /* عشان تملى نفس عرض المنيو بالظبط من غير قص */
  background-size: 100% 100%;

  /* شيل البادينج اللي كان بيعمل ارتفاع زيادة */
  padding: 0 !important;

  /* ارتفاع الهيدر (ظبطه حسب شكل الصورة عندك) */
  height: 120px;

  /* خليه بلوك */
  display: block;
}

/* اختياري: لو لسه باين لون الأورنج تحت الصورة لأي سبب */
.sidebox-main-menu .sidebox-title{
  background: transparent;
}

.sidebox-title-img{
  width: 100%;
  height: auto;
  display: block;
}

.sidebox-title-main{
  padding:27px;
}

.sidebox-title-ads{
  padding:5px;
  border-radius:0;
}

.side-menu{
  list-style:none;
  margin:0;
  padding:0;
}

.side-menu li{
  border-bottom:1px solid #7a756b;
}

.side-menu a{
  display:block;
  padding:16px 10px;
  color:#fff;
  text-decoration:none;
  font-weight:bold;
  text-align:center;
}

.side-menu a:hover{
  background:#7f7a70;
}

.adbox{
  padding:10px;
  color:#777;
  background:#F0F0F0;
  text-align:center;
}

/* =========================
   SUBMENU (RTL Safe)
   ========================= */
.cat-link{ position:relative; }
.cat-arrow{
  float:left;
  font-size:12px;
  margin-left:6px;
  cursor:pointer;
  color:#666666;
}

.sub-menu{
  margin:0;
  padding:0;
  list-style:none;
  background-color:#d8d2c2;
}

.sub-menu a{
  display:block;
  padding-right:22px;
  font-size:12px;
  color:#666666;
}

.sub-menu a:hover{
  background-color:#b4aea0;
}

/* =========================
   GRID CARDS (Responsive)
   ========================= */

/* بدل float: Grid يطلع نفس الشكل على أي شاشة */
.grid{
  direction: rtl;
  display:grid;
  gap:12px;
  /* نفس 4 كروت غالبًا على الشاشات الكبيرة */
  grid-template-columns: repeat(4, minmax(260px, 1fr));
  align-items:start;
}

/* الكارت يفضل شكله ثابت */
.card{
  border:1px solid #D0C0B0;
  background:#fff;
  width:100%;
}

/* عنوان */
.card-title{
  background:#faf7f0;
  border-bottom:1px solid #D0C0B0;
  font-weight:bold;
  min-height:45px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px;
  text-align:center;
  color:#c40000 !important;
}

.card-title a{
  color:#c40000 !important;
  font-weight:bold;
  text-decoration:none;
  display:inline-block;
}

/* صورة: خلي العرض 100% بدل أرقام ثابتة */
.card-image img{
  width:100%;
  height:260px;
  object-fit:cover;
  border:1px solid #D0C0B0;
  background:#F0F0F0;
  display:block;
}

/* وصف */
.card-desc{
  color:#000080;
  height:60px;
  overflow-y:auto;
  overflow-x:hidden;
  line-height:22px;
  font-size:18px;
  padding:6px 8px;
}

/* ميتا */
.card-meta{
  border-top:1px dotted #D0C0B0;
  background:#faf7f2;
  color:#a33;
  text-align:center;
  padding:17px 0 !important;
}

.downloads{
  font-weight:bold;
  text-align:center;
}

.card-link,
.card-link:hover,
.card-meta-link,
.card-meta-link:hover{
  text-decoration:none;
  color:inherit;
  display:block;
}

.card a:hover{
  text-decoration:none !important;
}

/* =========================
   FOOTER
   ========================= */
.footer{
  margin-top:15px;
  padding:12px 0;
  border-top:1px solid #D0C0B0;
  color:#7a6a5a;
}

/* =========================
   RESPONSIVE BREAKPOINTS
   ========================= */

/* شاشات متوسطة: 3 كروت */
@media (max-width: 1400px){
  .grid{ grid-template-columns: repeat(3, minmax(240px, 1fr)); }
}

/* تابلت: 2 كارت + navbox يتكسر بشكل محترم */
@media (max-width: 1024px){
  .layout{
    flex-direction:column;
  }

  /* سايدبار فوق/تحت حسب ما تحب — هنا خليته فوق المحتوى */
  .sidebar{ order: 1; flex: 1 1 auto; width:100%; }
  .leftcol{ order: 2; width:100%; }

  .navbox{
    flex-direction:column;
    align-items:stretch;
  }

  .navbox-left{
    flex: 1 1 auto;
    width:100%;
  }

  .searchform{
    justify-content:center;
    flex-wrap:wrap;
  }

  .grid{ grid-template-columns: repeat(2, minmax(220px, 1fr)); }
}

/* موبايل: 1 كارت */
@media (max-width: 600px){
  .grid{ grid-template-columns: 1fr; }
  .navbox-right{ justify-content:center; flex-wrap:wrap; }
  .navitem{ width:80px; }
  .card-desc{ font-size:16px; }
}
/* 1) زوّد مسافة يمين/شمال الصفحة (ده هيكبر المسافة ناحية الشمال اللي إنت محددها) */
.wrap{
  padding-left: 70px;   /* كانت 20 */
  padding-right: 30px;  /* كانت 20 - خليها أقل شوية عشان RTL */
}

/* 2) كبر المسافة بين السايدبار والمحتوى (المستطيل الأزرق اللي بين القائمة والكروت) */
.layout{
  gap: 55px; /* كانت 20 */
}

/* 3) خلي السايدبار أرفع شوية */
.sidebar{
  flex: 0 0 230px; /* كانت 260 */
}

/* 4) صغّر الكروت شوية عشان نكسب مسافات */
.grid{
  grid-template-columns: repeat(4, minmax(235px, 1fr)); /* كانت min 260 */
  gap: 14px; /* لو حابب تزود/تقلل المسافة بين الكروت نفسها */
}

/* 5) لو حابب الصورة تبقى متناسبة مع تصغير الكارت */
.card-image img{
  height: 245px; /* كانت 260 */
}
/* Grid responsive للكروت */
.grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(320px, 1fr)); /* Desktop */
  gap: 18px;
  align-items: start;
}

/* الكارت ياخد عرض العمود */
.card{
  float: none;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

/* الصورة تتمدد مع الكارت */
.card-image img{
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}

/* Tablet: 2 كارت */
@media (max-width: 1100px){
  .grid{
    grid-template-columns: repeat(2, minmax(280px, 1fr));
  }
  .card-image img{
    height: 280px;
  }
}

/* Mobile: 1 كارت */
@media (max-width: 700px){
  .grid{
    grid-template-columns: 1fr;
  }
  .card-image img{
    height: 240px;
  }
}
/* =========================
   Responsive NAVBOX
   ========================= */

/* الأساس */
.navbox{
  width: 100%;
  max-width: 1322px;            /* نفس روح التصميم */
  margin: 15px auto;
  padding: 18px 20px;
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;

  background:#fff;
  border:1px solid #D0C0B0;
}

/* جزء الأيقونات */
.navbox-right{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  flex: 1 1 auto;
  flex-wrap: nowrap;            /* ديسكتوب: صف واحد */
}

.navitem{
  width: 90px;
  flex: 0 0 auto;
  text-align: center;
}

/* جزء البحث */
.navbox-left{
  flex: 0 0 360px;              /* ثابت على الديسكتوب */
  display: flex;
  justify-content: flex-start;
}

.searchform{
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.searchinput{
  width: 100%;
  min-width: 140px;
  box-sizing: border-box;
}

/* شاشات متوسطة: يبدأ يلف */
@media (max-width: 1200px){
  .navbox{
    max-width: 100%;
  }

  .navbox-right{
    flex-wrap: wrap;            /* الأيقونات ممكن تنزل سطر */
    justify-content: flex-start;
  }

  .navbox-left{
    flex: 0 0 320px;
  }

  .navitem{
    width: 86px;
  }
}

/* موبايل: الأيقونات فوق والبحث تحت */
@media (max-width: 800px){
  .navbox{
    flex-direction: column;
    align-items: stretch;
  }

  .navbox-right{
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
  }

  .navbox-left{
    flex: 1 1 auto;
    width: 100%;
  }

  .searchform{
    justify-content: center;
  }

  .searchlabel{
    white-space: nowrap;
  }

  .navitem{
    width: 92px;
  }
}

/* أصغر موبايل: تصغير بسيط */
@media (max-width: 480px){
  .navitem{
    width: 78px;
  }

  .navtext{
    font-size: 12px;
  }
}
/* =========================================================
   FINAL GRID + SPACING (Put this at the VERY END of CSS file)
   ========================================================= */

/* مسافات يمين/شمال الصفحة */
.wrap{
  padding-left: 70px;
  padding-right: 30px;
}

/* المسافة بين السايدبار والمحتوى */
.layout{
  gap: 55px;
}

/* السايدبار أرفع شوية */
.sidebar{
  flex: 0 0 230px;
}

/* ✅ GRID (واحد فقط) + يطلع لفوق يدخل في الشريط الفاتح */
.grid{
  direction: rtl;
  position: relative;
  z-index: 1;

  display: grid;
  grid-template-columns: repeat(3, minmax(320px, 1fr)); /* Desktop: 3 cards */
  gap: 18px;
  align-items: start;

  /* يتلم من اليمين والشمال */
  width: 100%;
  padding: 0 18px;

  /* يطلع لفوق ويغطي جزء من الشريط الفاتح */
}

/* الكارت ياخد عرض العمود */
.card{
  float: none !important;
  width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box;
}

/* الصورة تتمدد مع الكارت */
.card-image img{
  width: 100% !important;
  height: 300px;
  object-fit: cover;
  display: block;
  box-sizing: border-box;
}

/* Tablet: 2 كارت */
@media (max-width: 1100px){
  .wrap{
    padding-left: 20px;
    padding-right: 20px;
  }

  .layout{
    gap: 20px;
    flex-direction: column;
  }

  .sidebar{
    flex: 1 1 auto;
    width: 100%;
  }

  .grid{
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    margin-top: 20px;
    padding: 0 10px;
  }

  .card-image img{
    height: 280px;
  }
}

/* Mobile: 1 كارت */
@media (max-width: 700px){
  .grid{
    grid-template-columns: 1fr;
  }

  .card-image img{
    height: 240px;
  }
}
.page-title{
  display:none !important;
}
/* =========================
   FORCE: Sidebar Menu Header Image
   ========================= */

/* امنع الأورنج (حتى لو .sidebox-title متكرر في الملف) */
.sidebox-main-menu .sidebox-title.sidebox-title-main.sidebox-title-main--img{
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid #6f6a60 !important;
  line-height: 0 !important;
  overflow: hidden;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

/* الصورة تاخد نفس عرض المنيو بالمللي + تفضل Responsive */
.sidebox-main-menu .sidebox-title-img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* ✅ Sidebar main menu header: use image instead of gradient */
.sidebar .sidebox-main-menu .sidebox-title.sidebox-title-main{
  background-image: url("../images/jjk.png") !important; /* لأن CSS داخل /css */
  background-repeat: no-repeat !important;
  background-position: center top !important;
  background-size: 100% 100% !important;

  height: 60px !important;     /* عدّل الرقم لو عايزها أعلى/أقصر */
  padding: 0 !important;

  display: block !important;
  border-bottom: 1px solid #6f6a60 !important;

  /* عشان تفضل راكبة مع انحناءة المنيو */
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

/* ✅ امنع أي خلفية قديمة من تغطي */
.sidebar .sidebox-main-menu .sidebox-title{
  background-color: transparent !important;
}

/* ✅ Header logo image */
.logo-link{
  float:right;
  display:block;
  line-height:0;
  text-decoration:none;
}

.logo-img{
  height:44px;      /* عدّلها لو عايزه أكبر/أصغر */
  width:auto;
  display:block;
}
/* ✅ Logo as background (حل مضمون) */
.logo{
  float:right;
  display:block;
  width:170px;            /* عدّل العرض حسب مقاس اللوجو */
  height:48px;            /* عدّل الارتفاع حسب اللي يناسب الهيدر */
  background: url("/images/logo.png") no-repeat right center;
  background-size: contain;
  text-decoration:none;
  position:relative;
  margin-bottom:5px;
}

/* fallback text لو الصورة مش موجودة */
.logo-fallback{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  font-weight:bold;
  font-size:34px;
  color:#E08010;
  letter-spacing:1px;
}

/* لو الصورة اتلقت، نخفي النص */
.logo{
  color: transparent;
}
/* =========================
   HEADER / LOGO FIX
   ========================= */

.topbar-inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 0;              /* يشيل المستطيل اللي مش عايزينه */
  background: transparent;
}

/* اللوجو */
.logo{
  display: block;
  line-height: 0;
}

/* صورة اللوجو */
.logo img{
  height: 48px;           /* نفس إحساس الحجم القديم */
  width: auto;
  display: block;
}

/* رابط الموقع */
.siteurl{
  font-size: 14px;
  color: #8a7a6a;
}

.navbox .navtext{
  display: none;
}