/* =========================================================
   Enet Mega Menu
   Uses the EnetCable theme's CSS variables when present,
   falls back to sane defaults otherwise so the plugin never
   breaks visually if activated before Global.css loads.

   Interaction style (v1.1):
     - Desktop: 3-column cascading panel (main category ->
       subcategory -> grouped leaf links), matching the
       "دسته‌بندی محصولات" reference pattern.
     - Mobile: slide-in drawer with overlay backdrop; inside it,
       a fixed right-hand rail of top-level categories next to a
       left-hand panel of cards for the active category. A card
       with children expands its own children inline underneath
       itself (accordion, any depth) instead of navigating to a
       new screen — matching the Technolife-style mobile menu.
   Colors intentionally still come ONLY from the variables
   below (nothing new introduced) — only the layout/animation
   mechanics changed.
   ========================================================= */
:root {
	--enet-mm-primary: var(--Primary, #3f8efc);
	--enet-mm-secondary: var(--Secondery, #c5edff);
	--enet-mm-black: var(--Black, #333);
	--enet-mm-white: var(--White, #fff);
	--enet-mm-grey: var(--Grey, #d9d9d9);
	--enet-mm-shadow: var(--BoxShadow, 0 6px 24px rgba(0, 0, 0, 0.15));
	--enet-mm-breakpoint: 850px;
}

#EnetMegaMenu,
#EnetMobileMenu,
#EnetMegaMenu *,
#EnetMobileMenu * {
	box-sizing: border-box;
}

#EnetMegaMenu ul,
#EnetMobileMenu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#EnetMegaMenu a,
#EnetMobileMenu a,
.enet-menu-toggle-label {
	text-decoration: none;
	color: inherit;
}

.enet-menu-toggle {
	background: transparent;
	border: none;
	cursor: pointer;
	color: inherit;
	padding: 0;
}

.enet-chevron {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(135deg);
	transition: transform 0.25s ease;
}

.enet-chevron-back {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	transform: rotate(45deg);
}

/* =========================================================
   DESKTOP  (>= 850px) — 3-column cascading mega panel
   ========================================================= */

#EnetMegaMenu {
	display: none;
}

@media screen and (min-width: 850px) {

	#EnetMegaMenu {
		display: block;
		width: 100%;
		max-width: 1760px;
		margin: 10px auto 0;
		position: relative;
		z-index: 40;
	}

	.enet-menu-root {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.enet-menu-root > li.enet-menu-item {
		position: relative;
	}

	/* First top-level item styled as the highlighted "categories" entry
	   point, matching the site's existing visual convention. */
	.enet-menu-root > li.enet-depth-0:first-child,.enet-menu-root > li.enet-depth-0:last-child {
		background: var(--enet-mm-primary);
		border-radius: 4px;
	}
	.enet-menu-root > li.enet-depth-0:last-child{
		margin-right:auto;
	}
	.enet-menu-root > li.enet-depth-0:first-child > .enet-menu-link,
	.enet-menu-root > li.enet-depth-0:first-child > .enet-menu-toggle-label,
	.enet-menu-root > li.enet-depth-0:first-child > .enet-menu-toggle {
		color: var(--enet-mm-white);
	}

	.enet-menu-item {
		display: flex;
		align-items: center;
	}

	.enet-menu-link,
	.enet-menu-toggle-label {
		display: flex;
		align-items: center;
		padding: 10px 14px;
		font-family: 'YekanBakhBold', inherit;
		font-size: 14px;
		color: var(--enet-mm-black);
		cursor: pointer;
		white-space: nowrap;
		transition: color 0.2s ease;
	}

	.enet-menu-root > li:not(.enet-depth-0:first-child) > .enet-menu-link:hover,
	.enet-menu-root > li:not(.enet-depth-0:first-child) > .enet-menu-toggle-label:hover,
	.enet-menu-root > li:not(.enet-depth-0:first-child).enet-open > .enet-menu-link,
	.enet-menu-root > li:not(.enet-depth-0:first-child).enet-open > .enet-menu-toggle-label {
		color: var(--enet-mm-primary);
	}

	.enet-menu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 26px;
		height: 26px;
	}

	li.enet-open > .enet-menu-toggle .enet-chevron {
		transform: rotate(-45deg);
	}

	/* The original recursively-nested <ul class="enet-submenu"> tree is
	   kept in the DOM as the data source (it's what the walker/PHP emits
	   and what the mobile copy also relies on) but is never shown
	   directly on desktop — menu.js reads it and builds the 3-column
	   ".enet-mega-panel" you see below instead. */
	.enet-menu-root .enet-submenu {
		display: none;
	}

	/* --- 3-column cascading mega panel --- */
	.enet-mega-panel {
		display: none;
		position: absolute;
		top: 100%;
		right: 0;
		margin-top: 8px;
		background: var(--enet-mm-white);
		border-radius: 14px;
		box-shadow: var(--enet-mm-shadow);
		overflow: hidden;
		width: max-content;
		max-width: 95vw;
		z-index: 100;
	}

	li.enet-open > .enet-mega-panel {
		display: flex;
	}
.enet-menu-root > li.enet-depth-0:first-child>a>span ,.enet-menu-root > li.enet-depth-0:last-child>a>span {
    color: #fff;
}
	/* Column 1 — top-level categories under the opened item */
	.enet-mm-col-main {
		width: 230px;
		background: rgba(0, 0, 0, 0.02);
		border-inline-start: 1px solid var(--enet-mm-grey);
		max-height: 560px;
		overflow-y: auto;
		flex-shrink: 0;
	}

	.enet-mm-col-main-item {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 13px 16px;
		font-family: 'YekanBakhReg', inherit;
		font-size: 14px;
		color: var(--enet-mm-black);
		cursor: pointer;
		border-inline-end: 3px solid transparent;
		transition: background 0.15s, color 0.15s;
	}

	.enet-mm-col-main-item .enet-mm-chev {
		margin-inline-start: auto;
		color: var(--enet-mm-grey);
		font-size: 12px;
	}

	.enet-mm-col-main-item:hover,
	.enet-mm-col-main-item:focus-visible,
	.enet-mm-col-main-item.enet-mm-active {
		background: var(--enet-mm-secondary);
		border-inline-end-color: var(--enet-mm-primary);
		color: var(--enet-mm-primary);
		font-family: 'YekanBakhBold', inherit;
	}

	/* Column 2 — subcategories of the highlighted column-1 item */
	.enet-mm-col-sub {
		width: 230px;
		border-inline-start: 1px solid var(--enet-mm-grey);
		max-height: 560px;
		overflow-y: auto;
		flex-shrink: 0;
		display: none;
		flex-direction: column;
	}

	.enet-mm-col-sub.enet-mm-open {
		display: flex;
	}

	.enet-mm-col-sub-header {
		padding: 16px;
		font-family: 'YekanBakhBold', inherit;
		font-size: 15px;
		color: var(--enet-mm-primary);
		border-bottom: 1px solid var(--enet-mm-grey);
	}

	.enet-mm-col-sub-item {
		display: block;
		padding: 12px 16px;
		font-family: 'YekanBakhReg', inherit;
		font-size: 13.5px;
		color: var(--enet-mm-black);
		cursor: pointer;
		border-inline-end: 3px solid transparent;
	}

	.enet-mm-col-sub-item:hover,
	.enet-mm-col-sub-item:focus-visible,
	.enet-mm-col-sub-item.enet-mm-active {
		background: rgba(0, 0, 0, 0.02);
		border-inline-end-color: var(--enet-mm-primary);
		color: var(--enet-mm-primary);
	}

	/* Column 3 — grouped leaf links of the highlighted column-2 item */
	.enet-mm-col-detail {
		width: 230px;
		padding: 20px 24px;
		max-height: 560px;
		overflow-y: auto;
		display: none;
	}

	.enet-mm-col-detail.enet-mm-open {
		display: block;
	}

	.enet-mm-detail-group {
		margin-bottom: 22px;
	}

	.enet-mm-detail-group:last-child {
		margin-bottom: 0;
	}

	.enet-mm-detail-group h4 {
		margin: 0 0 12px;
		padding-bottom: 8px;
		font-family: 'YekanBakhBold', inherit;
		font-size: 14px;
		font-weight: normal;
		color: var(--enet-mm-black);
		border-bottom: 1px solid var(--enet-mm-grey);
	}

	.enet-mm-detail-group ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

	.enet-mm-detail-group li {
		font-family: 'YekanBakhReg', inherit;
		font-size: 13px;
		color: var(--enet-mm-black);
		padding: 6px 0;
	}

	.enet-mm-detail-group a {
		display: block;
		color: inherit;
		cursor: pointer;
	}

	.enet-mm-detail-group a:hover,
	.enet-mm-detail-group a:focus-visible {
		color: var(--enet-mm-primary);
	}

	/* scrollbars */
	.enet-mm-col-main::-webkit-scrollbar,
	.enet-mm-col-sub::-webkit-scrollbar,
	.enet-mm-col-detail::-webkit-scrollbar {
		width: 6px;
	}

	.enet-mm-col-main::-webkit-scrollbar-thumb,
	.enet-mm-col-sub::-webkit-scrollbar-thumb,
	.enet-mm-col-detail::-webkit-scrollbar-thumb {
		background: var(--enet-mm-grey);
		border-radius: 6px;
	}

	.enet-current > .enet-menu-link,
	.enet-current > .enet-menu-toggle-label {
		color: var(--enet-mm-primary);
	}
}

/* =========================================================
   MOBILE  (< 850px) — slide-in side drawer with overlay
   ========================================================= */

#EnetMobileMenu {
	position: fixed;
	inset: 0;
	z-index: 999999999;
	visibility: hidden;
	pointer-events: none;
}

#EnetMobileMenu.enet-open {
	visibility: visible;
	pointer-events: auto;
}

