/*
 * تنسيق النافبار الثانوي المصادق عليه أصبح مركزياً داخل
 * secondary_navbar-style.php. هذا الملف يحتفظ فقط بتنسيقات
 * شريط التصنيفات والمكوّنات التابعة له، بدون استعلامات إعدادات قديمة.
 */

/* ******************************************************* */
/* =========================
   شريط الأقسام في الرئيسية
   ========================= */
:root{
  --cat-bg:var(--sadaa-surface, #fff);
  --cat-shadow:var(--sadaa-shadow-card, 0 10px 28px rgba(17,24,39,.08));
  --cat-radius:var(--sadaa-radius-card, 16px);
  --cat-gap:22px;
  --cat-pad:16px;
  --cat-accent:var(--sadaa-primary);
  --cat-muted:var(--sadaa-muted, #776B7C);
  --accent-red:var(--sadaa-accent); /* لون اللهجة من هوية صدى */
  --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:var(--cat-bg);
  border-radius:var(--cat-radius);
  padding:18px var(--side-pad); /* ← ربط الحشوة بالمتغيّر */
  box-shadow:var(--cat-shadow);
  border:1px solid var(--sadaa-line, #E9E2EB);
  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:var(--sadaa-primary-50);
  border-radius:var(--sadaa-radius-md, 10px);
  padding:var(--cat-pad);
  box-shadow:0 6px 16px rgba(17,24,39,.04);
  border:1px solid var(--sadaa-line, #E9E2EB);
  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:var(--sadaa-shadow-hover, 0 16px 40px rgba(17,24,39,.12));
  border-color:color-mix(in srgb, var(--sadaa-primary) 28%, var(--sadaa-line, #E9E2EB));
}

/* الدائرة الحاضنة للأيقونة/الشعار */
 .cat-avatar{
  width:74px; height:74px; border-radius:50%;
  background:var(--sadaa-surface, #fff);
  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:var(--sadaa-primary-100);
}
.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:1px solid var(--sadaa-line, #E9E2EB); background:var(--sadaa-surface, #fff); color:var(--sadaa-text, #211827);
  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:var(--sadaa-primary-50); color:var(--sadaa-primary); }
.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:var(--sadaa-radius-md, 10px);
  background:var(--accent-red); color:#fff;
  box-shadow:0 8px 20px color-mix(in srgb, var(--sadaa-accent) 28%, transparent);
  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:var(--sadaa-page-bg, #F8F6F9); padding:8px 0;
  border-block:1px solid var(--sadaa-line, #E9E2EB);
}

/* تجاوب */
@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; }
}