/* ==========================================================================
   قالب سلامت — استایل ویجت‌های المنتور
   ========================================================================== */

/* ------------------------------------------------------- سربرگ سکشن
   نوار ۱۳۲۰×۴۹ · padding-bottom 12 · خط زیرین 1px #EDEDED               */

.sl-shead {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	min-height: 49px;
	padding-block-end: 12px;
	border-block-end: 1px solid var(--sl-border);
}

.sl-shead--flat { border-block-end: 0; padding-block-end: 0; }

/*
 * طرح از چپ به راست: عنوان سپس نشان ۳۶ — یعنی نشان در لبه راست و لبه
 * راست عنوان ۴۴ داخل ستون (۳۶ نشان + ۸ فاصله). صفحه RTL است، پس
 * row-reverse لازم است وگرنه نشان به چپ عنوان می‌افتد.
 */
.sl-shead__start {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 8px;
	height: 36px;
}

.sl-shead__title {
	margin: 0;
	color: var(--sl-ink);
	font-size: 20px;
	font-weight: 800;
	line-height: 24px;
	letter-spacing: -.4px;
	white-space: nowrap;
}

.sl-shead__badge {
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	color: var(--sl-teal);
	font-size: 36px;
}

.sl-shead__badge svg { width: 36px; height: 36px; }

/*
 * حالت دوم سربرگ، مطابق طرحِ پنل پزشکان برتر: یک خط ریز بالای عنوان
 * («کیلینیک برتر هفته») و به‌جای آیکون، نشان مرکز درمانی در جعبه ۶۰×۶۰.
 * ارتفاع ثابت ۳۶ ظرف اینجا کم می‌آید، پس آزاد می‌شود.
 */
