/* ==========================================================================
   قالب سلامت — هدر، فوتر و بخش‌های ساختاری
   ========================================================================== */

/* ------------------------------------------------------------------- هدر
   اعداد مستقیم از salamat/index.html:
   نوار ۱۳۲۰×۴۸ در بالای ۲۷px · گروه چپ ۳۵۹px با gap 24 · گروه راست ۷۸۸px
   با gap 40 · منو ۵۶۵px با gap 40 · لوگو ۱۸۳px با gap 8                    */

.sl-header {
	position: relative;
	z-index: 50;
	background: var(--sl-bg-soft);
}

.sl-header--sticky {
	position: sticky;
	inset-block-start: 0;
}

.sl-header.is-stuck {
	background: rgba(249, 250, 252, .94);
	backdrop-filter: blur(10px);
	box-shadow: var(--sl-shadow-sm);
}

.sl-header__bar {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	height: 108px;
	padding-block: 27px 33px;
	box-sizing: border-box;
}

/* ---- گروه راست: منو ۵۶۵ + فاصله ۴۰ + لوگو ۱۸۳ = ۷۸۸ */

.sl-header__end {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 40px;
	height: 48px;
}

/* ---- لوگو (لبه راست هدر) */

/*
 * ترتیب طرح از چپ به راست: متن ۱۱۶ سپس نشان ۵۹.
 * صفحه RTL است، پس با row-reverse شروع محور به چپ می‌رود و ترتیب DOM
 * (متن، نشان) همان چیدمان طرح را می‌دهد: نشان در لبه راست.
 */
.sl-brand {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	height: 48px;
	color: var(--sl-teal);
}

/*
 * مختصات طرح فیزیکی است، پس محور را با direction: ltr قفل می‌کنیم تا
 * flex-start/flex-end همان چپ/راست طرح باشند، و جهت متن را روی خود
 * خط‌ها rtl می‌گذاریم. بدون این، در صفحه RTL همه‌چیز آینه می‌شود.
 */
.sl-brand__text {
	display: flex;
	flex-direction: column;
	align-items: flex-end;   /* راست‌چین — مطابق طرح */
	justify-content: center;
	height: 40px;
	direction: ltr;
}

.sl-brand__text strong,
.sl-brand__text small {
	direction: rtl;
	text-align: right;
	white-space: nowrap;
}

.sl-brand__text strong {
	color: #000;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: -.32px;
}

.sl-brand__text small {
	color: var(--sl-muted);
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: -.24px;
}

.sl-brand__mark {
	display: block;
	width: 59px;
	height: 48px;
	flex: none;
}

.sl-brand__mark svg,
.sl-brand__mark img {
	display: block;
	width: 100%;
	height: 100%;
}

/* ---- منو (وسط) */

.sl-nav__list {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 40px;
	height: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sl-nav__list a {
	color: var(--sl-ink);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: -.32px;
	white-space: nowrap;
	transition: color .18s ease;
}

.sl-nav__list .current-menu-item > a,
.sl-nav__list a:hover {
	color: var(--sl-teal);
}

/* طرح، آیتمِ صفحه‌ی جاری را پررنگ هم می‌کند نه فقط سبز. */
.sl-nav__list .current-menu-item > a,
.sl-nav__list .current-menu-ancestor > a,
.sl-nav__list .current_page_parent > a { font-weight: 700; }

/* ---- تلفن و ورود (سمت چپ) */

.sl-header__side {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 24px;
	height: 48px;
}

/*
 * ترتیب طرح از چپ به راست: آیکون ۴۸ سپس متن ۱۰۳.
 * مثل لوگو، row-reverse لازم است تا در صفحه RTL آیکون سمت چپ بیفتد.
 */
.sl-phone {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	height: 48px;
}

/*
 * آیکون تماس: مربع ۴۸×۴۸ با گردی ۱۲ و پس‌زمینه فیروزه‌ای روشن و
 * گلیف فیروزه‌ای — دقیقاً مثل طرح. مربع پس‌زمینه در استخراج SVG حذف
 * شده بود، پس اینجا با CSS ساخته می‌شود.
 */
.sl-phone__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	flex: none;
	border-radius: 12px;
	background: var(--sl-teal-soft);
	color: var(--sl-teal);
}

