/*
 * باکس ورود.
 *
 * ─────────────────────────────────────────────────────────────────────────────
 * منبع این استایل
 * ─────────────────────────────────────────────────────────────────────────────
 * ابعاد، فاصله‌ها و ترتیب المان‌ها از روی اسکرین‌شات باکس واقعی سایت اندازه‌گیری
 * شده‌اند (عرض باکس ۴۸۰px، عرض محتوا ۳۹۰px یعنی پدینگ افقی ۴۵px، ارتفاع فیلد و
 * دکمه ۴۴px، فاصلهٔ عمودی ۲۰px).
 *
 * ⚠ رنگ‌ها با چشم از همان تصویر برداشته شده‌اند، نه از مقدار دقیقِ تنظیمات — چون
 * رنگ باکس در تنظیمات رمزگذاری‌شدهٔ Digits بود و در کش قالب هم پیدا نشد (رنگ‌های
 * کش‌شده مال دموی قالب‌اند: ec406a). برای همین همه‌شان اینجا متغیرند: اگر یکی‌دو
 * درجه اختلاف دیدی، فقط همین بلوک را عوض کن، جای دیگری رنگ هاردکد نشده.
 */

#dig-ucr-container,
#digi-checkout-otp {
	--digi-primary: #e4323e;        /* دکمه‌های ورود و کد یکبارمصرف */
	--digi-primary-hover: #cf2b36;
	--digi-accent: #4dcdc4;         /* دکمهٔ ثبت نام */
	--digi-accent-hover: #3fbdb4;
	--digi-focus: #4dcdc4;          /* حاشیهٔ فیلد فعال */
	--digi-border: #e3e3e3;
	--digi-box: #fdfdfd;
	--digi-text: #4a4a4a;
	--digi-muted: #8a8a8a;
	--digi-radius: 6px;
	--digi-field-h: 44px;
}

/* ── پوشش تمام‌صفحه ──────────────────────────────────────────────────────── */

/*
 * ابعاد و انیمیشن عیناً از پاپ‌آپ جست‌وجوی قالب (`.dz-search-modal`) برداشته
 * شده تا دو پاپ‌آپِ هدر یک حس داشته باشند:
 *
 *     پوشش   opacity 0→1 در ۳۰۰ms
 *     جعبه   translateY(-20px)→0 در همان ۳۰۰ms
 *     تراز   بالای صفحه، نه وسط
 *
 * ⚠ `visibility` عمداً کنار `opacity` هست و نه به‌جای `display`. با
 * display:none هیچ transition ای اجرا نمی‌شود، ولی بدون visibility پوششِ
 * نامرئی جلوی کلیک روی صفحه را می‌گیرد. خصیصهٔ hidden هم می‌ماند تا پیش از
 * اجرای جاوااسکریپت (و اگر اصلاً اجرا نشد) باکس واقعاً از صفحه بیرون باشد؛
 * digi-login.js آن را یک فریم پیش از افزودن digi-open برمی‌دارد.
 */
.dig_lrf_box {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 12vh 20px 20px;
	background: rgba(0, 0, 0, .5);
	-webkit-backdrop-filter: blur(5px);
	backdrop-filter: blur(5px);
	direction: rtl;
	font-family: inherit;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
}

.dig_lrf_box.digi-open {
	opacity: 1;
	visibility: visible;
}

.dig_lrf_box[hidden] {
	display: none;
}

body.digi-login-open {
	overflow: hidden;
}

/* ── جعبه ────────────────────────────────────────────────────────────────── */

.dig_lrf_box .dig-modal-con {
	width: 100%;
	max-width: 480px;
	/*
	 * ۱۲vh پدینگ بالا + ۲۰px پایین. سقف قبلی ۹۲vh بود و با تراز وسط جا
	 * می‌شد، ولی حالا که جعبه از بالا فاصله دارد از کف صفحه بیرون می‌زد و
	 * پوششِ fixed هم اسکرول ندارد که کاربر بتواند پایینش را ببیند.
	 */
	max-height: calc(88vh - 40px);
	overflow-y: auto;
	background: var(--digi-box);
	border-radius: 8px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
	transform: translateY(-20px);
	transition: transform .3s ease;
}

.dig_lrf_box.digi-open .dig-modal-con {
	transform: translateY(0);
}

