/* === إعدادات عامة للـ box-sizing === */
*, *::before, *::after {
  box-sizing: border-box;
}






/* === ميقا مينيو ثانوي لروابط الصفحات الثابتة === */


.secondary-nav-wrapper {
  background-color: #1f1f1f;
  padding: 15px 20px;
  text-align: left;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  position: relative;
  width: 100%;
}
.secondary-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.secondary-nav a {
  color: #000000;
  background-color: #f0f0f0;
  font-size: 15px;
  font-weight: normal;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 4px;
  transition: background 0.3s, color 0.3s;
}
.secondary-nav a:hover {
  background-color: #f0f0f0;
  color: #4167b9;
}
.secondary-nav a.active {
  background-color: #cccccc;
  color: #000;
  font-weight: bold;
}

/* ******************************************************* */
/* =========================
   شريط الأقسام في الرئيسية
   ========================= */
:root{
  --cat-bg:#fff;
  --cat-shadow:0 6px 20px rgba(0,0,0,.06);
  --cat-radius:18px;
  --cat-gap:22px;
  --cat-pad:16px;
  --cat-accent:#7b68ee;
  --cat-muted:#9aa3af;
  --accent-red:#ff2b4a;   /* لون لهجة للأزرار والشريط الجانبي */
  --side-pad:24px;        /* هامش جانبي للصندوق والأزرار المطلة */
    --nav-prev-shift: 0px; /* إزاحة زر السابق (أفقية) */
  --nav-next-shift: 0px; /* إزاحة زر التالي  (أفقية) */

}

/* الحاوية الخارجية للسكشن */
.cat-strip-wrapper{
  max-width: 1430px;
  margin: 28px auto 18px;
  padding: 0;
}

.cat-strip-title{
  text-align:center; font-size:18px; color:#6b7280; margin-bottom:14px;
}

/* الحاوية الرئيسية: زر – (عمود عنوان اختياري) – فيو بورت – زر */
.cat-strip{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  max-width:1430px;
  margin:0 auto;
  overflow:visible; /* التمرير داخل .cat-viewport فقط */
}

/* نمط الصندوق الأنيق مثل المثال */
.cat-strip.fancy{
  background:#fff;
  border-radius:4px;
  padding:18px var(--side-pad); /* ← ربط الحشوة بالمتغيّر */
  box-shadow:0 8px 24px rgba(0,0,0,.06);
  border:1px solid #eef2f7;
  padding-left: 50px;
}

/* مرجع تموضع للأزرار المطلة */
.cat-strip.overlap{
  position: relative;
}

/* عمود العنوان الجانبي (اختياري) */
.cat-intro{
  flex:0 0 230px;
  min-width:180px;
  display:flex; flex-direction:column; justify-content:center;
  gap:8px;
  padding-inline-end:12px;
  position:relative;
  padding-right: 30px;
}
.cat-intro::before{
  content:""; position:absolute;
  inset-inline-start:calc(var(--side-pad) * -0.5); /* يبقى ملاصقًا لحافة الصندوق */
  top:-73px; width:5px; height: 218px;
  background:var(--accent-red); border-radius:0px; right: -25px;
}
.cat-intro .eyebrow{ font-size:16px; font-weight:700; color:var(--accent-red); letter-spacing:.2px; }
.cat-intro .heading{ font-size:22px; margin:0; color:#222; font-weight:800; }

/* العنصر القابل للتمرير */
.cat-viewport{
  flex:1 1 auto;
  min-width:0;
  overflow-x:auto;
  scroll-behavior:smooth;
  scrollbar-width:none;        /* Firefox */
  -ms-overflow-style:none;     /* IE/Edge */
}
.cat-viewport::-webkit-scrollbar{ display:none; } /* Chrome/Safari */

/* المسار داخل الفيو بورت */
.cat-track{
  display:flex;
  gap:var(--cat-gap);
  margin:0;
  padding:10px 0;              /* بدون يمين/يسار */
  list-style:none;
}

/* البطاقة */
.cat-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:160px;
  text-align:center;
  background: #f6f6f6;
  border-radius: 4px;
  padding:var(--cat-pad);
  //box-shadow:0 6px 16px rgba(0,0,0,.05);
  border:1px solid #edf2f7;
  cursor:pointer;
  flex:0 0 clamp(184px, 22vw, 120px);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cat-card:hover{
  transform: translateY(-3px);
  //box-shadow:0 10px 26px rgba(0,0,0,.08);
  border-color:#e7eef6;
}

/* الدائرة الحاضنة للأيقونة/الشعار */
//.cat-avatar{
  width:74px; height:74px; border-radius:50%;
  background:#f7f8fb;
  display:flex; align-items:center; justify-content:center;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.04);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.cat-avatar .icon{ font-size:36px; line-height:1; color:var(--cat-icon-color, var(--accent-red)); }
.cat-avatar img{ width:66%; height:66%; object-fit:contain; display:block; }
.cat-avatar .text{ font-weight:800; font-size:18px; color:#111827; }
//.cat-card:hover .cat-avatar{
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.04), 0 6px 16px rgba(0,0,0,.10);
  background:#eef2ff;
}
.cat-card:hover .cat-avatar .icon{ filter: brightness(1.05); }

/* النصوص */
.cat-name{ font-weight:700; color:#111827; margin:2px 0 6px; font-size: 14px;}
.cat-count{ font-size:13px; color:var(--cat-accent); }
.cat-count.muted{ color:var(--cat-muted); }

/* الأزرار على الجانبين (الوضع الافتراضي داخل التدفق) */
.cat-nav{
  position:static;
  transform:none;
  width:40px; height:40px; border-radius:50%;
  border:0; background:#fff; color:#111;
  box-shadow:var(--cat-shadow);
  font-size:20px; line-height:1; cursor:pointer;
  flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:center;
}
.cat-nav:hover{ background:#f8fafc }
.cat-nav:disabled{ opacity:1; cursor:not-allowed; background:#111; color:#fff;}

.cat-nav.btn-prev{ margin-inline-start: -45px; }
.cat-nav.btn-next{ margin-inline-end:  -48px; }

/* الأزرار “الكبسولات” داخل حدود الصندوق (مكان المربعات الحمراء) */
.cat-strip.overlap .cat-nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:44px; height:44px; border-radius:5px;
  background:var(--accent-red); color:#fff;
  box-shadow:0 8px 20px rgba(255,43,74,.28);
  z-index:3;
}

.cat-strip.overlap .btn-prev{ inset-inline-start: var(--side-pad); }
.cat-strip.overlap .btn-next{ inset-inline-end:  var(--side-pad); }
.cat-strip.overlap .cat-nav:hover{ filter:brightness(1.05); }
.cat-strip.overlap .cat-nav:disabled{ background: #111; color: #fff; cursor: default;   /* لا تظهر أيقونة المنع */ }

/* Sticky (اختياري) */
.cat-strip-wrapper.sticky{
  position:sticky; top:76px; z-index:40; background:#f3f4f6; padding:8px 0;
  border-block:1px solid #e5e7eb;
}

/* تجاوب */
@media (max-width:880px){
  .cat-strip.fancy{ padding:14px var(--side-pad); }
  .cat-intro{ flex:0 0 170px; }
  .cat-strip.overlap .cat-nav{ width:38px; height:38px; border-radius:10px; }
}
@media (max-width:640px){
  .cat-intro{ display:none; }  /* أخفي العمود على الشاشات الصغيرة */
}
@media (max-width:1462px){
  .cat-strip-wrapper{ padding-inline:8px; }
}