@charset "utf-8";
/* =====================================================================
   DLE Market  —  اصلاحات جزئی دور دوم
   ---------------------------------------------------------------------
   موارد گزارش‌شده:
   ۱. تراز عمودی منو با لوگو و آیکن‌ها
   ۲. سرریز فیلدهای جستجو از کادر نوار کنار
   ۳. شعاع گوشه‌های ورودی+دکمه که در راست‌به‌چپ برعکس بود
   ۴. دکمه «دانلود خرید» کوتاه‌تر و خوش‌فرم
   ۵. تیک قوانین و دکمه پرداخت غیرفعال
   ۶. جهت فلش‌های ریل نظرات
   ۷. نشان دسترسی مدیر در جعبه فایل‌ها
   ===================================================================== */

/* ================================ ۱. تراز هدر */

.hd__in { align-items: center; }

/* توجه: display اینجا تعیین نمی‌شود تا media query منوی موبایل
   (mobilenav.css) بتواند منوی دسکتاپ را خاموش کند. */
.nav {
	align-items: center;
	margin: 0;
	margin-inline-start: 14px;
	padding: 0;
	list-style: none;
	align-self: center;
}
@media (min-width: 901px) { .nav { display: flex; } }
.nav > li { display: flex; align-items: center; }
.nav a { display: flex; align-items: center; line-height: 1; }

.hd__in > nav { display: flex; align-items: center; align-self: stretch; }

.logo { align-self: center; line-height: 1; }
.hd__acts { align-items: center; align-self: center; }
.hd-ico { align-self: center; }

/* آیکن‌های ماسکی روی خط متن می‌نشینند؛ با فلکس تراز می‌شوند */
.btn .ic, .nav .ic, .hd-ico .ic { display: block; }

/* ==================== ۲. سرریز فیلدهای نوار کنار */

.side-box { overflow: hidden; }
.side-box, .side-block { max-width: 100%; }

.side-search, .side-price { max-width: 100%; }

.side-search input,
.side-price input {
	min-width: 0;
	max-width: 100%;
	box-sizing: border-box;
}

/* دکمه‌ی جستجو بیرون نزند */
.side-search { display: flex; flex-wrap: nowrap; }
.side-search button { flex: 0 0 auto; }

/* ============= ۳. شعاع گوشه در چیدمان راست‌به‌چپ */

/*
   نکته: ویژگی‌های منطقی (border-start-start-radius) بر اساس
   direction خودِ عنصر حساب می‌شوند. ورودی کد تخفیف و جستجوی
   خریدها direction: ltr دارند (برای متن لاتین)، پس «start»
   آن‌ها چپ می‌شود و گوشه‌ها برعکس درمی‌آید.

   چون قالب فقط راست‌به‌چپ است، مقدار فیزیکی صریح می‌گذاریم:
   ورودی در راست ← گوشه‌های راست گرد،  دکمه در چپ ← گوشه‌های چپ گرد.
   ترتیب: بالا‌چپ / بالا‌راست / پایین‌راست / پایین‌چپ
*/

.side-search input,
.cp-input input,
.dl-search input {
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
	border-inline-end: 0;
}

.side-search button,
.cp-input button,
.dl-search button {
	border-radius: var(--r-sm) 0 0 var(--r-sm);
}

/* =================== ۴. دکمه‌های کارت محصول */

