/* فونت پیدا — یکجا، همینجا (خواستهٔ کاربر ۲۰۲۶-۰۹-۰۶: «در تمام سایت از
فونت پیدا استفاده کن»). قبلا این @font-face در چند فایل جدا تکرار شده بود
(includes/header.php، admin/layout-top.php) و هر صفحهای که از آن دو
include عبور نمیکرد ولی style.css را مستقیم بار میکرد (مثلا
admin/login.php) اصلا فونت را نمیدید — با Tahoma رندر میشد، هرچند
body پایینتر درست Peyda میخواست. حالا چون همهجا همین یک فایل مشترک
بارگذاری میشود، @font-face هم فقط همینجا کافی است. */
@font-face {
font-family: Peyda;
src: url('https://cdn.mxit.ir/fonts/Peyda/Peyda.woff2') format('woff2'),
url('https://cdn.mxit.ir/fonts/Peyda/Peyda.woff') format('woff');
font-display: swap;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--bg-primary: #111827;
--bg-secondary: #1F2937;
--bg-card: #1F2937;
--bg-input: #374151;
--red-primary: #DC2626;
--red-hover: #B91C1C;
--red-light: #EF4444;
/* رنگ دوم تم (خواستهٔ کاربر: «از ترکیب یک یا چند رنگ بتونم استفاده
کنم») — پیشفرض همان تن هاور قرمز است، یعنی تم پیشفرض تکرنگ بهنظر
میرسد، دقیقا مثل الان؛ فقط تمهای تازهتر پایین همین فایل مقدار
واقعا متفاوتی برایش میگذارند. مصرفش عمدا کم و تزیینی نگه داشته شده
(خط بالای فوتر، حاشیهٔ لوگوی سایدبار ادمین) نه روی دکمهها، چون آنها
باید رنگ اصلی/برند تم بمانند. */
--accent-secondary: var(--red-hover);
/* خواستهٔ کاربر ۲۰۲۶-۰۹-۰۷: «برندها که همه سفیدن، در تمهای روشن اصلا
دیده نمیشوند» — .mm-brand-icon/.pby-brand-logo لوگوی برند را با
filter یکدست «سفید» میکردند (برای دیدهشدن روی زمینهٔ تیرهٔ تم
پیشفرض)، ولی این رنگسازی هاردکد بود، نه وابسته به تم؛ روی زمینهٔ
روشن تمهای تازه، لوگوی سفید روی زمینهٔ سفید محو میشد. راهحل کلی و
آیندهٔنگر: خود «رنگ سیلوئت لوگو» هم یک توکن شد — پیشفرض سفید
(رفتار قبلی)، فقط تمهای روشن پایینتر همین فایل به سیاه برش
میگردانند؛ خود .mm-brand-icon/.pby-brand-logo دیگر رنگ ثابتی
ندارند، فقط var(--logo-filter) را میخوانند. هر تم روشن تازهای هم
در آینده کافی است همین یک متغیر را در بلوک خودش ست کند. */
--logo-filter: brightness(0) invert(1);
--text-primary: #F9FAFB;
--text-secondary: #D1D5DB;
--text-muted: #9CA3AF;
--border-color: #374151;
--border-light: #4B5563;
--green: #10B981;
--green-dark: #059669;
/* رنگ اختصاصی «قیمت کلی/عمده» (خواستهٔ کاربر ۲۰۲۶-۰۹-۲۳: «رنگ کادرهای
قیمت رو بهتر کن، خودت یک رنگ و طرح عالی برای هر تمی بذار») — قبلا
کادر عمده/wholesale همهجا رنگ سبز هاردکد rgba(16,185,129,...) داشت،
کاملا مستقل از تم فعال؛ کادر جزئی/retail هم پسزمینهاش هاردکد قرمز
پیشفرض بود (فقط متنش var(--red-light) بود). عمدا از var(--green)
موجود جدا شد، نه همنامش: --green رنگ معنایی «موفقیت» است (وضعیت
سفارش، پرداخت، موجودی...) و طبق تصمیم قبلی این پروژه عمدا مستقل از
تم میماند (نگاه کنید به توضیح تمهای رنگی پایینتر)؛ اگر همان توکن
را برای قیمت هم عوض میکردیم، رنگ همهٔ وضعیتهای موفقیت سایت هم
ناخواسته تغییر میکرد. کادر جزئی/retail نیازی به توکن تازه نداشت،
چون همین حالا هم var(--red-primary)/var(--red-light) دارد و فقط
پسزمینه/حاشیهاش هاردکد بود؛ همانها هم در ادامهٔ همین فایل به
color-mix() با این متغیرها تبدیل شدند. */
--price-wholesale: #10B981;
--shadow: 0 4px 6px -1px rgba(0,0,0,0.3);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.4);
--radius: 8px;
--radius-sm: 4px;
--radius-lg: 12px;
--transition: 0.2s ease;
}
/* ===================== تم رنگی سایت / پنل مدیریت =====================
خواستهٔ کاربر ۲۰۲۶-۰۹-۰۷: «یک گزینه در مدیریت برای تم سایت ... چند تا
تم رنگی کلی ... خیلی هوشمندانه ... دو دستهبندی: سمت سایت اصلی و سمت
مدیریت». هر تم فقط توکنهای بالا را دوباره تعریف میکند — هیچ selector
دیگری در کل فایل لازم نیست تغییر کند چون همهجا (>۹۰۰ مورد) از همین
var(--...)ها استفاده شده. دو ویژگی مستقل روی :
data-site-theme (صفحات مشتری: includes/header.php + صفحات پرداخت) و
data-admin-theme (صفحات ادمین) — با هم تداخلی ندارند، هرکدام مستقل از
admin/settings.php?sec=theme انتخاب میشود. کلیدها/برچسبها/سهرنگ
پیشنمایش هرکدام در includes/functions.php → siteThemeCatalog() است؛
اگر تمی اینجا اضافه/کم شد باید همانجا هم همگام بماند. رنگهای معنایی
(سبز موفقیت #10B981/#059669 در :root بالا، زرد «در انتظار»، رنگهای
برند شبکههای اجتماعی، کارتهای رنگی داشبورد ادمین) عمدا خارج از این
سیستم ماندهاند و با تغییر تم عوض نمیشوند.
نکتهٔ شناختهشده: چند کادر وضعیت «رد شده» (مثل .pchk-panel.is-no) هم از
همان var(--red-primary) بهعنوان رنگ خطا استفاده میکنند — چون در تم
پیشفرض رنگ اصلی/برند و رنگ خطا هردو تصادفا قرمزند. با تمهای تازه (مثلا
نارنجی/آبی) آن کادرها هم رنگ برند تم را میگیرند، نه لزوما قرمز هشدار؛
جدا کردن کامل «رنگ برند» از «رنگ خطا» در کل کدبیس، بازطراحی جداگانهای
میخواهد و عمدا در این فاز انجام نشد. */
html[data-site-theme="blue-white-orange"],
html[data-admin-theme="blue-white-orange"] {
--bg-primary: #F8FAFC;
--bg-secondary: #FFFFFF;
--bg-card: #FFFFFF;
--bg-input: #F1F5F9;
--red-primary: #EA580C;
--red-hover: #C2410C;
--red-light: #FB923C;
--accent-secondary: #2563EB;
--price-wholesale: #2563EB;
--text-primary: #0F172A;
--text-secondary: #334155;
--text-muted: #64748B;
--border-color: #E2E8F0;
--border-light: #CBD5E1;
--shadow: 0 4px 6px -1px rgba(15,23,42,0.08);
--shadow-lg: 0 10px 15px -3px rgba(15,23,42,0.12);
--logo-filter: brightness(0);
}
html[data-site-theme="white-gold"],
html[data-admin-theme="white-gold"] {
--bg-primary: #FFFBEB;
--bg-secondary: #FFFFFF;
--bg-card: #FFFFFF;
--bg-input: #FEF3C7;
--red-primary: #B45309;
--red-hover: #92400E;
--red-light: #D97706;
--accent-secondary: #78350F;
--price-wholesale: #0F766E;
--text-primary: #1C1917;
--text-secondary: #44403C;
--text-muted: #78716C;
--border-color: #F3E1B0;
--border-light: #E7C989;
--shadow: 0 4px 6px -1px rgba(28,25,23,0.08);
--shadow-lg: 0 10px 15px -3px rgba(28,25,23,0.12);
--logo-filter: brightness(0);
}
html[data-site-theme="navy-blue"],
html[data-admin-theme="navy-blue"] {
--bg-primary: #0B1220;
--bg-secondary: #111C33;
--bg-card: #111C33;
--bg-input: #1E293B;
--red-primary: #2563EB;
--red-hover: #1D4ED8;
--red-light: #60A5FA;
--accent-secondary: #38BDF8;
--price-wholesale: #D97706;
--text-primary: #F1F5F9;
--text-secondary: #CBD5E1;
--text-muted: #94A3B8;
--border-color: #1E293B;
--border-light: #334155;
}
html[data-site-theme="charcoal-teal"],
html[data-admin-theme="charcoal-teal"] {
--bg-primary: #0B1414;
--bg-secondary: #10201F;
--bg-card: #10201F;
--bg-input: #1B2E2C;
--red-primary: #0D9488;
--red-hover: #0F766E;
--red-light: #2DD4BF;
--accent-secondary: #FBBF24;
--price-wholesale: #FBBF24;
--text-primary: #ECFDF5;
--text-secondary: #CCFBF1;
--text-muted: #94A3B8;
--border-color: #1B2E2C;
--border-light: #24413D;
}
html[data-site-theme="lavender-white"],
html[data-admin-theme="lavender-white"] {
--bg-primary: #FAF5FF;
--bg-secondary: #FFFFFF;
--bg-card: #FFFFFF;
--bg-input: #F3E8FF;
--red-primary: #7C3AED;
--red-hover: #6D28D9;
--red-light: #A78BFA;
--accent-secondary: #EC4899;
--price-wholesale: #059669;
--text-primary: #1E1B2E;
--text-secondary: #44403C;
--text-muted: #6B7280;
--border-color: #E9D8FD;
--border-light: #D8B4FE;
--shadow: 0 4px 6px -1px rgba(30,27,46,0.08);
--shadow-lg: 0 10px 15px -3px rgba(30,27,46,0.12);
--logo-filter: brightness(0);
}
/* پنج تم تازه (خواستهٔ کاربر ۲۰۲۶-۰۹-۰۷: «چند تا تم دیگه هم اضافه کن با
رنگبندی حرفهای و عالی») — کلید هرکدام باید دقیقا با siteThemeCatalog()
در includes/functions.php یکی بماند. */
html[data-site-theme="forest-cream"],
html[data-admin-theme="forest-cream"] {
--bg-primary: #FAFAF5;
--bg-secondary: #FFFFFF;
--bg-card: #FFFFFF;
--bg-input: #F1F0E4;
--red-primary: #15803D;
--red-hover: #166534;
--red-light: #22C55E;
--accent-secondary: #A16207;
--price-wholesale: #A16207;
--text-primary: #1C1917;
--text-secondary: #44403C;
--text-muted: #78716C;
--border-color: #E7E5D8;
--border-light: #D6D3C1;
--shadow: 0 4px 6px -1px rgba(28,25,23,0.08);
--shadow-lg: 0 10px 15px -3px rgba(28,25,23,0.12);
--logo-filter: brightness(0);
}
html[data-site-theme="midnight-gold"],
html[data-admin-theme="midnight-gold"] {
--bg-primary: #0A0A0A;
--bg-secondary: #171310;
--bg-card: #171310;
--bg-input: #26201A;
--red-primary: #A16207;
--red-hover: #854D0E;
--red-light: #EAB308;
--accent-secondary: #7C2D12;
--price-wholesale: #0E7490;
--text-primary: #FAFAF9;
--text-secondary: #D6D3D1;
--text-muted: #A8A29E;
--border-color: #26201A;
--border-light: #3B322A;
}
html[data-site-theme="ocean-coral"],
html[data-admin-theme="ocean-coral"] {
--bg-primary: #ECFEFF;
--bg-secondary: #FFFFFF;
--bg-card: #FFFFFF;
--bg-input: #CFFAFE;
--red-primary: #0891B2;
--red-hover: #0E7490;
--red-light: #22D3EE;
--accent-secondary: #FB7185;
--price-wholesale: #FB7185;
--text-primary: #0C2A33;
--text-secondary: #334155;
--text-muted: #64748B;
--border-color: #CFFAFE;
--border-light: #A5F3FC;
--shadow: 0 4px 6px -1px rgba(12,42,51,0.08);
--shadow-lg: 0 10px 15px -3px rgba(12,42,51,0.12);
--logo-filter: brightness(0);
}
html[data-site-theme="graphite-lime"],
html[data-admin-theme="graphite-lime"] {
--bg-primary: #18181B;
--bg-secondary: #27272A;
--bg-card: #27272A;
--bg-input: #3F3F46;
--red-primary: #4D7C0F;
--red-hover: #3F6212;
--red-light: #A3E635;
--accent-secondary: #06B6D4;
--price-wholesale: #06B6D4;
--text-primary: #FAFAFA;
--text-secondary: #D4D4D8;
--text-muted: #A1A1AA;
--border-color: #3F3F46;
--border-light: #52525B;
}
html[data-site-theme="burgundy-cream"],
html[data-admin-theme="burgundy-cream"] {
--bg-primary: #FDF8F3;
--bg-secondary: #FFFFFF;
--bg-card: #FFFFFF;
--bg-input: #F5E9DD;
--red-primary: #9F1239;
--red-hover: #881337;
--red-light: #E11D48;
--accent-secondary: #A16207;
--price-wholesale: #A16207;
--text-primary: #1C1917;
--text-secondary: #44403C;
--text-muted: #78716C;
--border-color: #EEDFC9;
--border-light: #E0C9A6;
--shadow: 0 4px 6px -1px rgba(28,25,23,0.08);
--shadow-lg: 0 10px 15px -3px rgba(28,25,23,0.12);
--logo-filter: brightness(0);
}
/* چهار تم تازهٔ دیگر (خواستهٔ کاربر ۲۰۲۶-۰۹-۰۸: «چند تا رنگ دیگه هم برای
تم سایت طراحی و اضافه کن، خیلی حرفهای و عالی») — کلید هرکدام باید
دقیقا با siteThemeCatalog() در includes/functions.php یکی بماند. */
html[data-site-theme="steel-copper"],
html[data-admin-theme="steel-copper"] {
--bg-primary: #0E1620;
--bg-secondary: #17212C;
--bg-card: #17212C;
--bg-input: #212D3A;
--red-primary: #4A7FA5;
--red-hover: #3A6684;
--red-light: #6FA8D1;
--accent-secondary: #C97C3D;
--price-wholesale: #C97C3D;
--text-primary: #EAF1F7;
--text-secondary: #C3D2DE;
--text-muted: #8CA0AF;
--border-color: #212D3A;
--border-light: #33424F;
}
html[data-site-theme="royal-plum-gold"],
html[data-admin-theme="royal-plum-gold"] {
--bg-primary: #140F1B;
--bg-secondary: #1E1629;
--bg-card: #1E1629;
--bg-input: #2B2038;
--red-primary: #9333EA;
--red-hover: #7E22CE;
--red-light: #C084FC;
--accent-secondary: #D4AF37;
--price-wholesale: #D4AF37;
--text-primary: #F5F3FF;
--text-secondary: #DCD3EE;
--text-muted: #A79FC4;
--border-color: #2B2038;
--border-light: #3D2E4F;
}
html[data-site-theme="rose-quartz"],
html[data-admin-theme="rose-quartz"] {
--bg-primary: #FFF5F7;
--bg-secondary: #FFFFFF;
--bg-card: #FFFFFF;
--bg-input: #FCE7EC;
--red-primary: #BE185D;
--red-hover: #9D174D;
--red-light: #EC4899;
--accent-secondary: #334155;
--price-wholesale: #334155;
--text-primary: #241620;
--text-secondary: #513B46;
--text-muted: #8A7580;
--border-color: #F7D9E1;
--border-light: #F0BFCC;
--shadow: 0 4px 6px -1px rgba(36,22,32,0.08);
--shadow-lg: 0 10px 15px -3px rgba(36,22,32,0.12);
--logo-filter: brightness(0);
}
html[data-site-theme="sky-arctic"],
html[data-admin-theme="sky-arctic"] {
--bg-primary: #F0F9FF;
--bg-secondary: #FFFFFF;
--bg-card: #FFFFFF;
--bg-input: #E0F2FE;
--red-primary: #0284C7;
--red-hover: #0369A1;
--red-light: #38BDF8;
--accent-secondary: #F97316;
--price-wholesale: #F97316;
--text-primary: #0C1B2A;
--text-secondary: #334155;
--text-muted: #64748B;
--border-color: #DCEEFB;
--border-light: #BFE3FA;
--shadow: 0 4px 6px -1px rgba(12,27,42,0.08);
--shadow-lg: 0 10px 15px -3px rgba(12,27,42,0.12);
--logo-filter: brightness(0);
}
/* تم تازه (خواستهٔ کاربر ۲۰۲۶-۰۹-۱۰: «یک تم ترکیبی با کد رنگ #4a54e8 و
مشکی بساز») — red-primary دقیقا همان کد رنگ دادهشده است؛ hover/light
دو سایهٔ تیرهتر/روشنتر مشتقشده از همان رنگاند، نه یک رنگ متفاوت.
پسزمینه مشکی خالص (نه فقط تیره، مطابق درخواست «با مشکی»)؛ چون تیره
است نیازی به override کردن --logo-filter نیست (پیشفرض سفید همینجا
هم درست کار میکند). */
html[data-site-theme="indigo-black"],
html[data-admin-theme="indigo-black"] {
--bg-primary: #0A0A0F;
--bg-secondary: #131320;
--bg-card: #131320;
--bg-input: #1C1C2E;
--red-primary: #4A54E8;
--red-hover: #3B43BA;
--red-light: #777FEE;
--accent-secondary: #D946EF;
--price-wholesale: #22D3EE;
--text-primary: #F1F1FA;
--text-secondary: #C7C9E8;
--text-muted: #8F90B5;
--border-color: #1C1C2E;
--border-light: #2A2A42;
}
/* چهار تم تازه (خواستهٔ کاربر ۲۰۲۶-۰۹-۱۳: «چند تا تم رنگی خیلی خاص دیگه
اضافه کن که خیلی متفاوت و محشر باشه») — عمدا رنگهای خیلی اشباع/نئونی،
نه سایهای تازه از همان الگوی کدر/جواهری ۱۶ تم قبلی. */
html[data-site-theme="neon-nightclub"],
html[data-admin-theme="neon-nightclub"] {
--bg-primary: #0A0510;
--bg-secondary: #150A1E;
--bg-card: #150A1E;
--bg-input: #201230;
--red-primary: #F72585;
--red-hover: #C51D6A;
--red-light: #F966AA;
--accent-secondary: #00E5FF;
--price-wholesale: #00E5FF;
--text-primary: #F5F0FF;
--text-secondary: #D8C9E8;
--text-muted: #9A87B0;
--border-color: #201230;
--border-light: #302047;
}
html[data-site-theme="lava-forge"],
html[data-admin-theme="lava-forge"] {
--bg-primary: #0D0806;
--bg-secondary: #1A0F0A;
--bg-card: #1A0F0A;
--bg-input: #26150D;
--red-primary: #FF4D00;
--red-hover: #CC3E00;
--red-light: #FF824D;
--accent-secondary: #00B4D8;
--price-wholesale: #00B4D8;
--text-primary: #FFF3EA;
--text-secondary: #E8C9B8;
--text-muted: #A87F6D;
--border-color: #26150D;
--border-light: #3A2015;
}
html[data-site-theme="emerald-royale"],
html[data-admin-theme="emerald-royale"] {
--bg-primary: #06120D;
--bg-secondary: #0C2018;
--bg-card: #0C2018;
--bg-input: #123023;
--red-primary: #00E6A0;
--red-hover: #00B880;
--red-light: #4DEDBC;
--accent-secondary: #FFC300;
--price-wholesale: #FFC300;
--text-primary: #EAFBF3;
--text-secondary: #B9E5D2;
--text-muted: #6F9C87;
--border-color: #123023;
--border-light: #1C4433;
}
html[data-site-theme="aurora-borealis"],
html[data-admin-theme="aurora-borealis"] {
--bg-primary: #05081A;
--bg-secondary: #0A1030;
--bg-card: #0A1030;
--bg-input: #101848;
--red-primary: #00D4FF;
--red-hover: #00AACC;
--red-light: #4DE0FF;
--accent-secondary: #C724FF;
--price-wholesale: #C724FF;
--text-primary: #EAF6FF;
--text-secondary: #C3D9F0;
--text-muted: #7C93B8;
--border-color: #101848;
--border-light: #182468;
}
/* کارتهای انتخاب تم — admin/settings.php?sec=theme، دو گروه مستقل (سایت/ادمین) */
.theme-picker {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
gap: 0.85rem;
}
.theme-card {
position: relative;
display: block;
border: 2px solid var(--border-color);
border-radius: var(--radius);
padding: 0.85rem 0.85rem 0.85rem 2.1rem;
cursor: pointer;
background: var(--bg-secondary);
transition: border-color var(--transition);
}
.theme-card:hover { border-color: var(--border-light); }
.theme-card.is-active,
.theme-card:has(input:checked) { border-color: var(--red-primary); }
.theme-card input[type="radio"] {
position: absolute;
top: 0.9rem;
inset-inline-start: 0.8rem;
margin: 0;
}
.theme-swatch-row { display: flex; gap: 0.35rem; margin-bottom: 0.6rem; }
.theme-swatch {
width: 26px;
height: 26px;
border-radius: 50%;
border: 1px solid rgba(0,0,0,0.15);
flex: 0 0 auto;
}
.theme-card-label { font-size: 0.85rem; font-weight: 600; color: var(--text-primary); }
body {
font-family: Peyda, Tahoma, Arial, sans-serif;
background: var(--bg-primary);
color: var(--text-primary);
direction: rtl;
line-height: 1.6;
min-height: 100vh;
display: flex;
flex-direction: column;
}
/* فرمها (input/button/select/textarea) بهطور پیشفرض font-family بدنه را
ارث نمیبرند — مرورگر فونت پیشفرض سیستم/رابطکاربری خودش را میگذارد،
حتی وقتی body درست Peyda خواسته. تا امروز این یکییکی، هرجا گزارش
میشد، با یک font-family:inherit مجزا رفع میشد (مثلا دکمهٔ «همه
برندها» — [[batch9-fixes]]) — این قاعدهٔ عمومی همان کار را یکجا برای
کل سایت انجام میدهد، بدون نیاز به پیدا کردن مورد بعدی. */
input, button, select, textarea {
font-family: inherit;
}
/* ===== آیکونهای SVG درونخطی (تابع icon() در includes/icons.php) ===== */
.ic {
width: 1.15em;
height: 1.15em;
display: inline-block;
vertical-align: -0.18em;
flex: 0 0 auto;
overflow: visible;
}
.ic-sm { width: 0.95em; height: 0.95em; }
.ic-lg { width: 1.4em; height: 1.4em; }
.ic-xl { width: 2em; height: 2em; }
.ic-xxl { width: 3.2em; height: 3.2em; }
/* رنگهای کمکی */
.ic-red { color: var(--red-light); }
.ic-green { color: var(--green); }
.ic-amber { color: #FBBF24; }
.ic-muted { color: var(--text-muted); }
/* برای ظرفهایی که flex/gap ندارند (.btn و .nav-link خودشان gap دارند) */
.ic-gap { margin-inline-end: 0.4em; }
/* آیکون جانشین تصویر (محصول بدون عکس) و آیکون حالت خالی:
در اندازهٔ بزرگ ضخامت خط کم میشود تا توپر و سنگین دیده نشود. */
.product-card-image > .ic,
.product-detail-image > .ic,
.cart-product-img > .ic,
.no-results-icon > .ic { stroke-width: 1.1; opacity: 0.5; }
.product-card-image > .ic { width: 4.5rem; height: 4.5rem; }
.product-detail-image > .ic { width: 9rem; height: 9rem; }
.cart-product-img > .ic { width: 1.9rem; height: 1.9rem; stroke-width: 1.5; }
.no-results-icon > .ic { width: 3.4rem; height: 3.4rem; opacity: 0.55; }
a {
color: var(--red-primary);
text-decoration: none;
}
a:hover {
color: var(--red-hover);
}
.site-main {
flex: 1;
padding: 1rem 0;
}
/* Header */
.site-header {
position: sticky;
top: 0;
z-index: 1000;
}
.header-top {
background: var(--bg-secondary);
border-bottom: 1px solid var(--border-color);
padding: 0.5rem 0;
}
.header-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
display: flex;
align-items: center;
gap: 1rem;
}
.header-left-group {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.logo {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text-primary);
font-size: 1.1rem;
font-weight: bold;
white-space: nowrap;
}
.logo:hover { color: var(--red-primary); }
.logo-icon { font-size: 1.5rem; }
/* لوگوی آپلودی فروشگاه — جایگزین آیکون دندانهای پیشفرض، وقتی از پنل
آپلود شود (خواستهٔ کاربر ۲۰۲۶-۰۹-۱۱). هماندازهٔ همان آیکون قبلی
(font-size روی .logo-icon، اینجا مستقیم روی خود img چون ![]()
از
font-size ارث نمیبرد). */
.logo-icon img.logo-img { width: 1.5rem; height: 1.5rem; object-fit: contain; display: block; border-radius: 4px; }
.footer-about .logo-icon img.logo-img { width: 1.35rem; height: 1.35rem; }
.header-search {
flex: 1;
min-width: 200px;
display: flex;
}
.search-input {
flex: 1;
padding: 0.5rem 0.75rem;
background: var(--bg-input);
border: 1px solid var(--border-color);
border-left: none;
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
color: var(--text-primary);
font-family: inherit;
font-size: 0.85rem;
outline: none;
}
.search-input:focus { border-color: var(--red-primary); }
.search-input::placeholder { color: var(--text-muted); }
.search-btn {
padding: 0.5rem 1rem;
background: var(--red-primary);
border: 1px solid var(--red-primary);
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
color: #fff;
cursor: pointer;
font-family: inherit;
font-size: 0.85rem;
white-space: nowrap;
}
.search-btn:hover { background: var(--red-hover); }
/* ---------- جستجوی زندهٔ نوار بالا (assets/js/search.js) ----------
.search-live-wrap را خود اسکریپت بهجای .header-search اضافه میکند
(position:relative لازم است تا دراپداون دقیقا زیر همین نوار بنشیند،
نه وسط صفحه). دراپداون position:absolute است، پس با flex-بودن
.header-search تداخلی ندارد — عضو چیدمان flex نمیشود. */
.search-live-wrap { position: relative; }
.search-drop {
position: absolute;
top: calc(100% + 0.4rem);
right: 0;
left: 0;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius);
box-shadow: var(--shadow-lg);
overflow: hidden;
z-index: 500;
}
.search-drop-empty {
padding: 1rem;
text-align: center;
color: var(--text-muted);
font-size: 0.82rem;
}
.search-drop-row {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.6rem 0.75rem;
border-bottom: 1px solid var(--border-color);
color: var(--text-primary);
text-decoration: none;
transition: background var(--transition);
}
.search-drop-row:hover, .search-drop-row:focus { background: var(--bg-input); }
.sd-img {
flex: 0 0 auto;
width: 42px;
height: 42px;
border-radius: var(--radius-sm);
background: var(--bg-input);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
color: var(--text-muted);
font-size: 1.1rem;
}
.sd-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sd-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; }
/* نام و «مناسب …» همخط (خواستهٔ کاربر ۲۰۲۶-۰۹-۲۰: «روبروش توی یک خط»):
نام به اندازهٔ خودش، «مناسب …» فضای باقیمانده را میگیرد و اگر جا کم بود
با سهنقطه کوتاه میشود. */
.sd-head { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.sd-name {
flex: 0 1 auto;
min-width: 0;
font-size: 0.9rem;
font-weight: 700;
line-height: 1.5;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sd-name mark { background: rgba(220, 38, 38, 0.25); color: inherit; border-radius: 3px; padding: 0 0.1rem; }
/* «مناسب …» — جایگزین قیمت (۲۰۲۶-۰۹-۲۰، خواستهٔ کاربر): برچسب کوچک همرنگ تم
+ نام خودروهای مناسب + بازهٔ سال، هرکدام فقط اگر ثبت شده باشد. */
.sd-fit {
display: flex;
align-items: center;
gap: 0.4rem;
flex: 1 1 0;
min-width: 4.5rem;
font-size: 0.76rem;
color: var(--text-secondary);
}
.sd-fit b {
flex: 0 0 auto;
font-size: 0.64rem;
font-weight: 700;
padding: 0.05rem 0.45rem;
border-radius: 999px;
color: var(--red-light);
background: color-mix(in srgb, var(--red-primary) 16%, transparent);
}
.sd-fit-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-years { flex: 0 0 auto; font-size: 0.68rem; color: var(--text-muted); }
.sd-years::before { content: "\00B7"; margin-inline-end: 0.35rem; }
.sd-meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; min-width: 0; }
.sd-tags { display: flex; gap: 0.3rem; flex-wrap: wrap; }
.sd-tag {
font-size: 0.64rem;
font-weight: 600;
padding: 0.05rem 0.4rem;
border-radius: 999px;
white-space: nowrap;
}
.sd-tag-brand { background: rgba(59, 130, 246, 0.15); color: #93C5FD; }
.sd-tag-cat { background: rgba(234, 179, 8, 0.15); color: #FCD34D; }
.sd-tech { font-size: 0.7rem; color: var(--text-muted); direction: ltr; text-align: right; }
.search-drop-more {
display: block;
padding: 0.65rem;
text-align: center;
font-size: 0.8rem;
font-weight: 600;
color: var(--red-light);
text-decoration: none;
background: var(--bg-card);
}
.search-drop-more:hover { background: var(--bg-input); }
@media (max-width: 640px) {
.search-drop { left: -0.5rem; right: -0.5rem; }
.sd-tags { display: none; }
}
.header-actions {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.cart-link {
position: relative;
display: flex;
align-items: center;
color: var(--text-primary);
padding: 0.5rem;
border-radius: var(--radius-sm);
}
.cart-link:hover { background: var(--bg-input); color: var(--red-primary); }
.cart-icon { font-size: 1.5rem; }
.cart-badge {
position: absolute;
top: -2px;
right: -4px;
background: var(--red-primary);
color: #fff;
font-size: 0.65rem;
min-width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
padding: 0 4px;
}
/* Brand logo in header */
.brand-logo-box {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
overflow: hidden;
border: 2px solid rgba(220, 38, 38, 0.3);
background: #fff;
flex-shrink: 0;
animation: logoSlideIn 0.4s ease;
}
.brand-logo-box:hover { border-color: var(--red-primary); }
.brand-logo-img {
width: 34px;
height: 34px;
object-fit: contain;
/* یکدست، سیاهوسفید (خواسته کاربر: «مثل بیامو سیاه باشه») — با
brightness(0) هر لوگویی، صرفنظر از رنگ اصلیاش، به یک سیلوئت
سیاه تبدیل میشود.
۲۰۲۶-۰۹-۰۳: عمدا سیاه ماند، برخلاف .mm-brand-icon/.pby-brand-logo
که سفید شدند — این یکی داخل .brand-logo-box با پسزمینهٔ #fff
مینشیند (چند خط بالاتر)، پس سیاه همان انتخاب درست است؛ سفید کردنش
باعث میشد لوگو روی زمینهٔ سفید محو شود. */
filter: brightness(0);
}
@keyframes logoSlideIn {
from { opacity: 0; transform: scale(0.5); }
to { opacity: 1; transform: scale(1); }
}
/* Main navbar */
.main-navbar {
background: var(--bg-secondary);
border-bottom: 2px solid var(--red-primary);
box-shadow: var(--shadow);
}
.main-navbar .header-container {
padding: 0 1rem;
gap: 0;
}
.nav-link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.65rem 0.85rem;
color: var(--text-secondary);
font-size: 0.85rem;
text-decoration: none;
white-space: nowrap;
transition: all var(--transition);
border-bottom: 2px solid transparent;
margin-bottom: -2px;
}
.nav-link:hover {
color: var(--text-primary);
background: rgba(220, 38, 38, 0.08);
}
/* Mega menu */
.nav-mega { position: relative; }
.nav-mega .nav-dropdown-btn {
background: none;
border: none;
cursor: pointer;
font-family: inherit;
}
.mega-menu {
display: none;
position: absolute;
top: 100%;
right: 0;
width: 100vw;
max-width: 1200px;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-top: 2px solid var(--red-primary);
box-shadow: var(--shadow-lg);
border-radius: 0 0 var(--radius) var(--radius);
z-index: 100;
}
.nav-mega:hover .mega-menu { display: block; }
.mega-menu-inner {
padding: 1.25rem;
max-height: 70vh;
overflow-y: auto;
}
.mega-parts-grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 0.5rem 0.6rem;
}
.mm-col { min-width: 0; }
.mm-brand-head {
display: flex;
align-items: center;
gap: 0.2rem;
color: var(--red-primary);
font-weight: 600;
font-size: 0.73rem;
text-decoration: none;
padding: 0.15rem 0;
margin-bottom: 0.12rem;
border-bottom: 1px solid rgba(220,38,38,0.12);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.mm-brand-head:hover { color: var(--red-hover); }
.mm-brand-icon {
width: 17px;
height: 17px;
object-fit: contain;
flex-shrink: 0;
/* رنگ سیلوئت از تم میآید، نه ثابت — نگاه کنید به --logo-filter در
:root بالای همین فایل. */
filter: var(--logo-filter);
}
.mm-part-head {
color: var(--red-primary);
font-weight: 600;
font-size: 0.85rem;
display: block;
padding: 0.2rem 0;
margin-bottom: 0.2rem;
border-bottom: 1px solid rgba(220,38,38,0.15);
}
.mm-sub-list {
list-style: none;
padding: 0;
margin: 0;
}
.mm-sub-list li a {
display: block;
padding: 0.18rem 0;
color: var(--text-muted);
font-size: 0.78rem;
text-decoration: none;
}
.mm-sub-list li a:hover { color: var(--text-primary); }
.mm-more {
color: var(--red-primary) !important;
font-size: 0.65rem !important;
}
a.mm-part-head {
text-decoration: none;
cursor: pointer;
transition: color 0.15s;
}
a.mm-part-head:hover { color: var(--red-hover); }
/* صفحهٔ دستهبندی قطعات (parts.php) */
.parts-crumb {
font-size: 0.85rem;
color: var(--text-muted);
margin-bottom: 0.75rem;
}
.parts-crumb a { color: var(--text-secondary); text-decoration: none; }
.parts-crumb a:hover { color: var(--red-light); }
/* مسیر ناوبری سئو — همان الگوی .parts-crumb، روی product.php/category.php/
shop.php/parts.php (خواستهٔ کاربر ۲۰۲۶-۰۹-۲۲: «خروجی HTML مناسب» برای
Breadcrumb). آیتم فعلی (بدون لینک) با متن معمولی، بقیه لینک. */
.seo-breadcrumb {
font-size: 0.82rem;
color: var(--text-muted);
margin-bottom: 0.85rem;
line-height: 1.9;
}
.seo-breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.seo-breadcrumb a:hover { color: var(--red-light); }
.seo-breadcrumb-sep { opacity: 0.55; margin: 0 0.15rem; }
/* خواستهٔ کاربر ۲۰۲۶-۰۹-۱۹ («مجموعه قطعات تعمیر اساسی موتور» با «...» نصفه
نمایش داده میشد؛ پیگیری بلافاصله: «دو خط نشه») — دور اول با اجازهٔ
شکستن تا ۲ خط رفع شد، ولی کاربر دوخطیشدن را هم نمیخواست. رفع نهایی:
از گرید با ستونهای همعرض (که مجبور بود عرض هر کارت را به عرض کارتهای
کوتاهتر کنار خودش گره بزند) به فلکس تبدیل شد — هر کارت دقیقا بهاندازهٔ
متن خودش عریض میشود (`flex:0 0 auto`)، نه یک سهم مساوی از ردیف؛ کارتهای
کوتاه کوچک میمانند، کارت بلند خودش بزرگتر میشود، هیچکدام مجبور به
بریدن یا دوخطیشدن نیستند. `max-width`+`overflow-wrap` فقط یک سپر ایمنی
نادر است — تنها وقتی یک نام واقعا از کل عرض صفحهٔ موبایل هم پهنتر باشد
به کار میافتد، در حالت عادی هیچ اثری ندارد. */
.parts-cat-grid {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 1.75rem;
}
.parts-cat-tile {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
flex: 0 0 auto;
max-width: 100%;
height: 60px;
padding: 0 1.1rem;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius);
color: var(--text-primary);
text-decoration: none;
transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.parts-cat-tile:hover {
border-color: var(--red-primary);
background: var(--bg-secondary);
transform: translateY(-2px);
}
.parts-cat-tile-name {
font-size: 0.9rem;
font-weight: 600;
white-space: nowrap;
overflow-wrap: break-word;
}
/* فهرست سرشاخهها (parts.php بدون cat؟) — «موتور و قطعات موتوری»-وار،
بدون شمارهٔ زیرشاخه، فقط اسم برند وسطچین. کارت سرشاخهٔ باز و کارت
زیرشاخهدار (که هنوز شمارهٔ کالا دارد) هر دو از همین .parts-cat-tile
میآیند، پس این حالت با یک کلاس کمکی روی گرید جدا شده، نه با تغییر
خود .parts-cat-tile عمومی. */
.parts-cat-grid--top .parts-cat-tile { justify-content: center; }
.parts-cat-grid--top .parts-cat-tile-name { text-align: center; }
.parts-cat-tile-count {
font-size: 0.72rem;
color: var(--text-muted);
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: 999px;
padding: 0.1rem 0.5rem;
white-space: nowrap;
flex-shrink: 0;
}
.parts-cat-tile:hover .parts-cat-tile-count { color: var(--red-light); }
/* ---------- مرحلهٔ برند/سال صفحهٔ parts.php (خواستهٔ کاربر) ---------- */
.pby-box {
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: 1.1rem;
margin-bottom: 1.75rem;
}
.pby-title {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.95rem;
font-weight: 600;
color: var(--text-primary);
margin-bottom: 0.9rem;
}
.pby-brands {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 0.75rem;
}
/* کاشی برند — عمدا بزرگتر و برجستهتر از .parts-cat-tile چون این
انتخاب، نقطهٔ شروع کل مسیر خرید است (خواستهٔ کاربر: «کلید بزرگ و زیبا»). */
.pby-brand-tile {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
height: 110px;
padding: 0.75rem 0.5rem;
background: var(--bg-card);
border: 2px solid var(--border-color);
border-radius: var(--radius);
color: var(--text-primary);
text-decoration: none;
text-align: center;
transition: border-color 0.15s, transform 0.15s, background 0.15s;
}
.pby-brand-tile:hover {
border-color: var(--red-primary);
background: var(--bg-secondary);
transform: translateY(-3px);
}
/* رنگ سیلوئت از تم میآید، نه ثابت — نگاه کنید به --logo-filter در :root
بالای همین فایل (همان دلیل .mm-brand-icon). */
.pby-brand-logo { width: 46px; height: 46px; object-fit: contain; filter: var(--logo-filter); }
.pby-brand-tile span { font-size: 0.82rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.pby-selrow { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.pby-selbrand { display: flex; align-items: center; gap: 0.6rem; font-size: 0.95rem; }
.pby-selbrand .pby-brand-logo { width: 38px; height: 38px; }
.pby-selbrand b { color: var(--text-primary); }
.pby-change {
display: inline-flex; align-items: center; gap: 0.3rem;
font-size: 0.75rem; color: var(--text-muted); text-decoration: none;
border: 1px solid var(--border-color); border-radius: 999px; padding: 0.15rem 0.6rem;
}
.pby-change:hover { color: var(--red-light); border-color: var(--red-primary); }
/* برند + سال زیر هم (نه کنار هم) — چون کادر چیپهای سال حالا میتواند
چند سطر باشد و کنار برند جا نمیشد. */
.pby-selrow { display: flex; flex-direction: column; align-items: flex-start; gap: 0.9rem; }
/* مدل و سال هرکدام کادر مجزای خودشان (خواستهٔ کاربر: «توی یک کادر
مجزا از سال») — قاب+پسزمینه، تا مدل و سال بهوضوح دو بخش جدا دیده
شوند، نه یک ستون پیوسته. */
.pby-models, .pby-years {
width: 100%;
padding: 0.75rem 0.85rem;
border: 1px solid var(--border-color);
border-radius: var(--radius);
background: var(--bg-primary);
/* هدر سایت position:sticky است؛ بدون این، پرش لنگر مقصد را درست
زیر هدر میگذاشت و عملا محتوای کادر پشت هدر پنهان میشد — همان
چیزی که «میپره روی محصول» بهنظر میرسید (کادر سال آنقدر کوتاه
بود که کاملا زیر هدر گم میشد). */
scroll-margin-top: 110px;
}
.pby-modelslabel, .pby-yearslabel { display: flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 0.6rem; }
/* «همه مدلها»/«همه سالها» — خواستهٔ کاربر: «متفاوت باشه و بالاتر از
بقیه توی کادر خودش باشه»؛ یک ردیف مجزا، پیش از چیپهای تکتک مدل/سال،
با ظاهر متفاوت (خطچین/خاکستری، نه توپر همرنگ بقیه) تا واضح باشد این
یک «پاککن/بازگشت» است، نه یک گزینهٔ همردیف بقیه. */
.pby-reset-chip {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 0.5rem 1rem;
margin-bottom: 0.65rem;
font-size: 0.82rem;
font-weight: 700;
border: 2px dashed var(--border-color);
border-radius: var(--radius-sm);
background: var(--bg-secondary);
color: var(--text-secondary);
text-decoration: none;
transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.pby-reset-chip:hover { border-color: var(--red-primary); color: var(--text-primary); }
.pby-reset-chip.is-on { background: var(--red-primary); border-color: var(--red-primary); border-style: solid; color: #fff; }
/* چیپهای بزرگ سال بهجای نوار کشویی (خواستهٔ کاربر) — هر سال یک دکمهٔ
گرد کلیکپذیر مستقل، همشکل با کاشی برند بالا ولی جمعوجورتر چون تعدادشان
بیشتر است. لینک سادهاند، پس بدون جاوااسکریپت هم کار میکنند. */
.pby-yearchips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pby-yearchip {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 64px;
padding: 0.55rem 1rem;
font-size: 0.9rem;
font-weight: 700;
border: 2px solid var(--border-color);
border-radius: 999px;
background: var(--bg-card);
color: var(--text-primary);
text-decoration: none;
transition: border-color 0.15s, transform 0.15s, background 0.15s, color 0.15s;
}
.pby-yearchip:hover { border-color: var(--red-primary); transform: translateY(-2px); }
.pby-yearchip.is-on { background: var(--red-primary); border-color: var(--red-primary); color: #fff; }
/* خواستهٔ کاربر ۲۰۲۶-۰۹-۱۶: «روی سال خودرو موس نگه میدارم میخوام عدد
میلادی هم نمایش داده بشه، هی میلادی هی شمسی از پایین کادر دائم عوض بشه
تا موس روی کادره» — دو ردیف (شمسی/میلادی) رویهم، در جعبهای بهاندازهٔ
دقیقا یک ردیف با overflow:hidden؛ فقط ارتفاع همین یک چیپ بزرگتر میشود،
نه کل ردیف چیپها. */
.pby-yc-clip { display: inline-block; overflow: hidden; height: 1.3em; line-height: 1.3em; vertical-align: middle; }
.pby-yc-stack { display: flex; flex-direction: column; }
.pby-yc-row { height: 1.3em; line-height: 1.3em; }
/* انیمیشن فقط با :hover شروع میشود (لینک ساده، بدون جاوااسکریپت) و تا
وقتی موس روی چیپ است بینهایت تکرار میشود — خودش با رفتن موس متوقف
میشود چون کلاس :hover دیگر اعمال نیست. */
.pby-yearchip:hover .pby-yc-stack { animation: pbyYearFlip 2.6s ease-in-out infinite; }
@keyframes pbyYearFlip {
0%, 42% { transform: translateY(0); }
50%, 92% { transform: translateY(-1.3em); }
100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.pby-yearchip:hover .pby-yc-stack { animation: none; }
}
/* چیپهای مدل — خواستهٔ کاربر: «مدل کلید هم بیضی نباشه» — دقیقا همان
چیپ سال، فقط گوشههای گرد معمولی (مستطیل) بهجای بیضی/کپسولی، تا
بصری هم از چیپ سال جدا باشد. */
.pby-modelchips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pby-modelchip {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 64px;
padding: 0.55rem 1rem;
font-size: 0.9rem;
font-weight: 700;
border: 2px solid var(--border-color);
border-radius: 10px;
background: var(--bg-card);
color: var(--text-primary);
text-decoration: none;
transition: border-color 0.15s, transform 0.15s, background 0.15s, color 0.15s;
}
.pby-modelchip:hover { border-color: var(--red-primary); transform: translateY(-2px); }
.pby-modelchip.is-on { background: var(--red-primary); border-color: var(--red-primary); color: #fff; }
@media (max-width: 640px) {
.pby-brands { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); }
.pby-brand-tile { height: 90px; }
.pby-yearchip, .pby-modelchip { min-width: 56px; padding: 0.5rem 0.8rem; font-size: 0.85rem; }
}
.parts-section-title {
font-size: 1rem;
font-weight: 600;
margin: 1.25rem 0 0.75rem;
color: var(--text-secondary);
}
/* لنگر نهایی کلیک مدل/سال (وقتی سال فعال نیست) — همان دلیل
scroll-margin-top روی .pby-models/.pby-years بالاتر: هدر sticky است. */
#parts-products { scroll-margin-top: 110px; }
.flash {
max-width: 1200px;
margin: 1rem auto;
padding: 0.75rem 1rem;
border-radius: var(--radius);
text-align: center;
font-size: 0.9rem;
}
.flash-error {
background: rgba(220, 38, 38, 0.15);
border: 1px solid var(--red-primary);
color: var(--red-light);
}
.flash-success {
background: rgba(16, 185, 129, 0.15);
border: 1px solid var(--green);
color: var(--green);
}
/* خنثی از نظر تم — برخلاف flash-error/success قرار نیست هشدار یا موفقیت
باشد، فقط یک عدد پیشنمایش (مثلا مدیریت قیمتها) را نشان میدهد؛
accent-secondary بین تمها خیلی پرتضاد است (از آبی تا قهوهای تیره)،
پس رنگ خنثی خود متن صفحه امنتر است. */
.flash-info {
background: color-mix(in srgb, var(--text-muted) 12%, transparent);
border: 1px solid var(--border-color);
color: var(--text-primary);
}
/* ===== توست پیغام سبد خرید =====
جای ثابت و اختصاصی، خارج از جریان صفحه (position:fixed) → محتوای صفحه هیچوقت
با آمدن/رفتن پیغام بالا و پایین نمیپرد. روی موبایل تمامعرض پایین صفحه مینشیند. */
.cart-toast {
position: fixed;
bottom: 1.25rem;
left: 50%;
z-index: 1200;
display: flex;
align-items: center;
gap: 0.55rem;
max-width: min(92vw, 460px);
padding: 0.7rem 0.85rem;
border-radius: 12px;
font-size: 0.88rem;
line-height: 1.5;
text-align: right;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
transform: translateX(-50%) translateY(0);
opacity: 1;
transition: opacity 0.28s ease, transform 0.28s ease, visibility 0.28s;
animation: cartToastIn 0.28s ease both;
}
@keyframes cartToastIn {
from { opacity: 0; transform: translateX(-50%) translateY(14px); }
to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.cart-toast.is-hide {
opacity: 0;
visibility: hidden;
transform: translateX(-50%) translateY(14px);
animation: none;
}
.cart-toast.is-ok { border-color: var(--green); background: linear-gradient(180deg, rgba(16,185,129,0.16), rgba(16,185,129,0.06)), var(--bg-secondary); color: var(--text-primary); }
.cart-toast.is-err { border-color: var(--red-primary); background: linear-gradient(180deg, rgba(220,38,38,0.16), rgba(220,38,38,0.06)), var(--bg-secondary); color: var(--text-primary); }
.cart-toast-msg { flex: 1; min-width: 0; }
.cart-toast-ic { flex: 0 0 auto; display: inline-flex; }
.cart-toast-ic > .ic { width: 1.3rem; height: 1.3rem; }
.cart-toast.is-ok .cart-toast-ic > .ic { color: var(--green); }
.cart-toast.is-err .cart-toast-ic > .ic { color: var(--red-light); }
.cart-toast-x {
flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
width: 26px; height: 26px; padding: 0;
background: transparent; border: none; cursor: pointer;
border-radius: 7px; color: var(--text-muted);
transition: all var(--transition);
}
.cart-toast-x:hover { background: rgba(255, 255, 255, 0.07); color: var(--text-primary); }
.cart-toast-x > .ic { width: 1rem; height: 1rem; }
@media (max-width: 600px) {
.cart-toast { left: 0.6rem; right: 0.6rem; bottom: 0.6rem; max-width: none; transform: none; animation-name: cartToastInSm; }
.cart-toast.is-hide { transform: translateY(14px); }
}
@keyframes cartToastInSm {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.cart-toast { animation: none; transition: opacity 0.15s linear; }
}
/* Container */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
/* Page Title */
.page-title {
font-size: 1.5rem;
font-weight: bold;
margin-bottom: 1.5rem;
color: var(--text-primary);
border-bottom: 2px solid var(--red-primary);
padding-bottom: 0.5rem;
display: inline-block;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.6rem 1.25rem;
border: none;
border-radius: var(--radius-sm);
cursor: pointer;
font-family: inherit;
font-size: 0.875rem;
font-weight: 500;
transition: all var(--transition);
text-align: center;
}
.btn-primary {
background: var(--red-primary);
color: #fff;
}
.btn-primary:hover {
background: var(--red-hover);
color: #fff;
}
/* دکمهٔ «ناموجود» (خواستهٔ کاربر ۲۰۲۶-۰۹-۱۱: «دیگه رنگی نشون نده، خودت
بیرنگش کن مثلا خاکستری») — تا امروز هیچ استایلی برای دکمهٔ disabled
نبود، پس #addToCartBtn در product.php وقتی جاوااسکریپت با نداشتن موجودی
آن را disabled و متنش را «ناموجود» میکرد، هنوز رنگ قرمز برند
(`.btn-primary`) را داشت — انگار قابلکلیک و فعال است. یک قاعدهٔ عمومی
روی خود `.btn:disabled` (نه فقط primary، هر دکمهٔ غیرفعالی در کل سایت)
با توکنهای خنثی همیشهموجود سیستم تم (نه یک خاکستری هاردکد) اضافه شد؛
تا با هر ۱۵ تم رنگی هماهنگ بماند، هم روشن هم تیره. specificity دو
سلکتوری (`.btn:disabled`) خودشبهخود روی `.btn-primary`/`.btn-secondary`
(یک سلکتوری) برنده میشود، نیازی به !important نبود. */
.btn:disabled,
.btn:disabled:hover {
background: var(--bg-input);
color: var(--text-muted);
cursor: not-allowed;
opacity: 0.75;
}
.btn-secondary {
background: var(--bg-input);
color: var(--text-primary);
}
.btn-secondary:hover {
background: var(--border-light);
}
.btn-sm {
padding: 0.35rem 0.75rem;
font-size: 0.8rem;
}
.btn-outline {
background: transparent;
border: 1px solid var(--red-primary);
color: var(--red-primary);
}
.btn-outline:hover {
background: var(--red-primary);
color: #fff;
}
.btn-danger {
background: var(--red-primary);
color: #fff;
}
.btn-danger:hover {
background: var(--red-hover);
}
.btn-success {
background: var(--green);
color: #fff;
}
.btn-success:hover {
background: var(--green-dark);
}
.btn-block {
display: block;
width: 100%;
}
/* Product Grid */
.product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 1.25rem;
}
.product-card {
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius);
overflow: hidden;
transition: all var(--transition);
display: flex;
flex-direction: column;
/* باگ واقعی موبایل (خواستهٔ کاربر ۲۰۲۶-۰۹-۱۴: «همگامسازی کامل سایت
برای موبایل، هیچ بههمریختگیای») — این کارت هم آیتم گرید
(.product-grid) است هم فرزند فلکس خودش؛ هر دو بهطور پیشفرض
min-width:auto دارند، یعنی هیچوقت زیر «کوچکترین محتوای تقسیمنشدنی»
(مثلا شمارهٔ فنی لاتین یا چیپ قیمت درازتر) کوچک نمیشوند — روی
شبکهٔ دوستونی موبایل (≤480px، پایینتر همین فایل) این یعنی محتوای
نیمهٔ دوم کارت بهجای شکستن خط، از کادر (overflow:hidden بالا)
بیرون و نامرئی میزد. min-width:0 اجازهٔ کوچکشدن واقعی میدهد. */
min-width: 0;
}
.product-card:hover {
border-color: var(--red-primary);
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
/* خواستهٔ کاربر ۲۰۲۶-۰۹-۰۸: «عکس کالاها از حاشیهها زده بیرون» — علت واقعی
ارتفاع ثابت ۲۰۰px بود روی عرض متغیر ستون گرید (auto-fill با minmax
260px)؛ عکسهای محصولات معمولا تقریبا مربعیاند (مثلا ۴۱۳×۴۳۸،
۴۴۷×۴۴۷ — بررسیشده روی چند محصول واقعی)، ولی قاب همیشه یک نسبت
ابعاد افقی (و هرچه صفحه عریضتر، افقیتر) داشت — یعنی object-fit:cover
برای پرکردن آن مجبور بود هرچه بیشتر از بالا/پایین عکس را ببرد؛ روی
صفحههای عریض این برش آنقدر شدید میشد که موضوع اصلی عکس (مثلا لاستیک)
انگار از قاب میزد بیرون. با aspect-ratio:1/1 قاب همیشه مربع میماند —
با هر عرض ستونی، نسبت برش با عکسهای واقعا مربعی هماهنگ و قابلپیشبینی
است، دیگر با عریضترشدن صفحه بدتر نمیشود. عرض/تعداد ستونهای گرید
(`.product-grid`) دستنخورده ماند — این فقط ارتفاع خود قاب عکس را از
یک عدد ثابت به نسبت متناسب با عرض تبدیل کرد. */
.product-card-image {
width: 100%;
aspect-ratio: 1 / 1;
background: var(--bg-input);
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
color: var(--text-muted);
overflow: hidden;
border-radius: var(--radius) var(--radius) 0 0;
}
.product-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
/* دفاعی: حتی اگر گوشهٔ گرد کارت به هر دلیلی (مرورگر/زوم خاص) لبهٔ
تیز عکس را کامل نبرد، خود عکس هم گوشهٔ گردش را دارد. */
border-radius: inherit;
}
.product-card-body {
padding: 1rem;
flex: 1;
display: flex;
flex-direction: column;
min-width: 0; /* همدلیل .product-card بالا — بدون این، خودش هم بهجای کوچکشدن، محتوای درازش را از کادر بیرون میزد */
}
.product-card-title {
font-size: 0.95rem;
font-weight: 600;
margin-bottom: 0.5rem;
line-height: 1.4;
overflow-wrap: anywhere;
}
.product-card-title a {
color: var(--text-primary);
}
.product-card-title a:hover {
color: var(--red-primary);
}
.product-card-tech {
font-size: 0.8rem;
color: var(--text-muted);
margin-bottom: 0.75rem;
/* شمارهٔ فنی معمولا لاتین و بدون فاصله است (مثلا FVN-AUDI-224455) —
بدون این، روی کارت باریک موبایل بهجای شکستن خط از کادر بیرون
میزد (نگاه کنید به یادداشت .product-card بالا). */
overflow-wrap: anywhere;
}
.product-card-prices {
margin-top: auto;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.price-retail,
.price-wholesale {
font-size: 0.85rem;
padding: 0.25rem 0.5rem;
border-radius: var(--radius-sm);
max-width: 100%;
overflow-wrap: anywhere;
}
.price-retail {
background: color-mix(in srgb, var(--red-primary) 10%, transparent);
color: var(--red-light);
}
.price-wholesale {
background: color-mix(in srgb, var(--price-wholesale) 12%, transparent);
color: var(--price-wholesale);
}
/* تخفیف: قیمت قدیمی خطخورده + قیمت جدید + نشان درصد */
.price-old {
text-decoration: line-through;
color: var(--text-muted);
opacity: 0.85;
font-size: 0.82em;
font-weight: normal;
margin-left: 0.2rem;
}
.price-new {
font-weight: bold;
}
.price-badge {
display: inline-block;
background: var(--red-primary);
color: #fff;
font-size: 0.68rem;
font-weight: bold;
padding: 0.05rem 0.45rem;
border-radius: 999px;
margin-right: 0.3rem;
vertical-align: middle;
}
.product-card-stock {
font-size: 0.8rem;
color: var(--text-muted);
margin-bottom: 0.75rem;
}
.product-card-actions {
display: flex;
gap: 0.5rem;
}
.product-card-actions .btn {
flex: 1;
min-width: 0;
}
/* Product Detail
ستون تصویر عرض محدود و مشخصی دارد و شبکه align-items:start است؛ وگرنه
(حالت پیشفرض stretch) اسلات تصویر تا ارتفاع ستون گزینهها کشیده میشد و
با اضافهشدن گزینهها/واریانتها تصویر بیاندازه بزرگ میشد. */
.product-detail {
display: grid;
grid-template-columns: minmax(0, clamp(240px, 32%, 360px)) minmax(0, 1fr);
align-items: start;
gap: 1.5rem;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: 1.5rem;
}
.product-detail-image {
position: relative;
background: var(--bg-input);
border-radius: var(--radius);
display: flex;
align-items: center;
justify-content: center;
font-size: 8rem;
color: var(--text-muted);
/* ابعاد ثابت مربعی: نه با عوضشدن تصویر کاروسل صفحه میپرد و نه ارتفاع
تصویر به بلندی ستون گزینهها گره میخورد. */
aspect-ratio: 1 / 1;
min-height: 220px;
overflow: hidden;
}
.product-detail-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-detail-info h1 {
font-size: 1.3rem;
margin-bottom: 0.5rem;
}
.product-detail-tech {
display: inline-block;
background: var(--bg-input);
padding: 0.35rem 0.75rem;
border-radius: var(--radius-sm);
font-size: 0.85rem;
color: var(--text-secondary);
margin-bottom: 0.75rem;
}
/* دو انتخابگر کشور/شرکت کنار هماند (چیدمانشان در includes/header.php است)؛
اینجا فقط فاصلهٔ اضافی زیرشان برداشته میشود تا پنل جمعوجور بماند. */
.variant-selects .form-group { margin-bottom: 0; }
.product-detail-cats {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.cat-tag {
background: rgba(220, 38, 38, 0.1);
color: var(--red-light);
padding: 0.2rem 0.6rem;
border-radius: var(--radius-sm);
font-size: 0.8rem;
}
.product-detail-desc {
color: var(--text-secondary);
line-height: 1.8;
margin-bottom: 1rem;
}
.product-detail-prices {
display: flex;
gap: 0.75rem;
margin-bottom: 1rem;
}
.price-box {
flex: 1;
padding: 0.75rem;
border-radius: var(--radius-lg);
text-align: center;
cursor: pointer;
transition: all 0.25s;
border: 2px solid transparent;
}
.price-box.price-dimmed {
opacity: 0.4;
transform: scale(0.96);
filter: grayscale(0.3);
}
/* خواستهٔ کاربر ۲۰۲۶-۰۹-۲۳: «رنگ کادرهای قیمت رو بهتر کن، خودت یک رنگ و
طرح عالی برای هر تمی بذار» — قبلا هر دو کادر همیشه قرمز/سبز هاردکد
بودند، مستقل از تم فعال؛ حالا کادر جزئی از رنگ برند خود تم
(var(--red-primary)) میآید (که در هر تم چیز دیگریست — مثلا در
navy-blue آبی است، در forest-cream سبز)، و کادر کلی از توکن تازهٔ
var(--price-wholesale) که برای هر تم دستی و هماهنگ با رنگ برند همان تم
انتخاب شده (اغلب همان var(--accent-secondary) موجود تم، جایی که کافی
با رنگ اصلی تم فرق داشت؛ چند تم هم رنگ اختصاصی گرفتند تا با رنگ برندشان
قاطی نشود — نگاه کنید به تعریف var(--price-wholesale) در :root بالا).
پسزمینه یک گرادیان ملایم دورنگی روی خود var(--bg-card) است (نه یک تن
صاف روی پسزمینهٔ صفحه) تا روی تمهای روشن و تیره یکسان زیبا بماند. */
.price-box.retail {
background: linear-gradient(135deg, color-mix(in srgb, var(--red-primary) 16%, var(--bg-card)), color-mix(in srgb, var(--red-primary) 5%, var(--bg-card)));
border-color: color-mix(in srgb, var(--red-primary) 32%, transparent);
}
.price-box.wholesale {
background: linear-gradient(135deg, color-mix(in srgb, var(--price-wholesale) 16%, var(--bg-card)), color-mix(in srgb, var(--price-wholesale) 5%, var(--bg-card)));
border-color: color-mix(in srgb, var(--price-wholesale) 32%, transparent);
}
/* خواستهٔ کاربر: «هیچ کلمهٔ تک/عمده نداشته باشه، فقط قیمت» — محصولی که
فقط یک نوع قیمت دارد یک کادر ساده و غیرقابلکلیک میگیرد (product.php)،
نه دو کادر انتخابی؛ همان تن قرمز برند را دارد ولی بدون cursor:pointer
چون چیزی برای انتخاب نیست. */
.price-box.price-simple {
cursor: default;
background: linear-gradient(135deg, color-mix(in srgb, var(--red-primary) 16%, var(--bg-card)), color-mix(in srgb, var(--red-primary) 5%, var(--bg-card)));
border-color: color-mix(in srgb, var(--red-primary) 32%, transparent);
}
.price-box.price-active {
border-color: #fff !important;
transform: scale(1.02);
}
.price-box.retail.price-active {
border-color: var(--red-light) !important;
box-shadow: 0 0 14px color-mix(in srgb, var(--red-primary) 50%, transparent);
background: linear-gradient(135deg, color-mix(in srgb, var(--red-primary) 30%, var(--bg-card)), color-mix(in srgb, var(--red-primary) 12%, var(--bg-card)));
}
.price-box.wholesale.price-active {
border-color: var(--price-wholesale) !important;
box-shadow: 0 0 14px color-mix(in srgb, var(--price-wholesale) 50%, transparent);
background: linear-gradient(135deg, color-mix(in srgb, var(--price-wholesale) 30%, var(--bg-card)), color-mix(in srgb, var(--price-wholesale) 12%, var(--bg-card)));
}
.price-box-label {
font-size: 0.8rem;
color: var(--text-muted);
margin-bottom: 0.25rem;
}
.price-box-value {
font-size: 1.15rem;
font-weight: bold;
}
.price-box.retail .price-box-value,
.price-box.price-simple .price-box-value {
color: var(--red-light);
}
.price-box.wholesale .price-box-value {
color: var(--price-wholesale);
}
.price-box-note {
font-size: 0.75rem;
color: var(--text-muted);
margin-top: 0.25rem;
}
.product-detail-stock {
font-size: 0.9rem;
color: var(--text-muted);
margin-bottom: 0.75rem;
}
.product-detail-actions {
display: flex;
align-items: center;
gap: 0.75rem;
}
.product-detail-actions input[type="number"] {
width: 70px;
padding: 0.5rem;
background: var(--bg-input);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
color: var(--text-primary);
text-align: center;
font-family: inherit;
font-size: 0.9rem;
}
.product-detail-actions input[type="number"]:focus {
border-color: var(--red-primary);
outline: none;
}
/* Search */
.search-container {
max-width: 800px;
margin: 0 auto 2rem;
}
.search-form {
display: flex;
gap: 0;
}
.search-form .search-input {
flex: 1;
padding: 0.75rem 1rem;
font-size: 1rem;
border-radius: var(--radius) 0 0 var(--radius);
}
.search-form .search-btn {
padding: 0.75rem 1.5rem;
font-size: 1rem;
border-radius: 0 var(--radius) var(--radius) 0;
}
.search-results-count {
color: var(--text-muted);
margin-bottom: 1rem;
font-size: 0.9rem;
}
.no-results {
text-align: center;
padding: 3rem 1rem;
color: var(--text-muted);
font-size: 1.1rem;
}
.no-results-icon {
font-size: 3rem;
margin-bottom: 1rem;
}
/* صفحهٔ «شرایط و قوانین» — متن آزاد مدیر، فقط با nl2br خطشکسته میشود؛
قاب ساده و عریض خواندنی، همرنگ با بقیهٔ کارتهای سایت. */
.terms-page {
max-width: 840px;
margin: 0 auto;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: 1.75rem;
}
.terms-body {
color: var(--text-secondary);
font-size: 0.92rem;
line-height: 2.1;
}
/* صفحهٔ «درباره ما» — نقشهٔ جاسازیشده (about.php، خواستهٔ کاربر ۲۰۲۶-۰۹-۱۹:
«لوکیشن رو از روی مپ بهش اضافه کنم»). ۴/۳ نسبت تصویر بهجای ارتفاع ثابت
پیکسلی، تا در عرضهای مختلف (خصوصا موبایل) هیچوقت خیلی کشیده/فشرده
نشود؛ کادر گوشهگرد همشکل بقیهٔ کارتهای صفحه. */
.about-map {
margin-top: 1.75rem;
aspect-ratio: 16 / 9;
border: 1px solid var(--border-color);
border-radius: var(--radius);
overflow: hidden;
}
.about-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.about-map-link { margin-top: 1.75rem; text-align: center; }
.about-map-link a {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.6rem 1.2rem;
background: var(--red-primary);
color: #fff;
border-radius: var(--radius);
font-size: 0.85rem;
font-weight: 600;
transition: opacity var(--transition);
}
.about-map-link a:hover { opacity: 0.9; }
/* Category Page */
/* ردیف بالای صفحهٔ دستهبندی: متن (دکمهٔ برگشت + عنوان مدل) راست، عکس
نمونهٔ خودرو (اگر باشد) چپ — خواستهٔ کاربر ۲۰۲۶-۰۹-۱۴. اولین فرزند
(category-header، متن) طبق قاعدهٔ RTL سمت راست مینشیند، دومی
(category-hero-car) با justify-content:space-between خودکار سمت چپ؛
کمشدن عرض هم عکس را به خط بعد (زیر متن) میبرد، نه برعکس. */
.category-hero {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.category-header {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
margin-bottom: 0;
}
/* بدون حاشیه/بکگراند روی خود جعبه (خواستهٔ کاربر: «هیچ حاشیهای نداشته
باشه فقط خود ماشین») — تمیزی واقعی از آپلود عکس میآید
(normalizeBrandLogo در admin/car-images.php شفاف/بیحاشیهاش میکند)،
اینجا فقط اندازه/جایگاه تنظیم میشود. */
.category-hero-car { flex: 0 0 auto; width: 260px; max-width: 100%; height: 160px; }
.category-hero-car img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 700px) {
.category-hero-car { width: 100%; max-width: 260px; height: 150px; margin: 0 auto; }
}
.variant-section {
margin-bottom: 1rem;
padding: 0.75rem;
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: var(--radius);
}
.variant-section-title {
font-size: 0.82rem;
font-weight: 600;
color: var(--red-light);
margin-bottom: 0.5rem;
}
.variant-grid {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.variant-card {
display: flex;
flex-direction: column;
gap: 0.15rem;
padding: 0.5rem 0.75rem;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
text-decoration: none;
min-width: 120px;
transition: all 0.2s;
cursor: pointer;
background: var(--bg-card);
}
.variant-card:hover { border-color: var(--red-primary); }
.variant-card.variant-active {
border-color: var(--red-primary);
background: rgba(220,38,38,0.1);
box-shadow: 0 0 0 1px var(--red-primary);
}
.variant-flag { font-size: 0.8rem; color: var(--text-primary); font-weight: 600; }
.variant-maker { font-size: 0.7rem; color: var(--text-muted); }
.variant-price { font-size: 0.78rem; color: var(--red-light); font-weight: 600; }
.variant-stock { font-size: 0.65rem; }
.variant-stock.instock { color: var(--green); }
.variant-stock.outstock { color: var(--red-light); }
/* Brand Stage - Cascade Fade */
.brand-stage {
position: relative;
margin-bottom: 1.5rem;
}
.brand-all-row {
margin-bottom: 0.75rem;
transition: opacity 0.25s ease, max-height 0.3s ease;
overflow: hidden;
max-height: 50px;
}
.brand-all-row.is-hidden {
opacity: 0;
max-height: 0;
margin-bottom: 0;
pointer-events: none;
}
.brand-tag {
display: inline-flex;
align-items: center;
padding: 0.4rem 1rem;
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
color: var(--text-secondary);
font-family: inherit;
font-size: 0.85rem;
cursor: pointer;
background: var(--bg-card);
text-decoration: none;
white-space: nowrap;
transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s, color 0.2s, border-color 0.2s;
position: relative;
}
.brand-tags-wrap .brand-tag .brand-fa { display: inline; }
.brand-tags-wrap .brand-tag .brand-en { display: none; text-transform: capitalize; }
/* حالت نمایش نام انگلیسی از admin/categories.php میآید (brandEnMode())
و کلاس ben-off/ben-hover/ben-always روی خود .brand-tags-wrap مینشیند.
پیشفرض 'off' است — دیگر هیچ رفتاری اضافه نمیشود و برچسب همیشه فارسی
میماند. قبلا این هاور بدون هیچ کلیدی همیشه روشن بود. */
.brand-tags-wrap.ben-hover .brand-tag:hover .brand-fa { display: none; }
.brand-tags-wrap.ben-hover .brand-tag:hover .brand-en { display: inline; }
.brand-tags-wrap.ben-always .brand-tag .brand-fa { display: none; }
.brand-tags-wrap.ben-always .brand-tag .brand-en { display: inline; }
.brand-tag:hover,
.brand-tag.active {
border-color: var(--red-primary);
background: var(--red-primary);
color: #fff;
}
.brand-tags-wrap {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.brand-tags-wrap .brand-tag {
opacity: 1;
transform: scale(1);
visibility: visible;
}
/* وقتی محو شد: همه تگهای ردیف بالا، حتی خود برند فعال/sticky، پنهان
میشوند — تگ فعال دیگر اینجا لازم نیست چون همان اسم، خودش را کنار دکمهٔ
«همه برندها» بهصورت #modelsTitle نشان میدهد (.brand-tag.active
.models-title، بالاتر) و نگهداشتن هر دو یعنی یک برچسب تکراری روی صفحه.
قبلا :not(.is-sticky) نگهش میداشت — [[batch9-fixes]]. */
.brand-tags-wrap.is-faded .brand-tag:not([data-id="0"]) {
opacity: 0;
transform: scale(0.85) translateY(-6px);
visibility: hidden;
pointer-events: none;
}
/* Stagger delays: each tag fades with increasing delay based on position */
.brand-tags-wrap.is-faded .brand-tag:nth-child(2) { transition-delay: 0.00s; }
.brand-tags-wrap.is-faded .brand-tag:nth-child(3) { transition-delay: 0.03s; }
.brand-tags-wrap.is-faded .brand-tag:nth-child(4) { transition-delay: 0.06s; }
.brand-tags-wrap.is-faded .brand-tag:nth-child(5) { transition-delay: 0.09s; }
.brand-tags-wrap.is-faded .brand-tag:nth-child(6) { transition-delay: 0.12s; }
.brand-tags-wrap.is-faded .brand-tag:nth-child(7) { transition-delay: 0.15s; }
.brand-tags-wrap.is-faded .brand-tag:nth-child(8) { transition-delay: 0.18s; }
.brand-tags-wrap.is-faded .brand-tag:nth-child(9) { transition-delay: 0.21s; }
.brand-tags-wrap.is-faded .brand-tag:nth-child(10) { transition-delay: 0.24s; }
.brand-tags-wrap.is-faded .brand-tag:nth-child(11) { transition-delay: 0.27s; }
.brand-tags-wrap.is-faded .brand-tag:nth-child(12) { transition-delay: 0.30s; }
.brand-tags-wrap.is-faded .brand-tag:nth-child(13) { transition-delay: 0.33s; }
.brand-tags-wrap.is-faded .brand-tag:nth-child(14) { transition-delay: 0.36s; }
.brand-tags-wrap.is-faded .brand-tag:nth-child(15) { transition-delay: 0.39s; }
.brand-tags-wrap.is-faded .brand-tag:nth-child(16) { transition-delay: 0.42s; }
.brand-tags-wrap.is-faded .brand-tag:nth-child(17) { transition-delay: 0.45s; }
.brand-tags-wrap.is-faded .brand-tag:nth-child(18) { transition-delay: 0.48s; }
.brand-tags-wrap.is-faded .brand-tag:nth-child(19) { transition-delay: 0.51s; }
.brand-tags-wrap.is-faded .brand-tag:nth-child(20) { transition-delay: 0.54s; }
/* Sticky brand stays and pulses */
.brand-tag.is-sticky {
animation: stickyPulse 0.5s ease;
}
@keyframes stickyPulse {
0% { transform: scale(1); }
40% { transform: scale(1.08); }
100% { transform: scale(1); }
}
/* Models reveal */
.models-reveal {
max-height: 0;
overflow: hidden;
opacity: 0;
margin-top: 0;
transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.35s ease 0.1s, margin-top 0.5s ease;
}
.models-reveal.is-open {
max-height: 400px;
opacity: 1;
margin-top: 1rem;
}
.models-head {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
/* از یک ساده به یک تگ برند واقعی (.brand-tag.active) تغییر کرد تا
برند انتخابشده واقعا «بیاید و کنار دکمهٔ همهبرندها بنشیند» و ثابت
بماند، نه اینکه فقط یک متن خام باشد — قبلا حرکت پروازی کلیک (در
assets/js/main.js) به اینجا میرسید ولی بعد از رفرش صفحه به شکل متن
ساده دیده میشد، انگار برگشته سرجایش. cursor پیشفرض .brand-tag (pointer)
اینجا گمراهکننده است چون این عنصر کلیکپذیر نیست. */
.models-title {
font-weight: bold;
font-size: 1rem;
cursor: default;
}
.models-list {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.brand-tag--model {
animation: popIn 0.4s ease backwards;
}
.models-list .brand-tag--model:nth-child(1) { animation-delay: 0.05s; }
.models-list .brand-tag--model:nth-child(2) { animation-delay: 0.10s; }
.models-list .brand-tag--model:nth-child(3) { animation-delay: 0.15s; }
.models-list .brand-tag--model:nth-child(4) { animation-delay: 0.20s; }
.models-list .brand-tag--model:nth-child(5) { animation-delay: 0.25s; }
.models-list .brand-tag--model:nth-child(6) { animation-delay: 0.30s; }
.models-list .brand-tag--model:nth-child(7) { animation-delay: 0.35s; }
.models-list .brand-tag--model:nth-child(8) { animation-delay: 0.40s; }
.models-list .brand-tag--model:nth-child(9) { animation-delay: 0.45s; }
.models-list .brand-tag--model:nth-child(10) { animation-delay: 0.50s; }
@keyframes popIn {
from {
opacity: 0;
transform: scale(0.7) translateY(8px);
}
to {
opacity: 1;
transform: scale(1) translateY(0);
}
}
.brand-tag--back {
background: var(--bg-input);
border-color: var(--red-primary);
color: var(--red-light);
font-weight: bold;
cursor: pointer;
}
.brand-tag--back:hover {
background: var(--red-primary);
color: #fff;
}
.brand-filter {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 1.5rem;
}
.subcat-filter {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 1.5rem;
}
/* Cart */
/* table-layout:fixed + عرض ثابت روی هر ستون — بدونش، با هر تغییر تعداد
(کم/زیاد از استپر) طول رقم «جمع» یا برچسب جزئی/کلی عوض میشد و کل جدول
عرض ستونها را دوباره حساب میکرد؛ نتیجهاش پرش آزاردهندهٔ ردیف (بهخصوص
ستون محصول) بود، نه فقط جابهجایی همان عدد. عرض ستونها اینجا و در
.cart-table th/td نگه داشته میشود؛ ستون محصول تنها ستون بیعرض ثابت است و
باقیماندهٔ عرض را میگیرد. */
.cart-table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
background: var(--bg-card);
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--border-color);
}
/* ستون ۵ («حذف») یک دکمهٔ متنی است، نه فقط آیکون — عرض قبلی (56px) برایش
کم بود و با overflow:hidden پایینتر نصفه دیده میشد. عرضش را از ستون
قیمت/جمع (که برای عددهای معمولی به آن عرض نیاز نداشتند) قرض گرفتیم.
ستون «قیمت واحد» هم بعدا عریضتر شد (130→190): با قیمتهای هفترقمی +
واحد «تومان» + نشان جزئی/کلی بزرگتر، ۱۳۰px کافی نبود و نشان به سطر
بعد پرت میشد. برای جبران، ستون «جمع» به ۱۰۰px تنگ شده بود — ولی جمع
بولد است (پهنتر از عدد معمولی) و در ۱۰۰px با overflow:hidden، خود
واحد «تومان» بیصدا قطع میشد. پس «جمع» را هم بهجای تنگکردن، عریض نگه
داشتیم و آن اضافهعرض یکسره از ستون محصول گرفته شد. */
.cart-table th:nth-child(2), .cart-table td:nth-child(2) { width: 190px; }
.cart-table th:nth-child(3), .cart-table td:nth-child(3) { width: 160px; }
.cart-table th:nth-child(4), .cart-table td:nth-child(4) { width: 140px; }
.cart-table th:nth-child(5), .cart-table td:nth-child(5) { width: 96px; }
/* شمارهٔ قیمت + نشان جزئی/کلی همیشه در یک سطر، با فاصلهٔ کم ثابت — بجای
دو پشتسرهم که وقتی جا کم میآمد نشان به سطر بعد میپرید. */
.cart-price-wrap { display: flex; align-items: baseline; flex-wrap: nowrap; gap: 0.35rem; }
.cart-table th {
background: var(--bg-secondary);
padding: 0.75rem;
text-align: right;
font-size: 0.85rem;
color: var(--text-secondary);
border-bottom: 1px solid var(--border-color);
}
.cart-table td {
padding: 0.75rem;
border-bottom: 1px solid var(--border-color);
vertical-align: middle;
}
/* عمدا overflow:hidden روی خود گذاشته نشده: دو بار (ستون حذف، بعد
ستون جمع) باعث شد بخشی از محتوا — دکمهٔ حذف، بعد واحد «تومان» — بهجای
دیدهشدن، بیصدا قطع و پنهان شود. table-layout:fixed بهتنهایی برای
جلوگیری از پرش ستونها کافی است؛ اگر محتوای یک سلول بهندرت از عرضش
بیشتر شود، بهتر است کمی روی سلول کناری بریزد تا اینکه ناپدید شود. */
.cart-unit-price, .cart-subtotal { white-space: nowrap; }
.cart-product-info {
display: flex;
align-items: center;
gap: 0.75rem;
}
.cart-product-img {
width: 60px;
height: 60px;
background: var(--bg-input);
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: var(--text-muted);
flex-shrink: 0;
}
.cart-product-img img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: var(--radius-sm);
}
/* استپر تعداد سبد خرید — همان اجزای .qty-stepper صفحهٔ محصول، جمعوجورتر تا در
ستون جدول جا شود. دکمههای +/− از نوع submit هستند (کارکرد کامل بدون جاوااسکریپت)
و cart.js کلیک را میگیرد تا ردیف بدون رفرش بهروز شود. */
.cart-update-form { position: relative; }
.cart-stepper { max-width: 100%; }
.cart-stepper .qty-field { width: 52px; font-size: 1rem; padding: 0.45rem 0.2rem; }
.cart-stepper .qty-step { width: 30px; flex: 0 0 30px; font-size: 1.05rem; }
/* در فاصلهٔ رفتوبرگشت درخواست، کلیک دوباره پذیرفته نشود */
.cart-stepper.is-busy { opacity: 0.55; pointer-events: none; }
/* دکمهٔ پیشفرض نامرئی فرم: Enter داخل فیلد باید تعداد تایپشده را اعمال کند،
نه دکمهٔ «−» را (اولین دکمهٔ submit، پیشفرض فرم است). */
.cart-enter-submit {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
border: 0;
opacity: 0;
overflow: hidden;
pointer-events: none;
}
.cart-apply { margin-top: 0.4rem; }
/* واحد پول با فاصلهٔ خوانا از عدد (خروجی formatPriceUnit) */
.pnum { direction: ltr; unicode-bidi: embed; font-variant-numeric: tabular-nums; }
.tmn {
display: inline-block;
margin-right: 0.5rem;
font-size: 0.82em;
font-weight: 400;
color: var(--text-muted);
white-space: nowrap;
}
.cart-total .tmn, .pi-total .tmn { color: inherit; opacity: 0.75; }
.cart-subtotal {
font-weight: bold;
color: var(--red-light);
white-space: nowrap;
}
.cart-price-type {
font-size: 0.8rem;
font-weight: 600;
padding: 0.15rem 0.4rem;
border-radius: var(--radius-sm);
white-space: nowrap;
}
.cart-price-type.retail {
background: color-mix(in srgb, var(--red-primary) 15%, transparent);
color: var(--red-light);
}
.cart-price-type.wholesale {
background: color-mix(in srgb, var(--price-wholesale) 15%, transparent);
color: var(--price-wholesale);
}
.cart-empty {
text-align: center;
padding: 4rem 1rem;
color: var(--text-muted);
}
.cart-empty-icon {
font-size: 4rem;
margin-bottom: 1rem;
}
.cart-empty-icon > .ic {
width: 4rem; height: 4rem;
stroke-width: 1.1; opacity: 0.5;
color: var(--text-muted);
}
.cart-summary {
margin-top: 1.5rem;
display: flex;
justify-content: flex-end;
align-items: flex-end;
gap: 1.25rem;
flex-wrap: wrap;
}
.cart-total {
font-size: 1.25rem;
font-weight: bold;
color: var(--red-light);
}
/* ===== جمعبندی سهردیفهٔ سبد =====
«جمع کالاها + هزینهٔ ارسال = مبلغ قابل پرداخت»، همانجا که مشتری روش ارسال
را انتخاب میکند تا تغییر مبلغ را ببیند. مبلغ قابل پرداخت رنگ سومی دارد
(طلایی) که نه رنگ جمع کالاها است و نه رنگ سبز هزینهٔ ارسال. */
.cart-sum {
min-width: 268px;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: 0.55rem 0.85rem;
}
.cart-sum-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
padding: 0.3rem 0;
font-size: 0.85rem;
color: var(--text-secondary);
}
.cart-sum-row + .cart-sum-row { border-top: 1px solid var(--border-light); }
.cart-sum-row > span:first-child { display: inline-flex; align-items: center; gap: 0.3rem; }
.cart-sum-row > span:first-child > .ic { color: var(--text-muted); }
.cart-sum-row .tmn { color: inherit; opacity: 0.7; }
.cart-sum-row .cart-total-val { color: var(--text-primary); font-weight: 600; }
.cart-sum-row .cart-tax-val { color: var(--text-secondary); font-weight: 600; }
.cart-sum-row .cart-ship-val { color: #4ADE80; font-weight: 600; }
.cart-sum-row .cart-ship-val.is-soft { color: var(--text-muted); font-weight: 400; font-size: 0.92em; }
.cart-sum-row.is-pay {
padding-top: 0.45rem;
font-size: 0.95rem;
font-weight: 700;
color: var(--text-primary);
}
.cart-sum-row.is-pay .cart-pay-val { color: #FBBF24; font-size: 1.08rem; }
.cart-go { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.cart-go .btn.is-locked { pointer-events: none; opacity: 0.5; }
.cart-go-hint {
flex-basis: 100%;
display: flex;
align-items: center;
gap: 0.3rem;
margin: 0;
font-size: 0.72rem;
color: #FBBF24;
}
.cart-go-hint[hidden] { display: none; }
/* ===== انتخاب روش ارسال + برآورد هزینه، در صفحهٔ سبد =====
شهر از پروفایل، وزن از سبد؛ همان محاسبهٔ صفحهٔ تسویه. فشرده میماند تا
صفحهٔ سبد کشیده نشود. */
.cart-ship {
margin-top: 1.25rem;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: 0.85rem 1rem;
}
.cart-ship-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
flex-wrap: wrap;
margin-bottom: 0.6rem;
}
.cart-ship-head b { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.9rem; }
.cart-ship-req { color: var(--red-light); font-weight: 700; }
.cart-ship-city {
display: inline-flex;
align-items: center;
gap: 0.25rem;
font-size: 0.75rem;
color: var(--text-secondary);
background: var(--bg-input);
border: 1px solid var(--border-color);
border-radius: 999px;
padding: 0.15rem 0.55rem;
}
.cart-ship-form.is-busy { opacity: 0.6; pointer-events: none; }
.cart-ship-rows {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 0.4rem;
}
.cart-ship-row {
display: flex;
align-items: center;
gap: 0.35rem;
flex-wrap: wrap;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
padding: 0.4rem 0.55rem;
font-size: 0.78rem;
line-height: 1.6;
cursor: pointer;
transition: var(--transition);
}
.cart-ship-row:hover { border-color: var(--border-light); }
.cart-ship-row input[type="radio"] {
flex: 0 0 auto;
width: 0.95rem;
height: 0.95rem;
margin: 0;
accent-color: var(--red-primary);
cursor: pointer;
}
.cart-ship-row > .ic { flex: 0 0 auto; color: var(--text-muted); }
.cart-ship-row b { font-weight: 500; color: var(--text-primary); }
/* رنگ سبز برای رقمها (خواستهٔ مدیر: «رنگ متن های قیمتش رو سبز کن») */
.cart-ship-row em { font-style: normal; font-weight: 700; color: #4ADE80; margin-inline-start: auto; }
.cart-ship-row em.is-soft { font-weight: 400; color: var(--text-muted); }
/* نشان محدودیت («مشهد») — زرد، با آیکن لوکیشن */
.cart-ship-row i.csr-badge {
display: inline-flex;
align-items: center;
gap: 0.15rem;
font-style: normal;
font-size: 0.66rem;
font-weight: 600;
padding: 0.05rem 0.35rem;
border-radius: 999px;
background: rgba(234, 179, 8, 0.14);
border: 1px solid rgba(234, 179, 8, 0.35);
color: #FBBF24;
white-space: nowrap;
}
.cart-ship-row i.csr-badge > .ic { width: 0.74rem; height: 0.74rem; }
.cart-ship-row.is-best { border-color: var(--green); }
/* روشی که نرخ معلومی ندارد ولی محدود است: جای رقم را نشانش میگیرد */
.cart-ship-row.is-nocost .csr-price { display: none; }
.cart-ship-row.is-nocost i.csr-badge { margin-inline-start: auto; }
/* بعد از .is-best نوشته شده تا انتخاب مشتری بر «کمترین هزینه» بچربد */
.cart-ship-row.is-on {
border-color: var(--red-primary);
background: linear-gradient(180deg, rgba(220, 38, 38, 0.10), rgba(220, 38, 38, 0.03));
}
/* روشی که به یک شهر محدود است و با شهر پروفایل مشتری نمیخواند: دیده میشود
ولی انتخابشدنی نیست (رادیوی داخلش disabled است، پس کلیک هم نمیگیرد) —
خواستهٔ مدیر: «باید گزینه ارسال با پیک(مشهد) برایم غیر فعال نشون داده بشه».
بعد از .is-on آمده تا انتخاب قدیمی همین روش رنگ «انتخابشده» نگیرد. */
.cart-ship-row.is-off {
opacity: 0.45;
cursor: not-allowed;
border-color: var(--border-color);
background: var(--bg-secondary);
}
.cart-ship-row.is-off:hover { border-color: var(--border-color); }
.cart-ship-row.is-off input[type="radio"] { cursor: not-allowed; }
.cart-ship-note {
display: flex;
align-items: flex-start;
gap: 0.35rem;
margin: 0.55rem 0 0;
font-size: 0.72rem;
line-height: 1.8;
color: var(--text-muted);
}
.cart-ship-note > .ic { flex: 0 0 auto; margin-top: 0.25rem; }
.cart-ship-note a { color: var(--red-light); }
.cart-ship-note b { color: var(--text-secondary); }
/* دلیل غیرفعالبودن روش محدود به شهر — همان قرمز ملایم .pay-off-note */
.cart-ship-note.is-off { color: #FCA5A5; }
@media (max-width: 560px) {
.cart-sum { min-width: 0; width: 100%; }
.cart-go { width: 100%; }
.cart-go .btn { flex: 1 1 auto; justify-content: center; }
}
/* Checkout */
/* چیدمان دوستونه (خواستهٔ کاربر): خلاصهٔ سفارش تمامعرض بالا، بعد دو ستون —
راست «مشخصات و آدرس»، چپ «روش پرداخت». روش ارسال از این صفحه برداشته شده و
در سبد انتخاب میشود، پس دکمهٔ ثبت هم به انتهای همان ستون چپ آمده تا صفحه
از پایین کشیده نشود. */
.checkout-form {
max-width: 1040px;
margin: 0 auto;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius);
padding: 1.5rem 2rem;
}
.checkout-cols {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.25rem;
align-items: start;
margin-bottom: 0;
}
/* در RTL اولین فرزند گرید سمت راست مینشیند، پس ستون مشخصات باید اول بیاید */
.checkout-box {
background: var(--bg-primary);
border: 1px solid var(--border-color);
border-radius: 10px;
padding: 0.9rem;
}
.checkout-box-title {
display: flex;
align-items: center;
gap: 0.4rem;
font-size: 0.88rem;
font-weight: 600;
color: var(--red-light);
margin-bottom: 0.75rem;
}
.checkout-box .form-group:last-child { margin-bottom: 0; }
/* دکمهٔ ثبت بعد از کارت پرداخت میآید و فاصلهٔ خودش را دارد */
.checkout-col-side > .pay-picker { margin-bottom: 0; }
/* استان/شهر کنار هم */
.form-row-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.form-hint {
display: flex;
align-items: flex-start;
gap: 0.3rem;
margin-top: 0.35rem;
font-size: 0.7rem;
line-height: 1.7;
color: var(--text-muted);
}
.form-hint > .ic { flex: 0 0 auto; margin-top: 0.2rem; }
/* روی صفحهٔ باریک ستونها روی هم میآیند: اول مشخصات، بعد ارسال و پرداخت */
@media (max-width: 860px) {
.checkout-form { padding: 1.25rem; }
.checkout-cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
.form-row-2 { grid-template-columns: minmax(0, 1fr); gap: 0; }
}
.form-group {
margin-bottom: 1.25rem;
}
.form-group label {
display: block;
margin-bottom: 0.4rem;
color: var(--text-secondary);
font-size: 0.9rem;
font-weight: 500;
}
.form-control {
width: 100%;
padding: 0.6rem 0.75rem;
background: var(--bg-input);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-family: inherit;
font-size: 0.9rem;
transition: border-color var(--transition);
}
.form-control:focus {
border-color: var(--red-primary);
outline: none;
}
textarea.form-control {
resize: vertical;
min-height: 100px;
}
.form-control::placeholder {
color: var(--text-muted);
}
/* «انتخاب فایل» سفارشی — بجای متن انگلیسی مرورگر («No file chosen»/«Choose
File»)، خود input واقعی نامرئی و دقیقا روی یک جعبهٔ استایلخورده کشیده
میشود (کلیک/کیبورد هنوز خود input را میزند، پس همهجا کار میکند).
با اسکریپت enhanceFilePickers در پایین صفحه (هم در admin/layout-bottom.php
هم در includes/footer.php) خودکار روی هر input[type=file] اعمال میشود. */
.file-pick { position: relative; display: block; width: 100%; }
.file-pick-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0; }
.file-pick-box {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 0.75rem;
background: var(--bg-input);
border: 1px dashed var(--border-color);
border-radius: var(--radius-sm);
color: var(--text-muted);
font-size: 0.85rem;
transition: border-color var(--transition), color var(--transition);
}
.file-pick-box .ic { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
.file-pick:hover .file-pick-box { border-color: var(--red-primary); color: var(--text-secondary); }
.file-pick-box.has-file { color: var(--text-primary); border-style: solid; }
.file-pick-box .file-pick-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.checkout-summary {
background: var(--bg-secondary);
border-radius: var(--radius);
padding: 0.85rem 1rem;
margin-bottom: 1.1rem;
}
.checkout-summary-item {
display: flex;
justify-content: space-between;
padding: 0.5rem 0;
border-bottom: 1px solid var(--border-color);
font-size: 0.9rem;
}
.checkout-summary-item:last-child {
border-bottom: none;
font-weight: bold;
color: var(--red-light);
font-size: 1rem;
}
/* Success */
.success-page {
text-align: center;
padding: 4rem 1rem;
}
.success-icon {
font-size: 5rem;
color: var(--green);
margin-bottom: 1rem;
}
.success-icon > .ic { width: 5rem; height: 5rem; stroke-width: 1.4; }
.success-page h2 {
color: var(--green);
margin-bottom: 0.5rem;
}
.success-page p {
color: var(--text-secondary);
margin-bottom: 1.5rem;
}
/* Admin Layout */
.admin-layout {
max-width: 1200px;
margin: 0 auto;
padding: 1rem;
}
/* admin/orders.php: با عرض ۱۲۰۰px، جدول ۱۴۰۰px-عریض .orders-table داخل
.tbl-scroll آرام آرام اسکرول میشد و ستون عملیات (کلیدهای «جزئیات»/
«فاکتور»/«پرداخت شد») همیشه بیرون از دید اول میماند — کاربر بدون
اسکرول افقی آگاهانه اصلا کلیدها را نمیدید. با این کلاس کمکی، خود
قاب صفحه (نه فقط جدول) عریضتر میشود تا جدول معمولا بدون اسکرول جا شود. */
.admin-layout.admin-layout--wide {
max-width: 1500px;
}
.admin-header {
display: flex;
justify-content: space-between;
align-items: center;
background: var(--bg-secondary);
padding: 1rem 1.5rem;
border-radius: var(--radius);
margin-bottom: 1.5rem;
border: 1px solid var(--border-color);
}
.admin-menu {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
margin-bottom: 1.5rem;
}
.admin-menu a {
padding: 0.5rem 1rem;
background: var(--bg-secondary);
border: 1px solid var(--border-color);
border-radius: var(--radius-sm);
color: var(--text-secondary);
font-size: 0.85rem;
transition: all var(--transition);
}
.admin-menu a:hover,
.admin-menu a.active {
background: var(--red-primary);
color: #fff;
border-color: var(--red-primary);
}
/* Admin Table */
.admin-table {
width: 100%;
border-collapse: collapse;
background: var(--bg-card);
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--border-color);
}
.admin-table th {
background: var(--bg-secondary);
padding: 0.75rem;
text-align: right;
font-size: 0.85rem;
color: var(--text-secondary);
}
.admin-table td {
padding: 0.75rem;
border-top: 1px solid var(--border-color);
vertical-align: middle;
font-size: 0.9rem;
}
.admin-table tr:hover td {
background: rgba(220, 38, 38, 0.05);
}
/* تبهای سربرگ فهرست (مثلا «همه/پرداختشده/...» در admin/orders.php).
این کلاسها اصلا در style.css نبودند — فقط در |