/* ============================================================================
   هرکجا | MTheme — طراحی جدید (روشن) 
   رنگ برند: آبی | Accent: نارنجی | پسزمینه: سفید/شیری
   کاملاً مستقل از تم قدیمی. موبایل-اول، روشن، مدرن، حرفهای.
   ============================================================================ */

/* ---------- Design Tokens ---------- */
:root {
    --brand: #006a0d; /* سبز - رنگ اصلی برند */
    --brand-dark: #004f09;
    --brand-light: #2f9a41;
    --brand-soft: #e8f5ea; /* سبز ملایم پس‌زمینه */
    --accent: #ee8d1a; /* نارنجی - Accent */
    --accent-soft: #fdf1e2;
    --ink: #14213D; /* متن اصلی تیره (روی روشن) */
    --ink-soft: #475569;
    --muted: #8A94A6; /* متن کماهمیت */
    --bg: #FFFFFF; /* پسزمینه اصلی */
    --bg-cream: #F8FAFC; /* سفید مایل به شیری */
    --bg-soft: #F1F5F9; /* سطح کارت بسیار روشن */
    --card: #FFFFFF;
    --border: #E6EAF1; /* حاشیه کم رنگ */
    --radius: 18px;
    --radius-lg: 28px;
    --radius-sm: 12px;
    --shadow-sm: 0 2px 8px rgba(20, 33, 61, 0.06);
    --shadow: 0 10px 30px rgba(20, 33, 61, 0.08);
    --shadow-lg: 0 20px 50px rgba(20, 33, 61, 0.10);
    --grad-hero: linear-gradient(135deg, rgba(45,108,223,0.10), rgba(245,158,11,0.06));
    --font: 'Vazirmatn RD', 'Vazirmatn', 'IRANYekanX', 'IRANYekan', Tahoma, sans-serif;
    --transition: 0.25s ease;
    /* ---------- Glass Design Tokens (§3) ---------- */
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-bg-strong: rgba(255, 255, 255, 0.86);
    --glass-bg-strong2: rgba(255, 255, 255, 0.95);
    --glass-bg-soft: rgba(255, 255, 255, 0.55);
    --glass-border: rgba(255, 255, 255, 0.65);
    --glass-border-soft: rgba(20, 33, 61, 0.08);
    --glass-blur: 18px;
    --glass-blur-sm: 10px;
    --glass-blur-lg: 28px;
    --glass-shadow: 0 10px 34px rgba(20, 33, 61, 0.10);
    --glass-shadow-sm: 0 4px 16px rgba(20, 33, 61, 0.07);
    --glass-saturate: 180%;
    /* ---------- Ambient glow (§4) ---------- */
    --ambient-brand: rgba(45, 108, 223, 0.10);
    --ambient-accent: rgba(245, 158, 11, 0.10);
    --ambient-violet: rgba(139, 92, 246, 0.08);
}

/* ---------- Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  direction: rtl; text-align: right;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.75; font-weight: 400;
  min-height: 100vh; overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--brand-dark); }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; font-size: 1rem; }
h1,h2,h3,h4,h5,h6 { font-weight: 800; line-height: 1.35; margin: 0 0 0.4em; color: var(--ink); }
p { margin: 0 0 1em; text-align:justify}
.container { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

@font-face { font-family:'IRANYekanX'; src:url('../pfont/iran-yekan-300.woff2') format('woff2'),url('../pfont/iran-yekan-300.woff') format('woff'); font-weight:300; font-display:swap; }
@font-face { font-family:'IRANYekanX'; src:url('../pfont/iran-yekan-400.woff2') format('woff2'),url('../pfont/iran-yekan-400.woff') format('woff'); font-weight:400; font-display:swap; }
@font-face { font-family:'IRANYekanX'; src:url('../pfont/iran-yekan-500.woff2') format('woff2'),url('../pfont/iran-yekan-500.woff') format('woff'); font-weight:500; font-display:swap; }
@font-face { font-family:'IRANYekanX'; src:url('../pfont/iran-yekan-700.woff2') format('woff2'),url('../pfont/iran-yekan-700.woff') format('woff'); font-weight:700; font-display:swap; }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:12px 24px; border-radius:50px; border:1px solid transparent; font-weight:700; font-size:0.95rem; line-height:1; transition:all var(--transition); white-space:nowrap; }
.btn i { font-size:1rem; }
.btn-primary { background:var(--brand); color:#fff; box-shadow:0 6px 18px rgba(45,108,223,0.28); }
.btn-primary:hover { background:var(--brand-dark); color:#fff; transform:translateY(-1px); box-shadow:0 10px 24px rgba(45,108,223,0.34); }
.btn-accent { background:var(--accent); color:#fff; box-shadow:0 6px 18px rgba(245,158,11,0.3); }
.btn-accent:hover { background:#D97706; color:#fff; transform:translateY(-1px); }
.btn-outline { background:#fff; color:var(--brand); border-color:var(--brand); }
.btn-outline:hover { background:var(--brand-soft); }
.btn-ghost { background:var(--bg-soft); color:var(--ink); border-color:transparent; }
.btn-ghost:hover { background:#e2e8f0; }
.btn-lg { padding:15px 32px; font-size:1.02rem; border-radius:60px; }

/* ---------- Section headers ---------- */
.section { padding-block: 72px; }
.section-soft { background: var(--bg-cream); }
.sec-head { margin-bottom: 40px; max-width: 720px; }
.sec-head.center { text-align:center; margin-inline:auto; }
.sec-head .eyebrow { display:inline-block; background:var(--brand-soft); color:var(--brand); font-size:0.8rem; font-weight:700; padding:5px 14px; border-radius:30px; margin-bottom:14px; }
.sec-head h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); margin:0; }
.sec-head p { color:var(--muted); margin:12px 0 0; }

/* ---------- Header (Desktop & Mobile) ---------- */
.site-header {
  position: sticky; top:0; z-index:100;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom:1px solid var(--border);
}
.header-inner { display:flex; align-items:center; gap:18px; height:72px; }
.brand { display:inline-flex; align-items:center; gap:10px; }
.brand img { height:40px; width:auto; display:block; }
.brand .brand-name { font-weight:800; font-size:1.25rem; color:var(--ink); }