.sl-phone__icon .sl-i {
	width: 48px;
	height: 48px;
}

.sl-phone__icon svg { display: block; width: 100%; height: 100%; }

/* طرح: بلوک ۱۰۳ چپ‌چین — شماره چپ‌چین، برچسب راست‌چین. */
.sl-phone__body {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	justify-content: center;
	gap: 4px;
	height: 36px;
	direction: ltr;
}

.sl-phone__num {
	direction: ltr;
	unicode-bidi: isolate;
	color: var(--sl-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 16px;
	text-align: left;
	white-space: nowrap;
}

.sl-phone__accent { color: var(--sl-teal); }

.sl-phone__body small {
	direction: rtl;
	color: var(--sl-ink);
	font-size: 14px;
	font-weight: 400;
	line-height: 16px;
	text-align: right;
	white-space: nowrap;
}

.sl-authbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 176px;
	height: 48px;
	padding: 12px 32px;
	border: 1px solid var(--sl-teal);
	border-radius: 100px;
	color: var(--sl-teal);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	white-space: nowrap;
	transition: background-color .18s ease, color .18s ease;
}

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

/* ---- موبایل */

.sl-burger {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 1px solid var(--sl-border);
	border-radius: var(--sl-r-sm);
	cursor: pointer;
}

.sl-burger > span[aria-hidden] {
	position: absolute;
	inset: 50% 12px auto;
	height: 2px;
	background: var(--sl-ink);
	border-radius: 2px;
}

.sl-burger > span[aria-hidden]::before,
.sl-burger > span[aria-hidden]::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	height: 2px;
	background: inherit;
	border-radius: inherit;
}

.sl-burger > span[aria-hidden]::before { inset-block-start: -7px; }
.sl-burger > span[aria-hidden]::after { inset-block-start: 7px; }

.sl-header__mobile {
	padding: 12px var(--sl-gutter) 20px;
	background: #fff;
	border-block-start: 1px solid var(--sl-border);
}

.sl-nav__list--mobile {
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	height: auto;
}

.sl-nav__list--mobile li + li { border-block-start: 1px solid var(--sl-line); }
.sl-nav__list--mobile a { display: block; padding: 12px 0; }

@media (max-width: 1200px) {
	.sl-nav__list { gap: 24px; }
	.sl-nav__list a { font-size: 15px; }
}

@media (max-width: 1024px) {
	.sl-nav,
	.sl-phone { display: none; }
	.sl-burger { display: block; }
	.sl-header__bar { padding-block: 16px; height: 80px; }
}

@media (max-width: 560px) {
	.sl-authbtn { display: none; }
}

/* ------------------------------------------------------------------ فوتر
   فوتر ۱۵۱۲×۵۵۲ با بریدگی موجی بالا. مختصات نسبت به بالای فوتر:
   کارت تصویر (۰,۰) ۳۱۲×۲۰۰ · نشان (۱۳۲,۱۸۱) ۴۸ · کارت مشاوره (۰,۲۱۲) ۳۱۲×۳۴۰
   لوگو (۱۱۳۷,۹۰) · منوها (۴۲۵ و ۶۴۹, ۹۶) ۱۱۱ · معرفی (۷۸۴,۱۶۸) ۵۳۶×۱۱۲
   پنل تماس (۳۳۶,۳۶۸) ۹۸۴×۱۰۸ · کپی‌رایت (۵۰۲)                            */

.sl-footer {
	--sl-fk: 1;

	/* رنگ صفحه پشت بریدگی — اگر سکشن بالای فوتر رنگ دیگری داشت عوض شود. */
	--sl-footer-notch: #fff;
	--sl-notch-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 210 51'%3E%3Cpath d='M0,0 H210 V1 C162.75,1 152.5,51 105,51 C57.5,51 47.25,1 0,1 Z' fill='%23000'/%3E%3C/svg%3E");

	position: relative;
	margin-block-start: 80px;
	background: var(--sl-teal);
	color: #fff;
}

