/* DM CTA Popup — استایل فرانت. همه‌چیز زیر ریشه‌ی .dm-ctap-root اسکوپ شده تا هیچ
   قاعده‌ای به قالب سایت نشت نکند (+CSS-SCOPE). هیچ انتخابگر برهنه‌ی body/html/* اینجا
   نیست؛ تنها قاعده‌ای که به بدنه‌ی صفحه دست می‌زند، قفل اسکرول پایین است که با یک
   کلاس اختصاصی مشروط شده و فقط تا وقتی یک مودال تمام‌صفحه باز است اثر دارد. */

/* وقتی پاپ‌آپی واقعاً جلوی صفحه را گرفته، اسکرول‌کردن صفحه‌ی پشتش فقط سردرگمی
   می‌سازد. این کلاس را جاوااسکریپت هنگام باز شدن می‌گذارد و هنگام بستن — و فقط
   وقتی هیچ مودال باز دیگری نمانده باشد — برمی‌دارد. */
body.dm-ctap-scroll-locked {
	overflow: hidden;
}

/* جاوااسکریپت با اتریبیوت hidden پنهان/آشکار می‌کند و آن اتریبیوت ۰-۱-۰ است و به هر
   کلاسی که display بدهد می‌بازد؛ این یک قاعده جلوی آن باگ خاموش را می‌گیرد. */
[hidden] {
	display: none !important;
}

/* این استایل روی صفحه‌ای اجرا می‌شود که مالکش ما نیستیم و قالب میزبان ثابت‌شده
   که روی عناصر ما استایل سراسری دارد. پس جایگاه پاپ‌آپ — که اگر بشکند کل افزونه
   بی‌فایده می‌شود و به‌شکل یک بلوک عادی بعد از فوتر می‌نشیند — با important تثبیت
   می‌شود. این سومین کاربرد مجاز important در این خانه است و عمدی. */
/*
 * مقیاس کلی پاپ‌آپ.
 *
 * سرور اندازه‌های «پایه» را با پسوند -b می‌فرستد و مقدار نهایی اینجا ساخته می‌شود:
 * پایه × ضریب. پس یک عدد در تنظیمات، پدینگ و قلم و دکمه و فاصله‌ها را با هم
 * کوچک یا بزرگ می‌کند و لازم نیست ده فیلد دستی عوض شود.
 *
 * ⚠ دو نکته که اگر رعایت نشوند این ساختار می‌شکند:
 * ۱) transform: scale استفاده نشده — متن را تار می‌کند و از آن مهم‌تر یک قاب
 *    چیدمانی تازه می‌سازد که position:fixed فرزندانش را نسبت به خودش می‌کند،
 *    یعنی دقیقاً همان چیزی که کل این افزونه به آن وابسته است.
 * ۲) ضریب در یک نام جداگانه (--dm-ctap-s) می‌نشیند، نه در خودِ --dm-ctap-scale:
 *    آن یکی را سرور به‌صورت درون‌خطی می‌فرستد و مقدار درون‌خطی همیشه بر شیت
 *    برنده است، پس مدیا‌کوئری هرگز نمی‌توانست ضریب موبایل را جا بیندازد.
 */
.dm-ctap-root {
	--dm-ctap-s: var(--dm-ctap-scale, 1);

	--dm-ctap-padding: calc(var(--dm-ctap-padding-b, 26px) * var(--dm-ctap-s));
	--dm-ctap-title-size: calc(var(--dm-ctap-title-size-b, 20px) * var(--dm-ctap-s));
	--dm-ctap-text-size: calc(var(--dm-ctap-text-size-b, 14px) * var(--dm-ctap-s));
	--dm-ctap-gap: calc(var(--dm-ctap-gap-b, 12px) * var(--dm-ctap-s));
	--dm-ctap-image-width: calc(var(--dm-ctap-image-width-b, 260px) * var(--dm-ctap-s));
	--dm-ctap-video-width: var(--dm-ctap-video-width-b, 100%);

	--dm-ctap-primary-font-size: calc(var(--dm-ctap-primary-font-size-b, 15px) * var(--dm-ctap-s));
	--dm-ctap-primary-padding:
		calc(var(--dm-ctap-primary-padding-y-b, 14px) * var(--dm-ctap-s))
		calc(var(--dm-ctap-primary-padding-x-b, 26px) * var(--dm-ctap-s));
	--dm-ctap-secondary-font-size: calc(var(--dm-ctap-secondary-font-size-b, 15px) * var(--dm-ctap-s));
	--dm-ctap-secondary-padding:
		calc(var(--dm-ctap-secondary-padding-y-b, 14px) * var(--dm-ctap-s))
		calc(var(--dm-ctap-secondary-padding-x-b, 26px) * var(--dm-ctap-s));
}

.dm-ctap-root {
	position: fixed !important;
	inset-block: 0 !important;
	inset-inline: 0 !important;
	z-index: var(--dm-ctap-z, 99990) !important;
	pointer-events: none;
	display: flex;
	direction: rtl;
	font-family: inherit;
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
	width: auto !important;
	height: auto !important;
	transform: none !important;
	float: none !important;
	clear: none !important;
	visibility: visible;
}

/* بازنشانی کامل هر دکمه‌ی داخل پاپ‌آپ. قالب‌های فارسی معمولاً به همه‌ی button
   حاشیه/پس‌زمینه/ارتفاع می‌دهند و بدون این بازنشانی، دکمه‌ی بستن و دکمه‌ی صدا
   کادر و رنگ قالب را می‌گیرند (روی سایت واقعی دیده شد). */
/* ⚠ قاب گرد رسانه از این بازنشانی مستثناست. این انتخابگر وزن ۰-۱-۱ دارد و از کلاس
   تنهای هر دکمه‌ی داخلی با وزن ۰-۱-۰ سنگین‌تر است، پس `width:auto` آن بی‌صدا بر عرض
   تعیین‌شده غلبه می‌کرد و قاب مربع را به بیضی افقی تبدیل می‌کرد. بستن ریشه بهتر از
   وصله زدن به هر جایی است که این تله می‌زند. */
.dm-ctap-root button:not(.dm-ctap-bar-avatar),
.dm-ctap-root a.dm-ctap-btn {
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
	text-shadow: none;
	text-transform: none;
	letter-spacing: normal;
	min-width: 0;
	width: auto;
	outline-offset: 2px;
	font-family: inherit;
}

/* همان استثنا: این قاعده پس‌زمینه‌ی گرادیانی قاب رسانه را هم پاک می‌کرد. */
.dm-ctap-root button:not(.dm-ctap-bar-avatar) {
	border: 0;
	background: none;
}

