/* ==========================================================================
   fitrix • content.css
   --------------------------------------------------------------------------
   استایل بخش‌های محتوایی: بلاگ/مقالات، نظرات و امتیاز محصول، سوالات متداول،
   و فرم مدیریت مقاله در پنل.

   چرا فایل جدا و نه <style> داخل ویو؟
   میدل‌ویر express-ejs-layouts با تنظیم «layout extractStyles» تگ‌های
   <style> و <link> را از بدنه‌ی ویو بیرون می‌کشد و در متغیر style می‌گذارد؛
   اما هیچ‌کدام از لی‌اوت‌ها <%- style %> را چاپ نمی‌کنند، پس هر CSS داخل
   ویو عملا دور ریخته می‌شود. (برخلاف <script> که در layout/sweetalert.ejs
   با <%- script %> برگردانده می‌شود.) بنابراین CSS باید در فایل واقعی باشد و
   از هد لی‌اوت لینک شود — همان الگوی program.css و anatomy.css.

   نکته‌ی دوم: public/styles/app.css یک آرتیفکت کامیت‌شده است که با
   tailwind.config.js فقط از پوشه‌ی public (فایل‌های html و js) ساخته می‌شود و کلاس‌های
   ویوهای EJS در آن نیستند؛ پس یوتیلیتی‌های موردنیاز این بخش‌ها هم این‌جا
   تعریف شده‌اند تا مستقل از app.css درست کار کنند.
   ========================================================================== */

/* ══════════════ خوانایی در «نسخه‌ی روشن» ══════════════
   در تم روشن چند رنگ متن روی پس‌زمینه‌ی سفید کم‌کنتراست بودند و متن
   محو دیده می‌شد (مثلا توضیحات محصول یا نام دسته/برند). این لایه فقط
   در حالت روشن رنگ‌ها را یک پله تیره‌تر می‌کند تا به حداقل کنتراست
   استاندارد WCAG (۴.۵) برسند؛ تم تاریک دست‌نخورده می‌ماند.
   ────────────────────────────────────────────────────────── */