/* Dark overlay behind the drawer panel */
#EnetMobileMenu::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(15, 30, 50, 0.45);
	opacity: 0;
	transition: opacity 0.22s ease;
}

#EnetMobileMenu.enet-open::before {
	opacity: 1;
}

.enet-mobile-menu__panel {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: min(86vw, 360px);
	display: flex;
	flex-direction: column;
	background: var(--enet-mm-white);
	transform: translateX(100%);
	transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
	box-shadow: var(--enet-mm-shadow);
	overflow-x: hidden;
}

#EnetMobileMenu.enet-open .enet-mobile-menu__panel {
	transform: translateX(0);
}

.enet-mobile-menu__header {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 14px 16px;
	background: var(--enet-mm-white);
	border-bottom: 1px solid var(--enet-mm-grey);
}

.enet-mobile-menu__title {
	font-family: 'YekanBakhExBold', inherit;
	font-size: 14.5px;
	color: var(--enet-mm-black);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.enet-mobile-menu__close {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--enet-mm-black);
}

/* The nested <ul>/<li> tree the walker outputs is kept in the DOM only
   as a hidden data source for menu.js — never shown directly. */
.enet-mobile-menu__source {
	display: none;
}

/* ---- body: two columns — rail on the right (RTL start), cards on the left ---- */
.enet-mm2-body {
	flex: 1 1 auto;
	display: flex;
	min-height: 0;
}

