.dml-hidden { display: none !important; }

.dml-hp-wrap { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

.dml-modal-overlay {
	position: fixed; inset: 0;
	background: rgba(20, 20, 30, .5);
	background: color-mix(in srgb, var(--dml-m-overlay, #14141e) var(--dml-m-overlay-op, 50%), transparent);
	-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
	display: flex; align-items: center; justify-content: center; z-index: 99999;
	animation: dml-fade-in .15s ease;
}
@keyframes dml-fade-in { from { opacity: 0; } to { opacity: 1; } }

.dml-modal-box {
	background: var(--dml-m-bg, #fff); width: var(--dml-m-width, 380px); max-width: 92vw;
	border-radius: var(--dml-m-radius, 20px); overflow: hidden;
	box-shadow: 0 24px 64px rgba(15, 15, 25, .22), 0 2px 6px rgba(15, 15, 25, .06);
	direction: rtl; text-align: right; color: var(--dml-m-text, #5a5a64); line-height: 1.7;
	/* TODO: vendor Vazirmatn WOFF2 into assets/fonts/ and @font-face it here — see +FONT rule. Currently relies on Vazirmatn being available site-wide (e.g. via a base theme) or falls back to system fonts. */
	font-family: 'Vazirmatn', 'IRANSansX', Tahoma, Arial, sans-serif;
	box-sizing: border-box;
	animation: dml-pop-in .18s cubic-bezier(.2, .9, .3, 1);
}
.dml-modal-box * { box-sizing: border-box; }
@keyframes dml-pop-in { from { opacity: 0; transform: scale(.96) translateY(6px); } to { opacity: 1; transform: none; } }

/* ── کنترل‌های داخلِ پنجره ────────────────────────────────────────────────────────────
   ⚠ از اینجا تا پایانِ بخشِ پنجره، هر کنترل زیرِ #dml-modal انتخاب می‌شود، نه با کلاسِ تنها.
   دلیل: پنجره در فوترِ صفحه‌ی قالبِ خریدار چاپ می‌شود و قاعده‌ی دکمه/فیلدِ قالب یا کیتِ
   صفحه‌ساز (مثلاً `.kit button` با وزنِ 0-1-1، یا `input:not(...)` با وزنِ بیشتر) کلاسِ
   تنها (0-1-0) را می‌بُرد و دکمه‌ی بستن و «ارسال کد تایید» با ظاهرِ قالب رندر می‌شدند.
   شناسه وزن را به 1-1-0 می‌رساند. هر حالتِ تغییردهنده (loading، waiting، disabled، active)
   هم باید همین پیشوند را بگیرد وگرنه به پایه‌ی خودش می‌بازد. مقادیر از متغیرهای
   --dml-m-* می‌آیند (تبِ «ظاهر پنجره ورود» ← Frontend::modal_css). */
#dml-modal .dml-modal-header {
	display: flex; justify-content: space-between; align-items: center; gap: 12px;
	padding: 18px 20px; border-bottom: 1px solid color-mix(in srgb, var(--dml-m-title, #23233a) 8%, transparent);
}
#dml-modal .dml-title {
	margin: 0; padding: 0; font-size: 16px; line-height: 1.6; font-weight: 700;
	color: var(--dml-m-title, #23233a); letter-spacing: 0; text-transform: none;
}
#dml-modal .dml-close {
	appearance: none; flex: none; margin: 0; padding: 0; min-width: 0; min-height: 0;
	width: 34px; height: 34px; border: 0; border-radius: var(--dml-m-close-radius, 50%);
	background: var(--dml-m-close-bg, #f2f3f7); color: var(--dml-m-close-color, #5a5a64);
	box-shadow: none; cursor: pointer; line-height: 1;
	display: flex; align-items: center; justify-content: center;
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
#dml-modal .dml-close-icon { width: 16px; height: 16px; flex: none; display: block; }
#dml-modal .dml-close:focus-visible { outline: 2px solid var(--dml-primary); outline-offset: 2px; }
#dml-modal .dml-close:active { transform: scale(.94); }
/* ⚠ هاور فقط جایی معنا دارد که دستگاه واقعاً اشاره‌گر داشته باشد؛ صفحه‌ی لمسی رویدادِ
   hover ندارد ولی خیلی مرورگرهای موبایل روی تپ یک هاورِ «چسبنده» شبیه‌سازی می‌کنند که
   تا تپِ بعدی می‌ماند. همان شرطی که JS با matchMedia('(hover:hover)') می‌سنجد، اینجا. */
@media (hover: hover) and (pointer: fine) {
	#dml-modal .dml-close:hover {
		background: color-mix(in srgb, var(--dml-m-close-color, #5a5a64) 14%, var(--dml-m-close-bg, #f2f3f7));
		color: var(--dml-m-title, #23233a);
	}
}
#dml-modal .dml-modal-body { padding: 20px; }

#dml-modal .dml-tabs { display: flex; gap: 4px; margin: 0 0 18px; background: color-mix(in srgb, var(--dml-m-title, #23233a) 6%, transparent); padding: 4px; border-radius: 12px; }
#dml-modal .dml-mtab {
	appearance: none; flex: 1; margin: 0; padding: 9px 8px; min-height: 0; border: 0; border-radius: 9px;
	background: transparent; box-shadow: none; cursor: pointer;
	font: inherit; font-size: 13px; font-weight: 500; line-height: 1.6; color: var(--dml-m-text, #5a5a64);
	transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
#dml-modal .dml-mtab:focus-visible { outline: 2px solid var(--dml-primary); outline-offset: 1px; }
#dml-modal .dml-mtab.dml-mtab-active { background: var(--dml-m-bg, #fff); color: var(--dml-primary); font-weight: 700; box-shadow: 0 2px 8px rgba(20, 20, 30, .08); }

#dml-modal .dml-field-label { display: block; font-size: 12.5px; line-height: 1.7; font-weight: 500; color: var(--dml-m-text, #5a5a64); margin: 0 0 7px; padding: 0; }
#dml-modal .dml-input {
	appearance: none; display: block; width: 100%; max-width: none; box-sizing: border-box; height: 48px; min-height: 0;
	border: 1.5px solid var(--dml-m-field-border, #e2e4ee); border-radius: var(--dml-m-field-radius, 12px);
	padding: 0 14px; margin: 0 0 14px; font: inherit; font-size: 14px; line-height: 1.6;
	background: var(--dml-m-field-bg, #fafbfd); color: var(--dml-m-title, #23233a); box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#dml-modal .dml-input::placeholder { color: color-mix(in srgb, var(--dml-m-text, #5a5a64) 55%, transparent); opacity: 1; }
#dml-modal .dml-input:focus { border-color: var(--dml-primary); outline: none; background: var(--dml-m-bg, #fff); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dml-primary) 12%, transparent); }

#dml-modal .dml-boxes { display: flex; gap: 8px; justify-content: center; margin: 8px 0 16px; width: 100%; }
#dml-modal .dml-box {
	appearance: none; flex: 1 1 0; min-width: 0; width: auto; max-width: 50px; height: 52px; min-height: 0; text-align: center;
	border: 1.5px solid var(--dml-m-field-border, #e2e4ee); border-radius: var(--dml-m-field-radius, 12px);
	font: inherit; font-size: 18px; font-weight: 700; line-height: 1;
	box-sizing: border-box; padding: 0; margin: 0; background: var(--dml-m-field-bg, #fafbfd); color: var(--dml-m-title, #23233a); box-shadow: none;
	transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
#dml-modal .dml-box:focus { border-color: var(--dml-primary); outline: none; background: var(--dml-m-bg, #fff); box-shadow: 0 0 0 4px color-mix(in srgb, var(--dml-primary) 12%, transparent); }

#dml-modal .dml-error { color: #c62828; font-size: 12px; line-height: 1.7; min-height: 16px; margin: 0 0 8px; }

/* «راه دیگر» زیر پیامِ شکستِ ارسالِ کد (از 1.34.0) */
#dml-modal .dml-send-fallback { margin: 0 0 12px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
#dml-modal .dml-send-fallback__help { margin: 0; font-size: 12.5px; line-height: 1.8; color: #3a3a44; }

/* دکمه‌ی اصلی. رنگ: «رنگ اختصاصی دکمه» اگر روشن باشد، وگرنه رنگ سازمانی. */
#dml-modal .dml-btn {
	appearance: none; display: block; width: 100%; max-width: none; margin: 0; padding: 0 16px;
	height: var(--dml-m-btn-height, 48px); min-height: 0;
	border: 0; border-radius: var(--dml-m-btn-radius, 12px);
	background: var(--dml-m-btn-bg, var(--dml-primary)); color: var(--dml-m-btn-color, #fff);
	font: inherit; font-size: 15px; font-weight: 700; line-height: 1; letter-spacing: 0; text-transform: none; text-decoration: none;
	cursor: pointer; position: relative; opacity: 1;
	transition: filter .15s ease, transform .1s ease, box-shadow .15s ease;
	box-shadow: 0 6px 16px color-mix(in srgb, var(--dml-m-btn-bg, var(--dml-primary)) 28%, transparent);
}
/* قالب‌ها معمولاً برای :hover و :focus رنگِ جدا می‌دهند؛ بدونِ این، دکمه زیرِ اشاره‌گر
   به رنگِ قالب برمی‌گشت در حالی که حالتِ عادی‌اش درست بود. */
#dml-modal .dml-btn:hover,
#dml-modal .dml-btn:focus {
	background: var(--dml-m-btn-bg, var(--dml-primary)); color: var(--dml-m-btn-color, #fff);
	border: 0; text-decoration: none;
}
#dml-modal .dml-btn:focus-visible { outline: 2px solid var(--dml-m-btn-bg, var(--dml-primary)); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
	#dml-modal .dml-btn:hover { filter: brightness(1.07); box-shadow: 0 8px 20px color-mix(in srgb, var(--dml-m-btn-bg, var(--dml-primary)) 36%, transparent); }
}
#dml-modal .dml-btn:active { transform: translateY(1px); }
#dml-modal .dml-btn:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; filter: none; }
/* «not ready yet» — still pressable so the press can SAY what is missing (dm-login-core.js refreshSend). */
#dml-modal .dml-btn.dml-btn-waiting { opacity: .6; box-shadow: none; filter: none; }
#dml-modal .dml-loader {
	display: none; width: 17px; height: 17px; border: 2px solid color-mix(in srgb, var(--dml-m-btn-color, #fff) 45%, transparent);
	border-top-color: var(--dml-m-btn-color, #fff); border-radius: 50%; animation: dml-spin .7s linear infinite;
	position: absolute; top: 50%; inset-inline-start: 16px; margin-top: -8.5px;
}
#dml-modal .dml-btn.dml-loading .dml-btn-text { visibility: hidden; }
#dml-modal .dml-btn.dml-loading .dml-loader { display: inline-block; }
@keyframes dml-spin { to { transform: rotate(360deg); } }

#dml-modal .dml-otp-note { font-size: 13px; text-align: center; margin: 0 0 14px; color: var(--dml-m-text, #5a5a64); line-height: 1.7; }
#dml-modal .dml-otp-row { display: flex; justify-content: space-between; margin-bottom: 14px; }
/* .dml-link is now also used on <button type="button"> (step-otp.php/step-password.php, per SEO-SEMANTICS: click-only controls must be <button> not <a href="#">) — reset native button chrome so it still reads as a text link. */
/* ⚠ اندازه‌گیری‌شده روی ۳۷۵ پیکسل: بدونِ این، هر سه کنترلِ متنی (ویرایش شماره،
   ارسال مجدد، «فعلاً نه») ارتفاعِ ۱۷ پیکسل داشتند — زیرِ کفِ ۲۴×۲۴ هدفِ لمسی.
   حاشیهٔ منفی، فاصلهٔ بصریِ قبلی را دست‌نخورده نگه می‌دارد. */
#dml-modal .dml-link { appearance: none; background: none; border: 0; border-radius: 6px; box-shadow: none; width: auto; padding: 4px 6px; margin: -4px -6px; font: inherit; font-size: 12.5px; line-height: 1.6; color: var(--dml-primary); text-decoration: none; cursor: pointer; font-weight: 500; display: inline-flex; align-items: center; min-height: 24px; }
#dml-modal .dml-link:hover,
#dml-modal .dml-link:focus { background: none; color: var(--dml-primary); }
#dml-modal .dml-link:focus-visible { outline: 2px solid var(--dml-primary); outline-offset: 1px; }
@media (hover: hover) and (pointer: fine) {
	#dml-modal .dml-link:hover { text-decoration: underline; }
}
/* ⚠ اندازه‌گیری‌شده: #9a9aa3 روی سفید نسبتِ ۲٫۷۹ می‌دهد و رد می‌شود. «فعلاً نه»
   تنها راهِ خروجِ کسی است که کد ندارد، پس کنترلِ کم‌کنتراست اینجا هزینهٔ واقعی دارد. */
#dml-modal .dml-link.dml-link-muted,
#dml-modal .dml-link.dml-link-muted:hover,
#dml-modal .dml-link.dml-link-muted:focus { color: #6c6c78; }
#dml-modal .dml-link.dml-disabled { pointer-events: none; color: #c6c6cd; }
/* دکمه‌ی «بعداً انجام می‌دهم» زیرِ دکمه‌ی اصلیِ گامِ رمز: تنها .dml-link که فرزندِ مستقیمِ فرم است. */
#dml-modal form > .dml-link { display: flex; margin: 10px auto 0; }
#dml-modal .dml-footer-text { font-size: 12px; color: #6c6c78; text-align: center; margin: 14px 0 0; line-height: 1.7; }
#dml-modal .dml-footer-text .dml-footer-link { color: var(--dml-primary); }

/* ویجتِ المنتورِ «متن / لینک ورود» (Shortcodes::render_widget). عمداً هیچ رنگ و فونتی ندارد:
   ظاهر از قالب یا از کنترل‌های خودِ ویجت می‌آید. فقط چیدمانِ آیکن کنارِ متن اینجاست. */
.dml-login-inline {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px; box-sizing: border-box; max-width: 100%;
	transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.dml-login-inline .dml-login-text { min-width: 0; }
.dml-login-inline .dml-account-icon { width: 20px; height: 20px; flex: none; stroke-width: 1.6; transition: color .15s ease; }
.dml-login-inline .dml-account-icon-img { object-fit: contain; }
/* آیکنِ کتابخانهٔ المنتور: یا <i> فونتی است (اندازه = font-size) یا <svg> (اندازه = عرض/ارتفاع،
   رنگ = fill). هر دو از همین پوشش‌دهنده ارث می‌برند تا یک کنترلِ رنگ و اندازه کافی باشد. */
.dml-login-inline .dml-login-icon { display: inline-flex; flex: none; font-size: 20px; line-height: 1; transition: color .15s ease; }
.dml-login-inline .dml-login-icon svg { width: 1em; height: 1em; fill: currentColor; }

/* ── جای آیکن: راست یا چپِ متن (دکمهٔ ورود و ویجتِ «متن / لینک ورود») ──
   «راست/چپ» فیزیکی است، نه «اول/آخرِ خط»: مدیر همان چیزی را انتخاب می‌کند که روی صفحه
   می‌بیند و با عوض‌شدنِ جهتِ قالب معنایش برنمی‌گردد. آیکن در مارکاپ همیشه اول است (یعنی
   راست در راست‌به‌چپ، چپ در چپ‌به‌راست)؛ هرجا انتخاب با آن نخواند، order آیکن را بعد از متن
   می‌برد. فلشِ منوی کشویی order بزرگ‌تر دارد تا همیشه آخر بماند. */
/* :first-child، نه کلاسِ آیکن: کدِ SVG دلخواهِ مدیر ممکن است هیچ کلاسی از ما نداشته باشد.
   کلاسِ dml-icon-* فقط وقتی چاپ می‌شود که آیکنی هست و اولین فرزند است. */
.dml-icon-left:dir(rtl) > :first-child,
.dml-icon-right:dir(ltr) > :first-child { order: 2; }
.dml-cta > .dml-dd-caret { order: 3; }

.dml-trigger-btn { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font: inherit; }
.dml-account { display: inline-flex; align-items: center; gap: 8px; }
.dml-account-link { text-decoration: none; }
.dml-account-icon { width: 24px; height: 24px; }

/* نامِ دسترس‌پذیرِ دکمه در حالتِ «فقط آیکن»: از دید پنهان، برای صفحه‌خوان موجود.
   ⚠ display:none نه — آن، متن را از درختِ دسترس‌پذیری هم حذف می‌کند. */
.dml-btn-wrap .screen-reader-text {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.dml-btn-wrap { display: block; }
.dml-align-right { text-align: right; }
.dml-align-center { text-align: center; }
.dml-align-left { text-align: left; }
/* ⚠ دکمه همیشه داخلِ .dml-btn-wrap چاپ می‌شود (LoginButton::render) و همین‌جا با هر دو کلاس
   انتخاب می‌شود: قاعده‌ی دکمه‌ی قالب/کیتِ صفحه‌ساز (`.kit button`، وزنِ 0-1-1) کلاسِ تنها را
   می‌بُرد و دکمه با رنگ و پدینگِ قالب رندر می‌شد. حالت‌های :hover و :focus هم صریحاً به همان
   ظاهرِ پایه برگردانده می‌شوند، چون قالب برای آن‌ها رنگِ جدا می‌دهد (وزنِ 0-2-1) و دکمه
   بعد از کلیک یا روی هاورِ «چسبنده»ی صفحه‌ی لمسی به رنگِ قالب می‌رفت. */
.dml-btn-wrap .dml-cta,
.dml-btn-wrap .dml-cta:hover,
.dml-btn-wrap .dml-cta:focus {
	appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	width: auto; min-width: 0; min-height: 0; margin: 0;
	cursor: pointer; text-decoration: none; box-sizing: border-box; box-shadow: none;
	background: var(--dml-btn-bg, transparent); color: var(--dml-btn-color, #23233a);
	border: var(--dml-btn-bw, 1px) solid var(--dml-btn-border, transparent);
	border-radius: var(--dml-btn-radius, 12px);
	padding: var(--dml-btn-pad, 8px) calc(var(--dml-btn-pad, 8px) + 8px);
	font-size: var(--dml-btn-size, 14px); font-family: inherit; line-height: 1.6; font-weight: 600;
	letter-spacing: 0; text-transform: none;
	transition: background .15s ease, color .15s ease, border-color .15s ease, transform .1s ease;
}
/* :focus-visible جدا از :hover: صفحه‌کلید هاور ندارد ولی باید همان نشانه‌ی بصری را ببیند. */
.dml-btn-wrap .dml-cta:focus-visible {
	background: var(--dml-btn-hover, var(--dml-btn-bg, transparent));
	color: var(--dml-btn-hover-color, var(--dml-btn-color, #23233a));
	border-color: var(--dml-btn-border-hover, var(--dml-btn-border, transparent));
	outline: 2px solid var(--dml-btn-hover-color, currentColor); outline-offset: 2px;
}
@media (hover: hover) and (pointer: fine) {
	.dml-btn-wrap .dml-cta:hover {
		background: var(--dml-btn-hover, var(--dml-btn-bg, transparent));
		color: var(--dml-btn-hover-color, var(--dml-btn-color, #23233a));
		border-color: var(--dml-btn-border-hover, var(--dml-btn-border, transparent));
	}
}
.dml-btn-wrap .dml-cta:active { transform: translateY(1px); }
.dml-cta .dml-account-icon { width: var(--dml-btn-icon, 22px); height: var(--dml-btn-icon, 22px); flex: none; }
/* آیکن‌های خطی: ضخامتِ خط باید با اندازه بالا برود وگرنه در ۳۲ پیکسل محو می‌شود.
   آیکن‌های توپر stroke ندارند و این هیچ اثری رویشان نمی‌گذارد. */
.dml-cta .dml-account-icon { stroke-width: 1.6; }
.dml-account-icon-img { object-fit: contain; }

/* جعبه‌ی مربعیِ «فقط آیکن»: عرض و ارتفاع هر دو از یک متغیر، پس همیشه مربعِ دقیق است
   و پدینگ داخلی آن را نامتوازن نمی‌کند (box-sizing:border-box بالاتر ست شده). */
.dml-btn-wrap .dml-cta.dml-cta-icon-only,
.dml-btn-wrap .dml-cta.dml-cta-icon-only:hover,
.dml-btn-wrap .dml-cta.dml-cta-icon-only:focus {
	width: var(--dml-btn-box, 44px); height: var(--dml-btn-box, 44px);
	padding: var(--dml-btn-pad, 8px); gap: 0;
}
.dml-align-full .dml-cta:not(.dml-cta-icon-only),
.dml-align-full .dml-cta:not(.dml-cta-icon-only):hover,
.dml-align-full .dml-cta:not(.dml-cta-icon-only):focus { width: 100%; justify-content: center; }

/* حالتِ کشویی دکمه (کاربر واردشده) — همان دکمه، با منوی حساب کاربری زیرِ آن.
   خصوصیت‌های منطقی چون هدرِ سایت هم RTL است هم ممکن است LTR باشد. */
.dml-account-dd { position: relative; display: inline-block; }
.dml-account-dd .dml-dd-caret { transition: transform .18s ease; flex: none; }
.dml-account-dd.is-open .dml-dd-caret { transform: rotate(180deg); }
.dml-dd-menu {
	position: absolute; top: calc(100% + 6px); z-index: 1000;
	min-width: 210px; max-width: calc(100vw - 24px); margin: 0; padding: 0; list-style: none;
	background: #fff; border-radius: 12px; box-shadow: 0 8px 28px rgba(16, 16, 36, .16);
	opacity: 0; visibility: hidden; transform: translateY(8px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	text-align: start;
}
/* موقعیتِ منو انتخابِ مدیر است و فیزیکی می‌ماند، نه منطقی: مدیر «راست/وسط/چپ» را روی
   هدرِ واقعیِ خودش می‌بیند و انتخاب می‌کند؛ خصوصیتِ منطقی با تغییرِ جهتِ قالب زیرِ پایش
   جابه‌جا می‌شد و انتخابش معنای دیگری پیدا می‌کرد. */
.dml-dd-pos-right .dml-dd-menu { right: 0; left: auto; }
.dml-dd-pos-left .dml-dd-menu { left: 0; right: auto; }
.dml-dd-pos-center .dml-dd-menu { left: 50%; right: auto; transform: translate(-50%, 8px); }
.dml-account-dd.is-open .dml-dd-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dml-dd-pos-center.is-open .dml-dd-menu { transform: translate(-50%, 0); }
/* گذرگاهِ ماوس بین دکمه و منو: بدون این نوار ۶ پیکسلی، در حالتِ هاور منو درست وسطِ
   حرکتِ اشاره‌گر بسته می‌شود. */
.dml-account-dd::after { content: ""; position: absolute; inset-inline: 0; top: 100%; height: 8px; display: none; }
.dml-account-dd.is-open::after { display: block; }
/* دکمه‌ی بستنِ گوشه: فقط روی شیتِ موبایل نمایان می‌شود (تعریفِ نمایش در بلوکِ موبایلِ
   پایین‌ترِ همین فایل)؛ اینجا فقط <li> پوششش صفر می‌شود که فاصله‌ی معمولِ ردیف‌ها را
   نگیرد و خودِ دکمه هم به‌طورِ پیش‌فرض پنهان است. */
.dml-dd-close-row { padding: 0; margin: 0; border: 0; }
.dml-dd-close {
	display: none; position: absolute; top: 10px; inset-inline-end: 10px; z-index: 1;
	background: #f5f5f8; border: none; width: 30px; height: 30px; border-radius: 50%;
	font-size: 18px; line-height: 1; cursor: pointer; color: #7a7a85;
	align-items: center; justify-content: center;
}
/* ⚠ فاصله‌ها روی <ul>/<li> نمی‌نشینند، روی عنصرِ داخلی و شبه‌عنصر می‌نشینند (1.36.1): قالبِ
   میزبان می‌تواند `header ul, header li { margin:0!important; padding:0!important }` داشته باشد
   (0-1-1 + important) که هر قاعدهٔ ما روی li را حتی با important می‌بَرد و ردیفِ «سلام» به لبهٔ
   کادر می‌چسبید. شبه‌عنصرِ ul و span داخلِ li از آن قاعده در امان‌اند. */
.dml-dd-menu::before,
.dml-dd-menu::after { content: ""; display: block; height: 8px; }
.dml-dd-user-inner { display: block; padding: 8px 18px 10px; margin-bottom: 6px; border-bottom: 1px solid #ececf1; font-size: 13px; color: #6c6c78; }
.dml-dd-user-inner strong { color: #2c2c38; }
.dml-dd-item {
	display: flex; align-items: center; gap: 10px; padding: 10px 18px; min-height: 24px; line-height: 1.6;
	font-size: 14px; color: #2c2c38; text-decoration: none;
}
.dml-dd-item-icon { display: inline-flex; flex: none; opacity: .55; }
.dml-dd-item-text { min-width: 0; }
.dml-dd-item:focus { background: #f4f4f8; color: #2c2c38; text-decoration: none; }
.dml-dd-item.is-active { color: var(--dml-primary); font-weight: 700; }
.dml-dd-item.is-active .dml-dd-item-icon { opacity: 1; }
.dml-dd-sep-line { display: block; height: 1px; margin: 6px 0; background: #ececf1; }
.dml-dd-logout { color: #b02a30; }
.dml-dd-logout .dml-dd-item-icon { opacity: .8; }
.dml-dd-logout:focus { color: #b02a30; background: #fdf1f1; }
/* آیکنِ خروج جهت‌دار است (فلشِ بیرون‌رفتن)؛ در RTL باید آینه شود وگرنه به‌جایِ «بیرون
   رفتن» به‌نظر «داخل‌شدن» می‌رسد. */
.dml-dd-menu:dir(rtl) .dml-dd-logout .dml-dd-item-icon { transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) {
	.dml-dd-item:hover { background: #f4f4f8; color: #2c2c38; text-decoration: none; }
	.dml-dd-item:hover .dml-dd-item-icon { opacity: .85; }
	.dml-dd-logout:hover { color: #b02a30; background: #fdf1f1; }
}
/* ظاهرِ هر ردیف از تبِ «منوی حساب کاربری» (Core\AccountMenu::style، @since 1.35.0).
   مقدارها متغیرهای CSS روی خودِ <a> هستند؛ هر متغیری که نیامده به ظاهرِ پیش‌فرضِ منو
   برمی‌گردد. همین قواعد عیناً در dm-login-menu-admin.css برای پیش‌نمایش تکرار شده‌اند. */
/* 1.40.1: قالبِ سایت (مثلاً #id a:hover، ۱-۱-۱) رنگِ هاورِ ردیف را می‌پوشاند. #dml-dd-boost در هیچ صفحه‌ای نیست؛ داخلِ :is فقط وزنِ یک شناسه می‌دهد (۱-۳-۰ و بالاتر) بی !important. */
.dml-dd-menu:is(.dml-dd-menu, #dml-dd-boost) .dml-dd-item.dml-mi-styled {
	background: var(--dml-mi-bg, transparent); color: var(--dml-mi-color, #2c2c38);
	/* حاشیه و سایه از 1.37.0؛ بی‌مقدار = بی‌حاشیه/بی‌سایه */
	border: var(--dml-mi-bdw, 0) var(--dml-mi-bds, solid) var(--dml-mi-bdc, transparent);
	box-shadow: var(--dml-mi-sh, none);
	transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.dml-dd-item.dml-mi-styled .dml-dd-item-icon { color: var(--dml-mi-icon, currentColor); }
.dml-dd-item.dml-mi-icon-solid .dml-dd-item-icon { opacity: 1; }
.dml-dd-item.dml-mi-bold { font-weight: 700; }
/* @since 1.40.0 — وزنِ متن: ردیف (--dml-mi-fw) ← همهٔ ردیف‌ها (--dml-dd-fw روی <ul>) ← وزنِ پیش‌فرضِ همین منو. */
.dml-dd-menu .dml-dd-item:not(.dml-mi-bold) { font-weight: var(--dml-mi-fw, var(--dml-dd-fw, 500)); }
.dml-dd-menu .dml-dd-item .dml-dd-item-text { font-weight: inherit; color: inherit; }
.dml-dd-item.dml-mi-has-bg { margin: 2px 8px; padding-inline: 10px; border-radius: 10px; }
.dml-dd-menu:is(.dml-dd-menu, #dml-dd-boost) .dml-dd-item.dml-mi-styled:focus { background: var(--dml-mi-hbg, var(--dml-mi-bg, #f4f4f8)); color: var(--dml-mi-hcolor, var(--dml-mi-color, #2c2c38)); border-color: var(--dml-mi-hbdc, var(--dml-mi-bdc, transparent)); box-shadow: var(--dml-mi-hsh, var(--dml-mi-sh, none)); }
.dml-dd-item.dml-mi-styled:focus .dml-dd-item-icon { color: var(--dml-mi-hicon, var(--dml-mi-icon, currentColor)); }
.dml-mi-icon-svg { width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) {
	.dml-dd-menu:is(.dml-dd-menu, #dml-dd-boost) .dml-dd-item.dml-mi-styled:hover { background: var(--dml-mi-hbg, var(--dml-mi-bg, #f4f4f8)); color: var(--dml-mi-hcolor, var(--dml-mi-color, #2c2c38)); border-color: var(--dml-mi-hbdc, var(--dml-mi-bdc, transparent)); box-shadow: var(--dml-mi-hsh, var(--dml-mi-sh, none)); }
	.dml-dd-item.dml-mi-styled:hover .dml-dd-item-icon { color: var(--dml-mi-hicon, var(--dml-mi-icon, currentColor)); }
}

/* گامِ «کد معرف» — عیناً از ماکاپِ تاییدشده: prd/dm-login-referral/ */
#dml-modal .dml-input.dml-ref-input { text-transform: uppercase; letter-spacing: .14em; text-align: center; font-weight: 700; margin-bottom: 8px; }
.dml-ref-hint { font-size: 12px; color: #6c6c78; text-align: center; margin: 0 0 14px; line-height: 1.7; }
.dml-ref-skip-row { display: flex; justify-content: center; margin-top: 10px; }
.dml-ref-state { display: flex; gap: 10px; align-items: flex-start; border-radius: 12px; padding: 12px 14px; font-size: 12.5px; line-height: 1.8; margin-bottom: 14px; }
.dml-ref-state-ok { background: #eafaf1; color: #0f7a4d; }
.dml-ref-state-warn { background: #fff6e5; color: #8a5a00; }
.dml-ref-state-icon { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px; }
.dml-ref-state-body { min-width: 0; }
.dml-ref-state-title { display: block; font-weight: 700; margin-bottom: 2px; }
.dml-ref-lock { display: inline-flex; align-items: center; gap: 5px; background: #fff; border: 1px solid currentColor; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 700; margin-top: 6px; }
.dml-ref-code-chip { display: inline-block; background: #fff; border: 1px dashed currentColor; border-radius: 8px; padding: 2px 10px; font-weight: 700; letter-spacing: .12em; margin-inline-start: 4px; }
.dml-ref-out { display: block; text-align: center; font-size: 12.5px; margin-top: 10px; color: var(--dml-primary); font-weight: 600; text-decoration: none; padding: 6px; min-height: 24px; }

/* ── موبایل: مودالِ ورود (کاربرِ واردنشده) عمداً همیشه وسطِ صفحه می‌ماند ──────────────
   ⚠ USER-DECIDED 2026-09-05: پیش از این هر دو — هم این مودال، هم منویِ کشویی/شیتِ حسابِ
   کاربریِ زیر — زیرِ عرضِ ۱۲۰۰ به شیتِ ته‌صفحه تبدیل می‌شدند. مودالِ شماره/کدِ تایید طبق
   نظرِ کاربر همیشه باید وسط‌صفحه بماند، پس این‌جا دیگر هیچ override‌ی زیرِ ۱۲۰۰ روی
   .dml-modal-overlay/.dml-modal-box اعمال نمی‌شود — همان چیدمانِ پایه (flex center،
   عرضِ 92vw سقف‌دار) در همه‌ی اندازه‌ها می‌ماند. تبدیل‌به‌شیت فقط مالِ منوی حسابِ کاربریِ
   کاربرِ واردشده است (بخشِ بعدی همین فایل، `.dml-dd-menu`) و data-dml-sheet روی خودِ
   #dml-modal دیگر خوانده نمی‌شود؛ اگر لازم شد این مودال هم دوباره شیت شود، این تصمیم و
   دلیلش را عوض کن، پاک نکن. */
@media (max-width: 1200px) {
	.dml-modal-box { max-height: 88vh; overflow-y: auto; }
}

@media (max-width: 1200px) {
	/* دراپ‌داونِ کوچکِ دسکتاپ اینجا معنا ندارد: انگشت دقیق‌تر از اشاره‌گر نیست و منویی
	   که به دکمه چسبیده ممکن است از لبه‌ی صفحه بزند بیرون. همان شیتِ مودال، همان جهت.
	   ⚠ سلکتورها دیگر زیرِ .dml-account-dd نیستند، مستقیماً روی خودِ .dml-dd-menu: دکمه
	   ممکن است هرجای صفحه باشد — مثلاً نوارِ پایینیِ موبایلِ قالب که خودش backdrop-filter
	   دارد — و چنین والدی position:fixed را از کلِ viewport می‌گیرد، نه فقط CSS محدودش
	   می‌کند (تلهٔ containing-block). به همین دلیل dm-login-account.js موقعِ باز شدن
	   خودِ <ul> را زیرِ body می‌برد؛ این‌جا دیگر فرض نمی‌شود که هنوز داخلِ دکمه است. */
	/* ⚠ باگِ واقعیِ گزارش‌شده: نمایان‌بودنِ .dml-dd-menu در حالتِ دسکتاپ با ترکیب‌کنندهٔ
	   نیایی `.dml-account-dd.is-open .dml-dd-menu` تنظیم می‌شود (چند ده خط بالاتر) —
	   ولی dm-login-account.js موقعِ باز شدن خودِ <ul> را زیرِ body می‌برد (mountMobile)،
	   پس دیگر فرزندِ .dml-account-dd نیست و آن سلکتور هرگز نمی‌گیرد: opacity:0 و
	   visibility:hidden پایه برایش تا ابد می‌ماند، حتی با کلاسِ is-open روی خودِ <ul> و
	   حتی با transform:translateY(0) همین‌جا — نتیجه، پس‌زمینه‌ی تیره‌ی دیده‌شده ولی
	   منویی که هیچ‌وقت روی صفحه ظاهر نمی‌شود. این‌جا باید مستقیماً روی خودِ عنصر ست شود. */
	/* ⚠ 1.39.0: شیت و پرده‌اش بالای «نوارِ پایینِ موبایل» تمام می‌شوند، نه لبهٔ صفحه: قبلاً با z-index ۱۰۰۰۰۰ روی نوار
	   می‌نشستند و نوار پوشیده و بی‌لمس می‌شد. ارتفاعِ نوار را افزونهٔ نوار (DM Mega Menu) در --dmhnd-m-dock-h روی <html>
	   منتشر می‌کند؛ بدونِ آن افزونه ۰ است و رفتار مثلِ قبل (+INDEPENDENCE: فقط یک متغیرِ CSS با پیش‌فرض، نه وابستگی). */
	.dml-dd-menu.js-dml-dd-menu {
		position: fixed; left: 0; right: 0; top: auto; bottom: var(--dmhnd-m-dock-h, 0px); z-index: 100000;
		transition: transform .3s cubic-bezier(.22, .8, .3, 1);
		box-shadow: 0 -10px 30px rgba(0, 0, 0, .12);
		width: 100%; max-width: 100%; margin: 0; border-radius: 0;
		border-start-start-radius: 20px; border-start-end-radius: 20px;
		opacity: 1; visibility: visible;
		transform: translateY(calc(100% + var(--dmhnd-m-dock-h, 0px))); padding-bottom: env(safe-area-inset-bottom, 0);
		padding-top: 10px; max-height: calc(85vh - var(--dmhnd-m-dock-h, 0px)); overflow-y: auto; overscroll-behavior: contain; /* +۸ از فاصله‌انداز ::before = ۱۸ مثلِ قبل */
	}
	.dml-dd-menu.js-dml-dd-menu.is-open { transform: translateY(0); }
	/* روی شیتِ موبایل، کلیکِ بیرون معنایی ندارد چون شیت تقریباً کلِ صفحه را می‌گیرد؛
	   دکمه‌ی گوشه‌ی ضربدر تنها راهِ بستن با انگشت است. */
	.dml-dd-menu.js-dml-dd-menu .dml-dd-close { display: flex; }
	/* جداکننده‌ی ریزِ بینِ ردیف‌ها، فقط روی شیتِ موبایل: روی دسکتاپ دراپ‌داونِ کوچک است و
	   فاصله‌ی خودِ padding کافی‌ست؛ روی شیتِ تمام‌عرض که ردیف‌ها به هم چسبیده‌تر دیده
	   می‌شوند این خط ریز، منوها را از هم جدا می‌کند. روی آخرین آیتم و ردیفِ «بستن» زده
	   نمی‌شود، و جداکننده‌ی ضخیم‌ترِ قبلِ «خروج» (dml-dd-sep) خودش سرِ جایش می‌ماند. */
	.dml-dd-menu.js-dml-dd-menu .dml-dd-item { border-bottom: 1px solid #f1f1f4; }
	.dml-dd-menu.js-dml-dd-menu li:last-child .dml-dd-item,
	.dml-dd-menu.js-dml-dd-menu li:has(+ .dml-dd-sep) .dml-dd-item { border-bottom: 0; }

	/* «کنار» یعنی لبه‌ی پایانیِ خواندنِ متن — چپِ بصری در RTL، راست در LTR — نه یک سمتِ
	   ثابت؛ :dir() این را بدونِ نیاز به دانستنِ جهتِ واقعیِ سایت در PHP حل می‌کند. */
	.dml-dd-menu.js-dml-dd-menu[data-dml-sheet="side"]:dir(rtl) {
		left: 0; right: auto; top: 0; bottom: var(--dmhnd-m-dock-h, 0px);
		width: min(86vw, 360px); max-height: none;
		border-radius: 0; border-end-end-radius: 20px; border-start-end-radius: 20px;
		transform: translateX(-100%);
	}
	.dml-dd-menu.js-dml-dd-menu[data-dml-sheet="side"]:dir(rtl).is-open { transform: translateX(0); }
	.dml-dd-menu.js-dml-dd-menu[data-dml-sheet="side"]:dir(ltr) {
		left: auto; right: 0; top: 0; bottom: var(--dmhnd-m-dock-h, 0px);
		width: min(86vw, 360px); max-height: none;
		border-radius: 0; border-start-start-radius: 20px; border-end-start-radius: 20px;
		transform: translateX(100%);
	}
	.dml-dd-menu.js-dml-dd-menu[data-dml-sheet="side"]:dir(ltr).is-open { transform: translateX(0); }

	/* پسِ‌زمینه‌ی تیره‌ی پشتِ شیت. ⚠ دیگر ::before روی کانتینر نیست: کانتینر همان‌جایی
	   می‌ماند که دکمه هست (همان نوارِ کوچکِ محدودشده) و اگر بک‌دراپ رویش می‌ماند، خودِ
	   بک‌دراپ هم گرفتارِ همان تلهٔ containing-block می‌شد. یک المانِ واقعی است که JS به
	   body اضافه/حذف می‌کند، درست کنارِ خودِ منو. */
	.dml-dd-backdrop {
		position: fixed; inset: 0; bottom: var(--dmhnd-m-dock-h, 0px); background: rgba(15, 23, 42, .45); z-index: 99999;
		animation: dml-fade .2s ease;
	}
	/* بالای نوارِ مدیریتِ وردپرس هم شیتِ کناری زیرِ آن شروع شود */
	.admin-bar .dml-dd-menu.js-dml-dd-menu[data-dml-sheet="side"] { top: var(--wp-admin--admin-bar--height, 46px); }
}
@keyframes dml-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.dml-dd-menu.js-dml-dd-menu, .dml-dd-backdrop { transition: none; animation: none; }
}