.elementor-4885 .elementor-element.elementor-element-f70e6a6{--display:flex;--flex-direction:row-reverse;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap-reverse;--margin-top:100px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}/* Start custom CSS for html, class: .elementor-element-2b83af5 *//* آیتم‌های اصلی: متن زیر آیکون */
.hf-sidebar .hf-menu-item,
.hf-sidebar .hf-menu-link{
  display: flex;
  flex-direction: column;   /* ← متن برود زیر آیکون */
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 74px;              /* عرض ثابت تا همه یک اندازه شوند */
  padding: 10px;
  border-radius: 12px;
  background: #16a34a;      /* سبز */
  color: #fff;
  text-decoration: none;
  line-height: 1.1;
  gap: 0;                   /* فاصله را با margin کنترل می‌کنیم */
}

.hf-sidebar .hf-menu-item i,
.hf-sidebar .hf-menu-link i{
  color: #fff;
  font-size: 22px;          /* اندازه آیکون */
  line-height: 1;
}

.hf-sidebar .hf-menu-item span,
.hf-sidebar .hf-menu-link span{
  display: block;
  margin-top: 6px;          /* فاصله بین آیکون و متن */
  font-size: 12px;
  color: #fff;              /* متن سفید */
}

/* فاصله بین خودِ آیتم‌ها در ستون */
.hf-sidebar .hf-menu-item + .hf-menu-item,
.hf-sidebar .hf-has-sub + .hf-menu-item,
.hf-sidebar .hf-menu-item + .hf-has-sub{
  margin-top: 1px;
}

/* زیرمنو مثل قبل: به راست باز می‌شود و استایلش تغییر نمی‌کند */
.hf-sidebar .hf-has-sub{ position: relative; }
.hf-sidebar .hf-submenu{
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  margin-left: 10px;
  min-width: 190px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  padding: 8px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 100001;
}
.hf-sidebar .hf-has-sub:hover > .hf-submenu{
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(-50%) translateX(4px);
}
.hf-sidebar .hf-submenu::before{
  content: ""; position: absolute; top: 50%; left: -6px;
  transform: translateY(-50%) rotate(45deg);
  width: 12px; height: 12px; background: #fff;
  border-left: 1px solid #e6e6e6; border-top: 1px solid #e6e6e6;
}
.hf-sidebar .hf-submenu .hf-submenu-item{
  display: block; padding: 10px 12px; border-radius: 8px;
  color: #222; text-decoration: none; white-space: nowrap;
}
.hf-sidebar .hf-submenu .hf-submenu-item:hover{ background: #f5f5f5; }
/* بدون خط زیر لینک‌ها در همه حالت‌ها */
.hf-sidebar a,
.hf-sidebar a:link,
.hf-sidebar a:visited,
.hf-sidebar a:hover,
.hf-sidebar a:focus,
.hf-sidebar a:active{
  text-decoration: none !important;
  outline: none;
}

/* در صورت نیاز: رنگ‌ها ثابت بمانند */
.hf-sidebar .hf-menu-item,
.hf-sidebar .hf-menu-link{ color: #fff; }
.hf-sidebar .hf-submenu .hf-submenu-item{ color: #222; }
.hf-sidebar .hf-submenu .hf-submenu-item:hover{ color: #111; }

.hf-sidebar{
     border-radius: 12px;
  background: #16a34a;
  padding-top: 10px
}

/* === Floating Sidebar: ثابت روی کل صفحه === */
.hf-sidebar{
  position: fixed !important;   /* از والد جدا شود و روی کل صفحه شناور بماند */
  left: 16px;                   /* سمت چپ صفحه */
  top: 50%;                     /* وسط عمودی */
  transform: translateY(-50%);
  z-index: 2147483647;          /* بالاتر از همه چیز (هدرهای چسبان، مودال‌ها...) */
  display: flex;
  flex-direction: column;
  gap: 12px;                    /* فاصله بین آیتم‌های اصلی */
  pointer-events: auto;
}

/* اگر طول آیتم‌ها زیاد شد و از ارتفاع صفحه بیشتر شد، اسکرول داخلی بده */
.hf-sidebar{
  max-height: 80vh;
  overflow: visible;            /* اگر خیلی آیتم دارید، این را به auto تغییر دهید */
}

/* دکمه‌ها (آیکون بالا، متن پایین) – از قبل */
.hf-sidebar .hf-menu-item,
.hf-sidebar .hf-menu-link{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 74px;
  padding: 12px 10px;
  border-radius: 12px;
  background: #16a34a;
  color: #fff;
  text-decoration: none;
  line-height: 1.1;
}

.hf-sidebar .hf-menu-item i,
.hf-sidebar .hf-menu-link i{ font-size: 22px; color:#fff; line-height:1; }

.hf-sidebar .hf-menu-item span,
.hf-sidebar .hf-menu-link span{ margin-top:6px; font-size:12px; color:#fff; }

/* زیرمنو: چون منو سمت چپ است، به راست باز شود */
.hf-sidebar .hf-has-sub{ position: relative; }
.hf-sidebar .hf-submenu{
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  margin-left: 10px;
  min-width: 190px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0,0,0,.12);
  padding: 8px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 2147483647; /* روی همه لایه‌ها */
}
.hf-sidebar .hf-has-sub:hover > .hf-submenu{
  opacity:1; visibility:visible; pointer-events:auto;
  transform: translateY(-50%) translateX(4px);
}
.hf-sidebar .hf-submenu::before{
  content:""; position:absolute; top:50%; left:-6px;
  transform: translateY(-50%) rotate(45deg);
  width:12px; height:12px; background:#fff;
  border-left:1px solid #e6e6e6; border-top:1px solid #e6e6e6;
}

/* لینک‌ها بدون زیرخط – از قبل */
.hf-sidebar a,
.hf-sidebar a:link,
.hf-sidebar a:visited,
.hf-sidebar a:hover,
.hf-sidebar a:focus,
.hf-sidebar a:active{ text-decoration: none !important; outline: none; }/* End custom CSS */