.sl-shead__titles {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.sl-shead__eyebrow {
	color: var(--sl-muted, #828282);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

/* وقتی سربرگ خط ریز دارد، عنوان نام یک مرکز است نه تیتر بخش؛ طرح آن را
   ۱۶/۶۰۰ می‌گذارد، نه ۲۰/۸۰۰ِ تیترهای بخش. */
.sl-shead__titles:has(.sl-shead__eyebrow) .sl-shead__title {
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -.32px;
}

.sl-shead__start:has(.sl-shead__eyebrow),
.sl-shead__start:has(.sl-shead__badge--img) { height: auto; }

.sl-shead__badge--img {
	width: 60px;
	height: 60px;
	overflow: hidden;
	border: 1px solid var(--sl-line, #F3F3F3);
	border-radius: 12px;
	background: #fff;
}

.sl-shead__badge--img img { width: 100%; height: 100%; object-fit: contain; }

/* طرح از چپ به راست: فلش ۲۰ سپس متن — پس در RTL باید row-reverse باشد. */
.sl-shead__more {
	display: inline-flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: center;
	gap: 4px;
	height: 24px;
	color: var(--sl-teal);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	white-space: nowrap;
}

.sl-shead__more .sl-i,
.sl-shead__more svg {
	flex: none;
	width: 20px;
	height: 20px;
	font-size: 20px;
}

.sl-shead__more:hover { color: var(--sl-teal-600); }

@media (max-width: 560px) {
	.sl-shead__title { font-size: 17px; white-space: normal; }
	.sl-shead__badge { display: none; }
}

/* ---------------------------------------------------------- کارت تخصص
   بلند: ۲۰۰×۱۷۴ · padding 43.5/12 · گردی ۱۶
   نواری: ارتفاع ۷۵ · padding 12 · ردیف با gap 12                        */

.sl-spec {
	display: flex;
	background: #fff;
	border: 1px solid var(--sl-border);
	border-radius: 16px;
	box-sizing: border-box;
	transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.sl-spec:hover {
	border-color: var(--sl-teal);
	transform: translateY(-2px);
}

.sl-spec.is-active {
	background: rgba(230, 243, 242, .35);
	border-color: var(--sl-teal);
}

.sl-spec.is-active .sl-spec__title { font-weight: 600; }

.sl-spec__media {
	display: grid;
	place-items: center;
	flex: none;
	width: 48px;
	height: 49px;
	color: var(--sl-teal);
	font-size: 40px;
}

.sl-spec__media img {
	display: block;
	width: 48px;
	height: 49px;
	object-fit: contain;
}

.sl-spec__title {
	color: var(--sl-ink);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: -.32px;
}

/* حالت بلند */
.sl-spec--tall {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	height: 174px;
	padding: 43.5px 12px;
}

.sl-spec--tall .sl-spec__title { text-align: center; }

/* حالت نواری */
.sl-spec--bar {
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	width: 100%;
	height: 75px;
	padding: 12px;
}

.sl-spec--bar .sl-spec__title {
	flex: 1;
	min-width: 0;
	text-align: right;
}

@media (max-width: 767px) {
	.sl-spec--tall { height: auto; padding: 20px 12px; }
}

}

/* ------------------------------------------------------------ آمار */

.sl-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	color: inherit;
}

.sl-stat__icon { display: inline-flex; font-size: 24px; line-height: 1; }
.sl-stat__value { font-size: 32px; font-weight: 800; line-height: 44px; letter-spacing: -.02em; color: var(--sl-teal, #00897B); }
.sl-stat__label { font-size: 14px; line-height: 20px; color: var(--sl-muted, #828282); }

/* ------------------------------------------- کارت ارزش‌ها (درباره ما) */

/*
 * کارت‌های «ارزش‌هایی که به آن پایبندیم» مطابق دموی فیگما: کارت سفید
 * با حاشیه ملایم، آیکون داخل مربع گردگوشه سبز کم‌رنگ، متن راست‌چین.
 */
.sl-value-card {
	flex: 1 1 0;
	min-width: 0;
	background: #fff;
	/*
	 * حاشیه‌ی #F3F3F3 روی زمینه‌ی سفید صفحه دیده نمی‌شد و کارت‌ها بی‌مرز
	 * به نظر می‌رسیدند؛ خاکستری کمی تیره‌تر به‌علاوه سایه‌ی ملایم، لبه را
	 * مشخص می‌کند بدون اینکه طرح سنگین شود.
	 */
	border: 1px solid #E4E8EC;
	border-radius: 20px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
	padding: 28px 24px;
	text-align: right;
}

.sl-value-card .elementor-icon-box-icon { margin-bottom: 16px; }

.sl-value-card .elementor-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-inline: auto; /* rtl-ok: دو طرف قرینه‌اند — وسط‌چین کردن است */
	width: 56px;
	height: 56px;
	border-radius: 16px;
	background: #E6F3F2;
	color: var(--sl-teal, #00897B);
	font-size: 26px;
}

.sl-value-card .elementor-icon svg { width: 26px; height: 26px; fill: currentColor; }

.sl-value-card .elementor-icon-box-title {
	margin: 0 0 8px;
	color: var(--sl-ink, #040404);
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
}

.sl-value-card .elementor-icon-box-description {
	color: var(--sl-muted, #828282);
	font-size: 14px;
	line-height: 24px;
}

@media (max-width: 900px) {
	.sl-value-card { flex: 1 1 40%; }
}

/* -------------------------------------------------------- نوار جستجو */

/*
 * ظاهر «پهن»: نوار ۱۳۲۰×۶۴ با حاشیه‌ی روشن و سایه‌ی نرم — همان نواری که
 * در طرح صفحه‌های مشاوره و سوالات بالای محتوا می‌نشیند. تفاوتش با ظاهر
 * روشن فقط عرض، ارتفاع و وزن حاشیه است، پس روی همان پایه سوار می‌شود.
 */
.sl-searchbar--wide {
	max-width: none;
	min-height: 64px;
	gap: 16px;
	justify-content: flex-start;
	border-width: 2px;
	border-color: var(--sl-line, #F3F3F3);
	box-shadow: 0 8px 32px rgba(0, 0, 0, .04);
	cursor: text;
}

/*
 * ورودی به اندازه‌ی متن خودش است تا جداکننده و «نوع مشاوره» کنارش
 * بایستند و در لبه‌ی راست جمع شوند؛ فاصله‌ی خالی بین این گروه و دکمه
 * می‌ماند، مثل طرح.
 */
.sl-searchbar--wide .sl-searchbar__input {
	flex: none;
	field-sizing: content;
	width: auto;
	min-width: 12ch;
	max-width: 100%;
	order: 4; /* ظرف row-reverse است: مبدأ محور چپ است، پس ۴ یعنی راست‌ترین */
}

.sl-searchbar--wide .sl-searchbar__sep {
	order: 3;
	height: 32px;
	background: var(--sl-line, #F3F3F3);
	opacity: 1;
}

.sl-searchbar--wide .sl-searchbar__city {
	order: 2;
	max-width: none;
	padding-inline-start: 0;
}

.sl-searchbar--wide .sl-searchbar__city-input {
	field-sizing: content;
	width: auto;
	min-width: 8ch;
}

.sl-searchbar--wide .sl-searchbar__submit {
	order: 1;
	margin-inline-start: auto; /* rtl-ok: فضای خالی سمت راستِ دکمه جمع می‌شود */
	min-height: 52px;
	padding-inline: 40px;
}

@media (max-width: 720px) {
	.sl-searchbar--wide { flex-wrap: wrap; min-height: 0; padding: 12px; border-radius: var(--sl-r-md); }
	.sl-searchbar--wide .sl-searchbar__input { flex: 1 1 100%; field-sizing: fixed; }
	.sl-searchbar--wide .sl-searchbar__submit { flex: 1 1 100%; margin-inline-end: 0; }
}

.sl-searchbar--glass {
	background: rgba(255, 255, 255, .15);
	border-color: rgba(255, 255, 255, .3);
	box-shadow: 0 0 30px rgba(255, 255, 255, .08);
	backdrop-filter: blur(10px);
	color: #fff;
}

.sl-searchbar--glass .sl-searchbar__input,
.sl-searchbar--glass .sl-searchbar__city-input { color: #fff; }

.sl-searchbar--glass .sl-searchbar__input::placeholder,
.sl-searchbar--glass .sl-searchbar__city-input::placeholder { color: rgba(255, 255, 255, .85); }

.sl-searchbar__sep {
	flex: none;
	width: 1px;
	height: 40px;
	background: linear-gradient(180deg, transparent, currentColor 50%, transparent);
	opacity: .25;
}

.sl-searchbar__city {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: none;
	max-width: 160px;
	padding-inline-start: 12px;
}

.sl-searchbar__city-input {
	width: 100%;
	min-width: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 14px;
	color: inherit;
	outline: none;
	text-align: end;
}

@media (max-width: 560px) {
	.sl-searchbar { flex-wrap: wrap; border-radius: var(--sl-r-md); padding: 8px; }
	.sl-searchbar__sep { display: none; }
	.sl-searchbar__city { max-width: none; width: 100%; padding-inline: 12px; }
	.sl-searchbar__submit { width: 100%; order: 10; }
}

/* ------------------------------------------------------- کارت پزشک
   کارت ۳۱۲×۳۰۴ · padding 16 · گردی ۲۰ · gap 16                          */

.sl-doc {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 16px;
	width: 100%;
	height: 304px;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--sl-border);
	border-radius: 20px;
	box-sizing: border-box;
	transition: border-color .18s ease, box-shadow .18s ease;

	/* چیدمان طرح روی بوم افقی چیده شده؛ ساختار LTR می‌ماند و
	   فقط متن‌ها راست‌به‌چپ می‌شوند تا آینه نشود. */
	direction: ltr;
}

.sl-doc__name,
.sl-doc__spec,
.sl-doc__addresstext,
.sl-doc__city,
.sl-doc__rowvalue,
.sl-doc__rowlabel,
.sl-doc__btntext {
	direction: rtl;
}

.sl-doc:hover {
	border-color: var(--sl-teal-200);
	box-shadow: var(--sl-shadow-sm);
}

/* نشان امتیاز — گوشه بالا-چپ، ۵۲×۲۰ */
.sl-doc__rating {
	position: absolute;
	top: 13px;
	left: 13px;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 2px;
	height: 20px;
	padding: 4px 10px;
	background: #fff9e6;
	border-radius: 30px;
	box-sizing: border-box;
	color: var(--sl-star);
	font-size: 12px;
	line-height: 12px;
}

.sl-doc__rating svg { width: 12px; height: 12px; }
.sl-doc__ratingnum { direction: ltr; unicode-bidi: isolate; }

/* ردیف نام و عکس — ۲۷۸×۷۰ */
.sl-doc__head {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	align-self: stretch;
	height: 70px;
}

.sl-doc__id {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	justify-content: center;
	gap: 8px;
	flex: 0 1 auto;
	min-width: 0;
	height: 52px;
}

.sl-doc__name {
	margin: 0;
	align-self: stretch;
	color: var(--sl-ink);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -.32px;
	text-align: right;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sl-doc__spec {
	margin: 0;
	align-self: stretch;
	color: var(--sl-muted);
	/* طرح: ۱۶ پیکسل — پیش‌تر ۱۴ بود و با بقیه‌ی کارت هم‌خوان نبود. */
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: -.28px;
	text-align: right;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sl-doc__photo {
	position: relative;
	display: block;
	flex: none;
	width: 70px;
	height: 70px;
	background-color: var(--sl-bg-soft);
	background-size: cover;
	background-position: center;
	border: 1px solid var(--sl-border);
	border-radius: 37.5px;
	box-sizing: border-box;
}

.sl-doc__dot {
	position: absolute;
	bottom: 2px;
	left: 4px;
	width: 10px;
	height: 10px;
	background: var(--sl-teal);
	border-radius: 50%;
}

/* ردیف نشانی — ۲۷۸×۲۰ */
.sl-doc__address {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	align-self: stretch;
	height: 20px;
}

.sl-doc__addresstext {
	flex: 1;
	min-width: 0;
	color: #000;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: -.28px;
	text-align: right;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sl-doc__city {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 2px;
	flex: none;
	height: 12px;
	color: var(--sl-ink);
	font-size: 12px;
	font-weight: 700;
	line-height: 12px;
	white-space: nowrap;
}

.sl-doc__city .sl-i,
.sl-doc__city svg {
	flex: none;
	width: 12px;
	height: 12px;
	font-size: 12px;
	color: var(--sl-teal);
}

/* خط جداکننده نامرئی طرح — فقط فاصله را نگه می‌دارد */
.sl-doc__rule {
	align-self: stretch;
	height: 1px;
	background: var(--sl-line);
}

/* ردیف‌های نوبت — ۲۷۸×۵۲ با فاصله ۱۲ */
.sl-doc__rows {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 12px;
	align-self: stretch;
}

.sl-doc__row {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	align-self: stretch;
	height: 20px;
}

.sl-doc__rowvalue,
.sl-doc__rowlabel {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: -.28px;
	white-space: nowrap;
}

.sl-doc__rowvalue { color: var(--sl-ink); }
.sl-doc__rowlabel { color: var(--sl-muted); }

/* دکمه — ۲۷۸×۴۸ */
.sl-doc__btn {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	align-self: stretch;
	height: 48px;
	margin-top: auto;
	padding: 12px 32px;
	background: var(--sl-teal);
	border-radius: 100px;
	box-sizing: border-box;
	color: #fff;
	transition: background-color .18s ease;
}

.sl-doc__btn:hover { background: var(--sl-teal-600); color: #fff; }

.sl-doc__btnicon {
	display: inline-flex;
	flex: none;
	width: 20px;
	height: 20px;
	font-size: 20px;
}

.sl-doc__btnicon svg { width: 20px; height: 20px; }

.sl-doc__btntext {
	padding-inline: 8px;
	/* طرح: ۱۴ پیکسل */
	font-size: 14px;
	font-weight: 600;
	line-height: 24px;
	text-align: center;
}

@media (max-width: 560px) {
	.sl-doc__btn { padding-inline: 20px; }
	.sl-doc__rowvalue,
	.sl-doc__rowlabel { font-size: 13px; }
}

/* --- حالت فشرده کارت پزشک — ۲۲۲×۲۴۵
   عکس (۷۴,۱۷) ۷۵×۷۵ · نام و تخصص (۱۷,۱۰۸) وسط‌چین · دکمه (۲۶,۱۸۰) ۱۷۰×۴۸ */

.sl-doc--compact {
	align-items: center;
	gap: 16px;
	height: 245px;
	padding: 16px;
}

.sl-doc--compact .sl-doc__photo {
	width: 75px;
	height: 75px;
	border-radius: 100px;
}

.sl-doc--compact .sl-doc__id {
	align-items: center;
	justify-content: flex-start;
	align-self: stretch;
	gap: 8px;
	height: auto;
	flex: none;
}

.sl-doc--compact .sl-doc__name,
.sl-doc--compact .sl-doc__spec { text-align: center; }

.sl-doc--compact .sl-doc__spec {
	color: var(--sl-muted);
	font-size: 16px;
	line-height: 24px;
	letter-spacing: normal;
}

.sl-doc--compact .sl-doc__btn {
	align-self: center;
	width: 170px;
	height: 48px;
	padding: 14px 32px;
	background: transparent;
	border: 1px solid var(--sl-teal);
	color: var(--sl-teal);
	justify-content: center;
}

.sl-doc--compact .sl-doc__btn:hover { background: var(--sl-teal); color: #fff; }
.sl-doc--compact .sl-doc__btntext { font-size: 14px; line-height: 20px; }
.sl-doc--compact .sl-doc__btnicon svg { width: 20px; height: 20px; }

@media (max-width: 560px) {
	.sl-doc--compact { height: auto; }
	.sl-doc--compact .sl-doc__btn { width: 100%; }
}

/* ------------------------------------------------------ کارت کلینیک
   کارت ۳۱۲×۳۵۹ · padding 32/16 · گردی ۲۰ · gap 16 · وسط‌چین             */

.sl-clinic {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
	height: 359px;
	padding: 32px 16px;
	background: #fff;
	border: 1px solid var(--sl-border);
	border-radius: 20px;
	box-sizing: border-box;
	direction: ltr;
	transition: border-color .18s ease, box-shadow .18s ease;
}

.sl-clinic:hover {
	border-color: var(--sl-teal-200);
	box-shadow: var(--sl-shadow-sm);
}

/* لوگو ۷۵×۷۵ */
.sl-clinic__logo {
	display: block;
	flex: none;
	width: 75px;
	height: 75px;
	background-color: #fff;
	background-size: cover;
	background-position: center;
	border: 2px solid var(--sl-border);
	border-radius: 100px;
	box-sizing: border-box;
}

/* نام و توضیح */
.sl-clinic__id {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-self: stretch;
	direction: rtl;
	text-align: center;
}

.sl-clinic__name {
	margin: 0;
	color: var(--sl-ink);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sl-clinic__excerpt {
	margin: 0;
	color: var(--sl-muted);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ردیف پزشکان — متن چپ، آواتارهای هم‌پوشان راست */
.sl-clinic__doctors {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	height: 30px;
}

.sl-clinic__doctorstext {
	direction: rtl;
	color: var(--sl-muted);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	white-space: nowrap;
}

.sl-clinic__avatars {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.sl-clinic__avatar {
	display: block;
	width: 30px;
	height: 30px;
	background-color: var(--sl-bg-soft);
	background-size: cover;
	background-position: center;
	border: 1px solid #fff;
	border-radius: 50%;
	box-sizing: border-box;
}

.sl-clinic__avatar + .sl-clinic__avatar { margin-inline-start: -15px; }

/* نشان‌های امتیاز و شهر */
.sl-clinic__badges {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 12px;
	align-self: stretch;
	height: 20px;
}

.sl-clinic__badge {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 2px;
	height: 20px;
	padding: 4px 10px;
	border-radius: 30px;
	box-sizing: border-box;
	font-size: 12px;
	font-weight: 400;
	line-height: 12px;
	white-space: nowrap;
}

.sl-clinic__badge svg,
.sl-clinic__badge .sl-i { width: 12px; height: 12px; font-size: 12px; }

.sl-clinic__badge--rating { background: #fff9e6; color: var(--sl-star); }
.sl-clinic__badge--city { background: var(--sl-teal-soft); color: var(--sl-teal); }
.sl-clinic__badge--city span { direction: rtl; }

/* دکمه خطی ۲۷۸×۴۸ */
.sl-clinic__btn {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	align-self: stretch;
	height: 48px;
	margin-top: auto;
	padding: 12px 32px;
	border: 1px solid var(--sl-teal);
	border-radius: 100px;
	box-sizing: border-box;
	color: var(--sl-teal);
	transition: background-color .18s ease, color .18s ease;
}

.sl-clinic__btn:hover { background: var(--sl-teal); color: #fff; }

.sl-clinic__btnicon {
	display: inline-flex;
	flex: none;
	width: 20px;
	height: 20px;
	font-size: 20px;
}

.sl-clinic__btnicon svg { width: 20px; height: 20px; }

.sl-clinic__btntext {
	direction: rtl;
	padding-inline: 8px;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
}

@media (max-width: 560px) {
	.sl-clinic { height: auto; }
	.sl-clinic__name,
	.sl-clinic__excerpt { white-space: normal; }
}

/* --------------------------------------------------------- کارت شهر
   کارت ۲۰۱×۱۵۴ · padding 12 · گردی ۱۲ · gap 12                          */

.sl-city {
	--sl-city-accent: var(--sl-teal);
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	height: 154px;
	padding: 12px;
	background: rgba(230, 243, 242, .1);
	border: 1px solid var(--sl-city-accent);
	border-radius: 12px;
	box-sizing: border-box;
	direction: ltr;
	transition: background-color .18s ease, box-shadow .18s ease;
}

/*
 * شبکه‌ی شهرها (شورت‌کد salamat_cities). چون تعداد شهرها از دیتابیس
 * می‌آید و ثابت نیست، خود شبکه می‌شکند — نه با چهار ویجتِ دستی در هر ردیف.
 */
.sl-citygrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
}

@media (max-width: 991px) {
	.sl-citygrid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
	.sl-citygrid { grid-template-columns: 1fr; gap: 16px; }
}

.sl-city:hover {
	background: rgba(230, 243, 242, .55);
	box-shadow: var(--sl-shadow-sm);
}

/* سر کارت — ۱۷۵×۳۶ */
.sl-city__head {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 11px;
	align-self: stretch;
	height: 36px;
}

.sl-city__name {
	direction: rtl;
	color: var(--sl-ink);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.sl-city__badge {
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	color: var(--sl-city-accent);
	font-size: 36px;
}

.sl-city__badge svg { width: 36px; height: 36px; }

/* خدمات — ۱۷۵×۳۲ */
.sl-city__services {
	direction: rtl;
	align-self: stretch;
	height: 32px;
	overflow: hidden;
	color: var(--sl-muted);
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
}

/* جداکننده محو — ۱۷۵×۱ */
.sl-city__rule {
	align-self: stretch;
	height: 1px;
	background: linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, var(--sl-border) 50%, rgba(0, 0, 0, 0) 100%);
}

/* پایین — آیکون چپ، نشان راست */
.sl-city__foot {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	align-self: stretch;
	height: 24px;
	margin-top: auto;
}

.sl-city__footicon {
	display: inline-flex;
	flex: none;
	width: 16px;
	height: 16px;
	font-size: 16px;
	color: var(--sl-city-accent);
}

.sl-city__footicon svg { width: 16px; height: 16px; }

.sl-city__count {
	direction: rtl;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 24px;
	padding: 4px 12px;
	background: #f7f7f7;
	border-radius: 100px;
	box-sizing: border-box;
	color: var(--sl-ink);
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	white-space: nowrap;
}

@media (max-width: 560px) {
	.sl-city { height: auto; }
	.sl-city__services { height: auto; }
}

/* --------------------------------------------------- بنر اپلیکیشن
   بنر ۱۳۲۰×۴۰۰ · گردی ۲۰ · محتوا (۵۵۸,۸۰) ۶۴۹×۲۴۰                      */

.sl-app {
	position: relative;
	width: 100%;
	height: 400px;
	background: var(--sl-teal);
	border-radius: 20px;
	direction: ltr;
	overflow: hidden;
}

/*
 * بافت پس‌زمینه بنر.
 *
 * تله: خود فایل تصویر یک گُوِه سفید بزرگ است، نه یک بافت کم‌رنگ. در طرح
 * با opacity: .05 و چرخش ۱۸۰ درجه استفاده شده تا فقط یک موج خیلی محو
 * روی سبز دیده شود. اگر بدون این دو خط بگذاریمش، همان لکه سفید تمام‌رنگ
 * روی بنر می‌افتد — همان «حاشیه سفید» که در بنر دیده می‌شد.
 * اعداد از salamat/index.html خط ۴۴۸.
 */
.sl-app__pattern {
	position: absolute;
	top: 0;
	left: 0;
	width: 821px;
	max-width: 100%;
	height: 405px;
	opacity: .05;
	transform: rotate(180deg);
	transform-origin: center;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	pointer-events: none;
}

/* موکاپ موبایل — از لبه پایین بنر بیرون می‌زند (۶۳۷ در بنر ۴۰۰) */
.sl-app__phone {
	position: absolute;
	top: 46px;
	left: 114px;
	width: 310px;
	height: 637px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	pointer-events: none;
}

.sl-app__body {
	position: absolute;
	top: 80px;
	left: 558px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 649px;
	direction: rtl;
	text-align: right;
}

.sl-app__title {
	margin: 0;
	color: #fff;
	font-size: 24px;
	font-weight: 800;
	line-height: 32px;
	letter-spacing: -.48px;
}

.sl-app__text {
	margin: 0;
	height: 112px;
	overflow: hidden;
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	line-height: 28px;
}

/* دکمه‌های فروشگاه — راست‌چین، هرکدام ۱۵۶×۴۸ */
.sl-app__stores {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	gap: 24px;
	height: 48px;
}

.sl-app__store {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	width: 156px;
	height: 48px;
	padding: 8px 8px 8px 24px;
	background: var(--sl-ink);
	border-radius: 12px;
	box-sizing: border-box;
	color: #fff;
	transition: background-color .18s ease, transform .18s ease;
}

.sl-app__store:hover { background: #1a1a1a; color: #fff; transform: translateY(-2px); }

.sl-app__storetext {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
	text-align: right;
}

.sl-app__storetext small {
	color: #fff;
	font-size: 10px;
	font-weight: 400;
	line-height: 16px;
}

.sl-app__storetext strong {
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	white-space: nowrap;
}

.sl-app__storeicon {
	display: grid;
	place-items: center;
	flex: none;
	width: 32px;
	height: 32px;
	color: #fff;
}

.sl-app__storeicon img { width: 32px; height: 32px; object-fit: contain; }

@media (max-width: 1240px) {
	.sl-app__body { left: 42%; width: 55%; }
	.sl-app__phone { left: 60px; }
}

@media (max-width: 1023px) {
	.sl-app { height: auto; padding: 32px 24px; }
	.sl-app__phone,
	.sl-app__pattern { display: none; }
	.sl-app__body { position: static; width: 100%; }
	.sl-app__text { height: auto; }
	.sl-app__stores { flex-wrap: wrap; height: auto; }
}

@media (max-width: 560px) {
	.sl-app__store { width: 100%; }
}

/* ------------------------------------------------------ گرید مقالات
   کارت ۳۱۲×۳۸۰ · گردی ۱۶ · padding 276/20/20 · gap 20                  */

.sl-posts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
}

.sl-post {
	display: flex;
	flex-direction: column;
	gap: 20px;
	height: 380px;
	padding: 276px 20px 20px;
	background-color: var(--sl-ink);
	background-size: cover;
	background-position: center;
	border-radius: 16px;
	box-sizing: border-box;
	direction: ltr;
	overflow: hidden;
	transition: transform .2s ease;
}

.sl-post:hover { transform: translateY(-3px); color: #fff; }

.sl-post__meta {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	height: 16px;
}

.sl-post__date {
	direction: rtl;
	color: #fff;
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
}

.sl-post__icon {
	display: inline-flex;
	flex: none;
	width: 16px;
	height: 16px;
	font-size: 16px;
	color: #fff;
}

.sl-post__icon svg { width: 16px; height: 16px; }

.sl-post__title {
	direction: rtl;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	text-align: right;
}

@media (max-width: 767px) {
	.sl-posts { grid-template-columns: 1fr !important; }
}

/* ------------------------------------------------------ فهرست دسته‌ها
   نوار ۳۱۲×۴۸ · گردی ۱۲ · padding 8/16/8/8                             */

.sl-cats {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.sl-cat {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	height: 48px;
	padding: 8px 16px 8px 8px;
	background: #fff;
	border-radius: 12px;
	box-sizing: border-box;
	direction: ltr;

	/*
	 * سایه در طرح همیشه هست، نه فقط موقع هاور. کارت سفید روی پس‌زمینه سفید
	 * بدون سایه اصلاً دیده نمی‌شود — همان چیزی که با دمو فرق داشت.
	 */
	box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
	transition: box-shadow .18s ease, transform .18s ease;
}

.sl-cat:hover {
	box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
	transform: translateY(-2px);
}

/*
 * المنتور روی همه لینک‌های داخل خودش `box-shadow: none` می‌گذارد و چون
 * `.elementor a` از `.sl-cat` خاص‌تر است، سایه بالا را می‌خورد. نتیجه:
 * روی صفحه اصلی (که با المنتور ساخته شده) کارت‌ها تخت می‌شدند ولی روی
 * صفحه وبلاگ درست بودند. این قاعده با ویژگی برابر و ترتیب بعدی، سایه را
 * برمی‌گرداند.
 */
a.sl-cat { box-shadow: 0 4px 12px rgba(0, 0, 0, .08); }
a.sl-cat:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }

.sl-cat__count {
	display: grid;
	place-items: center;
	flex: none;
	width: 32px;
	height: 32px;
	background: var(--sl-bg-soft);
	border-radius: 100px;
	color: var(--sl-ink);
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: -.24px;
}

.sl-cat__label {
	direction: rtl;
	color: var(--sl-ink);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: -.32px;
	text-align: right;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --------------------------------------------------- باکس تبلیغاتی
   تصویر ۲۹۲×۱۳۰ · آیکون ۴۸ روی لبه · دو دکمه ۴۴                        */

/*
 * ستون تبلیغاتی طرح (مختصات نسبت به کارت ۱۳۲۰):
 *   تصویر ۲۹۲×۱۳۰ در (۲۰,۲۰) گردی ۲۰ · نشان ۴۸ در لبه راست روی ۲۳۲
 *   عنوان (۲۸,۲۱۴) ۲۸۴ · متن (۲۰,۲۵۰) ۲۹۲ · دکمه‌ها (۲۰,۳۴۵) ۱۳۹+۱۴۱
 */
.sl-promo {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 16px;
	width: 100%;
	text-align: right;
}

.sl-promo__media {
	position: relative;
	align-self: stretch;
	height: 130px;
	margin-block-end: 24px;
}

.sl-promo__image {
	display: block;
	width: 100%;
	height: 130px;
	background-color: var(--sl-teal-soft);
	background-size: cover;
	background-position: center;
	border-radius: 20px;
}

/* طرح: نشان ۴۸ روی لبه پایین تصویر، وسط‌چین. */
.sl-promo__icon {
	position: absolute;
	bottom: -24px;
	left: 50%;
	transform: translateX(-50%);
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	background: #fff;
	border-radius: 12px;
	box-shadow: var(--sl-shadow-sm);
	color: var(--sl-teal);
	font-size: 28px;
}

.sl-promo__icon svg { width: 28px; height: 28px; }

/* اندازه‌ها از طرح: عنوان ۱۶/۶۰۰ و توضیح ۱۴ — باکس فقط ۲۹۲ عرض دارد و
   با ۲۰/۸۰۰ عنوان دو خط می‌شد. */
.sl-promo__title {
	margin: 0;
	color: var(--sl-ink);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -.32px;
}

.sl-promo__text {
	margin: 0;
	color: var(--sl-muted);
	font-size: 14px;
	font-weight: 400;
	line-height: 24px;
}

/*
 * طرح: «عضویت» نارنجی در لبه چپ و «اطلاعات بیشتر» سمت راستش.
 * محور را با direction: ltr قفل می‌کنیم تا در هر بستری (پنل بالا یا
 * پنل کلینیک برتر) ترتیب یکی بماند، و جهت متن را روی خود دکمه‌ها
 * برمی‌گردانیم.
 */
.sl-promo__actions {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	align-self: stretch;
	margin-top: auto;
	direction: ltr;
}

.sl-promo__actions > * { direction: rtl; }

/* طرح: دو دکمه تقریباً هم‌عرض که کل ۲۹۲ را پر می‌کنند. */
.sl-promo__actions > * {
	flex: 1 1 0;
	min-width: 0;
	justify-content: center;
}

.sl-promo__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding-inline: 24px;
	border-radius: 100px;
	font-size: 15px;
	font-weight: 600;
	white-space: nowrap;
	transition: background-color .18s ease, color .18s ease;
}

.sl-promo__btn--solid { background: var(--sl-teal); color: #fff; }
.sl-promo__btn--accent { background: var(--sl-orange); color: #fff; }
.sl-promo__btn--accent:hover { background: #ea6a0c; color: #fff; }
.sl-promo__btn--solid:hover { background: var(--sl-teal-600); color: #fff; }

.sl-promo__btn--ghost {
	border: 1px solid var(--sl-teal);
	color: var(--sl-teal);
}

.sl-promo__btn--ghost:hover { background: var(--sl-teal-soft); }

/* -------------------------------------------------------- نظر بیمار
   کارت ۳۱۲×۳۹۳ · padding 16 · گردی ۲۰ · gap 16                          */

.sl-tst {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	width: 100%;
	height: 393px;
	margin: 0;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--sl-border);
	border-radius: 20px;
	box-sizing: border-box;
	direction: ltr;
}

/* نشان امتیاز — گوشه بالا-چپ */
.sl-tst__rating {
	position: absolute;
	top: 22px;
	left: 22px;
	display: inline-flex;
	align-items: center;
	gap: 2px;
	height: 20px;
	padding: 4px 10px;
	background: #fff9e6;
	border-radius: 30px;
	box-sizing: border-box;
	color: var(--sl-star);
	font-size: 12px;
	line-height: 12px;
}

.sl-tst__rating svg { width: 12px; height: 12px; }

/* آواتار ۷۵×۷۵ */
.sl-tst__avatar {
	display: grid;
	place-items: center;
	flex: none;
	width: 75px;
	height: 75px;
	background-color: #fff;
	background-size: cover;
	background-position: center;
	border-radius: 100px;
	overflow: hidden;
	color: var(--sl-border);
}

.sl-tst__avatar svg { width: 75px; height: 75px; }

/* نام و زیرنویس */
.sl-tst__id {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	align-self: stretch;
	direction: rtl;
	text-align: center;
}

.sl-tst__name {
	align-self: stretch;
	color: var(--sl-ink);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
}

.sl-tst__role {
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
}

.sl-tst__role b { color: var(--sl-ink); font-weight: 400; }
.sl-tst__role span { color: var(--sl-muted); }

/* نقل‌قول ۲۷۸×۱۱۲ */
.sl-tst__text {
	direction: rtl;
	align-self: stretch;
	height: 112px;
	margin: 0;
	overflow: hidden;
	color: var(--sl-muted);
	font-size: 16px;
	font-weight: 400;
	line-height: 28px;
	text-align: right;
}

/* پخش پیام صوتی */
.sl-tst__audio {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	width: 158px;
	margin-top: auto;
}

.sl-tst__play {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	padding: 0;
	background: var(--sl-teal-soft);
	border: 0;
	border-radius: 100px;
	color: var(--sl-teal);
	cursor: pointer;
	transition: background-color .18s ease;
}

.sl-tst__play:hover { background: var(--sl-teal-200); }
.sl-tst__play svg { width: 20px; height: 20px; }
.sl-tst__play.is-playing svg { opacity: .5; }

.sl-tst__wave {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	width: 158px;
	height: 40px;
}

.sl-tst__time {
	direction: ltr;
	flex: none;
	color: var(--sl-muted);
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
}

.sl-tst__bars {
	display: block;
	flex: none;
	width: 84px;
	height: 40px;
	color: var(--sl-teal);
}

.sl-tst__bars svg { width: 84px; height: 40px; }

@media (max-width: 560px) {
	.sl-tst { height: auto; }
	.sl-tst__text { height: auto; }
}

/* ------------------------------------------ شبکه ستونی برای کانتینرها

   کانتینر المنتور فلکس است و عرض فرزندان را از محتوا می‌گیرد؛ این کلاس‌ها
   آن را به گرید با ستون‌های هم‌عرض تبدیل می‌کنند. از فیلد «کلاس‌های CSS»
   کانتینر قابل استفاده‌اند.                                              */

.e-con.sl-cols-2,
.e-con.sl-cols-3,
.e-con.sl-cols-4,
.e-con.sl-cols-5,
.e-con.sl-cols-6,
.e-con.sl-cols-auto {
	display: grid;
	align-items: stretch;
}

.e-con.sl-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.e-con.sl-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.e-con.sl-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.e-con.sl-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.e-con.sl-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.e-con.sl-cols-auto { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }

.e-con.sl-cols-2 > .elementor-element,
.e-con.sl-cols-3 > .elementor-element,
.e-con.sl-cols-4 > .elementor-element,
.e-con.sl-cols-5 > .elementor-element,
.e-con.sl-cols-6 > .elementor-element,
.e-con.sl-cols-auto > .elementor-element {
	width: auto;
	max-width: none;
}

/*
 * ردیفی که ترتیب DOM آن در طرح چپ‌به‌راست است (نه راست‌به‌چپ).
 * صفحه RTL است و آن ردیف را آینه می‌کند؛ این کلاس محور را قفل می‌کند و
 * جهت متن فرزندان را برمی‌گرداند. مثال: نوار تخصص‌های صفحه اصلی.
 */
.e-con.sl-ltr,
.e-con.sl-cols-6 { direction: ltr; }

.e-con.sl-ltr > *,
.e-con.sl-cols-6 > * { direction: rtl; }

/* ------------------------------------------- کانتینر به‌شکل اسلایدر
   کلاس sl-slider روی یک کانتینر المنتور آن را افقی و اسکرول‌شونده
   می‌کند؛ slider.js دور آن پوسته می‌کشد و دو فلش می‌سازد. اعداد از
   ردیف تخصص‌های طرح: ستون ۲۰۰ · فاصله ۲۴ · فلش ۴۸ روی لبه ستون.   */

.sl-conslider {
	position: relative;
	width: 100%;
}

.e-con.sl-slider {
	display: flex !important;
	flex-direction: row;

	/* المنتور روی e-flex مقدار wrap می‌گذارد؛ آن‌وقت ستون‌ها به‌جای
	   سرریزشدن به خط بعد می‌روند و اسلایدر بی‌اثر می‌شود. */
	flex-wrap: nowrap !important;
	align-items: stretch;
	gap: 24px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	grid-template-columns: none !important;
}

.e-con.sl-slider::-webkit-scrollbar { display: none; }

.e-con.sl-slider > .elementor-element {
	flex: none;
	width: var(--sl-slide, 200px);
	max-width: none;

	/* المنتور به فرزندان کانتینر margin می‌دهد؛ داخل ریل نباید باشد. */
	margin-block: 0 !important;
}

/* عرض هر اسلاید: پیش‌فرض ۲۰۰ (ستون تخصص)، ۳۱۲ برای کارت پزشک/کلینیک. */
.e-con.sl-slide-312 { --sl-slide: 312px; }

/* ریل داخل پوسته نباید فاصله بالای اضافه بگیرد. */
.sl-conslider > .e-con.sl-slider { margin-block: 0 !important; }

/* کشیدن ریل با ماوس. */
.e-con.sl-slider { cursor: grab; }
.e-con.sl-slider.is-dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.e-con.sl-slider.is-dragging a { pointer-events: none; }

/* نقطه‌های زیر ردیف — طرح: دایره ۸ · نقطه فعال ۲۱×۸ · فاصله ۴ · ۴۰ پایین‌تر */
.sl-dots {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 4px;
	margin-block-start: 40px;
}

.sl-dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 20px;
	background: var(--sl-border, #EDEDED);
	cursor: pointer;
	transition: width .2s ease, background-color .2s ease;
}

.sl-dot:hover { background: var(--sl-muted, #828282); }

.sl-dot.is-active {
	width: 21px;
	background: var(--sl-teal, #00897B);
}

/* فلش‌ها وسط ارتفاع ردیف، مرکزشان روی لبه ستون. */
.sl-conslider .sl-stories__nav {
	inset-block-start: 50%;
	transform: translateY(-50%);
}

/* وقتی نقطه هست، فلش‌ها باید نسبت به خود ریل وسط بمانند نه کل پوسته. */
.sl-conslider:has(.sl-dots) .sl-stories__nav {
	inset-block-start: calc((100% - 40px - 8px) / 2);
}

/* طرح: مرکز دکمه روی لبه ستون است، یعنی نصفش (۲۴) روی کارت اول/آخر. */
.sl-conslider .sl-stories__nav--prev { inset-inline-end: -24px; }
.sl-conslider .sl-stories__nav--next { inset-inline-start: -24px; }

@media (max-width: 1024px) {
	.e-con.sl-slider > .elementor-element { width: var(--sl-slide-sm, 168px); }
	.e-con.sl-slide-312 { --sl-slide-sm: 280px; }
}

@media (max-width: 1024px) {
	.e-con.sl-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.e-con.sl-cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.e-con.sl-cols-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.e-con.sl-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
	.e-con.sl-cols-2,
	.e-con.sl-cols-3,
	.e-con.sl-cols-4 { grid-template-columns: 1fr; }
	.e-con.sl-cols-5,
	.e-con.sl-cols-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.e-con.sl-cols-auto { grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); }
}

/* دو ستون نامساوی — محتوا و تصویر */
.e-con.sl-split { display: flex; }

@media (max-width: 900px) {
	.e-con.sl-split { flex-direction: column; }
	.e-con.sl-split > .elementor-element { width: 100% !important; }
}

/* --------------------------------------------- کمکی برای المنتور */

/* پس‌زمینه موج‌دار مطابق طرح — روی Container با کلاس sl-wave */
.sl-wave {
	position: relative;
	--sl-wave-notch: 100px;
}

.sl-wave > .e-con-inner,
.sl-wave > .elementor-container { position: relative; z-index: 1; }

.sl-empty {
	padding: 32px;
	color: var(--sl-muted);
	text-align: center;
}

/* ================================================== پنل کاروسل کلینیک
   پنل ۱۳۲۰×۳۷۷ سفید گردی ۱۶ — «کیلینیک برتر هفته»
   باکس عضویت (۲۰,۲۰) ۲۹۲ · ناحیه کارت‌ها (۳۳۶,۱۰۸) ۹۶۰×۲۴۵
   سربرگ راست (۱۰۹۲,۲۴) ۲۰۴×۶۰ · لینک چپ (۳۳۶,۴۲)
   دکمه‌های ناوبری ۴۸ در (۳۱۲,۲۰۷) و (۱۲۷۲,۲۰۷)                        */

.sl-featured {
	position: relative;
	width: 100%;
	max-width: 1320px;
	margin-inline: auto;
	padding: 20px;
	background: #fff;
	border: 1px solid var(--sl-border);
	border-radius: 16px;
	box-sizing: border-box;
	direction: ltr;
}

.sl-featured__grid {
	display: grid;
	grid-template-columns: 292px minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

/* ---- ستون راست: باکس عضویت (در RTL اول DOM سمت راست) */
.sl-featured__promo { grid-column: 1; }

/* ---- ستون چپ: سربرگ و کاروسل */
.sl-featured__main {
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.sl-featured__head {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 60px;
}

.sl-featured__clinic {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 12px;
	direction: rtl;
}

.sl-featured__clinictext {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	text-align: right;
}

.sl-featured__kicker {
	color: var(--sl-muted);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	white-space: nowrap;
}

.sl-featured__clinicname {
	margin: 0;
	color: var(--sl-ink);
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	white-space: nowrap;
}

.sl-featured__clinicavatar {
	display: block;
	flex: none;
	width: 60px;
	height: 60px;
	background-color: var(--sl-bg-soft);
	background-size: cover;
	background-position: center;
	border-radius: 100px;
}

.sl-featured__aside {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
}

.sl-featured__rating {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	height: 20px;
	padding: 4px 10px;
	background: #fff9e6;
	border-radius: 30px;
	box-sizing: border-box;
	color: var(--sl-star);
	font-size: 12px;
	line-height: 12px;
}

.sl-featured__rating svg { width: 12px; height: 12px; }

.sl-featured__more {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 4px;
	height: 24px;
	color: var(--sl-teal);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	white-space: nowrap;
	direction: rtl;
}

.sl-featured__more svg,
.sl-featured__more .sl-i { width: 20px; height: 20px; font-size: 20px; }

/* ---- ریل کارت‌ها */
.sl-featured__track {
	display: flex;
	flex-direction: row;
	gap: 24px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	padding-block: 2px;
}

.sl-featured__track::-webkit-scrollbar { display: none; }

.sl-featured__track > * {
	flex: none;
	width: 222px;
	scroll-snap-align: start;
}

/* ---- دکمه‌های ناوبری */
.sl-featured__nav {
	position: absolute;
	top: 227px;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	background: #fff;
	border: 0;
	border-radius: 100px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
	color: var(--sl-teal);
	cursor: pointer;
	transition: box-shadow .18s ease, opacity .18s ease;
}

.sl-featured__nav:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .14); }
.sl-featured__nav[disabled] { opacity: .35; cursor: default; }

.sl-featured__nav--prev { right: -24px; }
.sl-featured__nav--next { left: -24px; }
.sl-featured__nav--next svg { transform: scaleX(-1); }

@media (max-width: 1023px) {
	.sl-featured__grid { grid-template-columns: 1fr; }
	.sl-featured__nav { display: none; }
	.sl-featured__head { height: auto; flex-wrap: wrap; }
}

/* ستون متن باریک — طرح متن معرفی شهرها را در ۵۳۶px وسط‌چین می‌گذارد. */
.e-con.sl-narrow > .elementor-element {
	max-width: 536px !important;
	margin-inline: auto;
}

/*
 * ویجت نوار جستجو داخل ستونی که align-items:center دارد جمع می‌شود و
 * width:100% به عرض محتوا می‌خورد، نه عرض ستون. با کشیدن خود ویجت،
 * نوار تا max-width طرح (۵۳۶) باز می‌شود.
 */
.e-con > .elementor-widget-sl_searchbar {
	align-self: stretch;
	width: 100%;
}

.elementor-widget-sl_searchbar .sl-searchbar { margin-inline: auto; }

/* ============================================ پنل «پزشکان برتر نوین دکتر»
   طرح: کارت ۱۳۲۰×۴۳۲ · باکس عضویت ۲۹۲ در لبه چپ · کارت‌ها ۹۶۰ وسط ·
   نوار سبز ۴۴×۳۸۹ چسبیده به لبه راست، ۲۰ از بالا، گردی ۱۶.       */

/*
 * نوار سبز طرح: ۴۴×(ارتفاع−۴۰) با گردی ۱۶، چسبیده به لبه راست کارت.
 * مهم: بیشترش پشت کارت سفید پنهان است و فقط ۱۰px از لبه بیرون می‌زند.
 * پس روی کانتینر بیرونی کشیده می‌شود و کارت داخلی رویش می‌نشیند.
 */
.sl-toppanel {
	position: relative;
	overflow: visible;
}

.sl-toppanel::after {
	content: "";
	position: absolute;
	top: 20px;
	left: calc(50% + 626px);   /* لبه راست کارت ۱۳۲۰ منهای ۳۴ */
	width: 44px;
	height: calc(100% - 40px);
	border-radius: 16px;
	background: var(--sl-teal, #00897B);
	pointer-events: none;
	z-index: 0;
}

/*
 * کارت سفید باید دقیقاً ۱۳۲۰ باشد. المنتور برای کانتینر boxed پس‌زمینه
 * را روی عنصر بیرونیِ تمام‌عرض می‌گذارد؛ آن را برمی‌داریم و روی عنصر
 * داخلی ۱۳۲۰ می‌نشانیم. وگرنه نوار سبز وسط یک پهنه سفید شناور می‌ماند.
 */
.sl-toppanel {
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
}

.sl-toppanel > .e-con-inner {
	position: relative;
	z-index: 1;
	background: #fff;
	border: 1px solid var(--sl-border, #EDEDED);
	border-radius: 16px;
}

/*
 * طرح از چپ به راست: باکس عضویت، سپس ناحیه پزشکان. صفحه RTL است و
 * ترتیب DOM هم همان است، پس بدون row-reverse باکس به راست می‌افتد.
 * ضمناً ۴۴+۲۰ فاصله برای نوار سبز کنار گذاشته می‌شود.
 */
.e-con.sl-toppanel__row {
	flex-direction: row-reverse;

	/* المنتور wrap می‌گذارد و ستون پزشکان به خط بعد می‌افتد. */
	flex-wrap: nowrap !important;

	/* فیزیکی، نه منطقی — نوار سبز سمت راست است و صفحه RTL.
	   راست ۸۴ = نوار ۴۴ + فاصله ۲۰ + ۲۰ · چپ ۲۰ = تورفتگی باکس عضویت. */
	padding-right: 84px !important;
	padding-left: 20px !important;
}

/* باکس عضویت عرض ثابت ۲۹۲ دارد؛ ناحیه کارت‌ها بقیه را می‌گیرد. */
.e-con.sl-toppanel__row > :first-child {
	flex: 0 0 292px !important;
	width: 292px !important;
}

.e-con.sl-toppanel__row > :last-child {
	flex: 1 1 auto !important;
	width: auto !important;
	min-width: 0;
}

@media (max-width: 1024px) {
	.sl-toppanel::after { display: none; }
	.e-con.sl-toppanel__row { padding-right: 0 !important; padding-left: 0 !important; }
	.e-con.sl-toppanel__row > :first-child { flex: 1 1 auto !important; width: auto !important; }
}

/* --------------------------------------------- حالت پخش نظر صوتی */

.sl-tst__audio[data-sl-player] { cursor: default; }
.sl-tst__audio[data-sl-player] .sl-tst__play { cursor: pointer; }

.sl-tst__audio.is-playing .sl-tst__play { color: var(--sl-orange, #F97316); }

/* موج صوتی به‌اندازه پیشرفت پخش پررنگ می‌شود. */
.sl-tst__audio .sl-tst__bars {
	--sl-progress: 0%;
	position: relative;
}

.sl-tst__audio.is-playing .sl-tst__bars::after {
	content: "";
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: var(--sl-progress, 0%);
	background: currentColor;
	opacity: .18;
	pointer-events: none;
	transition: width .2s linear;
}

/* ==========================================================================
   فرم‌های عمومی برگه‌ها (تماس با ما، عضویت پزشکان)
   ========================================================================== */

.sl-pageform { direction: rtl; }

.sl-pageform__form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 28px;
	background: #fff;
	border: 1px solid var(--sl-border, #EDEDED);
	border-radius: var(--sl-r-lg, 20px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, .04);
}

.sl-pageform__row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 18px;
}

.sl-field { display: flex; flex-direction: column; gap: 8px; }

.sl-field__label {
	color: var(--sl-ink, #040404);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
}

.sl-field__label b { color: var(--sl-orange, #F97316); font-weight: 400; }

/*
 * اندازه‌ها از contact.html: ارتفاع ۵۶، گردی ۱۲، زمینه سفید،
 * قاب #F3F3F3 و قلم ۱۴. پیش‌تر زمینه‌ی خاکستری روشن و قلم ۱۵ بود.
 */
.sl-field input,
.sl-field select,
.sl-field textarea {
	width: 100%;
	height: 56px;
	padding: 0 16px;
	background: #fff;
	border: 1px solid var(--sl-field-line, #949494);
	border-radius: var(--sl-r-sm, 12px);
	color: var(--sl-ink, #040404);
	font: inherit;
	font-size: 14px;
	outline: none;
	transition: border-color .18s ease;
}

.sl-field select { cursor: pointer; }

.sl-field textarea {
	height: 140px;
	min-height: 140px;
	padding: 16px;
	line-height: 24px;
	resize: vertical;
}

.sl-field input:focus,
.sl-field select:focus,
.sl-field textarea:focus { border-color: var(--sl-teal, #00897B); background: #fff; }

.sl-field input::placeholder,
.sl-field textarea::placeholder { color: var(--sl-muted, #828282); }

.sl-check {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	cursor: pointer;
}

.sl-check input { width: 18px; height: 18px; accent-color: var(--sl-teal, #00897B); flex: none; margin: 0; }

.sl-pageform .sl-btn { align-self: flex-start; }   /* rtl-ok: در rtl یعنی راست — ابتدای سطر */

/* دکمه‌ی «ارسال پیام» در طرح ۲۲۰×۴۸ است. */
.sl-pageform__send {
	width: 220px;
	min-height: 48px;
	padding: 0;
}

/*
 * صفحه‌ی تماس: طرح عنوان و توضیح و فرم را داخل یک کارت ۱۳۲۰ می‌گذارد،
 * پس کارتِ داخلیِ خودِ فرم اینجا خنثی می‌شود تا دو قاب تودرتو نشود.
 */
.sl-formcard { min-height: 640px; }   /* ارتفاع کارت در طرح */

/* عنوان ۱۶ و توضیح ۲۴ فاصله تا پایین دارند — مطابق طرح. */
.e-con.sl-formcard > .elementor-widget-heading { margin-block-end: 16px; }
.e-con.sl-formcard > .elementor-widget-text-editor { margin-block-end: 24px; }
.sl-formcard .elementor-widget-text-editor p { margin: 0; }

.sl-formcard .sl-pageform__form {
	gap: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

.sl-formcard .sl-pageform__row {
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-bottom: 20px;
}

/* «متن پیام» تنها فیلدی است که مستقیم فرزند فرم است. */
.sl-formcard .sl-pageform__form > .sl-field { margin-bottom: 24px; }

/* ------------------------------------------- کارت نقشه دفتر مرکزی (تماس)
   طرح: کارت ۱۳۲۰×۳۲۰ با padding ۱۶ و یک قاب نقشه‌ی ۱۰۰٪ با گردی ۱۶.
   پس ارتفاع قاب ۲۸۸ می‌شود. نشانی همین بالا در کارت اطلاعات آمده، پس
   تکرارش اینجا حذف است و دکمه‌های مسیریابی روی خود نقشه می‌نشینند تا
   ارتفاع کارت از ۳۲۰ بیرون نزند. */

.sl-mapcard .sl-geo { position: relative; }
.sl-mapcard .sl-geo__address { display: none; }

/* کارت ۳۲۰ با قاب ۱px و padding ۱۶ → ارتفاع داخلی ۲۸۶. */
.sl-mapcard .sl-geo__frame {
	height: 286px;
	border: 0;
	border-radius: 16px;
	background: var(--sl-teal-soft, #E6F3F2);
}

.sl-mapcard .sl-geo__links {
	position: absolute;
	inset-block-end: 12px;
	inset-inline-start: 12px; /* rtl-ok: در rtl یعنی راست — هم‌راستا با متن کارت */
	gap: 8px;
	margin: 0;
}

.sl-mapcard .sl-geo__btn {
	height: 36px;
	background: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .08);
}

.sl-mapcard .sl-geo__btn--main { background: var(--sl-teal, #00897B); }

/*
 * تله ربات: از دید کاربر و صفحه‌خوان پنهان، ولی برای ربات‌ها یک فیلد
 * معمولی. display:none بعضی ربات‌ها را رد می‌کند، پس پنهانش می‌کنیم.
 *
 * با left:-9999px شروع شد و اشتباه بود: در سندِ راست‌چین، جهتِ سرریز
 * برعکس است و آن منفیِ بزرگ، ده هزار پیکسل اسکرول افقی به کل صفحه اضافه
 * می‌کرد. حالا بدون هیچ جابه‌جایی، فقط بریده می‌شود.
 */
.sl-hp {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

@media (max-width: 640px) {
	.sl-pageform__form { padding: 20px; }
	.sl-pageform__row { grid-template-columns: 1fr; }
	.sl-pageform .sl-btn { align-self: stretch; }
}

/* ------------------------------------------------------ خط زمانی */

/*
 * شبکه دوستونه راست‌به‌چپ: چهار ایستگاه در دو ردیف، نشان سالِ دایره‌ای
 * در آغاز (راست) هر آیتم. دو ستون پهنای کارت را پر می‌کند و هیچ سمتی
 * خالی نمی‌ماند؛ روی موبایل تک‌ستونه می‌شود.
 */
.sl-timeline {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px 48px;
	margin: 0;
	padding: 0;
	list-style: none;
	direction: rtl;

	--sl-timeline-dot: var(--sl-teal, #00897B);
}

.sl-timeline__item {
	display: flex;
	gap: 16px;
	align-items: flex-start; /* rtl-ok: محور عمودی است — یعنی بالا، نه راست */
	text-align: right;
}

.sl-timeline__dot { display: none; }

.sl-timeline__year {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 50%;
	background: var(--sl-timeline-dot);
	color: #fff;
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
}

.sl-timeline__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

.sl-timeline__title {
	color: var(--sl-ink, #040404);
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
}

.sl-timeline__text {
	color: var(--sl-muted, #828282);
	font-size: 14px;
	line-height: 26px;
}

@media (max-width: 768px) {
	.sl-timeline { grid-template-columns: 1fr; gap: 28px; }
}

/* ------------------------------------------- ورود و ثبت‌نام */

/*
 * کارت ورود مطابق طرح: فرم در ستون راست و تصویر در ستون چپ. فیلدها همان
 * .sl-field صفحه‌های فرم‌اند تا ظاهر ورودی‌ها در کل سایت یکی بماند.
 */
.sl-auth {
	display: flex;
	flex-direction: column;
	gap: 16px;
	direction: rtl;
}

.sl-auth__form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sl-auth .sl-field input[readonly],
.sl-auth .sl-field input:disabled {
	background: #F9FAFC;
	color: var(--sl-muted, #828282);
	cursor: not-allowed;
}

.sl-auth__submit {
	justify-content: center;
	width: 100%;
	min-height: 52px;
	margin-block-start: 8px;
}

.sl-auth__remember { font-size: 14px; color: var(--sl-muted, #828282); }

.sl-auth__error,
.sl-auth__ok {
	margin: 0;
	padding: 12px 16px;
	border-radius: var(--sl-r-sm, 12px);
	font-size: 14px;
	line-height: 24px;
}

.sl-auth__error { background: #FDECEC; color: #B42318; }
.sl-auth__ok { background: #E6F3F2; color: var(--sl-teal, #00897B); }
.sl-auth__ok code { font-size: 16px; font-weight: 700; letter-spacing: 2px; }

.sl-auth__again {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	font-size: 14px;
}

.sl-auth__again button,
.sl-auth__again a {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--sl-teal, #00897B);
	cursor: pointer;
	text-decoration: none;
}

.sl-auth__again button:hover,
.sl-auth__again a:hover { text-decoration: underline; }

.sl-auth__terms,
.sl-auth__hint {
	margin: 0;
	color: var(--sl-muted, #828282);
	font-size: 14px;
	line-height: 26px;
}

.sl-auth__terms a { color: var(--sl-teal, #00897B); text-decoration: none; font-weight: 600; }
.sl-auth__terms a:hover { text-decoration: underline; }

/* خط پایانی «پزشک هستید؟» با یک جداکننده از فرم فاصله می‌گیرد — مثل طرح. */
.sl-auth__foot {
	margin: 0;
	padding-block-start: 16px;
	border-block-start: 1px solid var(--sl-line, #F3F3F3);
	color: var(--sl-muted, #828282);
	font-size: 14px;
	text-align: center;
}

.sl-auth__foot a { color: var(--sl-teal, #00897B); font-weight: 700; text-decoration: none; }
.sl-auth__foot a:hover { text-decoration: underline; }

/* ----------------------------------------------- برگه جستجو */

/*
 * خط شمار نتیجه، درست زیر نوار جستجو و راست‌چین — مثل طرح.
 */
.sl-searchpage__count,
.sl-searchpage__hint {
	margin: 0;
	color: var(--sl-muted, #828282);
	font-size: 14px;
	line-height: 26px;
	text-align: right; /* rtl-ok */
}

.sl-searchpage__count b { color: var(--sl-ink, #040404); font-weight: 700; }

/*
 * طرحِ نتایج سه‌ستونه است (ستون چهارم جای پنل فیلتر بود که اینجا نداریم،
 * پس همان سه ستون با کارت‌های پهن‌تر می‌ماند).
 */
.sl-searchpage__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 1100px) {
	.sl-searchpage__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
	.sl-searchpage__grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------- صفحه عضویت پزشکان */

/*
 * سه گامِ «در سه گام عضو شوید»: سه ستون هم‌عرض داخل یک کارت سفید، با
 * شماره‌ی دایره‌ای بالای هر ستون — مطابق طرح.
 */
.e-con.sl-step { flex: 1 1 0; min-width: 0; }

.sl-step__num .elementor-heading-title {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: #E6F3F2;
	color: var(--sl-teal, #00897B);
	font-size: 20px;
	font-weight: 800;
	line-height: 1;
}

.sl-step__title .elementor-heading-title { margin-block-end: 8px; }

.sl-step .elementor-widget-text-editor p { margin: 0; }

@media (max-width: 860px) {
	.e-con.sl-step { flex: 1 1 100%; }
}

/*
 * فرم عضویت، مثل صفحه‌ی تماس، داخل کارت ۱۳۲۰ می‌نشیند؛ پس قاب و سایه‌ی
 * خودِ فرم خنثی می‌شود تا دو کادر تودرتو دیده نشود.
 */
.sl-joincard .sl-pageform__form {
	gap: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

.sl-joincard .sl-pageform__row {
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-bottom: 20px;
}

.sl-joincard .sl-pageform__form > .sl-field { margin-bottom: 20px; }

.sl-joincard .sl-check { margin-bottom: 20px; }

/* دکمه‌ی ارسال در طرح نارنجی و در لبه‌ی چپ کارت است. */
.sl-joincard .sl-pageform .sl-btn {
	align-self: flex-end; /* rtl-ok: در rtl یعنی چپ — مطابق طرح */
	min-width: 220px;
	background: var(--sl-orange, #F97316);
	border-color: transparent;
	color: #fff;
}

.sl-joincard .sl-pageform .sl-btn:hover { background: #ea6a0c; color: #fff; }

@media (max-width: 860px) {
	.sl-joincard .sl-pageform__row { grid-template-columns: 1fr; }
}

/* --------------------------------------- کارت اطلاعات تماس با ما */

/*
 * طرح: ۳۱۲×۲۰۰. ارتفاع ثابت نمی‌گذاریم چون نشانی دفتر ممکن است بلندتر
 * شود؛ min-height همان ۲۰۰ را نگه می‌دارد و کارت‌ها هم‌قد می‌مانند.
 */
.sl-infocard { min-height: 200px; }

/*
 * حاشیه‌ی کارت‌ها: رنگ #F3F3F3 روی زمینه‌ی سفیدِ همین صفحه عملاً دیده
 * نمی‌شد و کارت‌ها بی‌مرز به نظر می‌رسیدند. یک خاکستری کمی تیره‌تر به
 * همراه سایه‌ی بسیار ملایم، لبه را بدون سنگین‌کردن طرح مشخص می‌کند.
 * !important لازم است چون رنگ حاشیه را المنتور به صورت inline از تنظیم
 * خود کارت می‌نویسد.
 */
.e-con.sl-infocard,
.e-con.sl-formcard,
.e-con.sl-mapcard {
	border-color: #E4E8EC !important;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

/* آیکون کارت‌های تماس وسط‌چین می‌شود، مثل کارت‌های «ارزش‌ها». */
.sl-infocard__ic,
.sl-infocard__ic .elementor-icon-wrapper {
	text-align: center;
}

/*
 * جعبه‌ی آیکون کارت اطلاعات تماس — ۵۶×۵۶، گردی ۱۶، زمینه‌ی فیروزه‌ای روشن
 * و آیکون ۲۶. ویجت آیکون المنتور اندازه‌ی جعبه را از padding می‌سازد که
 * دقیق درنمی‌آید، پس ابعاد اینجا صریح نوشته شده است.
 */
/*
 * چرا `.e-con.sl-infocard >` و نه فقط `.sl-infocard >`:
 * المنتور قاعده‌ی `.e-con > .elementor-widget:not(:last-child)` دارد که
 * وزنش (۰,۳,۰) است و فاصله را از `--widgets-spacing-y` می‌گیرد؛ چون gap
 * ستون را صفر گذاشته‌ایم، آن صفر بر قاعده‌ی یک‌کلاسه‌ی ما غلبه می‌کرد.
 */
.e-con.sl-infocard > .sl-infocard__ic { margin-block-end: 16px; }

.sl-infocard__ic .elementor-icon-wrapper { line-height: 0; }

.sl-infocard__ic .elementor-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border-radius: 16px;
}

.sl-infocard__ic .elementor-icon .sl-i { font-size: 26px; line-height: 1; }

/* در کارت، فاصله‌ی عنوان تا متن ۸ است و خطوط متن فاصله‌ی اضافه ندارند. */
.e-con.sl-infocard > .elementor-widget-heading { margin-block-end: 8px; }
.sl-infocard .elementor-widget-text-editor p { margin: 0; }

/* --------------------------------------------- سوالات متداول */

/*
 * سه تکه‌ی طرح faq.html: نوار جستجوی ۶۴ قرصی، ردیف کلیدهای موضوع ۴۴، و
 * کارت‌های پرسش با گردی ۱۶ و فاصله‌ی ۱۶. نشانِ باز/بسته با ::before و
 * ::after ساخته می‌شود تا آیکون اضافه بار نشود و چرخشِ + به − نرم باشد.
 */
.sl-faq {
	display: flex;
	flex-direction: column;
	gap: 28px;
	direction: rtl;

	--sl-faq-accent: var(--sl-teal, #00897B);
}

/* ------------------------------------------------- نوار جستجو */

.sl-faq__bar {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 64px;
	padding: 4px 24px 4px 4px; /* rtl-ok: جای دکمه در سمت چپ نوار است */
	background: #fff;
	border: 2px solid var(--sl-line, #F3F3F3);
	border-radius: var(--sl-r-pill, 1000px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, .04);
	cursor: text;
}

/*
 * ورودی و برچسب موضوع یک گروه‌اند و به لبه‌ی راست می‌چسبند؛ فاصله‌ی خالی
 * بین این گروه و دکمه می‌ماند، دقیقاً مثل طرح. ورودی رشد نمی‌کند وگرنه
 * برچسب «همه موضوعات» تا کنار دکمه هل داده می‌شود.
 */
.sl-faq__fields {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0;
}

/*
 * ورودی به اندازه‌ی متن خودش باشد، نه عرض ثابت: در طرح، متن راهنما یک
 * بلوکِ هم‌اندازه‌ی متن است و جداکننده ۱۶ پیکسل کنارش می‌ایستد. با عرض
 * ثابت، متن به لبه‌ی راست می‌چسبید و جداکننده دور می‌افتاد.
 * field-sizing کار را در کروم انجام می‌دهد؛ برای بقیه‌ی مرورگرها
 * صفت size روی خود input تقریب نزدیکی می‌سازد.
 */
.sl-faq__input {
	flex: none;
	field-sizing: content;
	width: auto;
	min-width: 12ch;
	max-width: 100%;
	border: 0;
	background: none;
	font: inherit;
	font-size: 14px;
	font-weight: 300;
	color: var(--sl-ink, #040404);
	outline: none;
}

.sl-faq__input::placeholder { color: var(--sl-muted, #828282); font-weight: 300; }

.sl-faq__sep {
	flex: none;
	width: 1px;
	height: 32px;
	background: var(--sl-line, #F3F3F3);
}

.sl-faq__topic-label {
	flex: none;
	font-size: 14px;
	color: var(--sl-muted, #828282);
}

.sl-faq__submit {
	flex: none;
	min-height: 52px;
	padding: 0 40px;
	border-radius: var(--sl-r-pill, 1000px);
}

/* --------------------------------------------- کلیدهای موضوع */

.sl-faq__topics {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.sl-faq__chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 22px;
	background: #fff;
	border: 1px solid var(--sl-line, #F3F3F3);
	border-radius: var(--sl-r-pill, 1000px);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--sl-ink, #040404);
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.sl-faq__chip:hover { border-color: var(--sl-faq-accent); color: var(--sl-faq-accent); }

.sl-faq__chip.is-active {
	background: var(--sl-faq-accent);
	border-color: var(--sl-faq-accent);
	color: #fff;
}

/* --------------------------------------------- کارت‌های پرسش */

.sl-faq__list {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.sl-faq__item {
	background: #fff;
	border: 1px solid #E4E8EC;
	border-radius: var(--sl-r-md, 16px);
	padding: 20px 24px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.sl-faq__head { margin: 0; }

/*
 * ظرف راست‌به‌چپ است، پس row یعنی «از راست به چپ»: پرسش در راست و نشانِ
 * +/− در چپ — مطابق طرح. row-reverse محور را برعکس می‌کرد و پرسش را
 * چپ‌چین نشان می‌داد.
 */
.sl-faq__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: right; /* rtl-ok: متن پرسش راست‌چین است */
	cursor: pointer;
}

.sl-faq__q {
	text-align: right; /* rtl-ok: متن پرسش راست‌چین است */
	font-size: 16px;
	font-weight: 600;
	line-height: 28px;
	color: var(--sl-ink, #040404);
}

/*
 * نشان + که در حالت باز به − می‌رسد: خط افقی همیشه هست و خط عمودی در
 * حالت باز جمع می‌شود. یعنی هیچ متنی جابه‌جا نمی‌شود و گذار نرم است.
 */
.sl-faq__sign {
	position: relative;
	flex: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #E6F3F2;
	color: var(--sl-faq-accent);
}

.sl-faq__sign::before,
.sl-faq__sign::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	margin: -1px 0 0 -6px;
	background: currentColor;
	border-radius: 2px;
	transition: transform .18s ease;
}

.sl-faq__sign::after { transform: rotate(90deg); }

.sl-faq__item.is-open .sl-faq__sign::after { transform: rotate(0deg); }

.sl-faq__a {
	margin-top: 12px;
	text-align: right; /* rtl-ok: متن پاسخ راست‌چین است */
	padding-inline-end: 44px; /* rtl-ok: سمت چپ، زیر نشانِ +/− خالی می‌ماند */
	font-size: 14px;
	line-height: 26px;
	color: var(--sl-muted, #828282);
}

.sl-faq__a p,
.sl-faq__a li { text-align: right; } /* rtl-ok */
.sl-faq__a p { margin: 0 0 12px; }
.sl-faq__a p:last-child { margin-bottom: 0; }

.sl-faq__empty {
	margin: 0;
	padding: 24px;
	color: var(--sl-muted, #828282);
	text-align: center;
}

@media (max-width: 720px) {
	.sl-faq__bar {
		flex-wrap: wrap;
		height: auto;
		padding: 12px;
		border-radius: var(--sl-r-md, 16px);
	}

	.sl-faq__sep,
	.sl-faq__topic-label { display: none; }

	.sl-faq__fields { flex: 1 1 100%; }
	.sl-faq__input { flex: 1 1 auto; field-sizing: fixed; width: auto; padding: 8px 4px; }
	.sl-faq__submit { flex: 1 1 100%; }
	.sl-faq__a { padding-inline-end: 0; }
}