/* ============================================================
   Vista — modern mobile drawer for Elementor Mega Menu (n-menu)

   EVERY rule below is gated behind html.vmm-mobile, a class the
   script only adds while the viewport is at or below the chosen
   breakpoint. On desktop this stylesheet is completely inert —
   not a single selector can match.
   ============================================================ */

/* ---------- the toggle button ----------

   --vmm-toggle-size is measured by the script from the button's own original
   box, then applied to both axes. That squares the button off so the
   background renders as a true circle instead of a rounded square, and it
   pins the height, which is what keeps the icon level with its neighbours.
   ---------------------------------------- */
html.vmm-mobile .e-n-menu-toggle.vmm-round {
  position: relative;
  width: var(--vmm-toggle-size, 42px) !important;
  height: var(--vmm-toggle-size, 42px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}

/* ---------- hamburger: two bars that spin into an X ----------
   The bars are absolutely centred on the button, so no amount of padding or
   line-height inside it can shift them off centre.
   ------------------------------------------------------------ */
html.vmm-mobile .e-n-menu-toggle.vmm-burger-on .e-n-menu-toggle-icon {
  display: none !important;
}

/* --vmm-burger-w is set on the button by the script, from the size of the
   icon it replaces, so the bars stay proportional to whatever you chose */
html.vmm-mobile .vmm-burger {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: var(--vmm-burger-w, 22px);
  height: calc(var(--vmm-burger-w, 22px) * .72);
  margin: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(0deg);
  transition: transform .5s cubic-bezier(.66, -0.32, .28, 1.32);
}

html.vmm-mobile .vmm-burger i {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 2.4px;
  margin-top: -1.2px;
  border-radius: 4px;
  background: var(--vmm-burger-color, #fff);
  transition: transform .5s cubic-bezier(.66, -0.32, .28, 1.32);
}

html.vmm-mobile .vmm-burger i:nth-child(1) { transform: translateY(calc(var(--vmm-burger-w, 22px) * -.2)); }
html.vmm-mobile .vmm-burger i:nth-child(2) { transform: translateY(calc(var(--vmm-burger-w, 22px) * .2)); }

html.vmm-mobile .e-n-menu-toggle[aria-expanded="true"] .vmm-burger {
  transform: translate(-50%, -50%) rotate(180deg);
}
html.vmm-mobile .e-n-menu-toggle[aria-expanded="true"] .vmm-burger i:nth-child(1) {
  transform: translateY(0) rotate(45deg);
}
html.vmm-mobile .e-n-menu-toggle[aria-expanded="true"] .vmm-burger i:nth-child(2) {
  transform: translateY(0) rotate(-45deg);
}

/* While the sheet is open the button colour is frozen to whatever it looked
   like the moment it opened. Otherwise that dark tint comes from :hover /
   :focus, which the browser drops the first time you tap inside the menu —
   leaving a white X on a white sheet. */
html.vmm-mobile .e-n-menu-toggle.vmm-x-pinned[aria-expanded="true"] {
  background-color: var(--vmm-x-bg, #16211a) !important;
  background-image: none !important;
  border-color: var(--vmm-x-bg, #16211a) !important;
  border-radius: 50% !important;
}
html.vmm-mobile .e-n-menu-toggle.vmm-x-pinned[aria-expanded="true"] .vmm-burger i {
  background: var(--vmm-x-color, #fff) !important;
}
html.vmm-mobile .e-n-menu-toggle.vmm-x-pinned[aria-expanded="true"] .e-n-menu-toggle-icon i {
  color: var(--vmm-x-color, #fff) !important;
}

/* the toggle must float above the white sheet so it stays tappable.
   position is deliberately not !important: if Elementor already positions the
   toggle, keep its value and just lift the stacking order */
html.vmm-mobile.vmm-open .e-n-menu-toggle {
  position: relative;
  z-index: 2147483001 !important;
}

/* ---------- shell ---------- */
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-wrapper {
  --vmm-ink:     #16211a;
  --vmm-sub:     #6b7d71;
  --vmm-green:   #26a045;
  --vmm-green-d: #1a7a31;
  --vmm-chip:    #edf7ef;
  --vmm-line:    #eff3f0;
  --vmm-hover:   #f2f8f3;

  background: #fff !important;
  background-color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  font-family: iranSans, IRANSans, Vazir, Tahoma, sans-serif !important;
  direction: rtl;
}

html.vmm-mobile .elementor-widget-n-menu .e-n-menu-wrapper::before,
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-wrapper::after { content: none !important; }

/* ---------- open: full-screen white sheet ---------- */
html.vmm-open,
html.vmm-open body { overflow: hidden !important; }

html.vmm-mobile.vmm-open .elementor-widget-n-menu .e-n-menu-wrapper {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  z-index: 2147483000 !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: 0 !important;
  background: #fff !important;
}

/* ---------- spacer that clears the site header ---------- */
html.vmm-mobile .elementor-widget-n-menu .vmm-bar {
  flex: 0 0 auto;
  display: block !important;
  height: var(--vmm-bar-h, 64px);
  margin: 0 !important;
  padding: 0 !important;
  background: #fff !important;
  border-bottom: 1px solid var(--vmm-line) !important;
}

/* ---------- auth ---------- */
html.vmm-mobile .elementor-widget-n-menu .vmm-auth {
  flex: 0 0 auto;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 !important;
  padding: 14px 16px !important;
  background: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid var(--vmm-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
html.vmm-mobile .elementor-widget-n-menu .vmm-login,
html.vmm-mobile .elementor-widget-n-menu .vmm-register {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px;
  min-height: 48px;
  border-radius: 12px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  transition: transform .14s ease, background .18s ease;
}
html.vmm-mobile .elementor-widget-n-menu .vmm-login:active,
html.vmm-mobile .elementor-widget-n-menu .vmm-register:active { transform: scale(.985); }
html.vmm-mobile .elementor-widget-n-menu .vmm-login {
  background: #fff !important;
  color: var(--vmm-green-d) !important;
  border: 1.5px solid #dceade !important;
}
html.vmm-mobile .elementor-widget-n-menu .vmm-register {
  background: var(--vmm-green) !important;
  color: #fff !important;
  border: 1.5px solid var(--vmm-green) !important;
}
html.vmm-mobile .elementor-widget-n-menu .vmm-auth svg {
  width: 17px; height: 17px;
  stroke: currentColor; fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  flex: 0 0 auto;
}

/* ---------- scrollable list ---------- */
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-heading {
  flex: 1 1 auto;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 6px 10px 14px !important;
  background: transparent !important;
  width: 100% !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

html.vmm-mobile .elementor-widget-n-menu .e-n-menu-item {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  float: none !important;
  overflow: visible !important;
  transform: none !important;
}
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-item + .e-n-menu-item::before {
  content: "";
  display: block;
  height: 1px;
  margin: 0 14px;
  background: var(--vmm-line);
}

/* ---------- row ---------- */
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-title {
  position: relative !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-direction: row !important;
  align-items: center !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  min-height: 56px;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

html.vmm-mobile .elementor-widget-n-menu .e-n-menu-title-container {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 11px !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 56px;
  margin: 0 !important;
  padding: 7px 10px !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--vmm-ink) !important;
  border: 0 !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  text-align: right !important;
  text-decoration: none !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .16s ease;
}
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-title-container:active { background: var(--vmm-hover) !important; }

/* caret takes no space; the whole row is the control */
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-dropdown-icon { display: none !important; }

/* icon chip — both icon spans share ONE grid cell, so it is truly centered */
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-icon {
  order: 0 !important;
  flex: 0 0 auto !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 11px !important;
  background: var(--vmm-chip) !important;
  color: var(--vmm-green) !important;
  display: grid !important;
  grid-template-areas: "vmmicon" !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr !important;
  place-items: center !important;
  line-height: 1 !important;
  overflow: hidden !important;
  transition: background .18s ease, color .18s ease;
}
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-icon > .icon-active,
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-icon > .icon-inactive {
  grid-area: vmmicon !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-icon i {
  display: block !important;
  line-height: 1 !important;
  font-size: 15px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  color: currentColor !important;
}
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-icon svg {
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  fill: currentColor !important;
}

html.vmm-mobile .elementor-widget-n-menu .e-n-menu-title-text {
  order: 1 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  color: var(--vmm-ink) !important;
  font-size: 15.5px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  text-align: right !important;
  background: transparent !important;
}

/* open row accent */
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-item.vmm-item-open > .e-n-menu-title > .e-n-menu-title-container { background: var(--vmm-hover) !important; }
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-item.vmm-item-open .e-n-menu-icon {
  background: var(--vmm-green) !important;
  color: #fff !important;
}
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-item.vmm-item-open .e-n-menu-icon i,
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-item.vmm-item-open .e-n-menu-icon svg {
  color: #fff !important;
  fill: #fff !important;
}

/* special offer */
html.vmm-mobile .elementor-widget-n-menu #offer .e-n-menu-title-text { color: var(--vmm-green-d) !important; }
html.vmm-mobile .elementor-widget-n-menu #offer .e-n-menu-icon { background: var(--vmm-green) !important; color: #fff !important; }
html.vmm-mobile .elementor-widget-n-menu #offer .e-n-menu-icon i,
html.vmm-mobile .elementor-widget-n-menu #offer .e-n-menu-icon svg { color: #fff !important; fill: #fff !important; }

/* ---------- submenu: driven only by .vmm-item-open ---------- */
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-content {
  display: none !important;
  position: static !important;
  inset: auto !important;
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  transition: none !important;
}
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-item.vmm-item-open > .e-n-menu-content {
  display: block !important;
  margin: 0 10px 10px !important;
  animation: vmmReveal .26s ease both;
}
@keyframes vmmReveal {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Elementor parks the panel's OWN container at display:none as an inline
   style and only clears it from the click handler we deliberately suppress.
   Without this the panel opens but stays empty and flat. The script also
   strips the inline value; this is the safety net if it ever comes back. */
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-item.vmm-item-open > .e-n-menu-content > .e-con,
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-item.vmm-item-open > .e-n-menu-content > .elementor-element {
  display: flex !important;
}
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-item.vmm-item-open > .e-n-menu-content > .e-grid {
  display: grid !important;
}

/* strip Elementor container padding / gaps / clipping inside the panel */
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-content .e-con,
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-content .e-child {
  --gap: 0px !important;
  --row-gap: 0px !important;
  --column-gap: 0px !important;
  --padding-top: 0px !important;
  --padding-bottom: 0px !important;
  --padding-left: 0px !important;
  --padding-right: 0px !important;
  --padding-block-start: 0px !important;
  --padding-block-end: 0px !important;
  --padding-inline-start: 0px !important;
  --padding-inline-end: 0px !important;
  --margin-top: 0px !important;
  --margin-bottom: 0px !important;
  --margin-left: 0px !important;
  --margin-right: 0px !important;
  --min-height: 0px !important;
  gap: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  width: 100% !important;
  max-width: none !important;
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html.vmm-mobile .elementor-widget-n-menu .e-n-menu-content > .e-con,
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-content > .elementor-element {
  background: #fafcfa !important;
  border: 1px solid var(--vmm-line) !important;
  border-radius: 13px !important;
  padding: 4px !important;
}

html.vmm-mobile .elementor-widget-n-menu .e-n-menu-content .elementor-widget,
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-content .elementor-widget-container {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
}

html.vmm-mobile .elementor-widget-n-menu .e-n-menu-content .elementor-icon-box-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  text-align: right !important;
  gap: 10px !important;
  padding: 8px 7px !important;
  margin: 0 !important;
  border-radius: 10px !important;
}
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-content .elementor-icon-box-wrapper:active { background: var(--vmm-hover) !important; }

html.vmm-mobile .elementor-widget-n-menu .e-n-menu-content .elementor-icon-box-icon {
  margin: 0 !important;
  width: 36px !important;
  min-width: 36px !important;
  height: 36px !important;
  display: grid !important;
  place-items: center !important;
  background: #fff !important;
  border: 1px solid var(--vmm-line) !important;
  border-radius: 10px !important;
}
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-content .elementor-icon-box-icon .elementor-icon {
  width: auto !important; height: auto !important;
  padding: 0 !important; margin: 0 !important;
  display: grid !important; place-items: center !important;
}
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-content .elementor-icon-box-icon svg {
  display: block !important;
  width: 21px !important; height: 21px !important;
}
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-content .elementor-icon-box-content { text-align: right !important; }
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-content .elementor-icon-box-title,
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-content .elementor-icon-box-title a {
  color: var(--vmm-ink) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-content .elementor-icon-box-description {
  color: var(--vmm-sub) !important;
  font-size: 11.5px !important;
  line-height: 1.6 !important;
  margin: 1px 0 0 !important;
}

html.vmm-mobile .elementor-widget-n-menu .e-n-menu-content .elementor-widget-heading.elementor-absolute { display: none !important; }
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-content .elementor-widget-divider { margin: 0 !important; padding: 0 !important; }
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-content .elementor-divider { padding: 0 7px !important; }
html.vmm-mobile .elementor-widget-n-menu .e-n-menu-content .elementor-divider-separator { border-top: 1px solid var(--vmm-line) !important; }

/* ---------- footer ---------- */
html.vmm-mobile .elementor-widget-n-menu .vmm-foot {
  flex: 0 0 auto;
  margin: 0 !important;
  padding: 14px 16px max(14px, env(safe-area-inset-bottom)) !important;
  background: #fbfdfb !important;
  border-top: 1px solid var(--vmm-line) !important;
  border-radius: 0 !important;
  text-align: center !important;
}
html.vmm-mobile .elementor-widget-n-menu .vmm-contact {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 5px 8px;
  font-size: 13px !important;
  background: transparent !important;
}
html.vmm-mobile .elementor-widget-n-menu .vmm-contact span {
  color: var(--vmm-sub) !important;
  font-weight: 600;
}
html.vmm-mobile .elementor-widget-n-menu .vmm-contact a {
  color: var(--vmm-green-d) !important;
  text-decoration: none !important;
  font-weight: 800 !important;
  direction: ltr;
  font-variant-numeric: tabular-nums;
}

/* leftovers from an older custom template */
html.vmm-mobile .elementor-widget-n-menu .vemm-head,
html.vmm-mobile .elementor-widget-n-menu .vemm-auth,
html.vmm-mobile .elementor-widget-n-menu .vemm-footer,
html.vmm-mobile .elementor-widget-n-menu .vemm-close,
html.vmm-mobile .elementor-widget-n-menu .vemm-logo,
html.vmm-mobile .elementor-widget-n-menu .vemm-site-name,
html.vmm-mobile .elementor-widget-n-menu .vemm-phone-top { display: none !important; }