/* =========================================================================
   menu — مگامنوی دسکتاپ و کشوی موبایل

   مارک‌آپ منو را ویجت nav-menu المنتور می‌سازد و در دیتابیس است، پس اینجا
   فقط بازطراحی می‌شود. کلاس‌های zm-* را menu.js اضافه می‌کند؛ اگر JS نرسد،
   منو دقیقاً همان کشوی پیش‌فرض المنتور می‌ماند و چیزی نمی‌شکند.

   وابسته به: header.css       تعامل: menu.js
   ========================================================================= */

.zm-scope {
	--zm-bg:        #FFFFFF;
	--zm-bg2:       #FAF8F5;
	--zm-line:      #ECE5DC;
	--zm-ink:       #1A1714;
	--zm-ink2:      #5C554D;
	--zm-ink3:      #8A8078;
	--zm-accent:    #C8102E;
	--zm-accent2:   #E8324F;
	--zm-radius:    18px;
	--zm-shadow:    0 26px 60px rgba(40, 20, 12, .16), 0 2px 6px rgba(40, 20, 12, .06);
}

/* =========================================================================
   ۱) مگامنوی دسکتاپ
   پنل تمام‌عرض زیر هدر باز می‌شود. چون هدر خودش position:fixed است، پنل
   با position:fixed و top برابر ارتفاع هدر جای می‌گیرد — متغیر --zm-top را
   menu.js از ارتفاع واقعی هدر پر می‌کند.
   ========================================================================= */