/*
 * بریدگی موجی وسط لبه بالا — قرینه بریدگی هیرو.
 *
 * طرح این را با clip-path روی کل فوتر زده، ولی مسیر clip-path پیکسلی است و
 * با عرض متغیر مرورگر جابه‌جا می‌شود. به‌جایش یک تکه ۲۱۰×۵۰ به رنگ صفحه
 * وسط لبه بالا می‌نشیند که همان قوس را می‌بُرد؛ این با هر عرضی وسط می‌ماند.
 * مسیر دقیقاً از salamat/index.html خط فوتر گرفته شده: قوس ۲۱۰ عرض، ۵۰ عمق.
 */
.sl-footer::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
	width: 210px;
	height: 51px;
	background-color: var(--sl-footer-notch);
	-webkit-mask-image: var(--sl-notch-mask);
	mask-image: var(--sl-notch-mask);
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	pointer-events: none;
}

.sl-footer__inner {
	position: relative;
	width: 100%;
	max-width: 1320px;
	height: calc(552px * var(--sl-fk));
	margin-inline: auto;
	direction: ltr;
}

/* دکمه بازگشت به بالا — داخل بریدگی می‌نشیند (عمق بریدگی ۵۰) */
.sl-footer__totop {
	position: absolute;
	top: -6px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: block;
	width: 60px;
	height: 60px;
	color: var(--sl-bg-soft);
}

.sl-footer__totop svg { width: 60px; height: 60px; }

/* ---- ستون چپ (کارت تصویر + مشاوره) */

.sl-footer__aside {
	position: absolute;
	top: 0;
	left: 0;
	width: 312px;
	height: 552px;
}

/*
 * تصویر بالای ستون چپ. طرح لبه پایینش را با یک قوس بریده تا دایره سفید
 * ۴۸px داخل همان بریدگی بنشیند (قوس ۱۲۶ عرض، ۳۰ عمق، وسط‌چین).
 * اندازه و جای تصویر هم عیناً از طرح: ۳۱۲×۴۶۸٫۳۲ با آفست ‎-۵٫۱۶.
 */
.sl-footer__promo {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 312px;
	height: 200px;
	background-color: rgba(255, 255, 255, .08);
	background-size: 312px 468.32px;
	background-position: 0 -5.16px;
	background-repeat: no-repeat;
	clip-path: path("M0,0 H312 V200 H219 C190.65,200 184.5,170 156,170 C127.5,170 121.35,200 93,200 H0 Z");
}

.sl-footer__promoicon {
	position: absolute;
	top: 181px;
	left: 132px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	background: #fff;
	border-radius: 50%;
	color: var(--sl-teal);
}

.sl-footer__consult {
	position: absolute;
	top: 212px;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	/*
	 * فاصله‌های طرح داخل کارت ۳۴۰ ارتفاع:
	 *   بلوک «دریافت مشاوره + شماره» ۶۶ · فاصله ۴۴ · بلوک شبکه‌ها ۶۰
	 * جمع ۱۷۰ → بالا و پایین هرکدام ۸۵ باقی می‌ماند (وسط‌چین عمودی).
	 */
	gap: 44px;
	width: 312px;
	height: 340px;
	padding: 0 24px;
	background: rgba(230, 243, 242, .1);
	border-radius: 20px;
	box-sizing: border-box;
}

.sl-footer__consulthead {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	direction: rtl;
	text-align: center;
}

.sl-footer__consulttitle {
	color: #fff;
	font-size: 24px;
	font-weight: 400;
	line-height: 24px;
}

.sl-footer__consulttitle b { font-weight: 700; }

.sl-footer__consultphone {
	direction: ltr;
	color: #fff;
	font-size: 30px;
	font-weight: 700;
	line-height: 30px;
}

.sl-footer__consultphone:hover { color: var(--sl-teal-soft); }

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

.sl-footer__socialtitle {
	margin: 0;
	direction: rtl;
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
}