.dm-ctap-overlay {
	position: absolute;
	inset: 0;
	background: var(--dm-ctap-overlay-color, #06061c);
	opacity: 0;
	pointer-events: auto;
	transition: opacity var(--dm-ctap-anim-ms, 420ms) ease;
}

.dm-ctap-root.is-open .dm-ctap-overlay {
	opacity: var(--dm-ctap-overlay-alpha, .55);
	backdrop-filter: blur(var(--dm-ctap-overlay-blur, 0px));
}

/* --- موقعیت روی صفحه: ۹ حالت --- */
.dm-ctap-pos-top-start { align-items: flex-start; justify-content: flex-start; }
.dm-ctap-pos-top-center { align-items: flex-start; justify-content: center; }
.dm-ctap-pos-top-end { align-items: flex-start; justify-content: flex-end; }
.dm-ctap-pos-middle-start { align-items: center; justify-content: flex-start; }
.dm-ctap-pos-center { align-items: center; justify-content: center; }
.dm-ctap-pos-middle-end { align-items: center; justify-content: flex-end; }
.dm-ctap-pos-bottom-start { align-items: flex-end; justify-content: flex-start; }
.dm-ctap-pos-bottom-center { align-items: flex-end; justify-content: center; }
.dm-ctap-pos-bottom-end { align-items: flex-end; justify-content: flex-end; }

.dm-ctap-modal {
	position: relative;
	pointer-events: auto;
	box-sizing: border-box;
	width: var(--dm-ctap-width, 460px);
	max-width: calc(100vw - 24px);
	max-height: calc(100vh - 24px);
	overflow-y: auto;
	margin-inline: var(--dm-ctap-offset-x, 24px);
	margin-block: var(--dm-ctap-offset-y, 24px);
	padding: var(--dm-ctap-padding, 26px);
	background: var(--dm-ctap-bg, #fff);
	border: 1px solid var(--dm-ctap-border-color, transparent);
	border-radius: var(--dm-ctap-radius, 22px);
	display: flex;
	flex-direction: column;
	gap: 16px;
	opacity: 0;
	transition:
		opacity var(--dm-ctap-anim-ms, 420ms) cubic-bezier(.22, 1, .36, 1),
		transform var(--dm-ctap-anim-ms, 420ms) cubic-bezier(.22, 1, .36, 1);
}

.dm-ctap-shadow-sm .dm-ctap-modal { box-shadow: 0 2px 8px rgba(6, 6, 28, .08); }
.dm-ctap-shadow-md .dm-ctap-modal { box-shadow: 0 8px 24px rgba(6, 6, 28, .12); }
.dm-ctap-shadow-lg .dm-ctap-modal { box-shadow: 0 24px 60px rgba(6, 6, 28, .22); }

/* --- انیمیشن ورود (حالت اپل: بالا آمدن نرم از لبه) --- */
.dm-ctap-anim-slide-up .dm-ctap-modal { transform: translateY(40px) scale(.98); }
.dm-ctap-anim-slide-down .dm-ctap-modal { transform: translateY(-40px) scale(.98); }
.dm-ctap-anim-slide-in .dm-ctap-modal { transform: translateX(-40px) scale(.98); }
.dm-ctap-anim-fade .dm-ctap-modal { transform: none; }
.dm-ctap-anim-zoom .dm-ctap-modal { transform: scale(.9); }

.dm-ctap-root.is-open .dm-ctap-modal {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.dm-ctap-modal,
	.dm-ctap-overlay {
		transition-duration: 1ms;
	}
	.dm-ctap-anim-slide-up .dm-ctap-modal,
	.dm-ctap-anim-slide-down .dm-ctap-modal,
	.dm-ctap-anim-slide-in .dm-ctap-modal,
	.dm-ctap-anim-zoom .dm-ctap-modal {
		transform: none;
	}
}

/* --- دکمه بستن --- */
.dm-ctap-root .dm-ctap-close {
	position: absolute;
	inset-block-start: 12px;
	inset-inline-end: 12px;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	cursor: pointer;
	padding: 0;
	border-radius: 50%;
	background: var(--dm-ctap-close-bg, #f4f5fa);
	color: var(--dm-ctap-close-color, #7a7d99);
	line-height: 0;
}

.dm-ctap-root .dm-ctap-close:focus-visible,
.dm-ctap-root .dm-ctap-btn:focus-visible,
.dm-ctap-root .dm-ctap-unmute:focus-visible {
	outline: 2px solid var(--dm-ctap-accent, #3e68ff);
	outline-offset: 2px;
}

/* --- رسانه --- */
.dm-ctap-media {
	display: flex;
	justify-content: center;
	line-height: 0;
}

/* «بالای متن» یعنی چسبیده به لبه‌ی شروع، در برابر «وسط، بالای متن» که وسط‌چین است.
   بدون این قاعده هر دو گزینه یک خروجی می‌دادند و آن انتخاب عملاً بی‌اثر بود. */
.dm-ctap-img-top .dm-ctap-media {
	justify-content: flex-start;
}

.dm-ctap-img-center .dm-ctap-media {
	justify-content: center;
}

.dm-ctap-image {
	width: var(--dm-ctap-image-width, 260px);
	max-width: 100%;
	height: auto;
	border-radius: calc(var(--dm-ctap-radius, 22px) - 8px);
}

.dm-ctap-media-video {
	position: relative;
	width: var(--dm-ctap-video-width, 100%);
	max-width: 100%;
}

.dm-ctap-video {
	width: 100%;
	/* نسبت پیش‌فرض «خودکار» یعنی ارتفاع از خود فایل می‌آید؛ نسبت ثابت آن را قفل
	   می‌کند و جای ویدئو پیش از بارگذاری هم رزرو می‌شود (بدون پرش چیدمان). */
	height: auto;
	aspect-ratio: var(--dm-ctap-video-ratio, auto);
	object-fit: contain;
	display: block;
	border-radius: calc(var(--dm-ctap-radius, 22px) - 8px);
	background: #06061c;
}

.dm-ctap-root .dm-ctap-unmute {
	position: absolute;
	inset-block-end: 12px;
	inset-inline-start: 12px;
	display: flex;
	align-items: center;
	gap: 6px;
	min-height: 28px;
	padding: 5px 12px;
	border: 0;
	cursor: pointer;
	border-radius: 999px;
	background: rgba(6, 6, 28, .7);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
}

.dm-ctap-root.is-unmuted .dm-ctap-unmute {
	display: none;
}

/* تصویر کنار متن به‌جای بالای متن */
.dm-ctap-img-inline_start .dm-ctap-modal,
.dm-ctap-img-inline_end .dm-ctap-modal {
	flex-direction: row;
	align-items: center;
}

.dm-ctap-img-inline_end .dm-ctap-modal {
	flex-direction: row-reverse;
}

.dm-ctap-img-inline_start .dm-ctap-media,
.dm-ctap-img-inline_end .dm-ctap-media {
	flex-shrink: 0;
}

/* --- متن --- */
.dm-ctap-body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

.dm-ctap-eyebrow {
	font-size: 12px;
	font-weight: 700;
	color: var(--dm-ctap-eyebrow-color, #3e68ff);
}

.dm-ctap-title {
	margin: 0;
	font-size: var(--dm-ctap-title-size, 20px);
	font-weight: 700;
	line-height: 1.6;
	color: var(--dm-ctap-title-color, #06061c);
}

.dm-ctap-desc {
	font-size: var(--dm-ctap-text-size, 14px);
	line-height: 1.9;
	color: var(--dm-ctap-text-color, #3a3d55);
}

.dm-ctap-desc p {
	margin: 0 0 8px;
}

.dm-ctap-desc p:last-child {
	margin-block-end: 0;
}

.dm-ctap-footnote {
	font-size: 12px;
	color: var(--dm-ctap-text-color, #3a3d55);
	opacity: .75;
}

/* --- دکمه‌های اکشن --- */
.dm-ctap-actions {
	display: flex;
	gap: var(--dm-ctap-gap, 12px);
	margin-block-start: 4px;
}

.dm-ctap-buttons-column .dm-ctap-actions {
	flex-direction: column;
}

.dm-ctap-root .dm-ctap-btn {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 24px;
	box-sizing: border-box;
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	font-family: inherit;
	transition: background-color .15s ease, color .15s ease;
}

.dm-ctap-root .dm-ctap-btn-full {
	flex-basis: 100%;
	width: 100%;
}

.dm-ctap-root .dm-ctap-btn-primary {
	padding: var(--dm-ctap-primary-padding, 14px 26px);
	border-radius: var(--dm-ctap-primary-radius, 999px);
	border: var(--dm-ctap-primary-border-width, 0) solid var(--dm-ctap-primary-border-color, transparent);
	background: var(--dm-ctap-primary-bg, #ef3e63);
	color: var(--dm-ctap-primary-color, #fff);
	font-size: var(--dm-ctap-primary-font-size, 15px);
	font-weight: var(--dm-ctap-primary-font-weight, 700);
}

.dm-ctap-root .dm-ctap-btn-primary:hover,
.dm-ctap-root .dm-ctap-btn-primary:focus {
	background: var(--dm-ctap-primary-bg-hover, #d32e52);
	color: var(--dm-ctap-primary-color-hover, #fff);
}

.dm-ctap-root .dm-ctap-btn-secondary {
	padding: var(--dm-ctap-secondary-padding, 14px 26px);
	border-radius: var(--dm-ctap-secondary-radius, 999px);
	border: var(--dm-ctap-secondary-border-width, 1px) solid var(--dm-ctap-secondary-border-color, transparent);
	background: var(--dm-ctap-secondary-bg, transparent);
	color: var(--dm-ctap-secondary-color, #fff);
	font-size: var(--dm-ctap-secondary-font-size, 15px);
	font-weight: var(--dm-ctap-secondary-font-weight, 700);
}

.dm-ctap-root .dm-ctap-btn-secondary:hover,
.dm-ctap-root .dm-ctap-btn-secondary:focus {
	background: var(--dm-ctap-secondary-bg-hover, transparent);
	color: var(--dm-ctap-secondary-color-hover, #fff);
}

/* شماره تماس و هر رشته‌ی لاتین داخل متن فارسی باید ایزوله شود وگرنه به‌هم می‌ریزد */
.dm-ctap-root .dm-ctap-btn {
	unicode-bidi: isolate;
}

/* ==================== قالب «نوار مشاوره» ====================
   نوار قرصی چسبیده به لبه، با آواتار روی لبه‌ی بالایی و حلقه‌های تپنده پشت آن.
   کل این بلوک زیر .dm-ctap-tpl-bar اسکوپ است و روی قالب کارت هیچ اثری ندارد. */

.dm-ctap-tpl-bar .dm-ctap-bar {
	position: relative;
	pointer-events: auto;
	box-sizing: border-box;
	width: var(--dm-ctap-width, 460px);
	max-width: calc(100vw - 24px);
	margin-inline: var(--dm-ctap-offset-x, 24px);
	margin-block: var(--dm-ctap-offset-y, 24px);
	opacity: 0;
	transition:
		opacity var(--dm-ctap-anim-ms, 420ms) cubic-bezier(.22, 1, .36, 1),
		transform var(--dm-ctap-anim-ms, 420ms) cubic-bezier(.22, 1, .36, 1);
}

.dm-ctap-tpl-bar.dm-ctap-anim-slide-up .dm-ctap-bar { transform: translateY(40px); }
.dm-ctap-tpl-bar.dm-ctap-anim-slide-down .dm-ctap-bar { transform: translateY(-40px); }
.dm-ctap-tpl-bar.dm-ctap-anim-slide-in .dm-ctap-bar { transform: translateX(-40px); }
.dm-ctap-tpl-bar.dm-ctap-anim-fade .dm-ctap-bar { transform: none; }
.dm-ctap-tpl-bar.dm-ctap-anim-zoom .dm-ctap-bar { transform: scale(.9); }

.dm-ctap-tpl-bar.is-open .dm-ctap-bar {
	opacity: 1;
	transform: none;
}

/* هاله‌ی رنگی پشت نوار — پس‌زمینه‌ی محو گرادیانی وایرفریم */
.dm-ctap-bar-glow {
	position: absolute;
	inset-block-end: 6px;
	inset-inline: 0;
	height: var(--dm-ctap-bar-height, 60px);
	border-radius: var(--dm-ctap-bar-radius, 999px);
	background: linear-gradient(90deg, var(--dm-ctap-bar-from, #ff2fa8), var(--dm-ctap-bar-to, #7a2ff6));
	opacity: var(--dm-ctap-bar-glow-alpha, .28);
	filter: blur(var(--dm-ctap-bar-glow-blur, 26px));
	pointer-events: none;
}

.dm-ctap-bar-pill {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dm-ctap-bar-gap, 12px);
	min-height: var(--dm-ctap-bar-height, 60px);
	padding-block: 7px;
	padding-inline: 8px var(--dm-ctap-bar-padding, 34px);
	border-radius: var(--dm-ctap-bar-radius, 999px);
	background: var(--dm-ctap-bar-bg, #16151c);
}

/* جابه‌جایی دو سمت نوار. عکس چون موقعیتش مطلق و نسبت به مرکز است، سر جای خود می‌ماند. */
.dm-ctap-bar-reversed .dm-ctap-bar-pill {
	flex-direction: row-reverse;
	padding-inline: var(--dm-ctap-bar-padding, 34px) 8px;
}

.dm-ctap-tpl-bar.dm-ctap-shadow-sm .dm-ctap-bar-pill { box-shadow: 0 6px 16px rgba(10, 8, 20, .3); }
.dm-ctap-tpl-bar.dm-ctap-shadow-md .dm-ctap-bar-pill { box-shadow: 0 12px 28px rgba(10, 8, 20, .45); }
.dm-ctap-tpl-bar.dm-ctap-shadow-lg .dm-ctap-bar-pill { box-shadow: 0 18px 40px rgba(10, 8, 20, .55); }

.dm-ctap-bar-actions,
.dm-ctap-bar-contact {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.dm-ctap-bar-icon {
	display: inline-flex;
	line-height: 0;
	color: var(--dm-ctap-bar-icon-color, #ff70c2);
	flex: 0 0 auto;
}

.dm-ctap-bar-icon svg {
	width: var(--dm-ctap-bar-icon-size, 19px);
	height: var(--dm-ctap-bar-icon-size, 19px);
	display: block;
}

/* دکمه‌ی اول در این قالب گرادیانی است — تنها جایی که رنگ پس‌زمینه‌ی دکمه از دو
   متغیر گرادیان می‌آید نه از رنگ تک دکمه. */
.dm-ctap-tpl-bar .dm-ctap-btn-primary {
	flex: 0 0 auto;
	background: linear-gradient(var(--dm-ctap-bar-angle, 95deg), var(--dm-ctap-bar-from, #ff2fa8), var(--dm-ctap-bar-to, #7a2ff6));
	box-shadow: 0 0 26px color-mix(in srgb, var(--dm-ctap-bar-from, #ff2fa8) 45%, transparent);
	white-space: nowrap;
}

.dm-ctap-tpl-bar .dm-ctap-btn-primary:hover,
.dm-ctap-tpl-bar .dm-ctap-btn-primary:focus {
	background: linear-gradient(var(--dm-ctap-bar-angle, 95deg), var(--dm-ctap-bar-to, #7a2ff6), var(--dm-ctap-bar-from, #ff2fa8));
}

.dm-ctap-tpl-bar .dm-ctap-btn-secondary {
	flex: 0 0 auto;
	padding: 0;
	background: none;
	border: 0;
	color: var(--dm-ctap-bar-phone-color, #fff);
	letter-spacing: .04em;
	white-space: nowrap;
}

.dm-ctap-tpl-bar .dm-ctap-btn-secondary:hover,
.dm-ctap-tpl-bar .dm-ctap-btn-secondary:focus {
	background: none;
	color: var(--dm-ctap-bar-phone-color, #fff);
	opacity: .85;
}

.dm-ctap-tpl-bar .dm-ctap-close {
	position: absolute;
	inset-block-start: -10px;
	inset-inline-start: -6px;
	/* قاعده‌ی پایه هر دو لبه را می‌دهد؛ بدون این خط المان بین دو لبه کشیده می‌شود. */
	inset-inline-end: auto;
	width: 24px;
	height: 24px;
	background: var(--dm-ctap-bar-bg, #16151c);
	color: var(--dm-ctap-bar-phone-color, #fff);
	opacity: .7;
}

.dm-ctap-tpl-bar .dm-ctap-close:hover {
	opacity: 1;
}

/* --- آواتار مشاور روی لبه‌ی بالایی نوار --- */
.dm-ctap-bar-avatar {
	position: absolute;
	inset-block-end: var(--dm-ctap-bar-avatar-offset, 6px);
	inset-inline-start: 50%;
	transform: translateX(50%);
	width: var(--dm-ctap-bar-avatar, 104px);
	height: var(--dm-ctap-bar-avatar, 104px);
	box-sizing: border-box;
	padding: var(--dm-ctap-bar-avatar-border, 3px);
	border-radius: 50%;
	background: linear-gradient(160deg, var(--dm-ctap-bar-from, #ff2fa8), var(--dm-ctap-bar-to, #7a2ff6));
	box-shadow: 0 0 0 var(--dm-ctap-bar-collar, 6px) var(--dm-ctap-bar-bg, #16151c);
	pointer-events: none;
}

.dm-ctap-bar-avatar-img,
.dm-ctap-bar-avatar-video {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

/* وقتی رسانه ویدئوست، عکس فقط جایگزین موبایل است و در دسکتاپ کنار می‌رود. */
.dm-ctap-bar-avatar-fallback { display: none; }

/* قاب گرد وقتی دکمه است.
   ⚠ ابعاد اینجا باید دوباره اعلام شوند: قاعده‌ی بازنشانی `.dm-ctap-root button`
   وزن ۰-۱-۱ دارد و از کلاس تنهای `.dm-ctap-bar-avatar` با وزن ۰-۱-۰ سنگین‌تر است،
   پس `width:auto` آن بر عرض تنظیم‌شده غلبه می‌کرد و قاب مربع به بیضی افقی تبدیل
   می‌شد — فقط در حالت ویدئو، چون تنها آنجاست که این عنصر دکمه می‌شود. */
/* ⚠ ابعاد عمداً اینجا تکرار نمی‌شوند: وزن این انتخابگر ۰-۲-۱ است و مدیا-کوئری هیچ
   وزنی اضافه نمی‌کند، پس تکرار عرض اینجا اندازه‌ی موبایل را هم قفل می‌کرد. ابعاد
   جایی می‌مانند که هر دو حالت بتوانند رویش بنویسند. */
.dm-ctap-root button.dm-ctap-bar-avatar {
	cursor: pointer;
	pointer-events: auto;
	appearance: none;
	-webkit-appearance: none;
	line-height: 0;
	flex: 0 0 auto;
}

.dm-ctap-root button.dm-ctap-bar-avatar:focus-visible {
	outline: 2px solid var(--dm-ctap-bar-ring-color, #ff2fa8);
	outline-offset: 4px;
}

.dm-ctap-bar-play {
	position: absolute;
	inset-block-end: 4%;
	inset-inline-start: 50%;
	transform: translateX(50%);
	width: 30%;
	height: 30%;
	max-width: 34px;
	max-height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--dm-ctap-bar-bg, #16151c);
	color: #fff;
	box-shadow: 0 2px 8px rgba(6, 6, 28, .4);
	pointer-events: none;
}

.dm-ctap-bar-play svg {
	width: 58%;
	height: 58%;
	margin-inline-start: 6%;
}

/* آواتار وسط نوار می‌نشیند، پس به‌جای پدینگ لبه‌ها یک شکاف تضمینی وسط لازم است
   وگرنه روی نوار باریک، متن دکمه‌ها زیر عکس می‌رود. */
.dm-ctap-bar-has-avatar .dm-ctap-bar-pill {
	gap: calc(var(--dm-ctap-bar-avatar, 104px) + 12px);
}

.dm-ctap-bar-rings {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

/* ⚠ حلقه باید از لبه‌ی بیرونی «عکس + یقه‌ی تیره‌ی دورش» شروع شود، نه از خود قطر عکس:
   عکس بعد از حلقه‌ها رندر می‌شود و یک box-shadow تویِ‌پر هم‌رنگ نوار دارد، پس هر حلقه‌ای
   که کوچک‌تر از آن باشد کاملاً زیرش رنگ می‌خورد. اوج شفافیت هم باید بعد از عبور از آن
   لبه بیفتد وگرنه پررنگ‌ترین لحظه‌ی حلقه همان لحظه‌ای است که دیده نمی‌شود. */
.dm-ctap-bar-ring {
	position: absolute;
	inset-block-end: calc(var(--dm-ctap-bar-avatar-offset, 6px) - var(--dm-ctap-bar-collar, 6px));
	inset-inline-start: 50%;
	width: calc(var(--dm-ctap-bar-avatar, 104px) + var(--dm-ctap-bar-collar, 6px) * 2);
	height: calc(var(--dm-ctap-bar-avatar, 104px) + var(--dm-ctap-bar-collar, 6px) * 2);
	/* وسط‌چینی خارج از انیمیشن هم لازم است، وگرنه با «کاهش حرکت» که انیمیشن را
	   خاموش می‌کند، حلقه از مرکز می‌پرد. */
	transform: translateX(50%);
	border-radius: 50%;
	border: var(--dm-ctap-bar-ring-width, 2px) solid var(--dm-ctap-bar-ring-color, #ff2fa8);
	animation: dm-ctap-ring var(--dm-ctap-bar-ring-speed, 2.4s) ease-out infinite;
}

.dm-ctap-bar-ring:nth-child(2) { animation-delay: calc(var(--dm-ctap-bar-ring-speed, 2.4s) / 4.8); }
.dm-ctap-bar-ring:nth-child(3) { animation-delay: calc(var(--dm-ctap-bar-ring-speed, 2.4s) / 2.4); }

/* translateX(50%) در هر فریم تکرار می‌شود چون transform یک خاصیت واحد است و
   نوشتن scale به‌تنهایی، وسط‌چینی افقی را پاک می‌کند. */
@keyframes dm-ctap-ring {
	0% { transform: translateX(50%) scale(1); opacity: 0; }
	12% { opacity: var(--dm-ctap-bar-ring-alpha, .55); }
	100% { transform: translateX(50%) scale(1.9); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.dm-ctap-bar-ring {
		animation: none;
		opacity: .35;
	}

	.dm-ctap-bar {
		transition-duration: 1ms;
	}

	.dm-ctap-tpl-bar.dm-ctap-anim-slide-up .dm-ctap-bar,
	.dm-ctap-tpl-bar.dm-ctap-anim-slide-down .dm-ctap-bar,
	.dm-ctap-tpl-bar.dm-ctap-anim-slide-in .dm-ctap-bar,
	.dm-ctap-tpl-bar.dm-ctap-anim-zoom .dm-ctap-bar {
		transform: none;
	}
}

/* ==================== مودال کشویی ویدئو (سبک اپل / استوری) ====================
   از لبه‌ی پایین بالا می‌آید، گوشه‌های بالایش گرد است و پخش‌کننده‌اش کنترل خودمان را
   دارد نه کنترل پیش‌فرض مرورگر — ظاهر پیش‌فرض در هر مرورگر فرق می‌کند و روی یک
   محصول فروختنی، ناهمگونی ظاهر همان‌قدر بد است که نبودِ امکان. */

.dm-ctap-sheet {
	position: fixed;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	pointer-events: auto;
}

.dm-ctap-sheet-start { justify-content: flex-start; }
.dm-ctap-sheet-end { justify-content: flex-end; }

.dm-ctap-sheet-start .dm-ctap-sheet { justify-content: flex-start; }
.dm-ctap-sheet-end .dm-ctap-sheet { justify-content: flex-end; }
.dm-ctap-sheet-center .dm-ctap-sheet { justify-content: center; }

.dm-ctap-sheet-backdrop {
	position: absolute;
	inset: 0;
	background: var(--dm-ctap-sheet-backdrop, rgba(6, 6, 28, .72));
	opacity: 0;
	transition: opacity .34s ease;
	backdrop-filter: blur(3px);
}

.dm-ctap-sheet-panel {
	position: relative;
	box-sizing: border-box;
	width: var(--dm-ctap-sheet-width, 380px);
	max-width: calc(100vw - 24px);
	max-height: calc(100vh - 24px);
	margin-inline: 12px;
	display: flex;
	flex-direction: column;
	background: var(--dm-ctap-sheet-bg, #06061c);
	color: var(--dm-ctap-sheet-accent, #fff);
	/* فقط گوشه‌های بالا گرد: همان امضای بصری مودال کشویی. */
	border-start-start-radius: var(--dm-ctap-sheet-radius, 26px);
	border-start-end-radius: var(--dm-ctap-sheet-radius, 26px);
	box-shadow: 0 -18px 60px rgba(6, 6, 28, .55);
	/* ⚠ اینجا overflow پنهان لازم است تا ویدئو از گوشه‌های گرد بیرون نزند؛ هیچ حباب
	   شناوری داخل این پنل نیست، پس تله‌ی بریدن پاپ‌اور اینجا موضوعیت ندارد. */
	overflow: hidden;
	transform: translateY(100%);
	transition: transform .42s cubic-bezier(.32, .72, 0, 1);
}

.dm-ctap-sheet.is-showing .dm-ctap-sheet-backdrop { opacity: 1; }
.dm-ctap-sheet.is-showing .dm-ctap-sheet-panel { transform: none; }

/* حین کشیدن با انگشت، حرکت باید بی‌تأخیر دنبال انگشت بیاید. */
.dm-ctap-sheet.is-dragging .dm-ctap-sheet-panel { transition: none; }

.dm-ctap-sheet-grip {
	position: absolute;
	inset-block-start: 8px;
	inset-inline-start: 50%;
	transform: translateX(50%);
	width: 38px;
	height: 4px;
	border-radius: 999px;
	background: currentColor;
	opacity: .35;
	z-index: 3;
	pointer-events: none;
}

/* ناحیه‌ی لمس عمداً بلندتر از خط دیده‌شده است تا با انگشت هم بشود گرفتش.

   ⚠ این تنها جزء افزونه است که عمداً چپ‌به‌راست می‌ماند: خط زمان یک پخش‌کننده در
   همه‌ی زبان‌ها از چپ پر می‌شود. ریشه‌ی افزونه راست‌به‌چپ است و در آن حالت خودِ
   ورودی بازه‌ی مرورگر و خط رنگی ما دو مبدأ متفاوت می‌گرفتند: نقطه از یک سمت
   حرکت می‌کرد و پرشدگی از سمت مقابل. یک اعلان جهت، هر دو را به یک مبدأ می‌بندد. */
.dm-ctap-sheet-progress {
	position: absolute;
	inset-block-start: 16px;
	inset-inline: 14px;
	height: 20px;
	display: flex;
	align-items: center;
	direction: ltr;
	z-index: 4;
}

.dm-ctap-sheet-progress::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	height: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .28);
}

.dm-ctap-sheet-bar {
	position: absolute;
	inset-inline-start: 0;
	display: block;
	width: 0;
	height: 4px;
	border-radius: 999px;
	background: var(--dm-ctap-sheet-accent, #fff);
	pointer-events: none;
}

/* ورودی بازه‌ی واقعی، ولی نامرئی: خط رنگی بالا نقش دیداری را بازی می‌کند و این
   فقط تعامل و دسترس‌پذیری را می‌آورد. */
.dm-ctap-root .dm-ctap-sheet-seek {
	position: relative;
	z-index: 2;
	width: 100%;
	height: 20px;
	margin: 0;
	padding: 0;
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	/* ویدئو محور زمانش همیشه چپ‌به‌راست است، حتی در صفحه‌ی راست‌به‌چپ. */
	direction: ltr;
}

.dm-ctap-sheet-seek:focus-visible {
	outline: 2px solid var(--dm-ctap-sheet-accent, #fff);
	outline-offset: 3px;
	border-radius: 999px;
}

.dm-ctap-sheet-seek::-webkit-slider-runnable-track {
	height: 20px;
	background: transparent;
}

.dm-ctap-sheet-seek::-moz-range-track {
	height: 20px;
	background: transparent;
}

.dm-ctap-sheet-seek::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
	margin-block-start: 3px;
	border-radius: 50%;
	border: 0;
	background: var(--dm-ctap-sheet-accent, #fff);
	box-shadow: 0 1px 4px rgba(6, 6, 28, .5);
}

.dm-ctap-sheet-seek::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 0;
	background: var(--dm-ctap-sheet-accent, #fff);
	box-shadow: 0 1px 4px rgba(6, 6, 28, .5);
}

/* دکمه‌ی بستن باید روی تصویر روشن هم بی‌ابهام دیده شود: پس‌زمینه‌ی تویِ‌پر،
   حلقه‌ی روشن دورش و خط ضخیم‌تر — نه یک ضربدر کم‌رنگ روی ویدئو. */
.dm-ctap-root .dm-ctap-sheet-close {
	position: absolute;
	inset-block-start: 44px;
	inset-inline-end: 14px;
	inset-inline-start: auto;
	z-index: 5;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 50%;
	background: rgba(6, 6, 28, .82);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .55), 0 4px 14px rgba(6, 6, 28, .55);
	color: #fff;
	line-height: 0;
	transition: background-color .15s ease, transform .15s ease;
}

.dm-ctap-root .dm-ctap-sheet-close:hover,
.dm-ctap-root .dm-ctap-sheet-close:focus-visible {
	background: var(--dm-ctap-sheet-backdrop, rgba(6, 6, 28, .95));
	transform: scale(1.06);
}

.dm-ctap-sheet-close svg { width: 20px; height: 20px; }

/* نسبت قاب. در حالت خودکار، جاوااسکریپت این متغیر را از ابعاد واقعی ویدئو پر
   می‌کند — وگرنه یک ویدئوی افقی داخل قاب عمودی به یک نوار باریک وسط تبدیل می‌شود. */
.dm-ctap-sheet-stage {
	position: relative;
	width: 100%;
	aspect-ratio: var(--dm-ctap-sheet-ratio, 9 / 16);
	max-height: var(--dm-ctap-sheet-maxh, 80vh);
	background: #000;
	cursor: pointer;
}

/* ارتفاع دستی: نسبت کنار می‌رود و همان عدد حاکم می‌شود. */
.dm-ctap-sheet-fixed-h .dm-ctap-sheet-stage {
	aspect-ratio: auto;
	height: var(--dm-ctap-sheet-height, 480px);
}

.dm-ctap-sheet-video {
	width: 100%;
	height: 100%;
	display: block;
	/* contain=کل ویدئو دیده می‌شود و دو طرفش ممکن است سیاه بماند.
	   cover=قاب کامل پر می‌شود و لبه‌های ویدئو بریده می‌شود. */
	object-fit: var(--dm-ctap-sheet-fit, contain);
	background: #000;
}

/* نشانگر مکث/پخش وسط تصویر؛ فقط وقتی ویدئو متوقف است دیده می‌شود. */
.dm-ctap-sheet-state {
	position: absolute;
	inset-block-start: 50%;
	inset-inline-start: 50%;
	transform: translate(50%, -50%) scale(.8);
	width: 66px;
	height: 66px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(6, 6, 28, .55);
	color: #fff;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s ease, transform .2s ease;
}

.dm-ctap-sheet.is-paused .dm-ctap-sheet-state {
	opacity: 1;
	transform: translate(50%, -50%) scale(1);
}

.dm-ctap-sheet-state svg {
	width: 30px;
	height: 30px;
	margin-inline-start: 4px;
}

.dm-ctap-sheet-bottom {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
}

.dm-ctap-sheet-controls {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
}

.dm-ctap-root .dm-ctap-sheet-skip,
.dm-ctap-root .dm-ctap-sheet-play {
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	cursor: pointer;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: var(--dm-ctap-sheet-accent, #fff);
	line-height: 0;
	transition: background-color .15s ease;
}

.dm-ctap-root .dm-ctap-sheet-skip:hover,
.dm-ctap-root .dm-ctap-sheet-play:hover {
	background: rgba(255, 255, 255, .26);
}

.dm-ctap-sheet-skip svg { width: 17px; height: 17px; }
.dm-ctap-sheet-play svg { width: 17px; height: 17px; }

/* آیکن پخش و مکث روی هم می‌نشینند و وضعیت واقعی ویدئو یکی را نشان می‌دهد. */
.dm-ctap-sheet-play-on,
.dm-ctap-sheet-play-off {
	position: absolute;
	display: inline-flex;
	line-height: 0;
}

.dm-ctap-sheet-play-on { display: none; }
.dm-ctap-sheet.is-paused .dm-ctap-sheet-play-on { display: inline-flex; }
.dm-ctap-sheet.is-paused .dm-ctap-sheet-play-off { display: none; }

.dm-ctap-sheet-time {
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--dm-ctap-sheet-accent, #fff);
	opacity: .8;
	unicode-bidi: isolate;
	white-space: nowrap;
	margin-inline-start: 4px;
}

.dm-ctap-sheet-title {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--dm-ctap-sheet-accent, #fff);
	min-width: 0;
	flex: 1 1 auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dm-ctap-root .dm-ctap-sheet-sound {
	width: 38px;
	height: 38px;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: var(--dm-ctap-sheet-accent, #fff);
	line-height: 0;
}

.dm-ctap-sheet-sound svg { width: 18px; height: 18px; }

.dm-ctap-sheet-sound-on { display: none; }
.dm-ctap-sheet-sound-off { display: flex; }
.dm-ctap-sheet.is-unmuted .dm-ctap-sheet-sound-on { display: flex; }
.dm-ctap-sheet.is-unmuted .dm-ctap-sheet-sound-off { display: none; }

@media (prefers-reduced-motion: reduce) {
	.dm-ctap-sheet-panel,
	.dm-ctap-sheet-backdrop {
		transition-duration: 1ms;
	}
}

/* ==================== قالب «دکمه‌ی شناور تماس چندکاناله» ==================== */

.dm-ctap-dial {
	position: relative;
	pointer-events: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--dm-ctap-dial-gap, 12px);
	margin-inline: var(--dm-ctap-offset-x, 24px);
	margin-block: var(--dm-ctap-offset-y, 24px);
	opacity: 0;
	transform: translateY(20px);
	transition:
		opacity var(--dm-ctap-anim-ms, 420ms) cubic-bezier(.22, 1, .36, 1),
		transform var(--dm-ctap-anim-ms, 420ms) cubic-bezier(.22, 1, .36, 1);
}

.dm-ctap-tpl-speed-dial.is-open .dm-ctap-dial {
	opacity: 1;
	transform: none;
}

.dm-ctap-dial-down .dm-ctap-dial { flex-direction: column-reverse; }
.dm-ctap-dial-inline .dm-ctap-dial { flex-direction: row-reverse; align-items: center; }

.dm-ctap-dial-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--dm-ctap-dial-gap, 12px);
}

.dm-ctap-dial-down .dm-ctap-dial-list { flex-direction: column-reverse; }
.dm-ctap-dial-inline .dm-ctap-dial-list { flex-direction: row-reverse; align-items: center; }

.dm-ctap-dial-item {
	margin: 0;
	opacity: 0;
	transform: scale(.4);
	pointer-events: none;
	transition: opacity .22s ease, transform .22s cubic-bezier(.22, 1.4, .36, 1);
	transition-delay: 0ms;
}

.dm-ctap-tpl-speed-dial.is-expanded .dm-ctap-dial-item {
	opacity: 1;
	transform: none;
	pointer-events: auto;
	/* هر کانال کمی بعد از قبلی باز می‌شود؛ اندیس از PHP روی خود المان می‌نشیند. */
	transition-delay: calc(var(--dm-ctap-dial-i, 0) * 45ms);
}

.dm-ctap-root .dm-ctap-dial-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: var(--dm-ctap-dial-size, 60px);
	padding-inline: 0;
	width: var(--dm-ctap-dial-size, 60px);
	justify-content: center;
	border-radius: 999px;
	text-decoration: none;
	background: var(--dm-ctap-dial-item-bg, #3e68ff);
	color: var(--dm-ctap-dial-item-color, #fff);
	box-shadow: 0 8px 20px rgba(6, 6, 28, .22);
	font-size: 14px;
	font-weight: 600;
	transition: filter .15s ease;
}

.dm-ctap-dial-labelled .dm-ctap-dial-link {
	width: auto;
	padding-inline: 18px 20px;
	justify-content: flex-start;
}

.dm-ctap-root .dm-ctap-dial-link:hover,
.dm-ctap-root .dm-ctap-dial-link:focus {
	filter: brightness(1.12);
	color: var(--dm-ctap-dial-item-color, #fff);
}

.dm-ctap-dial-icon {
	display: inline-flex;
	line-height: 0;
	flex: 0 0 auto;
}

.dm-ctap-dial-icon svg {
	width: 22px;
	height: 22px;
	display: block;
}

.dm-ctap-dial-label {
	white-space: nowrap;
}

.dm-ctap-dial-labelled .dm-ctap-dial-label { display: inline; }
.dm-ctap-dial-list .dm-ctap-dial-label { display: none; }
.dm-ctap-dial-labelled .dm-ctap-dial-list .dm-ctap-dial-label { display: inline; }

.dm-ctap-root .dm-ctap-dial-toggle {
	width: var(--dm-ctap-dial-size, 60px);
	height: var(--dm-ctap-dial-size, 60px);
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	cursor: pointer;
	border-radius: 50%;
	background: var(--dm-ctap-dial-bg, #3e68ff);
	color: var(--dm-ctap-dial-color, #fff);
	box-shadow: 0 10px 26px rgba(6, 6, 28, .3);
	align-self: flex-end;
}

.dm-ctap-dial-inline .dm-ctap-dial-toggle { align-self: center; }

.dm-ctap-dial-toggle-icon,
.dm-ctap-dial-toggle-close {
	position: absolute;
	display: inline-flex;
	line-height: 0;
	transition: opacity .18s ease, transform .18s ease;
}

.dm-ctap-dial-toggle-icon svg,
.dm-ctap-dial-toggle-close svg {
	width: 26px;
	height: 26px;
	display: block;
}

.dm-ctap-dial-toggle-close {
	opacity: 0;
	transform: rotate(-90deg);
}

.dm-ctap-tpl-speed-dial.is-expanded .dm-ctap-dial-toggle-icon {
	opacity: 0;
	transform: rotate(90deg);
}

.dm-ctap-tpl-speed-dial.is-expanded .dm-ctap-dial-toggle-close {
	opacity: 1;
	transform: none;
}

/* تپش دور دکمه‌ی اصلی — همان منطق حلقه‌های نوار، در ابعاد کوچک‌تر. */
.dm-ctap-dial-pulsing .dm-ctap-dial-toggle::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 0 var(--dm-ctap-dial-bg, #3e68ff);
	animation: dm-ctap-dial-pulse 2.2s ease-out infinite;
	pointer-events: none;
}

.dm-ctap-tpl-speed-dial.is-expanded .dm-ctap-dial-toggle::after {
	animation: none;
}

@keyframes dm-ctap-dial-pulse {
	0% { box-shadow: 0 0 0 0 var(--dm-ctap-dial-bg, #3e68ff); opacity: .55; }
	100% { box-shadow: 0 0 0 22px var(--dm-ctap-dial-bg, #3e68ff); opacity: 0; }
}

/* ==================== قالب «نوار اعلان بالای صفحه» ==================== */

/* این قالب همیشه تمام‌عرض لبه است، پس موقعیت‌های نه‌گانه رویش اثری ندارند. */
.dm-ctap-tpl-topbar {
	align-items: flex-start;
	justify-content: center;
}

.dm-ctap-tpl-topbar.dm-ctap-pos-bottom-start,
.dm-ctap-tpl-topbar.dm-ctap-pos-bottom-center,
.dm-ctap-tpl-topbar.dm-ctap-pos-bottom-end {
	align-items: flex-end;
}

.dm-ctap-top {
	position: relative;
	pointer-events: auto;
	box-sizing: border-box;
	width: 100%;
	min-height: var(--dm-ctap-top-height, 52px);
	display: flex;
	align-items: center;
	gap: 16px;
	padding-block: 8px;
	padding-inline: 20px 46px;
	background: var(--dm-ctap-top-bg, #06061c);
	color: var(--dm-ctap-top-color, #fff);
	opacity: 0;
	transform: translateY(-100%);
	transition:
		opacity var(--dm-ctap-anim-ms, 420ms) cubic-bezier(.22, 1, .36, 1),
		transform var(--dm-ctap-anim-ms, 420ms) cubic-bezier(.22, 1, .36, 1);
}

.dm-ctap-tpl-topbar.dm-ctap-pos-bottom-start .dm-ctap-top,
.dm-ctap-tpl-topbar.dm-ctap-pos-bottom-center .dm-ctap-top,
.dm-ctap-tpl-topbar.dm-ctap-pos-bottom-end .dm-ctap-top {
	transform: translateY(100%);
}

.dm-ctap-tpl-topbar.is-open .dm-ctap-top {
	opacity: 1;
	transform: none;
}

.dm-ctap-top-main {
	display: flex;
	align-items: center;
	gap: 14px;
	flex: 1 1 auto;
	min-width: 0;
}

.dm-ctap-top-center .dm-ctap-top-main { justify-content: center; }
.dm-ctap-top-start .dm-ctap-top-main { justify-content: flex-start; }
.dm-ctap-top-between .dm-ctap-top-main { justify-content: space-between; }

.dm-ctap-top-icon {
	display: inline-flex;
	line-height: 0;
	flex: 0 0 auto;
}

.dm-ctap-top-icon svg {
	width: 22px;
	height: 22px;
	display: block;
}

.dm-ctap-top-text {
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
	min-width: 0;
}

.dm-ctap-top-title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.7;
}

.dm-ctap-top-note {
	font-size: 12px;
	opacity: .75;
}

.dm-ctap-top-timer {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	unicode-bidi: isolate;
}

.dm-ctap-top-unit {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	min-width: 42px;
	padding: 4px 6px;
	border-radius: 9px;
	background: var(--dm-ctap-top-chip, rgba(255, 255, 255, .12));
	line-height: 1.25;
}

.dm-ctap-top-unit b {
	font-size: 15px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.dm-ctap-top-unit i {
	font-size: 10px;
	font-style: normal;
	opacity: .7;
}

.dm-ctap-top-expired .dm-ctap-top-timer {
	display: none;
}

.dm-ctap-top-actions {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.dm-ctap-tpl-topbar .dm-ctap-close {
	inset-block-start: 50%;
	inset-inline-start: 12px;
	inset-inline-end: auto;
	transform: translateY(-50%);
	background: transparent;
	color: var(--dm-ctap-top-color, #fff);
	opacity: .7;
}

.dm-ctap-tpl-topbar .dm-ctap-close:hover { opacity: 1; }

/* ==================== قالب «زبانه‌ی کناری» ==================== */

.dm-ctap-tpl-side-tab {
	align-items: flex-start;
	justify-content: flex-start;
}

.dm-ctap-tab-end {
	justify-content: flex-end;
}

.dm-ctap-tab-wrap {
	position: relative;
	pointer-events: auto;
	display: flex;
	align-items: flex-start;
	margin-block-start: var(--dm-ctap-tab-offset, 30%);
	opacity: 0;
	transition: opacity var(--dm-ctap-anim-ms, 420ms) ease;
}

.dm-ctap-tpl-side-tab.is-open .dm-ctap-tab-wrap { opacity: 1; }

.dm-ctap-root .dm-ctap-tab-handle {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	padding: 14px 12px;
	/* زبانه عمودی است: نوشتن عمودی به‌جای چرخاندن، چون چرخاندن جعبه‌ی کلیک را جابه‌جا می‌کند. */
	writing-mode: vertical-rl;
	background: var(--dm-ctap-tab-bg, #3e68ff);
	color: var(--dm-ctap-tab-color, #fff);
	font-size: 14px;
	font-weight: 700;
	border-start-end-radius: 12px;
	border-end-end-radius: 12px;
	box-shadow: 0 8px 22px rgba(6, 6, 28, .25);
	align-self: flex-start;
}

.dm-ctap-tab-end .dm-ctap-tab-handle {
	border-radius: 0;
	border-start-start-radius: 12px;
	border-end-start-radius: 12px;
}

.dm-ctap-tab-icon {
	display: inline-flex;
	line-height: 0;
}

.dm-ctap-tab-icon svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* بسته‌بودن پنل با عرض صفر انجام می‌شود نه display، تا باز و بسته شدنش نرم باشد. */
.dm-ctap-tab-panel {
	position: relative;
	box-sizing: border-box;
	width: 0;
	max-width: 0;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	overflow-x: hidden;
	padding-block: var(--dm-ctap-padding, 26px);
	padding-inline: 0;
	background: var(--dm-ctap-bg, #fff);
	border: 1px solid var(--dm-ctap-border-color, transparent);
	border-radius: var(--dm-ctap-radius, 22px);
	display: flex;
	flex-direction: column;
	gap: 16px;
	opacity: 0;
	box-shadow: 0 24px 60px rgba(6, 6, 28, .22);
	transition: width .3s cubic-bezier(.22, 1, .36, 1), max-width .3s cubic-bezier(.22, 1, .36, 1), opacity .25s ease, padding .3s ease;
}

.dm-ctap-tpl-side-tab.is-expanded .dm-ctap-tab-panel {
	width: var(--dm-ctap-tab-width, 340px);
	max-width: calc(100vw - 60px);
	padding-inline: var(--dm-ctap-padding, 26px);
	opacity: 1;
}

/* ==================== قالب «تمام‌صفحه‌ی خوش‌آمد» ==================== */

.dm-ctap-tpl-fullscreen {
	align-items: stretch;
	justify-content: stretch;
}

.dm-ctap-tpl-fullscreen .dm-ctap-modal {
	width: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	border: 0;
	border-radius: 0;
	background: var(--dm-ctap-full-bg, #06061c);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 24px;
	overflow-y: auto;
}

/* دکمه‌ی بستن عمداً بیرون می‌ماند: موقعیتش مطلق است و کشیده‌شدن تا عرض ستون
   جعبه‌ی کلیکش را به کل بالای صفحه می‌برد. */
.dm-ctap-tpl-fullscreen .dm-ctap-media,
.dm-ctap-tpl-fullscreen .dm-ctap-body {
	max-width: var(--dm-ctap-full-width, 620px);
	width: 100%;
}

.dm-ctap-tpl-fullscreen .dm-ctap-body {
	text-align: center;
	align-items: center;
}

.dm-ctap-tpl-fullscreen .dm-ctap-actions {
	justify-content: center;
	width: auto;
}

.dm-ctap-tpl-fullscreen .dm-ctap-close {
	inset-block-start: 22px;
	inset-inline-end: 22px;
	width: 38px;
	height: 38px;
}

/* برچسب موبایل/دسکتاپ: بدون جاوااسکریپت و کش‌امن */
.dm-ctap-label-mobile {
	display: none;
}

@media (max-width: 781px) {
	.dm-ctap-label-desktop {
		display: none;
	}

	.dm-ctap-label-mobile {
		display: inline;
	}

	/* فاصله‌ی افقی تنظیم‌شده در موبایل هم رعایت می‌شود، فقط سقف می‌خورد تا یک عدد
	   بزرگِ دسکتاپی، مودال را روی صفحه‌ی کوچک له نکند. */
	.dm-ctap-modal {
		width: var(--dm-ctap-width-mobile, calc(100vw - 24px));
		margin-inline: min(var(--dm-ctap-offset-x, 12px), 16px);
	}

	.dm-ctap-buttons-row-mobile-column .dm-ctap-actions {
		flex-direction: column;
	}

	/* نوار در موبایل: تمام‌عرض، آواتار کوچک‌تر، فاصله‌ی داخلی جمع‌تر. */
	.dm-ctap-tpl-bar .dm-ctap-bar {
		width: var(--dm-ctap-width-mobile, calc(100vw - 24px));
		margin-inline: min(var(--dm-ctap-offset-x, 12px), 14px);
	}

	.dm-ctap-bar-pill {
		padding: 6px 6px 6px 18px;
	}

	.dm-ctap-bar-avatar {
		width: var(--dm-ctap-bar-avatar-mobile, 72px);
		height: var(--dm-ctap-bar-avatar-mobile, 72px);
	}

	/* حلقه در موبایل هم باید یقه را در بر بگیرد، وگرنه همان باگ نامرئی‌شدن برمی‌گردد. */
	.dm-ctap-bar-ring {
		width: calc(var(--dm-ctap-bar-avatar-mobile, 72px) + var(--dm-ctap-bar-collar, 6px) * 2);
		height: calc(var(--dm-ctap-bar-avatar-mobile, 72px) + var(--dm-ctap-bar-collar, 6px) * 2);
	}

	.dm-ctap-bar-has-avatar .dm-ctap-bar-pill {
		gap: calc(var(--dm-ctap-bar-avatar-mobile, 72px) + 8px);
	}

	/* ویدئوی قاب گرد در موبایل: مگر اینکه مدیر صریحاً بخواهد، پوستر ثابت جای
	   ویدئوی خودکار را می‌گیرد تا روی اینترنت همراه هزینه‌ای تحمیل نشود. */
	.dm-ctap-bar-has-video:not(.dm-ctap-bar-video-mobile) .dm-ctap-bar-avatar-video {
		display: none;
	}

	.dm-ctap-bar-has-video:not(.dm-ctap-bar-video-mobile) .dm-ctap-bar-avatar-fallback {
		display: block;
	}

	/*
	 * مودال ویدئو در موبایل. پیش‌تر بی‌قید تمام‌عرض بود و راهی برای کم‌کردنش نبود؛
	 * حالا سقفِ عرضِ موبایل را سرور می‌فرستد و صفر یعنی همان تمام‌عرضِ قبلی، پس
	 * سایت‌های موجود تکان نمی‌خورند.
	 */
	.dm-ctap-sheet-panel {
		width: 100%;
		max-width: var(--dm-ctap-sheet-width-mobile, 100%);
		margin-inline: auto;
	}

	.dm-ctap-sheet-stage {
		max-height: calc(100vh - 96px);
	}

	/* نوار اعلان: در موبایل متن و دکمه زیر هم می‌روند تا هیچ‌کدام له نشوند. */
	.dm-ctap-top {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		padding-inline: 16px 40px;
	}

	.dm-ctap-top-main { flex-wrap: wrap; justify-content: center; }
	.dm-ctap-top-actions { justify-content: center; }
	.dm-ctap-top-text { justify-content: center; text-align: center; }

	.dm-ctap-tpl-topbar .dm-ctap-close {
		inset-block-start: 10px;
		transform: none;
	}

	/* زبانه‌ی کناری: پنل تمام‌عرض منهای جای خود زبانه. */
	.dm-ctap-tpl-side-tab.is-expanded .dm-ctap-tab-panel {
		width: calc(100vw - 56px);
		max-width: calc(100vw - 56px);
	}

	.dm-ctap-root .dm-ctap-tab-handle {
		padding: 12px 9px;
		font-size: 13px;
	}

	/* دکمه‌ی شناور: برچسب‌ها در موبایل جا نمی‌شوند، فقط آیکن می‌ماند. */
	.dm-ctap-dial-labelled .dm-ctap-dial-list .dm-ctap-dial-label { display: none; }

	.dm-ctap-dial-labelled .dm-ctap-dial-list .dm-ctap-dial-link {
		width: var(--dm-ctap-dial-size, 60px);
		padding-inline: 0;
		justify-content: center;
	}

	.dm-ctap-img-inline_start .dm-ctap-modal,
	.dm-ctap-img-inline_end .dm-ctap-modal {
		flex-direction: column;
		align-items: stretch;
	}

	/* موقعیت اختصاصی موبایل */
	.dm-ctap-mpos-top-start { align-items: flex-start; justify-content: flex-start; }
	.dm-ctap-mpos-top-center { align-items: flex-start; justify-content: center; }
	.dm-ctap-mpos-top-end { align-items: flex-start; justify-content: flex-end; }
	.dm-ctap-mpos-middle-start { align-items: center; justify-content: flex-start; }
	.dm-ctap-mpos-center { align-items: center; justify-content: center; }
	.dm-ctap-mpos-middle-end { align-items: center; justify-content: flex-end; }
	.dm-ctap-mpos-bottom-start { align-items: flex-end; justify-content: flex-start; }
	.dm-ctap-mpos-bottom-center { align-items: flex-end; justify-content: center; }
	.dm-ctap-mpos-bottom-end { align-items: flex-end; justify-content: flex-end; }

	/* ضریب مقیاسِ مخصوص موبایل. صفر در تنظیمات = همان ضریب دسکتاپ، که سرور
	   پیش از فرستادن جایش می‌گذارد، پس اینجا شرطی لازم نیست. */
	.dm-ctap-root {
		--dm-ctap-s: var(--dm-ctap-scale-mobile, 1);
	}

	/* عرض کشوی محتوا در موبایل: سقفِ عرض، ولی هرگز بیشتر از خودِ صفحه. */
	.dm-ctap-cmodal-panel {
		width: 100%;
		max-width: none;
	}
}

/* --- عرض در تبلت: میان‌پرده‌ای که پیش‌تر وجود نداشت و تبلت عرض دسکتاپ می‌گرفت --- */
@media (min-width: 782px) and (max-width: 1024px) {
	.dm-ctap-tpl-card .dm-ctap-modal,
	.dm-ctap-tpl-side-tab .dm-ctap-modal {
		width: min(var(--dm-ctap-width-tablet, 460px), calc(100vw - 32px));
	}
}

/* --- جای رسانه داخل قاب خودش: تصویر، ویدئو و پوستر، هر سه --- */
.dm-ctap-root .dm-ctap-image,
.dm-ctap-root .dm-ctap-video {
	object-fit: var(--dm-ctap-media-fit, cover);
}

.dm-ctap-root .dm-ctap-media {
	display: flex;
}

.dm-ctap-media-align-top-start .dm-ctap-media { align-items: flex-start; justify-content: flex-start; }
.dm-ctap-media-align-top-center .dm-ctap-media { align-items: flex-start; justify-content: center; }
.dm-ctap-media-align-top-end .dm-ctap-media { align-items: flex-start; justify-content: flex-end; }
.dm-ctap-media-align-middle-start .dm-ctap-media { align-items: center; justify-content: flex-start; }
.dm-ctap-media-align-center .dm-ctap-media { align-items: center; justify-content: center; }
.dm-ctap-media-align-middle-end .dm-ctap-media { align-items: center; justify-content: flex-end; }
.dm-ctap-media-align-bottom-start .dm-ctap-media { align-items: flex-end; justify-content: flex-start; }
.dm-ctap-media-align-bottom-center .dm-ctap-media { align-items: flex-end; justify-content: center; }
.dm-ctap-media-align-bottom-end .dm-ctap-media { align-items: flex-end; justify-content: flex-end; }

/*
 * همان تنظیم برای پوستر و ویدئوی کشوی استوری — کاربر یک جا انتخاب می‌کند و
 * انتظار دارد همه‌جا اعمال شود، وگرنه «جای تصویر» یعنی فقط جای یکی از سه‌تا.
 */
.dm-ctap-root .dm-ctap-sheet-video {
	object-position: center;
}

.dm-ctap-media-align-top-center .dm-ctap-sheet-video,
.dm-ctap-media-align-top-start .dm-ctap-sheet-video,
.dm-ctap-media-align-top-end .dm-ctap-sheet-video { object-position: top; }

.dm-ctap-media-align-bottom-center .dm-ctap-sheet-video,
.dm-ctap-media-align-bottom-start .dm-ctap-sheet-video,
.dm-ctap-media-align-bottom-end .dm-ctap-sheet-video { object-position: bottom; }

/*
 * --- آیکن‌های گرد، و چرا این بلوک لازم شد ---
 *
 * این دکمه‌ها همه radius 50% داشتند ولی روی سایت واقعی بیضی می‌شدند: قالب میزبان
 * روی خودِ عنصر button پدینگ و ارتفاعِ کمینه می‌گذارد و یک دکمه‌ی ۳۰×۳۰ با پدینگِ
 * تحمیلی، دیگر مربع نیست — و radius 50% روی مستطیل، بیضی است. پس ابعاد با
 * aspect-ratio قفل می‌شود، جمع‌شدن در فلکس‌باکس گرفته می‌شود و box-sizing صریح
 * می‌شود تا پدینگِ بیگانه ابعاد را بیرون نبرد.
 */
.dm-ctap-root .dm-ctap-close,
.dm-ctap-root .dm-ctap-sheet-skip,
.dm-ctap-root .dm-ctap-sheet-play,
.dm-ctap-root .dm-ctap-sheet-sound,
.dm-ctap-root .dm-ctap-cmodal-close,
.dm-ctap-cmodal .dm-ctap-cmodal-close {
	box-sizing: border-box;
	aspect-ratio: 1 / 1;
	flex: 0 0 auto;
	padding: 0;
	min-width: 0;
	min-height: 0;
	border-radius: 50%;
	overflow: hidden;
}

/* نماد صدا بدون برچسب، دایره‌ی تمام‌عیار است؛ با برچسب، قرص. */
.dm-ctap-root .dm-ctap-unmute {
	box-sizing: border-box;
	flex: 0 0 auto;
}

.dm-ctap-root.is-unmuted .dm-ctap-unmute .dm-ctap-icon-loud,
.dm-ctap-root .dm-ctap-unmute .dm-ctap-icon-muted { display: inline; }
.dm-ctap-root .dm-ctap-unmute .dm-ctap-icon-loud,
.dm-ctap-root.is-unmuted .dm-ctap-unmute .dm-ctap-icon-muted { display: none; }

/*
 * ⚠ نماد صدا پیش‌تر بعد از باز شدن صدا کاملاً ناپدید می‌شد، یعنی کاربر راهی برای
 * خاموش‌کردن دوباره نداشت. حالا می‌ماند و نمادش عوض می‌شود — یک کنترل، دو حالت.
 */
.dm-ctap-root.is-unmuted .dm-ctap-unmute {
	display: flex;
	background: rgba(6, 6, 28, .55);
}

.dm-ctap-root.is-unmuted .dm-ctap-unmute .dm-ctap-unmute-label {
	display: none;
}

/* --- لغزنده‌ی بلندی صدا --- */
.dm-ctap-root .dm-ctap-sound {
	position: absolute;
	inset-block-end: 12px;
	inset-inline-start: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
	max-width: calc(100% - 24px);
}

.dm-ctap-root .dm-ctap-sound .dm-ctap-unmute {
	position: static;
	inset: auto;
}

.dm-ctap-root .dm-ctap-volume {
	display: none;
	align-items: center;
	padding: 5px 10px;
	border-radius: 999px;
	background: rgba(6, 6, 28, .55);
}

/* لغزنده تا وقتی صدا باز نشده کاری نمی‌کند، پس دیده هم نمی‌شود. */
.dm-ctap-root.is-unmuted .dm-ctap-volume {
	display: flex;
}

.dm-ctap-root .dm-ctap-volume-range {
	width: 84px;
	height: 4px;
	margin: 0;
	accent-color: var(--dm-ctap-accent, #3e68ff);
	cursor: pointer;
}

/* --- کشوی محتوا: فرم یا هر شورت‌کدی، با کلیک روی دکمه از پایین بالا می‌آید --- */
.dm-ctap-cmodal {
	position: fixed;
	inset: 0;
	z-index: 99995;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	direction: rtl;
	font-family: 'Vazirmatn', 'IRANSansX', Tahoma, Arial, sans-serif;
}

.dm-ctap-cmodal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(6, 6, 28, .62);
	opacity: 0;
	transition: opacity .22s ease;
}

.dm-ctap-cmodal.is-showing .dm-ctap-cmodal-backdrop {
	opacity: 1;
}

.dm-ctap-cmodal-panel {
	position: relative;
	width: 100%;
	max-width: var(--dm-ctap-cmodal-width, 520px);
	max-height: 88vh;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-start-start-radius: 22px;
	border-start-end-radius: 22px;
	box-shadow: 0 -18px 50px rgba(6, 6, 28, .3);
	transform: translateY(100%);
	transition: transform .26s cubic-bezier(.22, .68, .32, 1);
}

.dm-ctap-cmodal.is-showing .dm-ctap-cmodal-panel {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.dm-ctap-cmodal-panel,
	.dm-ctap-cmodal-backdrop {
		transition: none;
	}
}

.dm-ctap-cmodal-head {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px 10px;
	border-block-end: 1px solid #eceef7;
}

.dm-ctap-cmodal-grip {
	position: absolute;
	inset-block-start: 7px;
	inset-inline-start: 50%;
	transform: translateX(50%);
	width: 40px;
	height: 4px;
	border-radius: 999px;
	background: #dcdfeb;
}

.dm-ctap-cmodal-title {
	margin: 0;
	flex: 1 1 auto;
	font-size: 15px;
	font-weight: 700;
	color: #06061c;
}

.dm-ctap-cmodal .dm-ctap-cmodal-close {
	width: 30px;
	height: 30px;
	margin-inline-start: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	cursor: pointer;
	background: #f4f5fa;
	color: #7a7d99;
	line-height: 0;
}

.dm-ctap-cmodal-body {
	padding: 16px 18px 22px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}