html:not(.dark) .text-gray-400 { color: #5b6472; }
html:not(.dark) .text-gray-500 { color: #4b5563; }
html:not(.dark) .text-sky-400  { color: #0369a1; }
html:not(.dark) .text-blue-400 { color: #2563eb; }
/* لینک/دکمه‌های آبی کوچک هم در روشن یک پله تیره‌تر */
html:not(.dark) .text-blue-500 { color: #2563eb; }
/* واریانت child (رنگ روی فرزندان اعمال می‌شود، نه خود عنصر) — مثل نوار
   «ضمانت بازگشت کالا / تضمین اصالت …» در صفحه‌ی محصول که خیلی کم‌رنگ بود */
html:not(.dark) .child\:text-gray-400 > * { color: #5b6472; }
html:not(.dark) .child\:text-gray-500 > * { color: #4b5563; }
/* متن روی پس‌زمینه‌های تیره (فوتر/هدر رنگی) نباید تیره‌تر شود */
html:not(.dark) .bg-gray-800 .text-gray-400,
html:not(.dark) .bg-gray-900 .text-gray-400,
html:not(.dark) footer .text-gray-400,
html:not(.dark) .an-hero .text-gray-400 { color: #d1d5db; }

/* ─────────────── یوتیلیتی‌های کمبود در app.css ─────────────── */
.fx-pre-line { white-space: pre-line; }
.fx-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fx-shrink0 { flex-shrink: 0; }
.fx-lh { line-height: 1.9; }

/* کلاس‌هایی که در قالب‌های موجود استفاده شده‌اند ولی در app.csس کامیت‌شده
   وجود ندارند (پس بی‌اثر بودند). تعریفشان این‌جا همان ظاهر موردنظر نویسنده‌ی
   قالب را برمی‌گرداند — مثلا آیکون کادر «توجه مهم» در صفحه‌ی محصول. */
.shrink-0 { flex-shrink: 0; }
.whitespace-pre-line { white-space: pre-line; }
.leading-7 { line-height: 1.75rem; }
.text-amber-400 { color: #fbbf24; }
.text-amber-500 { color: #f59e0b; }
.text-amber-600 { color: #d97706; }
.dark .dark\:text-amber-400 { color: #fbbf24; }
.text-green-400 { color: #4ade80; }
.dark .dark\:text-green-400 { color: #4ade80; }

/* لینک خلاصه‌ی امتیاز (زیر عنوان محصول) */
.fx-ratelink { display: inline-flex; align-items: center; gap: .5rem; width: fit-content; text-decoration: none; }
.fx-ratelink__t { font-size: .85rem; color: #6b7280; transition: color .15s; }
.dark .fx-ratelink__t { color: #9ca3af; }
.fx-ratelink:hover .fx-ratelink__t { color: #3b82f6; }

/* خلاصه‌ی امتیاز (میانگین + نمودار) */
.fx-rate-summary { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 1.25rem; }
@media (min-width: 640px) { .fx-rate-summary { flex-direction: row; align-items: center; } }
.fx-rate-avg { display: flex; flex-direction: column; align-items: center; gap: .25rem; flex: 0 0 auto; }

/* ─────────────── ستاره‌ها (نمایش و انتخاب) ─────────────── */
.fx-stars { direction: ltr; letter-spacing: 1px; line-height: 1; white-space: nowrap; }
.fx-stars .on { color: #f59e0b; }
.fx-stars .off { color: #d1d5db; }
.dark .fx-stars .off { color: #4b5563; }

/* انتخابگر ستاره در فرم ثبت نظر */
.star-input { display: inline-flex; align-items: center; direction: ltr; }
.star-pick {
    background: none; border: none; cursor: pointer;
    padding: 0 .1rem !important;         /* بر قاعده‌ی سراسری button غلبه کند */
    font-size: 1.7rem; line-height: 1; color: #d1d5db;
    transition: color .12s, transform .12s;
}
.dark .star-pick { color: #4b5563; }
.star-pick:hover { transform: scale(1.12); }
.star-pick.on { color: #f59e0b; }
.star-label { transition: color .15s; }

/* بج وضعیت (در انتظار/تأییدشده/ردشده) */
.fx-badge { font-size: .72rem; padding: .25rem .6rem; border-radius: 999px; display: inline-block; }
.fx-badge--pending  { background: #fef3c7; color: #b45309; }
.fx-badge--ok       { background: #dcfce7; color: #15803d; }
.fx-badge--rejected { background: #fee2e2; color: #b91c1c; }
.dark .fx-badge--pending  { background: rgba(120,53,15,.35);  color: #fcd34d; }
.dark .fx-badge--ok       { background: rgba(20,83,45,.35);   color: #86efac; }
.dark .fx-badge--rejected { background: rgba(127,29,29,.35);  color: #fca5a5; }

/* نشان «خریدار محصول» */
.fx-buyer { font-size: 11px; padding: .15rem .5rem; border-radius: 999px; background: #eff6ff; color: #2563eb; }
.dark .fx-buyer { background: rgba(37,99,235,.2); color: #93c5fd; }

/* نمودار توزیع امتیاز */
.fx-dist { display: flex; flex-direction: column; gap: .4rem; width: 100%; max-width: 24rem; }
.fx-dist__row { display: flex; align-items: center; gap: .5rem; font-size: .75rem; }
.fx-dist__lbl { width: 4.2rem; flex: 0 0 auto; color: #6b7280; }
.dark .fx-dist__lbl { color: #9ca3af; }
.fx-dist__bar { flex: 1; height: .5rem; border-radius: 999px; background: #e5e7eb; overflow: hidden; }
.dark .fx-dist__bar { background: #374151; }
.fx-dist__fill { height: 100%; background: #f59e0b; border-radius: 999px; }
.fx-dist__n { width: 2rem; flex: 0 0 auto; text-align: left; direction: ltr; color: #9ca3af; }
.fx-avg { font-size: 2.25rem; font-weight: 800; color: #f59e0b; line-height: 1.2; }

/* ─────────────── سوالات متداول (آکاردئون) ─────────────── */
details.faq-item > summary { list-style: none; cursor: pointer; }
details.faq-item > summary::-webkit-details-marker { display: none; }
.faq-chev { transition: transform .25s ease; flex: 0 0 auto; }
details.faq-item[open] .faq-chev { transform: rotate(180deg); }

/* ══════════ محتوای غنی صفحه‌ی محصول (مزایا، ترکیبات، مشخصات) ══════════ */
.fx-pd-head {
    display: flex; align-items: center; gap: .45rem;
    margin: 1.6rem 0 .5rem; font-size: 1.02rem; font-weight: 800; color: #1f2937; line-height: 1.8;
}
.dark .fx-pd-head { color: #f3f4f6; }
.fx-pd-head__ic { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; color: #2563eb; }
.fx-pd-list { margin: .35rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.fx-pd-list li {
    position: relative; padding-right: 1.4rem; line-height: 1.95;
    font-size: .92rem; color: #4b5563;
}
.dark .fx-pd-list li { color: #d1d5db; }
.fx-pd-list li::before {
    content: ""; position: absolute; right: .35rem; top: .72rem;
    width: .42rem; height: .42rem; border-radius: 999px; background: #3b82f6;
}
.fx-pd-warn {
    margin-top: 1.4rem; border-radius: .6rem; padding: .85rem 1rem;
    background: #fff7ed; border: 1px solid #fdba74;
}
.dark .fx-pd-warn { background: rgba(120,53,15,.18); border-color: rgba(251,146,60,.35); }
.fx-pd-warn__t { font-weight: 800; font-size: .9rem; color: #c2410c; margin-bottom: .25rem; }
.dark .fx-pd-warn__t { color: #fdba74; }
.fx-pd-warn__b { font-size: .86rem; line-height: 1.95; color: #7c2d12; }
.dark .fx-pd-warn__b { color: #fed7aa; }

/* جدول مشخصات */
.fx-spec { width: 100%; max-width: 34rem; border-collapse: collapse; margin: 1.1rem 0 .5rem; }
.fx-spec th, .fx-spec td { padding: .65rem .8rem; font-size: .9rem; text-align: right; vertical-align: top; }
.fx-spec th { width: 42%; font-weight: 500; color: #6b7280; background: #f8fafc; border-bottom: 1px solid #eef2f7; }
.fx-spec td { font-weight: 700; color: #1f2937; border-bottom: 1px solid #eef2f7; }
.dark .fx-spec th { color: #9ca3af; background: rgba(255,255,255,.03); border-bottom-color: rgba(255,255,255,.07); }
.dark .fx-spec td { color: #f3f4f6; border-bottom-color: rgba(255,255,255,.07); }
.fx-spec tr:last-child th, .fx-spec tr:last-child td { border-bottom: none; }

/* ───── تیزر کوچک آخرین مقاله، زیر عکس محصول (shop/_articleTeaser.ejs) ─────
   عمدا کم‌ارتفاع و کم‌رنگ است تا حواس خریدار را از دکمه‌ی خرید نگیرد و فقط
   خبر بدهد که برای این محصول مقاله‌ای هم هست. */
.fx-artmini {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    padding: .5rem .6rem; border: 1px solid #e5e7eb; border-radius: .55rem;
    background: #f8fbff; text-decoration: none;
    transition: border-color .2s, background .2s;
}
.dark .fx-artmini { background: rgba(37,99,235,.08); border-color: rgba(255,255,255,.1); }
.fx-artmini:hover { border-color: #93c5fd; background: #eff6ff; }
.dark .fx-artmini:hover { background: rgba(37,99,235,.16); }
.fx-artmini__ic { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; color: #3b82f6; }
.fx-artmini__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fx-artmini__label { font-size: .62rem; color: #9ca3af; line-height: 1.4; }
.fx-artmini__title {
    font-size: .76rem; font-weight: 600; color: #334155; line-height: 1.55;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dark .fx-artmini__title { color: #cbd5e1; }
.fx-artmini:hover .fx-artmini__title { color: #2563eb; }
.dark .fx-artmini:hover .fx-artmini__title { color: #93c5fd; }
.fx-artmini__go { width: .85rem; height: .85rem; flex: 0 0 auto; color: #9ca3af; }
.fx-artmini:hover .fx-artmini__go { color: #3b82f6; }

/* ========================== بلاگ: فهرست ========================== */
.blog-wrap { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }
.blog-head { text-align: center; margin: 1.5rem 0 2rem; }
.blog-head h1 { font-size: 1.8rem; font-weight: 800; line-height: 1.6; }
@media (min-width: 768px) { .blog-head h1 { font-size: 2.1rem; } }
.blog-head p { color: #6b7280; margin-top: .6rem; font-size: .95rem; }
.dark .blog-head p { color: #9ca3af; }
.blog-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 640px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }
.blog-card { display: flex; flex-direction: column; background: #fff; border-radius: .9rem; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,.06); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.dark .blog-card { background: #1f2937; }
.blog-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.13); }
.blog-card__imgwrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: linear-gradient(135deg,#dbeafe,#eff6ff); overflow: hidden; }
.dark .blog-card__imgwrap { background: linear-gradient(135deg,#1e3a5f,#111827); }
.blog-card__imgwrap img { width: 100%; height: 100%; object-fit: cover; }
.blog-card__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #93c5fd; }
.blog-card__body { display: flex; flex-direction: column; gap: .55rem; padding: 1rem; flex: 1; }
.blog-card__title { font-weight: 700; font-size: 1rem; line-height: 1.75; color: #1f2937; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dark .blog-card__title { color: #f3f4f6; }
.blog-card__excerpt { font-size: .84rem; color: #6b7280; line-height: 1.9; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; }
.dark .blog-card__excerpt { color: #9ca3af; }
.blog-card__meta { display: flex; align-items: center; justify-content: space-between; font-size: .72rem; color: #5b6472; padding-top: .55rem; border-top: 1px solid rgba(0,0,0,.06); }
.dark .blog-card__meta { border-top-color: rgba(255,255,255,.08); }
.blog-empty { text-align: center; color: #9ca3af; padding: 4rem 1rem; }
.blog-pager { display: flex; justify-content: center; align-items: center; gap: .4rem; margin-top: 2.5rem; flex-wrap: wrap; }
.blog-pager a, .blog-pager span { min-width: 2.4rem; text-align: center; padding: .5rem .7rem; border-radius: .55rem; font-size: .88rem; border: 1px solid #e5e7eb; color: #374151; text-decoration: none; }
.dark .blog-pager a, .dark .blog-pager span { border-color: #374151; color: #d1d5db; }
.blog-pager a:hover { border-color: #93c5fd; color: #2563eb; }
.blog-pager .is-active { background: #3b82f6; color: #fff; border-color: #3b82f6; }
.blog-pager .is-disabled { opacity: .4; }

/* ========================== بلاگ: صفحه‌ی مقاله ========================== */
.art-wrap { max-width: 820px; margin: 0 auto; padding: 1rem 1rem 3rem; }
.art-bc { font-size: .8rem; color: #6b7280; margin: 1rem 0; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.art-bc a { color: #6b7280; text-decoration: none; }
.art-bc a:hover { color: #3b82f6; }
.dark .art-bc, .dark .art-bc a { color: #9ca3af; }
.art-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 1rem; margin-bottom: 1.25rem; box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.art-title { font-size: 1.6rem; font-weight: 800; line-height: 1.7; color: #111827; }
@media (min-width: 768px) { .art-title { font-size: 1.95rem; } }
.dark .art-title { color: #f9fafb; }
.art-meta { display: flex; flex-wrap: wrap; gap: 1rem; color: #6b7280; font-size: .82rem; margin: .8rem 0 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(0,0,0,.08); }
.dark .art-meta { color: #9ca3af; border-bottom-color: rgba(255,255,255,.1); }
.art-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.art-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.25rem; }
.art-chip { font-size: .75rem; padding: .3rem .7rem; border-radius: 999px; background: #eff6ff; color: #2563eb; text-decoration: none; }
.art-chip:hover { background: #dbeafe; }
.dark .art-chip { background: rgba(37,99,235,.18); color: #93c5fd; }

/* تایپوگرافی متن مقاله */
.art-body { color: #374151; font-size: 1rem; line-height: 2.1; }
.dark .art-body { color: #d1d5db; }
.art-body h2 { font-size: 1.35rem; font-weight: 800; margin: 1.8rem 0 .8rem; color: #111827; line-height: 1.7; }
.art-body h3 { font-size: 1.15rem; font-weight: 700; margin: 1.4rem 0 .6rem; color: #1f2937; line-height: 1.7; }
.dark .art-body h2 { color: #f3f4f6; }
.dark .art-body h3 { color: #e5e7eb; }
.art-body p { margin: 0 0 1rem; }
.art-body ul, .art-body ol { margin: 0 0 1rem; padding-right: 1.4rem; }
.art-body ul { list-style: disc; }
.art-body ol { list-style: decimal; }
.art-body li { margin: .35rem 0; }
.art-body a { color: #2563eb; text-decoration: underline; }
/* تصویر داخل مقاله. ادیتور یک <img> لخت بدون wrapper درج می‌کند و img
   به‌طور پیش‌فرض inline است — یعنی روی خط متن می‌نشیند، زیرش فاصله‌ی
   descender می‌افتد و اگر از ستون باریک‌تر باشد به لبه‌ی راست می‌چسبد.
   block + margin auto وسط‌چینش می‌کند و از متن جدا نگهش می‌دارد. */
.art-body img {
  display: block;
  /* هر دو سقف با هم: مرورگر نسبت تصویر را نگه می‌دارد و داخل کادر
     کوچکش می‌کند. بدون سقف ارتفاع، یک عکس مربعی ۱۲۰۰ پیکسلی کل
     ستون را می‌گیرد و خواننده مجبور می‌شود یک صفحهٔ کامل اسکرول کند. */
  max-width: 100%;
  max-height: 26rem;
  height: auto;
  margin: 1.8rem auto;
  border-radius: .75rem;
}
/* پیش‌تر این‌جا width: auto بود. خصیصه‌ی width روی <img> یک «راهنمای
   نمایشی» است و در آبشار CSS از هر قاعده‌ی شیوه‌نامه ضعیف‌تر — پس آن
   width: auto هر عرضی را که نویسنده در ویراستار تعیین می‌کرد بی‌صدا
   خنثی می‌کرد. حالا نبودش یعنی تصویر بی‌خصیصه همان auto  پیش‌فرض را
   دارد (بی‌تغییر) و تصویر دارای width همان را می‌گیرد.
   سقف ارتفاع هم باید کنار برود، وگرنه روی عکس بلند مرورگر ارتفاع را
   می‌برد و عرض تعیین‌شده هیچ‌وقت دیده نمی‌شود. */
.art-body img[width] { max-height: none; }
/* راهنمای انتخاب — فقط داخل ویراستار، در صفحه‌ی عمومی وجود ندارد */
.fx-ed-area img.fx-img-sel { outline: 2px solid #3b82f6; outline-offset: 2px; }
/* فقط در تم تاریک یک کادر محو، تا عکس با پس‌زمینه‌ی سفید مثل یک
   مستطیل نورانی روی صفحه نزند */
.dark .art-body img { box-shadow: 0 0 0 1px #1f2937; }
/* اگر روزی figure/figcaption استفاده شد، از قبل آماده باشد */
.art-body figure { margin: 1.8rem 0; }
.art-body figure img { margin: 0 auto .6rem; }
.art-body figcaption { font-size: .82rem; color: #6b7280; text-align: center; line-height: 1.9; }
.dark .art-body figcaption { color: #9ca3af; }
.art-body blockquote { border-right: 4px solid #3b82f6; background: rgba(59,130,246,.06); padding: .75rem 1rem; border-radius: .5rem; margin: 1rem 0; color: #4b5563; }
.dark .art-body blockquote { color: #cbd5e1; }
.art-body strong { font-weight: 700; }
.art-body table { width: 100%; border-collapse: collapse; margin: 1rem 0; display: block; overflow-x: auto; }
.art-body th, .art-body td { border: 1px solid #e5e7eb; padding: .5rem .7rem; font-size: .9rem; }
.dark .art-body th, .dark .art-body td { border-color: #374151; }

.art-section-title { font-size: 1.15rem; font-weight: 800; margin: 2rem 0 1rem; display: flex; align-items: center; gap: .5rem; }
.art-prod-grid, .art-rel-grid { display: grid; grid-template-columns: 1fr; gap: .9rem; }
@media (min-width: 640px) { .art-prod-grid, .art-rel-grid { grid-template-columns: repeat(3, 1fr); } }
.art-prod { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1rem; border: 1px solid #e5e7eb; border-radius: .8rem; text-decoration: none; background: #fff; transition: border-color .2s, transform .2s; }
.dark .art-prod { background: #1f2937; border-color: #374151; }
.art-prod:hover { border-color: #93c5fd; transform: translateY(-3px); }
.art-prod img { width: 100%; height: 7.5rem; object-fit: contain; }
.art-prod__title { font-size: .85rem; font-weight: 700; color: #1f2937; text-align: center; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dark .art-prod__title { color: #f3f4f6; }
.art-prod__price { font-size: .85rem; color: #2563eb; font-weight: 700; }
.art-rel { display: block; padding: 1rem; border: 1px solid #e5e7eb; border-radius: .8rem; text-decoration: none; background: #fff; transition: border-color .2s; }
.dark .art-rel { background: #1f2937; border-color: #374151; }
.art-rel:hover { border-color: #93c5fd; }
.art-rel__title { font-size: .9rem; font-weight: 700; color: #1f2937; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dark .art-rel__title { color: #f3f4f6; }
.art-rel__ex { font-size: .78rem; color: #6b7280; margin-top: .35rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ================= پنل: فرم ساخت/ویرایش مقاله ================= */
.af-card { background: #fff; border-radius: .75rem; box-shadow: 0 4px 16px rgba(0,0,0,.05); padding: 1.25rem; }
.dark .af-card { background: #1f2937; }
.af-label { display: block; font-size: .85rem; font-weight: 600; color: #6b7280; margin-bottom: .5rem; }
.dark .af-label { color: #9ca3af; }
.af-input, .af-textarea, .af-select { width: 100%; padding: .65rem .75rem; font-size: .9rem; border: 1px solid #d1d5db; border-radius: .5rem; outline: none; background: #f8fafc; color: #111827; font-family: inherit; }
.dark .af-input, .dark .af-textarea, .dark .af-select { background: #111827; color: #f3f4f6; border-color: #374151; }
.af-input:focus, .af-textarea:focus, .af-select:focus { border-color: #3b82f6; box-shadow: 0 0 0 2px rgba(59,130,246,.15); }
.af-textarea { resize: vertical; line-height: 1.9; }
.af-hint { font-size: .72rem; color: #9ca3af; margin-top: .35rem; line-height: 1.8; }
.af-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .af-grid-2 { grid-template-columns: 1fr 1fr; } }
.af-muscles { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
@media (min-width: 640px) { .af-muscles { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .af-muscles { grid-template-columns: repeat(4, 1fr); } }
.af-check { display: flex; align-items: center; gap: .4rem; font-size: .82rem; padding: .45rem .5rem; border: 1px solid #e5e7eb; border-radius: .5rem; cursor: pointer; }
.dark .af-check { border-color: #374151; }
.af-check:hover { border-color: #93c5fd; }
.af-toolbar { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.af-toolbar button { font-size: .78rem; padding: .35rem .6rem !important; border: 1px solid #d1d5db; border-radius: .4rem; background: #f1f5f9; color: #334155; cursor: pointer; }
.dark .af-toolbar button { background: #374151; color: #e5e7eb; border-color: #4b5563; }
.af-toolbar button:hover { background: #e2e8f0; }
.af-actions { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.af-btn-primary { background: #3b82f6; color: #fff; border: none; border-radius: .55rem; padding: .7rem 1.6rem !important; font-weight: 700; font-size: .9rem; cursor: pointer; }
.af-btn-primary:hover { background: #2563eb; }
.af-btn-ghost { background: #f1f5f9; color: #334155; border: none; border-radius: .55rem; padding: .7rem 1.4rem; font-size: .9rem; text-decoration: none; display: inline-flex; align-items: center; }
.dark .af-btn-ghost { background: #374151; color: #e5e7eb; }

/* ================= ویراستار متن مقاله (editor.js) ================= */
.fx-editor { border: 1px solid #d1d5db; border-radius: .6rem; overflow: hidden; background: #fff; }
.dark .fx-editor { border-color: #374151; background: #111827; }
.fx-ed-bar { display: flex; flex-wrap: wrap; gap: .25rem; padding: .45rem; background: #f8fafc; border-bottom: 1px solid #e5e7eb; }
.dark .fx-ed-bar { background: #1f2937; border-bottom-color: #374151; }
.fx-ed-btn {
    font-size: .78rem; line-height: 1; padding: .4rem .55rem !important;
    border: 1px solid #e2e8f0; border-radius: .35rem; background: #fff; color: #334155;
    cursor: pointer; transition: background .15s, border-color .15s;
}
.dark .fx-ed-btn { background: #111827; color: #e5e7eb; border-color: #374151; }
.fx-ed-btn:hover { background: #eff6ff; border-color: #93c5fd; color: #2563eb; }
.fx-ed-sep { width: 1px; align-self: stretch; background: #e2e8f0; margin: 0 .2rem; }
.dark .fx-ed-sep { background: #374151; }
.fx-ed-area {
    min-height: 22rem; max-height: 40rem; overflow-y: auto; padding: 1rem 1.1rem;
    outline: none; background: #fff; color: #374151;
}
.dark .fx-ed-area { background: #111827; color: #e5e7eb; }
.fx-ed-area:focus { box-shadow: inset 0 0 0 2px rgba(59,130,246,.15); }
.fx-ed-area.is-drop { box-shadow: inset 0 0 0 2px #3b82f6; }
.fx-ed-area:empty::before { content: "متن مقاله را این‌جا بنویسید یا از Word کپی و Paste کنید…"; color: #9ca3af; }
/* تصاویر داخل ویراستار از کادر بیرون نزنند */
.fx-ed-area img { max-width: 100%; height: auto; border-radius: .5rem; }
.fx-ed-code {
    width: 100%; min-height: 22rem; border: none; outline: none; padding: 1rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem; line-height: 1.9;
    background: #0f172a; color: #e2e8f0; resize: vertical;
}
.fx-ed-status { padding: .45rem .8rem; font-size: .72rem; color: #6b7280; background: #f8fafc; border-top: 1px solid #e5e7eb; }
.dark .fx-ed-status { background: #1f2937; color: #9ca3af; border-top-color: #374151; }

/* پیش‌نمایش تصویر کاور در فرم مقاله */
.fx-cover { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.fx-cover__prev { width: 12rem; aspect-ratio: 16/9; border-radius: .6rem; overflow: hidden; background: #f1f5f9; border: 1px solid #e5e7eb; display: flex; align-items: center; justify-content: center; }
.dark .fx-cover__prev { background: #1f2937; border-color: #374151; }
.fx-cover__prev img { width: 100%; height: 100%; object-fit: cover; }
.fx-cover__prev span { font-size: .75rem; color: #9ca3af; }
.fx-cover__fields { flex: 1 1 16rem; display: flex; flex-direction: column; gap: .6rem; }
.fx-file {
    display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
    font-size: .82rem; font-weight: 600; color: #2563eb;
    background: #eff6ff; border: 1px dashed #93c5fd; border-radius: .5rem; padding: .6rem .9rem;
}
.dark .fx-file { background: rgba(37,99,235,.12); border-color: #1e3a5f; color: #93c5fd; }
.fx-file:hover { background: #dbeafe; }
.fx-file input[type="file"] { display: none; }

/* ================= پنل: کارت نظرات و لیست مقالات ================= */
.fx-adm-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.fx-adm-btn { font-size: .75rem; color: #fff; border: none; border-radius: .5rem; padding: .4rem .8rem !important; cursor: pointer; }
.fx-adm-btn--ok { background: #22c55e; }
.fx-adm-btn--ok:hover { background: #16a34a; }
.fx-adm-btn--warn { background: #f59e0b; }
.fx-adm-btn--warn:hover { background: #d97706; }
.fx-adm-btn--danger { background: #ef4444; }
.fx-adm-btn--danger:hover { background: #dc2626; }
.fx-adm-btn--info { background: #3b82f6; }
.fx-adm-btn--info:hover { background: #2563eb; }
.fx-adm-btn--muted { background: #f1f5f9; color: #334155; }
.dark .fx-adm-btn--muted { background: #374151; color: #e5e7eb; }
.fx-tabs { display: flex; flex-wrap: wrap; gap: .5rem; }
.fx-tab { font-size: .82rem; border-radius: .5rem; padding: .5rem .8rem; text-decoration: none; background: #f1f5f9; color: #4b5563; }
.dark .fx-tab { background: #111827; color: #d1d5db; }
.fx-tab:hover { color: #2563eb; }
.fx-tab.is-active { background: #3b82f6; color: #fff; }

/* ═══════════ فهرست کامل محصولات (/products) ═══════════ */
.fx-idx-head { font-size: 1.15rem; font-weight: 800; margin: 2rem 0 .75rem; color: #1f2937; }
.dark .fx-idx-head { color: #f3f4f6; }
.fx-idx-count { font-size: .78rem; font-weight: 500; color: #6b7280; }
.fx-idx-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.fx-idx-list { display: grid; grid-template-columns: 1fr; gap: .1rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .fx-idx-list { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .fx-idx-list { grid-template-columns: repeat(3, 1fr); } }
.fx-idx-list a {
    display: block; padding: .55rem .6rem; font-size: .88rem; line-height: 1.8;
    color: #374151; text-decoration: none; border-radius: .45rem;
}
.dark .fx-idx-list a { color: #d1d5db; }
.fx-idx-list a:hover { background: #eff6ff; color: #2563eb; }
.dark .fx-idx-list a:hover { background: rgba(37,99,235,.14); color: #93c5fd; }
.fx-idx-brand { font-size: .72rem; color: #9ca3af; margin-right: .35rem; }

/* ═══════════ معرفی فروشگاه در صفحه‌ی اصلی ═══════════
   عنوان بخش با کلاس‌های Tailwind خود قالب ساخته می‌شود (همان‌هایی که
   بقیه‌ی بخش‌های صفحه‌ی اصلی استفاده می‌کنند و قبلا در app.css کامپایل
   شده‌اند). این‌جا فقط چیزهایی می‌آید که Tailwind ندارد — پس نیازی به
   ری‌بیلد app.css نیست. */

/* دکمه‌ی کوچک کنار عنوان — «همه‌ی محصولات» / «همه‌ی پرسش‌ها» */
.fx-intro-cta {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: .82rem; font-weight: 600; color: #2563eb;
  padding: .45rem .9rem; border-radius: 999px;
  background: #eff6ff; border: 1px solid #dbeafe;
  transition: background .18s ease, transform .18s ease;
  white-space: nowrap;
}
.fx-intro-cta:hover { background: #dbeafe; }
.fx-intro-cta:active { transform: scale(.97); }
.dark .fx-intro-cta { color: #93c5fd; background: rgba(37,99,235,.14); border-color: rgba(37,99,235,.28); }
.dark .fx-intro-cta:hover { background: rgba(37,99,235,.22); }

.fx-intro-lead {
  font-size: .9rem; line-height: 2.05; color: #4b5563;
  max-width: 62ch; margin: 1.4rem 0 0;
}
.dark .fx-intro-lead { color: #d1d5db; }
.fx-intro-lead strong { color: #1f2937; font-weight: 700; }
.dark .fx-intro-lead strong { color: #f3f4f6; }

.fx-intro-sub {
  font-size: .95rem; font-weight: 700; color: #1f2937;
  margin: 1.6rem 0 .9rem;
}
.dark .fx-intro-sub { color: #f3f4f6; }

/* کارت‌های دسته‌بندی — همان شعاع و رنگ کارت‌های دیگر سایت */
.fx-cat-grid { display: grid; grid-template-columns: 1fr; gap: .7rem; }
@media (min-width: 640px) { .fx-cat-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .fx-cat-grid { grid-template-columns: 1fr 1fr 1fr; } }

.fx-cat {
  display: flex; align-items: center; gap: .85rem;
  padding: .85rem .95rem;
  border: 1px solid #e5e7eb; border-radius: .85rem; background: #fff;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.fx-cat:hover { border-color: #bfdbfe; box-shadow: 0 10px 24px -18px rgba(37,99,235,.55); }
.fx-cat:active { transform: scale(.99); }
.dark .fx-cat { border-color: #374151; background: #1f2937; }
.dark .fx-cat:hover { border-color: rgba(59,130,246,.5); }

.fx-cat-img {
  flex: none; width: 3.4rem; height: 3.4rem; border-radius: .7rem;
  background: #f8fafc; display: grid; place-items: center;
}
.dark .fx-cat-img { background: rgba(255,255,255,.04); }
.fx-cat-img img { width: 100%; height: 100%; object-fit: contain; padding: .35rem; }

.fx-cat-txt { display: grid; gap: .1rem; min-width: 0; }
.fx-cat-txt strong { font-size: .88rem; font-weight: 700; color: #1f2937; line-height: 1.7; }
.dark .fx-cat-txt strong { color: #f3f4f6; }
.fx-cat-txt span {
  font-size: .76rem; line-height: 1.85; color: #6b7280;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dark .fx-cat-txt span { color: #9ca3af; }

/* پیکان انتهای کارت — با CSS ساخته می‌شود تا یک درخواست آیکون کمتر شود.
   گوشه‌ی راست‌وپایین با چرخش ۱۳۵ درجه به چپ اشاره می‌کند (جهت «برو» در RTL).
   translate بعد از rotate در دستگاه چرخیده اعمال می‌شود، پس (۲و۲) روی
   صفحه یعنی حرکت به چپ. */
.fx-cat-go {
  flex: none; margin-inline-start: auto;
  width: .5rem; height: .5rem;
  border-right: 2px solid #9ca3af; border-bottom: 2px solid #9ca3af;
  transform: rotate(135deg);
  transition: transform .2s ease, border-color .2s ease;
}
.fx-cat:hover .fx-cat-go { border-color: #2563eb; transform: rotate(135deg) translate(2px, 2px); }
.dark .fx-cat:hover .fx-cat-go { border-color: #93c5fd; }

.fx-intro-more {
  font-size: .86rem; line-height: 2.05; color: #4b5563; margin: 1.2rem 0 0;
}
.dark .fx-intro-more { color: #d1d5db; }
.fx-intro-more a { color: #2563eb; text-decoration: none; }
.fx-intro-more a:hover { text-decoration: underline; }
.dark .fx-intro-more a { color: #93c5fd; }

@media (prefers-reduced-motion: reduce) {
  .fx-cat, .fx-cat-go, .fx-intro-cta { transition: none; }
}

/* ═══════════ فوتر — منتقل‌شده از resource/views/layout/footer.ejs ═══════════ */
/* قالب با extractStyles هر بلاک style داخل ویو را حذف می‌کند، پس این قوانین
   باید اینجا زندگی کنند وگرنه هرگز اعمال نمی‌شوند. */
#zarinpal { margin: auto; }
#zarinpal img { width: 80px; }

/* ═══════════ صفحات ثابت: درباره‌ی ما / تماس / پرسش‌های پرتکرار ═══════════ */
.fx-page { max-width: 60rem; margin: 0 auto 2.5rem; }
.fx-page h2 { font-size: 1.15rem; font-weight: 800; color: #1f2937; margin: 1.8rem 0 .7rem; line-height: 1.9; }
.dark .fx-page h2 { color: #f3f4f6; }
.fx-page p { font-size: .92rem; line-height: 2.1; color: #4b5563; margin-bottom: .8rem; }
.dark .fx-page p { color: #d1d5db; }
.fx-page a { color: #2563eb; text-decoration: none; }
.fx-page a:hover { text-decoration: underline; }
.dark .fx-page a { color: #93c5fd; }
.fx-page-list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: .8rem; }
.fx-page-list li { position: relative; padding-right: 1.15rem; font-size: .9rem; line-height: 2.05; color: #4b5563; }
.dark .fx-page-list li { color: #d1d5db; }
.fx-page-list li::before { content: ""; position: absolute; right: .2rem; top: .85rem; width: .38rem; height: .38rem; border-radius: 999px; background: #3b82f6; }
.fx-page-list strong { color: #1f2937; font-weight: 800; }
.dark .fx-page-list strong { color: #f3f4f6; }

/* آکاردئون پرسش‌های پرتکرار */
.fx-faq { max-width: 60rem; margin: 0 auto 2.5rem; display: grid; gap: .7rem; }
.fx-faq-item { border: 1px solid #e5e7eb; border-radius: .85rem; background: #fff; overflow: hidden; }
.dark .fx-faq-item { border-color: #374151; background: #1f2937; }
.fx-faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: 1rem 1.1rem; }
.fx-faq-item summary::-webkit-details-marker { display: none; }
.fx-faq-q { font-size: .96rem; font-weight: 700; color: #1f2937; margin: 0; line-height: 1.9; }
.dark .fx-faq-q { color: #f3f4f6; }
.fx-faq-chev { flex: none; width: .55rem; height: .55rem; border-right: 2px solid #6b7280; border-bottom: 2px solid #6b7280; transform: rotate(45deg); transition: transform .2s; }
.dark .fx-faq-chev { border-color: #9ca3af; }
.fx-faq-item[open] .fx-faq-chev { transform: rotate(-135deg); }
.fx-faq-a { padding: 0 1.1rem 1.1rem; }
.fx-faq-a p { font-size: .89rem; line-height: 2.1; color: #4b5563; margin: 0; }
.dark .fx-faq-a p { color: #d1d5db; }
.fx-faq-cta { max-width: 60rem; margin: 0 auto 2.5rem; padding: 1.2rem 1.3rem; border-radius: .9rem; background: #eff6ff; }
.dark .fx-faq-cta { background: rgba(37,99,235,.12); }
.fx-faq-cta h2 { font-size: 1.02rem; font-weight: 800; color: #1f2937; margin: 0 0 .5rem; }
.dark .fx-faq-cta h2 { color: #f3f4f6; }
.fx-faq-cta p { font-size: .89rem; line-height: 2.05; color: #4b5563; margin: 0; }
.dark .fx-faq-cta p { color: #d1d5db; }
.fx-faq-cta a { color: #2563eb; text-decoration: none; }
.fx-faq-cta a:hover { text-decoration: underline; }
.dark .fx-faq-cta a { color: #93c5fd; }

/* کارت‌های تماس */
.fx-contact { max-width: 60rem; margin: 0 auto 2.5rem; display: grid; grid-template-columns: 1fr; gap: .8rem; }
@media (min-width: 640px) { .fx-contact { grid-template-columns: 1fr 1fr; } }
.fx-contact-card { display: flex; flex-direction: column; gap: .3rem; padding: 1.1rem 1.2rem; border: 1px solid #e5e7eb; border-radius: .9rem; background: #fff; text-decoration: none; transition: border-color .2s, transform .2s; }
.dark .fx-contact-card { border-color: #374151; background: #1f2937; }
.fx-contact-card:hover { border-color: #3b82f6; transform: translateY(-2px); }
.fx-contact-label { font-size: .78rem; color: #6b7280; }
.dark .fx-contact-label { color: #9ca3af; }
.fx-contact-value { font-size: 1rem; font-weight: 800; color: #1f2937; }
.dark .fx-contact-value { color: #f3f4f6; }
.fx-contact-note { font-size: .75rem; color: #6b7280; }
.dark .fx-contact-note { color: #9ca3af; }

/* پرسش‌های پرتکرار صفحه‌ی اصلی */
/* عرض و فاصله را کلاس‌های قالب می‌دهند (mx-4 lg:container mt-10 lg:mt-20)؛
   اگر این‌جا هم max-width بگذاریم، چون content.css بعد از app.css لود
   می‌شود بر container غلبه می‌کند و این بخش از بخش بالایی باریک‌تر می‌افتد. */
.fx-faq-home .fx-faq { max-width: none; margin: 1.4rem 0 1rem; }

/* متن معرفی فهرست بلاگ */
.fx-blog-intro { max-width: 60rem; margin: 0 auto 2rem; }
.fx-blog-intro p { font-size: .9rem; line-height: 2.1; color: #4b5563; margin-bottom: .7rem; }
.dark .fx-blog-intro p { color: #d1d5db; }
.fx-blog-intro a { color: #2563eb; text-decoration: none; }
.fx-blog-intro a:hover { text-decoration: underline; }
.dark .fx-blog-intro a { color: #93c5fd; }

/* ═══════════ مراحل مصرف (HowTo) ═══════════ */
.fx-howto { margin: 1.1rem 0 0; padding: 0; list-style: none; counter-reset: fxstep; display: grid; gap: .7rem; }
.fx-howto li { counter-increment: fxstep; position: relative; padding-right: 2.4rem; font-size: .92rem; line-height: 2.05; color: #374151; }
.dark .fx-howto li { color: #d1d5db; }
.fx-howto li::before {
  content: counter(fxstep); position: absolute; right: 0; top: .28rem;
  width: 1.65rem; height: 1.65rem; border-radius: 999px;
  background: #2563eb; color: #fff; font-size: .8rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.dark .fx-howto li::before { background: #3b82f6; }

/* ═══════════ نویسنده: کارت پایین مقاله + صفحه‌ی پروفایل ═══════════ */
.fx-authorbox {
  display: flex; gap: 1rem; align-items: flex-start;
  margin: 2.2rem 0 1rem; padding: 1.2rem 1.3rem;
  border: 1px solid #e5e7eb; border-radius: .95rem; background: #f9fafb;
}
.dark .fx-authorbox { border-color: #374151; background: #1f2937; }
.fx-authorbox__avatar {
  flex: none; width: 4rem; height: 4rem; border-radius: 999px; object-fit: cover;
  border: 2px solid #dbeafe;
}
.dark .fx-authorbox__avatar { border-color: rgba(59,130,246,.35); }
.fx-authorbox__avatar--ph {
  display: flex; align-items: center; justify-content: center;
  background: #2563eb; color: #fff; font-size: 1.5rem; font-weight: 800;
}
.fx-authorbox__body { min-width: 0; }
.fx-authorbox__label { font-size: .72rem; color: #6b7280; margin: 0 0 .15rem; }
.dark .fx-authorbox__label { color: #9ca3af; }
.fx-authorbox__name { font-size: 1.02rem; font-weight: 800; margin: 0 0 .3rem; }
.fx-authorbox__name a { color: #1f2937; text-decoration: none; }
.fx-authorbox__name a:hover { color: #2563eb; }
.dark .fx-authorbox__name a { color: #f3f4f6; }
.dark .fx-authorbox__name a:hover { color: #93c5fd; }
.fx-authorbox__creds { font-size: .78rem; color: #2563eb; margin: 0 0 .45rem; line-height: 1.9; }
.dark .fx-authorbox__creds { color: #93c5fd; }
.fx-authorbox__bio { font-size: .86rem; line-height: 2; color: #4b5563; margin: 0 0 .5rem; }
.dark .fx-authorbox__bio { color: #d1d5db; }
.fx-authorbox__more { font-size: .8rem; color: #2563eb; text-decoration: none; }
.fx-authorbox__more:hover { text-decoration: underline; }
.dark .fx-authorbox__more { color: #93c5fd; }

.fx-author-head {
  display: flex; gap: 1.2rem; align-items: flex-start;
  max-width: 60rem; margin: 0 auto 1.2rem;
}
.fx-author-avatar {
  flex: none; width: 6rem; height: 6rem; border-radius: 999px; object-fit: cover;
  border: 3px solid #dbeafe;
}
.dark .fx-author-avatar { border-color: rgba(59,130,246,.35); }
.fx-author-avatar--ph {
  display: flex; align-items: center; justify-content: center;
  background: #2563eb; color: #fff; font-size: 2.2rem; font-weight: 800;
}
.fx-author-meta { min-width: 0; }
.fx-author-meta h1 { font-size: 1.45rem; font-weight: 800; color: #1f2937; margin: .2rem 0 .35rem; line-height: 1.8; }
.dark .fx-author-meta h1 { color: #f3f4f6; }
.fx-author-count { font-size: .84rem; color: #6b7280; margin: 0 0 .5rem; }
.dark .fx-author-count { color: #9ca3af; }
.fx-author-creds { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.fx-author-creds li {
  font-size: .75rem; color: #2563eb; background: #eff6ff;
  padding: .2rem .6rem; border-radius: 999px;
}
.dark .fx-author-creds li { color: #93c5fd; background: rgba(37,99,235,.16); }
.fx-author-bio { max-width: 60rem; margin: 0 auto 1.2rem; }
.fx-author-bio p { font-size: .92rem; line-height: 2.1; color: #4b5563; margin: 0; }
.dark .fx-author-bio p { color: #d1d5db; }
.fx-author-links { max-width: 60rem; margin: 0 auto 2rem; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .8rem; }
.fx-author-links a { font-size: .82rem; color: #2563eb; text-decoration: none; direction: ltr; display: inline-block; }
.fx-author-links a:hover { text-decoration: underline; }
.dark .fx-author-links a { color: #93c5fd; }