/**
 * استایل فرانت‌اند استوری محصولات ترند.
 * تمام مقادیر رنگ/اندازه‌ی قابل‌تنظیم به‌صورت CSS Custom Property تعریف شده‌اند
 * تا کنترل‌های تب Style ویجت المنتور (رجوع کنید به includes/widgets/class-tps-story-widget.php)
 * بتوانند مقدار پیش‌فرض هرکدام را به‌ازای هر نمونه از ویجت بازنویسی کنند.
 *
 * @package Trend_Product_Stories
 */

.tps-stories-wrap {
	/* دایره‌ی پیش‌نمایش و حلقه‌ی رنگی */
	--tps-ring-start: #f09433;
	--tps-ring-mid: #e6683c;
	--tps-ring-end: #bc1888;
	--tps-ring-seen: #d0d0d5;
	--tps-avatar-size: 66px;
	--tps-gap: 16px;

	/* کادر و پس‌زمینه‌ی شیشه‌ای نمایشگر */
	--tps-overlay-bg: rgba( 10, 10, 12, 0.6 );
	--tps-overlay-blur: 18px;
	--tps-frame-bg: #000;
	--tps-frame-width: 420px;
	--tps-frame-radius: 14px;

	/* نوار پیشرفت */
	--tps-track-color: rgba( 255, 255, 255, 0.35 );
	--tps-fill-color: #fff;

	/* دکمه‌ی بستن */
	--tps-close-bg: rgba( 0, 0, 0, 0.35 );
	--tps-close-color: #fff;

	/* دکمه‌ی لایک */
	--tps-like-color: #ff3040;
	--tps-like-active-color: #ff3040;

	direction: rtl;
	box-sizing: border-box;
}

.tps-stories-wrap *,
.tps-stories-wrap *::before,
.tps-stories-wrap *::after {
	box-sizing: border-box;
}

/* ===================== نوار آواتارهای استوری ===================== */

