/* استایل پایهٔ فروشگاه. همهٔ رنگ‌ها، فاصله‌ها و گردی گوشه‌ها از متغیرهای CSS زیر می‌آیند؛ یک قالب می‌تواند فقط با بازنویسی همین متغیرها (یک فایل css در پوشهٔ قالب) ظاهر کل سایت را عوض کند، بدون هیچ ویوی Razor. فهرست کامل متغیرها در TEMPLATE-GUIDE.md آمده است. */ /* تم روشن/تیره سه‌حالته است: • انتخاب صریح کاربر → data-theme="light" یا "dark" روی • بدون انتخاب → تم سیستم‌عامل (prefers-color-scheme) به همین دلیل پالت روشن روی :root خالی تعریف می‌شود (نه داخل مدیا کوئری) و پالت تیره دو بار: یک‌بار برای حالت سیستمی و یک‌بار برای انتخاب صریح. هیچ رنگی نباید فقط داخل یک مدیا کوئری تعریف شود، وگرنه در حالت دیگر تعریف‌نشده می‌ماند. */ :root { /* رنگ پیش‌فرض مرورگر برای کنترل‌های فرم، اسکرول‌بار و تقویم هم باید با تم بخواند. */ color-scheme: light; --color-bg: #f5f6f8; --color-surface: #ffffff; --color-surface-alt: #eef1f5; --color-text: #1c1f24; --color-muted: #6b7280; --color-border: #e3e6ea; --color-primary: #e01a4f; --color-primary-text: #ffffff; --color-accent: #0b7285; --color-success: #0f9d58; --color-error: #d93025; --color-warn: #b45309; --alert-success-bg: #e6f4ea; --alert-success-text: #0b6b32; --alert-error-bg: #fce8e6; --alert-error-text: #a50e0e; --alert-warn-bg: #fef3c7; --alert-warn-text: #b45309; /* پوشش «ناموجود» روی تصویر و کنترل‌های روی تصویر اسلایدر */ --overlay-veil: rgba(255, 255, 255, .72); --overlay-control: rgba(0, 0, 0, .4); --radius: 12px; --radius-sm: 8px; --gap: 16px; --container: 1200px; --font: Vazirmatn, "Segoe UI", Tahoma, sans-serif; /* فونت تیترها؛ پیش‌فرض همان فونت بدنه است و قالب‌ها می‌توانند عوضش کنند. */ --font-display: var(--font); --shadow: 0 1px 3px rgba(0, 0, 0, .08); } /* پالت تیره — حالت سیستمی (وقتی کاربر صراحتاً روشن را انتخاب نکرده) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --color-bg: #0f1115; --color-surface: #181b22; --color-surface-alt: #11141a; --color-text: #e8eaee; --color-muted: #9aa3b2; --color-border: #262b35; --color-accent: #4dd4ac; --alert-success-bg: #10281a; --alert-success-text: #7ee2a8; --alert-error-bg: #2b1414; --alert-error-text: #ff9d95; --alert-warn-bg: #2b220f; --alert-warn-text: #f2c14e; --overlay-veil: rgba(15, 17, 21, .78); --overlay-control: rgba(255, 255, 255, .18); --shadow: 0 2px 10px rgba(0, 0, 0, .5); } } /* پالت تیره — انتخاب صریح کاربر (باید بر مدیا کوئری غلبه کند) */ :root[data-theme="dark"] { color-scheme: dark; --color-bg: #0f1115; --color-surface: #181b22; --color-surface-alt: #11141a; --color-text: #e8eaee; --color-muted: #9aa3b2; --color-border: #262b35; --color-accent: #4dd4ac; --alert-success-bg: #10281a; --alert-success-text: #7ee2a8; --alert-error-bg: #2b1414; --alert-error-text: #ff9d95; --alert-warn-bg: #2b220f; --alert-warn-text: #f2c14e; --overlay-veil: rgba(15, 17, 21, .78); --overlay-control: rgba(255, 255, 255, .18); --shadow: 0 2px 10px rgba(0, 0, 0, .5); } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font); background: var(--color-bg); color: var(--color-text); font-size: 14px; line-height: 1.8; } a { color: inherit; text-decoration: none; } img { max-width: 100%; } h1 { font-size: 22px; margin: 16px 0; font-family: var(--font-display); } h2 { font-size: 17px; margin: 0 0 12px; font-family: var(--font-display); } hr { border: none; border-top: 1px solid var(--color-border); margin: 12px 0; } code, .mono { font-family: ui-monospace, Consolas, monospace; direction: ltr; } .container { max-width: var(--container); margin: 0 auto; padding: 0 16px; } .page { min-height: 60vh; padding-bottom: 40px; } .muted { color: var(--color-muted); font-size: 13px; } .inline { display: inline; } /* ---------- دکمه‌ها ---------- */ .btn-primary, .btn-ghost, .btn-link { display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 8px 16px; font: inherit; cursor: pointer; } .btn-primary { background: var(--color-primary); color: var(--color-primary-text); } .btn-ghost { background: var(--color-surface); border-color: var(--color-border); } .btn-link { background: none; padding: 4px; color: var(--color-accent); } .btn-link.danger { color: var(--color-error); } .block { display: flex; width: 100%; justify-content: center; margin-top: 12px; } /* ---------- هدر ---------- */ .site-header { background: var(--color-surface); box-shadow: var(--shadow); position: sticky; top: 0; z-index: 20; } .header-row { display: flex; align-items: center; gap: var(--gap); padding: 12px 16px; } .brand { display: flex; align-items: center; gap: 8px; } .brand img { height: 40px; } .brand-mark { width: 40px; height: 40px; border-radius: 50%; background: var(--color-primary); color: var(--color-primary-text); display: grid; place-items: center; font-weight: 700; } .brand-text { display: flex; flex-direction: column; line-height: 1.4; } .brand-text small { color: var(--color-muted); font-size: 11px; } .search { flex: 1; display: flex; } .search input { flex: 1; padding: 9px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm) 0 0 var(--radius-sm); font: inherit; background: var(--color-surface-alt); color: var(--color-text); } .search button { border: 1px solid var(--color-border); border-right: none; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--color-surface-alt); color: var(--color-text); cursor: pointer; padding: 0 14px; } .header-actions { display: flex; align-items: center; gap: 8px; } .theme-toggle { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-surface); color: inherit; cursor: pointer; font-size: 17px; display: inline-flex; align-items: center; justify-content: center; flex: none; } /* آیکون بر اساس تم فعال عوض می‌شود؛ در تم روشن «ماه» و در تم تیره «خورشید». */ .theme-toggle .icon-dark { display: none; } :root[data-theme="dark"] .theme-toggle .icon-dark { display: inline; } :root[data-theme="dark"] .theme-toggle .icon-light { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .icon-dark { display: inline; } :root:not([data-theme="light"]) .theme-toggle .icon-light { display: none; } } .cart-badge { background: var(--color-primary); color: #fff; border-radius: 10px; padding: 0 6px; font-size: 11px; min-width: 18px; display: inline-block; text-align: center; } .cart-badge:empty { display: none; } .menu { position: relative; } .menu-list { display: none; position: absolute; inset-inline-end: 0; top: 110%; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); min-width: 180px; padding: 6px; z-index: 30; } .menu.open .menu-list { display: block; } .menu-list a, .menu-list button { display: block; width: 100%; text-align: start; padding: 8px 10px; background: none; border: none; font: inherit; cursor: pointer; border-radius: var(--radius-sm); } .menu-list a:hover, .menu-list button:hover { background: var(--color-bg); } .category-bar { border-top: 1px solid var(--color-border); } /* عمداً overflow روی این نوار گذاشته نمی‌شود: هر مقدارِ overflow (حتی overflow-x) یک بلوکِ برش می‌سازد و زیرمنوی absolute داخل همان نوار حبس می‌شد. به‌جای اسکرول افقی، آیتم‌ها در چند خط می‌شکنند تا زیرمنو بتواند بیرون کادر باز شود. */ .category-bar ul { display: flex; flex-wrap: wrap; gap: 4px 18px; list-style: none; margin: 0; padding: 8px 0; } .category-bar li { position: relative; white-space: nowrap; } /* دکمهٔ «دسته‌بندی‌ها» و کلیدهای زیردسته فقط در حالت موبایل دیده می‌شوند. */ .category-toggle, .category-bar .sub-toggle { display: none; } .category-bar .sub { display: none; position: absolute; top: 100%; inset-inline-start: 0; flex-direction: column; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; min-width: 160px; z-index: 40; } .category-bar .sub a { display: block; padding: 6px 10px; border-radius: var(--radius-sm); } .category-bar .sub a:hover { background: var(--color-bg); } /* باز شدن با کیبورد هم کار کند، نه فقط با ماوس. */ .category-bar li:hover > .sub, .category-bar li:focus-within > .sub { display: flex; } /* ---------- پیام‌ها ---------- */ .alert { padding: 10px 14px; border-radius: var(--radius-sm); margin: 12px 0; } .alert-success { background: var(--alert-success-bg); color: var(--alert-success-text); } .alert-error { background: var(--alert-error-bg); color: var(--alert-error-text); } .alert-warn { background: var(--alert-warn-bg); color: var(--alert-warn-text); } /* ---------- اسلایدر ---------- */ .slider { position: relative; margin: 16px 0; border-radius: var(--radius); overflow: hidden; } .slider-track { display: flex; transition: transform .4s ease; } .slide { position: relative; min-width: 100%; } .slide img { width: 100%; height: 320px; object-fit: cover; display: block; } .slide-caption { position: absolute; inset-inline-start: 32px; bottom: 32px; color: #fff; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); display: flex; flex-direction: column; } .slide-caption b { font-size: 26px; } .slider-nav { position: absolute; top: 50%; transform: translateY(-50%); border: none; background: var(--overlay-control); color: #fff; font-size: 26px; cursor: pointer; width: 40px; height: 40px; border-radius: 50%; } .slider-nav.prev { inset-inline-start: 12px; } .slider-nav.next { inset-inline-end: 12px; } /* ---------- دسته‌ها ---------- */ .category-strip { margin: 24px 0; } .category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: var(--gap); } .category-card { background: var(--color-surface); border-radius: var(--radius); padding: 14px; text-align: center; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 4px; } .category-emoji { font-size: 30px; } .category-card small { color: var(--color-muted); font-size: 11px; } /* ---------- محصول ---------- */ .product-row { margin: 28px 0; } .product-row header { display: flex; justify-content: space-between; align-items: center; } .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--gap); } .product-card { background: var(--color-surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; } .product-thumb { position: relative; display: block; } .product-thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; } .badge-discount { position: absolute; top: 8px; inset-inline-start: 8px; background: var(--color-primary); color: #fff; border-radius: 20px; padding: 2px 8px; font-size: 12px; } .badge-out { position: absolute; inset: 0; background: var(--overlay-veil); display: grid; place-items: center; font-weight: 700; color: var(--color-muted); } .product-body { padding: 10px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .product-title { font-weight: 600; line-height: 1.6; min-height: 3.2em; overflow: hidden; } .product-meta { color: var(--color-muted); font-size: 12px; } .product-price { margin-top: auto; display: flex; align-items: baseline; gap: 6px; } .product-price del { color: var(--color-muted); font-size: 12px; } .product-price b { font-size: 16px; } .product-price span { font-size: 11px; color: var(--color-muted); } /* ---------- فهرست/فیلتر ---------- */ .list-layout { display: grid; grid-template-columns: 250px 1fr; gap: var(--gap); margin-top: 16px; } .filters, .panel { background: var(--color-surface); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); margin-bottom: var(--gap); } .filters h3 { font-size: 14px; margin: 14px 0 6px; } .filters select, .filters input { width: 100%; padding: 7px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; } .price-range { display: flex; gap: 6px; } .check { display: flex; align-items: center; gap: 6px; margin: 8px 0; } .check input { width: auto; } .filter-categories { list-style: none; margin: 0; padding: 0; } .filter-categories li a { display: flex; justify-content: space-between; padding: 5px 0; } .filter-categories li.active { font-weight: 700; color: var(--color-primary); } .results-head { display: flex; justify-content: space-between; align-items: center; } .pagination { display: flex; gap: 6px; flex-wrap: wrap; margin: 20px 0; } .pagination a { padding: 6px 12px; background: var(--color-surface); border-radius: var(--radius-sm); } .pagination a.active { background: var(--color-primary); color: #fff; } .empty { text-align: center; padding: 60px 20px; color: var(--color-muted); } /* ---------- صفحهٔ محصول ---------- */ .breadcrumb { display: flex; gap: 6px; flex-wrap: wrap; padding: 12px 0; color: var(--color-muted); font-size: 12px; } .product-page { display: grid; grid-template-columns: 420px 1fr; gap: 24px; background: var(--color-surface); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); } .gallery img#mainImage { width: 100%; aspect-ratio: 1; object-fit: contain; } .thumbs { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; } .thumbs button { width: 64px; height: 64px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: none; cursor: pointer; padding: 2px; } .thumbs img { width: 100%; height: 100%; object-fit: cover; } .short-desc { color: var(--color-muted); } .variant-group { margin: 12px 0; } .variant-label { font-weight: 600; } .variant-values { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; } .variant-chip { border: 1px solid var(--color-border); border-radius: 20px; padding: 6px 14px; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; } .variant-chip input { display: none; } .variant-chip:has(input:checked) { border-color: var(--color-primary); color: var(--color-primary); } .variant-chip.disabled { opacity: .45; cursor: not-allowed; text-decoration: line-through; } .price-box { border-top: 1px solid var(--color-border); margin-top: 16px; padding-top: 12px; } .final-price b { font-size: 26px; } .countdown { color: var(--color-primary); font-size: 13px; } .stock-line { display: flex; gap: 12px; margin: 10px 0; } .in-stock { color: var(--color-success); } .out-stock { color: var(--color-error); } .buy-actions { display: flex; gap: 10px; } .buy-actions input { width: 80px; padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; } .specs table { width: 100%; border-collapse: collapse; } .specs th, .specs td { border-bottom: 1px solid var(--color-border); padding: 8px; text-align: start; } .specs, .description { background: var(--color-surface); border-radius: var(--radius); padding: 16px; margin-top: 16px; box-shadow: var(--shadow); } /* ---------- سبد و تسویه ---------- */ .cart-layout, .checkout-layout { display: grid; grid-template-columns: 1fr 320px; gap: var(--gap); align-items: start; } .cart-line { display: grid; grid-template-columns: 90px 1fr auto auto; gap: 12px; background: var(--color-surface); border-radius: var(--radius); padding: 12px; margin-bottom: 10px; box-shadow: var(--shadow); } .cart-line img { width: 90px; height: 90px; object-fit: cover; border-radius: var(--radius-sm); } .cart-line.unavailable { outline: 1px solid var(--color-error); } .cart-line-actions input { width: 64px; padding: 6px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .cart-summary { background: var(--color-surface); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); position: sticky; top: 90px; } .row { display: flex; justify-content: space-between; padding: 5px 0; } .row.small { font-size: 12px; color: var(--color-muted); } .row.total { border-top: 1px solid var(--color-border); margin-top: 8px; padding-top: 10px; font-size: 16px; } .row.discount b { color: var(--color-success); } .coupon-form { display: flex; gap: 6px; margin: 12px 0; } .coupon-form input { flex: 1; padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font: inherit; } .address-row, .gateway-row { display: flex; gap: 10px; align-items: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 10px; margin-bottom: 8px; cursor: pointer; } .address-row:has(input:checked), .gateway-row:has(input:checked) { border-color: var(--color-primary); } .gateway-row img { width: 44px; } .gateway-row.link { text-decoration: none; } .delivery-dates, .delivery-windows { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; } .chip { border: 1px solid var(--color-border); border-radius: 20px; padding: 6px 14px; cursor: pointer; } .chip input { display: none; } .chip:has(input:checked) { border-color: var(--color-primary); color: var(--color-primary); } .map-box { height: 280px; border-radius: var(--radius-sm); overflow: hidden; margin: 10px 0; } .map-error { display: grid; place-items: center; height: 100%; padding: 12px; text-align: center; font-size: 13px; background: #f3f4f6; color: #b91c1c; } .modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); display: grid; place-items: center; z-index: 50; } /* بدون این، display:grid بالا بر [hidden] مرورگر غالب می‌شود و مودال همیشه باز می‌ماند. */ .modal[hidden] { display: none; } .modal-box { background: var(--color-surface); border-radius: var(--radius); padding: 20px; width: min(560px, 92vw); max-height: 90vh; overflow: auto; } .modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; } /* ---------- پنل‌ها و جدول‌ها ---------- */ .panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } label { display: block; margin: 6px 0; font-size: 13px; } /* رنگ متنِ کنترل‌های فرم و دکمه‌ها از پدر به ارث نمی‌رسد؛ مرورگر رنگ سیستمی خودش (مشکی) را می‌گذارد و روی زمینهٔ تیرهٔ تم دارک اصلاً خوانده نمی‌شود. پس رنگ و زمینهٔ همهٔ کنترل‌ها اینجا صریح از متغیرهای تم گرفته می‌شود، نه از مرورگر. */ input, select, textarea, button { font: inherit; color: var(--color-text); } input:not([type="checkbox"]):not([type="radio"]), select, textarea { background-color: var(--color-surface); } input[type="checkbox"], input[type="radio"] { accent-color: var(--color-primary); } option { background-color: var(--color-surface); color: var(--color-text); } ::placeholder { color: var(--color-muted); opacity: 1; } .form-grid input, .form-grid select, .panel > label input, .panel > label textarea, .panel > label select, .panel > .field input, .panel > .field textarea, .panel > .field select { width: 100%; padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); } /* بلوکِ فیلدی که به‌جای label نوشته شده (مثل ادیتور متن که خودش iframe می‌سازد). */ .field { margin: 6px 0; } .field-label { display: block; font-size: 13px; margin-bottom: 4px; } .inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .inline-form input, .inline-form select { padding: 7px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .repeat-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; } .repeat-row input, .repeat-row select { padding: 7px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .gallery-existing { display: flex; gap: 10px; flex-wrap: wrap; } .gallery-item { width: 100px; text-align: center; } .gallery-item img { width: 100px; height: 100px; object-fit: cover; border-radius: var(--radius-sm); } .data-table { width: 100%; border-collapse: collapse; background: var(--color-surface); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); } .data-table th, .data-table td { padding: 10px; border-bottom: 1px solid var(--color-border); text-align: start; font-size: 13px; } .data-table thead { background: var(--color-surface-alt); } /* بندانگشتی محصول در فهرست‌های پنل */ .row-thumb { width: 56px; height: 56px; object-fit: cover; display: block; border-radius: var(--radius-sm); background: var(--color-surface-alt); } /* ویرایش درجای ردیف (موجودی/وضعیت) */ .inline-edit { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .inline-edit input[type="number"] { width: 80px; padding: 6px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .inline-edit select { padding: 6px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .inline-edit .btn-ghost { padding: 6px 12px; } .inline-edit-state { font-size: 12px; color: var(--color-muted); min-width: 62px; } .inline-edit-state.ok { color: var(--color-success); } .inline-edit-state.failed { color: var(--color-error); } .stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--gap); margin-bottom: var(--gap); } .stat { background: var(--color-surface); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; } .stat b { font-size: 20px; } .stat span { color: var(--color-muted); font-size: 12px; } .admin-nav { display: flex; gap: 6px; flex-wrap: wrap; margin: 16px 0; } .admin-nav a { padding: 7px 14px; background: var(--color-surface); border-radius: var(--radius-sm); box-shadow: var(--shadow); } .admin-nav a.active { background: var(--color-primary); color: #fff; } .filter-tabs { display: flex; gap: 8px; margin-bottom: 12px; } .filter-tabs a { padding: 6px 12px; background: var(--color-surface); border-radius: var(--radius-sm); } .order-items { list-style: none; padding: 0; margin: 12px 0; } .order-items li { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--color-border); } .order-items img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); } .order-items div { flex: 1; } .tracking { background: var(--color-bg); border-radius: var(--radius-sm); padding: 8px 12px; margin: 8px 0; } .ok-line { color: var(--color-success); } .auth-card { max-width: 420px; margin: 40px auto; background: var(--color-surface); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); } .auth-card input, .auth-card textarea { width: 100%; padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .auth-error { color: var(--color-error); min-height: 20px; margin-top: 8px; } .payment-result { text-align: center; padding: 50px 20px; background: var(--color-surface); border-radius: var(--radius); box-shadow: var(--shadow); } .template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--gap); } .template-card { background: var(--color-surface); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; } .template-card.active { outline: 2px solid var(--color-primary); } .template-card img { aspect-ratio: 16/10; object-fit: cover; border-radius: var(--radius-sm); } .template-noimg { aspect-ratio: 16/10; display: grid; place-items: center; background: var(--color-bg); border-radius: var(--radius-sm); color: var(--color-muted); } .template-actions { display: flex; gap: 6px; margin-top: auto; } .badge { background: var(--color-success); color: #fff; border-radius: 20px; padding: 2px 10px; font-size: 12px; } .plan-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--gap); } .plan-card { background: var(--color-surface); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); text-align: center; } .plan-price { font-size: 26px; font-weight: 700; color: var(--color-primary); } .plan-card input { width: 100%; padding: 8px; margin-top: 8px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); } .surcharge-note { color: var(--alert-warn-text); background: var(--alert-warn-bg); border-radius: var(--radius-sm); padding: 4px 8px; margin-top: 4px; font-size: 12px; display: inline-block; } /* ---------- فیلتر تنوع ---------- */ .facet-values { display: flex; flex-wrap: wrap; gap: 6px; } .facet-values .chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; font-size: 13px; } .facet-values .chip small { color: var(--color-muted); font-size: 11px; } .filter-hint { font-size: 12px; line-height: 1.9; } /* ---------- برچسب‌ها ---------- */ .tag { border-radius: 20px; padding: 1px 9px; font-size: 11px; background: var(--color-bg); color: var(--color-muted); } .tag-admin { background: var(--color-primary); color: #fff; } .tag-buyer { background: var(--color-success); color: #fff; } .tag-ok { background: var(--color-success); color: #fff; } .tag-warn { background: var(--alert-warn-bg); color: var(--alert-warn-text); } .tag-danger { background: var(--color-error); color: #fff; } tr.row-muted { opacity: .55; } .row-actions { display: flex; gap: 6px; flex-wrap: wrap; } /* ---------- نظرات ---------- */ .stars { color: #f59e0b; letter-spacing: 1px; } .stars-off { color: var(--color-border); } .product-rating { display: flex; align-items: center; gap: 4px; font-size: 12px; } .rating-line { display: inline-flex; align-items: center; gap: 6px; margin: 6px 0; } .reviews { background: var(--color-surface); border-radius: var(--radius); padding: 16px; margin-top: 16px; box-shadow: var(--shadow); } .reviews-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .reviews-score { display: flex; align-items: center; gap: 6px; } .reviews-score b { font-size: 24px; } .rating-bars { display: flex; flex-direction: column; gap: 4px; margin: 12px 0; max-width: 320px; } .rating-bar { display: grid; grid-template-columns: 42px 1fr 28px; align-items: center; gap: 8px; font-size: 12px; } .rating-bar .bar { background: var(--color-bg); border-radius: 20px; height: 7px; overflow: hidden; } .rating-bar .bar i { display: block; height: 100%; background: #f59e0b; } .review-form, .reply-box form { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; } .review-form textarea, .reply-box textarea { width: 100%; padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: inherit; font: inherit; } .review-form .btn-primary, .reply-box .btn-ghost { align-self: flex-start; } .review-note { background: var(--color-bg); border-radius: var(--radius-sm); padding: 10px 14px; margin: 12px 0; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } /* ستاره‌های امتیازدهی: چون ورودی‌ها از ۵ به ۱ چیده شده‌اند، با ~ می‌توان ستاره‌های «کوچک‌ترِ» انتخاب‌شده را هم رنگی کرد (CSS انتخابگرِ «برادرِ قبلی» ندارد). */ .rating-input { display: flex; align-items: center; gap: 4px; } .rating-input input { display: none; } .rating-input label { font-size: 24px; color: var(--color-border); cursor: pointer; margin: 0; line-height: 1; } .rating-input input:checked ~ label { color: var(--color-border); } .rating-input label:hover, .rating-input label:hover ~ label, .rating-input input:checked + label, .rating-input input:checked + label ~ label { color: #f59e0b; } .review-list { list-style: none; padding: 0; margin: 8px 0 0; } .review-item { border-top: 1px solid var(--color-border); padding: 12px 0; } .review-item.is-reply { border-top: none; padding: 8px 0 0; } .review-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; } .review-text { margin: 6px 0 0; line-height: 2; white-space: pre-line; } .review-replies { list-style: none; margin: 8px 0 0; padding-inline-start: 16px; border-inline-start: 2px solid var(--color-border); } .reply-box summary { cursor: pointer; color: var(--color-muted); font-size: 12px; margin-top: 8px; } .review-admin .review-tags { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .review-admin .review-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 10px; } .review-admin .reply-form { margin-top: 10px; } .review-admin .reply-form input[name="comment"] { flex: 1; min-width: 220px; } .quoted { border-inline-start: 3px solid var(--color-border); margin: 8px 0; padding: 4px 12px; color: var(--color-muted); font-size: 13px; } .site-footer { background: var(--color-surface); border-top: 1px solid var(--color-border); margin-top: 40px; padding: 24px 0; } .footer-row { display: flex; justify-content: space-between; gap: var(--gap); flex-wrap: wrap; } .footer-row a { display: block; color: var(--color-muted); } @media (max-width: 768px) { /* روی لمسی hover وجود ندارد، پس نوار افقی جای خود را به یک دراپ‌داون واقعی می‌دهد: دکمهٔ «دسته‌بندی‌ها» فهرست را باز می‌کند و هر دسته کلید ▾ خودش را دارد که زیردسته‌ها را آکاردئونی نشان می‌دهد. باز و بسته شدن با کلاس‌های open/expanded در shop.js انجام می‌شود. */ .category-toggle { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; padding: 10px 4px; background: none; border: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer; } .category-toggle .caret { transition: transform .2s ease; } .category-bar.open .category-toggle .caret { transform: rotate(180deg); } .category-bar ul { display: none; flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 0 0 8px; max-height: 70vh; overflow-y: auto; } .category-bar.open > .container > ul { display: flex; } .category-bar li { white-space: normal; } .category-bar > .container > ul > li { display: grid; grid-template-columns: 1fr auto; align-items: center; border-top: 1px solid var(--color-border); } .category-bar > .container > ul > li > a { padding: 11px 4px; } .category-bar .sub-toggle { display: block; background: none; border: none; color: var(--color-muted); font: inherit; font-size: 18px; padding: 8px 14px; cursor: pointer; } .category-bar li.expanded > .sub-toggle { transform: rotate(180deg); } /* زیرمنو در موبایل شناور نیست؛ زیر همان دسته باز می‌شود و کل عرض را می‌گیرد. */ .category-bar .sub { position: static; display: none; grid-column: 1 / -1; box-shadow: none; border: none; border-radius: 0; padding: 0 0 8px; margin: 0; background: var(--color-surface-alt); } .category-bar li.expanded > .sub { display: flex; } .category-bar li:hover > .sub, .category-bar li:focus-within > .sub { display: none; } .category-bar li.expanded:hover > .sub { display: flex; } .category-bar .sub a { padding: 9px 18px; } } @media (max-width: 900px) { .list-layout, .cart-layout, .checkout-layout, .product-page { grid-template-columns: 1fr; } .header-row { flex-wrap: wrap; } .search { order: 3; width: 100%; flex-basis: 100%; } .cart-line { grid-template-columns: 70px 1fr; } .slide img { height: 180px; } }