@import url(swiper.min.css);
@import url(nouislider.min.css);
@import url(output.css);
@import url(font.css);
@import url(style.css);

/* بازوی کانتینر بالای صفحه */
.topbar {
  box-shadow: 0 6px 18px var(--shadow);
  height: var(--height);
  display: flex;
  align-items: center;
  justify-content: center; /* آیتم‌ها وسط صفحه */
  position: relative;
  overflow: visible;
}
.nav-container {
  display: flex; /* چیدمان افقی */
  flex-wrap: nowrap; /* اجازه شکستن خط نده */
  align-items: center; /* وسط‌چین عمودی */
}
.nav-container {
  overflow-x: auto;
  white-space: nowrap; /* متن‌ها هم نشکنن */
}

/* محتوای داخل کانتینر (عرض محدود) */
.nav-wrap {
  padding: 0 22px;

  display: flex;
  align-items: center;
  gap: var(--gap);
  justify-content: center;
}

/* منو اصلی */
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 22px;
  align-items: flex-start;
  flex-wrap: nowrap;
  justify-content: center;
  white-space: nowrap;
}

nav li {
  font-size: 15px;
  color: var(--muted);
  letter-spacing: 0.2px;
}

nav a {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  padding: 8px 6px;
  border-radius: 8px;
  transition: all 0.18s ease;
}

/* آیتم علامت‌گذاری (مثل آیکون یا دایره کوچک) */
.badge-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ef4444; /* قرمز کوچک */
}

/* آیکون‌های کمکی در سمت راست (در تصویر، آیکون شبکه و ... ) */
.icons {
  margin-inline-start: 18px; /* در RTL معادل margin-left */
  display: flex;
  gap: 10px;
  align-items: center;
}

.icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--muted);
  transition: all 0.15s;
}
nav a {
  position: relative; /* برای کنترل ::after */
  color: var(--color-zinc-600);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.3s ease;
}

nav a::after {
  content: "";
  position: absolute;
  right: 0; /* شروع از سمت راست */
  bottom: -2px; /* کمی پایین‌تر از متن */
  width: 0; /* در حالت عادی طول صفر */
  height: 2px; /* ضخامت خط */
  background-color: red;
  transition: width 0.3s ease; /* انیمیشن طول خط */
}

nav a:hover {
  color: red; /* تغییر رنگ متن */
}

nav a:hover::after {
  width: 100%; /* اندازه طول متن */
}
/* منوی کشویی دسته‌بندی‌ها */
/* مگامنو پیشفرض مخفی */
#categoriesMenu {
  z-index: 9999; /* بالاتر از همه عناصر صفحه */
  opacity: 0;
  transform: translateY(10px);
  visibility: hidden;
  transition: all 0.25s ease-in-out;
}
/* وقتی فعال شد */
#categoriesMenu.show {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  width: 1000%;
}
/* استایل hover روی دسته‌ها */
#categoriesList li {
  cursor: pointer;
  transition: color 0.2s ease-in-out;
}
#categoriesList li:hover {
  color: #ef394e; /* قرمز دیجی‌کالا */
}
/* زیرمجموعه‌ها */
#subCategories h3 {
  font-size: 14px;
  margin-bottom: 8px;
}
#subCategories ul li {
  font-size: 13px;
  color: #4b5563; /* text-gray-600 */
  transition: color 0.2s;
}
#subCategories ul li:hover {
  color: #ef394e;
}
h3::after {
  content: "....................";
  color: red; /* رنگ قرمز */
  margin-right: 5px; /* فاصله از متن */
  display: inline-block; /* جلوگیری از تداخل با ستون بعدی */
  width: 50px; /* طول دلخواه برای نقطه‌ها */
}
.nav-menu ul li a {
  display: flex;
  align-items: center;
  gap: 6px; /* فاصله متن و آیکون */
}

@media (max-width: 768px) {
  .nav-menu {
    display: none !important;
  }
}