/* در حالت inline باکس اصلاً پاپ‌آپ نیست؛ نه محو می‌شود نه سُر می‌خورد. */
.dig_lrf_box.digi-inline {
	opacity: 1;
	visibility: visible;
	transition: none;
}

.dig_lrf_box.digi-inline .dig-modal-con {
	transform: none;
	transition: none;
}

/* پدینگ بالای زیاد عمدی است: در باکس اصلی یک ناحیهٔ لوگو بالای فرم هست که چون
   لوگویی تنظیم نشده، خالی می‌ماند. همان فاصله بازسازی شده تا قد باکس فرق نکند. */
.dig_lrf_box .dig-container {
	position: relative;
	padding: 106px 45px 65px;
}

.dig_lrf_box .dig-cont-close {
	position: absolute;
	top: 16px;
	right: 22px;
	font-size: 22px;
	line-height: 1;
	color: #b5b5b5;
	text-decoration: none;
}

.dig_lrf_box .dig-cont-close:hover {
	color: #666;
}

/* ── سرتیتر صفحات داخلی ──────────────────────────────────────────────────── */

.dig_lrf_box .dig_sml_box_msg_head {
	margin-bottom: 6px;
	font-size: 17px;
	font-weight: 700;
	color: #2b2b2b;
	text-align: center;
}

.dig_lrf_box .dig_sml_box_msg {
	margin-bottom: 20px;
	font-size: 13px;
	line-height: 1.9;
	color: var(--digi-muted);
	text-align: center;
}

.dig_lrf_box .dig_sml_box_msg:empty {
	display: none;
}

/* ── فیلدها ──────────────────────────────────────────────────────────────── */

.dig_lrf_box .minput {
	margin-bottom: 20px;
}

.dig_lrf_box .minput[hidden] {
	display: none;
}

.dig_lrf_box .minput input {
	width: 100%;
	height: var(--digi-field-h);
	padding: 0 16px;
	font-size: 14px;
	font-family: inherit;
	color: var(--digi-text);
	background: #fff;
	border: 1px solid var(--digi-border);
	border-radius: var(--digi-radius);
	box-sizing: border-box;
	text-align: right;
	transition: border-color .15s, text-align .1s;
}

/* ── چینش متن داخل فیلدها ────────────────────────────────────────────────── */

/*
 * پیش‌فرض راست‌چین است (مثل باکس اصلی سایت).
 *
 * فیلد موبایل استثناست: به‌محض کلیک — و از آن به بعد تا وقتی خالی نشده —
 * چپ‌چین و LTR می‌شود. دلیلش این است که شمارهٔ موبایل ذاتاً یک رشتهٔ LTR است
 * و اگر داخل یک فیلد RTL تایپ شود، مکان‌نما و ترتیب ارقام موقع ویرایش
 * (مثلاً پاک‌کردن یک رقم از وسط) گیج‌کننده می‌شود.
 *
 * چرا :not(:placeholder-shown) هم آمده؟ اگر فقط :focus بود، شماره به‌محض
 * کلیک بیرون از فیلد دوباره به راست می‌پرید. این شرط یعنی «تا وقتی چیزی
 * داخلش هست، چپ بماند».
 */
.dig_lrf_box .dig-mobmail:focus,
.dig_lrf_box .dig-mobmail:not(:placeholder-shown) {
	text-align: left;
	direction: ltr;
}

.dig_lrf_box .minput input::placeholder {
	color: var(--digi-muted);
	opacity: 1;
}

.dig_lrf_box .minput input:focus {
	outline: none;
	border-color: var(--digi-focus);
}

