/* ========================================================== header-mobile.css بازطراحی هدر فقط برای موبایل (max-width: 768px). دسکتاپ کاملاً دست‌نخورده باقی می‌مونه چون همه‌ی قوانین این فایل داخل همون یک media query هستن. ترتیب نهایی آیتم‌های هدر تو موبایل (بدون نیاز به تغییر HTML، چون دقیقاً با ترتیب فعلی تگ‌ها تو DOM یکی هست): ۱) آیکون منوی همبرگری + آیکون و متن «خانه سبز» (.header-start) ۲) سرچ باکس، با بیشترین عرض ممکن (.search-box) ۳) فقط آیکون حساب کاربری، بدون متن (.user-icon-slot) آیکون‌های علاقه‌مندی/سبد خرید از نوار هدر موبایل حذف می‌شن، چون از قبل تو نوار پایین صفحه (bottom-nav) در دسترس‌ان. این فایل باید آخرین فایل CSS محلیِ لینک‌شده تو باشه (بعد از bottom-nav.css)، تا رو استایل‌های قبلی (از جمله product-modal.css و dark-mode.css) اولویت داشته باشه. ========================================================== */ @media (max-width: 768px) { /* هدر همیشه یک ردیفه؛ عرض‌بندی رو فلکس مدیریت می‌کنه */ .header-content { flex-wrap: nowrap; gap: 8px; } /* دکمه‌های متنی «دسته‌بندی / ارتباط با ما» تو موبایل نمایش داده نمی‌شن */ .header-right-buttons { display: none; } /* آیکون‌های علاقه‌مندی و سبد خرید از هدر موبایل حذف می‌شن (نسخه‌ی موبایل این‌ها رو تو نوار پایین صفحه داره) */ .header-icons .favShop_icons, .header-icons .cartShop_icons { display: none !important; } .header-icons { gap: 0; } /* سرچ بیشترین فضای باقی‌مونده رو می‌گیره */ .search-box { flex: 1 1 auto; width: auto; min-width: 0; margin: 0 8px; } /* ---------------- آیکون حساب کاربری ---------------- چه مهمان چه عضو، تو موبایل فقط آیکونه؛ متن («عضویت» / اسم کاربر) مخفیه. نکته مهم: این قانون فقط باید روی آیکون حساب کاربری داخل هدر اثر بذاره، نه داخل منوی همبرگری (اونجا هم کلاس user-icon-slot داره ولی باید همیشه متن «عضویت» رو کامل نشون بده)، برای همین همه‌جا اول .header-icons رو تو سلکتور می‌ذاریم */ .header-icons .user-icon-slot .guest-badge span, .header-icons .user-icon-slot .user-badge span { display: none !important; } .header-icons .user-icon-slot .guest-badge, .header-icons .user-icon-slot .user-badge { width: 40px; height: 40px; padding: 0; border-radius: 50%; justify-content: center; box-shadow: none; } .header-icons .user-icon-slot .guest-badge i, .header-icons .user-icon-slot .user-badge i { font-size: 18px; } /* حالت مهمان (کاربر لاگین نکرده): استایل خنثی، بدون رنگ/دور سبز */ .header-icons .guest-badge { background: var(--c-surface-2); border: 1.5px solid var(--c-border); color: var(--c-text-muted); } .header-icons .guest-badge i { color: var(--c-text-muted); } .header-icons .guest-badge:hover, .header-icons .guest-badge:active { background: var(--c-border); border-color: var(--c-border); color: var(--c-text); } /* حالت عضو (لاگین کرده): همون استایل سبز فعلی سایت (.user-badge تو product-modal.css) دست‌نخورده باقی می‌مونه؛ اینجا فقط سایز/شکل دایره‌ای بالا روش اعمال شده، رنگ سبز تغییری نکرده */ } /* هماهنگ‌سازی حالت مهمانِ خنثی با حالت تاریک سایت */ @media (max-width: 768px) { body.dark-mode .header-icons .guest-badge { background: #24322a !important; border-color: #3a4238 !important; color: #9ca3af !important; } body.dark-mode .header-icons .guest-badge i { color: #9ca3af !important; } body.dark-mode .header-icons .guest-badge:hover, body.dark-mode .header-icons .guest-badge:active { background: #3a4238 !important; color: #e5e7eb !important; } }