/* چهار آیکون ۲۴ در عرض ۱۴۴ → فاصله ۱۶ (مطابق طرح) */
.sl-footer__sociallist {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sl-footer__sociallist a {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	color: #fff;
	transition: opacity .18s ease;
}

.sl-footer__sociallist a:hover { opacity: .7; color: #fff; }

/* گلیف طرح ۲۰ است داخل viewBox ۲۴ — پس SVG باید ۲۴ رندر شود، نه ۲۰. */
.sl-footer__sociallist svg { width: 24px; height: 24px; display: block; }

/* ---- ستون راست (لوگو، منوها، معرفی) */

/* لوگو: (۱۱۳۷,۹۰) ۱۸۳×۴۸ — لبه راستش روی لبه راست ستون ۱۳۲۰ */
.sl-brand--footer {
	position: absolute;
	top: 90px;
	left: 1137px;
	width: 183px;
	height: 48px;
	justify-content: flex-end;
	color: #fff;
}

.sl-brand--footer .sl-brand__text strong { color: #fff; }
.sl-brand--footer .sl-brand__text small { color: rgba(255, 255, 255, .7); }

/* دو ستون منو: (۴۲۵..۵۳۶) و (۶۴۹..۷۶۰) در بالای ۹۶ */
.sl-footer__cols {
	position: absolute;
	top: 96px;
	left: 425px;
	display: flex;
	flex-direction: row;   /* راست‌چین است، پس اولی (دسترسی سریع) سمت راست */
	align-items: flex-start;
	gap: 113px;
	width: 335px;
	direction: rtl;
}

.sl-footer__col { flex: none; width: 111px; }

/*
 * عنوان ستون ۱۸px/۶۰۰ با یک خط نارنجی ۳۳×۴ زیرش که به لبه راست ستون
 * چسبیده است؛ فاصله عنوان تا خط ۸ و خط تا اولین آیتم ۴۰.
 */
.sl-footer__title {
	position: relative;
	margin: 0 0 48px;   /* عنوان ۲۴ + ۸ + خط ۴ … اولین آیتم در ۷۲ از بالای عنوان */
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	line-height: 24px;
	white-space: nowrap;
}

.sl-footer__title::after {
	content: "";
	position: absolute;
	top: 32px;
	right: 0;
	width: 33px;
	height: 4px;
	background: #f97316;
	border-radius: 24px;
}

/*
 * تله راست‌چینی (همان اشتباه تکراری): در ستونِ rtl محور عرضی برعکس است،
 * پس flex-end یعنی چپ. آیتم‌ها باید به لبه راست ستون بچسبند → flex-start.
 */
.sl-footer__list {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* هر آیتم: متن و بعد یک نقطه سفید ۴px چسبیده به لبه راست ستون */
.sl-footer__list li {
	display: flex;
	flex-direction: row;   /* راست‌چین است؛ نقطه (فرزند اول) سمت راست می‌افتد */
	align-items: center;
	gap: 8px;
	height: 24px;
}

.sl-footer__list li::before {
	content: "";
	flex: none;
	width: 4px;
	height: 4px;
	background: #fff;
	border-radius: 50%;
}

.sl-footer__list a {
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: -.32px;
	white-space: nowrap;
}

.sl-footer__list a:hover { color: var(--sl-teal-soft); }

/* متن معرفی (۷۸۴,۱۶۸) ۵۳۶×۱۱۲ و زیرش لینک «مشاهده بیشتر» */
.sl-footer__intro {
	position: absolute;
	top: 168px;
	left: 784px;
	display: flex;
	flex-direction: column;

	/*
	 * تله راست‌چینی: در ستونِ rtl محور عرضی برعکس است، پس flex-end یعنی
	 * چپ. لینک «مشاهده بیشتر» باید روی لبه راست بنشیند → flex-start.
	 */
	align-items: flex-start;
	gap: 24px;
	width: 536px;
	direction: rtl;
}

.sl-footer__about {
	width: 536px;
	margin: 0;
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	line-height: 28px;
	letter-spacing: -.32px;
	text-align: right;
}

.sl-footer__more {
	display: inline-flex;
	align-items: center;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
}

.sl-footer__more:hover { color: var(--sl-teal-soft); }

/* ---- پنل تماس */

/* پنل تماس (۳۳۶,۳۶۸) ۹۸۴×۱۰۸ — نشان‌ها سمت چپ، سه ردیف اطلاعات سمت راست */
.sl-footer__contact {
	position: absolute;
	top: 368px;
	left: 336px;
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	width: 984px;
	height: 108px;
	padding: 24px;
	background: rgba(230, 243, 242, .1);
	border-radius: 16px;
	box-sizing: border-box;
}

/*
 * ترتیب طرح از راست: آدرس ما ← ساعت کاری ← شماره تماس.
 * جعبه راست‌چین است، پس row کافی است؛ row-reverse دوباره برش می‌گرداند.
 */
.sl-footer__contactrows {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	gap: 12px;
	direction: rtl;
}

/* در هر آیتم آیکون سمت راست و متن سمت چپش است → row-reverse در rtl */
.sl-footer__contactitem {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 8px;
	height: 36px;
}

/* باز هم همان تله: flex-end در ستون rtl یعنی چپ. */
.sl-footer__contacttext {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	text-align: right;
}

/*
 * در طرح برچسب بالا ۱۴px/۶۰۰ است و مقدار زیرش ۱۲px/۴۰۰ — نه برعکس.
 * پس small (برچسب) بزرگ‌تر و پررنگ‌تر از b (مقدار) است.
 */
.sl-footer__contacttext small {
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	white-space: nowrap;
}

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

/*
 * آیکون‌های طرح در viewBox ۳۶ کشیده شده‌اند و نقشِ گِلیف داخلشان حدود ۱۲
 * است. اگر SVG را ۲۰ رندر کنیم، گلیف به ۶٫۵ می‌رسد و کنار متن گم می‌شود.
 * پس SVG کل جعبه ۳۶ را پر می‌کند تا اندازه گلیف همان ۱۲ طرح شود.
 */
.sl-footer__contacticon {
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	background: rgba(255, 255, 255, .1);
	border-radius: 8px;
	color: #fff;
}

.sl-footer__contacticon svg {
	width: 36px;
	height: 36px;
	display: block;
}

/* دو نشان اعتماد ۵۴×۶۰ و ۵۵×۶۰ با فاصله ۱۰، چسبیده به لبه چپ پنل */
.sl-footer__trust {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	flex: none;
}

.sl-footer__trust img {
	display: block;
	height: 60px;
	width: auto;
	border-radius: 0;
}

/* ---- کپی‌رایت — راست‌چین روی لبه راست ستون، نه وسط‌چین */

.sl-footer__copy {
	position: absolute;
	top: 502px;
	right: 0;
	left: 0;
	margin: 0;
	direction: rtl;
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	letter-spacing: -.32px;
	text-align: right;
}

.sl-footer__copy b,
.sl-footer__copy strong { font-weight: 600; }

/* ---- مقیاس و ریسپانسیو */

@media (max-width: 1400px) { .sl-footer { --sl-fk: .96; } }

@media (max-width: 1360px) {
	.sl-footer__inner {
		display: flex;
		flex-direction: column;
		gap: 40px;
		height: auto;
		padding: 72px 24px 32px;
	}
	.sl-footer__aside,
	.sl-brand--footer,
	.sl-footer__cols,
	.sl-footer__intro,
	.sl-footer__contact,
	.sl-footer__copy {
		position: static;
		width: 100%;
		height: auto;
	}
	.sl-footer__aside { display: flex; flex-direction: column; gap: 40px; }
	.sl-footer__promo { position: static; width: 100%; clip-path: none; border-radius: 20px; background-size: cover; background-position: center; }
	.sl-footer__promoicon { display: none; }
	.sl-footer__consult { position: static; width: 100%; height: auto; padding: 32px 24px; gap: 32px; }
	.sl-brand--footer { order: -3; justify-content: flex-end; }
	/* rtl-ok: جعبه rtl است، پس flex-start یعنی راست — همان چیزی که می‌خواهیم. */
	.sl-footer__intro { order: -2; align-items: flex-start; }
	.sl-footer__about { width: 100%; }
	.sl-footer__cols { order: -1; flex-wrap: wrap; gap: 40px; }
	.sl-footer__title { margin-block-end: 56px; }
	.sl-footer__contact { flex-wrap: wrap; height: auto; padding: 24px; }
	.sl-footer__contactrows { flex-wrap: wrap; }
	.sl-footer__copy { text-align: center; }
}

@media (max-width: 560px) {
	.sl-footer__consultphone { font-size: 24px; }
	.sl-footer__consulttitle { font-size: 20px; }
	.sl-footer__about { font-size: 14px; line-height: 26px; }
}

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

/*
 * طرح: نوار ۵۳۶×۶۰ · دکمه «جستجو» ۱۲۹×۴۸ در لبه چپ · متن سمت راست.
 * ترتیب DOM دکمه‌است-بعد-ورودی و صفحه RTL است، پس بدون row-reverse
 * دکمه سمت راست می‌افتد — برعکس طرح.
 */
.sl-searchbar {
	display: flex;
	flex-direction: row-reverse;
	align-items: center;
	gap: 12px;
	width: 100%;
	max-width: 536px;
	min-height: 60px;

	/* دکمه در لبه چپ با فاصله ۴، متن سمت راست با فاصله ۲۴ — مثل طرح. */
	padding: 4px 24px 4px 4px;
	background: #fff;
	border: 2px solid var(--sl-field-line, #949494);
	border-radius: var(--sl-r-pill);
	box-shadow: var(--sl-shadow-md);
}

.sl-searchbar__input {
	flex: 1;
	min-width: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 14px;
	color: var(--sl-ink);
	outline: none;
}

.sl-searchbar__input::placeholder { color: var(--sl-muted); font-weight: 300; }
.sl-searchbar__submit { min-height: 48px; padding-inline: 32px; }

/* --------------------------------------------------------- محتوای متنی */

.sl-main { min-height: 40vh; }

.sl-prose { font-size: 16px; line-height: 32px; }
.sl-prose img { border-radius: var(--sl-r-md); }
.sl-prose h2 { margin-block: 32px 12px; }
.sl-prose h3 { margin-block: 24px 12px; }
.sl-prose ul, .sl-prose ol { padding-inline-start: 24px; }

.sl-archive,
.sl-page,
.sl-single { padding-block: 48px; }

.sl-archive__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 24px;
	margin-block-start: 32px;
}

.sl-single__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 40px;
}

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

/* ------------------------------------------------------------- کارت مقاله */

.sl-postcard {
	background: #fff;
	border: 1px solid var(--sl-border);
	border-radius: var(--sl-r-md);
	overflow: hidden;
	transition: box-shadow .2s ease, transform .2s ease;
}

.sl-postcard:hover {
	box-shadow: var(--sl-shadow-sm);
	transform: translateY(-2px);
}

.sl-postcard__media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.sl-postcard__body { padding: 16px; }

.sl-postcard__cat {
	display: inline-block;
	margin-block-end: 8px;
	padding: 4px 12px;
	background: var(--sl-teal-soft);
	border-radius: var(--sl-r-pill);
	color: var(--sl-teal);
	font-size: 12px;
	font-weight: 600;
}

.sl-postcard__title {
	margin: 0 0 12px;
	font-size: 16px;
	line-height: 28px;
	font-weight: 700;
}

.sl-postcard__meta {
	display: flex;
	gap: 16px;
	color: var(--sl-muted);
	font-size: 12px;
}

.sl-postcard__meta span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* ------------------------------------------------------------------- ۴۰۴ */

.sl-404 {
	padding-block: 80px;
	text-align: center;
}

.sl-404__art { color: var(--sl-teal-200); margin-block-end: 24px; }
.sl-404__text { color: var(--sl-muted); }
.sl-404__actions { margin-block: 24px; }
.sl-404 .sl-searchbar { margin-inline: auto; }

/* دکمه «پنل کاربری» — همان دکمه ورود با آیکون، برای کاربر واردشده. */
.sl-authbtn--panel {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 8px;
}