/**
 * KB Vertical Mega Menu Pro - Digikala Style
 */

/* ==========================================================================
   Variables
   ========================================================================== */

:root {
  --kb-vmm-primary: #ef394e;
  --kb-vmm-text-main: #3f4043;
  --kb-vmm-text-muted: #717171;
  --kb-vmm-bg-sidebar: #f0f0f1;
  --kb-vmm-border-color: #e0e0e2;
  --kb-vmm-sidebar-width: 200px;
  --kb-vmm-panel-height: 570px;
  --kb-vmm-max-width: 1250px;
}

/* ==========================================================================
   Base & Wrapper
   ========================================================================== */

.kb-vmm-root {
  direction: rtl;
  text-align: right;
  box-sizing: border-box;
}

.kb-vmm-menu-item {
  position: relative !important;
  display: inline-block !important;
}

/* Dropdown Container */
.kb-vmm-nav-dropdown {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  z-index: 9999 !important;

  width: var(--kb-vmm-max-width) !important;
  max-width: calc(100vw - 40px) !important;
  height: var(--kb-vmm-panel-height) !important;

  background-color: #fff !important;
  border: 1px solid var(--kb-vmm-border-color) !important;
  box-shadow: 0 8px 16px rgba(0,0,0,0.1) !important;
  border-radius: 0 !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(10px);
  transition: all 0.2s ease;
}

.kb-vmm-menu-item:hover > .kb-vmm-nav-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0);
}

/* ==========================================================================
   Layout Structure
   ========================================================================== */

.kb-vmm-tabs-desktop {
  display: flex !important;
  flex-direction: row !important; /* راست به چپ: سایدبار راست، محتوا چپ */
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ==========================================================================
   Sidebar (Right Side)
   ========================================================================== */

.kb-vmm-tab-list {
  flex: 0 0 var(--kb-vmm-sidebar-width) !important;
  background-color: var(--kb-vmm-bg-sidebar) !important;
  border-left: 1px solid var(--kb-vmm-border-color) !important;
  height: 100% !important;
  overflow-y: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.kb-vmm-tab-list li {
  margin: 0 !important;
}

.kb-vmm-tab-btn {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  padding: 16px 20px !important;
  gap: 12px !important;
  border: none !important;
  background: transparent !important;
  color: var(--kb-vmm-text-muted) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  text-align: right !important;
  position: relative !important;
}

.kb-vmm-tab-btn:hover {
  background-color: #eaeaec !important;
  color: var(--kb-vmm-text-main) !important;
}

/* Active State */
.kb-vmm-tab-list li.uk-active .kb-vmm-tab-btn,
.kb-vmm-tab-list li.kb-vmm-active .kb-vmm-tab-btn {
  background-color: #fff !important;
  color: var(--kb-vmm-primary) !important;
}

.kb-vmm-tab-list li.uk-active .kb-vmm-tab-btn::before,
.kb-vmm-tab-list li.kb-vmm-active .kb-vmm-tab-btn::before {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background-color: var(--kb-vmm-primary) !important;
}

.kb-vmm-link-icon {
  font-size: 20px !important;
  opacity: 1;
}

/* ==========================================================================
   Content Area (Left Side)
   ========================================================================== */

.kb-vmm-switcher {
  flex: 1 !important;
  height: 100% !important;
  background-color: #fff !important;
  overflow-y: auto !important;
}

.kb-vmm-tab-panel {
  padding: 25px 35px !important;
}

/* Hide inactive panels correctly */
.kb-vmm-tab-panel[hidden] {
  display: none !important;
}

/* Main Category Title inside Panel */
.kb-vmm-tab-title {
  display: block !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #000 !important;
  margin-bottom: 25px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid #f0f0f1 !important;
}

/* ==========================================================================
   Columns & Links (Grid Style)
   ========================================================================== */

.kb-vmm-columns {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important; /* 4 ستونه شبیه دیجی کالا */
  gap: 30px !important;
  align-items: start !important;
}

.kb-vmm-column-title {
  display: flex !important;
  align-items: center !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--kb-vmm-text-main) !important;
  margin-bottom: 15px !important;
  padding-right: 10px !important;
  position: relative !important;
}

.kb-vmm-column-title::before {
  content: "";
  position: absolute;
  right: 0;
  width: 3px;
  height: 16px;
  background-color: var(--kb-vmm-primary) !important;
}

.kb-vmm-item-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.kb-vmm-item {
  margin-bottom: 8px !important;
}

.kb-vmm-link {
  font-size: 13px !important;
  color: var(--kb-vmm-text-muted) !important;
  text-decoration: none !important;
  transition: color 0.2s;
}

.kb-vmm-link:hover {
  color: var(--kb-vmm-primary) !important;
}

/* ==========================================================================
   Scrollbars
   ========================================================================== */

.kb-vmm-tab-list::-webkit-scrollbar,
.kb-vmm-switcher::-webkit-scrollbar {
  width: 6px;
}

.kb-vmm-tab-list::-webkit-scrollbar-thumb,
.kb-vmm-switcher::-webkit-scrollbar-thumb {
  background-color: #c1c1c1;
  border-radius: 10px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 959px) {
  .kb-vmm-menu-item {
    display: none !important; /* مخفی سازی در موبایل برای جلوگیری از تداخل */
  }
}