.btn-bought {
	background: var(--ink-2);
	color: #fff;
}
.btn-bought:hover { background: var(--ink); color: #fff; }

/* متن دکمه در همه اندازه‌ها دیده شود ولی کوتاه بماند */
.pc-foot .btn { padding: 9px 14px; font-size: 12.5px; white-space: nowrap; }
.pc-foot .btn span { display: inline !important; }
.pc-foot .btn-bought, .pc-foot .btn-incart { font-size: 12px; }

/* در عرض‌های تنگ، ردیف قیمت و دکمه بشکند */
@media (max-width: 340px) {
	.pc-foot { flex-direction: column; align-items: stretch; gap: 10px; }
	.pc-foot .btn { justify-content: center; }
}

/* ============ ۵. تیک قوانین و دکمه پرداخت */

.co-agree { align-items: flex-start; }
.co-agree input { accent-color: var(--jade); }

.btn-pay[disabled],
.btn-pay:disabled {
	background: var(--line) !important;
	color: var(--tx-3) !important;
	cursor: not-allowed;
	box-shadow: none !important;
	transform: none !important;
}
.btn-pay[disabled]:hover { transform: none !important; }

.co-agree--warn { color: var(--rose); }
.co-agree--warn a { color: var(--rose); }

/* ============= ۶. فلش‌های ریل نظرات مشتریان */

.rail-nav { display: flex; gap: 8px; }
.rail-btn {
	width: 38px; height: 38px;
	display: grid; place-items: center;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: var(--card);
	color: var(--tx-2);
	cursor: pointer;
	font-size: 15px;
	transition: .16s var(--ease);
}
.rail-btn:hover { border-color: var(--tx-3); color: var(--tx); }
.rail-btn:disabled { opacity: .4; cursor: default; }

/* در راست‌به‌چپ حرکت رو به جلو سمت چپ است:
   «قبلی» ← فلش به راست (شکل پیش‌فرض ›)
   «بعدی» ← فلش به چپ (آینه‌شده ‹) */
.rail-btn[data-dir="prev"] .ic { transform: none; }
.rail-btn[data-dir="next"] .ic { transform: scaleX(-1); }

/* ============ ۷. نشان دسترسی مدیر در فایل‌ها */

.files-box__admin {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	padding: 13px 20px;
	background: #EEF4FF;
	border-bottom: 1px solid #D3E0FB;
	font-size: 12.5px;
	color: #2E4C9B;
	line-height: 1.9;
}
.files-box__admin i { margin-top: 5px; flex: 0 0 auto; font-size: 14px; }
.files-box__admin b { display: block; }

.fl-btn--admin {
	background: #2E4C9B;
	color: #fff;
}
.fl-btn--admin:hover { background: #243C7C; color: #fff; }

/* ================= اصلاحات پراکنده دیگر */

/* نوار ابزار ریل: عنوان و دکمه‌ها هم‌تراز */
.sec-head--row { align-items: center; }

/* برچسب نوع محصول: تراز عمودی درست */
.pc-type i, .pd-buy__type i { line-height: 1.6; }

/* قیمت خط‌خورده در کارت: فاصله بهتر */
.pc-price del { margin-bottom: 2px; }

/* شمارنده سبد در هدر روی آیکن ننشیند */
.cart-btn b { pointer-events: none; }

/* ============ ۸. جعبه فرم نوار کنار فروشگاه */
/*
   .side-box هم گرید است و ستونش auto بود، پس به اندازه محتوا
   باز می‌شد و ورودی‌ها از کادر بیرون می‌زدند. همان اصلاحی که
   برای .side و .shop-side انجام شد، اینجا هم لازم است.
*/

.side-box {
	grid-template-columns: minmax(0, 1fr);
	max-width: 100%;
}
.side-box > *,
.side-box .side-block,
.side-box .side-search,
.side-box .side-price { min-width: 0; max-width: 100%; }

.side-search { min-width: 0; }
.side-search input { flex: 1 1 auto; width: 100%; min-width: 0; }

.side-price { flex-wrap: nowrap; min-width: 0; }
.side-price input { flex: 1 1 0; width: 100%; min-width: 0; }
.side-price span { flex: 0 0 auto; }

/* ورودی‌های جستجو نباید عرض ذاتی size را نگه دارند */
.side-search input,
.side-price input,
.dl-search input,
.cp-input input { size: 1; }

/* ================================ ۸. نشان برند DlePlugin */

/* لوگوی تصویری — نسبت ۲۶۴×۸۰ ، همیشه با ارتفاع کنترل می‌شود */
.logo { gap: 0; }
.logo img.logo-img {
	display: block;
	height: 34px;
	width: auto;
	max-width: 100%;
}
.ft .logo img.logo-img { height: 40px; }
.mnav__hd .logo img.logo-img { height: 30px; }

/* نام برند به صورت متن — پشتیبان زمانی که تصویر در دسترس نیست.
   لاتین است و در صفحه راست‌به‌چپ باید جهت خودش را داشته باشد. */
.logo-word {
	direction: ltr;
	unicode-bidi: isolate;
	font-family: 'Vazirmatn', sans-serif;
	font-weight: 900;
	font-size: 21px;
	letter-spacing: -.015em;
	line-height: 1;
	white-space: nowrap;
	padding: 0;
}
.logo-word em { font-style: normal; color: var(--saffron); }

@media (max-width: 900px) {
	.logo img.logo-img { height: 30px; }
}
@media (max-width: 560px) {
	.logo img.logo-img { height: 27px; }
	.ft .logo img.logo-img { height: 34px; }
	.logo-word { font-size: 19px; }
}

/* ================================ ۹. فاصله کارت‌های فهرست بلاگ */

/* کارت‌های افقی بلاگ (فهرست دسته، جستجو، آرشیو) پشت سر هم بدون فاصله
   می‌آمدند و به هم چسبیده دیده می‌شدند. */
.bp--wide { margin-bottom: 18px; }
.bp--wide:last-child { margin-bottom: 0; }

/* صفحه‌بندی هم به فاصله از آخرین کارت نیاز دارد */
.layout > div > .bp--wide + .navigation,
.layout > div > .navigation { margin-top: 26px; }

@media (max-width: 720px) {
	.bp--wide { margin-bottom: 14px; }
}

/* ================================ ۱۰. فهرست «مرتبط» */

/* کادر و عنوان این بخش به fullstory.tpl منتقل شد؛ relatednews.tpl فقط
   یک <li> است. این استایل‌ها برای همان آیتم است. */
.related a { display: flex; flex-direction: column; gap: 3px; padding: 12px 0; }
.related .rl-cat {
	font-family: var(--mono);
	font-size: 11px;
	color: var(--saffron-d);
	direction: ltr;
	text-align: start;
}
.related .rl-title { font-size: 14.5px; font-weight: 500; color: var(--tx); line-height: 1.7; }
.related a:hover .rl-title { color: var(--saffron-d); }

/* ================================ ۱۱. حذف آکولادهای لوگو */

/* قالب دو طرف لوگو آکولاد می‌گذاشت (rtl-fix.css بخش «لوگو»). این نشانه برای
   لوگوی متنی طراحی شده بود؛ حالا که لوگو تصویر است، هم اضافه است و هم چون
   آکولادها متن CSS هستند بی‌درنگ رسم می‌شوند و تصویر چند صد میلی‌ثانیه بعد
   می‌آید — یعنی کاربر اول دو آکولاد خالی می‌بیند و بعد لوگو وسطشان ظاهر
   می‌شود. همان چیزی که مثل «گلیچ» دیده می‌شد. */
.logo::before,
.logo::after { content: none; display: none; }

/* لوگو نباید در عرض کم توسط فلکس‌باکس هدر جمع شود.
   با width:auto و min-width:0، تصویر تا صفر آب می‌رفت. */
.logo { flex: 0 0 auto; }
.logo img.logo-img { flex: 0 0 auto; min-width: 0; }

/* ================= ۱۲. حذف سایه‌ی متنِ دکمه‌های هسته */
/*
   engine_rtl.css برای کلاس .btn هسته‌ی دیتالایف «text-shadow: 0 1px #333»
   می‌گذارد. نام این کلاس با دکمه‌ی قالب یکی است، پس آن سایه‌ی تیره روی
   همه‌ی دکمه‌ها می‌نشست — روی دکمه‌ی زعفرانی «ورود» در هدر و دکمه‌های
   روشن، متن را مات و سخت‌خوان می‌کرد.
*/
.btn,
.bbcodes,
.btn-border,
.ui-button,
.ui-dialog-title,
.ui-dialog-buttonset button { text-shadow: none; }

/* سایه‌ی جعبه‌ی هسته هم پاک می‌شود و سایه‌های خودِ قالب دوباره اعلام */
.btn { box-shadow: none; }
.btn:hover { box-shadow: var(--sh-2); }

.btn-pay, .btn-buy {
	box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 8px 16px -8px rgba(14,159,110,.55);
}
.btn-pay:hover, .btn-buy:hover {
	box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 12px 22px -10px rgba(14,159,110,.6);
}

.btn-disabled, .btn-disabled:hover,
.btn[disabled], .btn[disabled]:hover,
.btn:disabled, .btn:disabled:hover { box-shadow: none; }


/* ================= ۱۳. تعادل صفحه‌ی محصول */
/*
   ستون خرید در بالای صفحه ۴۲۸ پیکسل بود ولی نوار کنارِ زیرش ۳۲۰ —
   یعنی مرز دو ستون وسط صفحه ۱۰۰ پیکسل جابه‌جا می‌شد و چشم آن پله را
   می‌دید. هر دو حالا روی یک عرض تنظیم شده‌اند و قاب تصویر تا هم‌قد
   شدن با کارت خرید کشیده می‌شود تا زیر گالری فضای خالی نماند.
*/

:root { --pd-side: 344px; }

.pd-top {
	grid-template-columns: minmax(0, 1fr) var(--pd-side);
	gap: 28px;
	align-items: start;
	margin-bottom: 28px;
}
.layout--pd { grid-template-columns: minmax(0, 1fr) var(--pd-side); gap: 28px; }

/* ستون تصویر: قاب پیش‌نمایش + نوار مزایا زیر آن */
/*
   فهرست مزایا از کارت خرید به زیر گالری منتقل شد. کارت خرید کوتاه‌تر
   و ستون تصویر پرتر می‌شود، پس دو ستون تقریباً هم‌قد درمی‌آیند.
*/

.pd-media { display: grid; gap: 16px; align-content: start; }

.pd-gal {
	display: grid;
	place-items: center;
	padding: 16px;
	aspect-ratio: 16 / 10;
	background: linear-gradient(158deg, #17233C 0%, #0F1728 100%);
}
.pd-gal img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	border-radius: 10px;
}

.pd-perks--row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.pd-perks--row li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 13px 16px;
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	font-size: 13px;
	color: var(--tx-2);
}
.pd-perks--row i { flex: 0 0 auto; margin: 0; font-size: 14px; color: var(--saffron-d); }

.pd-buy { padding: 26px 24px; }
.pd-buy h1 { line-height: 1.45; }
.pd-buy__rate { flex-wrap: wrap; row-gap: 4px; }
.pd-buy > *:last-child { margin-bottom: 0; }

/* ------- جدول مشخصات: دو ستونی و با مقدار چسبیده به لبه */
/*
   جدول تک‌ستونی در عرض ~۸۰۰ پیکسل بسیار خلوت بود و مقدارها وسط
   سطر شناور می‌ماندند. حالا سطرها در دو ستون چیده می‌شوند و در هر
   سطر، عنوان در یک سر و مقدار در سر دیگر می‌نشیند.
*/

.specs table { display: block; width: 100%; }
.specs thead { display: none; }

.specs tbody {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

/* خط جداکننده روی «بالای» سطر است تا هیچ ستونی خط آویزان نداشته باشد */
.specs tr {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 20px;
	border-top: 1px solid var(--line-2);
	border-bottom: 0;
}
.specs tr:nth-child(1), .specs tr:nth-child(2) { border-top: 0; }
.specs tr:nth-child(odd) { border-inline-end: 1px solid var(--line-2); }

.specs th, .specs td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	background: none;
	font-size: 13.5px;
}
.specs th { color: var(--tx-2); font-weight: 500; text-align: start; white-space: nowrap; }
.specs td { font-weight: 600; text-align: end; }

/* ------- واکنش‌گرا */

@media (max-width: 1100px) {
	.pd-top, .layout--pd { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
	.specs tbody { grid-template-columns: 1fr; }
	.specs tr { border-inline-end: 0 !important; }
	.specs tr:nth-child(2) { border-top: 1px solid var(--line-2); }
	.specs tr:first-child { border-top: 0; }
}

@media (max-width: 620px) {
	.pd-gal { padding: 12px; }
	.pd-perks--row { grid-template-columns: minmax(0, 1fr); }
	.specs tr { padding: 11px 16px; }
}


/* ================= ۱۴. دکمه‌ی ویرایش برای مدیر */
/*
   تگ [edit] دیتالایف خودش برای کاربر بی‌اجازه حذف می‌شود، پس کادر
   بیرونی خالی می‌ماند و با :empty پنهان می‌شود.
*/

.admin-edit { margin: 0 0 12px; }
.admin-edit:empty { display: none; }

.admin-edit a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 12px;
	border: 1px dashed #E3C88E;
	border-radius: 100px;
	background: #FFF7EA;
	color: #8A5A05;
	font: 600 12px/1.9 'Vazirmatn', sans-serif;
}
.admin-edit a:hover { background: var(--saffron); border-color: var(--saffron); color: #26190A; }
.admin-edit .ic { font-size: 12px; }

/* روی کارت‌های فهرست: نشان کوچک گوشه‌ی کارت */
.prod-card, .bp { position: relative; }

.admin-edit--sm {
	position: absolute;
	top: 10px;
	inset-inline-end: 10px;
	z-index: 6;
	margin: 0;
}
.admin-edit--sm a {
	padding: 4px 10px;
	font-size: 11px;
	border-style: solid;
	border-color: rgba(255,255,255,.22);
	background: rgba(14,22,38,.82);
	color: #fff;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}
.admin-edit--sm a:hover { background: var(--saffron); border-color: var(--saffron); color: #26190A; }

/* در صفحه‌ی مطلب، نشان ویرایش کنار متادیتا می‌نشیند */
.post-meta .admin-edit { margin: 0; }

/* ================= ۱۵. فونت برچسب‌های فارسی */
/*
   این عناصر با var(--mono) نوشته شده بودند چون قرار بود فقط توکن
   لاتین نشان دهند؛ ولی نام دسته‌بندی و نوع محصول فارسی است و در
   فونت مونواسپیس سیستمی رندر می‌شد — یعنی با بقیه‌ی قالب فرق داشت.
   حالا خودِ برچسب وزیرمتن است و مونو فقط روی توکن لاتین <i> می‌ماند.
*/

.pc-type,
.pd-buy__type,
.cr-type,
.bp__cat,
.related .rl-cat,
.fc-item span {
	font-family: 'Vazirmatn', sans-serif;
	letter-spacing: 0;
}

.pc-type,
.pd-buy__type,
.bp__cat,
.related .rl-cat {
	font-size: 12px;
	font-weight: 500;
}

.bp__cat,
.related .rl-cat { direction: rtl; unicode-bidi: normal; }

/* توکن لاتین داخل برچسب همچنان مونو می‌ماند */
.pc-type i,
.pd-buy__type i,
.cr-type i { font-family: var(--mono); }

/* ================= ۱۶. آمار قهرمان صفحه وسط‌چین */

.hero__stats div { text-align: center; }

/* ================= ۱۷. تفکیک «نظر خریداران» از «گفتگو» */

.disc-head { margin: 30px 0 18px; }
.disc-head h3 {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 0 0 6px;
	font-size: 19px;
}
.disc-head h3 .ic { color: var(--saffron-d); font-size: 17px; }
.disc-head p { margin: 0; font-size: 13px; color: var(--tx-2); line-height: 1.95; }

.reviews-box__head h3 span {
	display: block;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--tx-3);
	margin-top: 2px;
}


/* ================= ۱۸. پیوندسازی داخلی در متن مطلب */

/* پاراگراف پیوند مرتبط درون متن */
.story .xlink {
	margin: 24px 0;
	padding: 14px 18px;
	border-inline-start: 3px solid var(--saffron);
	border-radius: var(--r-sm);
	border-start-start-radius: 0;
	border-end-start-radius: 0;
	background: #FFF9EE;
	font-size: 14px;
	line-height: 2.05;
	color: var(--tx-2);
}
.story .xlink a {
	color: var(--saffron-d);
	font-weight: 600;
	border-bottom: 1px solid rgba(239,160,11,.45);
}
.story .xlink a:hover { color: var(--tx); border-color: var(--tx-3); }

/* پیوندی که روی عبارت موجود نشسته */
.story a.xswap { color: var(--saffron-d); border-bottom: 1px solid rgba(239,160,11,.45); }
.story a.xswap:hover { color: var(--tx); border-color: var(--tx-3); }

/* جعبه‌ی بیشتر بخوانید */
.story .xread {
	margin: 34px 0 4px;
	padding: 20px 22px;
	border: 1px solid var(--line);
	border-radius: var(--r);
	background: #FAFBFD;
}
.story .xread > b {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
	font-size: 14px;
	color: var(--tx);
}
.story .xread > b::before {
	content: '';
	width: 16px; height: 16px;
	flex: 0 0 auto;
	background: var(--saffron-d);
	-webkit-mask: var(--m-book) center/contain no-repeat;
	mask: var(--m-book) center/contain no-repeat;
}
.story .xread ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.story .xread li { position: relative; padding-inline-start: 17px; line-height: 1.9; }
.story .xread li::before {
	content: 'ƒ9';
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	color: var(--saffron);
	font-weight: 700;
}
.story .xread a { font-size: 14px; font-weight: 600; color: var(--tx); }
.story .xread a:hover { color: var(--saffron-d); }

@media (max-width: 620px) {
	.story .xlink { padding: 12px 14px; font-size: 13.5px; }
	.story .xread { padding: 16px 18px; }
}


/* ================= ۱۹. بلوک کد در متن مطلب */
/*
   Prism با پوسته‌ی روشن خودش می‌آید: سایه‌ی متن سفید
   و رنگ‌های تیره (مثلاً تگ سرمه‌ای روی پس‌زمینه‌ی تقریباً مشکی‌ی
   قالب). نتیجه متن مات و جاهایی تقریباً ناخوانا بود. اینجا
   سایه برداشته و یک پالت تیره‌ی متناسب جایگزین می‌شود.
*/

.story pre,
.story code,
.story pre *,
.story code * { text-shadow: none !important; }

.story pre[class*="language-"],
.story code[class*="language-"] {
	background: var(--ink);
	color: #E6EAF2;
}

.story pre .token.comment,
.story pre .token.prolog,
.story pre .token.doctype,
.story pre .token.cdata { color: #6E7E99 !important; font-style: italic; }

.story pre .token.punctuation { color: #8B9AB8 !important; }

.story pre .token.tag,
.story pre .token.keyword,
.story pre .token.selector,
.story pre .token.important,
.story pre .token.atrule { color: #7CC5FF !important; }

.story pre .token.attr-name,
.story pre .token.property,
.story pre .token.class-name,
.story pre .token.constant,
.story pre .token.symbol { color: #A5D96A !important; }

.story pre .token.attr-value,
.story pre .token.string,
.story pre .token.char,
.story pre .token.regex,
.story pre .token.url { color: #FFCD7B !important; }

.story pre .token.number,
.story pre .token.boolean,
.story pre .token.entity,
.story pre .token.variable { color: #FFA365 !important; }

.story pre .token.function,
.story pre .token.builtin { color: #DDA9FF !important; }

.story pre .token.operator,
.story pre .token.entity,
.story pre .token.deleted { color: #79C0FF !important; background: none; }

.story pre .token.inserted { color: #6EE7A8 !important; }

.story pre .token.bbcode,
.story pre .token.bbshortcode { color: var(--saffron) !important; }

.story pre .token.namespace { opacity: .75; }

/* کد درون‌خطی روی زمینه‌ی روشن می‌ماند */
.story p code,
.story li code,
.story td code,
.story h2 code,
.story h3 code {
	background: #F1F3F8;
	color: #B3123A;
	border: 1px solid #E4E8F0;
}


/* ================= ۲۰. صفحه‌ی نمایه‌ی کاربر */
/*
   userinfo.tpl نسخه‌ی دست‌نخورده‌ی قالب پیش‌فرض بود و
   کلاس‌هایش (box / usinf / tab-pane) در این قالب هیچ استایلی
   نداشتند. قالب بازنویسی شد و این‌ها استایل آن است.
*/

.usr-head {
	display: flex;
	align-items: center;
	gap: 22px;
	flex-wrap: wrap;
	padding: 26px 28px;
	margin-bottom: 22px;
	background: var(--ink);
	border-radius: var(--r);
	color: var(--tx-d);
	background-image:
		radial-gradient(90% 120% at 88% 0%, rgba(239,160,11,.12), rgba(239,160,11,0) 60%);
}

.usr-head__ava { position: relative; flex: 0 0 auto; }
.usr-head__ava img {
	width: 92px; height: 92px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid rgba(255,255,255,.14);
}
.usr-dot {
	position: absolute;
	inset-inline-end: 4px;
	bottom: 4px;
	width: 16px; height: 16px;
	border-radius: 50%;
	background: var(--tx-3);
	border: 3px solid var(--ink);
	text-decoration: none;
}
.usr-dot--on { background: #34D399; }

.usr-head__bd { flex: 1; min-width: 220px; }
.usr-head__bd h1 { color: #fff; font-size: 26px; margin: 0 0 10px; }

.usr-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 16px; }
.usr-tag {
	padding: 4px 12px;
	border-radius: 100px;
	background: rgba(239,160,11,.16);
	color: var(--saffron);
	font-size: 12.5px;
	font-weight: 700;
}
.usr-state { font-size: 12.5px; color: var(--tx-3); }
.usr-state--on { color: #34D399; }

.usr-head__acts { display: flex; flex-wrap: wrap; gap: 9px; }
.usr-head__acts a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 15px;
	border: 1px solid var(--ink-line);
	border-radius: var(--r-sm);
	background: rgba(255,255,255,.04);
	color: var(--tx-d);
	font-size: 13px;
	font-weight: 600;
}
.usr-head__acts a:hover { background: var(--saffron); border-color: var(--saffron); color: #26190A; }
.usr-head__acts:empty { display: none; }

/* ---- فرم تنظیمات */

.usr-sec {
	margin: 30px 0 16px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--line-2);
	font-size: 16px;
}
.usr-sec:first-of-type { margin-top: 6px; }

.usr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 18px; }
.usr-grid--3 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

.usr-check {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0 0 12px;
	font-size: 13.5px;
	color: var(--tx-2);
	cursor: pointer;
}
.usr-check input { width: auto; margin-top: 5px; accent-color: var(--jade); }

.usr-note { font-size: 12.5px; color: var(--tx-3); margin: -4px 0 6px; }

.usr-soc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.usr-soc a {
	padding: 7px 14px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--tx-2);
	direction: ltr;
}
.usr-soc a:hover { border-color: var(--saffron); background: #FFF7EA; color: var(--saffron-d); }
.usr-soc:empty { display: none; }

.usr-save {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 28px;
	padding-top: 22px;
	border-top: 1px solid var(--line-2);
}
.usr-del a, .usr-del b { font-size: 13px; color: var(--rose); font-weight: 600; cursor: pointer; }

/* دکمه‌هایی که خود دیتالایف در فرم می‌سازد */
#options .bbcodes, #options input[type="button"] {
	display: inline-flex;
	align-items: center;
	padding: 9px 16px;
	border: 1px solid var(--line);
	border-radius: var(--r-sm);
	background: var(--card);
	color: var(--tx-2);
	font: 600 13px 'Vazirmatn', sans-serif;
	cursor: pointer;
}
#options .bbcodes:hover, #options input[type="button"]:hover { border-color: var(--saffron); color: var(--saffron-d); }

@media (max-width: 620px) {
	.usr-head { padding: 20px; gap: 16px; }
	.usr-head__ava img { width: 72px; height: 72px; }
	.usr-head__bd h1 { font-size: 21px; }
	.acc-stats { grid-template-columns: 1fr 1fr; }
}