/* ===== زیرمنوی سطح ۱ ===== */
.custom-submenu,
.submenu-level-1 {
  display: none;
  position: absolute;
  top: 100%;
  right: 0%;
  left: 0;
  background: rgba(20, 20, 20, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 10px 0;
  min-width: 220px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: all 0.25s ease;
}

.menu-item-2755:hover>.custom-submenu,
.menu-item-693:hover>.custom-submenu {
  display: block;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ===== لینک‌های زیرمنو ===== */
.custom-submenu li a {
  display: block;
  color: var(--color-secondary);
  text-decoration: none;
  font-weight: 600;
  padding-right: 0px;
  width: 85%;
  transition: background 0.2s, color 0.2s;
}

.custom-submenu li:hover {
  background: var(--color-shadow);
  border-radius: 14px;
  color: var(--color-primary);
}

/* ===== زیرمنوی سطح دوم ===== */
.custom-inner-submenu {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  margin: 6px 12px;
  padding: 6px 0;
  display: none;
}

.menu-item.open>.custom-inner-submenu {
  display: block;
}

/* ===== تاگل ===== */
.menu-item-has-children {
  display: flex !important;
  align-items: stretch;
  justify-content: space-between;
  flex-direction: row;
}

.menu-item-has-children>a {
  display: inline-flex;
  align-items: center;
  width: 90%;
  /* جلوگیری از تمام عرض شدن لینک */
}

.menu-link-row {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.submenu-toggle {
  margin-left: 10px;
  padding: 10px 0px;
  display: inline-flex;
  color: var(--color-accent);
  font-size: 12px;
  justify-content: center;
  align-items: center;
}

.submenu-toggle i {
  font-size: 0.8em;
  transition: transform 0.2s ease;
}

.menu-item-has-children:hover>.menu-link-row .submenu-toggle i {
  transform: rotate(90deg);
  color: var(--color-primary);
}

.menu-item-2755:hover>.submenu-toggle i,
.menu-item-693:hover>.submenu-toggle i {
  transform: rotate(180deg);
  color: var(--color-primary);
}

/* وقتی زیرمنو باز است */
.menu-item.submenu-open>.sub-menu {
  display: block !important;
}

/* آیکون المنتور حذف شود */
.sub-arrow {
  display: none !important;
}

/* ===== حالت موبایل مرتب و بهینه ===== */
@media (max-width: 1024px) {

  /* کانتینر منوی موبایل (یکبار تنظیم) */
  nav.elementor-nav-menu--dropdown.elementor-nav-menu__container {
    position: fixed !important;
    top: 85% !important;
    right: 0 !important;
    left: 0 !important;
    width: 100% !important;
    padding: 20px;
    border-bottom: 4px solid var(--color-primary);
    border-radius: 0 0 20px 20px;
    overflow-y: auto !important;
    background: rgba(30, 30, 30, 0.95) !important;
    box-shadow: 0 4px 7px 4px var(--color-shadow);
    z-index: 999 !important;
  }

  /* زیرمنوها در موبایل باید relative و تمام عرض باشند */
  .elementor-nav-menu--dropdown .sub-menu,
  .elementor-nav-menu--dropdown .custom-submenu {
    position: relative !important;
    z-index: 999 !important;
    width: 100%;
    background: rgba(40, 40, 40, 0.98);
    border-right: 2px solid var(--color-accent) !important;
    margin: 0;
    padding: 0;
    border: none;
    box-shadow: none;
  }

  /* هر آیتم زیرمنو درون ul */
  .elementor-nav-menu--dropdown .sub-menu li,
  .elementor-nav-menu--dropdown .custom-submenu li {
    position: relative;
    z-index: inherit;
    list-style: none;
  }

  /* ---------- ساختار GRID برای آیتم‌هایی که زیرمنو دارند ---------- */
  /* این قانون هم برای حالت: a + span + ul   و هم برای حالت: div.menu-link-row می‌گیرد */
  .elementor-nav-menu--dropdown .menu-item-has-children {
    display: grid !important;
    grid-template-columns: 10% 90%;
    grid-template-rows: auto auto;
    /* سطر 1: تاگل+لینک ، سطر2: زیرمنو */
    gap: 0;
    align-items: center;
    position: relative;
  }

  /* اگر لینک و آیکون داخل wrapper .menu-link-row باشن */
  .elementor-nav-menu--dropdown .menu-item-has-children>.menu-link-row {
    grid-column: 1 / span 2;
    grid-row: 1;
    display: contents;
    /* اجازه میده فرزندانش (a و span) وارد گرید شوند */
  }

  /* لینک: همیشه در ستون دوم (۹۰%) قرار بگیره */
  .elementor-nav-menu--dropdown .menu-item-has-children>a,
  .elementor-nav-menu--dropdown .menu-item-has-children>.menu-link-row>a {
    grid-column: 2;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    width: 100%;
    padding: 14px 12px;
    /* قابل تنظیم برای spacing */
    box-sizing: border-box;
    color: var(--color-primary);
    text-decoration: none;
    z-index: 1;
  }

  /* آیکون تاگل: ستون اول (۱۰%) و وسط چین */
  .elementor-nav-menu--dropdown .menu-item-has-children>.submenu-toggle,
  .elementor-nav-menu--dropdown .menu-item-has-children>.menu-link-row>.submenu-toggle {
    grid-column: 1;
    grid-row: 1;
    justify-self: center;
    align-self: center;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 16px;
    color: var(--color-accent);
    cursor: pointer;
    z-index: 2;
    background: transparent;
    border: none;
  }

  /* جلوگیری از اینکه a فضای آیکون رو بپوشونه:
     اگر قبلاً از ::after برای پوشش استفاده کردی، آن را حذف یا غیرفعال کن. */
  .elementor-nav-menu--dropdown .menu-item-has-children>a::after,
  .elementor-nav-menu--dropdown .menu-item-has-children>.menu-link-row>a::after {
    display: none !important;
    content: none !important;
  }

  /* سطر دوم: زیرمنو باید تمام عرض والد را بگیرد و زیر لینک ظاهر شود */
  .elementor-nav-menu--dropdown .menu-item-has-children>.custom-submenu,
  .elementor-nav-menu--dropdown .menu-item-has-children>.sub-menu,
  .elementor-nav-menu--dropdown .menu-item-has-children>.submenu-level-1 {
    grid-column: 1 / -1;
    /* span full width */
    grid-row: 2;
    width: 100%;
    top: auto;
    display: block;
    box-sizing: border-box;
    padding: 6px 0;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: none;
    transition: max-height 0.32s ease, opacity 0.25s ease, transform 0.25s ease;
    background: rgba(30, 30, 30, 0.95);
  }

  /* وقتی باز است: ارتفاع منطقی بذار (slide down). مقدار max-height باید بزرگتر از بلندترین لیست باشه */
  .elementor-nav-menu--dropdown .menu-item.submenu-open>.custom-submenu,
  .elementor-nav-menu--dropdown .menu-item.submenu-open>.sub-menu,
  .elementor-nav-menu--dropdown .menu-item.submenu-open>.submenu-level-1 {
    max-height: 900px;
    /* large enough to show content */
    opacity: 1;
    transform: translateY(0);
  }

  /* لینک‌های زیرمنو داخل ul */
  .elementor-nav-menu--dropdown .custom-submenu li a,
  .elementor-nav-menu--dropdown .sub-menu li a {
    display: block;
    padding: 10px 16px;
    color: var(--color-secondary);
    font-weight: 600;
    text-decoration: none;
  }

  .elementor-nav-menu--dropdown .custom-submenu li+li,
  .elementor-nav-menu--dropdown .sub-menu li+li {
    margin-top: 4px;
  }

  /* چرخش آیکون با transition */
  .elementor-nav-menu--dropdown .submenu-toggle i {
    display: inline-block;
    transition: transform 0.25s ease;
  }

  .elementor-nav-menu--dropdown .menu-item.submenu-open>.submenu-toggle i {
    transform: rotate(180deg);
  }

  .elementor-nav-menu--dropdown .menu-item.submenu-open>.menu-link-row>.submenu-toggle i {
    transform: rotate(180deg);
  }


  /* ===== زیرمنوهای سطح 2 (submenu-level-2) ===== */
  .elementor-nav-menu--dropdown .menu-item-has-children>.submenu-level-2 {
    position: relative;
    grid-column: auto;
    grid-row: auto;
    width: 100%;
    margin: 0;
    padding: 6px 0 6px 12px;
    /* کمی فاصله از سمت چپ برای عمق بصری */
    background: rgba(25, 25, 25, 0.3);

    border-right: 2px solid var(--color-border) !important;
    overflow: visible;
    /* 👈 این خیلی مهمه تا آیتم‌ها بریده نشن */
    max-height: 0;
    opacity: 0;
    transform: translateY(-5px);
    transition: max-height 0.32s ease, opacity 0.25s ease, transform 0.25s ease;
  }

  /* وقتی باز میشه */
  .elementor-nav-menu--dropdown .menu-item.submenu-open>.submenu-level-2 {
    max-height: 900px;
    opacity: 1;
    transform: translateY(0);
  }

  /* لینک‌های سطح دوم */
  .elementor-nav-menu--dropdown .submenu-level-2 li a {
    display: block;
    padding: 10px 24px;
    /* کمی تورفتگی بیشتر نسبت به سطح ۱ */
    color: var(--color-secondary);
    font-weight: 500;
    text-decoration: none;
  }

  /* فاصله بین آیتم‌های سطح ۲ */
  .elementor-nav-menu--dropdown .submenu-level-2 li+li {
    margin-top: 3px;
  }

  /* اطمینان از اینکه هدر و بخش‌های دیگر بالاتر نباشند */
  header,
  .elementor-location-header {
    z-index: 10 !important;
  }

  .elementor-item-active {
    border-radius: 15px;
  }

  .elementor-nav-menu--dropdown a:hover {
    border-radius: 15px;
  }

}


/* نمایش با هاور در دسکتاپ */
.menu-item-has-children:hover>.custom-submenu,
.menu-item-has-children:hover>.submenu-level-1,
.submenu-level-1>.menu-item-has-children:hover>.submenu-level-2 {
  display: block;
}

/* ===== زیرمنوی سطح دوم ===== */
.submenu-level-2 {
  position: absolute !important;
  margin-top: -15% !important;
  right: 100%;
  display: none;
  min-width: 180px;
  background: rgba(20, 20, 20, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  padding: 10px 0;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transform: translateY(0px);
  transition: all 0.25s ease;
}

/* وقتی هاور روی والد یا خود سطح 2 هست، نمایش بده */
.submenu-level-1>.menu-item-has-children:hover>.submenu-level-2,
.submenu-level-2:hover,
.menu-item-has-children.submenu-open>.submenu-level-2 {
  display: block;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* ===== آیکون های نوبار ===== */
.elementor-menu-cart__wrapper {
  height: 20px !important;
}

.elementor-menu-cart__toggle_button {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.toggle-icon--cart-light.tooltip-icon {
  height: 20px !important;
}

.elementor-menu-cart__toggle_button:hover {
  background-color: transparent !important;
  border: none !important;
  color: var(--color-accent) !important;
  box-shadow: none !important;
  transform: scale(1.1) !important;
}

.x-header .elementor-icon {
  display: inline !important;
}

/* ===== تولتیپ شفاف و مدرن (در پایین آیکون) ===== */
.tooltip-icon {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* محتوای تولتیپ */
.tooltip-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 130%;
  /* پایین آیکون */
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-shadow);
  color: var(--color-accent);
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 13px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s ease;
  backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  z-index: 999;
}

/* حالت هاور */
.tooltip-icon:hover::after {
  opacity: 1;
  top: 140%;
  /* کمی پایین‌تر برای انیمیشن نرم‌تر */
}


/* ===========================
   XCafe Glass Search Overlay
   =========================== */

.xcafe-search-overlay {
  position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  backdrop-filter: blur(18px) brightness(0.7);
  background: rgba(0, 0, 0, 0.35);
  z-index: 999999;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  opacity: 0;
  visibility: hidden;
  /* برای کنترل ایمن‌تر */
}

.xcafe-search-overlay.active {
  display: flex;
  opacity: 1;
  visibility: visible;
}


/* ====== باکس جستجو ====== */
.xcafe-search-box {
  background: var(--color-background-light-glass);
  box-shadow: 0 8px 24px var(--color-shadow-glass);
  border: 1px solid var(--color-border);
  backdrop-filter: blur(30px) saturate(160%);
  padding: 20px 40px;
  width: 50%;
  border-radius: 20px;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* تا مرزها یکی بشن */
  transform: scale(0.9);
  transition: all 0.4s ease;
}

.xcafe-search-overlay.active .xcafe-search-box {
  transform: scale(1);
}

/* ====== فرم ====== */
.xcafe-search-form {
  display: flex;
  width: 100%;
  align-items: stretch;
  /* تضمین ارتفاع یکسان */
  box-sizing: border-box;
}

/* ====== ورودی ====== */
.xcafe-search-input {
  flex: 1;
  padding: 14px 20px;
  /* متعادل با دکمه */
  font-size: 1rem;
  border: none !important;
  outline: none;
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--color-text);
  transition: all 0.3s ease;
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
  box-sizing: border-box;
}

.xcafe-search-input:focus {
  background: rgba(255, 255, 255, 0.2) !important;
  box-shadow: inset 0 0 0 1px var(--color-primary) !important;
}

.xcafe-search-input::placeholder {
  color: var(--color-muted) !important;
}

/* ====== دکمه ====== */
.xcafe-search-btn {
  background: var(--color-secondary) !important;
  color: var(--color-primary) !important;
  border: none !important;
  padding: 0 24px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
  box-sizing: border-box;
}

.xcafe-search-btn:hover {
  background: var(--color-primary) !important;
  color: var(--color-secondary) !important;
  transform: scale(1.05);
}

/* ====== آیکون ====== */
.xcafe-search-btn i {
  font-size: 1.1rem;
}

/* ====== ریسپانسیو ====== */
@media (max-width: 768px) {
  .xcafe-search-box {
    width: 90%;
  }

  .xcafe-search-input {
    font-size: 0.9rem;
    padding: 10px 16px;
  }

  .xcafe-search-btn {
    padding: 0 16px;
  }
}