.main-nav { display:flex; align-items:center; gap:4px; margin-inline-end:auto; }
.main-nav > li > a { display:block; padding:10px 15px; border-radius:12px; font-weight:600; font-size:0.95rem; color:var(--ink-soft); }
.main-nav > li > a:hover { color:var(--brand); background:var(--bg-soft); }
.main-nav > li.has-children { position:relative; }
.main-nav .dropdown { position:absolute; top:calc(100% + 8px); right:0; min-width:230px; background:#fff; border:1px solid var(--border); border-radius:16px; padding:8px; box-shadow:var(--shadow-lg); opacity:0; visibility:hidden; transform:translateY(8px); transition:all 0.22s ease; z-index:60; }
.main-nav li.has-children.open .dropdown { opacity:1; visibility:visible; transform:translateY(0); }
.main-nav .dropdown a { display:block; padding:10px 14px; border-radius:10px; font-weight:500; font-size:0.92rem; color:var(--ink-soft); }
.main-nav .dropdown a:hover { background:var(--brand-soft); color:var(--brand); }
.dropdown-more-btn i { color:var(--accent); margin-inline-end:6px; }

.header-actions { display:flex; align-items:center; gap:10px; }
.auth-stack { display:flex; align-items:center; gap:10px; }
.link-login { color:var(--ink-soft); font-weight:600; font-size:0.92rem; padding:10px 6px; }
.link-login:hover { color:var(--brand); }

/* همبرگر + جستجوی موبایل */
.icon-btn { display:none; align-items:center; justify-content:center; width:42px; height:42px; border-radius:14px; background:var(--bg-soft); color:var(--ink); border:1px solid var(--border); font-size:1.1rem; }

/* دکمه جستجوی هدر — در همه اندازه‌ها (دسکتاپ/تبلت/موبایل) دیده می‌شود.
   scoped فقط برای همین دکمه، بدون تغییر رفتار .icon-btnهای دیگر (مثل #mobileMenuBtn) */
.menu-toggle { position:relative; }
.menu-toggle span { position:absolute; right:9px; left:9px; height:2px; background:var(--ink); border-radius:2px; transition:all 0.3s ease; }
.menu-toggle span:nth-child(1){ top:10px; } .menu-toggle span:nth-child(2){ top:16px; } .menu-toggle span:nth-child(3){ top:22px; }

/* ---------- Mobile Menu ---------- */
.mobile-menu-overlay { position:fixed; inset:0; background:rgba(20,33,61,0.4); backdrop-filter:blur(3px); z-index:200; opacity:0; visibility:hidden; transition:0.3s; }
.mobile-menu-overlay.open { opacity:1; visibility:visible; }
.mobile-menu-panel { position:fixed; top:0; right:0; bottom:0; width:min(320px,88vw); background:#fff; border-inline-start:1px solid var(--border); z-index:99999; transform:translateX(100%); transition:transform 0.35s ease; display:flex; flex-direction:column; box-shadow:var(--shadow-lg); }
.mobile-menu-panel.open { transform:translateX(0); }
/* ⚠️ وقتی بسته است، پنل artfully بیرون از قاب است (translateX(100%)) ولی همچنان
   در محاسبهٔ scrollWidth شرکت می‌کند و در صفحه‌هایی که والدشان ایجاد stacking
   context می‌کند (مثل /Search/Index) ۱۲۰px سرریز افقی می‌سازد — کاربر:
   «/Search/Index ظاهرش بهم ریخته تو نمای موبایل و حتی تو نمای کامپوزیت».
   visibility:hidden آن را از سرریز بیرون می‌آورد ولی انیمیشن باز/بستهٔ
   موجود در .open حفظ می‌شود (transition روی visibility هم می‌آید). */
.mobile-menu-panel:not(.open) { visibility: hidden; }
.mm-panel-header { display:flex; align-items:center; justify-content:space-between; padding:18px 20px; border-bottom:1px solid var(--border); }
.mm-panel-header img { height:34px; }
.mm-close { background:transparent; border:none; font-size:1.4rem; color:var(--ink); line-height:1; }
.mm-list { flex:1; overflow-y:auto; padding:12px; }
.mm-list > li > a { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-radius:12px; font-weight:700; color:var(--ink); }
.mm-list > li > a:hover { background:var(--bg-soft); }
.mm-sub-toggle { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-radius:12px; font-weight:700; color:var(--ink); cursor:pointer; }
.mm-sub-toggle i { color:var(--muted); transition:transform 0.3s; }
.mm-sub { display:none; padding:4px 16px 8px; }
.mm-sub.open { display:block; }
.mm-sub a { display:block; padding:11px 14px; border-radius:10px; color:var(--ink-soft); font-weight:500; font-size:0.92rem; }
.mm-sub a:hover { background:var(--brand-soft); color:var(--brand); }
.mm-panel-footer { padding:16px 20px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:10px; }
.mm-cta { width:100%; }
.mm-socials { display:flex; gap:10px; justify-content:center; padding-top:8px; }
.mm-socials a { width:40px; height:40px; border-radius:12px; background:var(--bg-soft); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); }

/* ---------- Mobile Search Box ---------- */
.mobile-search-box { position:fixed; top:0; left:0; width:100%; min-height:100vh; background:rgba(255,255,255,0.97); display:flex; align-items:flex-start; justify-content:center; padding-top:90px; z-index:300; opacity:0; visibility:hidden; transition:0.3s; }
.mobile-search-box.active { opacity:1; visibility:visible; }
.mobile-search-inner { width:90%; max-width:520px; position:relative; }
.mobile-search-close { position:absolute; top:-46px; left:0; color:var(--ink); font-size:28px; cursor:pointer; background:none; border:none; }
.search-input-wrapper { position:relative; width:100%; }
.search-input-wrapper input { width:100%; height:56px; border-radius:16px; border:1px solid var(--border); padding:0 60px 0 16px; font-size:1rem; outline:none; background:none; box-shadow:none; }
.search-input-wrapper input:focus {  }
.search-btn { position:absolute; top:50%; right:9px; transform:translateY(-50%); height:38px; width:38px; border:none; border-radius:12px; background:var(--brand); color:#fff; }

/* ---------- Category Modal ---------- */
.category-modal { position:fixed; inset:0; background:rgba(20,33,61,0.4); backdrop-filter:blur(4px); display:none; align-items:center; justify-content:center; z-index:220; padding:20px; }
.category-modal.open { display:flex; }
.category-modal-card { width:100%; max-width:540px; background:#fff; border-radius:24px; padding:26px; max-height:82vh; overflow-y:auto; box-shadow:var(--shadow-lg); }
.category-modal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.category-modal-head h4 { margin:0; }
.cm-close { background:none; border:none; font-size:1.4rem; color:var(--ink); }
.category-modal-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.category-modal-grid a { display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:12px; background:var(--bg-soft); font-weight:600; font-size:0.9rem; color:var(--ink); }
.category-modal-grid a i { width:20px; color:var(--brand); text-align:center; }
.category-modal-grid a:hover { background:var(--brand-soft); color:var(--brand); }

/* ---------- Footer ---------- */
.site-footer { background:var(--bg-cream); border-top:1px solid var(--border); padding-block:64px 40px; }

/* در نمای موبایل کل فوتر پنهان می‌شود (درخواست کاربر) */
@media (max-width: 600px) {
  .site-footer { display: none !important; }
}
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:40px; }
.footer-col .f-brand { display:flex; align-items:center; gap:10px; margin-bottom:16px; }
.footer-col .f-brand img { height:36px; }
.footer-col .f-brand span { font-weight:800; font-size:1.15rem; color:var(--ink); }
.footer-col .about-text { color:var(--muted); font-size:0.92rem; max-width:280px; }
.footer-col h6 { font-size:0.95rem; margin-bottom:16px; color:var(--ink); }
.footer-col ul li { margin-bottom:10px; }
.footer-col ul a { color:var(--ink-soft); font-size:0.92rem; font-weight:500; }
.footer-col ul a:hover { color:var(--brand); }
.footer-socials { display:flex; gap:10px; }
.footer-socials a { width:40px; height:40px; border-radius:12px; background:#fff; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); }
.footer-socials a:hover { background:var(--brand-soft); color:var(--brand); }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:48px; padding-top:26px; border-top:1px solid var(--border); }
.footer-bottom .copy { color:var(--muted); font-size:0.85rem; }
.footer-call { display:inline-flex; align-items:center; gap:8px; color:var(--brand); font-weight:700; }

/* ---------- Marketing tab (مشاوره) ---------- */
.marketing-tab-container { position:fixed; left:0; top:78%; transform:translateY(-50%); z-index:90; display:flex; align-items:center; }
.marketing-tab-content { width:0; overflow:hidden; background:#fff; border:1px solid var(--border); border-radius:0 18px 18px 0; box-shadow:var(--shadow-lg); transition:all 0.4s; opacity:0; visibility:hidden; pointer-events:none; }
.marketing-tab-content.open { width:280px; padding:24px; opacity:1; visibility:visible; pointer-events:auto; }
.close-btnbtn { position:absolute; right:10px; top:10px; background:var(--bg-soft); border:none; color:var(--ink); width:30px; height:30px; border-radius:50%; }
.marketing-rotating-messages { height:118px; overflow:hidden; position:relative; margin-bottom:16px; }
.marketing-message { position:absolute; width:100%; padding:14px; background:var(--bg-soft); border-radius:12px; text-align:center; opacity:0; transform:translateY(20px); transition:all 0.8s; font-size:0.85rem; }
.marketing-message.active { opacity:1; transform:translateY(0); }
.marketing-message strong { display:block; margin-bottom:6px; color:var(--brand); }
.marketing-consult-btn { display:block; background:var(--brand); color:#fff; text-align:center; padding:13px; border-radius:12px; font-weight:700; }
.marketing-consult-btn:hover { background:var(--brand-dark); color:#fff; }
.marketing-tab-button { width:58px; height:58px; border-radius:50%; background:#fff; color:var(--brand); border:1px solid var(--border); box-shadow:var(--shadow); display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:0.68rem; font-weight:700; opacity:0; visibility:hidden; pointer-events:none; transition:all 0.4s; }
.marketing-tab-button.show { opacity:1; visibility:visible; pointer-events:auto; }
.marketing-tab-button i { font-size:1.3rem; color:var(--brand); margin-bottom:2px; }

/* ---------- Install App Modal ---------- */
.install-modal { position:fixed; inset:0; background:rgba(20,33,61,0.45); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; z-index:999999; padding:20px; opacity:0; visibility:hidden; transition:opacity 0.3s ease, visibility 0.3s; }
.install-modal.open { opacity:1; visibility:visible; }
.install-modal-card { position:relative; width:100%; max-width:440px; background:#fff; border-radius:26px; padding:30px 30px 26px; box-shadow:var(--shadow-lg); transform:translateY(16px) scale(0.98); transition:transform 0.3s ease; }
.install-modal.open .install-modal-card { transform:translateY(0) scale(1); }
.install-modal-card h4 { font-size:1.4rem; margin:0 0 6px; text-align:center; }
.install-modal-card .im-sub { color:var(--muted); font-size:0.92rem; text-align:center; margin:0 0 24px; }
.im-close { position:absolute; top:18px; left:18px; background:var(--bg-soft); border:none; color:var(--ink); width:34px; height:34px; border-radius:50%; font-size:1.05rem; }
.install-options { display:flex; flex-direction:column; gap:12px; }
.install-option { display:flex; align-items:center; gap:14px; padding:16px; border:1px solid var(--border); border-radius:18px; background:#fff; transition:all 0.25s ease; }
.install-option:hover { border-color:var(--brand); box-shadow:var(--shadow-sm); transform:translateY(-2px); }
.io-icon { width:52px; height:52px; border-radius:16px; background:var(--brand-soft); color:var(--brand); display:flex; align-items:center; justify-content:center; font-size:1.35rem; flex-shrink:0; }
.install-option .io-text { flex:1; display:flex; flex-direction:column; gap:2px; }
.install-option strong { font-size:1.05rem; color:var(--ink); }
.install-option span { color:var(--muted); font-size:0.82rem; }
.install-option .io-arrow { color:var(--muted); font-size:0.9rem; }
.io-soon { background:var(--accent-soft); color:var(--accent); font-size:0.72rem; font-weight:700; padding:4px 10px; border-radius:30px; white-space:nowrap; }

/* ---------- Scroll top & PWA install ========== */
.scroll-top {
  position: fixed; bottom: 20px; left: 20px; width: 48px; height: 48px; border-radius: 50%;
  background: var(--brand); color: #fff; border: none; display: none;
  align-items: center; justify-content: center; font-size: 1.05rem;
  z-index: 130;                       /* بالاتر از تب مشاوره (90) و bottom-nav (95) تا کلیکپذیر بماند */
  box-shadow: 0 8px 20px rgba(45,108,223,0.35); cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.scroll-top:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(45,108,223,0.45); }
.scroll-top.show { display: flex; }    /* نمایش با flex تا آیکن وسط بماند */
@media (max-width: 600px) {
  /* در موبایل بالاتر از bottom-nav تا روی آن نیفتد */
  .scroll-top { bottom: 78px; left: 16px; width: 44px; height: 44px; }
}
.pwa-install-float { position:fixed; bottom:20px; right:20px; z-index:96; display:none; align-items:center; gap:8px; background:var(--ink); color:#fff; padding:12px 18px; border-radius:50px; font-weight:700; font-size:0.88rem; box-shadow:var(--shadow-lg); border:none; }
.pwa-install-float i { color:var(--accent); }

/* ---------- Bottom nav (mobile) ---------- */
.mobile-bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: none;
  z-index: 95;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--border);
  padding: 8px 2px calc(8px + env(safe-area-inset-bottom));
  justify-content: space-between;
  gap: 0;
  box-shadow: 0 -6px 20px rgba(20,33,61,0.05);
}
.mobile-bottom-nav a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--muted); font-size: 0.62rem; font-weight: 700;
  padding: 6px 4px; border-radius: 12px;
  text-decoration: none; background: transparent; border: 0;
  transition: color .18s, background .18s;
  flex: 1 1 0; min-width: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.mobile-bottom-nav a i { font-size: 1.15rem; }
.mobile-bottom-nav a.active,
.mobile-bottom-nav a:hover { color: var(--brand); }

/* ---------- Live Search (مشترک همه صفحات: هدر، صفحه اصلی، Search، Explorer) ----------
   ⚠️ .live-results با position:absolute کار می‌کند، پس والدِ آن باید relative باشد.
   والدهای واقعی: .search-bar (صفحه اصلی/Search) و .search-input-wrapper (هدر) */
.search-bar,
.search-input-wrapper { position: relative; }

.live-results { position:absolute; top:calc(100% + 12px); right:0; left:0; z-index:50; background:#fff; border:1px solid var(--border); border-radius:20px; box-shadow:var(--shadow-lg); overflow:hidden; max-height:400px; overflow-y:auto; }

/* نتایج شناور روی بخش‌های بعدی صفحه (مثل «نتایج جستجو» در Search/Index).
   z-index بالا + جداسازی از stacking context والد. */
.live-results-floating { z-index: 900; isolation: auto; }
.live-results[hidden] { display:none; }
.live-result-item { display:flex; align-items:center; gap:14px; padding:12px 16px; border-bottom:1px solid var(--bg-soft); color:var(--ink); transition:background 0.2s; text-decoration:none; cursor:pointer; }
.live-result-item:hover { background:var(--brand-soft); }
.live-result-item img,
.live-result-item .live-result-img { width:52px; height:52px; border-radius:12px; object-fit:cover; background:var(--bg-soft); flex-shrink:0; }
.live-result-info { min-width:0;  }
.live-result-title {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.7;
    margin-bottom: 2px;
}
.live-result-cat {
    display: block;
    font-size: 0.78rem;
    color: var(--muted);
    line-height: 1.7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.empty-state {
    padding: 15px;
    text-align: center;
}
.live-result-info strong {
    display: block;
    font-size: 0.95rem;
    color: var(--ink);
}
.live-result-info span { font-size:0.78rem; color:var(--muted); }
.live-result-title { display:block; font-size:0.95rem; font-weight:700; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.live-result-cat { font-size:0.78rem; color:var(--muted); }
.live-view-all { display:block; text-align:center; padding:14px; color:var(--brand); font-weight:700; font-size:0.9rem; background:var(--bg-soft); }
.live-view-all:hover { background:var(--brand-soft); }
.live-no-result, .live-loading { padding:24px; text-align:center; color:var(--muted); font-size:0.88rem; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  /* تبلت و موبایل: ناوبری دسکتاپ پنهان، آیکن‌های دو طرف سرچ ظاهر، همبرگر ظاهر */
  .main-nav { display: none; }
  .icon-btn { display: inline-flex; }
  .header-actions { gap: 8px; }
  .header-search { max-width: none; }
  .hs-icons { display: flex; }
}
@media (max-width: 900px) {
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
}
@media (max-width: 600px) {
  .header-inner { height:64px; gap:10px; }
  .brand img { height:34px; }
  .brand .brand-name { font-size:1.05rem; }
  .mobile-bottom-nav { display:flex; }
  body { padding-bottom:64px; }
  .section { padding-block:48px; }
  .footer-grid { grid-template-columns:1fr; gap:28px; }
  .footer-bottom { justify-content:center; text-align:center; }
  .category-modal-grid { grid-template-columns:1fr; }
}

/* ============================================================================
   DESIGN SYSTEM — Glass · Ambient · App-like · Product Badge  (§3,§4,§19)
   ============================================================================ */

/* ---------- Glass utilities ---------- */
.glass {
    background: var(--glass-bg-strong2);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}
.glass-strong {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

/* ---------- Ambient background (جلوگیری از سفیدِ خام) (§4) ---------- */
.ambient { position: relative; overflow: hidden; isolation: isolate; }
.ambient::before,
.ambient::after {
  content: ''; position: absolute; border-radius: 50%; z-index: -1; pointer-events: none;
  filter: blur(70px);
}
.ambient::before { width: 420px; height: 420px; top: -140px; right: -120px; background: var(--ambient-brand); }


.ambient.ambient-open {  isolation: auto; }
.ambient::after { width: 380px; height: 380px; bottom: -160px; left: -120px; background: var(--ambient-accent); }
.ambient-soft::before { background: var(--ambient-violet); }

/* ---------- Product Badge (§5,§14) ---------- */
.p-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 11px; border-radius: 30px;
  font-size: 0.72rem; font-weight: 700; line-height: 1.5;
  backdrop-filter: blur(var(--glass-blur-sm));
  -webkit-backdrop-filter: blur(var(--glass-blur-sm));
  box-shadow: var(--glass-shadow-sm);
  white-space: nowrap;
}
.p-badge i { font-size: 0.72rem; }
.badge-special { background: linear-gradient(135deg, #ee8d1a, #EA7C2C); color: #fff; }
.badge-advertising { background: linear-gradient(135deg, #006a0d, #004f09); color: #fff; }
/* روی تصویر (کارت کسبوکار) */
.p-badge.on-image { position: absolute; top: 12px; right: 12px; z-index: 3; }

/* ---------- Install modal — Glass (§10) ---------- */
.install-modal { background: rgba(20, 33, 61, 0.32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.install-modal-card {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.install-option { background: rgba(255,255,255,0.6); border-color: var(--glass-border-soft); backdrop-filter: blur(var(--glass-blur-sm)); -webkit-backdrop-filter: blur(var(--glass-blur-sm)); }

/* ---------- Modals — Glass ---------- */
.category-modal { background: rgba(20, 33, 61, 0.32); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.category-modal-card {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}
.category-modal-grid a { background: rgba(255,255,255,0.65); border: 1px solid var(--glass-border-soft); }

/* ============================================================================
   MOBILE MENU PANEL — App-like Redesign (§11)
   ============================================================================ */
.mobile-menu-panel {
  background: var(--glass-bg-strong);
  backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(var(--glass-saturate));
  border-inline-start: 1px solid var(--glass-border);
}
.mm-panel-header { border-bottom: 1px solid var(--glass-border-soft); }

/* آیتمهای منو — کارتمانند، آیکندار، micro-interaction */
.mm-list { padding: 14px; }
.mm-list > ul > li { margin-bottom: 6px; }
.mm-list > ul > li > a,
.mm-sub-toggle {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-radius: 16px;
  font-weight: 700; font-size: 0.98rem; color: var(--ink);
  background: rgba(255,255,255,0.55);
  border: 1px solid transparent;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
/* باکس آیکن هر آیتم — آیکن fas fa-* داخل این باکس می‌نشیند (مشکل ۱) */
    .mm-list > ul > li > a > i,
    .mm-sub-toggle > i,
    .mm-ico {
        color: #006a0d;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
.mm-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
  box-sizing: content-box;
  background: var(--brand-soft);
  font-size: 0.92rem;
  line-height: 1;
  vertical-align: middle;
  box-shadow: inset 0 0 0 1px rgba(45,108,223,0.10);
  transition: background var(--transition), color var(--transition), transform var(--transition);
}
/* تراز عمودی/افقی آیکن داخل آیتم منو — جلوگیری از به‌هم‌ریختگی ارتفاع */
.mm-list > ul > li > a,
.mm-sub-toggle { min-height: 58px; }
.mm-list > ul > li > a > i,
.mm-sub-toggle > i { flex: 0 0 auto; align-self: center; }
.mm-list > ul > li > a > span,
.mm-sub-toggle > span { flex: 1 1 auto; min-width: 0; text-align: right; }
.mm-chev { margin-inline-start: auto; color: var(--muted); font-size: 0.8rem; transition: transform var(--transition); }
.mm-sub-toggle.open .mm-chev { transform: rotate(-90deg); }
.mm-list > ul > li > a:hover,
.mm-sub-toggle:hover { background: #fff; border-color: var(--brand-light); transform: translateX(-3px); }
.mm-list > ul > li > a.active { background: var(--brand-soft); border-color: var(--brand-light); color: var(--brand); }
/* آیتم منوی فعال/جاری، آیکن پررنگ */
.mm-list > ul > li > a:hover .mm-ico { background: var(--brand); color: #fff; }

.mm-sub { padding: 6px 10px 6px 6px; margin-top: 4px; }
.mm-sub a {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: 12px;
  color: var(--ink-soft); font-weight: 600; font-size: 0.92rem;
  background: rgba(255,255,255,0.4);
  margin-bottom: 5px;
  transition: all var(--transition);
}
.mm-sub a:hover { background: var(--brand-soft); color: var(--brand); transform: translateX(-3px); }
.mm-sub-ico { width: 18px; text-align: center; color: var(--brand); font-size: 0.9rem; flex-shrink: 0; }
.mm-sub a:hover .mm-sub-ico { color: var(--brand-dark); }
.mm-panel-footer { border-top: 1px solid var(--glass-border-soft); }
.mm-cta { border-radius: 16px; }

/* ---------- Header / Search / Bottom-nav — Glass (§10) ---------- */
.site-header {
  background: rgba(255,255,255,0.78);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-bottom: 1px solid var(--glass-border-soft);
}
.mobile-bottom-nav {
  background: rgba(255,255,255,0.80);
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate));
  border-top: 1px solid var(--glass-border-soft);
}
.mobile-bottom-nav a.active { background: var(--brand-soft); }

/* ---------- App-like: دکمهها و تاچتارگتهای بزرگتر در موبایل ---------- */
@media (max-width: 760px) {
  .btn { padding: 13px 22px; }
  .icon-btn { width: 44px; height: 44px; }
  .category-card { padding: 14px 16px; }
  .feature-card { padding: 22px 18px; }
}

/* ---------- Reduced blur برای کارایی بهتر روی موبایل (§20) ---------- */
@media (max-width: 600px) {
  :root { --glass-blur: 12px; --glass-blur-lg: 16px; }
  .ambient::before { width: 260px; height: 260px; }
  .ambient::after { width: 240px; height: 240px; }
}

/* ============================================================================
   رفع ریشه‌ای اسکرول افقی: آیتم‌های گرید هرگز از ظرف بزرگ‌تر نشوند
   ----------------------------------------------------------------------------
   در CSS Grid عرض پیش‌فرض ستون minmax(auto, 1fr) است و «auto» = حداقل عرض
   محتوا. اگر داخل یک آیتم گرید چیزی با عرض تحمیلی باشد (تصویر با عرض
   طبیعی، جدول با min-width، متن بلند فارسی بدون شکستن)، همان مقدار به
   ستون تحمیل می‌شود و ظرف را پهن می‌کند → اسکرول افقی کل صفحه.

   قاعده قبلی پروژه «overflow-x:hidden» روی body بود که فقط علامت را پنهان
   می‌کرد. راه‌حل درست: به آیتم‌های گرید اجازه بده کوچک شوند (min-width:0)
   و خودِ عنصر مسئول، اسکرول/شکستن درونی داشته باشد.

   این قاعده سراسری + بی‌خطر است: فقط کفِ اندازه را صفر می‌کند.
   ============================================================================ */
.hz-grid > *,
.feature-grid > *,
.category-grid > *,
.business-grid > *,
.steps-grid > *,
.industry-grid > *,
.blog-grid > *,
.stat-grid > *,
.serv_row > *,
.value-grid > *,
.about-split > *,
.about-imgs > *,
.contact-split > *,
.cf-grid > *,
.content-grid > *,
.stats-grid > *,
.panel-layout > *,
.products-list > *,
.social-grid > *,
.category-modal-grid > *,
.footer-grid > *,
#projects .hz-grid > * { min-width: 0; }

/* تصاویر داخل کارت‌ها هرگز از کارت بیرون نزنند */
.hz-grid img,
.feature-grid img,
.business-grid img,
.steps-grid img,
.blog-grid img,
.content-grid img { max-width: 100%; height: auto; }

/* متن‌های بلند (عنوان/آدرس فارسی) در کارت‌های گرید بشکنند نه اینکه بکشند */
.hz-grid h1, .hz-grid h2, .hz-grid h3, .hz-grid h4, .hz-grid h5, .hz-grid h6,
.business-grid h1, .business-grid h2, .business-grid h3, .business-grid h4,
.steps-grid h1, .steps-grid h2, .steps-grid h3,
.content-grid h1, .content-grid h2, .content-grid h3, .content-grid h4 {
    overflow-wrap: anywhere;
    min-width: 0;
}

/* ============================================================================
   هدر جدید: لوگو | سرچ لایو | آیکن منو  (سه بخش، دقیقاً مثل طرح)
   ----------------------------------------------------------------------------
   تغییرات:
     • .main-nav دسکتاپ، .auth-stack و #mobileSearchBtn از .header-actions حذف شدند
     • #pwaInstallBtn و نام کاربر به منوی موبایل (.mm-list / .mm-panel-footer) منتقل شدند
     • کادر جستجو حالا خودِ عنصر هدر است و در همه اندازه‌ها دیده می‌شود
   ============================================================================ */

/* چیدمان سه‌بخشی: لوگو (ثابت) — سرچ (کشسان) — منو (ثابت) */
.site-header .header-inner {
    display: flex;
    align-items: center;
    gap: 16px;
}
.site-header .brand { flex: 0 0 auto; }
.site-header .header-search { flex: 1 1 auto; min-width: 0; max-width: 560px; margin-inline: auto; }
.site-header .header-actions { flex: 0 0 auto; margin-inline-start: 0; }

/* ---------------------------------------------------------------------------
   کادر جستجوی هدر
   --------------------------------------------------------------------------- */
.header-search form { width: 100%; }
.header-search .search-input-wrapper {
    position: relative;              /* لنگر .live-results */
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    border-radius: 14px;
    background: var(--bg-soft);
    border: 1px solid var(--border);
    transition: var(--transition);
}
.header-search .search-input-wrapper:focus-within {
    background: var(--card);
    border-color: var(--brand);
    box-shadow: 0 0 0 4px rgba(45, 108, 223, .12);
}
.header-search .hs-ico {
    color: var(--muted);
    font-size: .95rem;
    flex-shrink: 0;
}
.header-search input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: .92rem;
    color: var(--ink);
    height: 100%;
    padding:0;
}
.header-search input::placeholder { color: var(--muted); }
.header-search .hs-submit {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
    cursor: pointer;
    transition: var(--transition);
}
.header-search .hs-submit:hover { background: var(--brand-dark); }
.header-search .live-results { top: calc(100% + 8px); border-radius: 16px; }

/* ---------------------------------------------------------------------------
   کارت کاربر در بالای منوی موبایل (وقتی وارد شده است)
   --------------------------------------------------------------------------- */
.mm-user {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px 16px;
    margin-bottom: 10px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--brand) 0%, #1E4FA8 100%);
    color: #fff;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}
.mm-user::after {
    content: '';
    position: absolute;
    inset-block-start: -40px;
    inset-inline-end: -30px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(245, 158, 11, .28);
    filter: blur(34px);
    pointer-events: none;
}
.mm-user:hover { transform: translateY(-2px); }
.mm-user-avatar {
    position: relative;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    flex-shrink: 0;
}
.mm-user-info {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.mm-user-info strong {
    font-size: .98rem;
    font-weight: 800;
    line-height: 1.7;
    overflow-wrap: anywhere;
}
.mm-user-info small {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: .76rem;
    color: rgba(255, 255, 255, .85);
}
.mm-user-info small i { font-size: .68rem; }

/* ---------------------------------------------------------------------------
   اکشن‌های پای منوی موبایل (ورود/داشبورد + نصب اپلیکیشن)
   --------------------------------------------------------------------------- */
.mm-panel-footer { padding: 16px 20px; border-top: 1px solid var(--border); }
.mm-footer-actions { display: flex; flex-direction: column; gap: 10px; }
.mm-footer-actions .mm-cta { width: 100%; justify-content: center; }
#pwaInstallBtn.mm-cta { border-radius: 16px; }

/* ---------------------------------------------------------------------------
   Responsive — کادر جستجو در موبایل جمع‌وجور ولی همیشه حاضر
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .site-header .header-inner { gap: 10px; }
    .header-search .search-input-wrapper { height: 40px; padding: 0 12px; gap: 8px; border-radius: 12px; }
    .header-search input[type="text"] { font-size: .88rem; }
    .header-search .hs-submit { width: 28px; height: 28px; border-radius: 9px; }
    /* در موبایل دکمه submit پنهان و Enter کافی است تا فضا برای input بماند */
    .header-search .hs-ico { display: none; }
    .header-search .hs-submit { display: none; }
    .header-search .search-input-wrapper { padding-inline: 12px; }
}
@media (max-width: 380px) {
    .header-search input::placeholder { font-size: .82rem; }
}

/* ---------------------------------------------------------------------------
   انتخابگر دسته‌بندی داخل کادر جستجوی هدر — کامل و خودبسنده
   ----------------------------------------------------------------------------
   ⚠️ چرا اینجا کامل تعریف شده: .cat-select* قبلاً فقط در home.css بود، ولی
   home.css تنها در Home/Search/submenu لود میشود. پس در Profile/Panel،
   postcategory، Signin و SigninOwner که _LayoutNew فقط style.css را می‌آورد،
   منوی سفارشی بی‌استایل می‌ماند و <select> خام مرورگر بیرون می‌زد.
   حالا استایل مشترک (position/hidden-native/menu-anchor) در همین شیت عمومی و
   همهجا حاضر است، و همهچیز زیر #headerSearch اسکوپ شده تا به هیچ <select>
   یا کامپوننت دیگری در سایت دست نزند.
   --------------------------------------------------------------------------- */
#headerSearch .cat-select { position: relative; flex: 0 0 auto; min-width: 0; }

/* سلکت خام فقط نگهدارنده مقدار است — هیچوقت دیده نمی‌شود */
#headerSearch .cat-select-native {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}

#headerSearch .cat-select-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 0 10px;
    height: 30px;
    border: none;
    border-inline-start: 1px solid rgba(228, 233, 241, .9);
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font-family: inherit;
    font-weight: 600;
    font-size: .85rem;
    white-space: nowrap;
    cursor: pointer;
}
#headerSearch .cat-select-btn i {
    font-size: .62rem;
    color: var(--muted);
    transition: transform var(--transition);
}
#headerSearch .cat-select.open .cat-select-btn i { transform: rotate(180deg); }

#headerSearch .cat-select-menu {
    position: absolute;
    top: calc(100% + 12px);
    right: auto;
    left: 0;
    min-width: 195px;
    z-index: 60;
    padding: 8px;
    border-radius: 16px;
    max-height: 320px;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
#headerSearch .cat-select.open .cat-select-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#headerSearch .cat-select-menu .cat-opt {
    display: block;
    width: 100%;
    text-align: right;
    padding: 9px 12px;
    border: none;
    border-radius: 11px;
    background: transparent;
    color: var(--ink-soft);
    font-family: inherit;
    font-weight: 600;
    font-size: .86rem;
    cursor: pointer;
    transition: all var(--transition);
}
#headerSearch .cat-select-menu .cat-opt:hover { background: var(--brand-soft); color: var(--brand); }
#headerSearch .cat-select-menu .cat-opt.selected { background: var(--brand); color: #fff; }

/* جداساز نازک بین input و انتخابگر دسته */
#headerSearch input[type="text"] + .cat-select { margin-inline-start: 2px; }

/* ---------------------------------------------------------------------------
   دکمه ضربدر — فقط در حالت Expanded موبایل دیده می‌شود
   --------------------------------------------------------------------------- */
#headerSearch .hs-close {
    display: none;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink-soft);
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
#headerSearch .hs-close:hover { background: var(--bg-soft); color: var(--brand); }

/* ============================================================================
   کادر جستگوی هدر در موبایل — حالت Expanded
   ----------------------------------------------------------------------------
   حالت عادی (موبایل): .header-search در جریانِ flex هدر مثل بقیه آیتم‌ها.
   حالت فعال: کل عرض .header-inner را می‌گیرد و روی بقیه آیتم‌های هدر
   (لوگو/آیکن‌ها) قرار می‌گیرد — بدون تغییر چیدمان آن‌ها در حالت عادی.
   ⚠️ فقط در همین media query؛ در دسکتاپ هیچ رفتاری اضافه نمی‌شود.
   ============================================================================ */
@media (max-width: 767px) {

    /* کادر جستجو می‌تواند از جریان flex بیرون بیاید (لنگر مطلق) */
    .site-header .header-search {
        position: relative;
        z-index: 5;
        transition: left .32s cubic-bezier(.2, .7, .2, 1),
                    right .32s cubic-bezier(.2, .7, .2, 1),
                    box-shadow .32s ease, background .32s ease;
    }

    .header-search.is-expanded {
        position: absolute;
        left: 8px;
        right: 8px;
        top: 50%;
        transform: translateY(-50%);
        max-width: none;
        margin-inline: 0;
        background: var(--card);
        border-radius: 18px;
        padding: 4px;
        box-shadow: 0 14px 40px rgba(20, 33, 61, .22),
                    0 0 0 100vmax rgba(255, 255, 255, .001); /* لبه‌های نرم روی هدر شیشه‌ای */
        animation: hzHeaderSearchIn .32s cubic-bezier(.2, .7, .2, 1);
    }

    .header-search.is-expanded .search-input-wrapper {
        height: 48px;
        border-radius: 14px;
        padding-inline: 14px;
        gap: 10px;
        background: var(--card);
    }

    .header-search.is-expanded input[type="text"] { font-size: .95rem; }

    /* در حالت Expanded دکمه ذره‌بین و ضربدر هر دو دیده می‌شوند.
       ⚠️ #headerSearch اضافه شده تا specificity از هر قانون دیگری بالاتر باشد
       (home.css در Home/Search بعد از style.css لود می‌شود و قبلاً این
       display:inline-flex را خنثی می‌کرد). */
    #headerSearch.header-search.is-expanded .hs-submit { display: inline-flex; width: 30px; height: 30px; }
    #headerSearch.header-search.is-expanded .hs-close { display: inline-flex; }
    #headerSearch.header-search.is-expanded .cat-select-btn { height: 34px; font-size: .88rem; }

    /* بقیه آیتم‌های هدر در حالت Expanded کم‌رنگ می‌شوند (کادر سرچ جلو می‌آید) */
    body.hdr-search-open .site-header .brand,
    body.hdr-search-open .site-header .hs-icons,
    body.hdr-search-open .site-header .header-actions {
        opacity: .25;
        transition: opacity .28s ease;
        pointer-events: none;
    }
}

@keyframes hzHeaderSearchIn {
    from { opacity: .6; }
    to   { opacity: 1; }
}

/* ============================================================================
   Lightbox تصویر آموزشی نصب (وب اپلیکیشن)
   ----------------------------------------------------------------------------
   همان مودال نصب را توسعه می‌دهد؛ تصویر در /MTheme/screenshot.jpg
   ============================================================================ */
.hz-lightbox {
    position: fixed;
    inset: 0;
    z-index: 250;                                  /* بالای install-modal (240) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(20, 33, 61, .55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s ease, visibility .28s;
}
.hz-lightbox.open { opacity: 1; visibility: visible; }

.hz-lightbox-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: auto;
    max-width: min(680px, 100%);
    max-height: calc(100vh - 36px);
    overflow-y: auto;             /* اگر تصویر بلند بود، اسکرول نه بیرون‌زدگی */
    -webkit-overflow-scrolling: touch;
    padding: 16px;
    background: var(--card);
    border-radius: 22px;
    box-shadow: var(--shadow-lg);
    transform: translateY(14px) scale(.98);
    transition: transform .3s cubic-bezier(.2, .7, .2, 1);
}
.hz-lightbox.open .hz-lightbox-panel { transform: translateY(0) scale(1); }

.hz-lightbox-panel img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;                 /* responsive: هیچ‌وقت از عرض کارت بیرون نمی‌زند */
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--bg-soft);
}

.hz-lightbox-close {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;      /* در RTL سمت راست — همان جای بقیه دکمه‌های بستن */
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: var(--bg-soft);
    color: var(--ink);
    font-size: 1rem;
    cursor: pointer;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition);
}
.hz-lightbox-close:hover { background: var(--brand); color: #fff; }

.hz-lightbox-cta { width: 100%; justify-content: center; }

/* موبایل باریک: تصویر تمام‌عرض و دکمه‌ها جمع‌وجورتر */
@media (max-width: 480px) {
    .hz-lightbox { padding: 10px; }
    .hz-lightbox-panel { padding: 12px; border-radius: 18px; max-height: calc(100vh - 20px); }
    .hz-lightbox-panel img { border-radius: 12px; }
    .hz-lightbox-close { width: 32px; height: 32px; font-size: .9rem; top: 8px; inset-inline-start: 8px; }
}

/* ============================================================================
   هدر — چیدمان نهایی
   ----------------------------------------------------------------------------
   دسکتاپ (>1024px):   لوگو | سرچ (وسط) | ناوبری  — آیکن‌ها و همبرگر پنهان
   تبلت/موبایل (≤1024): لوگو | [۳ آیکن] سرچ [۳ آیکن + همبرگر]
   ============================================================================ */

/* آیکن‌های دو طرف کادر سرچ — پیش‌فرض پنهان؛ فقط تبلت/موبایل (≤1024px) نمایش.
   ⚠️ چرا اینجا با min-width و نه display:none سراسری: اگر همان‌جا display:none
   بگذاریم (مثل وضع قبلی این فایل)، چون این بلوک بعد از @media(max-width:1024px)
   می‌آید و specificity برابر است، روی تبلت/موبایل هم برنده می‌شد و ردیف آیکن‌ها
   هرگز روی هیچ عرضی دیده نمی‌شد. پس پنهان‌بودن را به «بالای ۱۰۲۴» محدود می‌کنیم
   تا قانون flex داخل media query دست‌نخورده کار کند. */
@media (min-width: 1025px) {
    .hs-icons { display: none; }
}
.hs-icons { align-items: center; gap: 4px; flex: 0 0 auto; }

/* ============================================================================
   دکمه ورود/داشبورد در هدر دسکتاپ (کنار منوی اصلی)
   در موبایل/تبلت پنهان است — منوی موبایل و منوی پایین جای آن را می‌گیرند.
   ============================================================================ */
.header-auth { flex: 0 0 auto; margin-inline-start: 12px; }

.auth-btn {
    display: inline-flex; align-items: center; gap: 8px;
    height: 40px; padding: 0 16px;
    border-radius: 999px;
    font-weight: 700; font-size: .9rem;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background .2s, color .2s, border-color .2s, box-shadow .2s;
    white-space: nowrap;
}
.auth-btn i { font-size: 1.05rem; }

/* مهمان → دکمه برند (پررنگ) */
.auth-btn.is-guest {
    background: linear-gradient(135deg, var(--brand), var(--accent, #ee8d1a));
    color: #fff;
    box-shadow: 0 6px 16px rgba(45,108,223,.22);
}
.auth-btn.is-guest:hover {
    color: #fff;
    box-shadow: 0 8px 22px rgba(45,108,223,.3);
    transform: translateY(-1px);
}

/* کاربر واردشده → حالت آرام‌تر با border */
.auth-btn.is-user {
    background: var(--bg-soft, #F1F5F9);
    color: var(--ink, #16283f);
    border-color: var(--border, #E2E8F0);
    max-width: 190px;
}
.auth-btn.is-user span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.auth-btn.is-user:hover {
    background: #fff;
    border-color: var(--brand);
    color: var(--brand);
}

/* بالا‌ی ۱۰۲۴ فقط دسکتاپ؛ پایین‌تر پنهان (منوی موبایل هست) */
@media (max-width: 1024px) {
    .header-auth { display: none; }
}

.hs-ico-btn {
    width: 38px;
    height: 38px;
    border: 1px solid transparent;
    border-radius: 12px;
    background: transparent;
    color: var(--ink-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .98rem;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    flex-shrink: 0;
    padding: 0;
}
.hs-ico-btn:hover,
.hs-ico-btn:focus-visible {
    background: var(--bg-soft);
    color: var(--brand);
    border-color: var(--border);
    outline: none;
}
.hs-ico-btn:active { transform: scale(.94); }

/* ---------------------------------------------------------------------------
   دکمه پروفایل / ورود در هدر — کمی شاخص‌تر، هم‌زبان با بقیه دکمه‌های هدر
   ----------------------------------------------------------------------------
   از همان Design Language موجود استفاده می‌کند: همان ۳۸px، همان border-radius
   12px، همان var(--brand)/var(--brand-soft) و همان var(--transition).
   تغییرات فقط: پس‌زمینهٔ ملایم برند، رینگ نازک، سایهٔ بسیار کم، و افکت hover/active.
   هیچ اندازه‌ای بزرگ‌تر نشده تا در موبایل چیدمان خراب نشود.
   --------------------------------------------------------------------------- */
.hs-ico-btn.hs-ico-profile {
    background: var(--brand-soft);
    color: var(--brand);
    border-color: rgba(45, 108, 223, .18);
    box-shadow: 0 1px 2px rgba(20, 33, 61, .06);
}
.hs-ico-btn.hs-ico-profile i { font-size: 1.06rem; }

.hs-ico-btn.hs-ico-profile:hover,
.hs-ico-btn.hs-ico-profile:focus-visible {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
    box-shadow: 0 4px 12px rgba(45, 108, 223, .28);
    transform: translateY(-1px);
    outline: none;
}
.hs-ico-btn.hs-ico-profile:active { transform: scale(.94); }

/* حالت ورود (کاربر مهمان) — همان قالب، فقط با لهجهٔ نرم‌تر */
.hs-ico-btn.hs-ico-profile.is-guest {
    background: var(--bg-soft);
    color: var(--ink-soft);
    border-color: var(--border);
}
.hs-ico-btn.hs-ico-profile.is-guest:hover,
.hs-ico-btn.hs-ico-profile.is-guest:focus-visible {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}

/* دکمه‌های فعال (صفحه جاری) */
.hs-ico-btn.is-active { color: var(--brand); background: var(--brand-soft); }

/* ناوبری دسکتاپ — آیتم «بیشتر» با آیکن */
.main-nav .nav-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0 !important;
    border-radius: 12px;
    color: var(--muted);
}
.main-nav .nav-more:hover { background: var(--brand-soft); color: var(--brand); }

/* در دسکتاپ چیدمان اصلی: لوگو — سرچ(کشسان) — ناوبری */
.site-header .header-inner {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
}
.site-header .brand { flex: 0 0 auto; }
.site-header .header-search { flex: 1 1 auto; min-width: 0; max-width: 620px; margin-inline: auto; }
.site-header .main-nav { flex: 0 0 auto; margin-inline-start: 0; }
.site-header .header-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }

/* ---------------------------------------------------------------------------
   تبلت (۷۶۸–۱۰۲۴): سرچ فضای بیشتری بگیرد، آیکن‌ها کمی جمع‌وجورتر
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .site-header .header-inner { gap: 10px; }
    .site-header .header-search { max-width: none; }
    .hs-icons { gap: 2px; }
    .hs-ico-btn { width: 36px; height: 36px; font-size: .92rem; border-radius: 11px; }
}

/* ---------------------------------------------------------------------------
   موبایل (≤767): ۳ آیکن چپ + سرچ + ۳ آیکن راست (+ همبرگر)
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .site-header .header-inner { gap: 6px; }
    .hs-icons { gap: 1px; }
    .hs-ico-btn { width: 32px; height: 32px; font-size: .86rem; border-radius: 10px; }
    .header-search .search-input-wrapper { height: 40px; padding: 0 10px; border-radius: 12px; }
    .header-search input[type="text"] { font-size: .84rem; }
    .header-search .hs-submit { width: 26px; height: 26px; border-radius: 8px; }
    .header-search .hs-submit i { font-size: .72rem; }
    /* همبرگر کوچک‌تر تا کنار آیکن‌ها جا شود */
    #mobileMenuBtn { width: 34px; height: 34px; }
}

/* ---------------------------------------------------------------------------
   موبایل باریک (≤600): فقط ۳ آیکن مهم + سرچ؛ بقیه در منوی همبرگری
   --------------------------------------------------------------------------- */
@media (max-width: 600px) {
    /* آیکن‌های کم‌اهمیت‌تر پنهان می‌شوند تا سرچ فضای کافی داشته باشد */
    .hs-icons-start .hs-ico-btn[href*="postcategory"] { display: none; }
    .site-header .header-inner { height: 60px; }
}

/* ---------------------------------------------------------------------------
   موبایل خیلی باریک (≤430): ۲ آیکن هر طرف
   --------------------------------------------------------------------------- */
@media (max-width: 430px) {
    .hs-icons-end .hs-ico-btn[href*="submenu"] { display: none; }
    .hs-icons-start .hs-ico-btn[href*="signin"],
    .hs-icons-start .hs-ico-btn[href*="Profile"] { display: none; }
    .header-search input::placeholder { font-size: .8rem; }
}