/* Off-Canvas Right drawer */
.offcanvas-menu {
  position: fixed;
  top: 0;            /* مقدار top به‌صورت داینامیک توسط JS نوشته میشه */
  right: -360px;     /* خارج از صفحه (عرض = 360px) */
  width: 360px;
  max-width: 85vw;
  height: 100%;      /* height هم توسط JS تغییر داده میشه تا از زیر آیتم تا پایین باشه */
  background: #fff !important;
  box-shadow: -2px 0 20px rgba(0,0,0,0.22);
  transition: right 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
  z-index: 99999;
  overflow-y: auto;
  opacity: 0;
  padding: 1rem;
  border-radius: 12px 0 0 12px;
  transform: translateY(0);
}

/* فعال => داخل صفحه قرار می‌گیره */
.offcanvas-menu.active {
  right: 0;
  opacity: 1;
}

/* overlay */
#offcanvas-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.35);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
  z-index: 99998;
}

#offcanvas-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* header & accordion — همون استایل قبلی */
.offcanvas-header { 
  display: flex; 
  justify-content: space-between; 
  align-items: center; 
  border-bottom: 1px solid #eee; 
  margin-bottom: 0.75rem; 
  padding-bottom: .5rem; 
}
.offcanvas-title {
  margin: 0;
  font-size: 1.2rem;
  color: #333;
  font-weight: bold;
}
#offcanvas-close { 
  background: none; 
  border: none; 
  font-size: 1.8rem; 
  cursor: pointer; 
  color: #666;
  transition: color 0.3s ease;
}
#offcanvas-close:hover {
  color: #000;
}

/* استایل دکمه سفارشی */
#offcanvas-toggle {
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  font-size: 1rem;
  color: #333;
  transition: color 0.3s ease;
}

#offcanvas-toggle:hover {
  color: #000;
}

/* استایل برای متن لیبل دکمه (دسته‌بندی‌ها) */
.burger-label {
  font-size: 1rem;
  color: inherit; /* ارث‌بری از رنگ والد (#offcanvas-toggle) */
  white-space: nowrap; /* جلوگیری از شکستن خط */
  visibility: visible !important;
  opacity: 1 !important;
  display: inline-block !important;
}

.burger-lines {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 20px;
  height: 16px;
}

.burger-lines span {
  display: block;
  height: 2px;
  width: 100%;
  background: #333;
  transition: all 0.3s ease;
  border-radius: 1px;
}

/* انیمیشن همبرگر هنگام باز شدن (اختیاری) */
#offcanvas-toggle.active .burger-lines span:nth-child(1) {
  transform: rotate(45deg) translate(5px, 5px);
}

#offcanvas-toggle.active .burger-lines span:nth-child(2) {
  opacity: 0;
}

#offcanvas-toggle.active .burger-lines span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -6px);
}

/* accordion — تنظیم برای Astra classes (override قوی‌تر برای عمودی کردن submenus در همه سطوح nested) */
#offcanvas-nav ul { 
  list-style: none !important; 
  margin: 0 !important; 
  padding: 0 !important; 
  display: block !important; /* force block برای کل ul */
  float: none !important; /* حذف float Astra */
  background: transparent !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#offcanvas-nav li { 
  border-bottom: 1px solid #eee !important; 
  position: relative; 
  display: block !important; /* force block برای li ها */
  float: none !important; /* حذف float Astra */
  width: 100% !important; /* عرض کامل برای عمودی */
  clear: both !important; /* جلوگیری از inline */
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#offcanvas-nav li > a { 
  display: block !important; 
  padding: .75rem !important; 
  text-decoration: none !important; 
  color: #222 !important; 
  width: 100% !important;
  transition: color 0.3s ease; /* انیمیشن نرم برای hover */
  background: transparent !important;
  visibility: visible !important;
  opacity: 1 !important;
}
#offcanvas-nav li > a:hover { 
  color: #ff0000 !important; /* رنگ قرمز روی hover */
}
#offcanvas-nav ul ul { 
  display: none !important; 
  background: #fafafa !important; 
  padding-left: 1rem !important; /* indent برای زیرمنوها */
  margin: 0 !important;
  position: static !important; /* static برای جلوگیری از absolute positioning Astra */
  float: none !important;
  width: auto !important;
  visibility: hidden !important;
  opacity: 0 !important;
  /* حذف overflow, max-height, transition — jQuery slideDown/slideUp کامل مدیریت می‌کنه */
}
/* جلوگیری از باز شدن submenus با hover در offcanvas — فقط برای non-expanded */
#offcanvas-nav li:not(.ast-submenu-expanded):hover > ul,
#offcanvas-nav li:not(.ast-submenu-expanded):hover > ul.sub-menu {
  display: none !important;
}
/* تقویت برای expanded — مطمئن شو مخفی نشه */
#offcanvas-nav li.ast-submenu-expanded > ul,
#offcanvas-nav li.ast-submenu-expanded > ul.sub-menu { 
  display: block !important; 
  visibility: visible !important;
  opacity: 1 !important;
}
#offcanvas-nav li.ast-submenu-expanded > a { 
  background: #f0f0f0 !important; 
  color: #222 !important;
}

