/* سنجمان — اسلایدر نظرات مشتریان | v3.9.1
   حرکت با transform انجام می‌شود، نه scroll:
   هم از ناسازگاری scrollLeft در RTL خلاص می‌شویم، هم از مشکل شناخته‌شدهٔ
   اسکرول نرم که روی این نوع تراک اصلاً حرکت نمی‌کند. */

.sjm-tc {
	--sjm-per: 3;
	--sjm-gap: 30px;
	--sjm-arrow: 26px;
	--sjm-dot: 8px;
	--sjm-dot-active: 28px;
	--sjm-clamp: 8;
	--sjm-bleed: 26px;
	/* بلیدِ افقی نصفِ عمودی است و هیچ‌وقت از فاصلهٔ بین کارت‌ها بیشتر نمی‌شود،
	   وگرنه لبهٔ کارت بعدی از گوشه بیرون می‌زند. */
	--sjm-bleed-x: min(calc(var(--sjm-bleed) * 0.7), var(--sjm-gap));
	width: 100%;
}

.sjm-tc-stage {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* overflow:hidden لازم است تا اسلایدهای کناری پنهان بمانند، ولی سایهٔ کارت را هم
   می‌بُرد. راه‌حل: به viewport فضا (padding) می‌دهیم — چون مرز برش، جعبهٔ padding
   است نه content — و همان اندازه margin منفی می‌گذاریم تا چیدمان اطراف تکان نخورد.
   بلیدِ افقی هیچ‌وقت از فاصلهٔ بین کارت‌ها بیشتر نمی‌شود، وگرنه لبهٔ کارت بعدی
   از گوشه بیرون می‌زند. */
.sjm-tc-viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	touch-action: pan-y;
	padding: var(--sjm-bleed) var(--sjm-bleed-x);
	margin-block: calc(var(--sjm-bleed) * -1);
}

/* فلش‌ها کنار اسلایدر: بلیدِ افقی با margin منفی جبران می‌شود و همان اندازه به
   فاصلهٔ فلش تا کارت اضافه می‌شود، پس عرض کارت‌ها دقیقاً همان قبلی می‌ماند. */
.sjm-tc-arrows-side .sjm-tc-viewport {
	margin-inline: calc(var(--sjm-bleed-x) * -1);
}

.sjm-tc-arrows-side .sjm-tc-stage {
	gap: calc(8px + var(--sjm-bleed-x));
}

/* فلش‌ها روی اسلایدر: کل عرض ظرف به کارت‌ها می‌رسد (حدود ۷۰ پیکسل عریض‌تر). */
.sjm-tc-arrows-over .sjm-tc-stage {
	gap: 0;
}

.sjm-tc-arrows-over .sjm-tc-arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	transform: translateY(-50%);
	width: calc(var(--sjm-arrow) + 20px);
	height: calc(var(--sjm-arrow) + 20px);
	background: #fff;
	box-shadow: 0 2px 12px rgba(38, 55, 66, .14);
}

.sjm-tc-arrows-over .sjm-tc-prev { inset-inline-start: 0; }
.sjm-tc-arrows-over .sjm-tc-next { inset-inline-end: 0; }

.sjm-tc-arrows-over .sjm-tc-arrow svg {
	width: 58%;
	height: 58%;
}

.sjm-tc-track {
	--sjm-speed: 500ms;
	display: flex;
	gap: var(--sjm-gap);
	will-change: transform;
	transition: transform var(--sjm-speed) cubic-bezier(.22, .61, .36, 1);
}

.sjm-tc-track.is-instant {
	transition: none;
}

.sjm-tc-slide {
	flex: 0 0 calc((100% - (var(--sjm-per) - 1) * var(--sjm-gap)) / var(--sjm-per));
	min-width: 0;
	display: flex;
}

/* --------------------------------------------------------------- کارت */

