/* ==========================================================================
   TSVST Audio Explore V3
   Desktop: سه کارت، کارت وسط فعال، کناری‌ها محو، اسکرول با Wheel
   Mobile: یک کارت عمودی، بدون هدر افزونه
   ========================================================================== */

.tsvst-audio-explore {
	--tae-primary: #6d52eb;
	--tae-blue: #168fc3;
	--tae-cyan: #18b8c8;
	--tae-page-bg: #e7eaf0;
	--tae-panel-bg: #eef0f4;
	--tae-panel-soft: #e9ecf1;
	--tae-border: #d4d9e2;
	--tae-text: #293043;
	--tae-muted: #70798b;
	--tae-shadow: 0 16px 38px rgba(31, 39, 68, .09);

	position: relative;

	width: 100%;
	max-width: 1170px;

	margin: 28px auto 0;

	color: var(--tae-text);
	direction: rtl;
}

.tsvst-audio-explore,
.tsvst-audio-explore * {
	box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   عنوان دسکتاپ؛ بدون خروج از عرض container قالب
   -------------------------------------------------------------------------- */

.tsvst-audio-explore-hero {
	position: relative;

	display: flex;
	width: 100%;
	min-height: 92px;

	align-items: center;
	justify-content: space-between;
	gap: 16px;

	margin: 0 0 16px;
	padding: 15px 18px;

	overflow: hidden;

	border: 1px solid var(--tae-border);
	border-radius: 7px;

	background:
		radial-gradient(circle at left top, rgba(24, 184, 200, .08), transparent 34%),
		linear-gradient(135deg, #ffffff, #f8f7ff);

	box-shadow: var(--tae-shadow);
}

.tsvst-audio-explore-hero::before {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;

	height: 3px;

	content: "";

	background: linear-gradient(
		90deg,
		var(--tae-primary),
		var(--tae-blue),
		var(--tae-cyan)
	);
}

.tsvst-audio-explore-hero-heading {
	display: flex;
	min-width: 0;

	align-items: center;
	gap: 12px;
}

.tsvst-audio-explore-hero-icon {
	display: inline-flex;
	flex: 0 0 48px;

	width: 48px;
	height: 48px;

	align-items: center;
	justify-content: center;

	border: 1px solid rgba(109, 82, 235, .13);
	border-radius: 7px;

	color: #6551c5;
	background: linear-gradient(135deg, #efecff, #e8f7fb);

	font-size: 18px;
}

.tsvst-audio-explore-kicker {
	display: block;

	margin-bottom: 1px;

	color: #6551c5;

	font-size: 9px;
	font-weight: 900;
}

.tsvst-audio-explore-hero h1 {
	margin: 0 0 2px !important;

	color: var(--tae-text);

	font-size: 18px !important;
	font-weight: 950 !important;
	line-height: 1.55 !important;
}

.tsvst-audio-explore-hero p {
	margin: 0 !important;

	color: var(--tae-muted);

	font-size: 10px !important;
	font-weight: 650 !important;
	line-height: 1.9 !important;
}

.tsvst-audio-explore-total {
	display: flex;
	flex: 0 0 auto;

	min-width: 84px;
	min-height: 52px;

	align-items: center;
	justify-content: center;
	flex-direction: column;

	padding: 7px 12px;

	border: 1px solid #ded9fa;
	border-radius: 7px;

	color: #6551c5;
	background: #f5f3fc;
}

.tsvst-audio-explore-total strong {
	font-size: 16px;
	font-weight: 950;
}

.tsvst-audio-explore-total span {
	color: #8077a8;

	font-size: 8px;
	font-weight: 800;
}

.tsvst-audio-explore-hero,
.tsvst-audio-explore-help {
	display: none !important;
}

/* --------------------------------------------------------------------------
   بدنه دسکتاپ
   -------------------------------------------------------------------------- */

.tsvst-audio-explore-viewport {
	position: relative;

	width: 100%;
	height: 660px;

	overflow: hidden;

	padding: 18px;

	border: 1px solid var(--tae-border);
	border-radius: 7px;

	background:
		radial-gradient(circle at center top, rgba(109, 82, 235, .055), transparent 38%),
		linear-gradient(180deg, #eceef2 0%, var(--tae-page-bg) 100%);

	box-shadow: var(--tae-shadow);

	direction: ltr;
	scroll-behavior: smooth;
	scrollbar-width: none;
	overscroll-behavior: contain;
	touch-action: pan-y;
}

.tsvst-audio-explore-viewport::-webkit-scrollbar {
	display: none;
}

.tsvst-audio-explore-feed {
	display: flex;
	width: max-content;
	min-width: 100%;
	height: 100%;

	align-items: center;
	gap: 18px;

	padding: 0;

	direction: ltr;
}

/* --------------------------------------------------------------------------
   کارت دمو
   -------------------------------------------------------------------------- */

.tsvst-audio-reel {
	position: relative;

	display: block;
	flex: 0 0 calc((100vw - 96px) / 3);

	width: calc((100vw - 96px) / 3);
	max-width: 366px;
	height: 620px;
	min-width: 0;

	overflow: hidden;

	border: 1px solid rgba(41, 48, 67, .13);
	border-radius: 18px;

	color: #ffffff;
	background: #151c28;

	box-shadow: 0 13px 28px rgba(31, 39, 68, .13);

	direction: rtl;

	transition:
		opacity .28s ease,
		filter .28s ease,
		transform .28s ease,
		border-color .28s ease,
		box-shadow .28s ease;
}


.tsvst-audio-reel-surface {
	position: absolute;
	inset: 0;
	z-index: 1;

	overflow: hidden;

	border-radius: inherit;

	background: #151c28;
}

/*
 * دسکتاپ:
 * کارت‌های غیر فعال قابل کلیک یا پخش نیستند.
 */
@media (min-width: 992px) {
	.tsvst-audio-reel {
		flex-basis: calc((100% - 36px) / 3);
		width: calc((100% - 36px) / 3);
		max-width: none;

		/*
		 * خود کارت باز می‌ماند تا Blur سطح داخلی از مرز کارت بیرون بزند.
		 */
		overflow: visible;

		border-color: transparent;
		background: transparent;
		box-shadow: none;

		pointer-events: auto;
		transform: none;
	}

	.tsvst-audio-reel-surface {
		border: 1px solid rgba(41, 48, 67, .13);
		border-radius: 18px;

		background: #151c28;
		box-shadow: 0 13px 28px rgba(31, 39, 68, .13);

		transition:
			opacity .30s ease,
			filter .30s ease,
			transform .30s ease,
			border-color .30s ease,
			box-shadow .30s ease;

		will-change: opacity, filter, transform;
	}

	/*
	 * Blur روی کل سطح تصویری اعمال می‌شود و به دلیل باز بودن والد،
	 * چند پیکسل بیرون از مرز کارت پخش می‌شود؛ مشابه نسخه‌های قبلی.
	 */
	.tsvst-audio-reel:not(.is-active) .tsvst-audio-reel-surface {
		opacity: .40;

		filter:
			blur(9px)
			saturate(.58)
			brightness(.86);

		transform: scale(.93);

		box-shadow:
			0 18px 34px rgba(31, 39, 68, .13),
			0 0 28px rgba(109, 82, 235, .08);
	}

	.tsvst-audio-reel:not(.is-active) .tsvst-audio-reel-surface::after {
		position: absolute;
		inset: 0;
		z-index: 30;

		content: "";

		background: rgba(247, 249, 253, .16);

		pointer-events: none;
	}

	.tsvst-audio-reel.is-active {
		z-index: 3;
	}

	.tsvst-audio-reel.is-active .tsvst-audio-reel-surface {
		opacity: 1;

		filter: none;
		transform: scale(1);

		border-color: rgba(109, 82, 235, .72);

		box-shadow:
			0 0 0 2px rgba(109, 82, 235, .10),
			0 20px 40px rgba(31, 39, 68, .19);
	}

	.tsvst-audio-reel.is-active .tsvst-audio-reel-surface::after {
		display: none;
	}

	.tsvst-audio-reel:not(.is-active) button:not(.tsvst-audio-side-nav),
	.tsvst-audio-reel:not(.is-active) a,
	.tsvst-audio-reel:not(.is-active) input {
		pointer-events: none !important;
	}
}

.tsvst-audio-reel-cover,
.tsvst-audio-reel-image,
.tsvst-audio-reel-cover-shade {
	position: absolute;
	inset: 0;

	width: 100%;
	height: 100%;
}

.tsvst-audio-reel-cover {
	background: linear-gradient(135deg, #e9e7f6, #e3f2f6);
}

.tsvst-audio-reel-image {
	display: block;

	object-fit: cover;

	-webkit-user-drag: none;
	user-select: none;
	pointer-events: none;
}

.tsvst-audio-reel,
.tsvst-audio-reel-surface,
.tsvst-audio-reel-cover {
	-webkit-user-select: none;
	user-select: none;
}

.tsvst-audio-reel-cover-shade {
	background:
		linear-gradient(
			to top,
			rgba(7, 9, 16, .95) 0%,
			rgba(7, 9, 16, .76) 26%,
			rgba(7, 9, 16, .27) 50%,
			rgba(7, 9, 16, .08) 72%,
			rgba(7, 9, 16, .25) 100%
		);

	pointer-events: none;
}

.tsvst-audio-reel-category,
.tsvst-audio-reel-play-count {
	position: absolute;
	top: 14px;
	z-index: 4;

	display: inline-flex;
	min-height: 31px;

	align-items: center;
	gap: 5px;

	padding: 6px 9px;

	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 16px;

	color: #ffffff;
	background: rgba(10, 14, 22, .38);

	backdrop-filter: blur(10px);

	font-size: 8.5px;
	font-weight: 900;
}

.tsvst-audio-reel-category {
	right: 14px;
}

.tsvst-audio-reel-play-count {
	left: 14px;
}

/* دکمه اصلی کوچک و بالاتر از عنوان */
.tsvst-audio-reel-center-play {
	position: absolute;
	top: 37%;
	left: 50%;
	z-index: 5;

	display: inline-flex;

	width: 44px;
	height: 44px;

	align-items: center;
	justify-content: center;

	padding: 0;

	border: 1px solid rgba(255, 255, 255, .34);
	border-radius: 50%;

	color: #ffffff;
	background: rgba(8, 11, 18, .43);

	backdrop-filter: blur(10px);
	box-shadow: 0 10px 21px rgba(0, 0, 0, .20);

	font-size: 13px;
	cursor: pointer;

	transform: translate(-50%, -50%);
}

.tsvst-audio-reel.is-playing .tsvst-audio-reel-center-play {
	background: linear-gradient(
		135deg,
		rgba(109, 82, 235, .95),
		rgba(22, 143, 195, .95)
	);
}

/* --------------------------------------------------------------------------
   اطلاعات روی کاور
   -------------------------------------------------------------------------- */

.tsvst-audio-reel-content {
	position: absolute;
	inset: 0;
	z-index: 3;

	display: flex;

	justify-content: flex-end;
	flex-direction: column;
	gap: 9px;

	padding: 15px;

	pointer-events: none;
}

.tsvst-audio-reel-content > * {
	pointer-events: auto;
}

.tsvst-audio-reel-heading {
	display: flex;
	min-width: 0;

	align-items: flex-end;
	justify-content: space-between;
	gap: 9px;
}

.tsvst-audio-reel-heading > div {
	min-width: 0;
}

.tsvst-audio-reel-demo-title {
	display: none !important;
}

.tsvst-audio-reel h2 {
	display: -webkit-box;
	overflow: hidden;

	margin: 0 !important;

	color: #ffffff !important;

	font-size: 15px !important;
	font-weight: 950 !important;
	line-height: 1.85 !important;

	text-shadow: 0 3px 14px rgba(0, 0, 0, .28);

	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.tsvst-audio-reel-excerpt {
	display: -webkit-box;
	overflow: hidden;

	margin: 0 !important;

	color: rgba(244, 247, 255, .84) !important;

	font-size: 9.5px !important;
	font-weight: 650 !important;
	line-height: 2 !important;

	text-shadow: 0 2px 9px rgba(0, 0, 0, .25);

	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.tsvst-audio-reel-share,
.tsvst-audio-reel-mute,
.tsvst-audio-reel-nav button {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	padding: 0;

	border: 1px solid rgba(255, 255, 255, .17);
	border-radius: 50%;

	color: #ffffff;
	background: rgba(8, 12, 19, .40);

	backdrop-filter: blur(10px);
	box-shadow: 0 8px 17px rgba(0, 0, 0, .16);

	cursor: pointer;
}

.tsvst-audio-reel-share {
	flex: 0 0 34px;

	width: 34px;
	height: 34px;
}

/* --------------------------------------------------------------------------
   پلیر
   -------------------------------------------------------------------------- */

.tsvst-audio-reel-player {
	display: grid;

	grid-template-columns: 28px minmax(0, 1fr);
	grid-template-areas: "mute timeline";
	align-items: center;
	gap: 7px;

	padding: 6px 7px;

	border: 1px solid rgba(255, 255, 255, .13);
	border-radius: 14px;

	background: rgba(9, 13, 21, .48);

	backdrop-filter: blur(12px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);

	direction: ltr;
}

/* دکمه پخش پایین حذف شده؛ پخش فقط با دکمه مرکزی انجام می‌شود. */
.tsvst-audio-reel-play {
	display: none !important;
}

.tsvst-audio-reel-mute {
	grid-area: mute;

	width: 28px;
	height: 28px;

	font-size: 9px;
}

.tsvst-audio-reel-timeline {
	position: relative;
	grid-area: timeline;

	min-width: 0;

	direction: ltr;
}

.tsvst-audio-reel-bars {
	position: relative;

	display: grid;
	height: 15px;

	grid-template-columns: repeat(120, minmax(0, 1fr));
	align-items: center;
	column-gap: 1px;

	overflow: hidden;

	direction: ltr;
}

.tsvst-audio-reel-bars span {
	display: block;

	width: 100%;
	min-width: 0;
	height: var(--bar-height);

	border-radius: 999px;

	/*
	 * درصد رنگ هر ستون جداگانه با JavaScript تنظیم می‌شود؛
	 * بنابراین پیشرفت فقط داخل خود شکل موج دیده می‌شود.
	 */
	background:
		linear-gradient(
			90deg,
			#7659f1 0%,
			#20b9c5 var(--bar-fill, 0%),
			rgba(255, 255, 255, .18) var(--bar-fill, 0%),
			rgba(255, 255, 255, .18) 100%
		);
}

/* پوشش مستطیلی قدیمی حذف شده تا رنگ از شکل موج بیرون نزند. */
.tsvst-audio-reel-bars::after {
	display: none !important;
	content: none !important;
}

.tsvst-audio-reel-progress {
	position: absolute;
	inset: 0;
	z-index: 3;

	width: 100%;
	height: 15px;

	margin: 0;

	opacity: 0;
	cursor: pointer;

	direction: ltr !important;
	touch-action: none;
}

.tsvst-audio-reel-time-row {
	display: flex;

	align-items: center;
	justify-content: space-between;

	margin-top: 2px;

	color: rgba(255, 255, 255, .68);

	font-size: 6.8px;
	font-weight: 800;

	direction: ltr;
}

.tsvst-audio-reel-actions {
	display: flex;

	align-items: flex-end;
	justify-content: space-between;
	gap: 8px;
}

.tsvst-audio-reel-view {
	display: flex !important;
	flex: 1 1 auto;

	min-height: 42px;

	align-items: center;
	justify-content: space-between;
	gap: 8px;

	padding: 7px 10px;

	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 13px;

	color: #ffffff !important;
	background: linear-gradient(
		135deg,
		rgba(109, 82, 235, .26),
		rgba(22, 143, 195, .20)
	);

	backdrop-filter: blur(11px);
}

.tsvst-audio-reel-view span {
	display: flex;
	min-width: 0;

	flex-direction: column;
}

.tsvst-audio-reel-view strong {
	font-size: 9.5px;
	font-weight: 950;
}

.tsvst-audio-reel-view small {
	color: rgba(255, 255, 255, .70);

	font-size: 7.5px;
	font-weight: 700;
}

.tsvst-audio-reel-view > i {
	font-size: 11px;
}

/* روی دسکتاپ جابه‌جایی اصلی با Wheel انجام می‌شود. */
.tsvst-audio-reel-nav {
	display: none;
}


/* --------------------------------------------------------------------------
   فلش روی کارت قبلی و بعدی در دسکتاپ
   -------------------------------------------------------------------------- */

.tsvst-audio-side-nav {
	display: none;
}

@media (min-width: 992px) {
	.tsvst-audio-reel.is-prev .tsvst-audio-side-nav,
	.tsvst-audio-reel.is-next .tsvst-audio-side-nav {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 80;

		display: inline-flex;

		/*
		 * محدوده کلیک بزرگ است، ولی هیچ باکس یا زمینه‌ای دیده نمی‌شود.
		 */
		width: 70px;
		height: 70px;

		align-items: center;
		justify-content: center;

		padding: 0;

		border: 0;
		border-radius: 0;

		color: #ffffff;
		background: transparent;

		box-shadow: none;
		outline: 0;

		font-size: 39px;
		line-height: 1;

		cursor: pointer;

		pointer-events: auto !important;
		transform: translate(-50%, -50%);

		transition:
			transform .18s ease,
			opacity .18s ease;
	}

	.tsvst-audio-reel.is-prev .tsvst-audio-side-nav i,
	.tsvst-audio-reel.is-next .tsvst-audio-side-nav i {
		color: #ffffff;

		font-size: 39px;
		line-height: 1;

		text-shadow:
			0 2px 4px rgba(0, 0, 0, .85),
			0 0 12px rgba(0, 0, 0, .65),
			0 0 2px rgba(255, 255, 255, .55);

		filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .45));
	}

	.tsvst-audio-reel.is-prev .tsvst-audio-side-nav:hover,
	.tsvst-audio-reel.is-next .tsvst-audio-side-nav:hover {
		background: transparent;
		box-shadow: none;

		transform: translate(-50%, -50%) scale(1.16);
	}

	.tsvst-audio-reel.is-prev .tsvst-audio-side-nav,
	.tsvst-audio-reel.is-next .tsvst-audio-side-nav {
		visibility: visible;
		opacity: 1;
	}

	.tsvst-audio-reel:not(.is-prev):not(.is-next) .tsvst-audio-side-nav,
	.tsvst-audio-reel.is-active .tsvst-audio-side-nav {
		display: none !important;
	}

	.tsvst-audio-reel.is-prev .tsvst-audio-side-nav,
	.tsvst-audio-reel.is-next .tsvst-audio-side-nav,
	.tsvst-audio-reel.is-prev .tsvst-audio-side-nav *,
	.tsvst-audio-reel.is-next .tsvst-audio-side-nav * {
		pointer-events: auto !important;
	}
}


/* کشیدن افقی با ماوس در دسکتاپ */
@media (min-width: 992px) {
	.tsvst-audio-explore-viewport {
		cursor: grab;
		user-select: none;
	}

	.tsvst-audio-explore-viewport.is-dragging {
		cursor: grabbing;
	}

	.tsvst-audio-explore-viewport.is-dragging .tsvst-audio-reel {
		transition: none !important;
	}

	.tsvst-audio-explore-viewport.is-dragging,
	.tsvst-audio-explore-viewport.is-dragging * {
		user-select: none !important;
	}
}

/* --------------------------------------------------------------------------
   Loading / Toast
   -------------------------------------------------------------------------- */

.tsvst-audio-explore-loading {
	position: absolute;
	inset: 0;
	z-index: 10;

	display: flex;

	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 10px;

	padding: 20px;

	color: #687184;
	background: rgba(248, 249, 253, .92);

	backdrop-filter: blur(7px);
	text-align: center;
}

.tsvst-audio-explore-loading[hidden] {
	display: none !important;
}

.tsvst-audio-explore-loading p {
	margin: 0 !important;

	font-size: 10px !important;
	font-weight: 800 !important;
}

.tsvst-audio-explore-spinner {
	width: 36px;
	height: 36px;

	border: 3px solid #ded9fa;
	border-top-color: var(--tae-primary);
	border-radius: 50%;

	animation: tsvst-audio-spin .8s linear infinite;
}

@keyframes tsvst-audio-spin {
	to {
		transform: rotate(360deg);
	}
}

.tsvst-audio-explore-toast {
	position: sticky;
	bottom: 14px;
	z-index: 12;

	display: block;

	width: max-content;
	max-width: calc(100% - 30px);

	margin: 0 auto;
	padding: 8px 12px;

	border-radius: 15px;

	color: #ffffff;
	background: rgba(34, 40, 58, .92);

	box-shadow: 0 8px 18px rgba(31, 39, 68, .18);

	font-size: 8.5px;
	font-weight: 800;

	opacity: 0;
	pointer-events: none;

	transform: translateY(8px);
	transition: opacity .18s ease, transform .18s ease;
}

.tsvst-audio-explore-toast.is-visible {
	opacity: 1;
	transform: translateY(0);
}


/* --------------------------------------------------------------------------
   کارت فعال: بدون هیچ فیلتر معکوس یا نگاتیو
   فقط یک لایه تیره بسیار ملایم برای خوانایی نوشته‌ها
   -------------------------------------------------------------------------- */

.tsvst-audio-reel.is-active .tsvst-audio-reel-surface,
.tsvst-audio-reel.is-active .tsvst-audio-reel-cover,
.tsvst-audio-reel.is-active .tsvst-audio-reel-image,
.tsvst-audio-reel.is-active .tsvst-audio-reel-content {
	filter: none !important;
}

.tsvst-audio-reel.is-active .tsvst-audio-reel-image {
	opacity: .90;
}

.tsvst-audio-reel.is-active .tsvst-audio-reel-cover-shade {
	background:
		linear-gradient(
			to top,
			rgba(7, 9, 16, .94) 0%,
			rgba(7, 9, 16, .72) 25%,
			rgba(7, 9, 16, .24) 52%,
			rgba(7, 9, 16, .08) 73%,
			rgba(7, 9, 16, .22) 100%
		);
}

/* --------------------------------------------------------------------------
   دارک مود سایت
   -------------------------------------------------------------------------- */

html.wp-dark-mode-active .tsvst-audio-explore,
body.wp-dark-mode-active .tsvst-audio-explore,
html.dark-mode .tsvst-audio-explore,
body.dark-mode .tsvst-audio-explore,
html.dark .tsvst-audio-explore,
body.dark .tsvst-audio-explore,
html[data-theme="dark"] .tsvst-audio-explore,
body[data-theme="dark"] .tsvst-audio-explore,
[data-wp-dark-mode-active="true"] .tsvst-audio-explore {
	--tae-page-bg: #0f141e;
	--tae-panel-bg: #151b27;
	--tae-panel-soft: #111722;
	--tae-border: rgba(255, 255, 255, .10);
	--tae-text: #f2f5fb;
	--tae-muted: #abb3c2;
	--tae-shadow: 0 18px 42px rgba(0, 0, 0, .22);
}

html.wp-dark-mode-active .tsvst-audio-explore-hero,
body.wp-dark-mode-active .tsvst-audio-explore-hero,
html.dark-mode .tsvst-audio-explore-hero,
body.dark-mode .tsvst-audio-explore-hero,
html.dark .tsvst-audio-explore-hero,
body.dark .tsvst-audio-explore-hero,
html[data-theme="dark"] .tsvst-audio-explore-hero,
body[data-theme="dark"] .tsvst-audio-explore-hero,
[data-wp-dark-mode-active="true"] .tsvst-audio-explore-hero {
	background:
		radial-gradient(circle at left top, rgba(24, 184, 200, .10), transparent 35%),
		linear-gradient(135deg, #171d29, #101620);
}

html.wp-dark-mode-active .tsvst-audio-explore-total,
body.wp-dark-mode-active .tsvst-audio-explore-total,
html.dark-mode .tsvst-audio-explore-total,
body.dark-mode .tsvst-audio-explore-total,
html.dark .tsvst-audio-explore-total,
body.dark .tsvst-audio-explore-total,
html[data-theme="dark"] .tsvst-audio-explore-total,
body[data-theme="dark"] .tsvst-audio-explore-total,
[data-wp-dark-mode-active="true"] .tsvst-audio-explore-total {
	color: #d9d3ff;
	border-color: rgba(255, 255, 255, .10);
	background: rgba(255, 255, 255, .06);
}

html.wp-dark-mode-active .tsvst-audio-explore-total span,
body.wp-dark-mode-active .tsvst-audio-explore-total span,
html.dark-mode .tsvst-audio-explore-total span,
body.dark-mode .tsvst-audio-explore-total span,
html.dark .tsvst-audio-explore-total span,
body.dark .tsvst-audio-explore-total span,
html[data-theme="dark"] .tsvst-audio-explore-total span,
body[data-theme="dark"] .tsvst-audio-explore-total span,
[data-wp-dark-mode-active="true"] .tsvst-audio-explore-total span {
	color: #aeb5c4;
}

html.wp-dark-mode-active .tsvst-audio-explore-loading,
body.wp-dark-mode-active .tsvst-audio-explore-loading,
html.dark-mode .tsvst-audio-explore-loading,
body.dark-mode .tsvst-audio-explore-loading,
html.dark .tsvst-audio-explore-loading,
body.dark .tsvst-audio-explore-loading,
html[data-theme="dark"] .tsvst-audio-explore-loading,
body[data-theme="dark"] .tsvst-audio-explore-loading,
[data-wp-dark-mode-active="true"] .tsvst-audio-explore-loading {
	color: #dbe0ea;
	background: rgba(15, 20, 30, .92);
}

/* --------------------------------------------------------------------------
   موبایل و تبلت: یک کارت عمودی
   -------------------------------------------------------------------------- */

@media (max-width: 991px) {
	body.tsvst-audio-explore-page .post-title,
	body.tsvst-audio-explore-page .entry-title,
	body.tsvst-audio-explore-page .page-title {
		display: none !important;
	}

	.tsvst-audio-explore {
		width: calc(100% - 28px);
		max-width: 390px;

		margin: 18px auto 30px;
	}

	.tsvst-audio-explore-hero {
		display: none !important;
	}

	.tsvst-audio-explore-viewport {
		width: 100%;
		height: min(620px, 72svh);
		min-height: 460px;

		overflow-x: hidden;
		overflow-y: auto;

		padding: 8px;

		border-radius: 7px;

		direction: rtl;
		scroll-padding-top: 8px;
		scroll-snap-type: y mandatory;
		scrollbar-width: none;
		overscroll-behavior-y: auto;
		touch-action: pan-y;
	}

	.tsvst-audio-explore-viewport::-webkit-scrollbar {
		display: none;
	}

	.tsvst-audio-explore-feed {
		display: grid;

		grid-auto-flow: row;
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;

		width: 100%;
		min-width: 0;
		height: auto;
		min-height: 0;

		direction: rtl;
	}

	.tsvst-audio-reel {
		width: 100%;
		max-width: none;
		height: calc(min(620px, 72svh) - 16px);
		min-height: 440px;

		flex: none;

		border-radius: 7px;

		opacity: 1;
		filter: none;
		pointer-events: auto;
		transform: none;

		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	.tsvst-audio-reel::after {
		display: none !important;
	}

	.tsvst-audio-reel-center-play {
		top: 38%;

		width: 44px;
		height: 44px;

		font-size: 13px;
	}

	.tsvst-audio-reel-content {
		gap: 9px;
		padding: 13px;
	}

	.tsvst-audio-reel h2 {
		font-size: 16px !important;
		line-height: 1.85 !important;
	}

	.tsvst-audio-reel-excerpt {
		font-size: 10.5px !important;
		-webkit-line-clamp: 2;
	}

	.tsvst-audio-reel-player {
		grid-template-columns: 26px minmax(0, 1fr);
		grid-template-areas: "mute timeline";
		gap: 6px;
		padding: 5px 6px;
	}

	.tsvst-audio-reel-mute {
		width: 26px;
		height: 26px;
	}

	.tsvst-audio-reel-bars,
	.tsvst-audio-reel-progress {
		height: 12px;
	}

	.tsvst-audio-reel-view {
		min-height: 42px;
	}

	.tsvst-audio-side-nav {
		display: none !important;
	}

	.tsvst-audio-reel-nav {
		display: grid;
		grid-template-columns: 30px;
		gap: 5px;
	}

	.tsvst-audio-reel-nav button {
		width: 30px;
		height: 30px;
		min-height: 30px;

		font-size: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.tsvst-audio-reel,
	.tsvst-audio-explore-spinner,
	.tsvst-audio-explore-toast {
		animation: none !important;
		transition: none !important;
	}
}