.tps-avatars-list {
	display: flex;
	flex-wrap: nowrap;
	gap: var( --tps-gap );
	overflow-x: auto;
	padding: 6px 2px 12px;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.tps-avatars-list::-webkit-scrollbar {
	height: 6px;
}

.tps-avatars-list::-webkit-scrollbar-thumb {
	background: rgba( 0, 0, 0, 0.15 );
	border-radius: 10px;
}

/* عرض هر آیتم عمداً «ثابت» نیست: حداقلِ آن اندازه‌ی دایره است، اما در صورت نیاز
   می‌تواند تا سقفِ (اندازه‌ی دایره + فاصله‌ی بین دایره‌ها) رشد کند تا عنوانِ
   کامل‌ترِ محصول جا شود. یعنی هرچه «فاصله‌ی بین دایره‌ها» را در تب Style بیشتر
   کنید، متناسب با آن فضای بیشتری برای نمایشِ کاملِ نام محصول باز می‌شود. */
.tps-story-item {
	flex: 0 0 auto;
	min-width: calc( var( --tps-avatar-size ) + 10px );
	max-width: calc( var( --tps-avatar-size ) + var( --tps-gap ) + 24px );
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	outline: none;
	-webkit-tap-highlight-color: transparent;
}

.tps-avatar-ring {
	width: var( --tps-avatar-size );
	height: var( --tps-avatar-size );
	border-radius: 50%;
	padding: 3px;
	background: linear-gradient( 45deg, var( --tps-ring-start ), var( --tps-ring-mid ), var( --tps-ring-end ) );
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.15s ease;
}

.tps-story-item:hover .tps-avatar-ring,
.tps-story-item:focus-visible .tps-avatar-ring {
	transform: scale( 1.04 );
}

.tps-story-item.is-seen .tps-avatar-ring {
	background: var( --tps-ring-seen );
}

.tps-avatar-inner {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	overflow: hidden;
	background: #f1f1f3 url( "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c8c8cf'><path d='M12 2a5 5 0 100 10 5 5 0 000-10zm0 12c-4.4 0-8 2.2-8 5v3h16v-3c0-2.8-3.6-5-8-5z'/></svg>" ) center / 55% no-repeat;
	border: 3px solid #fff;
	position: relative;
}

.tps-avatar-inner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.tps-caption {
	max-width: 100%;
	font-size: 12px;
	line-height: 1.3;
	color: #262626;
	text-align: center;
	word-break: break-word;
	/* حداکثر دو خط؛ اگر باز هم جا نشد، با «...» قطع می‌شود. با افزایش «فاصله‌ی
	   بین دایره‌ها» در تب Style، عرض مجاز (تعریف‌شده روی .tps-story-item) بیشتر
	   می‌شود و همین دو خط فضای بیشتری برای نمایش نام کامل محصول پیدا می‌کنند. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tps-empty-message {
	color: #6b6b6b;
	font-size: 14px;
}

/* ===================== نمایشگر تمام‌صفحه ===================== */

.tps-viewer {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.tps-viewer.is-open {
	display: flex;
}

/* پس‌زمینه‌ی نیمه‌شفاف اطراف کادر. روی موبایل (که .tps-viewer-frame تمام صفحه را
   می‌پوشاند) اصلاً دیده نمی‌شود، اما روی صفحات بزرگ‌تر که کادر یک قاب کوچک‌تر و
   وسط‌چین است، پشتِ آن به‌صورت شیشه‌ای/محو دیده می‌شود، نه یک بلوکِ توپُر مشکی. */
.tps-viewer-overlay {
	position: absolute !important;
	inset: 0 !important;
	background: var( --tps-overlay-bg ) !important;
}

.tps-viewer-frame {
	position: relative !important;
	z-index: 1;
	width: 100% !important;
	height: 100% !important;
	max-width: var( --tps-frame-width );
	max-height: 100vh;
	background: var( --tps-frame-bg ) !important;
	overflow: hidden;
	display: flex !important;
	flex-direction: column !important;
	margin: 0 !important;
}

@media ( min-width: 560px ) {
	/* backdrop-filter عمداً فقط از این نقطه به بعد فعال می‌شود: در همین اندازه است
	   که .tps-viewer-frame دیگر تمام صفحه را نمی‌پوشاند و فضای اطراف آن (که
	   پس‌زمینه‌ی سایت از پشتش دیده می‌شود) واقعاً قابل مشاهده است؛ روی موبایل
	   محاسبه‌ی این افکت هم بی‌فایده و هم از نظر کارایی ناموجه است. */
	.tps-viewer-overlay {
		backdrop-filter: blur( var( --tps-overlay-blur ) ) saturate( 1.1 );
		-webkit-backdrop-filter: blur( var( --tps-overlay-blur ) ) saturate( 1.1 );
	}

	.tps-viewer-frame {
		height: min( 90vh, 780px );
		max-height: 92vh;
		border-radius: var( --tps-frame-radius );
		box-shadow: 0 20px 60px rgba( 0, 0, 0, 0.45 );
	}
}

/* نوار پیشرفت */

.tps-viewer-progress {
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	z-index: 5;
	display: flex;
	gap: 4px;
}

.tps-bar {
	flex: 1 1 0 !important;
	height: 3px !important;
	border-radius: 3px !important;
	background: var( --tps-track-color ) !important;
	overflow: hidden !important;
	margin: 0 !important;
	padding: 0 !important;
}

.tps-fill {
	display: block !important;
	height: 100% !important;
	width: 0%;
	background: var( --tps-fill-color ) !important;
	border-radius: 3px !important;
}

/* هدر (عنوان محصول + دکمه‌ی بستن) */

.tps-viewer-header {
	position: absolute;
	top: 22px;
	left: 10px;
	right: 10px;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.tps-viewer-title {
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	text-shadow: 0 1px 3px rgba( 0, 0, 0, 0.5 );
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tps-viewer-actions {
	flex: 0 0 auto;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}

/* !important روی این چند ویژگی عمدی است: دکمه‌ی بستن یک <button> ساده است و
   در بسیاری از قالب‌ها/افزونه‌های صفحه‌ساز (مثلاً استایل‌های سراسریِ button در
   تم یا JetElements/JetPopup) با اولویتِ بالاتر بازنویسی می‌شود؛ همان الگوی
   دفاعی که در CSS افزونه‌ی استوری اینستاگرامیِ اصلی هم برای چنین عناصری استفاده
   شده است. */
.tps-viewer-close {
	all: unset;
	box-sizing: border-box !important;
	flex: 0 0 auto !important;
	width: 32px !important;
	height: 32px !important;
	border: none !important;
	border-radius: 50% !important;
	background: var( --tps-close-bg ) !important;
	color: var( --tps-close-color ) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1 !important;
}

.tps-viewer-close svg {
	width: 16px !important;
	height: 16px !important;
	stroke: currentColor !important;
	fill: none !important;
	pointer-events: none;
}

/* دکمه‌ی لایک: باید کاملاً بدون پس‌زمینه/باکس باشد (فقط خودِ قلبِ SVG دیده شود).
   علاوه بر all: unset، چون بعضی قالب‌ها روی خودِ تگ button یک background/border-radius
   را با !important تحمیل می‌کنند (که با all: unsetِ بدون !important خنثی نمی‌شود)،
   اینجا صراحتاً و با !important هم پس‌زمینه/حاشیه/سایه صفر می‌شود تا در هیچ قالبی
   دورِ قلب، دایره یا جعبه‌ی رنگی دیده نشود. */
.tps-like-btn {
	all: unset;
	box-sizing: border-box !important;
	flex: 0 0 auto !important;
	width: 32px !important;
	height: 32px !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	padding: 0 !important;
	margin: 0 !important;
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var( --tps-like-color ) !important;
}

.tps-like-btn svg {
	width: 22px !important;
	height: 22px !important;
	pointer-events: none;
}

.tps-like-btn .tps-like-icon-filled {
	display: none !important;
}

.tps-like-btn.is-liked {
	color: var( --tps-like-active-color ) !important;
}

.tps-like-btn.is-liked .tps-like-icon-outline {
	display: none !important;
}

.tps-like-btn.is-liked .tps-like-icon-filled {
	display: block !important;
	animation: tps-like-pop 0.25s ease;
}

@keyframes tps-like-pop {
	0% {
		transform: scale( 0.6 );
	}
	60% {
		transform: scale( 1.25 );
	}
	100% {
		transform: scale( 1 );
	}
}

/* اسلایدها */

.tps-slides {
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	height: 100%;
	background: var( --tps-frame-bg );
}

.tps-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.tps-slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.tps-slide-inner {
	width: 100%;
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
}

/* اطمینان از این‌که محتوای المنتورِ داخل هر اسلاید، کل فضای کادر استوری را
   کامل پر می‌کند و به عرض/محدودیت‌های پیش‌فرض «Boxed» صفحات معمولی محدود
   نمی‌شود (کادر و پس‌زمینه‌ی بیرونی را خودِ همین ویجت می‌سازد؛ قالب المنتور فقط
   باید محتوای داخلی - عکس/عنوان/قیمت/دکمه - را در همین فضا بچیند). */
.tps-slide-inner > .elementor {
	width: 100%;
	min-height: 100%;
	display: flex;
	flex-direction: column;
}

.tps-slide-inner .elementor-section-wrap,
.tps-slide-inner > .elementor > .elementor-section,
.tps-slide-inner .elementor-container {
	max-width: 100% !important;
	width: 100%;
}

/* ریست تدافعیِ «عنوان محصول»: در بسیاری از قالب‌های وردپرسی، تمِ سایت روی
   کلاس‌های عمومیِ h1.product_title / .entry-title یک position: absolute (یا
   fixed) و/یا یک order در فلکس/گرید مخصوصِ چیدمانِ صفحه‌ی تک‌محصولِ خودِ تم
   تعریف کرده (مثلاً برای گذاشتنِ عنوان روی بنر یا اول از همه‌ی خلاصه‌ی محصول)
   — این استایل به «صفحه‌ی تک‌محصول واقعی» محدود نیست و چون کلاسِ h1.product_title
   عمومی است، همان قانون تم داخل کادرِ استوری هم اجرا می‌شود و عنوان را از
   جای طراحی‌شده در قالب المنتور بیرون می‌کشد و به بالای کادر می‌چسباند — نه
   ویجتِ عنوانِ خودِ المنتور و نه CSS این افزونه چنین کاری می‌کنند؛ منشا آن
   استایلِ سراسریِ قالب/پوسته‌ی سایت است (دقیقاً همان نوع تداخلی که برای دکمه‌ی
   بستن هم قبلاً دیده شد). چون هدف این است که عنوان دقیقاً همان‌جایی نمایش داده
   شود که در قالب المنتور چیده شده، فقط خواصِ «موقعیت‌دهی» ریست می‌شود، نه
   فاصله‌گذاری/تایپوگرافیِ طراحیِ خودِ قالب. */
.tps-slide-inner .product_title,
.tps-slide-inner h1.product_title,
.tps-slide-inner .entry-title,
.tps-slide-inner .elementor-widget-woocommerce-product-title,
.tps-slide-inner .elementor-widget-woocommerce-product-title .product_title,
.tps-slide-inner .elementor-widget-theme-post-title,
.tps-slide-inner .elementor-widget-theme-post-title .elementor-heading-title {
	position: static !important;
	inset: auto !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	transform: none !important;
	order: 0 !important;
	float: none !important;
	z-index: auto !important;
	width: auto;
}

/* علتِ واقعیِ «عنوان محصول اصلاً نمایش داده نمی‌شود» (نه جابه‌جایی، بلکه مخفی‌شدنِ
   کامل): وقتی گزینه‌ی «Hide Title» در تنظیمات یک قالب/صفحه‌ی المنتور روشن باشد،
   المنتور یک متغیرِ CSS سراسری با مقدار var(--page-title-display: none) در
   :root همان صفحه تزریق می‌کند تا عنوانِ پیش‌فرضِ تمِ سایت (که کلاسش معمولاً
   .entry-title است) را مخفی کند. چون ویجتِ «عنوان محصول ووکامرس» هم دقیقاً
   همان کلاسِ h1.product_title.entry-title را دارد (و کلاسِ elementor-page-title
   می‌گیرد)، همین متغیرِ سراسری—even اگر مالِ یک قالبِ دیگر یا خودِ صفحه‌ی
   میزبانِ شورت‌کد/ویجت باشد—عنوانِ داخلِ استوری را هم با display:none مخفی
   می‌کند؛ نه المنتور و نه این افزونه عمداً چنین کاری نمی‌کنند. این مقدار را
   فقط داخل کادر استوری، مستقل از هر چیزی که در بقیه‌ی صفحه ست شده، همیشه به
   «نمایش داده شود» برمی‌گردانیم. */
.tps-slide-inner {
	--page-title-display: block !important;
}

.tps-slide-inner .elementor-page-title,
.tps-slide-inner .product_title,
.tps-slide-inner h1.product_title,
.tps-slide-inner .entry-title {
	display: block !important;
}

/* مناطق کلیک برای جابه‌جایی بین استوری‌ها. مطابق رفتار واقعی اینستاگرام، این نواحی
   بر اساس موقعیت فیزیکی صفحه ثابت‌اند (سمت راستِ تصویر = استوری بعدی) و مستقل از
   جهت متن سایت (RTL/LTR) عمل می‌کنند. */

.tps-zone {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 32%;
	z-index: 4;
	cursor: pointer;
}

.tps-zone-prev {
	left: 0;
}

.tps-zone-next {
	right: 0;
}

body.tps-noscroll {
	overflow: hidden;
}