.sjm-tc-card {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 16px;
	padding: 30px;
	transition: background-color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.sjm-tc-card-lift-yes .sjm-tc-card:hover {
	transform: translateY(-4px);
}

/* ------------------------------------------------------- نشان امتیاز */

.sjm-tc-top {
	display: flex;
	justify-content: flex-start;
	margin-bottom: 22px;
}

.sjm-tc-badge {
	display: inline-block;
	max-width: 100%;
	padding: 7px 16px;
	border-radius: 999px;
	background: #E4F3EE;
	color: #0E8B75;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.7;
}

/* --------------------------------------------------------- متن نظر */

.sjm-tc-quote {
	/* عمداً کشیده نمی‌شود. اگر flex:1 بگیرد، جعبه از ارتفاعِ خطوطِ clamp‌شده
	   بلندتر می‌شود و مرورگر خط بعدی را هم رندر می‌کند — نتیجه «سه‌نقطه در انتهای
	   خط هشتم و یک خط نهم زیرش» است. فضای خالی را بلوک پایین می‌گیرد. */
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
	border: 0;
	quotes: none;
	font-size: 15px;
	font-weight: 400;
	line-height: 2.1em;
	color: #37474F;
	text-align: justify;
	white-space: pre-line;
}

.sjm-tc:not(.sjm-tc--noclamp) .sjm-tc-quote {
	display: -webkit-box;
	-webkit-line-clamp: var(--sjm-clamp);
	line-clamp: var(--sjm-clamp);
	-webkit-box-orient: vertical;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* بلوک پایین: فضای خالی کارت را این می‌گیرد، پس هم پاورقی به کف می‌چسبد و
   هم متن نظر دقیقاً به اندازهٔ خطوطش می‌ماند. */
.sjm-tc-bottom {
	flex: 0 0 auto;
	margin-top: auto;
	/* حداقل فاصله تا متن، برای کارتی که اصلاً فضای خالی ندارد. */
	padding-top: 14px;
}

/* قاب لینک روی همهٔ کارت‌ها هست، حتی وقتی لینکش پنهان است؛ JS ارتفاعش را
   یکسان می‌کند تا خط جداکننده در کارت‌های بدون لینک پایین‌تر نیفتد. */
.sjm-tc-morewrap {
	flex: 0 0 auto;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	min-height: var(--sjm-more-h, 0px);
}

/* ------------------------------------------------------- خط جداکننده */

.sjm-tc-sep {
	flex: 0 0 auto;
	height: 1px;
	margin: 22px 0;
	background: #EDEDED;
}

/* ---------------------------------------------------------- پاورقی */

.sjm-tc-foot {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 14px;
	/* JS بلندترین پاورقی را پیدا می‌کند و اینجا می‌گذارد، تا اسم یا سمتِ
	   دوخطی جای خط جداکننده را در آن کارت جابه‌جا نکند. */
	min-height: var(--sjm-foot-h, 0px);
}

.sjm-tc-avatar {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
}

.sjm-tc-meta {
	flex: 1 1 auto;
	min-width: 0;
}

.sjm-tc-name {
	font-size: 19px;
	font-weight: 700;
	line-height: 1.6;
	color: #37474F;
}

.sjm-tc-job {
	font-size: 13px;
	font-weight: 400;
	line-height: 1.7;
	color: #8A9AA3;
}

/* --------------------------------------------------------------- فلش */

.sjm-tc-arrow {
	flex: 0 0 auto;
	width: var(--sjm-arrow);
	height: var(--sjm-arrow);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: #7A7A7A;
	cursor: pointer;
	transition: opacity .2s ease, color .2s ease;
}

.sjm-tc-arrow:hover {
	opacity: .65;
}

.sjm-tc-arrow:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.sjm-tc-arrow[disabled] {
	opacity: .3;
	cursor: default;
}

[dir="rtl"] .sjm-tc-prev svg,
[dir="rtl"] .sjm-tc-next svg {
	transform: scaleX(-1);
}

/* -------------------------------------------------------------- نقطه */

.sjm-tc-dots {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 20px;
}

/* نقطهٔ فعال به یک قرص کشیده تبدیل می‌شود؛ بقیه دایرهٔ کوچک می‌مانند. */
.sjm-tc-dot {
	width: var(--sjm-dot);
	height: var(--sjm-dot);
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: #D9D9D9;
	cursor: pointer;
	transition: width .25s ease, background-color .25s ease;
}

.sjm-tc-dot[aria-current="true"] {
	width: var(--sjm-dot-active);
	background: #0E8B75;
}

.sjm-tc-dot:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

.sjm-tc-empty {
	margin: 0;
	opacity: .7;
}

@media (prefers-reduced-motion: reduce) {
	.sjm-tc-track,
	.sjm-tc-card,
	.sjm-tc-dot {
		transition: none;
	}
	.sjm-tc-card-lift-yes .sjm-tc-card:hover {
		transform: none;
	}
}

/* ------------------------------------------------------- لینک متن کامل */

.sjm-tc-more {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.8;
	color: #0E8B75;
	text-decoration: none;
	transition: opacity .2s ease;
}

.sjm-tc-more:hover {
	text-decoration: underline;
}

.sjm-tc-more-i {
	transition: transform .2s ease;
}

.sjm-tc-more:hover .sjm-tc-more-i {
	transform: translateX(-3px);
}

@media (prefers-reduced-motion: reduce) {
	.sjm-tc-more-i {
		transition: none;
	}
	.sjm-tc-more:hover .sjm-tc-more-i {
		transform: none;
	}
}

/* ‼ همان دلیل دیوار لوگو: هر عنصری که display دارد، `[hidden]` را خنثی می‌کند.
   لینک «متن کامل»، نقطه‌ها و فلش‌ها همگی از JS با hidden کنترل می‌شوند. */
.sjm-tc [hidden],
.sjm-tc [hidden] {
	display: none !important;
}