/* ==========================================================================
   دکمه پنل کاربری کوانتیک — استایل فرانت‌اند
   رنگ‌ها و اندازه‌ها از متغیرهای CSS که به‌صورت inline روی .upb-wrapper تنظیم
   می‌شوند خوانده می‌شوند. هر رنگ می‌تواند transparent (بی‌رنگ) باشد.
   ========================================================================== */

.upb-wrapper {
	position: relative;
	display: inline-block;
	font-family: inherit;
	font-size: var(--font-size, 14px);
}

/* ── دکمهٔ اصلی (هم button کاربر واردشده، هم a کاربر مهمان) ── */
.upb-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--btn-bg, #1e1e1e);
	color: var(--btn-color, #fff);
	border: var(--btn-border, none);
	border-radius: var(--btn-radius, 10px);
	padding: var(--btn-padding, 10px 18px);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--font-size, 14px);
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	text-decoration: none;
	transition: background 0.2s, color 0.2s, border-color 0.2s;
}

/* هاور دکمه: رنگ پس‌زمینه، متن و کادر همگی قابل‌تنظیم (و قابل بی‌رنگ شدن) */
.upb-btn:hover,
.upb-btn:focus-visible {
	background: var(--btn-hover-bg, #009d66);
	color: var(--btn-hover-color, #fff);
	border-color: var(--btn-hover-border-color, #009d66);
	outline: none;
}

/* ── آیکن دکمه: اندازهٔ قابل‌تنظیم؛ فقط داخل خود دکمه اعمال می‌شود ── */
.upb-bicon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	line-height: 0;
}
.upb-btn > .upb-bicon svg,
.upb-btn > .upb-bicon img {
	width: var(--icon-size, 16px);
	height: var(--icon-size, 16px);
}
.upb-btn > .upb-bicon img {
	object-fit: contain;
}
.upb-btn > .upb-bicon .upb-cicon {
	font-size: var(--icon-size, 16px);
	line-height: 1;
}
.upb-cicon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* ── حالت فقط‌آیکن: فقط متن حذف می‌شود؛ آیکن و فلش می‌مانند ── */
.upb-icon-only .upb-btn {
	padding: var(--btn-pv, 10px);
	gap: 6px;
}
.upb-icon-only .upb-label {
	display: none;
}

/* ── فلش: بسته = رو‌به‌بالا، باز = رو‌به‌پایین ── */
.upb-arrow {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	transition: transform 0.25s;
}
.upb-wrapper.open .upb-arrow {
	transform: rotate(180deg);
}

/* ── منوی کشویی ──
   منو دقیقاً از پایین دکمه (top:100%) شروع می‌شود و فاصلهٔ دیداری با margin-top
   واقعی ساخته می‌شود؛ پلِ نامرئیِ ::before آن فاصله را پوشش می‌دهد تا با عبور
   موس، منو بسته نشود. */
.upb-dropdown {
	position: absolute;
	top: 100%;
	inset-inline-start: 0;
	width: var(--drop-width, 220px);
	margin-top: var(--drop-gap, 8px);
	padding: 6px;
	list-style: none;
	background: var(--drop-bg, #fff);
	border-radius: var(--drop-radius, 14px);
	box-shadow: var(--drop-shadow, 0 8px 30px rgba(0, 0, 0, 0.12));
	z-index: 99999;
	opacity: 0;
	transform: translateY(-6px);
	pointer-events: none;
	transition: opacity 0.18s ease, transform 0.18s ease;
}
.upb-dropdown::before {
	content: "";
	position: absolute;
	top: calc( -1 * var(--drop-gap, 8px) - 4px );
	inset-inline: 0;
	height: calc( var(--drop-gap, 8px) + 6px );
}
.upb-wrapper.open .upb-dropdown {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

/* ── آیتم‌های منو ── */
.upb-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 9px 12px;
	border-radius: var(--item-radius, 8px);
	color: var(--item-color, #121212);
	text-decoration: none;
	font-size: var(--font-size, 14px);
	transition: background 0.15s, color 0.15s;
}
.upb-item:hover,
.upb-item:focus-visible {
	background: var(--item-hover-bg, #e8f7f1);
	color: var(--item-hover-color, #009d66);
	outline: none;
}
/* آیکن آیتم‌های منو اندازهٔ ثابت دارد (مستقل از اندازهٔ آیکن دکمه) */
.upb-item .upb-bicon svg {
	width: 16px;
	height: 16px;
}

/* ── دکمهٔ خروج ── */
.upb-logout {
	color: var(--logout-color, #e53e3e) !important;
}
.upb-logout:hover,
.upb-logout:focus-visible {
	background: var(--logout-hover-bg, #fff5f5) !important;
	color: var(--logout-color, #e53e3e) !important;
}

/* ── خط جداکننده ── */
.upb-divider {
	height: 1px;
	margin: 6px;
	background: var(--divider-color, #eee);
}

/* ── موبایل ── */
@media (max-width: 600px) {
	.upb-dropdown {
		inset-inline-start: 50%;
		transform: translateX(-50%) translateY(-6px);
		width: 92vw;
		max-width: 320px;
	}
	.upb-wrapper.open .upb-dropdown {
		transform: translateX(-50%) translateY(0);
	}
}