/* ==========================================================
   Qesse Reader — استایل‌ها
   رنگ‌ها از Global Colors المنتور خوانده می‌شوند؛ اینجا
   هاردکد نمی‌شوند تا پالت سایت یک منبع حقیقت بماند.
   ========================================================== */

:root {
	/* پاپ‌آپ‌های المنتور روی 9999 می‌نشینند و توست باید بالاتر باشد.
	   اگر برای پاپ‌آپ ریدر در Advanced عدد سفارشی گذاشته‌ای، این را بالاتر ببر. */
	--qesse-toast-z: 100000;

	--qesse-surface: var(--e-global-color-7b85b09, #1E1E1E);
	--qesse-bg:      var(--e-global-color-8c051fc, #151515);
	--qesse-onDark:  var(--e-global-color-4aa0363, #EFEFEF);
	--qesse-primary: var(--e-global-color-primary, #5048E0);
}


/* ==========================================================
   1) توست صفحه قصه — سطح مات، پایین، بالای نوار ناوبری
   ========================================================== */

#toast-single {
	--nav-height: 92px;   /* ارتفاع نوار ناوبری پایین */
	--toast-gap: 12px;

	position: fixed;
	bottom: calc(var(--nav-height) + var(--toast-gap) + env(safe-area-inset-bottom, 0px));
	right: 5dvw;
	left: 5dvw;

	width: fit-content;
	max-width: 88dvw;
	margin: 0 auto;

	font-family: 'Peyda';
	font-size: 16px;
	line-height: 1.7;
	text-align: right;

	background-color: var(--qesse-surface);
	color: var(--qesse-onDark);
	border: 0;
	border-right: 3px solid var(--qesse-primary);
	padding: 12px 16px;
	border-radius: 12px;

	/* هاله مویی: توست را از کارتی که هم‌رنگ خودش است جدا می‌کند */
	box-shadow: 0 0 0 1px rgba(239, 239, 239, .12),
	            0 12px 32px rgba(0, 0, 0, .55);

	z-index: var(--qesse-toast-z, 100000);
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity .3s ease, transform .3s ease;
}

#toast-single.show {
	opacity: 1;
	transform: translateY(0);
}

@media screen and (min-width: 768px) {
	#toast-single {
		--nav-height: 32px;
		max-width: 420px;
	}
}


/* ==========================================================
   2) توست ریدر — متریال شیشه‌ای، بالای صفحه
   ========================================================== */

#toast {
	--topbar-height: 96px;   /* ارتفاع ناحیه دکمه‌های بستن و تنظیمات */
	--toast-gap: 12px;

	position: fixed;
	/* اگر توست بیش از حد پایین افتاد، env(...) را بردار:
	   یعنی نوار بالا خودش safe-area را حساب کرده است */
	top: calc(var(--topbar-height) + var(--toast-gap) + env(safe-area-inset-top, 0px));
	right: 5dvw;
	left: 5dvw;

	width: fit-content;
	max-width: 78dvw;
	margin: 0 auto;

	font-family: 'Peyda';
	font-size: 15px;
	line-height: 1.7;
	text-align: right;

	background-color: rgba(21, 21, 21, .82);   /* بر پایه --qesse-bg */
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	color: var(--qesse-onDark);
	border: 0;
	border-right: 3px solid var(--qesse-primary);
	padding: 12px 16px;
	border-radius: 12px;
	box-shadow: 0 0 0 1px rgba(239, 239, 239, .10),
	            0 12px 32px rgba(0, 0, 0, .50);

	z-index: var(--qesse-toast-z, 100000);
	opacity: 0;
	transform: translateY(-10px);
	pointer-events: none;
	transition: opacity .3s ease, transform .3s ease;
}

#toast.show {
	opacity: 1;
	transform: translateY(0);
}

@media screen and (min-width: 768px) {
	#toast {
		max-width: 420px;
		font-size: 16px;
	}
}


/* ==========================================================
   3) صفحه‌بندی ریدر — نقطه‌های اسلیک به نوار پیشرفت

   دو نکته که با آزمون روی سایت روشن شد:

   ۱) جت‌انجین همه ابعاد را روی خودِ li می‌گذارد، نه span.
      پس نوار هم روی li ساخته می‌شود تا دقیقاً همان
      propertyها بازنویسی شوند.

   ۲) از :has() استفاده نمی‌شود. قاعده‌اش در فایل سرو‌شده
      سالم نمی‌ماند. به‌جایش منطق برعکس شده: همه قطعه‌ها
      پیش‌فرض پر هستند و li.slick-active ~ li صفحه‌های
      نخوانده را خالی می‌کند — سلکتور خواهر ساده، بی‌ریسک.

   اگر روزی ریدر از پاپ‌آپ بیرون آمد، .elementor-popup-modal
   را از ابتدای سلکتورها بردار و کلاس رَپر جدید را بگذار.
   ========================================================== */

.elementor-popup-modal .jet-listing-grid__slider ul.jet-slick-dots {
	--pager-bottom: 32px;

	position: fixed;
	left: 9dvw;
	right: 9dvw;
	bottom: calc(var(--pager-bottom) + env(safe-area-inset-bottom, 0px));

	width: auto;
	min-width: 0;
	max-width: none;
	margin: 0;
	padding: 0;
	box-sizing: border-box;

	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0;

	list-style: none;
	background: none;
	overflow: visible;

	/* روی فریم‌های روشن، نوار نازک بدون این محو می‌شود */
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .55));
}

/* خودِ li قطعه نوار است. پیش‌فرض «خوانده‌شده». */
.elementor-popup-modal .jet-listing-grid__slider ul.jet-slick-dots li {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	height: 4px;
	margin: 0;
	padding: 0;
	overflow: visible;
	text-indent: 0;
	cursor: pointer;
    opacity: .5;
	background-color: var( --e-global-color-4aa0363 ) !important;
	border-radius: 2px;
	touch-action: manipulation;   /* تأخیر دابل‌تپ حذف شود */
	transition: background-color .25s ease, height .25s ease;
}

.elementor-popup-modal .jet-listing-grid__slider ul.jet-slick-dots li.slick-active ~ li {
	background-color: rgba(239, 239, 239, .22) !important;
}


.elementor-popup-modal .jet-listing-grid__slider ul.jet-slick-dots li.slick-active {
	height: 8px;
}


.elementor-popup-modal .jet-listing-grid__slider ul.jet-slick-dots li::after {
	content: '';
	position: absolute;
	inset: -20px 0 -8px;
}

/* span فقط ظرف شماره است: نامرئی، ولی برای اسکرین‌ریدر باقی */
.elementor-popup-modal .jet-listing-grid__slider ul.jet-slick-dots li > span {
	display: block;
	width: 100%;
	height: 100%;
	font-size: 0;
	line-height: 0;
	color: transparent;
	background: none;
	border-radius: inherit;
}


/* ==========================================================
   4) احترام به تنظیم کاهش انیمیشن
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
	#toast-single,
	#toast {
		transition-duration: .01ms;
		transform: none;
	}

	#toast-single.show,
	#toast.show {
		transform: none;
	}

	.elementor-popup-modal .jet-listing-grid__slider ul.jet-slick-dots li {
		transition: none;
	}
}