/*
 * فیلد کد تایید — به‌جای یک کادرِ بلند، به تعداد ارقام خط تیره.
 *
 * ────────────────────────────────────────────────────────────────────────────
 * چرا یک اینپوت و نه چند خانهٔ جدا
 * ────────────────────────────────────────────────────────────────────────────
 * الگوی رایجِ «هر رقم یک مربع» تکمیل خودکار کد پیامکی را می‌شکند: اندروید و
 * iOS فقط وقتی کد را از پیامک برمی‌دارند که یک فیلدِ واحد با
 * autocomplete="one-time-code" ببینند. با چند خانه، کاربر باید کد را دستی
 * تایپ کند — یعنی دقیقاً همان اصطکاکی که این تغییر می‌خواست کم کند.
 *
 * پس یک اینپوت می‌ماند و خط تیره‌ها پس‌زمینه‌اند:
 *
 *     عرضِ هر خانه = 1ch + letter-spacing = --digi-otp-slot
 *     عرضِ فیلد    = --digi-otp-slot × --digi-otp-len
 *
 * text-indent نصفِ فاصله را جلو می‌اندازد تا هر رقم وسطِ خط تیرهٔ خودش بیفتد.
 *
 * فونت عمداً monospace است: با فونت فارسی سایت عرض ارقام یکی نیست و 1ch
 * میانگینی می‌شود که هیچ رقمی دقیقاً رویش نمی‌نشیند.
 *
 * --digi-otp-len را خودِ PHP روی همان المان می‌گذارد (Digi_Login_Otp::LENGTH)
 * تا اگر طول کد عوض شد، تعداد خط تیره‌ها هم خودکار عوض شود.
 *
 * ⚠ فهرست انتخابگرها طولانی است چون این فیلد در سه جای متفاوت می‌نشیند و هر
 * جا یک قاعدهٔ قوی‌تر رقیبش است:
 *     .dig_lrf_box .minput input           (۰،۲،۱)  باکس ورود
 *     .woocommerce form .form-row input…   (۰،۳،۲)  صفحهٔ حساب کاربری، قالب
 * تک‌کلاسِ .digi-otp-input هر دو را می‌باخت.
 */
