/* ==========================================
   Noon Category Bar (UI/UX Pro - Final)
   Bootstrap-friendly + RTL safe + Performance
   ========================================== */

.noon-catbar{
  padding: 10px 0 14px;
}

/* ✅ Full width breakout (بدون مشاكل RTL/Scrollbar) */
.noon-catbar__full{
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  overflow: hidden;
}

/* ✅ نفس نون: مسافة داخلية من أطراف الصفحة */
.noon-catbar__carousel{
  padding-inline: 18px;
}

/* slick spacing */
.noon-catbar__carousel .carousel-box{ padding: 0; }
.noon-catbar__carousel .slick-slide{
  padding-inline: 10px;
  box-sizing: border-box;
}
.noon-catbar__carousel .slick-list{
  margin-inline: -10px;
}

/* ✅ أسهم نون (دائرية) — دسكتوب فقط */
.noon-catbar__carousel .slick-arrow{
  width: 38px !important;
  height: 38px !important;
  border-radius: 999px !important;
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 6px 16px rgba(0,0,0,.08) !important;
  z-index: 5 !important;
}

.noon-catbar__carousel .slick-prev{ left: 10px !important; }
.noon-catbar__carousel .slick-next{ right: 10px !important; }

/* سهم داخلي (نظافة) */
.noon-catbar__carousel .slick-arrow:before{
  color: #111827 !important;
  font-size: 18px !important;
  opacity: .85 !important;
}

/* عنصر */
.noon-catbar__item{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none !important;
  color: inherit !important;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* المستطيل العلوي مثل نون */
.noon-catbar__thumb{
  width: 100%;
  height: 76px;               /* دسكتوب */
  background: #f3f4f6;
  border-radius: 18px;
  padding: 8px;
  overflow: hidden;

  display: flex;
  align-items: center;
  justify-content: center;

  transform: none !important;
  transition: none !important;
}

.noon-catbar__thumb img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* العنوان تحت (خفيف مثل نون) */
.noon-catbar__title{
  margin-top: 6px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: #111827;

  min-height: 2.2em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ✅ موبايل: 4 عناصر + مستطيل أعلى */
@media (max-width: 767.98px){
  .noon-catbar__carousel{ padding-inline: 14px; }

  .noon-catbar__thumb{
    height: 96px;
    border-radius: 20px;
    padding: 12px;
  }

  .noon-catbar__title{
    font-size: 11.5px;
    margin-top: 8px;
  }

  /* بدون أسهم في الجوال (مثل نون غالباً) */
  .noon-catbar__carousel .slick-arrow{ display: none !important; }

  .noon-catbar__carousel .slick-slide{ padding-inline: 9px; }
  .noon-catbar__carousel .slick-list{ margin-inline: -9px; }
}

/* يمنع “الإحساس بالانضغاط” عند الضغط */
.noon-catbar__item:active .noon-catbar__thumb,
.noon-catbar__item:focus .noon-catbar__thumb{
  transform: none !important;
}

/* منع سكرول أفقي */
html, body{ overflow-x: hidden; }