/* ============================================================ Delivery Management System — Design System These tokens (colors, spacing, fonts, shadows) are reused across the Shop, Admin, and Driver portals. Every class name below was already in use before this pass — this file only refines how they look, so no HTML or JS needed to change alongside it. ============================================================ */ :root { /* Colors — softened slightly from the original palette, same overall navy + teal identity. */ --color-bg: #F5F7FA; --color-surface: #FFFFFF; --color-ink: #202942; --color-ink-soft: #667085; --color-border: #E5E9F0; --color-border-soft: #EEF1F6; --color-primary: #1E3A5F; --color-primary-soft: #2E5382; --color-accent: #0E8F7E; --color-accent-hover: #0C7A6B; --color-accent-soft: #E4F5F2; --color-warning: #C77C1F; --color-warning-soft: #FDF1DE; --color-danger: #C0392B; --color-danger-soft: #FBEAE7; --color-success: #1E8E5A; --color-success-soft: #E7F5EE; --color-info: #1B5FA8; --color-info-soft: #E3F0FC; --color-neutral-soft: #EAEEF5; /* Layout */ --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; --radius-full: 999px; --shadow-sm: 0 1px 2px rgba(32, 41, 66, 0.05); --shadow-card: 0 1px 2px rgba(32, 41, 66, 0.05), 0 6px 20px rgba(32, 41, 66, 0.07); --shadow-lift: 0 2px 4px rgba(32, 41, 66, 0.06), 0 12px 28px rgba(32, 41, 66, 0.10); /* Motion — subtle and quick, never gratuitous */ --transition-fast: 120ms ease; --transition: 180ms ease; /* Type */ --font-body: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-heading: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* Dark theme — applied by setting data-theme="dark" on , done by public/js/theme.js on every page based on the admin's Settings choice. Because every component in this file is styled using the variables above rather than hardcoded colors, overriding them here is enough to re-theme the whole app without touching any component rule. */ [data-theme="dark"] { --color-bg: #12161F; --color-surface: #1B212E; --color-ink: #E8ECF3; --color-ink-soft: #9AA3B5; --color-border: #2A3242; --color-border-soft: #232B39; --color-primary: #8FB4E3; --color-primary-soft: #6D97CC; --color-accent: #22B39E; --color-accent-hover: #1C9985; --color-accent-soft: #16342E; --color-warning: #E0A339; --color-warning-soft: #362B18; --color-danger: #E27C6E; --color-danger-soft: #38211D; --color-success: #4FC98A; --color-success-soft: #17301F; --color-info: #6FA8DC; --color-info-soft: #1C2C3D; --color-neutral-soft: #232B39; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(0, 0, 0, 0.35); --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.35), 0 12px 28px rgba(0, 0, 0, 0.45); } * { box-sizing: border-box; } /* This is the real, permanent fix for a bug that's bitten this project twice now: any class that sets "display: flex/grid/etc." will, at equal CSS specificity, override the browser's default "[hidden] { display: none }" rule, simply because it loads later in the cascade. Rather than adding a matching [hidden] override every time a new component needs a non-block display value (easy to forget — see .modal-overlay, .error-message, .success-message, .empty-state above, all of which needed this patched in individually), this one rule guarantees the hidden attribute always wins, everywhere, permanently. The individual [hidden] overrides above are now redundant but left in place as harmless documentation. */ [hidden] { display: none !important; } body { margin: 0; font-family: var(--font-body); background-color: var(--color-bg); color: var(--color-ink); line-height: 1.55; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; color: var(--color-primary); letter-spacing: -0.01em; margin: 0 0 8px 0; } /* ---- Shared small pieces, used across every page ---- */ .badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-accent); background: var(--color-accent-soft); padding: 5px 11px; border-radius: var(--radius-full); margin-bottom: 16px; } .badge svg { width: 12px; height: 12px; } .subtitle { color: var(--color-ink-soft); margin-top: 0; } .error-message { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-danger); background: var(--color-danger-soft); border-radius: var(--radius-sm); padding: 10px 12px; margin: 4px 0 4px 0; animation: fadeSlideIn var(--transition) ease-out; } .error-message[hidden] { display: none; } /* Same shape as .error-message, informational rather than an error — e.g. the Whish Money payment instructions on storefront checkout. */ .info-callout { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--color-info); background: var(--color-info-soft); border-radius: var(--radius-sm); padding: 10px 12px; margin: 4px 0; animation: fadeSlideIn var(--transition) ease-out; } .info-callout[hidden] { display: none; } .info-callout svg { flex-shrink: 0; margin-top: 2px; } .error-message svg { width: 16px; height: 16px; flex-shrink: 0; } .primary-button, .secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--font-body); font-size: 15px; font-weight: 600; border-radius: var(--radius-sm); padding: 11px 20px; border: none; cursor: pointer; text-decoration: none; transition: background-color var(--transition), border-color var(--transition), transform var(--transition-fast), box-shadow var(--transition); } .primary-button svg, .secondary-button svg { width: 16px; height: 16px; flex-shrink: 0; } .primary-button { background: var(--color-accent); color: #FFFFFF; box-shadow: 0 1px 2px rgba(14, 143, 126, 0.15); } .primary-button:hover { background: var(--color-accent-hover); box-shadow: 0 4px 10px rgba(14, 143, 126, 0.25); } .primary-button:active { transform: translateY(1px); } .primary-button:disabled { background: var(--color-border); color: var(--color-ink-soft); cursor: not-allowed; box-shadow: none; transform: none; } /* Same shape/sizing as .primary-button/.secondary-button, but reserved for genuinely destructive or urgent actions — the driver's Emergency button, the confirm-send inside its modal. */ .danger-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--font-body); font-size: 15px; font-weight: 600; border-radius: var(--radius-sm); padding: 11px 20px; border: none; cursor: pointer; text-decoration: none; background: var(--color-danger); color: #FFFFFF; box-shadow: 0 1px 2px rgba(192, 57, 43, 0.2); transition: background-color var(--transition), transform var(--transition-fast), box-shadow var(--transition); } .danger-button svg { width: 16px; height: 16px; flex-shrink: 0; } .danger-button:hover { background: #A8321F; box-shadow: 0 4px 10px rgba(192, 57, 43, 0.3); } .danger-button:active { transform: translateY(1px); } .danger-button:disabled { background: var(--color-border); color: var(--color-ink-soft); cursor: not-allowed; box-shadow: none; transform: none; } .secondary-button { background: var(--color-surface); color: var(--color-primary); border: 1px solid var(--color-border); } .secondary-button:hover { background: var(--color-bg); border-color: var(--color-ink-soft); } .secondary-button:active { transform: translateY(1px); } /* ---- Portal selection page (the homepage) ---- */ .portal-select { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; gap: 32px; } .portal-header { text-align: center; max-width: 480px; } .portal-cards { display: grid; grid-template-columns: repeat(3, minmax(180px, 220px)); gap: 20px; } .portal-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 28px 24px; text-decoration: none; color: inherit; display: block; transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .portal-card:hover { border-color: var(--color-accent); box-shadow: var(--shadow-lift); transform: translateY(-2px); } .portal-card-icon { width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--color-accent-soft); color: var(--color-accent); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .portal-card-icon svg { width: 20px; height: 20px; } .portal-card h2 { color: var(--color-primary); margin-bottom: 8px; } .portal-card p { color: var(--color-ink-soft); font-size: 14px; margin: 0; } @media (max-width: 640px) { .portal-cards { grid-template-columns: 1fr; width: 100%; max-width: 320px; } } /* ---- Login pages (Admin, Shop, Driver) ---- */ .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .auth-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 40px; max-width: 380px; width: 100%; display: flex; flex-direction: column; } .auth-card label { font-size: 13px; font-weight: 600; color: var(--color-ink); margin-top: 16px; margin-bottom: 6px; } .auth-card input { font-family: var(--font-body); font-size: 15px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-ink); transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition); } .auth-card input:focus { outline: none; border-color: var(--color-accent); background: var(--color-surface); box-shadow: 0 0 0 3px var(--color-accent-soft); } .auth-card .primary-button { margin-top: 24px; } .back-link { display: flex; align-items: center; justify-content: center; gap: 6px; text-align: center; margin-top: 20px; font-size: 13px; color: var(--color-ink-soft); text-decoration: none; transition: color var(--transition-fast); } .back-link svg { width: 14px; height: 14px; } .back-link:hover { color: var(--color-accent); } /* ---- Placeholder dashboard pages ---- */ .dashboard-placeholder { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .dashboard-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 40px; max-width: 480px; width: 100%; } .dashboard-card .secondary-button { margin-top: 8px; } /* ---- Real dashboard layout ---- */ .dashboard { max-width: 1100px; margin: 0 auto; padding: 32px 24px 64px; } .dashboard-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 28px; } .dashboard-header h1 { margin: 0; } .panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 28px; margin-bottom: 24px; animation: fadeSlideIn var(--transition) ease-out; } .panel h2 { font-size: 18px; margin-bottom: 20px; } /* ---- Forms (new order, manage order, driver/shop forms) ---- */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; } .form-field { display: flex; flex-direction: column; } .form-field-wide { grid-column: 1 / -1; } .form-hint { font-size: 13px; color: var(--color-ink-soft); } .form-hint-success { color: var(--color-success); } .form-hint-error { color: var(--color-danger); } .location-field-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; } .form-field label { font-size: 13px; font-weight: 600; color: var(--color-ink); margin-bottom: 6px; } .form-field input, .form-field textarea, .form-field select { font-family: var(--font-body); font-size: 15px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-ink); resize: vertical; transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition); } .form-field input:focus, .form-field textarea:focus, .form-field select:focus { outline: none; border-color: var(--color-accent); background: var(--color-surface); box-shadow: 0 0 0 3px var(--color-accent-soft); } .order-form .error-message, .order-form .success-message { margin-top: 18px; } .success-message { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--color-success); background: var(--color-success-soft); border-radius: var(--radius-sm); padding: 10px 12px; animation: fadeSlideIn var(--transition) ease-out; } .success-message[hidden] { display: none; } .success-message svg { width: 16px; height: 16px; flex-shrink: 0; } .order-form .primary-button { margin-top: 18px; } @media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } } /* ---- Tabs ---- */ .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--color-border); margin-bottom: 20px; } .tab-button { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--color-ink-soft); background: none; border: none; border-bottom: 2px solid transparent; padding: 10px 4px; margin-right: 20px; cursor: pointer; transition: color var(--transition-fast), border-color var(--transition-fast); } .tab-button:hover { color: var(--color-primary); } .tab-button.active { color: var(--color-primary); border-bottom-color: var(--color-accent); } .tab-panel { padding-top: 4px; animation: fadeSlideIn var(--transition) ease-out; } /* ---- Tables ---- */ .table-scroll { overflow-x: auto; } .orders-table { width: 100%; border-collapse: collapse; font-size: 14px; } .orders-table th { text-align: left; font-size: 12px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-ink-soft); padding: 8px 10px; border-bottom: 1px solid var(--color-border); white-space: nowrap; } .orders-table td { padding: 12px 10px; border-bottom: 1px solid var(--color-border-soft); white-space: nowrap; } .orders-table tbody tr { transition: background-color var(--transition-fast); } .orders-table tbody tr:hover { background: var(--color-bg); } /* Rows that open a details view on click (see shop-dashboard.js's openOrderDetailsModal) — buttons inside them (Cancel, Start Preparing, etc.) still work as normal since the click handler skips anything inside .actions-cell or a prep-cell button. */ .orders-table tbody tr.order-row-clickable { cursor: pointer; } .orders-table tbody tr:last-child td { border-bottom: none; } /* The actions cell (row buttons like Cancel/Edit/Deactivate) pins to the right edge of .table-scroll instead of scrolling away with the rest of a wide row — a cashier or shop owner shouldn't have to scroll all the way across a 10-column order row just to reach the Cancel button. */ .orders-table th.actions-cell, .orders-table td.actions-cell { position: sticky; right: 0; z-index: 1; background: var(--color-surface); box-shadow: -8px 0 12px -8px rgba(0, 0, 0, 0.18); } .orders-table tbody tr:hover td.actions-cell { background: var(--color-bg); } .empty-state { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--color-ink-soft); font-size: 14px; padding: 40px 0; } .empty-state[hidden] { display: none; } .empty-state svg { width: 32px; height: 32px; color: var(--color-border); } .text-button { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--color-accent); background: none; border: none; cursor: pointer; padding: 0; transition: color var(--transition-fast); } .text-button svg { width: 14px; height: 14px; } .text-button:hover { text-decoration: underline; } /* ---- Status badges ---- */ .status-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: var(--radius-full); white-space: nowrap; } .status-badge svg { width: 11px; height: 11px; } .status-new { background: var(--color-neutral-soft); color: var(--color-primary); } .status-assigned { background: var(--color-warning-soft); color: var(--color-warning); } .status-progress { background: var(--color-info-soft); color: var(--color-info); } .status-success { background: var(--color-accent-soft); color: var(--color-success); } .status-cancelled { background: var(--color-danger-soft); color: var(--color-danger); } /* ---- Admin dashboard stats ---- */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 24px; } .stat-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 20px; display: flex; flex-direction: column; gap: 6px; transition: box-shadow var(--transition), transform var(--transition); } .stat-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); } .stat-label { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-ink-soft); } .stat-label svg { width: 14px; height: 14px; color: var(--color-accent); } .stat-value { font-size: 30px; font-weight: 700; color: var(--color-primary); } @media (max-width: 800px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .stats-grid { grid-template-columns: 1fr; } } /* ---- Panel header row (title + filter dropdown) ---- */ .panel-header-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; } .panel-header-row h2 { margin-bottom: 0; } /* A panel-header h2 wrapped in a button, so the whole title row toggles a collapsible section below it (see shop-dashboard.js's storefront panel) — reset all the default button chrome so it reads exactly like the plain, non-interactive h2 it replaces. */ .panel-collapse-toggle { display: flex; align-items: center; gap: 6px; background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; } /* Rotated on its own wrapper rather than directly on the lucide icon — CSS transform on a root element computes unreliably in some environments, a plain HTML element doesn't have that problem. */ .panel-collapse-chevron { display: inline-flex; flex-shrink: 0; transition: transform var(--transition-fast); } .panel-collapse-chevron svg { width: 18px; height: 18px; color: var(--color-ink-soft); } .panel-collapse-toggle[aria-expanded="true"] .panel-collapse-chevron { transform: rotate(90deg); } .filter-select { font-family: var(--font-body); font-size: 14px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); transition: border-color var(--transition-fast); } .filter-select:focus { outline: none; border-color: var(--color-accent); } .actions-cell { display: flex; flex-wrap: wrap; gap: 6px 14px; } .danger-text { color: var(--color-danger); } .prep-timer { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--color-warning); } /* ---- Modal ---- */ .modal-overlay { position: fixed; inset: 0; background: rgba(32, 41, 66, 0.5); display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 100; animation: fadeIn var(--transition) ease-out; } /* Without this, the hidden attribute has no effect: an author stylesheet rule like "display: flex" above beats the browser's built-in "[hidden] { display: none }" rule at equal specificity, since ours loads later in the cascade. This rule restores it. */ .modal-overlay[hidden] { display: none; } .modal { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); padding: 32px; max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; animation: modalPopIn var(--transition) ease-out; } .modal h2 { font-size: 18px; margin-bottom: 20px; } .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; } .modal-header h2 { margin-bottom: 0; } .modal-close-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: var(--radius-full); border: none; background: none; color: var(--color-ink-soft); cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast); } .modal-close-btn:hover { background: var(--color-bg); color: var(--color-ink); } .modal-close-btn svg { width: 18px; height: 18px; } .modal .error-message { margin-top: 16px; } .modal-actions { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; } /* ---- Order timeline (Manage Order modal) ---- */ .order-timeline { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; padding: 16px; background: var(--color-bg); border-radius: var(--radius-sm); } .timeline-item { display: flex; align-items: center; gap: 10px; font-size: 13px; } .timeline-item svg { width: 15px; height: 15px; color: var(--color-accent); flex-shrink: 0; } .timeline-item-label { font-weight: 600; color: var(--color-ink); } .timeline-item-time { color: var(--color-ink-soft); margin-left: auto; white-space: nowrap; } /* ---- Search + sort controls above tables ---- */ .table-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; } .search-input-wrap { position: relative; flex: 1; min-width: 200px; } .search-input-wrap svg { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--color-ink-soft); pointer-events: none; } .search-input-wrap input { width: 100%; font-family: var(--font-body); font-size: 14px; padding: 9px 12px 9px 34px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-ink); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .search-input-wrap input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); } /* ---- Printing a single order ---- */ .print-only { display: none; } @media print { body * { visibility: hidden; } .print-only, .print-only * { visibility: visible; } .print-only { display: block; position: absolute; top: 0; left: 0; width: 100%; padding: 24px; } .print-only h2 { margin-bottom: 4px; } .print-only table { width: 100%; border-collapse: collapse; margin-top: 16px; } .print-only td { padding: 6px 4px; border-bottom: 1px solid #ccc; font-size: 13px; } .print-only td:first-child { font-weight: 600; width: 160px; } /* visibility:hidden keeps an element's box in the layout (unlike display:none), so the full-height dashboard behind .print-only was still forcing extra blank pages based on its own height — collapse it outright so pagination is based on the printed content alone. */ .dashboard { display: none !important; } /* Text inherits --color-ink, which is a near-white color under the dark theme — fine on a dark screen, but it printed as barely-visible pale gray on white paper. Force solid ink regardless of which theme is active on screen. */ :root, [data-theme="dark"] { --color-ink: #000000; --color-ink-soft: #333333; } } /* ---- Toast notifications ---- */ .toast-container { position: fixed; bottom: 24px; right: 24px; display: flex; flex-direction: column; gap: 10px; z-index: 200; max-width: calc(100vw - 48px); } .toast { display: flex; align-items: center; gap: 10px; background: var(--color-surface); color: var(--color-ink); border: 1px solid var(--color-border); border-left: 4px solid var(--color-accent); border-radius: var(--radius-sm); box-shadow: var(--shadow-lift); padding: 12px 16px; font-size: 14px; min-width: 240px; max-width: 360px; animation: toastIn var(--transition) ease-out; } .toast.toast-leaving { animation: toastOut var(--transition) ease-in forwards; } .toast svg { width: 18px; height: 18px; flex-shrink: 0; } .toast-success { border-left-color: var(--color-success); } .toast-success svg { color: var(--color-success); } .toast-error { border-left-color: var(--color-danger); } .toast-error svg { color: var(--color-danger); } .toast-info svg { color: var(--color-accent); } @media (max-width: 480px) { .toast-container { left: 16px; right: 16px; bottom: 16px; } .toast { min-width: 0; max-width: none; width: 100%; } } /* ---- Skeleton loaders ---- */ .skeleton-row td { padding: 12px 10px; } .skeleton-bar { height: 14px; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--color-border-soft) 25%, var(--color-border) 37%, var(--color-border-soft) 63%); background-size: 400% 100%; animation: skeletonShimmer 1.4s ease infinite; } .skeleton-bar--short { width: 60%; } .skeleton-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 20px; display: flex; flex-direction: column; gap: 10px; } /* ---- Motion ---- */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } @keyframes modalPopIn { from { opacity: 0; transform: scale(0.96) translateY(6px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @keyframes toastOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(8px); } } @keyframes skeletonShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ---- Menu items (Shop's own catalog) ---- */ .category-heading { font-size: 15px; font-weight: 700; color: var(--color-primary); margin: 24px 0 12px 0; } .category-heading:first-child { margin-top: 0; } .menu-items-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-bottom: 8px; } .menu-item-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); display: flex; flex-direction: column; transition: box-shadow var(--transition), transform var(--transition); } .menu-item-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); } .menu-item-card.menu-item-unavailable { opacity: 0.6; } .menu-item-image, .menu-item-image-placeholder { width: 100%; height: 140px; background: var(--color-bg); } .menu-item-image { object-fit: cover; display: block; } .menu-item-image-placeholder { display: flex; align-items: center; justify-content: center; color: var(--color-border); } .menu-item-image-placeholder svg { width: 36px; height: 36px; } .menu-item-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .menu-item-name-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .menu-item-name { font-weight: 600; color: var(--color-ink); } .menu-item-price { font-weight: 700; color: var(--color-primary); white-space: nowrap; } .menu-item-description { font-size: 13px; color: var(--color-ink-soft); } .menu-item-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 12px; color: var(--color-ink-soft); margin-top: 4px; } .badge-popular { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; color: var(--color-warning); background: var(--color-warning-soft); padding: 2px 8px; border-radius: var(--radius-full); } .badge-popular svg { width: 11px; height: 11px; } .menu-item-actions { display: flex; flex-wrap: wrap; gap: 12px; padding: 10px 16px; border-top: 1px solid var(--color-border-soft); } /* ---- Extras editor (inside Add/Edit Item modal) ---- */ .extra-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .extra-row input.extra-nutrition-input { flex: 0 0 60px; } .extra-row input[type="text"] { flex: 2; font-family: var(--font-body); font-size: 14px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-ink); } .extra-row input[type="number"] { flex: 1; font-family: var(--font-body); font-size: 14px; padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-ink); } /* ---- Item picker (New Order form) ---- */ .menu-picker-categories { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; } .menu-picker-category-pill { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--color-ink-soft); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-full); padding: 5px 12px; cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .menu-picker-category-pill:hover { border-color: var(--color-accent); } .menu-picker-category-pill.active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } .menu-picker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; max-height: 320px; overflow-y: auto; padding: 2px; } .menu-picker-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 10px 12px; cursor: pointer; transition: border-color var(--transition-fast), background-color var(--transition-fast); } .menu-picker-card:hover { border-color: var(--color-accent); background: var(--color-accent-soft); } .menu-picker-card-name { font-size: 13px; font-weight: 600; color: var(--color-ink); line-height: 1.3; } .menu-picker-card-price { font-size: 12px; color: var(--color-ink-soft); } .order-items-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; } .order-items-list-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; background: var(--color-bg); border-radius: var(--radius-sm); font-size: 14px; } .cart-qty-stepper { display: inline-flex; align-items: center; gap: 6px; } .cart-qty-btn { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; font-size: 14px; font-weight: 700; line-height: 1; color: var(--color-primary); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); cursor: pointer; } .cart-qty-btn:hover { border-color: var(--color-accent); color: var(--color-accent); } .order-items-subtotal { display: flex; justify-content: space-between; font-weight: 700; padding: 8px 12px; font-size: 14px; color: var(--color-primary); } /* ---- Real-time connection indicator ---- */ .connection-indicator { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--color-ink-soft); } .connection-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-ink-soft); flex-shrink: 0; } .connection-connected .connection-dot { background: var(--color-success); } .connection-connected .connection-text { color: var(--color-success); } .connection-reconnecting .connection-dot { background: var(--color-warning); animation: connectionPulse 1s ease-in-out infinite; } .connection-reconnecting .connection-text { color: var(--color-warning); } .connection-disconnected .connection-dot { background: var(--color-danger); } .connection-disconnected .connection-text { color: var(--color-danger); } @keyframes connectionPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* ---- Notification bell ---- */ .notification-bell-wrap { position: relative; } .notification-badge { position: absolute; top: -4px; right: -4px; background: var(--color-danger); color: #FFFFFF; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; padding: 0 4px; pointer-events: none; } /* position/top/left/width/max-height are all set in JS (see public/js/notifications.js's positionDropdown()) every time this opens — the bell is rarely the last button in the header's row (more nav buttons usually follow it), so a fixed CSS `right: 0` anchored to the bell's own narrow wrapper routinely pushed this off the LEFT edge of the screen, leaving it mostly invisible. position: fixed + viewport-clamped coordinates computed at open-time is the only way to guarantee this stays fully on-screen regardless of where the bell ends up sitting in the header, on any screen size — so there's no separate mobile breakpoint needed here either, the same JS logic handles both. */ .notification-dropdown { position: fixed; overflow-y: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); z-index: 150; } .notification-dropdown-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--color-border); font-weight: 600; font-size: 13px; color: var(--color-primary); } .notification-item { display: flex; flex-direction: column; gap: 3px; padding: 12px 16px; border-bottom: 1px solid var(--color-border-soft); cursor: pointer; transition: background-color var(--transition-fast); } .notification-item:last-child { border-bottom: none; } .notification-item:hover { background: var(--color-bg); } .notification-item.unread { background: var(--color-accent-soft); } .notification-item-title { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--color-ink); } .notification-item-body { font-size: 12px; color: var(--color-ink-soft); } .notification-item-time { font-size: 11px; color: var(--color-ink-soft); } .notification-priority-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-danger); flex-shrink: 0; } /* ---- Shop pickup-location banner ---- */ .location-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 12px 18px; border-radius: var(--radius-sm); margin-bottom: 20px; font-size: 14px; } .location-banner-text { display: flex; align-items: center; gap: 8px; } .location-banner.location-unset { background: var(--color-warning-soft); color: var(--color-warning); } .location-banner.location-set { background: var(--color-success-soft); color: var(--color-success); } /* ---- Emergency alert banner (admin) ---- */ @keyframes emergencyPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .emergency-banner { background: var(--color-danger-soft); border: 2px solid var(--color-danger); border-radius: var(--radius-lg); padding: 16px 20px; margin-bottom: 24px; } .emergency-banner-header { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--color-danger); margin-bottom: 12px; } .emergency-banner-icon { width: 20px; height: 20px; animation: emergencyPulse 1.2s ease-in-out infinite; } .emergency-alert-item { background: var(--color-surface); border: 1px solid var(--color-danger); border-radius: var(--radius-sm); padding: 12px 14px; margin-bottom: 10px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; } .emergency-alert-item:last-child { margin-bottom: 0; } .emergency-alert-main { flex: 1; min-width: 220px; font-size: 13px; } .emergency-alert-main strong { font-size: 14px; color: var(--color-ink); } .emergency-alert-time { color: var(--color-ink-soft); margin-left: 8px; } .emergency-alert-detail { color: var(--color-ink-soft); margin-top: 3px; } .emergency-alert-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* ---- Dispatch offer popup (driver) ---- */ .dispatch-offer-modal { max-width: 380px; border: 2px solid var(--color-accent); box-shadow: var(--shadow-lift); } .dispatch-offer-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px 0 20px; } .dispatch-offer-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--color-accent); } .dispatch-offer-badge svg { width: 15px; height: 15px; } .dispatch-countdown-text { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--color-warning); } .dispatch-countdown-bar-track { height: 5px; background: var(--color-border-soft); margin: 10px 20px 0 20px; border-radius: var(--radius-full); overflow: hidden; } .dispatch-countdown-bar-fill { height: 100%; width: 100%; background: var(--color-accent); border-radius: var(--radius-full); } .dispatch-countdown-bar-fill.dispatch-countdown-running { transition: width 20s linear, background-color 4s linear; width: 0%; background: var(--color-danger); } .dispatch-offer-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; } .dispatch-offer-body h3 { font-size: 19px; font-weight: 700; color: var(--color-ink); } .dispatch-offer-detail { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; color: var(--color-ink-soft); } .dispatch-offer-detail svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; color: var(--color-primary); } .dispatch-offer-stats { display: flex; flex-wrap: wrap; gap: 16px 24px; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--color-border-soft); } .dispatch-offer-stats > div { display: flex; flex-direction: column; gap: 2px; } .dispatch-stat-label { font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--color-ink-soft); } .dispatch-stat-value { font-size: 18px; font-weight: 700; color: var(--color-ink); } .dispatch-stat-value.dispatch-earnings { color: var(--color-success); } .dispatch-order-id { font-size: 12px; color: var(--color-ink-soft); } .dispatch-offer-actions { display: flex; gap: 10px; padding: 0 20px 20px 20px; } .dispatch-offer-actions button { flex: 1; } /* ---- Guided status-update stepper (driver dashboard) ---- */ .status-step-tracker { display: flex; align-items: flex-start; padding: 4px 8px 20px; } .status-step { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; position: relative; } .status-step:not(:first-child)::before { content: ''; position: absolute; top: 17px; right: 50%; width: 100%; height: 2px; background: var(--color-border); z-index: 0; } .status-step.is-done:not(:first-child)::before, .status-step.is-current:not(:first-child)::before { background: var(--color-accent); } .status-step-dot { width: 34px; height: 34px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; background: var(--color-neutral-soft); color: var(--color-ink-soft); position: relative; z-index: 1; flex: none; } .status-step-dot svg { width: 16px; height: 16px; } .status-step.is-done .status-step-dot { background: var(--color-accent); color: #fff; } .status-step.is-current .status-step-dot { background: var(--color-primary); color: #fff; box-shadow: 0 0 0 4px var(--color-accent-soft); } .status-step-label { font-size: 11.5px; font-weight: 600; color: var(--color-ink-soft); } .status-step.is-current .status-step-label { color: var(--color-ink); } .status-step-context { font-size: 13.5px; color: var(--color-ink-soft); background: var(--color-bg); border-radius: var(--radius-sm); padding: 12px 14px; margin: 0 0 16px; display: flex; align-items: flex-start; gap: 8px; } .status-step-context svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--color-ink-soft); } .status-step-navigate { margin: 0 0 16px; } .status-step-navigate a { width: 100%; justify-content: center; } /* ---- POS Register ---- */ .pos-layout { display: grid; grid-template-columns: 1fr 340px; gap: 20px; align-items: start; } @media (max-width: 900px) { .pos-layout { grid-template-columns: 1fr; } } .pos-category-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .pos-category-tab { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--color-ink-soft); background: var(--color-neutral-soft); border: 1px solid transparent; border-radius: var(--radius-full); padding: 7px 14px; cursor: pointer; } .pos-category-tab.active { color: #fff; background: var(--color-primary); } .pos-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; } .pos-product-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 12px; text-align: left; cursor: pointer; box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-fast), transform var(--transition-fast); } .pos-product-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-1px); } .pos-product-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: 8px; background: var(--color-neutral-soft); } .pos-product-name { font-weight: 600; font-size: 14px; color: var(--color-ink); margin: 0 0 4px; } .pos-product-price { font-weight: 700; font-size: 14px; color: var(--color-accent); margin: 0; } .pos-cart { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px; position: sticky; top: 16px; } .pos-cart h3 { margin: 0 0 12px; font-size: 16px; } .pos-cart-line { display: flex; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--color-border-soft); font-size: 14px; } .pos-cart-line-info { flex: 1; } .pos-cart-line-name { font-weight: 600; color: var(--color-ink); } .pos-cart-line-extras { font-size: 12px; color: var(--color-ink-soft); } .pos-cart-line-remove { width: 24px; height: 24px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; } .pos-cart-total { display: flex; justify-content: space-between; font-size: 18px; font-weight: 700; padding: 14px 0; margin-top: 4px; border-top: 1px solid var(--color-border); } .pos-extras-picker { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; } .pos-extras-picker label { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; } .pos-qty-stepper { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 12px 0; } .pos-qty-stepper button { width: 32px; height: 32px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); font-size: 16px; cursor: pointer; } .pos-qty-stepper span { font-size: 18px; font-weight: 700; min-width: 24px; text-align: center; } .pos-payment-methods { display: flex; gap: 8px; margin-bottom: 16px; } /* .store-payment-btn (storefront checkout's Cash/Whish toggle) shares this exact look but needs its own class — it lives in the same modal as .pos-payment-method-btn (the ASAP/Schedule toggle), and that toggle's JS scopes its click handler to the class name alone, not the data attribute, so reusing the class would make both toggles fight over each other's state. */ .pos-payment-method-btn, .store-payment-btn { flex: 1; padding: 12px; border-radius: var(--radius-sm); border: 1.5px solid var(--color-border); background: var(--color-surface); font-weight: 600; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; } .pos-payment-method-btn.active, .store-payment-btn.active { border-color: var(--color-accent); background: var(--color-accent-soft); color: var(--color-accent); } .pos-receipt { font-family: 'Courier New', monospace; font-size: 13px; } .pos-receipt-line { display: flex; justify-content: space-between; padding: 4px 0; } .pos-receipt-total { border-top: 1px dashed var(--color-border); margin-top: 8px; padding-top: 8px; font-weight: 700; } @media print { body * { visibility: hidden; } #posReceiptPrintArea, #posReceiptPrintArea * { visibility: visible; } #posReceiptPrintArea { position: absolute; top: 0; left: 0; width: 100%; } /* Same two fixes as the .print-only block above: collapse the full-height POS screen behind the receipt (visibility:hidden alone left it forcing extra blank pages), and force solid ink so the receipt doesn't print as pale gray under the dark theme. */ .dashboard { display: none !important; } :root, [data-theme="dark"] { --color-ink: #000000; --color-ink-soft: #333333; } } /* ---- Shop-side Offers management (shop-menu.html) ---- */ .offers-list { display: flex; flex-direction: column; gap: 12px; } .offer-items-picker { max-height: 220px; overflow-y: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; } .offer-item-picker-row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; } .offer-item-picker-row input[type="checkbox"] { width: auto; } .offer-item-picker-row .offer-item-qty { width: 56px; margin-left: auto; } .offer-card { display: flex; align-items: stretch; gap: 16px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; } .offer-card.offer-card-inactive { opacity: 0.6; } .offer-card-image { width: 140px; flex: none; object-fit: cover; display: block; } .offer-card-image.offer-card-image-placeholder { display: flex; align-items: center; justify-content: center; background: var(--color-bg); color: var(--color-border); } .offer-card-body { flex: 1; padding: 14px 0; display: flex; flex-direction: column; gap: 6px; justify-content: center; min-width: 0; } .offer-card .menu-item-actions { border-top: none; border-left: 1px solid var(--color-border-soft); flex-direction: column; justify-content: center; flex-wrap: nowrap; padding: 10px 16px; } /* ========================================================================== PUBLIC STOREFRONT (public/store.html) Deliberately its own namespace (store-*), separate from the admin/ cashier UI's pos-* classes above — a customer-facing marketing page has different goals (make the food look good, build trust fast) than an internal work tool, even though they share the same token system. ========================================================================== */ .store-page { max-width: 1100px; margin: 0 auto; padding: 0 20px 60px; } .store-hero { position: relative; margin: 0 -20px 28px; padding: 48px 20px 40px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-soft) 100%); color: #fff; text-align: center; } .store-hero-back-link { position: absolute; top: 16px; left: 20px; padding: 7px 14px; font-size: 13px; background: rgba(255, 255, 255, 0.14); color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); } .store-hero-back-link:hover { background: rgba(255, 255, 255, 0.24); } @media (max-width: 520px) { .store-hero-back-link { position: static; display: inline-flex; margin-bottom: 14px; } } .store-hero .badge { background: rgba(255, 255, 255, 0.16); color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); } .store-hero h1 { margin: 14px 0 6px; font-size: 34px; font-weight: 700; letter-spacing: -0.01em; color: #fff; } .store-hero-meta { font-size: 14px; color: rgba(255, 255, 255, 0.85); display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; } .store-hero-meta svg { width: 14px; height: 14px; } /* ---- Offers strip ---- */ .store-offers { display: flex; gap: 14px; overflow-x: auto; padding: 4px 4px 16px; margin-bottom: 20px; scrollbar-width: thin; } .store-offer-card { flex: none; width: 280px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); } .store-offer-image, .store-offer-image-placeholder { width: 100%; height: 110px; object-fit: cover; display: block; background: linear-gradient(135deg, var(--color-accent-soft), var(--color-warning-soft)); } .store-offer-body { padding: 12px 14px 14px; } .store-offer-title { font-weight: 700; font-size: 14px; color: var(--color-ink); display: flex; align-items: center; gap: 6px; margin: 0 0 4px; } .store-offer-title svg { width: 15px; height: 15px; color: var(--color-warning); flex: none; } .store-offer-description { font-size: 12.5px; color: var(--color-ink-soft); margin: 0; } .store-offer-price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 8px; } .store-offer-price { font-size: 17px; font-weight: 700; color: var(--color-accent); } .store-offer-price-original { font-size: 13px; color: var(--color-ink-soft); text-decoration: line-through; } .store-offer-add-btn { width: 100%; margin-top: 10px; justify-content: center; } /* ---- Category tabs ---- */ .store-category-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; position: sticky; top: 0; background: var(--color-bg); padding: 10px 0; z-index: 5; } .store-category-tab { font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--color-ink-soft); background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--radius-full); padding: 8px 16px; cursor: pointer; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .store-category-tab.active { color: #fff; background: var(--color-primary); border-color: var(--color-primary); } /* ---- Layout + product grid ---- */ .store-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; } @media (max-width: 900px) { .store-layout { grid-template-columns: 1fr; } } .store-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; } .store-product-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; text-align: left; cursor: pointer; box-shadow: var(--shadow-card); transition: box-shadow var(--transition-fast), transform var(--transition-fast); display: flex; flex-direction: column; } .store-product-card:hover { box-shadow: var(--shadow-lift); transform: translateY(-3px); } .store-product-image, .store-product-image-placeholder { width: 100%; height: 150px; object-fit: cover; display: block; background: var(--color-neutral-soft); } .store-product-image-placeholder { display: flex; align-items: center; justify-content: center; color: var(--color-border); } .store-product-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .store-product-name-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .store-product-name { font-weight: 600; font-size: 15px; color: var(--color-ink); } .store-product-description { font-size: 12.5px; color: var(--color-ink-soft); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; flex: 1; } .store-product-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 4px; } .store-product-price { font-weight: 700; font-size: 15px; color: var(--color-accent); } .store-product-add { width: 32px; height: 32px; border-radius: var(--radius-full); border: none; background: var(--color-primary); color: #fff; display: flex; align-items: center; justify-content: center; flex: none; } .store-product-add svg { width: 16px; height: 16px; } /* ---- Marketplace directory (/marketplace) ---- Reuses .store-hero/.store-category-tabs/.store-product-card/ .store-product-* wherever the shape already matches a shop-directory card — the rules below only cover what's genuinely different: the search+distance row in the hero, and a shop card's category/rating/ address/featured-ribbon content. */ .marketplace-hero { padding-bottom: 28px; } .marketplace-search-row { display: flex; gap: 10px; max-width: 560px; margin: 22px auto 0; } .marketplace-search-input-wrap input { border: none; } .marketplace-distance-btn { background: rgba(255, 255, 255, 0.92); flex: none; white-space: nowrap; } .marketplace-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; margin-top: 20px; } .shop-card { position: relative; /* .store-product-card was only ever a