/* override خاص برای sub li ها (تودرتو) — برای همه سطوح nested */
#offcanvas-nav ul ul li,
#offcanvas-nav ul ul ul li,
#offcanvas-nav ul ul ul ul li {
  display: block !important;
  float: none !important;
  width: 100% !important;
  border-bottom: 1px solid #ddd !important; /* border نازک‌تر برای زیرمنوها */
  background: transparent !important; /* بدون background اضافی */
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  clear: both !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#offcanvas-nav ul ul li > a,
#offcanvas-nav ul ul ul li > a,
#offcanvas-nav ul ul ul ul li > a {
  color: #222 !important; /* رنگ پیش‌فرض برای زیرمنوها */
  transition: color 0.3s ease;
  background: transparent !important;
  visibility: visible !important;
  opacity: 1 !important;
}

#offcanvas-nav ul ul li > a:hover,
#offcanvas-nav ul ul ul li > a:hover,
#offcanvas-nav ul ul ul ul li > a:hover {
  color: #ff0000 !important; /* رنگ قرمز روی hover برای همه سطوح زیرمنو */
}

/* حذف هرگونه positioning افقی Astra */
#offcanvas-nav .ast-desktop .ast-menu-toggle,
#offcanvas-nav .ast-desktop ul.sub-menu {
  position: static !important;
  display: block !important;
  float: none !important;
  background: transparent !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* واکنش‌گرایی: اندازه کوچکتر روی موبایل */
@media (max-width: 768px) {
  .offcanvas-menu { width: 80%; right: -80%; }
}
/* حذف فلش پیش‌فرض آسترا */
.offcanvas-content .menu-item-has-children > a .ast-icon,
.offcanvas-content .menu-item-has-children > a .ast-dropdown-icon {
  display: none !important;
}

/* افزودن فلش دلخواه سمت راست هر آیتم */
.offcanvas-content li.menu-item-has-children > a {
  position: relative;
  padding-right: 2rem;
}

/* فلش راست (►) */
.offcanvas-content li.menu-item-has-children > a::after {
  content: '►';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  font-size: 1.2rem; /* اندازه بزرگ‌تر */
  color: #555;
  transition: transform 0.3s ease, color 0.3s ease;
}

/* وقتی زیرمنو باز شد → فلش به پایین برگرده */
.offcanvas-content li.ast-submenu-expanded.menu-item-has-children > a::after {
  transform: translateY(-50%) rotate(90deg);
  color: #000;
}
[dir="rtl"] .offcanvas-content li.menu-item-has-children > a {
  padding-right: 0.75rem;
  padding-left: 2rem;
}

[dir="rtl"] .offcanvas-content li.menu-item-has-children > a::after {
  right: auto;
  left: 0.5rem;
}
.offcanvas-button {
  display: flex;
  align-items: center;
  gap: 8px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 16px;
}

.burger-lines {
  position: relative;
  width: 20px;
  height: 2px;
  background-color: #333;
  transition: all 0.3s ease;
}

.burger-lines::before,
.burger-lines::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background-color: #333;
  transition: all 0.3s ease;
}

.burger-lines::before {
  top: -6px;
}

.burger-lines::after {
  top: 6px;
}