/* ===== right rail — top-level categories ===== */
.enet-mm2-rail {
	flex: 0 0 84px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: rgba(0, 0, 0, 0.02);
	border-inline-start: 1px solid var(--enet-mm-grey);
	padding: 6px 0 24px;
}

.enet-mm2-rail-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 12px 4px;
	cursor: pointer;
	text-align: center;
	border-inline-start: 3px solid transparent;
	color: #888;
}

.enet-mm2-rail-icon {
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.enet-mm2-rail-icon svg {
	width: 22px;
	height: 22px;
	stroke: currentColor;
}

.enet-mm2-rail-label {
	font-size: 10.5px;
	line-height: 1.4;
	font-family: 'YekanBakhReg', inherit;
}

.enet-mm2-rail-item.enet-mm2-active {
	color: var(--enet-mm-primary);
	background: var(--enet-mm-white);
	border-inline-start-color: var(--enet-mm-primary);
}

.enet-mm2-rail-item.enet-mm2-active .enet-mm2-rail-label {
	font-family: 'YekanBakhBold', inherit;
}

/* ===== left panel — cards for the active rail item, with inline accordion drill-down ===== */
.enet-mm2-panel {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.enet-mm2-cards-viewport {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-y: contain;
	padding: 14px;
}

/* one shared style for the recursive <ul>/<li> tree — depth is
   expressed purely via nesting + the data-depth attribute */
.enet-mm2-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.enet-mm2-list[data-depth="0"] {
	animation: enet-mm2-fade 0.18s ease;
}

@keyframes enet-mm2-fade {
	from {
		opacity: 0;
		transform: translateY(4px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.enet-mm2-node {
	display: flex;
	flex-direction: column;
}

.enet-mm2-card {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: rgba(0, 0, 0, 0.03);
	border-radius: 10px;
	padding: 15px 34px;
	font-family: 'YekanBakhBold', inherit;
	font-size: 13.5px;
	color: var(--enet-mm-black);
	text-decoration: none;
	cursor: pointer;
	position: relative;
	font-weight:900;
	color:#000;
}

/* nested levels: slightly smaller, outlined instead of filled, so
   depth is visually obvious once a branch is expanded */
li[data-depth="1"] > .enet-mm2-card {
	background: var(--enet-mm-white);
	border: 1px solid var(--enet-mm-grey);
	font-family: 'YekanBakhReg', inherit;
	font-size: 13px;
	padding: 12px 30px;
}

li[data-depth="2"] > .enet-mm2-card {
	background: var(--enet-mm-white);
	border: 1px dashed var(--enet-mm-grey);
	font-size: 12.5px;
	padding: 11px 28px;
	color: #555;
}

.enet-mm2-card.enet-mm2-active-branch {
	color: var(--enet-mm-primary);
	border-color: var(--enet-mm-primary);
}

.enet-mm2-card.enet-mm2-current {
	color: var(--enet-mm-primary);
}

.enet-mm2-caret {
	position: absolute;
	inset-inline-start: 14px;
	top: 50%;
	width: 8px;
	height: 8px;
	margin-top: -5px;
	border-left: 2px solid #aaa;
	border-bottom: 2px solid #aaa;
	transform: rotate(-45deg);
	/* pointing down = closed, tap to open */
	transition: transform 0.2s ease;
}

.enet-mm2-card.enet-mm2-expanded .enet-mm2-caret {
	transform: rotate(135deg);
	/* pointing up = open */
	border-color: var(--enet-mm-primary);
}

/* the nested children group, opening right underneath the parent card */
.enet-mm2-subgroup {
	list-style: none;
	margin: 10px 0 0;
	padding-inline-end: 14px;
	display: none;
	flex-direction: column;
	gap: 8px;
}

.enet-mm2-subgroup.enet-mm2-open {
	display: flex;
}

.enet-mm2-empty {
	padding: 30px 14px;
	text-align: center;
	font-size: 13px;
	color: #999;
}

/* Locks background scroll while the mobile drawer is open */
html.enet-menu-lock,
html.enet-menu-lock body {
	overflow: hidden !important;
	height: 100%;
}

@media screen and (min-width: 850px) {
	#EnetMobileMenu {
		display: none !important;
	}
}