.digi-otp-input,
.dig_lrf_box .minput input.digi-otp-input,
.woocommerce form .form-row input.digi-otp-input,
.woocommerce-page form .form-row input.digi-otp-input {
	--digi-otp-slot: 38px;

	display: block;
	box-sizing: content-box;
	width: calc(var(--digi-otp-slot) * var(--digi-otp-len, 5));
	height: auto;
	min-height: 0;
	margin: 6px auto 4px;
	padding: 2px 0 10px;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background-color: transparent;
	background-image: linear-gradient(
		to right,
		transparent 0 14%,
		var(--digi-border, #e3e3e3) 14% 86%,
		transparent 86% 100%
	);
	background-repeat: repeat-x;
	background-position: 0 100%;
	background-size: var(--digi-otp-slot) 2px;
	font-family: 'Courier New', ui-monospace, monospace;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: calc(var(--digi-otp-slot) - 1ch);
	text-indent: calc((var(--digi-otp-slot) - 1ch) / 2);
	text-align: left;
	direction: ltr;
	color: var(--digi-text, #4a4a4a);
	caret-color: var(--digi-focus, #4dcdc4);
	transition: background-image .15s;
}

.digi-otp-input:focus,
.dig_lrf_box .minput input.digi-otp-input:focus,
.woocommerce form .form-row input.digi-otp-input:focus,
.woocommerce-page form .form-row input.digi-otp-input:focus {
	outline: 0;
	border: 0;
	box-shadow: none;
	background-image: linear-gradient(
		to right,
		transparent 0 14%,
		var(--digi-focus, #4dcdc4) 14% 86%,
		transparent 86% 100%
	);
}

/* اگر جایی placeholder مانده باشد، روی خط تیره‌ها نیفتد. */
.digi-otp-input::placeholder {
	color: transparent;
}

.digi-otp-caption {
	margin-bottom: 2px;
	font-size: 13px;
	text-align: center;
	color: var(--digi-muted, #8a8a8a);
}

/* ── دکمه‌ها ─────────────────────────────────────────────────────────────── */

.dig_lrf_box .button {
	display: block;
	width: 100%;
	height: var(--digi-field-h);
	margin: 0 0 20px;
	padding: 0;
	font-size: 15px;
	font-weight: 700;
	font-family: inherit;
	color: #fff;
	border: 0;
	border-radius: var(--digi-radius);
	cursor: pointer;
	transition: background-color .15s, opacity .15s;
}

.dig_lrf_box .button[hidden] {
	display: none;
}

.dig_lrf_box .digi-btn-primary {
	background: var(--digi-primary);
}

.dig_lrf_box .digi-btn-primary:hover:not(:disabled) {
	background: var(--digi-primary-hover);
}

.dig_lrf_box .digi-btn-accent {
	background: var(--digi-accent);
}

.dig_lrf_box .digi-btn-accent:hover:not(:disabled) {
	background: var(--digi-accent-hover);
}

/*
 * دکمهٔ «ارسال مجدد» — ثانویه است و نباید با دکمهٔ اصلی رقابت کند، ولی باید
 * همیشه خوانا بماند.
 *
 * نسخهٔ قبل دو مشکل داشت:
 *   ۱) روی هاور کاملاً محو می‌شد. رنگ متن اینجا ست شده بود ولی حالت hover نه،
 *      پس قاعدهٔ عمومیِ `.button:hover` قالب (که رنگ را سفید می‌کند) برنده
 *      می‌شد و متنِ سفید روی پس‌زمینهٔ شفاف نامرئی می‌شد.
 *   ۲) در حالت غیرفعال، `opacity: .5` روی متنی که از قبل خاکستری بود، آن را
 *      تقریباً ناخوانا می‌کرد — و این دکمه بیشترِ عمرش در همان حالت است
 *      (شمارش معکوس ۹۰ ثانیه‌ای).
 *
 * حالا هر سه حالت رنگِ صریح دارند و به‌جای شفافیت، از رنگِ کم‌رنگ‌ترِ مشخص
 * استفاده می‌شود.
 */
.dig_lrf_box .digi-btn-ghost {
	color: #5a5a5a;
	background: #f5f5f5;
	border: 1px solid #e6e6e6;
	font-weight: 600;
}

.dig_lrf_box .digi-btn-ghost:hover:not(:disabled),
.dig_lrf_box .digi-btn-ghost:focus:not(:disabled) {
	color: #2b2b2b;
	background: #ececec;
	border-color: #dcdcdc;
}

/*
 * `.button` عمداً در انتخابگر آمده: قاعدهٔ عمومیِ `.button:disabled` پایین‌تر
 * از این بلوک است و با اولویتِ برابر، بعدی برنده می‌شد و opacity: .5 را
 * برمی‌گرداند. یک کلاس بیشتر، مسئله را مستقل از ترتیب حل می‌کند.
 */
.dig_lrf_box .button.digi-btn-ghost:disabled {
	opacity: 1;
	color: #9a9a9a;
	background: #fafafa;
	border-color: #eee;
}

.dig_lrf_box .button:disabled {
	opacity: .5;
	cursor: default;
}

/* ── لینک فراموشی رمز و «حساب ندارید؟» ───────────────────────────────────── */

.dig_lrf_box .forgotpasswordaContainer {
	margin: -6px 0 20px;
	text-align: center;
}

.dig_lrf_box .forgotpassworda {
	font-size: 13px;
	color: var(--digi-muted);
	text-decoration: none;
}

.dig_lrf_box .forgotpassworda:hover {
	color: var(--digi-text);
}

/* در تصویر این متن راست‌چین است، نه وسط‌چین. */
.dig_lrf_box .signdesc {
	margin: 44px 0 14px;
	font-size: 14px;
	color: var(--digi-text);
	text-align: right;
}

.dig_lrf_box .backtoLoginContainer {
	margin-top: 4px;
	text-align: center;
}

.dig_lrf_box .backtoLogin {
	font-size: 13px;
	color: var(--digi-muted);
	text-decoration: none;
	cursor: pointer;
}

.dig_lrf_box .backtoLogin:hover {
	color: var(--digi-text);
}

/* ── پیام‌ها ─────────────────────────────────────────────────────────────── */

.dig_lrf_box .dig_lase_message {
	font-size: 13px;
	line-height: 1.8;
	text-align: center;
}

.dig_lrf_box .dig_lase_message:empty {
	display: none;
}

.dig_lrf_box .dig_lase_message.digi-error {
	color: #c0392b;
}

.dig_lrf_box .dig_lase_message.digi-ok {
	color: #1e7e34;
}

.dig_lrf_box.digi-busy {
	cursor: progress;
}

/* ── صفحات ───────────────────────────────────────────────────────────────── */

.dig_lrf_box [data-step][hidden] {
	display: none;
}

/* ── تسویه‌حساب ──────────────────────────────────────────────────────────── */

/*
 * پاپ‌آپ کد در تسویه‌حساب همان پوستهٔ باکس ورود را دارد (`.dig_lrf_box`) و
 * فقط چند تفاوت کوچک:
 *   • باریک‌تر است، چون فقط یک فیلد و دو دکمه دارد.
 *   • پدینگ بالای بزرگِ باکس ورود (که جای لوگوی خالی بود) را لازم ندارد.
 */
#digi-checkout-otp .dig-modal-con {
	max-width: 400px;
}

#digi-checkout-otp .dig-container {
	padding-top: 42px;
}

#digi-checkout-otp .dig_sml_box_msg_head {
	margin-bottom: 4px;
}

/*
 * دکمهٔ «نمایش رمز» ووکامرس.
 *
 * ووکامرس با جاوااسکریپت یک <button class="show-password-input"> خالی کنار هر
 * فیلد رمز می‌چسباند و آیکن چشمش را از فونتِ خودش می‌گیرد. آن فونت روی این
 * سایت لود نمی‌شود، پس چیزی که می‌ماند یک دکمهٔ بی‌متن است — همان مربع کوچکِ
 * زیر فیلد رمز در تسویه‌حساب. چون قالب `.password-input` را position:relative
 * نکرده، حتی سر جای خودش هم نمی‌نشیند و می‌افتد زیر فیلد.
 *
 * فقط در تسویه‌حساب برداشته می‌شود؛ جای دیگری که آیکنش درست بیاید، بماند.
 */
.woocommerce-checkout .password-input .show-password-input {
	display: none;
}

.woocommerce-checkout .password-input {
	display: block;
}

/* ── موبایل ──────────────────────────────────────────────────────────────── */

/*
 * نسخهٔ اول اینجا یک «شیتِ پایین‌چسب» بود: باکس به کف صفحه می‌چسبید، تا لبهٔ
 * چپ و راست کشیده می‌شد و فقط گوشه‌های بالایش گرد بود. الگوی رایجی در
 * اپلیکیشن‌هاست ولی با بقیهٔ سایت جور نبود و کاربر هم همین را گفت.
 *
 * حالا وسط‌چین است با فاصله از کناره‌ها — یعنی همان رفتار دسکتاپ، فقط با
 * پدینگ کمتر. `align-items` و `padding` عمداً دوباره اعلام شده‌اند تا اگر
 * روزی مقدار پایه عوض شد، این بلوک هنوز خودکفا باشد.
 */
@media (max-width: 520px) {
	.dig_lrf_box {
		padding: 16px;
		align-items: center;
	}

	.dig_lrf_box .dig-modal-con {
		max-width: none;
		max-height: 90vh;
		border-radius: 12px;
	}

	.dig_lrf_box .dig-container {
		padding: 64px 22px 32px;
	}
}

/* ── حالت inline: باکس داخل جریان صفحه ──────────────────────────────────── */

/*
 * همان باکس، ولی به‌جای پوششِ تمام‌صفحه داخل جریان صفحه می‌نشیند. هیچ چیز
 * دیگری عوض نمی‌شود تا ظاهر فرم با پاپ‌آپ یکی بماند و کاربر دو تجربهٔ متفاوت
 * از یک کار نبیند. سایه و پس‌زمینه برداشته می‌شوند چون کارت بیرونیِ قالب
 * خودش آن‌ها را دارد.
 */
.dig_lrf_box.digi-inline .dig-modal-con {
	max-height: none;
	margin: 0 auto;
	box-shadow: none;
	background: transparent;
}

/* ── صفحهٔ «حساب کاربری» ووکامرس ─────────────────────────────────────────── */

/*
 * قالب اصلی دو ستون داشت (ورود کنار ثبت‌نام). ما یک ستون داریم چون ثبت‌نام
 * داخل خودِ باکس است، پس باید وسط بیفتد. گرید قالب بوت‌استرپی و float-محور
 * است، برای همین هم float برداشته می‌شود و هم margin خودکار.
 */
.digi-account-login .digi-account-row {
	display: flex;
	justify-content: center;
}

.digi-account-login-col {
	float: none;
	margin-inline: auto;
	max-width: 460px;
}

/* پدینگ بالای ۱۲۰px خودِ .login-user کافی است؛ فاصلهٔ لوگوی باکس اضافه است. */
.digi-account-login .dig_lrf_box.digi-inline .dig-container {
	padding-top: 0;
	padding-bottom: 0;
}

/*
 * دایرهٔ بالای کارت.
 *
 * قالب اینجا یک دایرهٔ قرمز با تصویر کلاه فارغ‌التحصیلی می‌گذارد
 * (.login-user::before با background-color قرمز و user-login.png). لوگوی خود
 * سایت هم قرمز و هم گرد است، پس فقط تصویر جایگزین می‌شود و رنگ پس‌زمینه
 * شفاف می‌شود تا لبه‌های لوگو بیرون نزند.
 */
.digi-account-login .login-user::before {
	background-image: url("https://digi-zaban.ir/wp-content/uploads/2026/09/digizaban-large-icon.webp");
	background-color: transparent;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/*
 * فیلدها و دکمه‌ها در این صفحه بزرگ‌تر از پاپ‌آپ‌اند.
 *
 * در پاپ‌آپ فضا محدود است و ۴۴px درست بود، ولی اینجا کارت پهن و خلوت است و
 * همان اندازه ریز و بی‌جان به نظر می‌رسید. متغیر ارتفاع فیلد فقط در همین
 * زمینه بازنویسی می‌شود تا پاپ‌آپ دست‌نخورده بماند.
 */
.digi-account-login .dig_lrf_box {
	--digi-field-h: 54px;
}

.digi-account-login .dig_lrf_box .minput {
	margin-bottom: 16px;
}

.digi-account-login .dig_lrf_box .minput input {
	font-size: 15px;
	border-radius: 8px;
}

.digi-account-login .dig_lrf_box .button {
	font-size: 16px;
	border-radius: 8px;
	margin-bottom: 16px;
}

.digi-account-login .dig_lrf_box .dig_sml_box_msg_head {
	font-size: 19px;
}

.digi-account-login .dig_lrf_box .signdesc {
	margin-top: 36px;
	font-size: 15px;
}

.digi-account-login .dig_lrf_box .forgotpassworda,
.digi-account-login .dig_lrf_box .backtoLogin {
	font-size: 14px;
}

/*
 * سلکتور عمداً با شناسه نوشته شده و !important دارد.
 *
 * در «CSS اضافی» سفارشی‌ساز سایت این قاعده از زمان دیجیتس مانده است:
 *
 *     #dig-ucr-container {
 *         background-color: rgba(0, 0, 0, 0.5) !important;
 *         backdrop-filter: blur(8px) !important;
 *     }
 *
 * برای پاپ‌آپ درست است و همان پس‌زمینهٔ تیرهٔ بلورشده را می‌سازد که باید.
 * ولی در صفحهٔ «حساب کاربری» که باکس داخل جریان صفحه می‌نشیند، یک بلوک
 * خاکستریِ تیره وسط کارت سفید درست می‌کرد.
 *
 * چون آن قاعده هم شناسه دارد و هم !important، تنها راه غلبه بر آن سلکتوری
 * با شناسهٔ برابر و یک کلاس بیشتر است. این تنها جای افزونه است که !important
 * دارد و دلیلش همین است.
 */
#dig-ucr-container.digi-inline {
	position: static !important;
	inset: auto;
	display: block !important;
	padding: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
}

/* ── تغییر شماره در «جزئیات حساب» ────────────────────────────────────────── */

.digi-account-phone {
	margin-top: 26px;
	padding-top: 18px;
	border-top: 1px solid #ececec;
}

.digi-account-phone legend {
	font-size: 15px;
	font-weight: 700;
}

.digi-account-phone input[dir="ltr"] {
	text-align: left;
	direction: ltr;
}

.digi-account-phone .button + .button {
	margin-right: 8px;
}

.digi-account-code-row[hidden],
.digi-account-confirm[hidden] {
	display: none;
}

.digi-account-msg:empty {
	display: none;
}

.digi-account-hint {
	color: #8a8a8a;
}

/* ── دکمهٔ ورود در هدر (کاربر خارج‌شده) ─────────────────────────────────── */

/*
 * ────────────────────────────────────────────────────────────────────────────
 * هدف: دقیقاً هم‌شکل دکمه‌های سبد خرید و جست‌وجو
 * ────────────────────────────────────────────────────────────────────────────
 * مقادیر زیر با اندازه‌گیری مستقیم از همان دکمه‌ها روی سایت زنده درآمده‌اند،
 * نه از روی حدس:
 *
 *              دسکتاپ (≥۹۹۲)      موبایل (<۹۹۲)
 *     اندازه    ۴۶×۴۶              ۳۸×۳۸
 *     پس‌زمینه  #f7f7f7            #f7f7f7
 *     گردی      4px                6px
 *     رنگ       #464749            #464749
 *     آیکون     ۲۲px               ۲۲px
 *
 * قالب برای `a.register-modal-opener` رنگ #ebebeb و گردی 5px می‌گذارد، که
 * کنار همسایه‌ها تیره‌تر و ناهماهنگ دیده می‌شد.
 *
 * ────────────────────────────────────────────────────────────────────────────
 * چرا !important — با اینکه در بقیهٔ افزونه از آن پرهیز شده
 * ────────────────────────────────────────────────────────────────────────────
 * انتخابگرِ بدونِ !important و با اولویتِ بالاتر امتحان شد و روی سایت زنده
 * برنده نشد؛ قالب و CSS سفارشی سایت روی این دکمه چند لایه قاعده دارند که از
 * بیرون قابل مدل‌کردن نبود. چون این چند اعلان فقط یک دکمهٔ مشخص را هدف
 * می‌گیرند و هدفشان هم «هم‌شکل شدن با همسایه‌ها»ست، !important اینجا انتخابِ
 * درست است نه میان‌بر.
 *
 * آیکون: `<i>`‌ی که قالب می‌گذارد `fa-user-lock` است (آدمک با قفل) و با
 * آیکون‌های ساده و یکدستِ کنارش جور نبود. کنار می‌رود و جایش همان آیکونِ
 * «کاربر»ی می‌نشیند که خودت در CSS سفارشی برای دیجیتس تعریف کرده بودی.
 *
 * متن: در قابِ مربعی جا نمی‌شود و در طرح اصلی هم پنهان بود.
 *
 * ⚠ سایزِ ۴۶×۴۶ عمداً روی خودِ `a.login-button` است، نه روی `.header-button-link`
 * (ظرفِ بیرونی‌اش). آن ظرف بینِ دو حالت مشترک است: برای کاربرِ خارج‌شده همین
 * دکمه را نگه می‌دارد، ولی برای کاربرِ واردشده همان‌جایی است که قالب
 * آواتار+اسم+فلش (`.user-menu`) را می‌گذارد. نسخهٔ اول این قاعده را روی
 * `.header-button-link` گذاشته بود و چون آن ظرف در صفحهٔ «حساب کاربری» تنها
 * جایی است که این فایلِ CSS برای کاربرِ واردشده هم لود می‌شود (نگاه کن به
 * `Digi_Login_Form::assets()`)، دقیقاً همان‌جا آواتار+اسم را به یک مربعِ
 * ۴۶×۴۶ فشار می‌داد و اسم بیرون می‌زد. با انتقالِ سایز به خودِ دکمه، ظرف
 * دست‌نخورده می‌ماند و فقط دکمهٔ کاربرِ خارج‌شده اندازه می‌گیرد.
 */

.site-header .header-button-link a.login-button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #f7f7f7 !important;
	color: #464749 !important;
	border: 0 !important;
	box-shadow: none !important;
	border-radius: 4px !important;
}

@media (min-width: 992px) {
	.site-header .header-button-link a.login-button {
		width: 46px !important;
		height: 46px !important;
	}
}

.site-header .header-button-link a.login-button:hover {
	background: #eee !important;
	color: #464749 !important;
}

/* گردیِ همسایه‌ها در موبایل ۶ پیکسل است، نه ۴. */
@media (max-width: 991.98px) {
	.site-header .header-button-link a.login-button {
		border-radius: 6px !important;
	}
}

.header-button-link .login-button .login-btn-txt {
	display: none !important;
}

.header-button-link .login-button i {
	display: none !important;
}

.header-button-link .login-button::before {
	content: "" !important;
	display: inline-block !important;
	flex: 0 0 auto;
	width: 22px !important;
	height: 22px !important;
	background-color: currentColor !important;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") !important;
	-webkit-mask-size: contain !important;
	mask-size: contain !important;
	-webkit-mask-repeat: no-repeat !important;
	mask-repeat: no-repeat !important;
	-webkit-mask-position: center !important;
	mask-position: center !important;
}