@media (min-width: 1440px) {

	/* والدِ آیتم باید مرجع رویداد باشد، نه مرجع مکان — مکان با fixed است. */
	.elementor-location-header .zm-has-mega {
		position: static;
	}

	.elementor-location-header .zm-mega {
		position: fixed;
		top: var(--zm-top, 100px);
		inset-inline: 0;
		z-index: 9998;

		display: block;
		max-height: min(76vh, 640px);
		overflow-y: auto;
		overscroll-behavior: contain;

		background: var(--zm-bg);
		border-top: 1px solid var(--zm-line);
		box-shadow: var(--zm-shadow);

		/* بسته: نه دیده می‌شود نه کلیک می‌گیرد، ولی در DOM می‌ماند تا
		   ارتفاعش از قبل محاسبه شده باشد و باز شدن نپرد. */
		opacity: 0;
		visibility: hidden;
		transform: translateY(-8px);
		pointer-events: none;
		transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
	}

	.elementor-location-header .zm-has-mega.zm-open .zm-mega {
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
		transition: opacity .2s ease, transform .2s ease, visibility 0s;
	}

	/* پردهٔ تیره پشت پنل */
	.zm-veil {
		position: fixed;
		inset: var(--zm-top, 100px) 0 0;
		z-index: 9996;
		background: rgba(26, 23, 20, .38);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity .22s ease, visibility 0s linear .22s;
	}
	.zm-veil.is-on {
		opacity: 1;
		visibility: visible;
		transition: opacity .22s ease, visibility 0s;
	}

	/* فلش کوچک روی آیتمِ باز */
	.elementor-location-header .zm-has-mega.zm-open > a.elementor-item {
		color: var(--zm-accent);
	}
	.elementor-location-header .zm-has-mega > a.elementor-item .zm-caret {
		display: inline-block;
		margin-inline-start: 4px;
		transition: transform .2s ease;
	}
	.elementor-location-header .zm-has-mega.zm-open > a.elementor-item .zm-caret {
		transform: rotate(180deg);
	}

	/* ---------- بدنهٔ پنل ---------- */
	.zm-mega-in {
		max-width: 1240px;
		margin: 0 auto;
		padding: 26px clamp(16px, 3vw, 40px) 30px;
		display: grid;
		grid-template-columns: 1fr var(--zm-promo-w, 268px);
		gap: clamp(20px, 2.4vw, 40px);
		align-items: start;
	}
	.zm-mega-in.zm-no-promo { grid-template-columns: 1fr; }

	.zm-mega-head {
		grid-column: 1 / -1;
		display: flex;
		align-items: baseline;
		gap: 12px;
		margin-bottom: 2px;
		padding-bottom: 14px;
		border-bottom: 1px solid var(--zm-line);
	}
	.zm-mega-head b {
		font-size: 14px;
		font-weight: 800;
		color: var(--zm-ink);
	}
	.zm-mega-head span {
		font-size: 12px;
		color: var(--zm-ink3);
	}
	.zm-mega-head a {
		margin-inline-start: auto;
		font-size: 12.5px;
		font-weight: 700;
		color: var(--zm-accent);
		white-space: nowrap;
	}

	/* ---------- شبکهٔ آیتم‌ها ---------- */
	.zm-grid {
		display: grid;
		grid-template-columns: repeat(var(--zm-cols, 3), minmax(0, 1fr));
		gap: 6px 10px;
	}

	.elementor-location-header .zm-mega .zm-item,
	.elementor-location-header .zm-mega a.zm-item {
		display: flex;
		align-items: center;
		gap: 11px;
		padding: 10px 12px;
		border-radius: 12px;
		color: var(--zm-ink);
		font-size: 13px;
		font-weight: 600;
		line-height: 1.8;
		background: transparent;
		transition: background .16s ease, color .16s ease;
	}
	.elementor-location-header .zm-mega a.zm-item:hover,
	.elementor-location-header .zm-mega a.zm-item:focus-visible {
		background: var(--zm-bg2);
		color: var(--zm-accent);
		outline: none;
	}

	/* پرچم — گرادیانتش را menu.js از روی نام زبان روی همین عنصر می‌گذارد. */
	.zm-flag {
		flex: 0 0 auto;
		width: 34px;
		height: 24px;
		border-radius: 6px;
		border: 1px solid rgba(0, 0, 0, .08);
		box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
		background: var(--zm-ink3);
	}
	/* آزمون‌ها پرچم ندارند؛ به‌جایش یک نشان حرفی می‌گیرند. */
	.zm-flag.zm-badge {
		display: grid;
		place-items: center;
		width: 34px;
		height: 24px;
		background: var(--zm-bg2);
		border-color: var(--zm-line);
		color: var(--zm-ink2);
		font-size: 9.5px;
		font-weight: 800;
		letter-spacing: .3px;
		direction: ltr;
	}

	.zm-item-t { min-width: 0; }
	.zm-item-t b {
		display: block;
		font-weight: 600;
		font-size: 13px;
		color: inherit;
	}
	.zm-item-t small {
		display: block;
		font-size: 11px;
		font-weight: 500;
		color: var(--zm-ink3);
		line-height: 1.7;
	}

	/* ---------- کارت تبلیغی ---------- */
	.zm-promo {
		position: relative;
		overflow: hidden;
		border-radius: var(--zm-radius);
		background: var(--zm-bg2);
		border: 1px solid var(--zm-line);
		min-height: 190px;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		color: #FFF;
		text-decoration: none;
	}
	.zm-promo img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.zm-promo::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(to top, rgba(20, 10, 6, .88), rgba(20, 10, 6, .28) 55%, transparent);
	}
	.zm-promo-tx {
		position: relative;
		z-index: 1;
		padding: 16px 18px 18px;
	}
	.zm-promo-tx b {
		display: block;
		font-size: 14.5px;
		font-weight: 800;
		line-height: 1.7;
		color: #FFF;
	}
	.zm-promo-tx span {
		display: block;
		margin-top: 4px;
		font-size: 11.5px;
		line-height: 1.9;
		color: rgba(255, 255, 255, .82);
	}
	.zm-promo-tx i {
		display: inline-block;
		margin-top: 10px;
		padding: 7px 14px;
		border-radius: 9px;
		background: var(--zm-accent);
		color: #FFF;
		font-size: 11.5px;
		font-weight: 800;
		font-style: normal;
	}
	.elementor-location-header a.zm-promo:hover { color: #FFF; }
	.elementor-location-header a.zm-promo:hover img { transform: scale(1.04); }
	.zm-promo img { transition: transform .4s ease; }

	/* کشوی پیش‌فرض المنتور در حالت مگامنو کنار گذاشته می‌شود. */
	.elementor-location-header .zm-has-mega > ul.sub-menu {
		display: none !important;
	}
}

/* =========================================================================
   ۲) کشوی موبایل
   زیر ۱۴۴۰px، جای کشوی پیش‌فرض المنتور یک پنل کشویی از سمت راست می‌آید.
   ========================================================================= */

