/* ================================================= */
/*   VELAR CATEGORIES NAV — تصميم جديد احترافي        */
/* ================================================= */

/* ================================================= */
/*   الديسكتوب — سطر الأقسام تحت الهيدر               */
/* ================================================= */

.hidden.lg\:block.transition-all.mt-2{
  border-top:1px solid rgba(17,24,39,.08);
  padding-top:14px !important;
  margin-top:14px !important;
}

.hidden.lg\:block.transition-all.mt-2 .h-full.w-full.flex.justify-center.items-center.gap-8{
  gap:44px !important;
}

.hidden.lg\:block.transition-all.mt-2 a{
  position:relative;
  font-family:"Cairo",system-ui,sans-serif !important;
  font-size:12.5px !important;
  font-weight:700 !important;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#374151 !important;
  text-decoration:none !important;
  padding-bottom:10px;
  transition:color .2s ease;
}

.hidden.lg\:block.transition-all.mt-2 a::after{
  content:"";
  position:absolute;
  right:0;
  bottom:0;
  width:0;
  height:2px;
  background:#0a58ff;
  border-radius:2px;
  transition:width .25s ease;
}

.hidden.lg\:block.transition-all.mt-2 a:hover{
  color:#111827 !important;
}

.hidden.lg\:block.transition-all.mt-2 a:hover::after{
  width:100%;
}

/* ================================================= */
/*   الموبايل — القائمة الجانبية المنسدلة              */
/* ================================================= */

.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto{
  max-width:340px !important;
  padding:0 !important;
}

.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto .flex.justify-end.px-4.pt-5{
  padding:18px 20px 4px !important;
}

.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto .divide-y.py-4{
  padding:8px 0 0 !important;
}

.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto .divide-y.py-4>p.font-bold{
  font-family:"Cairo",system-ui,sans-serif !important;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#9ca3af !important;
  padding:0 20px 12px !important;
}

/* كل صف قسم */
.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto .divide-y.font-medium.px-5.py-3{
  padding:0 !important;
  border-bottom:none !important;
}

.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto .divide-y.font-medium.px-5.py-3 a{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  font-family:"Cairo",system-ui,sans-serif !important;
  font-size:15px !important;
  font-weight:600 !important;
  color:#111827 !important;
  padding:15px 20px !important;
  margin:0 8px !important;
  border-radius:10px !important;
  transition:background .15s ease;
}

.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto .divide-y.font-medium.px-5.py-3 a::after{
  content:"";
  width:7px;
  height:7px;
  border-top:2px solid #9ca3af;
  border-right:2px solid #9ca3af;
  transform:rotate(-135deg);
  margin-inline-start:8px;
  flex-shrink:0;
}

.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto .divide-y.font-medium.px-5.py-3 a:hover{
  background:#f7f9fc !important;
  color:#0a58ff !important;
}

.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto .divide-y.font-medium.px-5.py-3 a:hover::after{
  border-color:#0a58ff;
}

/* قسم "الصفحات" تحت */
.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto .divide-y.pb-8>p{
  font-family:"Cairo",system-ui,sans-serif !important;
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#9ca3af !important;
  padding:16px 20px 8px !important;
  border-top:1px solid rgba(17,24,39,.06);
  margin-top:8px;
}

/* زرار الإغلاق X */
.relative.flex.w-full.max-w-xs.flex-col.overflow-y-auto button svg{
  width:22px !important;
  height:22px !important;
  color:#111827 !important;
}