/* =========================================================
   AMIR MENU — طراحی و تولید شده توسط AMIR TECHNOLOGY
   ========================================================= */

.amir-menu-outer,
.amir-mm-outer {
	box-sizing: border-box;
}
.amir-menu-outer *,
.amir-mm-outer * {
	box-sizing: border-box;
}

/* ---------- کادر حاشیه گرادینت/ساده (مشترک بین دو ویجت) ---------- */
.amir-border-wrap {
	position: relative;
	border-radius: var(--amir-radius, 24px);
	padding: var(--amir-border-width, 2px);
	overflow: hidden;
	isolation: isolate;
	transition: border-radius 0.3s ease;
}

.amir-border-wrap.amir-border-none {
	padding: 0;
}

.amir-rotator {
	position: absolute;
	inset: -60%;
	background: var(--amir-border-bg, transparent);
	z-index: 0;
}

.amir-border-wrap.amir-border-solid .amir-rotator {
	inset: 0;
}

.amir-border-wrap.amir-rotate-on .amir-rotator {
	animation: amir-menu-rotate var(--amir-rotate-speed, 5s) linear infinite;
}

@keyframes amir-menu-rotate {
	from { transform: rotate(0deg); }
	to   { transform: rotate(360deg); }
}

.amir-border-inner {
	position: relative;
	z-index: 1;
	border-radius: calc(var(--amir-radius, 24px) - var(--amir-border-width, 2px));
	background: var(--amir-inner-bg, rgba(18,18,26,0.85));
	-webkit-backdrop-filter: blur(var(--amir-blur, 16px)) saturate(160%);
	backdrop-filter: blur(var(--amir-blur, 16px)) saturate(160%);
	overflow: hidden;
}

/* =========================================================
   منوی بالای صفحه
   ========================================================= */
.amir-top-menu-outer {
	position: relative;
	width: 100%;
	display: flex;
	justify-content: center;
	padding: var(--amir-top-offset, 20px) 16px 0;
	z-index: 9999;
}

.amir-top-menu-outer.amir-is-sticky {
	position: sticky;
	top: 0;
}

.amir-top-menu-outer .amir-border-wrap {
	width: 100%;
	max-width: var(--amir-max-width, 92%);
}

.amir-top-menu-outer .amir-border-inner {
	padding: 4px 10px;
	overflow: visible; /* برای نمایش زیرمنو */
}

/* منوی افقی سطح اول */
ul.amir-top-menu {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	gap: 4px;
}

ul.amir-top-menu li {
	position: relative;
}

ul.amir-top-menu > li > a {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	font-weight: 600;
	white-space: nowrap;
	border-radius: 999px;
	transition: color 0.25s ease, background 0.25s ease;
}

ul.amir-top-menu > li > a:hover {
	background: rgba(255,255,255,0.08);
}

/* زیرمنوها (چندطبقه) */
ul.amir-top-menu ul.sub-menu {
	list-style: none;
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	min-width: 220px;
	margin: 10px 0 0;
	padding: 10px;
	border-radius: 16px;
	background: rgba(18,18,26,0.92);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	box-shadow: 0 20px 45px rgba(0,0,0,0.35);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
	z-index: 20;
}

ul.amir-top-menu ul.sub-menu ul.sub-menu {
	top: 0;
	inset-inline-start: 100%;
	margin-inline-start: 8px;
}

[dir="rtl"] ul.amir-top-menu ul.sub-menu ul.sub-menu {
	inset-inline-start: auto;
	inset-inline-end: 100%;
	margin-inline-start: 0;
	margin-inline-end: 8px;
}

ul.amir-top-menu li:hover > ul.sub-menu,
ul.amir-top-menu li.amir-touch-open > ul.sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

ul.amir-top-menu ul.sub-menu li a {
	display: block;
	padding: 10px 14px;
	border-radius: 10px;
	color: inherit;
	text-decoration: none;
	white-space: nowrap;
}

ul.amir-top-menu ul.sub-menu li a:hover {
	background: rgba(255,255,255,0.08);
}

ul.amir-top-menu li.menu-item-has-children > a::after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-inline-start: 6px;
	border-inline-end: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.7;
}

.amir-menu-placeholder {
	padding: 14px 20px;
	color: #cfcfe0;
	font-size: 14px;
}

/* موبایل/تبلت: منوی بالا به صورت فشرده و قابل اسکرول افقی */
@media (max-width: 1024px) {
	.amir-top-menu-outer .amir-border-inner {
		overflow-x: auto;
		scrollbar-width: none;
	}
	.amir-top-menu-outer .amir-border-inner::-webkit-scrollbar { display: none; }

	ul.amir-top-menu {
		flex-wrap: nowrap;
		justify-content: flex-start;
	}
}

/* =========================================================
   منوی پایین موبایل (استایل اینستاگرام)
   ========================================================= */
.amir-mm-outer {
	display: none; /* پیش‌فرض فقط موبایل/تبلت کوچک */
}

@media (max-width: 767px) {
	.amir-mm-outer {
		display: flex;
		justify-content: center;
		position: fixed;
		left: 16px;
		right: 16px;
		bottom: var(--amir-mm-bottom-gap, 16px);
		z-index: 99999;
		pointer-events: none;
	}

	.amir-mm-outer.amir-mm-static {
		position: relative;
		left: auto;
		right: auto;
		bottom: auto;
	}

	.amir-mm-outer .amir-border-wrap {
		pointer-events: auto;
		width: 100%;
		max-width: 480px;
		transition: transform 0.35s cubic-bezier(.4,0,.2,1), padding 0.35s ease;
	}

	.amir-mm-outer.amir-mm-scroll-effect.amir-mm-shrink .amir-border-wrap {
		transform: scale(0.92) translateY(4px);
	}

	.amir-mm-inner {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 8px 4px;
	}

	.amir-mm-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		text-decoration: none;
		color: inherit;
		flex: 1 1 0;
		padding: 6px 2px;
		transition: color 0.25s ease;
	}

	.amir-mm-icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		font-size: var(--amir-mm-icon-max, 26px);
		line-height: 1;
		transition: font-size 0.3s ease, transform 0.3s ease;
	}

	.amir-mm-icon svg {
		width: 1em;
		height: 1em;
		fill: currentColor;
	}

	.amir-mm-label {
		font-size: 11px;
		line-height: 1;
		transition: opacity 0.3s ease, height 0.3s ease;
	}

	.amir-mm-outer.amir-mm-scroll-effect.amir-mm-shrink .amir-mm-icon {
		font-size: var(--amir-mm-icon-min, 18px);
	}

	.amir-mm-outer.amir-mm-scroll-effect.amir-mm-shrink .amir-mm-label {
		opacity: 0;
		height: 0;
		overflow: hidden;
	}

	.amir-mm-item.amir-mm-active .amir-mm-icon {
		transform: translateY(-2px);
	}
}

@media (min-width: 768px) {
	.amir-mm-outer { display: none !important; }
}