@media (max-width: 1439.98px) {

	/* پردهٔ تیره */
	.zm-veil {
		position: fixed;
		inset: 0;
		z-index: 99998;
		background: rgba(26, 23, 20, .5);
		backdrop-filter: blur(2px);
		-webkit-backdrop-filter: blur(2px);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity .26s ease, visibility 0s linear .26s;
	}
	.zm-veil.is-on {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: opacity .26s ease, visibility 0s;
	}

	/* پنل — همیشه فیزیکاً سمت راست.

	   انتخابگر عمداً کلاس اختصاصی .zm-drawer است، نه مسیرِ داخل هدر:
	   menu.js این کشو را به body منتقل می‌کند، چون هدر backdrop-filter
	   دارد و هر عنصر position:fixed داخلش، به‌جای صفحه نسبت به خودِ هدر
	   جای می‌گیرد — اندازه‌گیری‌شده: ارتفاع ۶۸px به‌جای تمام صفحه.

	   ضمناً المنتور همان کلاس elementor-nav-menu--dropdown را روی
	   زیرمنوهای ul هم می‌گذارد، پس تکیه بر آن کلاس هم مطمئن نبود. */
	nav.zm-drawer {
		position: fixed !important;
		top: 0 !important;
		bottom: 0 !important;
		right: 0 !important;
		left: auto !important;
		z-index: 99999 !important;

		width: min(340px, 88vw) !important;
		max-width: none !important;
		max-height: none !important;
		height: 100% !important;

		display: flex !important;
		flex-direction: column;

		background: var(--zm-bg) !important;
		box-shadow: -18px 0 50px rgba(26, 23, 20, .24);
		border: 0 !important;
		border-radius: 0 !important;

		overflow: hidden auto !important;
		overscroll-behavior: contain;

		/* عمداً از ویژگی‌های فیزیکی (right/left) استفاده شده نه منطقی:
		   در RTL معنای inset-inline-end برعکس می‌شود و کشو به چپ می‌افتد،
		   در حالی که این کشو باید در هر جهتی فیزیکاً سمت راست باشد. */
		transform: translateX(100%);
		transition: transform .3s cubic-bezier(.3, .8, .3, 1);
		padding: 0 !important;
	}

	/* حالت باز با کلاس کنترل می‌شود نه با انتخابگرِ خواهری، چون کشو دیگر
	   خواهرِ دکمهٔ همبرگر نیست و به body منتقل شده است. */
	nav.zm-drawer.zm-open {
		transform: none;
	}
	/* سایه هم باید به سمت داخل صفحه بیفتد، یعنی به چپ. */
	nav.zm-drawer {
		box-shadow: -18px 0 50px rgba(26, 23, 20, .24);
	}

	/* سرِ کشو — لوگو و دکمهٔ بستن */
	.zm-drawer-head {
		flex: 0 0 auto;
		position: sticky;
		top: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 16px 18px;
		background: var(--zm-bg);
		border-bottom: 1px solid var(--zm-line);
	}
	.zm-drawer-head img { height: 34px; width: auto; }
	.zm-drawer-head b {
		font-size: 14px;
		font-weight: 800;
		color: var(--zm-ink);
	}
	.zm-drawer-x {
		margin-inline-start: auto;
		width: 34px;
		height: 34px;
		flex: 0 0 auto;
		display: grid;
		place-items: center;
		border: 1px solid var(--zm-line);
		border-radius: 10px;
		background: var(--zm-bg2);
		color: var(--zm-ink2);
		font-size: 15px;
		line-height: 1;
		cursor: pointer;
		padding: 0;
		transition: background .2s ease, color .2s ease;
	}
	.zm-drawer-x:hover { background: var(--zm-accent); border-color: var(--zm-accent); color: #FFF; }

	/* فهرست */
	nav.zm-drawer ul.elementor-nav-menu {
		flex: 1 1 auto;
		display: block !important;
		padding: 8px 12px 20px !important;
		margin: 0 !important;
		background: transparent !important;
	}

	nav.zm-drawer ul.elementor-nav-menu li {
		display: block !important;
		width: 100% !important;
		border: 0 !important;
	}

	nav.zm-drawer a.elementor-item {
		display: flex !important;
		align-items: center;
		gap: 10px;
		padding: 13px 14px !important;
		margin: 2px 0;
		border-radius: 12px;
		font-size: 14px !important;
		font-weight: 600;
		color: var(--zm-ink) !important;
		background: transparent !important;
		border: 0 !important;
		line-height: 1.9;
	}
	nav.zm-drawer a.elementor-item:hover,
	nav.zm-drawer a.elementor-item-active {
		background: var(--zm-bg2) !important;
		color: var(--zm-accent) !important;
	}

	/* دکمهٔ باز/بستهٔ زیرمنو — کنار لینک می‌نشیند و خودش لینک نیست، تا
	   کلیک روی نامِ آیتم همچنان کاربر را به صفحه ببرد. */
	.zm-row { display: flex; align-items: center; gap: 4px; }
	.zm-row > a.elementor-item { flex: 1 1 auto; min-width: 0; }
	.zm-sub-t {
		flex: 0 0 auto;
		width: 34px;
		height: 34px;
		display: grid;
		place-items: center;
		border: 1px solid var(--zm-line);
		border-radius: 10px;
		background: var(--zm-bg);
		color: var(--zm-ink2);
		cursor: pointer;
		padding: 0;
		transition: transform .22s ease, background .2s ease, color .2s ease;
	}
	.zm-sub-t svg { width: 14px; height: 14px; fill: currentColor; }
	.zm-sub-t[aria-expanded="true"] {
		transform: rotate(180deg);
		background: var(--zm-accent);
		border-color: var(--zm-accent);
		color: #FFF;
	}

	/* زیرمنو — آکاردئون */
	nav.zm-drawer ul.sub-menu {
		display: block !important;
		overflow: hidden;
		max-height: 0;
		transition: max-height .3s ease;
		padding: 0 !important;
		margin: 0 8px !important;
		background: transparent !important;
		border-inline-start: 2px solid var(--zm-line) !important;
	}
	nav.zm-drawer li.zm-sub-open > ul.sub-menu {
		max-height: var(--zm-sub-h, 600px);
	}

	nav.zm-drawer ul.sub-menu a.elementor-sub-item {
		display: flex !important;
		align-items: center;
		gap: 9px;
		padding: 10px 12px !important;
		margin: 1px 0;
		border-radius: 10px;
		font-size: 13px !important;
		font-weight: 500;
		color: var(--zm-ink2) !important;
		background: transparent !important;
		line-height: 1.8;
	}
	nav.zm-drawer ul.sub-menu a.elementor-sub-item:hover {
		background: var(--zm-bg2) !important;
		color: var(--zm-accent) !important;
	}

	/* پرچم کوچک داخل کشو */
	nav.zm-drawer .zm-flag {
		flex: 0 0 auto;
		width: 26px;
		height: 18px;
		border-radius: 4px;
		border: 1px solid rgba(0, 0, 0, .08);
	}
	nav.zm-drawer .zm-flag.zm-badge {
		display: grid;
		place-items: center;
		background: var(--zm-bg2);
		border-color: var(--zm-line);
		color: var(--zm-ink3);
		font-size: 8px;
		font-weight: 800;
		direction: ltr;
	}

	/* پای کشو — تماس */
	.zm-drawer-foot {
		flex: 0 0 auto;
		margin-top: auto;
		padding: 16px 18px 20px;
		border-top: 1px solid var(--zm-line);
		background: var(--zm-bg2);
	}
	.zm-drawer-foot a {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 13px 16px;
		border-radius: 12px;
		background: var(--zm-accent);
		color: #FFF !important;
		font-size: 13.5px;
		font-weight: 800;
	}
	.zm-drawer-foot a.is-ghost {
		margin-top: 8px;
		background: var(--zm-bg);
		border: 1px solid var(--zm-line);
		color: var(--zm-ink) !important;
	}
	.zm-drawer-foot span {
		display: block;
		margin-top: 12px;
		text-align: center;
		font-size: 11.5px;
		color: var(--zm-ink3);
		direction: ltr;
	}

	/* وقتی کشو باز است، صفحهٔ پشت نباید اسکرول شود. */
	html.zm-lock, html.zm-lock body { overflow: hidden !important; }
}

@media (prefers-reduced-motion: reduce) {
	nav.zm-drawer,
	.elementor-location-header .zm-mega,
	.zm-veil,
	.zm-sub-t,
	nav.zm-drawer ul.sub-menu { transition: none !important; }
}