/**
 * دکمه‌ی ورود / حساب کاربری.
 *
 * پیش‌فرض‌ها عمداً کم‌رنگ‌اند: این دکمه در هدر می‌نشیند و رنگ و
 * اندازه‌اش از پنل المنتور می‌آید، نه از اینجا. اینجا فقط چیزی است
 * که بدونش دکمه *خراب* است، نه بی‌ریخت.
 */

.nb-accbtn-wrap {
	display: flex;
}

.nb-accbtn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	/* حداقل اندازه‌ی لمس روی گوشی */
	min-height: var(--nb-touch, 44px);
	padding: 8px 14px;
	border-radius: var(--nb-radius-sm, 10px);
	color: inherit;
	text-decoration: none;
	line-height: 1;
	transition: background .15s ease, border-color .15s ease, color .15s ease;
}

/* قالب زیر لینک‌ها خط می‌کشد و text-decoration از والد به فرزند
   می‌رسد و از داخل پاک نمی‌شود — باید روی خودِ <a> بنشیند. */
.nb-accbtn,
.nb-accbtn:hover,
.nb-accbtn:focus {
	text-decoration: none;
}

/* فقط آیکن: مربع، نه مستطیلِ کشیده */
.nb-accbtn--icon {
	padding: 0;
	width: var(--nb-touch, 44px);
	justify-content: center;
}


/* ---------- نشان (آیکن یا آواتار) ---------- */

.nb-accbtn__mark {
	--nb-accbtn-size: 24px;

	position: relative;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--nb-accbtn-size);
	height: var(--nb-accbtn-size);
}

.nb-accbtn__icon,
.nb-accbtn__icon svg,
.nb-accbtn__icon i {
	width: 100%;
	height: 100%;
	display: block;
	font-size: var(--nb-accbtn-size);
	line-height: 1;
}

.nb-accbtn__avatar {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}


/* ---------- نشانه‌ی ورود ----------
   روی گوشه‌ی نشان می‌نشیند. حاشیه‌ی هم‌رنگِ پس‌زمینه‌ی هدر ندارد چون
   رنگ هدر را نمی‌دانیم؛ به‌جایش کمی بیرون می‌نشیند تا روی تصویر گم
   نشود. */

.nb-accbtn__badge {
	--nb-accbtn-badge: var(--nb-status-completed, #22c55e);

	position: absolute;
	inset-block-end: -2px;
	inset-inline-end: -3px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--nb-accbtn-badge);
	color: #fff;
}

.nb-accbtn__badge--dot {
	width: 9px;
	height: 9px;
}

.nb-accbtn__badge--tick {
	width: 13px;
	height: 13px;
}

.nb-accbtn__badge--tick svg {
	width: 8px;
	height: 8px;
}


/* ---------- متن ---------- */

.nb-accbtn__text {
	white-space: nowrap;
}

/*
 * ترتیب: متن اول، آیکن آخر.
 *
 * در مارک‌آپ، نشانِ آیکن پیش از متن است (تا اگر متن نبود، همان‌جا
 * بماند). روی صفحه‌ی راست‌چین این یعنی آیکن سمت راست و متن سمت چپ —
 * برعکسِ چیزی که در نمونه‌ی مورد نظر است و برعکسِ دکمه‌ی سبد کنارش.
 * با order جابه‌جا می‌شوند بدون اینکه ترتیبِ خواندنِ صفحه‌خوان به‌هم
 * بخورد.
 */
.nb-accbtn--icon-end .nb-accbtn__mark {
	order: 2;
}

.nb-accbtn--icon-end .nb-accbtn__text {
	order: 1;
}

/* روی موبایل فقط آیکن — هم‌رفتار با دکمه‌ی سبد کنارش. از کنترل ویجت
   قابل تغییر است؛ این فقط پیش‌فرض است. */
@media ( max-width: 767px ) {

	.nb-accbtn--hide-text-mobile {
		padding: 0;
		width: var( --nb-touch, 44px );
		justify-content: center;
		gap: 0;
	}

	.nb-accbtn--hide-text-mobile .nb-accbtn__text {
		display: none;
	}
}


/* ==========================================================================
   منوی کشویی زیرِ دکمه‌ی حساب کاربری
   ==========================================================================
   با نگه‌داشتنِ نشانگر باز می‌شود و با فوکوسِ کیبورد هم — :focus-within
   یعنی تبِ کیبورد هم منو را نگه می‌دارد، بدون یک خطِ جاوااسکریپت.
   ========================================================================== */

.nb-accbtn-wrap.has-menu {
	position: relative;
}

.nb-accbtn__menu {
	position: absolute;
	z-index: 1200;
	top: calc( 100% + 10px );
	inset-inline-end: 0;

	min-width: 210px;
	padding: 6px;

	border: 1px solid var( --nb-border, #242c42 );
	border-radius: var( --nb-radius, 14px );
	background: var( --nb-surface, #131829 );
	box-shadow: 0 16px 40px -12px rgba( 0, 0, 0, 0.75 );

	/*
	 * پنهان با opacity و نه display: none — گذار لازم است، و
	 * visibility جلوی کلیک‌شدنِ لینک‌های نامرئی را می‌گیرد.
	 */
	opacity: 0;
	visibility: hidden;
	transform: translateY( -6px );
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

/*
 * پلِ نامرئی بینِ دکمه و منو.
 *
 * ۱۰ پیکسل فاصله هست و بدون این، نشانگر وسطِ راه از هر دو خارج می‌شد و
 * منو زیرِ دستِ کاربر بسته می‌شد.
 */
.nb-accbtn__menu::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: -12px;
	height: 12px;
}

.nb-accbtn-wrap.has-menu:hover .nb-accbtn__menu,
.nb-accbtn-wrap.has-menu:focus-within .nb-accbtn__menu {
	opacity: 1;
	visibility: visible;
	transform: translateY( 0 );
}

.nb-accbtn__mi {
	display: flex;
	align-items: center;
	gap: 10px;

	padding: 9px 11px;
	border-radius: var( --nb-radius-sm, 10px );

	color: var( --nb-text-muted, #98a2b3 );
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;

	transition: background 0.15s ease, color 0.15s ease;
}

.nb-accbtn__mi:hover,
.nb-accbtn__mi:focus-visible {
	background: var( --nb-surface-alt, #1a2033 );
	color: var( --nb-text, #ededed );
}

.nb-accbtn__mi-icon {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	opacity: 0.9;
}

.nb-accbtn__mi-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* خروج جدا می‌ایستد و رنگِ هشدار می‌گیرد. */
.nb-accbtn__mi--out {
	margin-top: 4px;
	padding-top: 11px;
	border-top: 1px solid var( --nb-border, #242c42 );
	border-radius: 0 0 var( --nb-radius-sm, 10px ) var( --nb-radius-sm, 10px );
}

.nb-accbtn__mi--out:hover,
.nb-accbtn__mi--out:focus-visible {
	background: rgba( 239, 68, 68, 0.12 );
	color: #fca5a5;
}

/*
 * روی دستگاهِ لمسی hover وجود ندارد و اولین ضربه فقط منو را باز
 * می‌کرد. آنجا منو اصلاً نمی‌آید — هدرِ موبایل کشوی خودش را دارد.
 */
@media ( hover: none ), ( max-width: 991px ) {

	.nb-accbtn__menu {
		display: none;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.nb-accbtn__menu {
		transition: none;
	}
}