/* ========================================================
ReBox — style.css
Single stylesheet. Styling only — no logic lives here.
RTL, Arabic-first, mobile-first (390px base).
======================================================== */
/* ✅ FIX: font loading moved to +
tags in each page's (see index.html etc). CSS @import blocks the
whole page's render until the imported stylesheet is fetched, and two
sequential @import statements (font + icons) meant the page rendered
nothing at all until BOTH round-trips finished — this was adding a real,
measurable delay to every single page load, not just this one. */
/* ========================================
01. RESET
======================================== */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, ol, li, figure, button, input, select, textarea {
margin: 0; padding: 0; font: inherit;
}
html { -webkit-text-size-adjust: 100%; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { border: none; background: none; cursor: pointer; color: inherit; }
ul, ol { list-style: none; }
input, textarea, select { color: inherit; background: none; }
button:focus-visible, a:focus-visible, input:focus-visible, [tabindex]:focus-visible {
outline: 3px solid var(--rebox-green);
outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}
/* ========================================
02. DESIGN TOKENS
======================================== */
:root {
/* brand accents (used on buttons, selected states, category identity —
not as the dominant page background anymore) */
--rebox-green: #57B35A;
--rebox-coral: #FF6B57;
--rebox-yellow: #FFC247;
--rebox-mint: #A5DDB4;
--rebox-blue: #4A90C2;
--rebox-cream: #FFF6E6;
/* text */
--text-main: #1F2430;
--text-muted: #5F6368; /* Google's classic secondary-text gray */
--text-inverse: #FFFFFF;
/* surfaces — neutral, Google-app style (white content, light-gray page bg) */
--surface-0: #F6F7F9; /* page background */
--surface-1: #FFFFFF; /* cards, sheets */
--surface-2: #F1F3F4; /* subtle panels, hover states */
--surface-sidebar: #FFFFFF;
--border-soft: rgba(31, 36, 48, 0.08);
--border-strong: rgba(31, 36, 48, 0.14);
/* state colors */
--state-success: #57B35A;
--state-warning: #FFC247;
--state-danger: #D93025; /* Google's error red */
--state-info: #4A90C2;
/* radius — Material-leaning: modest on cards/surfaces, pill on buttons/chips */
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 20px;
--radius-pill: 999px;
/* elevation (Material-style layered shadows, not warm/soft ones) */
--elevation-1: 0 1px 2px rgba(31,36,48,0.12), 0 1px 3px rgba(31,36,48,0.08);
--elevation-2: 0 2px 6px rgba(31,36,48,0.10), 0 1px 2px rgba(31,36,48,0.12);
--elevation-3: 0 4px 12px rgba(31,36,48,0.12), 0 2px 4px rgba(31,36,48,0.10);
--elevation-4: 0 8px 24px rgba(31,36,48,0.16), 0 2px 6px rgba(31,36,48,0.10);
--shadow-soft: var(--elevation-1);
--shadow-lift: var(--elevation-3);
/* premium colored shadows — used under brand-colored elements so
depth reads as "glowing accent" rather than generic gray shadow */
--shadow-green: 0 10px 24px -8px rgba(87,179,90,0.45), 0 2px 6px rgba(87,179,90,0.18);
--shadow-coral: 0 10px 24px -8px rgba(255,107,87,0.45), 0 2px 6px rgba(255,107,87,0.18);
--shadow-yellow: 0 10px 24px -8px rgba(255,194,71,0.45), 0 2px 6px rgba(255,194,71,0.18);
--shadow-blue: 0 10px 24px -8px rgba(74,144,194,0.45), 0 2px 6px rgba(74,144,194,0.18);
/* motion */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--dur-fast: 0.15s;
--dur-med: 0.28s;
/* spacing */
--space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-7: 32px;
--space-8: 40px;
/* layout */
--max-width: 480px;
--touch-min: 44px;
--header-h: 64px;
--sticky-bar-h: 88px;
--bottom-nav-h: 68px;
--sidebar-w: 260px;
--sidebar-w-rail: 76px;
}
/* Google Material Symbols — real Google icon font, used everywhere instead of emoji */
.icon {
font-family: 'Material Symbols Rounded';
font-weight: normal;
font-style: normal;
font-size: 22px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
vertical-align: middle;
}
.icon-fill { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.icon-sm { font-size: 18px; }
.icon-lg { font-size: 28px; }
.icon-xl { font-size: 36px; }
.icon-svg.icon-sm { width: 18px; height: 18px; }
.icon-svg.icon-lg { width: 28px; height: 28px; }
.icon-svg.icon-xl { width: 36px; height: 36px; }
/* RTL: Material Symbols draws directional glyphs (arrow/back/forward/etc.)
for LTR reading order — mirror just that subset in an RTL document */
[dir="rtl"] .icon-mirror-rtl { transform: scaleX(-1); }
/* ✅ Lucide-style inline SVG icon set — used in place of the Material
Symbols font on the home page/box chrome. Self-contained SVG (no
external font request), and visually distinct/modern per the new
design direction. currentColor means it inherits whatever color the
surrounding element sets, same as the old icon font did. */
.icon-svg { display: inline-flex; width: 22px; height: 22px; flex-shrink: 0; }
.icon-svg svg { width: 100%; height: 100%; }
.sidebar__link .icon-svg { flex-shrink: 0; }
.bottom-nav__icon.icon-svg { width: 22px; height: 22px; border-radius: var(--radius-pill); padding: 2px 14px; box-sizing: content-box; }
/* ========================================
03. TYPOGRAPHY
======================================== */
html { font-family: 'Noto Sans Arabic', 'Roboto', Arial, sans-serif; }
body { color: var(--text-main); line-height: 1.55; }
h1, h2, h3, h4 { font-weight: 900; color: var(--text-main); line-height: 1.25; letter-spacing: -0.02em; }
h1 { font-size: 30px; }
h2 { font-size: 23px; }
h3 { font-size: 18px; letter-spacing: -0.01em; }
h4 { font-size: 15px; font-weight: 800; letter-spacing: 0; }
.text-muted { color: var(--text-muted); }
.text-sm { font-size: 13px; }
.text-lg { font-size: 18px; }
.font-bold { font-weight: 700; }
.font-black { font-weight: 900; }
/* ========================================
04. GLOBAL
======================================== */
html, body { min-height: 100%; }
body {
background:
radial-gradient(ellipse 900px 500px at 15% -5%, rgba(87,179,90,0.06), transparent 60%),
radial-gradient(ellipse 700px 500px at 105% 15%, rgba(255,194,71,0.07), transparent 60%),
var(--surface-0);
}
.app-shell {
width: 100%;
max-width: var(--max-width);
margin: 0 auto; /* ✅ FIX: was un-centered on wide screens (login/merchant/admin
have no sidebar flex wrapper to center them otherwise —
the card sat flush against one edge with a big empty gap) */
min-height: 100vh;
background: var(--surface-0);
position: relative;
display: flex;
flex-direction: column;
/* ✅ FIX: include the safe-area inset so content clears the FULL rendered
height of the bottom bars on notched phones, not just their base height */
padding-bottom: calc(var(--sticky-bar-h) + var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
}
.app-shell--no-sticky { padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px)); }
.container {
padding: 0 var(--space-5);
}
.section { margin-top: var(--space-7); }
.section:first-of-type { margin-top: var(--space-5); }
/* buttons */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
min-height: var(--touch-min);
padding: 0 var(--space-6);
border-radius: var(--radius-pill);
font-weight: 800;
font-size: 15px;
letter-spacing: -0.01em;
transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), opacity var(--dur-fast) ease, background var(--dur-fast) ease, filter var(--dur-fast) ease;
white-space: nowrap;
position: relative;
}
.btn:active { transform: scale(0.96); }
.btn-block { width: 100%; }
.btn-primary {
background: linear-gradient(155deg, #63c266 0%, var(--rebox-green) 55%, #3f9c46 100%);
color: #fff;
box-shadow: var(--shadow-green);
}
.btn-primary:hover { filter: brightness(1.06); transform: translateY(-1px); box-shadow: 0 14px 28px -8px rgba(87,179,90,0.5), 0 2px 6px rgba(87,179,90,0.2); }
.btn-primary:active { transform: scale(0.96) translateY(0); }
.btn-primary:disabled {
background: #D5DAD5; color: #fff; cursor: not-allowed; box-shadow: none; filter: none; transform: none;
}
.btn-secondary {
background: var(--surface-1);
color: var(--text-main);
border: 1.5px solid var(--border-strong);
box-shadow: var(--elevation-1);
}
.btn-secondary:hover { border-color: var(--rebox-green); background: var(--surface-2); }
.btn-ghost {
background: transparent;
color: var(--text-main);
border: 1.5px solid var(--border-strong);
}
.btn-ghost:hover { background: var(--surface-2); }
.btn-coral { background: linear-gradient(155deg, #ff8a75, var(--rebox-coral) 60%, #e8543e); color: #fff; box-shadow: var(--shadow-coral); }
.btn-danger { background: linear-gradient(155deg, #e8564a, var(--state-danger)); color: #fff; box-shadow: 0 10px 24px -8px rgba(217,48,37,0.4); }
.btn-danger-ghost { background: transparent; color: var(--state-danger); border: 1.5px solid rgba(217,48,37,0.3); }
.btn-danger-ghost:hover { background: rgba(217,48,37,0.06); }
.btn-sm { min-height: var(--touch-min); padding: 0 var(--space-4); font-size: 13px; }
.btn-icon {
width: var(--touch-min); height: var(--touch-min);
border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--surface-1);
border: 1.5px solid var(--border-soft);
box-shadow: var(--elevation-1);
color: var(--text-main);
font-size: 18px;
transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) ease, background var(--dur-fast) ease;
}
.btn-icon:hover { background: var(--surface-2); box-shadow: var(--elevation-2); }
.btn-icon:active { transform: scale(0.92); }
.link { color: var(--rebox-green); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; transition: color var(--dur-fast) ease; }
.link:hover { color: #3f9c46; }
.card {
background: var(--surface-1);
border-radius: var(--radius-lg);
box-shadow: var(--elevation-2);
border: 1px solid var(--border-soft);
padding: var(--space-5);
transition: box-shadow var(--dur-med) var(--ease-out);
}
.badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 11px;
border-radius: var(--radius-pill);
font-size: 12px;
font-weight: 800;
letter-spacing: -0.01em;
}
.badge-green { background: rgba(87,179,90,0.14); color: #3d8a40; box-shadow: inset 0 0 0 1px rgba(87,179,90,0.18); }
.badge-coral { background: rgba(255,107,87,0.14); color: #d94a37; box-shadow: inset 0 0 0 1px rgba(255,107,87,0.18); }
.badge-yellow { background: rgba(255,194,71,0.22); color: #8a6300; box-shadow: inset 0 0 0 1px rgba(255,194,71,0.3); }
.badge-muted { background: rgba(111,120,111,0.12); color: var(--text-muted); }
.divider { height: 1px; background: var(--border-soft); border: none; margin: var(--space-4) 0; }
.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-col { display: flex; flex-direction: column; }
.gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); }
.mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); }
.hidden { display: none !important; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
/* ========================================
05. HEADER
======================================== */
.app-header {
min-height: var(--header-h);
display: flex; align-items: center; justify-content: space-between;
gap: var(--space-3); padding: var(--space-3) var(--space-5);
position: sticky; top: 0; z-index: 20;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
box-shadow: 0 1px 0 var(--border-soft);
direction: rtl;
}
.app-header__brand { display:flex; align-items:center; justify-content:flex-start; min-width:44px; order:1; }
.app-header__logo { height: 40px; width: auto; }
.app-header__context { display:none !important; }
.app-header__actions { display:flex; align-items:center; gap:8px; order:2; direction:ltr; }
.header-points-pill {
position:relative; display:inline-flex; align-items:center; justify-content:center;
width:44px; height:44px; padding:0; border-radius:14px;
background:var(--surface-1); border:1px solid var(--border-soft); color:var(--rebox-green);
box-shadow:var(--elevation-1);
}
.header-points-badge {
position:absolute; top:-5px; right:-5px; min-width:19px; height:19px; padding:0 4px;
display:flex; align-items:center; justify-content:center; border-radius:999px;
background:var(--rebox-green); color:#fff; font-size:10px; font-weight:900;
border:2px solid #fff;
}
/* ========================================
06. REBOX BUILDER
======================================== */
.builder-hero {
position: relative;
text-align: center;
padding: var(--space-3) var(--space-5) var(--space-4);
margin-bottom: var(--space-1);
background: linear-gradient(180deg, var(--rebox-cream) 0%, var(--surface-0) 100%);
overflow: hidden;
animation: hero-fade 0.5s var(--ease-out) both;
}
.builder-hero__blob {
position: absolute; border-radius: 50%; filter: blur(28px);
opacity: 0.35; pointer-events: none; z-index: 0;
}
.builder-hero__blob--1 { width: 100px; height: 100px; background: var(--rebox-mint); top: -20px; inset-inline-start: -20px; }
.builder-hero__blob--2 { width: 80px; height: 80px; background: var(--rebox-yellow); top: 0; inset-inline-end: -10px; opacity: 0.25; }
.builder-hero__eyebrow, .builder-hero__title, .builder-hero__sub { position: relative; z-index: 1; }
@keyframes hero-fade {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.builder-hero__eyebrow {
display: inline-flex; align-items: center; gap: 6px;
color: var(--rebox-green); font-weight: 800; font-size: 13px;
background: rgba(87,179,90,0.14); padding: 4px 14px; border-radius: var(--radius-pill);
box-shadow: inset 0 0 0 1px rgba(87,179,90,0.18);
}
.builder-hero__title { margin-top: var(--space-3); }
.builder-hero__sub { margin-top: var(--space-2); color: var(--text-muted); font-size: 14px; }
/* ✅ segmented progress: 4 distinct pills (one per box slot) instead of a
single generic bar — ties the progress indicator visually to the actual
4-quadrant box, and reads instantly at a glance without the label. */
.progress-track {
display: flex; align-items: center; gap: var(--space-2);
padding: var(--space-4) var(--space-5) 0;
}
.progress-track__bar {
flex: 1; display: flex; gap: 5px;
height: 10px;
}
.progress-track__bar .seg {
flex: 1; height: 100%; border-radius: var(--radius-pill);
background: var(--border-soft);
transition: background 0.35s ease, box-shadow 0.35s ease;
}
.progress-track__bar .seg.is-filled {
background: linear-gradient(90deg, var(--rebox-mint), var(--rebox-green));
box-shadow: 0 0 0 1px rgba(87,179,90,0.15);
}
.progress-track__label { font-weight: 800; font-size: 14px; white-space: nowrap; min-width: 42px; text-align: left; direction: ltr; unicode-bidi: isolate; }
.full-banner {
margin: var(--space-4) var(--space-5) 0;
background: linear-gradient(135deg, #FFF1CE, var(--rebox-cream));
border: 1.5px solid rgba(255,194,71,0.5);
border-radius: var(--radius-md);
padding: var(--space-4);
display: flex; align-items: center; gap: var(--space-3);
animation: pop-in 0.4s ease;
}
.full-banner__icon { font-size: 26px; }
.full-banner__title { font-weight: 800; font-size: 14px; }
.full-banner__sub { font-size: 13px; color: var(--text-muted); }
@keyframes pop-in {
from { opacity: 0; transform: translateY(6px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.order-summary-card { margin: var(--space-6) var(--space-5) 0; }
.summary-row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-1) 0; font-size: 14px; }
.summary-row--total { font-weight: 900; font-size: 17px; padding-top: var(--space-3); border-top: 1px dashed var(--border-strong); margin-top: var(--space-2); }
.summary-row--discount { color: var(--rebox-green); }
.schedule-summary-card { margin: var(--space-4) var(--space-5) 0; }
.schedule-summary-card__row { display: flex; align-items: center; gap: var(--space-3); }
.schedule-summary-card__icon {
width: 40px; height: 40px; border-radius: 50%;
background: var(--rebox-cream); display: flex; align-items: center; justify-content: center;
font-size: 18px;
}
/* sticky CTA bar shared across pages — sits above the mobile bottom-nav */
.sticky-bar {
position: fixed;
/* ✅ FIX: was 'bottom: var(--bottom-nav-h)' — a fixed 68px that ignored
the extra height the bottom-nav gains from its own safe-area padding
on notched phones (iPhone X and later), causing this bar to overlap
the top of the bottom-nav instead of sitting cleanly above it. */
bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
left: 50%; transform: translateX(-50%);
width: 100%; max-width: var(--max-width);
background: rgba(255,255,255,0.92);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
box-shadow: 0 -12px 32px rgba(31,36,48,0.14);
border-top: 1px solid var(--border-soft);
padding: var(--space-3) var(--space-5) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
z-index: 30;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.sticky-bar::before {
content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
width: 56px; height: 4px; border-radius: var(--radius-pill);
background: linear-gradient(90deg, var(--rebox-green), var(--rebox-yellow), var(--rebox-coral));
opacity: 0.7;
}
.sticky-bar__row { display: flex; align-items: center; gap: var(--space-3); }
.sticky-bar__info { flex: 1; min-width: 0; }
.sticky-bar__count { font-size: 12px; color: var(--text-muted); }
.sticky-bar__price { font-size: 17px; font-weight: 900; }
.sticky-bar .btn-primary { box-shadow: 0 6px 16px -4px rgba(87,179,90,0.45); }
/* ========================================
07. REBOX QUADRANTS (the hero element)
======================================== */
.rebox-box-wrap {
padding: var(--space-4) var(--space-5) 0;
animation: hero-rise 0.6s var(--ease-out) both;
}
@keyframes hero-rise {
from { opacity: 0; transform: translateY(16px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.rebox-box {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 12px;
background: linear-gradient(155deg, #F6E9D2 0%, #EDDBBC 55%, #E3CDA3 100%);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: 0 24px 48px -16px rgba(31,36,48,0.28), 0 8px 20px -6px rgba(31,36,48,0.14), inset 0 1px 0 rgba(255,255,255,0.4);
aspect-ratio: 1 / 1;
min-height: 320px;
padding: 12px;
transition: box-shadow var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.rebox-box.is-full {
box-shadow: 0 0 0 3px var(--rebox-yellow), 0 0 32px 4px rgba(255,194,71,0.5), 0 24px 48px -16px rgba(31,36,48,0.28);
animation: box-full-pulse 2.2s var(--ease-out) 1;
}
@keyframes box-full-pulse {
0% { transform: scale(1); }
30% { transform: scale(1.015); }
100% { transform: scale(1); }
}
.rebox-box__ribbon {
position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
font-size: 30px;
z-index: 6;
filter: drop-shadow(0 2px 3px rgba(0,0,0,0.15));
pointer-events: none;
}
.rebox-quadrant {
position: relative;
background: var(--quad-bg, var(--surface-1));
border-radius: var(--radius-lg);
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 6px;
text-align: center;
padding: var(--space-3) var(--space-2);
transition: background var(--dur-med) ease, transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) ease;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -2px 6px rgba(31,36,48,0.05);
}
.rebox-quadrant:hover { transform: scale(1.02); }
.rebox-quadrant:active { transform: scale(0.97); }
.rebox-quadrant:focus-visible { outline-offset: 2px; }
.rebox-quadrant.is-selected {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -2px 6px rgba(31,36,48,0.08), 0 6px 16px -4px var(--quad-text, rgba(31,36,48,0.2));
}
.rebox-quadrant__icon {
font-size: 40px;
line-height: 1;
filter: drop-shadow(0 3px 4px rgba(0,0,0,0.12));
}
.rebox-quadrant__name {
font-weight: 800; font-size: 15px;
color: var(--quad-text, var(--text-main)); /* empty state: dark text on a very light pastel */
}
.rebox-quadrant.is-selected .rebox-quadrant__name {
color: #fff; /* selected state: full-saturation pastel card needs light text */
text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.rebox-quadrant__cta {
font-size: 11px; font-weight: 700;
color: var(--quad-text, var(--text-muted));
background: rgba(255,255,255,0.5);
padding: 3px 10px;
border-radius: var(--radius-pill);
}
.rebox-quadrant__count-badge {
position: absolute; top: 8px; inset-inline-end: 8px;
min-width: 20px; height: 20px; padding: 0 5px;
border-radius: var(--radius-pill);
background: rgba(255,255,255,0.9); color: var(--quad-text, var(--text-main));
font-size: 11px; font-weight: 800;
display: flex; align-items: center; justify-content: center;
}
/* white info-pill holding count + price, matching the reference cards */
.rebox-quadrant__pill {
background: rgba(255,255,255,0.95);
border-radius: var(--radius-md);
padding: 5px 14px;
min-width: 84px;
box-shadow: var(--elevation-1);
}
.rebox-quadrant__count { font-size: 10px; font-weight: 700; color: var(--quad-text, var(--text-muted)); }
.rebox-quadrant__subtotal { font-size: 13px; font-weight: 900; color: var(--quad-text, var(--text-main)); }
.rebox-quadrant__edit {
font-size: 10px; font-weight: 700; color: rgba(255,255,255,0.9);
text-decoration: underline; text-underline-offset: 2px;
}
.rebox-box__center-seal {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 44px; height: 44px; border-radius: 50%;
background: var(--surface-1);
border: 3px solid var(--surface-0);
display: flex; align-items: center; justify-content: center;
font-size: 18px;
box-shadow: var(--shadow-soft);
z-index: 5;
pointer-events: none;
}
/* ========================================
08. PRODUCTS
======================================== */
.category-header {
padding: var(--space-5);
display: flex; align-items: center; gap: var(--space-4);
background: var(--cat-tint, var(--surface-2));
}
.category-header__icon {
width: 56px; height: 56px; border-radius: 50%;
background: rgba(255,255,255,0.85);
display: flex; align-items: center; justify-content: center;
font-size: 28px;
box-shadow: var(--shadow-soft);
}
.category-header__title { font-size: 20px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.15); }
.category-header__sub { font-size: 13px; color: rgba(255,255,255,0.9); margin-top: 2px; }
.product-list {
padding: var(--space-4) var(--space-5);
display: flex; flex-direction: column; gap: var(--space-3);
}
.product-card {
display: flex; align-items: center; gap: var(--space-4);
background: var(--surface-1);
border-radius: var(--radius-lg);
padding: var(--space-4);
box-shadow: var(--elevation-1);
border: 1.5px solid var(--border-soft);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.product-card:hover { box-shadow: var(--elevation-2); }
.product-card.is-added { border-color: var(--rebox-green); box-shadow: 0 0 0 1px var(--rebox-green), var(--elevation-1); }
.product-card__image {
width: 76px; height: 76px; border-radius: var(--radius-md);
background: var(--surface-2);
display: flex; align-items: center; justify-content: center;
font-size: 34px;
flex-shrink: 0;
box-shadow: inset 0 0 0 1px var(--border-soft);
}
.product-card__body { flex: 1; min-width: 0; }
.product-card__name { font-weight: 800; font-size: 14px; }
.product-card__unit { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.product-card__price { font-weight: 800; font-size: 14px; margin-top: 4px; color: var(--cat-price, var(--rebox-green)); }
.product-card__meta { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.product-card__controls { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); flex-shrink: 0; }
.stepper {
display: flex; align-items: center; gap: var(--space-3);
background: var(--surface-2);
border-radius: var(--radius-pill);
padding: 2px;
box-shadow: inset 0 1px 3px rgba(31,36,48,0.08);
}
.stepper__btn {
width: var(--touch-min); height: var(--touch-min); border-radius: 50%;
background: var(--surface-1);
display: flex; align-items: center; justify-content: center;
font-size: 16px; font-weight: 900;
box-shadow: var(--elevation-1);
transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) ease, background var(--dur-fast) ease;
}
.stepper__btn:hover:not(:disabled) { background: var(--rebox-green); color: #fff; }
.stepper__btn:active:not(:disabled) { transform: scale(0.88); }
.stepper__btn:disabled { opacity: 0.4; cursor: not-allowed; }
.stepper__value { min-width: 20px; text-align: center; font-weight: 800; font-size: 14px; }
.add-btn {
min-height: var(--touch-min); padding: 0 var(--space-4);
border-radius: var(--radius-pill);
background: var(--rebox-cream);
border: 1.5px solid var(--rebox-green);
color: var(--rebox-green);
font-weight: 800; font-size: 13px;
}
.add-btn.is-active { background: var(--rebox-green); color: #fff; border-color: var(--rebox-green); }
.products-sticky-bar { }
.products-sticky-bar .sticky-bar__row { justify-content: space-between; }
/* ========================================
09. SCHEDULE
======================================== */
.option-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.option-grid--single { grid-template-columns: 1fr; }
.option-chip {
display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
padding: var(--space-4);
border-radius: var(--radius-md);
background: var(--surface-1);
border: 1.5px solid var(--border-soft);
box-shadow: var(--elevation-1);
text-align: right;
min-height: var(--touch-min);
transition: border-color var(--dur-fast) ease, background var(--dur-fast) ease, box-shadow var(--dur-fast) ease, transform var(--dur-fast) var(--ease-out);
}
.option-chip:hover { transform: translateY(-1px); box-shadow: var(--elevation-2); }
.option-chip__title { font-weight: 800; font-size: 14px; }
.option-chip__sub { font-size: 12px; color: var(--text-muted); }
.option-chip.is-selected {
border-color: var(--rebox-green);
background: linear-gradient(135deg, rgba(87,179,90,0.1), rgba(87,179,90,0.04));
box-shadow: inset 0 0 0 1px var(--rebox-green), var(--elevation-1);
}
.option-chip.is-selected .option-chip__title { color: #3d8a40; }
.weekday-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.weekday-pill {
min-width: 52px; height: 44px; padding: 0 var(--space-3);
border-radius: var(--radius-pill);
background: var(--surface-1);
border: 1.5px solid var(--border-soft);
font-weight: 700; font-size: 13px;
display: flex; align-items: center; justify-content: center;
}
.weekday-pill.is-selected { background: var(--rebox-green); color: #fff; border-color: var(--rebox-green); }
.next-delivery-preview {
display: flex; align-items: center; gap: var(--space-4);
background: var(--rebox-cream);
border-radius: var(--radius-md);
padding: var(--space-4);
}
.next-delivery-preview__icon { font-size: 26px; }
.next-delivery-preview__title { font-weight: 800; font-size: 15px; }
.next-delivery-preview__sub { font-size: 13px; color: var(--text-muted); }
/* ========================================
10. REVIEW
======================================== */
.review-list { display: flex; flex-direction: column; }
.review-list .summary-row { padding: var(--space-2) 0; }
.form-field { display: flex; flex-direction: column; gap: 6px; margin-top: var(--space-4); }
.auth-banner {
height: 120px;
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
background: linear-gradient(135deg, var(--rebox-mint) 0%, var(--rebox-green) 55%, #3d8a40 100%);
display: flex; align-items: center; justify-content: center;
box-shadow: var(--elevation-2);
}
.auth-banner__badge {
width: 88px; height: 88px; border-radius: 50%;
background: var(--surface-1);
display: flex; align-items: center; justify-content: center;
box-shadow: var(--elevation-3);
}
.auth-banner img { height: 32px; }
.form-field label { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.form-field input, .form-field textarea {
min-height: var(--touch-min);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-sm);
border: 1.5px solid var(--border-strong);
background: var(--surface-1);
font-size: 14px;
}
.form-field textarea { min-height: 76px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus { border-color: var(--rebox-green); }
.payment-option {
display: flex; align-items: center; gap: var(--space-3);
padding: var(--space-4);
border-radius: var(--radius-md);
border: 1.5px solid var(--border-strong);
background: var(--surface-1);
cursor: pointer;
transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.payment-option.is-selected { border-color: var(--rebox-green); background: rgba(87,179,90,0.06); }
.payment-option__icon { font-size: 22px; flex-shrink: 0; }
.payment-option__radio {
width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-strong);
margin-inline-start: auto; flex-shrink: 0; position: relative;
}
.payment-option.is-selected .payment-option__radio { border-color: var(--rebox-green); }
.payment-option.is-selected .payment-option__radio::after {
content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--rebox-green);
}
.payment-detail-box {
margin-top: var(--space-2); padding: var(--space-3);
background: var(--rebox-cream); border-radius: var(--radius-sm);
font-size: 13px; font-weight: 700; text-align: center;
}
.benefit-banner {
display: flex; align-items: center; gap: var(--space-3);
background: linear-gradient(135deg, rgba(87,179,90,0.14), rgba(165,221,180,0.25));
border-radius: var(--radius-md);
padding: var(--space-4);
}
/* ========================================
11. ACTIVE REBOX
======================================== */
.status-card {
position: relative;
overflow: hidden;
background: linear-gradient(155deg, #6cc46f 0%, var(--rebox-green) 50%, #38863d 100%);
color: #fff;
border-radius: var(--radius-xl);
padding: var(--space-7) var(--space-5);
box-shadow: var(--shadow-green), inset 0 1px 0 rgba(255,255,255,0.25);
}
.status-card::before {
content: ''; position: absolute; top: -30%; inset-inline-start: -15%;
width: 200px; height: 200px; border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.18), transparent 70%);
pointer-events: none;
}
.status-card__badge {
display: inline-flex; align-items: center; gap: 6px;
background: rgba(255,255,255,0.18);
padding: 4px 12px; border-radius: var(--radius-pill);
font-size: 12px; font-weight: 800;
}
.status-card__title { margin-top: var(--space-3); font-size: 20px; color: #fff; }
.status-card__subtitle { font-size: 13px; opacity: 0.9; margin-top: 4px; }
.status-card__delivery { margin-top: var(--space-4); display: flex; gap: var(--space-4); }
.status-card__delivery-item { flex: 1; }
.status-card__delivery-label { font-size: 12px; opacity: 0.85; }
.status-card__delivery-value { font-size: 15px; font-weight: 800; margin-top: 2px; }
.status-card.is-paused { background: linear-gradient(155deg, #9aa39a, #6f786f); }
.status-card.is-cancelled { background: linear-gradient(155deg, #B7BDB7, #8b938b); }
.box-contents { display: flex; flex-direction: column; gap: var(--space-3); }
.box-contents__row {
display: flex; align-items: center; gap: var(--space-3);
background: var(--surface-1); border-radius: var(--radius-md);
padding: var(--space-3); box-shadow: var(--shadow-soft);
}
.box-contents__icon {
width: 44px; height: 44px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 20px; background: var(--cat-tint, var(--surface-2));
overflow: hidden; flex-shrink: 0;
}
.box-contents__name { font-weight: 800; font-size: 14px; }
.box-contents__meta { font-size: 12px; color: var(--text-muted); }
.box-contents__total {
display: flex; justify-content: space-between; align-items: center;
padding: var(--space-3) var(--space-1) 0;
margin-top: var(--space-1);
border-top: 1.5px dashed var(--border-soft);
font-weight: 800; font-size: 15px;
}
.actions-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.action-tile {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
background: var(--surface-1);
border-radius: var(--radius-md);
padding: var(--space-4);
box-shadow: var(--shadow-soft);
min-height: 84px;
font-weight: 700; font-size: 13px;
text-align: center;
}
.action-tile__icon { font-size: 22px; }
.icon-svg.action-tile__icon { width: 22px; height: 22px; }
.action-tile.is-danger { color: var(--state-danger); }
.danger-link-row {
display: flex; align-items: center; justify-content: center; gap: 6px;
width: 100%; padding: var(--space-3);
border-radius: var(--radius-md);
border: 1.5px solid rgba(217,48,37,0.25);
background: rgba(217,48,37,0.05);
color: var(--state-danger);
font-weight: 700; font-size: 13.5px;
}
.history-list { display: flex; flex-direction: column; gap: var(--space-2); }
.history-row { display: flex; gap: var(--space-3); align-items: flex-start; font-size: 13px; }
.history-row__dot {
width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2);
display: flex; align-items: center; justify-content: center; font-size: 12px;
margin-top: 1px; flex-shrink: 0;
}
.history-row__note { font-weight: 700; }
.history-row__date { color: var(--text-muted); font-size: 12px; }
/* ========================================
12. REWARDS
======================================== */
.points-card {
position: relative;
overflow: hidden;
background: linear-gradient(155deg, #ffd873 0%, var(--rebox-yellow) 45%, #e8952e 100%);
border-radius: var(--radius-xl);
padding: var(--space-7) var(--space-5);
color: #4a3300;
box-shadow: var(--shadow-yellow), inset 0 1px 0 rgba(255,255,255,0.4);
text-align: center;
}
.points-card::before {
content: ''; position: absolute; top: -40%; inset-inline-end: -20%;
width: 220px; height: 220px; border-radius: 50%;
background: radial-gradient(circle, rgba(255,255,255,0.35), transparent 70%);
pointer-events: none;
}
.points-card__value { font-size: 44px; font-weight: 900; letter-spacing: -0.02em; position: relative; }
.points-card__label { font-size: 13px; font-weight: 700; opacity: 0.85; position: relative; }
.points-card__bar {
margin-top: var(--space-4);
height: 10px; border-radius: var(--radius-pill);
background: rgba(255,255,255,0.5); overflow: hidden;
}
.points-card__bar-fill {
height: 100%; background: #4a3300; border-radius: var(--radius-pill);
transition: width 0.4s ease;
}
.points-card__hint { margin-top: var(--space-2); font-size: 12px; }
.ledger-row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-3) 0; border-bottom: 1px solid var(--border-soft); }
.ledger-row:last-child { border-bottom: none; }
.ledger-row__reason { font-weight: 700; font-size: 13px; }
.ledger-row__date { font-size: 12px; color: var(--text-muted); }
.ledger-row__points { font-weight: 900; font-size: 14px; }
.streak-dot {
width: 32px; height: 32px; border-radius: 50%;
background: var(--surface-2); border: 1.5px dashed var(--border-strong);
display: flex; align-items: center; justify-content: center;
font-size: 14px; font-weight: 900; color: #fff;
flex-shrink: 0;
}
.streak-dot.is-filled { background: var(--rebox-green); border-style: solid; border-color: var(--rebox-green); box-shadow: 0 4px 10px -3px rgba(87,179,90,0.5); }
/* ============================================================
IN-PAGE BACK BUTTON (schedule/review) — lives inside the page
content itself, not the shared header.
============================================================ */
.page-top-back {
display: inline-flex; align-items: center; gap: 4px;
padding: 6px 4px; margin-bottom: var(--space-2);
font-weight: 700; font-size: 14px; color: var(--text-main);
flex-shrink: 0;
}
.review-top-bar {
display: flex; align-items: center; gap: var(--space-3);
margin-bottom: var(--space-1);
}
.review-top-bar .page-top-back { margin-bottom: 0; }
.review-top-bar input#boxNameInput {
flex: 1; min-width: 0;
border: 1.5px solid var(--border-strong); border-radius: var(--radius-pill);
padding: 8px var(--space-4); font-size: 13.5px; font-family: inherit;
background: var(--surface-1);
}
.review-top-bar input#boxNameInput:focus { border-color: var(--rebox-green); outline: none; }
.order-success__icon {
font-size: 56px; margin-top: var(--space-3);
animation: success-pop 0.5s var(--ease-out);
}
@keyframes success-pop {
0% { transform: scale(0.5); opacity: 0; }
70% { transform: scale(1.15); }
100% { transform: scale(1); opacity: 1; }
}
.time-picker-row {
display: flex; align-items: center; gap: var(--space-3);
background: var(--surface-1); border-radius: var(--radius-md);
padding: var(--space-4); box-shadow: var(--elevation-1);
}
.time-picker-row .icon-svg { color: var(--rebox-green); flex-shrink: 0; }
.time-picker-row input[type="time"] {
flex: 1; border: none; outline: none; background: transparent;
font-size: 22px; font-weight: 800; font-family: inherit; color: var(--text-main);
direction: ltr; text-align: center;
}
.ledger-row__points.is-positive { color: var(--rebox-green); }
.ledger-row__points.is-negative { color: var(--state-danger); }
.streak-dot {
width: 34px; height: 34px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 15px; font-weight: 800;
background: var(--surface-2); color: var(--text-muted);
}
.streak-dot.is-filled { background: var(--rebox-green); color: #fff; }
/* ========================================
13. MODALS / SHEETS
======================================== */
.sheet-overlay {
position: fixed; inset: 0; background: rgba(20,24,32,0.5);
backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
display: flex; align-items: flex-end; justify-content: center;
z-index: 100; opacity: 0; pointer-events: none;
transition: opacity 0.25s ease;
}
.sheet-overlay.is-open { opacity: 1; pointer-events: auto; }
/* ✅ these can be opened FROM WITHIN another already-open sheet (e.g. the
address sheet opens the location picker) — without a higher z-index,
DOM order would put whichever sheet comes later in the HTML on top,
which isn't reliably "the one that opened last". */
#locationPickerOverlay, #storeLocatorSheetOverlay { z-index: 200; }
/* ============================================================
STORE LOCATOR — production map experience
============================================================ */
.locator-sheet { display: flex; flex-direction: column; }
.locator-search-row { display: flex; gap: var(--space-2); align-items: center; }
.locator-nearest-btn { white-space: nowrap; flex-shrink: 0; }
.locator-map-wrap { position: relative; }
#storeLocatorMap { width: 100%; height: 360px; border-radius: var(--radius-md); background: var(--surface-2); z-index: 1; }
.locator-map-controls {
position: absolute; bottom: var(--space-3); left: var(--space-3);
display: flex; flex-direction: column; gap: 6px; z-index: 400;
}
.locator-map-btn {
width: 38px; height: 38px; border-radius: 50%;
background: var(--surface-1); box-shadow: var(--elevation-2);
display: flex; align-items: center; justify-content: center;
color: var(--text-main); border: none;
}
.locator-map-btn:active { background: var(--surface-2); }
.locator-map-loading {
position: absolute; inset: 0; z-index: 500; border-radius: var(--radius-md);
background: var(--surface-1);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
font-size: 13px; color: var(--text-muted);
}
.locator-spinner {
width: 26px; height: 26px; border-radius: 50%;
border: 3px solid var(--surface-2); border-top-color: var(--rebox-green);
animation: locator-spin 0.7s linear infinite;
}
@keyframes locator-spin { to { transform: rotate(360deg); } }
.locator-map-fallback {
display: flex; align-items: center; justify-content: center; height: 100%;
color: var(--text-muted); font-size: 13px; text-align: center; padding: var(--space-4);
}
/* custom markers — divIcon, styled to match ReBox instead of Leaflet defaults */
.locator-merchant-marker { background: none; border: none; }
.locator-merchant-marker__pin {
width: 34px; height: 34px; border-radius: 50% 50% 50% 0;
background: var(--rebox-green); transform: rotate(45deg);
display: flex; align-items: center; justify-content: center;
box-shadow: var(--elevation-2); border: 2px solid #fff;
font-size: 15px;
}
.locator-merchant-marker__pin span { transform: rotate(-45deg); display: block; }
.locator-user-marker { background: none; border: none; }
.locator-user-marker__dot {
width: 14px; height: 14px; border-radius: 50%; background: #2563eb;
border: 2.5px solid #fff; box-shadow: 0 2px 6px rgba(37,99,235,0.5);
position: absolute; top: 4px; left: 4px; z-index: 2;
}
.locator-user-marker__pulse {
width: 22px; height: 22px; border-radius: 50%; background: rgba(37,99,235,0.25);
position: absolute; top: 0; left: 0; animation: locator-pulse 1.8s ease-out infinite;
}
@keyframes locator-pulse {
0% { transform: scale(0.6); opacity: 0.8; }
100% { transform: scale(1.8); opacity: 0; }
}
.merchant-preview-card {
display: flex; align-items: center; gap: var(--space-3);
background: var(--surface-1); border-radius: var(--radius-md);
padding: var(--space-3); box-shadow: var(--elevation-2);
margin-top: var(--space-3);
animation: preview-card-in 0.25s ease-out;
}
@keyframes preview-card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.merchant-preview-card__avatar {
width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
background: var(--rebox-cream); display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.merchant-preview-card__body { flex: 1; min-width: 0; }
.merchant-preview-card__name { font-weight: 800; font-size: 14px; }
.merchant-preview-card__meta { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
.locator-list-row { transition: background 0.15s ease; }
.locator-list-row.is-selected { background: var(--rebox-cream); box-shadow: inset 3px 0 0 var(--rebox-green); }
.locator-empty-state, .locator-error-state {
text-align: center; padding: var(--space-6) var(--space-4); color: var(--text-muted); font-size: 13.5px;
}
.locator-empty-state p:first-child, .locator-error-state p:first-child { font-weight: 700; color: var(--text-main); margin-bottom: 4px; }
.location-pin-link {
display: inline-flex; align-items: center; gap: 3px;
font-size: 11.5px; font-weight: 700; color: var(--rebox-green);
background: rgba(87,179,90,0.1); padding: 2px 8px; border-radius: var(--radius-pill);
margin-inline-start: 4px; text-decoration: none; white-space: nowrap;
}
.sheet {
width: 100%; max-width: var(--max-width);
background: var(--surface-1);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
padding: var(--space-6) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
transform: translateY(100%);
transition: transform 0.35s var(--ease-out);
box-shadow: 0 -20px 50px rgba(31,36,48,0.25);
}
.sheet-overlay.is-open .sheet { transform: translateY(0); }
.sheet__handle { width: 40px; height: 4px; border-radius: var(--radius-pill); background: var(--border-strong); margin: 0 auto var(--space-4); }
.sheet__title { text-align: center; }
.sheet__body { margin-top: var(--space-3); color: var(--text-muted); font-size: 14px; text-align: center; }
.sheet__actions { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); }
/* camera QR scanner */
.scanner-frame {
position: relative;
width: 100%; aspect-ratio: 1/1;
border-radius: var(--radius-lg);
overflow: hidden;
background: #111;
}
.scanner-frame video { width: 100%; height: 100%; object-fit: cover; }
.scanner-frame__corner {
position: absolute; width: 28px; height: 28px;
border: 3px solid var(--rebox-green);
pointer-events: none;
}
.scanner-frame__corner--tl { top: 14px; inset-inline-start: 14px; border-inline-end: none; border-bottom: none; border-radius: 8px 0 0 0; }
.scanner-frame__corner--tr { top: 14px; inset-inline-end: 14px; border-inline-start: none; border-bottom: none; border-radius: 0 8px 0 0; }
.scanner-frame__corner--bl { bottom: 14px; inset-inline-start: 14px; border-inline-end: none; border-top: none; border-radius: 0 0 0 8px; }
.scanner-frame__corner--br { bottom: 14px; inset-inline-end: 14px; border-inline-start: none; border-top: none; border-radius: 0 0 8px 0; }
/* ========================================
14. STATES
======================================== */
.state-block { padding: var(--space-8) var(--space-6); text-align: center; }
.state-block__icon { font-size: 44px; }
.state-block__title { margin-top: var(--space-3); }
.state-block__sub { margin-top: var(--space-2); color: var(--text-muted); font-size: 14px; }
.stock-badge-out { color: var(--state-danger); }
.stock-badge-low { color: #8a6300; }
/* ============================================================
PRODUCT CARD (category product list) — image/emoji, name,
description, star rating, price, qty stepper.
============================================================ */
.product-item {
display: flex; align-items: center; gap: var(--space-3);
background: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-2) 130%);
border-radius: var(--radius-lg);
padding: var(--space-3);
margin-bottom: var(--space-3);
box-shadow: var(--elevation-1);
transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.product-item:active { transform: scale(0.99); }
.product-item--selected { box-shadow: 0 0 0 2px var(--rebox-green), var(--elevation-2); }
.product-item--out-of-stock { opacity: 0.55; }
.product-item__media {
width: 64px; height: 64px; flex-shrink: 0;
border-radius: var(--radius-md);
background: linear-gradient(160deg, var(--surface-2), #F0EDE8);
display: flex; align-items: center; justify-content: center;
overflow: hidden;
font-size: 32px;
}
.product-item__media img { width: 100%; height: 100%; object-fit: cover; }
.product-item__info { flex: 1; min-width: 0; }
.product-item__name { font-weight: 800; font-size: 15px; color: var(--text-main); }
.product-item__unit { font-size: 12px; color: var(--text-muted); margin-top: 1px; }
.product-item__desc {
font-size: 12px; color: var(--text-muted); margin-top: 3px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.product-item__rating {
display: flex; align-items: center; gap: 4px;
font-size: 12px; color: #C08A00; margin-top: 4px;
}
.product-item__rating .stars { letter-spacing: 1px; }
.product-item__rating .count { color: var(--text-muted); }
.product-item__price { font-weight: 900; font-size: 14px; color: var(--text-main); white-space: nowrap; }
.product-item__actions {
display: flex; align-items: center; gap: var(--space-1);
flex-shrink: 0;
background: var(--surface-2); border-radius: var(--radius-pill);
padding: 3px;
}
.product-item__actions .btn-icon { width: 28px; height: 28px; background: var(--surface-1); box-shadow: var(--elevation-1); }
.product-item__qty { font-weight: 800; min-width: 22px; text-align: center; font-size: 14px; }
.product-item__col { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); flex-shrink: 0; }
.product-search-box {
display: flex; align-items: center; gap: var(--space-2);
background: var(--surface-1); border-radius: var(--radius-pill);
padding: 10px var(--space-4);
box-shadow: var(--elevation-1);
}
.product-search-box input {
border: none; outline: none; background: transparent; flex: 1;
font-size: 14px; font-family: inherit; color: var(--text-main);
}
.product-search-box input::placeholder { color: var(--text-muted); }
/* ============================================================
BOX CARD (بوكساتي list) — name, next delivery date, price
============================================================ */
.box-card {
display: flex; align-items: center; gap: var(--space-3);
background: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-2) 140%);
border-radius: var(--radius-lg);
padding: var(--space-4);
margin-bottom: var(--space-3);
box-shadow: var(--elevation-1);
cursor: pointer;
transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.box-card:hover { transform: scale(1.01); box-shadow: var(--elevation-2); }
.box-card:active { transform: scale(0.98); }
.box-card__icon {
width: 48px; height: 48px; border-radius: var(--radius-md);
background: linear-gradient(160deg, var(--rebox-cream), #FFE9BF);
display: flex; align-items: center; justify-content: center;
font-size: 24px; flex-shrink: 0;
}
.box-card__info { flex: 1; min-width: 0; }
.box-card__name { font-weight: 800; font-size: 15px; color: var(--text-main); }
.box-card__date { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.box-card__price { font-weight: 900; font-size: 15px; color: var(--rebox-green); white-space: nowrap; }
.box-card__chevron { color: var(--text-muted); flex-shrink: 0; }
/* star rating input (rate-products sheet) */
.rate-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) 0; border-bottom: 1px solid var(--border-soft); }
.rate-row:last-child { border-bottom: none; }
.rate-row__name { font-weight: 700; font-size: 14px; }
.rate-row__stars { display: flex; gap: 2px; font-size: 22px; cursor: pointer; user-select: none; }
.rate-row__stars .star { color: var(--border-strong); }
.rate-row__stars .star.is-filled { color: var(--rebox-yellow); }
.rate-row__done { font-size: 11px; color: var(--rebox-green); font-weight: 700; margin-top: 2px; }
/* ============================================================
REWARD CARD (rewards catalog)
============================================================ */
.reward-card {
display: flex; align-items: center; gap: var(--space-3);
background: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-2) 140%);
border-radius: var(--radius-lg);
padding: var(--space-3);
margin-bottom: var(--space-3);
box-shadow: var(--elevation-1);
transition: box-shadow var(--dur-fast) var(--ease-out);
}
.reward-card:hover { box-shadow: var(--elevation-2); }
.reward-card__icon {
width: 52px; height: 52px; border-radius: var(--radius-md);
background: linear-gradient(160deg, var(--rebox-cream), #FFE0DA);
display: flex; align-items: center; justify-content: center;
font-size: 26px; flex-shrink: 0;
}
.reward-card__info { flex: 1; min-width: 0; }
.reward-card__name { font-weight: 800; font-size: 14px; }
.reward-card__desc { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.reward-card__cost { font-size: 12px; font-weight: 700; color: #8a6300; margin-top: 4px; }
.reward-card__btn { flex-shrink: 0; }
/* ============================================================
CATALOG (browse-all-products page)
============================================================ */
.catalog-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3);
}
.catalog-card {
background: linear-gradient(180deg, var(--surface-1) 0%, var(--surface-2) 140%);
border-radius: var(--radius-lg);
box-shadow: var(--elevation-1);
overflow: hidden;
cursor: pointer;
transition: box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.catalog-card:hover { box-shadow: var(--elevation-2); transform: translateY(-2px); }
.catalog-card:active { transform: scale(0.98); }
.catalog-card__media {
width: 100%; aspect-ratio: 1; background: var(--surface-2);
display: flex; align-items: center; justify-content: center; font-size: 40px; overflow: hidden;
}
.catalog-card__media img { width: 100%; height: 100%; object-fit: cover; }
.catalog-card__body { padding: var(--space-3); }
.catalog-card__name { font-weight: 800; font-size: 13.5px; line-height: 1.35; min-height: 2.7em; }
.catalog-card__price { font-weight: 900; font-size: 14px; color: var(--rebox-green); margin-top: 4px; }
.catalog-card__price del { color: var(--text-muted); font-weight: 600; font-size: 11px; margin-inline-end: 4px; }
.catalog-card__merchant {
display: flex; align-items: center; gap: 4px;
font-size: 11px; color: var(--text-muted); margin-top: 6px;
padding-top: 6px; border-top: 1px dashed var(--border-soft);
}
.catalog-card__rating { display: flex; align-items: center; gap: 3px; font-size: 11px; color: #8a6300; margin-top: 3px; }
/* ---- detail sheet ---- */
.catalog-detail__media {
width: 100%; aspect-ratio: 4/3; background: var(--surface-2); border-radius: var(--radius-md);
display: flex; align-items: center; justify-content: center; font-size: 72px; overflow: hidden;
}
.catalog-detail__media img { width: 100%; height: 100%; object-fit: cover; }
.catalog-detail__merchant-card {
display: flex; align-items: center; gap: var(--space-3);
background: var(--surface-2); border-radius: var(--radius-md); padding: var(--space-3);
margin-top: var(--space-3);
}
.catalog-detail__merchant-avatar {
width: 44px; height: 44px; border-radius: 50%; background: var(--rebox-cream);
display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; overflow: hidden;
}
.catalog-detail__merchant-avatar img { width: 100%; height: 100%; object-fit: cover; }
.star-rate-row { display: flex; gap: 4px; font-size: 28px; cursor: pointer; justify-content: center; margin: var(--space-3) 0; }
.star-rate-row .star { color: var(--border-strong); transition: color 0.1s ease; }
.star-rate-row .star.is-filled { color: var(--rebox-yellow); }
/* empty box slot — no category chosen yet for this box position */
.rebox-quadrant--empty {
background: var(--surface-2);
border: 2px dashed var(--border-strong);
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: var(--space-2);
}
.rebox-quadrant--empty .rebox-quadrant__icon { font-size: 28px; opacity: 0.5; }
.rebox-quadrant--empty .rebox-quadrant__cta {
background: var(--surface-1); color: var(--text-muted); box-shadow: var(--elevation-1);
}
.rebox-quadrant__change {
position: absolute; top: 8px; inset-inline-start: 8px;
width: 22px; height: 22px; border-radius: 50%;
background: rgba(255,255,255,0.9);
display: flex; align-items: center; justify-content: center;
font-size: 12px;
}
/* category picker sheet grid */
.category-picker-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);
}
.category-picker-item {
display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
padding: var(--space-3) var(--space-2);
border-radius: var(--radius-md);
background: var(--surface-2);
text-align: center;
cursor: pointer;
}
.category-picker-item__icon { font-size: 26px; }
.category-picker-item__name { font-size: 11px; font-weight: 700; line-height: 1.3; }
.category-picker-item.is-taken { opacity: 0.35; pointer-events: none; }
.toast {
position: fixed;
/* ✅ FIX: account for the safe-area inset so the toast doesn't creep
down into the sticky-bar on notched phones. */
bottom: calc(var(--sticky-bar-h) + env(safe-area-inset-bottom, 0px) + 12px);
left: 50%; transform: translateX(-50%) translateY(10px);
background: var(--text-main); color: #fff;
padding: 10px 20px; border-radius: var(--radius-pill);
font-size: 13px; font-weight: 700;
box-shadow: var(--shadow-lift);
z-index: 200; opacity: 0; pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.skeleton {
background: linear-gradient(90deg, var(--border-soft) 25%, var(--surface-2) 37%, var(--border-soft) 63%);
background-size: 400% 100%;
animation: skeleton-loading 1.4s ease infinite;
border-radius: var(--radius-sm);
}
@keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.error-banner {
display: flex; align-items: center; gap: var(--space-3);
background: rgba(226,76,61,0.08);
border: 1.5px solid rgba(226,76,61,0.25);
border-radius: var(--radius-md);
padding: var(--space-4);
color: #a3392c;
font-size: 13px;
}
/* ========================================
15. RESPONSIVE — customer navigation
Mobile: bottom navigation. Tablet/Desktop: fixed RIGHT sidebar.
======================================== */
.app-layout { display:block; width:100%; min-height:100vh; }
.sidebar {
display:none; flex-direction:column; width:var(--sidebar-w-rail);
background:var(--surface-sidebar); border-inline-start:1px solid var(--border-soft);
padding:var(--space-4) var(--space-2);
position:fixed; inset-inline-end:0; top:0; bottom:0; height:100vh;
overflow:hidden; z-index:50; box-shadow:-8px 0 28px rgba(31,36,48,.05);
}
.sidebar__nav { display:flex; flex-direction:column; gap:8px; width:100%; height:100%; }
.sidebar__link {
display:flex; align-items:center; gap:12px; min-height:48px; padding:10px 12px;
border-radius:14px; color:var(--text-muted); font-weight:800; font-size:14px;
justify-content:center; transition:background .18s ease,color .18s ease,transform .18s ease;
}
.sidebar__link .icon-svg { flex-shrink:0; }
.sidebar__link-label { display:none; white-space:nowrap; }
.sidebar__link--active, .sidebar__link.is-active {
background:linear-gradient(135deg,rgba(87,179,90,.16),rgba(87,179,90,.07));
color:var(--rebox-green); box-shadow:inset 0 0 0 1px rgba(87,179,90,.18);
}
.sidebar__link:hover { background:var(--surface-2); color:var(--text-main); transform:translateX(-2px); }
[dir="rtl"] .sidebar__link:hover { transform:translateX(2px); }
@media (min-width:768px) {
.bottom-nav { display:none; }
.sidebar { display:flex; }
.app-layout { width:100%; }
.app-layout .app-shell { width:calc(100% - var(--sidebar-w-rail)); margin-inline-end:var(--sidebar-w-rail); min-width:0; max-width:none; padding-bottom:var(--sticky-bar-h); }
.app-header { width:100%; }
.sticky-bar { left:0; right:var(--sidebar-w-rail); transform:none; max-width:none; width:auto; border-radius:0; }
.sticky-bar__row { max-width:860px; margin:0 auto; }
.container { max-width:900px; margin:0 auto; }
.rebox-box-wrap { max-width:900px; margin:0 auto; padding-inline:var(--space-6); }
.product-list { max-width:900px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }
.option-grid { grid-template-columns:repeat(3,1fr); }
.actions-grid { grid-template-columns:repeat(3,1fr); }
.rebox-box { max-width:500px; margin:0 auto; }
.sheet-overlay { justify-content:center; align-items:center; }
.sheet { max-width:520px; border-radius:var(--radius-lg); }
}
@media (min-width:1024px) {
.sidebar { width:var(--sidebar-w); padding:var(--space-5) var(--space-3); }
.sidebar__link { justify-content:flex-start; padding:11px 14px; }
.sidebar__link-label { display:inline; }
.app-layout .app-shell { width:calc(100% - var(--sidebar-w)); margin-inline-end:var(--sidebar-w); }
.sticky-bar { right:var(--sidebar-w); }
.sticky-bar__row { max-width:1000px; }
.container { max-width:1040px; }
.rebox-box-wrap { max-width:1040px; }
.product-list { max-width:1040px; grid-template-columns:repeat(3,1fr); }
}
@media (min-width:1280px) {
.container,.rebox-box-wrap,.product-list { max-width:1120px; }
.product-list { grid-template-columns:repeat(4,1fr); }
}
@media (max-width:767px) {
.app-header { padding-inline:12px; }
.app-header__logo { height:36px; }
.app-header__actions { gap:6px; }
.header-points-pill,.app-header .btn-icon { width:42px; height:42px; }
}
/* ========================================
16. ADMIN (admin.html only)
======================================== */
.admin-shell { max-width: 900px; }
.admin-shell.app-shell--no-sticky { padding-bottom: var(--space-6); } /* no customer bottom-nav on merchant/admin pages */
/* ============================================================
MERCHANT / ADMIN — dashboard-with-sidebar layout
============================================================ */
.merchant-header { padding-left: var(--space-6); padding-right: var(--space-6); }
.merchant-header__logo { height: 34px; }
.merchant-header__title { font-size: 15px; font-weight: 800; color: var(--text-muted); border-inline-start: 1.5px solid var(--border-soft); padding-inline-start: var(--space-3); margin-inline-start: var(--space-3); }
.merchant-layout { display: block; }
.merchant-sidebar {
display: flex; gap: var(--space-2);
overflow-x: auto; -webkit-overflow-scrolling: touch;
padding: var(--space-3) var(--space-5);
scrollbar-width: none;
}
.merchant-sidebar::-webkit-scrollbar { display: none; }
.merchant-sidebar__item {
display: flex; align-items: center; gap: 8px;
white-space: nowrap; flex-shrink: 0;
padding: 10px 16px; border-radius: var(--radius-md);
font-weight: 700; font-size: 14px; color: var(--text-muted);
transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.merchant-sidebar__item:hover { background: var(--surface-2); color: var(--text-main); }
.merchant-sidebar__item.is-active { background: var(--rebox-green); color: #fff; box-shadow: 0 6px 16px -6px rgba(87,179,90,0.5); }
.merchant-sidebar__item.is-active .icon-svg { color: #fff; }
/* ============================================================
ADMIN THEME — deliberately distinct from the merchant's green
dashboard, so it's visually unmistakable this is a different,
more authoritative control panel (accounts/moderation, not a
storefront).
====================================
/* Customer locator */
.locator-sheet { width:min(94vw,760px); max-height:min(92vh,860px); overflow:auto; }
.locator-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.locator-toolbar { display:grid; grid-template-columns:1fr auto auto; gap:8px; margin-top:12px; }
.locator-toolbar input { min-width:0; height:44px; padding:0 14px; border:1px solid var(--border-soft); border-radius:12px; background:var(--surface-2); outline:none; }
.locator-map-wrap { position:relative; margin-top:12px; border-radius:16px; overflow:hidden; border:1px solid var(--border-soft); background:#eef3f0; }
.locator-map { height:360px; width:100%; }
.locator-map-loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.78); backdrop-filter:blur(4px); z-index:500; font-weight:800; }
.locator-map-loading.hidden { display:none; }
.locator-list-head { display:flex; align-items:center; justify-content:space-between; margin-top:14px; }
.locator-list { display:grid; gap:8px; margin-top:8px; max-height:210px; overflow:auto; }
.locator-list-row.is-selected { border-color:rgba(87,179,90,.45); background:rgba(87,179,90,.06); }
.locator-preview { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; padding:12px; border:1px solid rgba(87,179,90,.2); border-radius:14px; background:rgba(87,179,90,.06); }
.locator-merchant-marker { background:transparent; border:0; }
.locator-merchant-marker__pin { width:34px; height:34px; display:flex; align-items:center; justify-content:center; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--rebox-green); border:3px solid #fff; box-shadow:0 5px 14px rgba(31,36,48,.2); }
.locator-merchant-marker__pin span { transform:rotate(45deg); font-size:16px; }
.locator-user-marker { background:transparent; border:0; }
.locator-user-marker__dot { position:absolute; left:5px; top:5px; width:12px; height:12px; border-radius:50%; background:#2678d9; border:2px solid #fff; z-index:2; }
.locator-user-marker__pulse { width:22px; height:22px; border-radius:50%; background:rgba(38,120,217,.18); border:1px solid rgba(38,120,217,.35); animation:locatorPulse 1.8s infinite; }
@keyframes locatorPulse { 0%,100%{transform:scale(.85);opacity:.7} 50%{transform:scale(1.15);opacity:.35} }
@media(max-width:520px){ .locator-toolbar{grid-template-columns:1fr 1fr}.locator-toolbar input{grid-column:1/-1}.locator-map{height:300px}.locator-sheet{width:100%;max-height:94vh} }
======================== */
.admin-header { border-bottom: 3px solid var(--admin-navy, #1e2a4a); }
.admin-theme .merchant-sidebar__item.is-active,
#adminTabs .admin-tab.is-active {
background: var(--admin-navy, #1e2a4a) !important;
color: #fff !important;
box-shadow: 0 6px 16px -6px rgba(30,42,74,0.5) !important;
}
#adminTabs .admin-tab.is-active .icon-svg { color: #fff !important; }
.admin-badge {
display: inline-flex; align-items: center; gap: 4px;
background: var(--admin-navy, #1e2a4a); color: #fff;
font-size: 11px; font-weight: 800; padding: 3px 12px;
border-radius: var(--radius-pill); letter-spacing: 0.3px;
}
.merchant-main { padding: var(--space-2) var(--space-5) var(--space-8); }
.merchant-panel { display: none; }
.merchant-panel.is-active { display: block; animation: panel-in 0.3s var(--ease-out); }
.merchant-panel__title { margin-bottom: var(--space-4); }
@keyframes panel-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@media (min-width: 900px) {
.merchant-header { padding-left: var(--space-8); padding-right: var(--space-8); }
.merchant-header__logo { height: 40px; }
.merchant-layout { display: flex; align-items: flex-start; gap: 0; }
.merchant-sidebar {
flex-direction: column; overflow-x: visible;
width: 220px; flex-shrink: 0;
padding: var(--space-6) var(--space-4);
position: sticky; top: 0;
border-inline-start: 1px solid var(--border-soft);
min-height: calc(100vh - 64px);
}
.merchant-sidebar__item { width: 100%; }
.merchant-sidebar__item--link { margin-top: auto; color: var(--text-muted); }
.merchant-main { flex: 1; min-width: 0; padding: var(--space-6) var(--space-8); }
}
/* ============================================================
PROFILE INFO CARD (merchant/admin dashboard) — photo, name,
store info, and a live-ticking clock.
============================================================ */
.profile-info-card {
display: flex; align-items: center; gap: var(--space-4);
background: linear-gradient(135deg, var(--rebox-green) 0%, #3a8a3d 100%);
color: #fff;
border-radius: var(--radius-lg);
padding: var(--space-5);
margin-bottom: var(--space-5);
box-shadow: 0 12px 28px -10px rgba(87,179,90,0.5);
flex-wrap: wrap;
}
.profile-info-card__avatar {
width: 64px; height: 64px; border-radius: 50%;
background: rgba(255,255,255,0.2);
display: flex; align-items: center; justify-content: center;
overflow: hidden; flex-shrink: 0;
border: 2.5px solid rgba(255,255,255,0.5);
}
.profile-info-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-info-card__body { flex: 1; min-width: 160px; }
.profile-info-card__name { font-size: 18px; font-weight: 800; }
.profile-info-card__role {
display: inline-block; font-size: 11px; font-weight: 700;
background: rgba(255,255,255,0.22); padding: 2px 10px; border-radius: var(--radius-pill);
margin-top: 4px;
}
.profile-info-card__meta { font-size: 12.5px; opacity: 0.9; margin-top: 4px; }
.profile-info-card__clock { text-align: center; flex-shrink: 0; }
.profile-info-card__time { font-size: 22px; font-weight: 900; direction: ltr; font-variant-numeric: tabular-nums; }
.profile-info-card__date { font-size: 12px; opacity: 0.9; margin-top: 2px; }
/* ============================================================
PROFILE HERO CARD (merchant/admin 'الملف الشخصي' page)
============================================================ */
.profile-hero-card {
display: flex; flex-direction: column; align-items: center; text-align: center;
background: linear-gradient(160deg, var(--rebox-cream) 0%, var(--surface-0) 100%);
border-radius: var(--radius-lg);
padding: var(--space-6) var(--space-5);
box-shadow: var(--elevation-1);
}
.profile-hero-card__avatar-wrap { position: relative; }
.profile-hero-card__avatar {
width: 88px; height: 88px; border-radius: 50%;
background: var(--surface-1);
display: flex; align-items: center; justify-content: center;
color: var(--text-muted);
border: 3px solid var(--surface-1);
box-shadow: var(--elevation-2);
overflow: hidden;
}
.profile-hero-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.profile-hero-card__avatar-edit {
position: absolute; bottom: 0; left: 0;
width: 30px; height: 30px; border-radius: 50%;
background: var(--rebox-green); color: #fff;
display: flex; align-items: center; justify-content: center;
border: 3px solid var(--surface-0);
cursor: pointer;
}
.profile-hero-card__name { font-size: 18px; font-weight: 800; margin-top: var(--space-3); }
.profile-hero-card__role {
display: inline-block; font-size: 12px; font-weight: 700; color: var(--rebox-green);
background: rgba(87,179,90,0.12); padding: 3px 14px; border-radius: var(--radius-pill);
margin-top: 6px;
}
.admin-tabs {
display: flex; overflow-x: auto; gap: var(--space-2);
padding: 0 var(--space-5) var(--space-3);
scrollbar-width: none;
}
.admin-tabs::-webkit-scrollbar { display: none; }
.admin-tab {
flex-shrink: 0; padding: 8px 16px;
border-radius: var(--radius-pill);
background: var(--surface-1); border: 1.5px solid var(--border-soft);
font-weight: 700; font-size: 13px; white-space: nowrap;
}
.admin-tab.is-active { background: var(--text-main); color: #fff; border-color: var(--text-main); }
.admin-panel { display: none; padding: var(--space-2) var(--space-5) var(--space-8); }
.admin-panel.is-active { display: block; }
.admin-row {
display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
background: var(--surface-1); border-radius: var(--radius-md);
padding: var(--space-3) var(--space-4); box-shadow: var(--shadow-soft);
margin-bottom: var(--space-3);
}
.admin-row__main { flex: 1; min-width: 0; }
.admin-row__title { font-weight: 800; font-size: 14px; }
.admin-row__sub { font-size: 12px; color: var(--text-muted); }
.admin-row__controls { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.admin-row__controls input[type="number"], .admin-row__controls input[type="text"] {
width: 84px; min-height: 36px; padding: 0 var(--space-2);
border-radius: var(--radius-sm); border: 1.5px solid var(--border-strong);
font-size: 13px; text-align: center;
}
.admin-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.admin-stat { background: var(--surface-1); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-soft); }
.admin-stat__value { font-size: 24px; font-weight: 900; }
.admin-stat__label { font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.switch {
position: relative; width: 44px; height: 26px; border-radius: var(--radius-pill);
background: var(--border-strong); flex-shrink: 0; transition: background 0.2s ease;
}
.switch::after {
content: ''; position: absolute; top: 3px; inset-inline-start: 3px;
width: 20px; height: 20px; border-radius: 50%; background: #fff;
transition: inset-inline-start 0.2s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.switch.is-on { background: var(--rebox-green); }
.switch.is-on::after { inset-inline-start: 21px; }
/* ============================================================
REBOX V4 — CUSTOMER MAP PAGE / RIGHT SIDEBAR
============================================================ */
.customer-map-page{padding:24px 0 110px;min-height:calc(100vh - 80px)}
.map-page__hero{max-width:1180px;margin:0 auto 18px;padding:0 20px;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.map-page__hero h1{margin:5px 0 6px;font-size:clamp(26px,3vw,40px);font-weight:900;letter-spacing:-.7px;color:var(--text-main)}
.map-page__hero p{margin:0;color:var(--text-muted);font-size:14px;line-height:1.8}
.map-page__locate{white-space:nowrap;min-width:150px}
.map-page__grid{max-width:1180px;margin:auto;padding:0 20px;display:grid;grid-template-columns:350px minmax(0,1fr);gap:18px;direction:ltr}
.map-page__panel,.map-page__visual{direction:rtl}
.map-page__panel{padding:18px;min-height:650px}
.map-panel__top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.map-panel__top h2{margin:4px 0 0;font-size:20px;font-weight:900}
.map-live-pill{font-size:11px;font-weight:800;padding:7px 10px;border-radius:999px;background:rgba(87,179,90,.1);color:var(--rebox-green);white-space:nowrap}
.map-live-pill i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--rebox-green);margin-left:5px;box-shadow:0 0 0 4px rgba(87,179,90,.12)}
.map-nearest-card{display:flex;align-items:center;gap:12px;padding:14px;border-radius:18px;background:linear-gradient(135deg,rgba(87,179,90,.12),rgba(87,179,90,.035));border:1px solid rgba(87,179,90,.18);margin-bottom:10px}
.map-nearest-card__icon{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:#fff;box-shadow:0 6px 18px rgba(31,36,48,.08);font-size:21px}
.map-nearest-card__body{min-width:0;display:flex;flex-direction:column;gap:3px}
.map-nearest-card__body strong{font-size:14px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.map-nearest-card__body span{font-size:11px;color:var(--text-muted)}
.map-search-wrap{height:46px;margin-top:12px;border:1px solid var(--border-soft);border-radius:14px;background:var(--surface-2);display:flex;align-items:center;gap:8px;padding:0 12px}
.map-search-wrap .icon-svg{color:var(--text-muted)}
.map-search-wrap input{border:0;outline:0;background:transparent;min-width:0;width:100%;font:inherit;color:var(--text-main)}
.map-list-head{display:flex;align-items:center;justify-content:space-between;margin:16px 0 8px}
.map-list-head strong{font-size:13px;font-weight:900}
.map-merchant-list{display:grid;gap:8px;max-height:405px;overflow:auto;padding-left:2px}
.map-merchant-item{display:flex;align-items:center;gap:10px;padding:11px;border:1px solid var(--border-soft);border-radius:15px;background:#fff;cursor:pointer;transition:.18s ease;box-shadow:0 3px 12px rgba(31,36,48,.025)}
.map-merchant-item:hover,.map-merchant-item.is-selected{border-color:rgba(87,179,90,.38);background:rgba(87,179,90,.045);transform:translateY(-1px)}
.map-merchant-item__pin{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:12px;background:rgba(87,179,90,.11);font-size:18px}
.map-merchant-item__body{min-width:0;flex:1}.map-merchant-item__name{font-size:12px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.map-merchant-item__meta{font-size:10px;color:var(--text-muted);margin-top:3px}.map-merchant-item__distance{font-size:11px;font-weight:900;color:var(--rebox-green);white-space:nowrap}
.map-page__visual{padding:10px;overflow:hidden;min-width:0}
.map-visual__toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 5px 10px}
.map-visual__status{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:var(--text-muted)}
.map-status-dot{width:8px;height:8px;border-radius:50%;background:var(--rebox-green);box-shadow:0 0 0 5px rgba(87,179,90,.11)}
.google-map-frame{position:relative;min-height:610px;height:calc(100vh - 235px);max-height:760px;border-radius:20px;overflow:hidden;background:#e8eeeb}
.google-map-canvas,.google-map-embed{position:absolute;inset:0;width:100%;height:100%;border:0}
.google-map-embed{display:block}.google-map-embed.hidden{display:none}
.google-map-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:9px;background:rgba(255,255,255,.72);backdrop-filter:blur(3px);font-size:13px;font-weight:800;z-index:5;transition:opacity .2s}.google-map-loading.hidden{opacity:0;pointer-events:none}
.map-spinner{width:18px;height:18px;border:2px solid rgba(31,36,48,.16);border-top-color:var(--rebox-green);border-radius:50%;animation:mapspin .7s linear infinite}@keyframes mapspin{to{transform:rotate(360deg)}}
.map-legend{display:flex;gap:18px;align-items:center;flex-wrap:wrap;padding:10px 5px 3px;color:var(--text-muted);font-size:10px;font-weight:800}.legend-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-left:5px}.legend-dot--merchant{background:#57b35a}.legend-dot--user{background:#287bd8}.legend-dot--nearest{background:#f0a33a}
.rebox-google-marker{width:38px;height:38px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);display:grid;place-items:center;background:#57b35a;border:3px solid #fff;box-shadow:0 5px 16px rgba(31,36,48,.22)}
.rebox-google-marker span{transform:rotate(45deg);font-size:17px}.rebox-google-marker.is-nearest{background:#f0a33a;transform:rotate(-45deg) scale(1.12)}
.rebox-user-marker{width:20px;height:20px;border-radius:50%;background:#287bd8;border:4px solid #fff;box-shadow:0 0 0 8px rgba(40,123,216,.18),0 4px 14px rgba(31,36,48,.22)}
@media (min-width:768px){
:root{--sidebar-w-rail:82px}
.sidebar{inset-inline-end:0!important;inset-inline-start:auto!important;right:0!important;left:auto!important;border-inline-start:1px solid var(--border-soft);border-inline-end:0;box-shadow:-8px 0 30px rgba(31,36,48,.06)}
.app-layout .app-shell{margin-inline-end:var(--sidebar-w-rail)!important;margin-inline-start:0!important;width:calc(100% - var(--sidebar-w-rail))!important}
.sticky-bar{right:var(--sidebar-w-rail)!important;left:0!important}
}
@media (min-width:1024px){
:root{--sidebar-w:270px}
.sidebar{width:var(--sidebar-w)!important;padding:22px 14px!important}
.sidebar__link{justify-content:flex-start!important;padding:12px 15px!important}
.sidebar__link-label{display:inline!important}
.app-layout .app-shell{margin-inline-end:var(--sidebar-w)!important;width:calc(100% - var(--sidebar-w))!important}
.sticky-bar{right:var(--sidebar-w)!important}
}
@media (max-width:767px){
.customer-map-page{padding-top:14px}.map-page__hero{padding:0 14px;align-items:stretch;flex-direction:column}.map-page__hero h1{font-size:28px}.map-page__locate{width:100%}
.map-page__grid{display:flex;flex-direction:column;padding:0 14px}.map-page__panel{order:2;min-height:auto}.map-page__visual{order:1}.google-map-frame{height:52vh;min-height:360px}.map-merchant-list{max-height:330px}
}
/* ============================================================
ReBox V5 — CUSTOMER NAVIGATION / MOBILE POLISH
============================================================ */
.bottom-nav{
position:fixed;
inset-inline:0;
bottom:0;
z-index:60;
display:grid;
grid-template-columns:repeat(5,minmax(0,1fr));
align-items:stretch;
min-height:72px;
padding:7px 10px calc(7px + env(safe-area-inset-bottom,0px));
background:rgba(255,255,255,.96);
border-top:1px solid rgba(31,36,48,.08);
box-shadow:0 -10px 30px rgba(31,36,48,.10);
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
direction:rtl;
}
.bottom-nav__item{
position:relative;
min-width:0;
min-height:58px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:4px;
padding:5px 3px;
border-radius:16px;
color:#70757d;
font-size:10px;
font-weight:800;
line-height:1.2;
transition:transform .18s var(--ease-out),color .18s ease,background .18s ease;
}
.bottom-nav__item:active{transform:scale(.96)}
.bottom-nav__icon.icon-svg{
width:23px;height:23px;padding:0;box-sizing:border-box;
}
.bottom-nav__item--active,
.bottom-nav__item.is-active{
color:var(--rebox-green);
background:rgba(87,179,90,.09);
}
.bottom-nav__item--active::after,
.bottom-nav__item.is-active::after{
content:'';
position:absolute;
top:2px;
width:24px;height:3px;
border-radius:999px;
background:linear-gradient(90deg,var(--rebox-green),var(--rebox-yellow),var(--rebox-coral));
}
/* Notification drawer — contained, layered and touch friendly */
.notif-panel-overlay{
position:fixed;inset:0;z-index:100;
display:flex;justify-content:flex-start;align-items:stretch;
background:rgba(15,20,27,.32);
opacity:0;visibility:hidden;pointer-events:none;
transition:opacity .2s ease,visibility .2s ease;
direction:rtl;
}
.notif-panel-overlay.is-open{opacity:1;visibility:visible;pointer-events:auto}
.notif-panel{
width:min(430px,100%);
margin-inline-start:auto;
height:100%;
background:rgba(255,255,255,.98);
box-shadow:-16px 0 40px rgba(31,36,48,.18);
transform:translateX(24px);
transition:transform .28s var(--ease-out);
display:flex;flex-direction:column;
padding-top:env(safe-area-inset-top,0px);
}
.notif-panel-overlay.is-open .notif-panel{transform:translateX(0)}
.notif-panel__header{
min-height:70px;display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:14px 16px;border-bottom:1px solid var(--border-soft);
background:rgba(255,255,255,.94);
}
.notif-panel__header h3{font-size:19px}
.notif-panel__body{flex:1;overflow:auto;padding:12px 14px 24px}
.notif-row{
display:flex;gap:10px;align-items:flex-start;
padding:14px;border:1px solid var(--border-soft);border-radius:16px;
background:#fff;margin-bottom:9px;cursor:pointer;
transition:background .18s ease,border-color .18s ease,transform .18s ease;
}
.notif-row:hover{background:var(--surface-2);transform:translateY(-1px)}
.notif-row.is-unread{border-color:rgba(87,179,90,.25);background:rgba(87,179,90,.055)}
.notif-row__dot{width:9px;height:9px;flex:0 0 9px;border-radius:50%;background:transparent;margin-top:6px}
.notif-row.is-unread .notif-row__dot{background:var(--rebox-green);box-shadow:0 0 0 5px rgba(87,179,90,.12)}
.notif-row__title{font-weight:900;font-size:13px}
.notif-row__body{font-size:12px;color:var(--text-muted);line-height:1.7;margin-top:3px}
.notif-row__time{font-size:10px;color:#8a9098;margin-top:7px}
/* Header stays visually identical across mobile/tablet/desktop: logo RIGHT,
utility actions LEFT. */
.app-header{z-index:70}
.app-header__brand{order:1;margin-inline-start:auto}
.app-header__actions{order:2;margin-inline-end:auto}
/* Tablet + desktop: the customer rail is ALWAYS on the RIGHT. */
@media (min-width:768px){
.sidebar{right:0!important;left:auto!important;inset-inline-end:0!important;inset-inline-start:auto!important}
.app-layout .app-shell{margin-right:var(--sidebar-w-rail)!important;margin-left:0!important;width:calc(100% - var(--sidebar-w-rail))!important}
.sticky-bar{right:var(--sidebar-w-rail)!important;left:0!important}
}
@media (min-width:1024px){
.app-layout .app-shell{margin-right:var(--sidebar-w)!important;width:calc(100% - var(--sidebar-w))!important}
.sticky-bar{right:var(--sidebar-w)!important}
}
/* Mobile nav needs real width allocation; never allow the SVG padding from
legacy builds to make the five items overflow the viewport. */
@media (max-width:767px){
.bottom-nav{display:grid}
.app-shell{max-width:none;width:100%;padding-bottom:calc(var(--sticky-bar-h) + 82px + env(safe-area-inset-bottom,0px))}
.app-shell--no-sticky{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))}
.sticky-bar{width:100%;left:0;right:0;transform:none;border-radius:18px 18px 0 0}
.app-header{min-height:66px;padding:10px 14px}
.app-header__logo{height:38px}
.app-header__actions{gap:7px}
.header-points-pill,.app-header .btn-icon{width:42px;height:42px}
.notif-panel{width:100%;max-width:430px}
}
/* ============================================================
ReBox V5 — MAP PAGE
============================================================ */
.customer-map-page{
padding:18px 0 36px;
min-height:calc(100vh - var(--header-h));
}
.map-page__hero{
max-width:1180px;margin:0 auto 16px;padding:0 20px;
display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.map-page__hero h1{font-size:clamp(27px,3vw,40px);margin:4px 0 5px}
.map-page__hero p{font-size:13px;color:var(--text-muted);line-height:1.8;max-width:680px}
.map-page__hero .eyebrow{display:inline-flex}
.map-page__locate{min-width:170px;box-shadow:var(--shadow-green)}
.map-page__grid{
max-width:1180px;margin:0 auto;padding:0 20px;
display:grid;grid-template-columns:minmax(0,1.55fr) minmax(320px,.8fr);
gap:16px;direction:ltr;
}
.map-page__visual,.map-page__panel{direction:rtl}
.map-page__visual{order:1;padding:10px;border-radius:22px}
.map-page__panel{order:2;padding:16px;min-height:0;border-radius:22px}
.map-panel__top{margin-bottom:12px}
.map-panel__top h2{font-size:20px}
.map-nearest-card{margin-bottom:10px;padding:13px;border-radius:17px}
.map-nearest-card__icon{width:46px;height:46px}
.map-search-wrap{height:48px;background:#f7f8fa;border-radius:15px}
.map-merchant-list{max-height:430px;gap:8px}
.map-merchant-item{min-height:70px;padding:10px 11px;border-radius:16px}
.map-merchant-item__pin{width:40px;height:40px;flex-basis:40px}
.map-merchant-item__distance{font-size:12px}
.google-map-frame{height:min(68vh,700px);min-height:430px;border-radius:18px}
.map-legend{padding:10px 6px 2px}
.map-empty-state{padding:22px;text-align:center;color:var(--text-muted);background:var(--surface-2);border-radius:16px;font-size:12px}
@media (max-width:1023px) and (min-width:768px){
.map-page__grid{grid-template-columns:1fr;}
.map-page__visual{order:1}.map-page__panel{order:2}
.google-map-frame{height:58vh;min-height:420px}
}
@media (max-width:767px){
.customer-map-page{padding:14px 0 22px}
.map-page__hero{padding:0 14px;flex-direction:column;align-items:stretch;gap:12px}
.map-page__hero h1{font-size:29px}
.map-page__hero p{font-size:12px}
.map-page__locate{width:100%;height:50px}
.map-page__grid{display:flex;flex-direction:column;padding:0 12px;gap:12px}
.map-page__visual{order:1;padding:7px}
.map-page__panel{order:2;padding:13px}
.google-map-frame{height:54vh;min-height:340px;max-height:560px}
.map-merchant-list{max-height:none}
.map-merchant-item{min-height:72px}
}
/* ============================================================
ReBox Customer V6 — Builder Flow + Splash + Box Polish
============================================================ */
:root{
--rebox-green:#57B35A;
--rebox-green-deep:#3f9945;
--rebox-yellow:#F2B84B;
--rebox-coral:#E87563;
--builder-cream:#F8E8C8;
}
/* Intro / splash — premium, lightweight, first-paint experience. */
.rebox-splash{
position:fixed;inset:0;z-index:99999;display:grid;place-items:center;
overflow:hidden;background:
radial-gradient(circle at 50% 46%,rgba(87,179,90,.08),transparent 25%),
radial-gradient(circle at 50% 55%,rgba(242,184,75,.06),transparent 38%),
#fff;
opacity:1;visibility:visible;pointer-events:auto;
transition:opacity .48s cubic-bezier(.22,.8,.2,1),visibility .48s;
isolation:isolate;
}
.rebox-splash::before{
content:"";position:absolute;width:min(52vw,360px);height:min(52vw,360px);
border-radius:50%;background:rgba(87,179,90,.07);filter:blur(34px);
opacity:0;transform:scale(.65);transition:opacity .8s ease,transform 1.1s cubic-bezier(.2,.8,.2,1);
}
.rebox-splash.is-visible::before{opacity:1;transform:scale(1)}
.rebox-splash.is-leaving{opacity:0;visibility:hidden;pointer-events:none}
.rebox-splash__brand{
position:relative;z-index:2;display:flex;align-items:center;justify-content:center;
direction:ltr;font-family:Roboto,"Noto Sans Arabic",sans-serif;font-weight:900;
font-size:clamp(58px,13vw,110px);letter-spacing:-5px;line-height:1;
filter:drop-shadow(0 10px 28px rgba(31,36,48,.10));
}
.rebox-splash__brand span{
display:block;opacity:0;transform:translate3d(var(--intro-x),var(--intro-y),0) scale(.72) rotate(var(--intro-r));
filter:blur(7px);
transition:transform .92s cubic-bezier(.16,1,.3,1),opacity .45s ease,filter .72s ease;
will-change:transform,opacity,filter;
}
.rebox-splash__brand span:nth-child(1){--intro-x:-155px;--intro-y:-34px;--intro-r:-12deg;color:#67B85C;transition-delay:.02s}
.rebox-splash__brand span:nth-child(2){--intro-x:-82px;--intro-y:32px;--intro-r:9deg;color:#E96E61;transition-delay:.07s}
.rebox-splash__brand span:nth-child(3){--intro-x:0;--intro-y:-42px;--intro-r:-8deg;color:#F1B844;transition-delay:.12s}
.rebox-splash__brand span:nth-child(4){--intro-x:82px;--intro-y:30px;--intro-r:10deg;color:#67B85C;transition-delay:.17s}
.rebox-splash__brand span:nth-child(5){--intro-x:155px;--intro-y:-28px;--intro-r:-11deg;color:#E96E61;transition-delay:.22s}
.rebox-splash.is-visible .rebox-splash__brand span{
opacity:1;transform:translate3d(0,0,0) scale(1) rotate(0);filter:blur(0);
}
.rebox-splash__brand::after{
content:"";position:absolute;left:50%;top:50%;width:12px;height:12px;border-radius:50%;
background:#67B85C;box-shadow:0 0 0 0 rgba(103,184,92,.28);
transform:translate(-50%,-50%) scale(.2);opacity:0;z-index:-1;
transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .35s ease,box-shadow .9s ease;
}
.rebox-splash.is-visible .rebox-splash__brand::after{
opacity:.18;transform:translate(-50%,-50%) scale(18);box-shadow:0 0 0 18px rgba(103,184,92,.03);
}
@media (max-width:520px){
.rebox-splash__brand{font-size:clamp(54px,20vw,82px);letter-spacing:-4px}
.rebox-splash__brand span:nth-child(1){--intro-x:-92px;--intro-y:-28px}
.rebox-splash__brand span:nth-child(2){--intro-x:-48px;--intro-y:25px}
.rebox-splash__brand span:nth-child(3){--intro-y:-32px}
.rebox-splash__brand span:nth-child(4){--intro-x:48px;--intro-y:24px}
.rebox-splash__brand span:nth-child(5){--intro-x:92px;--intro-y:-24px}
}
/* Sticky builder actions: reset + primary CTA without crowding small phones. */
.sticky-bar__actions{display:flex;align-items:center;gap:8px;min-width:0}
.sticky-reset-btn{display:inline-flex!important;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
/* Box: stronger depth, cleaner quadrants, and a clear progression cue. */
.rebox-box-wrap{perspective:1100px}
.rebox-box{
position:relative;overflow:visible!important;
background:linear-gradient(145deg,#f9e9ca 0%,#f4dfb5 100%)!important;
border:1px solid rgba(190,151,76,.22)!important;
box-shadow:0 24px 60px rgba(39,48,61,.13),0 4px 12px rgba(39,48,61,.08)!important;
transform:translateZ(0);transition:box-shadow .35s ease,transform .35s ease;
}
.rebox-box::before{
content:"";position:absolute;inset:10px;border-radius:inherit;pointer-events:none;
border:1px solid rgba(255,255,255,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
}
.rebox-quadrant{
transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s ease,filter .28s ease!important;
}
.rebox-quadrant:hover{transform:translateY(-3px);filter:saturate(1.03);box-shadow:0 14px 30px rgba(31,36,48,.10)!important}
.rebox-quadrant--empty{
background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(244,246,247,.9))!important;
border:2px dashed rgba(130,137,145,.30)!important;
}
.rebox-quadrant--empty .rebox-quadrant__icon{font-size:34px!important;color:#7f8790;opacity:.72}
.rebox-quadrant__cta{font-weight:900!important}
.rebox-quadrant.is-selected{animation:slotSelected .55s cubic-bezier(.2,.8,.2,1)}
.box-slot-next{animation:slotNext 1s ease-in-out 2!important;box-shadow:0 0 0 4px rgba(87,179,90,.18),0 18px 34px rgba(87,179,90,.18)!important}
.box-flow-success{animation:boxFlowSuccess .65s cubic-bezier(.2,.8,.2,1)}
@keyframes slotSelected{0%{transform:scale(.97);opacity:.65}65%{transform:scale(1.015)}100%{transform:scale(1)}}
@keyframes slotNext{50%{transform:translateY(-3px) scale(1.015);filter:saturate(1.08)}}
@keyframes boxFlowSuccess{50%{transform:translateY(-4px) scale(1.006);box-shadow:0 28px 68px rgba(87,179,90,.18),0 5px 14px rgba(39,48,61,.08)!important}}
/* Center seal: premium green bow/ribbon. */
.rebox-box__center-seal{
background:#fff!important;color:var(--rebox-green)!important;
border:4px solid rgba(87,179,90,.12)!important;
box-shadow:0 10px 24px rgba(39,48,61,.15),0 0 0 5px rgba(255,255,255,.7)!important;
z-index:5!important;
}
.rebox-box__center-seal .icon-svg{width:30px;height:30px;display:block}
.rebox-box__center-seal .icon-svg svg{display:none}
.rebox-box__center-seal::before,
.rebox-box__center-seal::after{
content:"";position:absolute;top:50%;width:15px;height:11px;
background:var(--rebox-green);border-radius:3px 9px 3px 9px;
transform-origin:50% 50%;
}
.rebox-box__center-seal::before{right:50%;transform:translateY(-50%) rotate(25deg) skewX(-10deg)}
.rebox-box__center-seal::after{left:50%;transform:translateY(-50%) rotate(-25deg) skewX(10deg)}
/* Category picker: less cramped and more tactile. */
.category-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:12px!important}
.category-picker-item{
min-height:94px;padding:14px!important;border:1px solid var(--border-soft);
background:linear-gradient(145deg,#fff,#f7f8f8)!important;
box-shadow:0 5px 18px rgba(31,36,48,.06);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease!important;
}
.category-picker-item:hover{transform:translateY(-2px);border-color:rgba(87,179,90,.35);box-shadow:0 10px 24px rgba(87,179,90,.12)}
.category-picker-item__icon{font-size:34px!important}
.category-picker-item__name{font-size:13px!important}
/* Map layout: it must live inside the same app-shell as the rest of the customer UI. */
.customer-map-page{padding:24px 0 44px!important;min-height:calc(100vh - var(--header-h) - 20px)!important;background:linear-gradient(180deg,#f7f8f9 0%,#f3f5f6 100%)}
.map-page__hero{max-width:1180px!important;padding:0 22px!important;align-items:flex-end!important}
.map-page__hero h1{font-weight:900!important;letter-spacing:-1px}
.map-page__grid{max-width:1180px!important;grid-template-columns:minmax(300px,360px) minmax(0,1fr)!important;gap:18px!important;direction:rtl!important}
.map-page__panel{order:1}.map-page__visual{order:2}
.google-map-frame{height:560px!important;border-radius:24px!important;overflow:hidden!important;background:#eaf0ec}
.map-page__visual,.map-page__panel{border-radius:24px!important;box-shadow:0 12px 34px rgba(31,36,48,.08)!important}
.map-merchant-list{max-height:420px!important}
.map-merchant-item{border-radius:16px!important;margin-bottom:8px!important;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important}
.map-merchant-item:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(31,36,48,.08)}
/* Responsive sticky actions. */
@media (max-width:520px){
.sticky-bar__actions{gap:6px}
.sticky-reset-btn{width:48px!important;height:48px!important;padding:0!important;border-radius:16px!important}
.sticky-reset-btn span:last-child{display:none}
.sticky-bar__info{min-width:0}
.sticky-bar__info .sticky-bar__count{font-size:11px}
.sticky-bar__info .sticky-bar__price{font-size:17px}
.sticky-bar .btn-primary{min-width:128px}
.rebox-box-wrap{padding-inline:12px!important}
.rebox-box{border-radius:24px!important}
.rebox-quadrant{border-radius:18px!important}
.customer-map-page{padding-top:16px!important}
.map-page__hero{padding:0 14px!important}
.map-page__grid{padding:0 12px!important;grid-template-columns:1fr!important}
.map-page__visual{order:1}.map-page__panel{order:2}
.google-map-frame{height:430px!important;min-height:0!important}
.map-page__hero h1{font-size:30px!important;line-height:1.2}
.map-page__hero p{font-size:13px!important}
}
@media (min-width:768px){
.app-layout .app-shell{min-height:100vh}
.sidebar{top:0!important;bottom:0!important;height:100dvh!important}
}
@media (prefers-reduced-motion:reduce){
.rebox-splash,.rebox-splash__brand,.rebox-splash__brand span,.rebox-splash::before,.rebox-splash__brand::after,.rebox-quadrant,.box-slot-next,.box-flow-success{animation:none!important;transition:none!important}
.rebox-splash__brand span{opacity:1;transform:none;filter:none}
}
/* ============================================================
MERCHANT V2 — unified responsive design
UI only: does not alter data/RLS/RPC behavior.
============================================================ */
.merchant-header{
direction:rtl;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
min-height:72px;
padding:12px 20px;
background:rgba(255,255,255,.96);
border-bottom:1px solid var(--border-soft);
box-shadow:0 2px 14px rgba(31,36,48,.05);
position:relative;
z-index:50;
}
.merchant-header__brand{display:flex;align-items:center;gap:12px;min-width:0}
.merchant-header__logo{width:auto;height:38px;object-fit:contain}
.merchant-header__title{max-width:240px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.merchant-header__actions{display:flex;align-items:center;gap:8px}
.merchant-header .btn-icon{position:relative;width:42px;height:42px;border-radius:12px;background:var(--surface-2);transition:.18s ease}
.merchant-header .btn-icon:hover{transform:translateY(-1px);background:#e9edf0}
.merchant-header .notif-badge{position:absolute;top:-3px;left:-3px;min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:var(--state-danger);color:#fff;font:800 11px/19px Roboto,sans-serif;text-align:center;border:2px solid #fff}
.merchant-layout{display:block;min-height:calc(100vh - 72px)}
.merchant-main{min-width:0}
.merchant-sidebar{
background:var(--surface-sidebar);
border:0;
box-shadow:0 10px 30px rgba(31,36,48,.06);
z-index:40;
}
.merchant-sidebar__item{position:relative;min-height:46px;border:1px solid transparent}
.merchant-sidebar__item .icon{font-family:'Material Symbols Rounded';font-size:21px;line-height:1}
.merchant-sidebar__item .badge{margin-inline-start:auto}
.merchant-sidebar__item.is-active{background:linear-gradient(90deg,var(--rebox-green),#4aa64e);color:#fff}
.merchant-sidebar__item.is-active .icon{color:#fff}
.merchant-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px}
.merchant-section-head .merchant-panel__title{margin:0}
.merchant-box-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.merchant-box-card{
background:var(--surface-1);border:1px solid var(--border-soft);border-radius:18px;padding:18px;
box-shadow:0 7px 24px rgba(31,36,48,.06);transition:transform .2s ease,box-shadow .2s ease;
}
.merchant-box-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(31,36,48,.1)}
.merchant-box-card__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.merchant-box-icon{width:44px;height:44px;border-radius:14px;background:rgba(87,179,90,.1);color:var(--rebox-green);display:grid;place-items:center}
.merchant-box-card h3{margin:14px 0 6px;font-size:17px}
.merchant-box-card__meta{display:flex;justify-content:space-between;gap:10px;margin:14px 0;color:var(--text-muted);font-size:12px}
.merchant-empty-state,.merchant-loading{
min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
background:var(--surface-1);border:1px dashed var(--border-strong);border-radius:18px;padding:24px;color:var(--text-muted)
}
.merchant-empty-state .icon{font-family:'Material Symbols Rounded';font-size:44px;color:var(--rebox-green);margin-bottom:10px}
.merchant-empty-state strong{color:var(--text-main);font-size:16px}
.merchant-empty-state p{font-size:13px;margin-top:5px}
.merchant-loading{min-height:160px}
.merchant-notifications-list{display:grid;gap:10px;max-width:900px}
.merchant-notif-card{
position:relative;width:100%;display:flex;align-items:flex-start;gap:13px;text-align:right;
padding:16px;border:1px solid var(--border-soft);border-radius:16px;background:#fff;
transition:.18s ease;cursor:pointer;
}
.merchant-notif-card:hover{background:var(--surface-2);transform:translateY(-1px)}
.merchant-notif-card.is-unread{border-color:rgba(87,179,90,.28);background:rgba(87,179,90,.045)}
.merchant-notif-card__icon{width:42px;height:42px;flex:0 0 42px;border-radius:13px;background:rgba(87,179,90,.1);color:var(--rebox-green);display:grid;place-items:center}
.merchant-notif-card__icon .icon,.merchant-notif-card__content{display:block}
.merchant-notif-card__content{min-width:0;flex:1}
.merchant-notif-card__content strong{display:block;font-size:14px;margin-bottom:4px}
.merchant-notif-card__content span{display:block;color:var(--text-muted);font-size:13px;line-height:1.65}
.merchant-notif-card__content small{display:block;color:#8a9199;font-size:11px;margin-top:7px}
.merchant-notif-card__dot{width:8px;height:8px;border-radius:50%;background:var(--rebox-green);margin-top:7px;box-shadow:0 0 0 5px rgba(87,179,90,.1)}
@media (min-width: 900px){
.merchant-layout{display:block}
.merchant-sidebar{
position:fixed;top:72px;right:0;bottom:0;width:248px;
min-height:0;height:calc(100vh - 72px);overflow-y:auto;overflow-x:hidden;
padding:20px 14px;
border-left:1px solid var(--border-soft);
}
.merchant-main{margin-right:248px;padding:28px 34px;min-height:calc(100vh - 72px)}
}
@media (max-width: 899px){
.merchant-header{min-height:64px;padding:10px 14px}
.merchant-header__logo{height:32px}
.merchant-header__title{display:none}
.merchant-layout{position:relative}
.merchant-sidebar{
position:fixed;top:64px;right:0;bottom:0;width:min(300px,88vw);
height:calc(100vh - 64px);padding:16px 12px;overflow:auto;
flex-direction:column;transform:translateX(105%);transition:transform .25s var(--ease-out);
box-shadow:-12px 0 35px rgba(31,36,48,.14);
}
.merchant-sidebar.is-open{transform:translateX(0)}
.merchant-sidebar__item{width:100%;flex-shrink:0}
.merchant-main{padding:20px 14px}
.merchant-box-grid{grid-template-columns:1fr}
.merchant-section-head{align-items:center}
}
@media (min-width:600px) and (max-width:899px){
.merchant-main{padding:24px}
.merchant-box-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:420px){
.merchant-header__actions{gap:5px}
.merchant-header .btn-icon{width:39px;height:39px}
.merchant-section-head{flex-direction:column}
}
/* ============================================================
MERCHANT DASHBOARD / FINANCIAL CENTER — V3
Same current ReBox visual language, with the richer dashboard
composition requested for the merchant experience.
============================================================ */
.merchant-dashboard-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:20px}
.merchant-dashboard-head .merchant-panel__title{font-size:28px}
.merchant-dashboard-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.merchant-dashboard-stats .admin-stat{min-height:108px;display:flex;flex-direction:column;justify-content:center;border:1px solid var(--border-soft);border-radius:18px;background:var(--surface-1);box-shadow:0 7px 24px rgba(31,36,48,.055);position:relative;overflow:hidden}
.merchant-dashboard-stats .admin-stat:before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:4px;background:var(--rebox-green);opacity:.9}
.merchant-dashboard-stats .admin-stat__value{font-size:30px;line-height:1.1}
.merchant-dashboard-stats .admin-stat__label{font-size:12px;margin-top:8px}
.merchant-dashboard-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(320px,.85fr);gap:16px}
.merchant-dashboard-grid--lower{grid-template-columns:minmax(0,1.35fr) minmax(320px,.85fr)}
.merchant-dashboard-card{background:var(--surface-1);border:1px solid var(--border-soft);border-radius:20px;padding:18px;box-shadow:0 7px 24px rgba(31,36,48,.055);min-width:0}
.merchant-dashboard-card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.merchant-dashboard-card__head h3{margin:3px 0 0;font-size:18px}
.dashboard-mini-notif{display:flex;gap:11px;align-items:flex-start;padding:12px;border-bottom:1px solid var(--border-soft)}
.dashboard-mini-notif:last-child{border-bottom:0}
.dashboard-mini-notif>.icon{font-family:'Material Symbols Rounded';color:var(--rebox-green);font-size:21px;margin-top:1px}
.dashboard-mini-notif div{min-width:0}.dashboard-mini-notif strong{display:block;font-size:13px}.dashboard-mini-notif small{display:block;color:var(--text-muted);font-size:11px;line-height:1.6;margin-top:3px}
.dashboard-mini-notif.is-unread{background:rgba(87,179,90,.045);border-radius:12px}
.dashboard-sales-chart{min-height:225px;display:flex;align-items:flex-end}
.dashboard-chart-bars{width:100%;height:190px;display:flex;align-items:flex-end;gap:12px;padding:20px 4px 0;border-bottom:1px solid var(--border-soft)}
.dashboard-chart-col{height:100%;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:6px;min-width:0}
.dashboard-chart-col span{font-size:9px;color:var(--text-muted);white-space:nowrap;overflow:hidden;max-width:100%;text-overflow:ellipsis}
.dashboard-chart-col i{display:block;width:min(42px,72%);min-height:5px;border-radius:9px 9px 3px 3px;background:linear-gradient(180deg,var(--rebox-green),rgba(87,179,90,.35));box-shadow:0 5px 15px rgba(87,179,90,.13)}
.dashboard-chart-col small{font-size:10px;color:var(--text-muted)}
.finance-range-row{display:flex;justify-content:flex-start;overflow:auto;padding-bottom:2px}
.finance-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.finance-stat{min-height:112px;padding:16px;display:flex;align-items:center;gap:12px;border:1px solid var(--border-soft);border-radius:18px;background:var(--surface-1);box-shadow:0 7px 24px rgba(31,36,48,.05);position:relative;overflow:hidden}
.finance-stat:after{content:"";position:absolute;inset-inline-end:-22px;bottom:-28px;width:80px;height:80px;border-radius:50%;background:rgba(87,179,90,.05)}
.finance-stat__icon{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:rgba(87,179,90,.10);color:var(--rebox-green);font-family:'Material Symbols Rounded';font-size:23px;flex:0 0 44px}
.finance-stat__value{font-size:23px;font-weight:900;line-height:1.15}.finance-stat__label{font-size:11px;color:var(--text-muted);margin-top:5px}.finance-stat__trend{position:absolute;top:12px;left:12px;font-size:10px;color:var(--rebox-green);direction:ltr}
.finance-stat--expense .finance-stat__icon{color:var(--state-danger);background:rgba(226,99,99,.08)}
.finance-stat--profit .finance-stat__icon{background:rgba(87,179,90,.15)}
.finance-stat--orders .finance-stat__icon{color:#287bd8;background:rgba(40,123,216,.09)}
.finance-main-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,.7fr);gap:16px;align-items:start}
.finance-card{background:var(--surface-1);border:1px solid var(--border-soft);border-radius:20px;padding:18px;box-shadow:0 7px 24px rgba(31,36,48,.055);min-width:0}
.finance-card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}.finance-card__head h3{margin:3px 0 0;font-size:18px}
.finance-card__badge{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;padding:7px 10px;border-radius:999px;background:rgba(87,179,90,.08);color:var(--rebox-green);font-size:10px;font-weight:900}
.finance-orders-table-wrap{overflow:auto;border:1px solid var(--border-soft);border-radius:14px}
.finance-orders-table{width:100%;min-width:760px;border-collapse:collapse}.finance-orders-table th,.finance-orders-table td{padding:12px 10px;text-align:right;border-bottom:1px solid var(--border-soft);font-size:11px;white-space:nowrap}.finance-orders-table th{font-size:10px;color:var(--text-muted);background:var(--surface-2);font-weight:900}.finance-orders-table tr:last-child td{border-bottom:0}.finance-orders-table td small{display:block;color:var(--text-muted);font-size:9px;margin-top:3px}.finance-orders-table .is-positive{color:var(--rebox-green)}.finance-orders-table .is-negative{color:var(--state-danger)}
.finance-order-status{display:inline-flex;padding:5px 8px;border-radius:999px;background:var(--surface-2);font-weight:800;color:var(--text-muted)}
.finance-breakdown-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px;border-radius:14px;background:var(--surface-2);margin-bottom:18px}.finance-breakdown-summary div{display:flex;flex-direction:column;gap:5px}.finance-breakdown-summary span{font-size:10px;color:var(--text-muted)}.finance-breakdown-summary strong{font-size:18px}.finance-breakdown-summary strong.is-negative{color:var(--state-danger)}
.finance-bar-row{margin-bottom:15px}.finance-bar-row__top{display:flex;justify-content:space-between;gap:10px;font-size:10px;margin-bottom:6px}.finance-bar-row__top span{color:var(--text-muted)}.finance-bar{height:8px;border-radius:99px;background:var(--surface-2);overflow:hidden}.finance-bar i{display:block;height:100%;min-width:3px;border-radius:99px;background:var(--rebox-green)}.finance-bar--expense{background:var(--state-danger)!important}.finance-bar--discount{background:#f0a33a!important}.finance-bar--delivery{background:#287bd8!important}.finance-bar--profit{background:var(--rebox-green)!important}
.finance-empty{padding:30px 15px;text-align:center;color:var(--text-muted);font-size:12px}.finance-expenses-list{display:grid;gap:8px}.finance-expense-row{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid var(--border-soft);border-radius:14px}.finance-expense-row__icon{width:38px;height:38px;display:grid;place-items:center;border-radius:11px;background:rgba(226,99,99,.08);color:var(--state-danger);font-family:'Material Symbols Rounded';flex:0 0 38px}.finance-expense-row__main{min-width:0;flex:1}.finance-expense-row__main strong{display:block;font-size:12px}.finance-expense-row__main small{display:block;color:var(--text-muted);font-size:10px;margin-top:3px}.finance-expense-row__amount{font-size:12px;color:var(--state-danger);white-space:nowrap}
@media (min-width:900px){
.merchant-main{padding:28px 34px 44px}
}
@media (max-width:1100px){
.merchant-dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.finance-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.finance-main-grid,.merchant-dashboard-grid,.merchant-dashboard-grid--lower{grid-template-columns:1fr}
}
@media (max-width:899px){
.merchant-dashboard-head{align-items:flex-start}.merchant-dashboard-head .merchant-panel__title{font-size:24px}
.merchant-dashboard-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.finance-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
.merchant-dashboard-head{flex-direction:column}.merchant-dashboard-stats,.finance-stat-grid{grid-template-columns:1fr 1fr;gap:9px}.merchant-dashboard-stats .admin-stat{min-height:96px;padding:13px}.merchant-dashboard-stats .admin-stat__value{font-size:24px}.finance-stat{min-height:96px;padding:12px}.finance-stat__icon{width:38px;height:38px;flex-basis:38px;font-size:20px}.finance-stat__value{font-size:18px}.finance-card{padding:13px;border-radius:17px}.finance-card__head{align-items:flex-start}.finance-card__head h3{font-size:16px}.finance-range-row .admin-tabs{max-width:100%;overflow:auto}.merchant-section-head{gap:10px}
}
/* ============================================================
MERCHANT POLISH V4 — header / products / settings / queue
UI-only overrides. Existing IDs, RPCs and event contracts stay intact.
============================================================ */
.merchant-header{height:78px;min-height:78px;padding:10px 28px;background:rgba(255,255,255,.985);border-bottom:1px solid rgba(31,36,48,.07);box-shadow:0 3px 18px rgba(31,36,48,.055);position:sticky;top:0;z-index:100}
.merchant-header__brand{order:1;margin-inline-start:0;display:flex;align-items:center;gap:14px;flex:1;justify-content:flex-start}
.merchant-header__logo{height:42px;width:auto;display:block}
.merchant-header__title{order:-1;font-size:15px;font-weight:900;color:var(--text-main);border-inline-start:1px solid var(--border-strong);padding-inline-start:16px;max-width:280px}
.merchant-header__actions{order:2;margin-inline-start:auto;margin-inline-end:0;display:flex;gap:9px}
.merchant-header .btn-icon{width:44px;height:44px;border-radius:14px;background:#f7f8f9;border:1px solid rgba(31,36,48,.08);box-shadow:0 3px 8px rgba(31,36,48,.07)}
.merchant-header .btn-icon:hover{background:#fff;border-color:rgba(87,179,90,.35);color:var(--rebox-green);transform:translateY(-1px)}
.merchant-layout{min-height:calc(100vh - 78px)}
.merchant-sidebar{background:linear-gradient(180deg,#fff 0%,#fbfcfb 100%);box-shadow:-10px 0 30px rgba(31,36,48,.045);border-left:1px solid rgba(31,36,48,.07)}
.merchant-sidebar__item{min-height:52px;margin:4px 0;border-radius:15px;font-size:14px;font-weight:800;transition:background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease}
.merchant-sidebar__item:hover{background:#f4f8f4;transform:translateX(-2px)}
.merchant-sidebar__item.is-active{background:linear-gradient(135deg,#62bc65,#4cae52);box-shadow:0 8px 18px rgba(87,179,90,.22)}
@media (min-width:900px){.merchant-sidebar{top:78px;height:calc(100vh - 78px)}.merchant-main{margin-right:248px;padding:34px 42px 56px;max-width:none}}
.merchant-panel{animation:merchantPanelIn .28s ease both}
@keyframes merchantPanelIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.merchant-section-head{margin-bottom:24px;align-items:flex-end}
.merchant-section-head .btn{flex-shrink:0}
.merchant-products-toolbar,.merchant-queue-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 16px;padding:8px;background:#fff;border:1px solid var(--border-soft);border-radius:18px;box-shadow:0 5px 18px rgba(31,36,48,.045)}
.merchant-products-tabs,.merchant-queue-tabs{display:flex;gap:6px;overflow:auto;scrollbar-width:none;flex:1}
.merchant-products-tabs::-webkit-scrollbar,.merchant-queue-tabs::-webkit-scrollbar{display:none}
.merchant-stock-filter{min-width:170px;justify-content:center;white-space:nowrap}
.merchant-products-summary,.merchant-queue-summary{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.merchant-summary-pill{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;border-radius:12px;background:#fff;border:1px solid var(--border-soft);color:var(--text-muted);font-size:11px;font-weight:800}
.merchant-summary-pill strong{color:var(--text-main);font-size:14px}
.merchant-products-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.merchant-product-card{position:relative;display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--border-soft);border-radius:20px;padding:16px;box-shadow:0 7px 24px rgba(31,36,48,.055);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;overflow:hidden}
.merchant-product-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px rgba(31,36,48,.09);border-color:rgba(87,179,90,.25)}
.merchant-product-card__top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:13px}
.merchant-product-card__media{width:58px;height:58px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,#f3f7f3,#edf3ed);font-size:31px;flex:0 0 58px;overflow:hidden}
.merchant-product-card__media img{width:100%;height:100%;object-fit:cover}
.merchant-product-card__name{font-size:15px;font-weight:900;line-height:1.5;margin:0 0 4px;cursor:pointer}
.merchant-product-card__meta{font-size:11px;color:var(--text-muted);line-height:1.7}
.merchant-product-card__price{font-size:19px;font-weight:900;color:var(--text-main);margin-top:13px}
.merchant-product-card__price small{font-size:10px;color:var(--text-muted);font-weight:700}
.merchant-product-card__footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:15px;padding-top:12px;border-top:1px solid var(--border-soft)}
.merchant-product-card__actions{display:flex;align-items:center;gap:5px}
.merchant-product-card .switch{flex-shrink:0}
.merchant-product-stock{font-size:10px;font-weight:800;color:var(--text-muted)}
.merchant-product-stock.is-low{color:#b87800}.merchant-product-stock.is-out{color:var(--state-danger)}
.merchant-order-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.merchant-order-card{background:#fff;border:1px solid var(--border-soft);border-radius:20px;padding:17px;box-shadow:0 7px 24px rgba(31,36,48,.055);transition:.2s ease;position:relative;overflow:hidden}
.merchant-order-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(31,36,48,.09)}
.merchant-order-card.is-urgent{border-color:rgba(255,194,71,.45)}.merchant-order-card.is-overdue{border-color:rgba(226,99,99,.4)}
.merchant-order-card__top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.merchant-order-card__identity{display:flex;gap:11px;min-width:0}.merchant-order-card__icon{width:44px;height:44px;display:grid;place-items:center;border-radius:14px;background:rgba(87,179,90,.1);color:var(--rebox-green);font-family:'Material Symbols Rounded';flex:0 0 44px}
.merchant-order-card__title{font-weight:900;font-size:14px}.merchant-order-card__sub{font-size:10px;color:var(--text-muted);margin-top:3px}
.merchant-order-card__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}.merchant-order-card__info{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}
.merchant-order-info{padding:10px 11px;border-radius:12px;background:#f7f8f9}.merchant-order-info span{display:block;color:var(--text-muted);font-size:9px;margin-bottom:4px}.merchant-order-info strong{display:block;font-size:11px;line-height:1.5}
.merchant-order-card__bottom{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:13px;border-top:1px solid var(--border-soft)}
.merchant-order-card__price{font-size:17px;font-weight:900}.merchant-order-card__actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.merchant-queue-live,.merchant-settings-status{display:inline-flex;align-items:center;gap:7px;padding:8px 11px;border-radius:999px;background:rgba(87,179,90,.07);color:var(--rebox-green);font-size:10px;font-weight:900;white-space:nowrap}
.merchant-live-dot{width:7px;height:7px;border-radius:50%;background:var(--rebox-green);box-shadow:0 0 0 4px rgba(87,179,90,.12);animation:merchantPulse 1.8s ease-in-out infinite}
@keyframes merchantPulse{50%{box-shadow:0 0 0 7px rgba(87,179,90,0)}}
.merchant-settings-head{margin-bottom:22px}.merchant-settings-card{padding:22px;border-radius:22px}.merchant-settings-card__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.merchant-settings-card__head h3{margin:2px 0 0;font-size:18px}.merchant-settings-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:rgba(87,179,90,.1);color:var(--rebox-green);font-family:'Material Symbols Rounded'}
.merchant-settings-card .form-field{margin-top:15px}.merchant-settings-card input{border-radius:14px;min-height:48px;background:#fbfcfb}.merchant-settings-card input:focus{background:#fff;border-color:rgba(87,179,90,.5);box-shadow:0 0 0 4px rgba(87,179,90,.08)}
.merchant-settings-card #storeLogoPreview{width:78px!important;height:78px!important;border-radius:20px!important;border:1px solid var(--border-soft)}
.merchant-settings-card #storeLogoInput{min-height:auto;padding:11px}
.merchant-settings-card .admin-row{border-radius:14px;background:#fafbfa;margin-bottom:7px;border:1px solid var(--border-soft)}
@media (max-width:1200px){.merchant-products-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.merchant-order-grid{grid-template-columns:1fr}.merchant-main{padding-left:28px;padding-right:28px}}
@media (max-width:899px){.merchant-header{position:sticky;height:68px;min-height:68px;padding:9px 14px}.merchant-header__logo{height:35px}.merchant-header__title{display:none}.merchant-sidebar{top:68px;height:calc(100vh - 68px)}.merchant-main{padding:20px 16px 36px}.merchant-products-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.merchant-products-toolbar,.merchant-queue-toolbar{align-items:stretch;flex-direction:column}.merchant-stock-filter{width:100%}.merchant-queue-live{align-self:flex-start}.merchant-section-head{align-items:flex-start}}
@media (max-width:560px){.merchant-header .btn-icon{width:40px;height:40px;border-radius:12px}.merchant-header__actions{gap:5px}.merchant-products-grid{grid-template-columns:1fr}.merchant-product-card{padding:14px}.merchant-order-card{padding:14px}.merchant-order-card__info{grid-template-columns:1fr}.merchant-order-card__bottom{align-items:flex-start;flex-direction:column}.merchant-order-card__actions{width:100%}.merchant-order-card__actions .btn{flex:1}.merchant-settings-card{padding:16px}.merchant-settings-status{font-size:9px}.merchant-section-head{flex-direction:column}.merchant-section-head .btn{width:100%}}
/* ============================================================
ReBox V6 — Customer UX polish
Header identity • page-only builder CTA • boxes • rewards • profile • addresses
============================================================ */
.customer-header__identity{
display:flex;align-items:center;gap:12px;min-width:0;
}
.customer-header__name{
max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
font-size:13px;font-weight:900;color:var(--text-main);
padding-inline-start:12px;border-inline-start:1px solid var(--border-soft);
}
.customer-header__name.is-empty{display:none}
.customer-header__identity .app-header__logo{flex:0 0 auto}
/* The create-box sticky bar is a home-only component. */
body:not(.customer-home-active) .app-shell{padding-bottom:0}
@media (max-width:767px){
body:not(.customer-home-active) .app-shell{padding-bottom:calc(82px + env(safe-area-inset-bottom,0px))}
body.customer-home-active .app-shell{padding-bottom:calc(var(--sticky-bar-h) + 82px + env(safe-area-inset-bottom,0px))}
.customer-header__name{max-width:118px;font-size:12px}
}
@media (min-width:768px){
body:not(.customer-home-active) .app-layout .app-shell{padding-bottom:0}
}
/* ============================================================
BOXES LIST — premium compact cards
============================================================ */
.customer-boxes-list-view .container.section{max-width:1080px}
.customer-boxes-list-view h2{font-size:clamp(26px,3vw,34px);letter-spacing:-.02em}
.customer-boxes-list-view .flex-between{padding-bottom:4px}
.customer-box-card{
position:relative;overflow:hidden;display:block;cursor:pointer;
padding:20px;border:1px solid rgba(31,36,48,.08);border-radius:24px;
background:linear-gradient(145deg,#fff 0%,#fbfcfb 100%);
box-shadow:0 10px 28px rgba(31,36,48,.07);
margin-bottom:14px;
transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
animation:customerBoxIn .45s var(--ease-out) both;
animation-delay:var(--box-delay,0ms);
}
.customer-box-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(31,36,48,.11);border-color:rgba(87,179,90,.22)}
.customer-box-card:active{transform:scale(.985)}
.customer-box-card__glow{position:absolute;inset:auto -45px -55px auto;width:150px;height:150px;border-radius:50%;background:rgba(87,179,90,.08);filter:blur(4px);pointer-events:none}
.customer-box-card__top,.customer-box-card__meta,.customer-box-card__bottom{display:flex;align-items:center;justify-content:space-between;gap:12px}
.customer-box-card__icon{width:50px;height:50px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(145deg,#fff4d6,#ffe7a7);font-size:25px;box-shadow:inset 0 0 0 1px rgba(240,174,50,.12)}
.customer-box-card__status{display:inline-flex;align-items:center;gap:6px;padding:7px 10px;border-radius:999px;background:rgba(87,179,90,.09);color:var(--rebox-green);font-size:11px;font-weight:900}
.customer-box-card__status i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 0 4px rgba(87,179,90,.09)}
.customer-box-card__status.is-paused{background:rgba(240,174,50,.12);color:#a56d00}
.customer-box-card h3{position:relative;margin:15px 0 5px;font-size:19px;line-height:1.45}
.customer-box-card__categories{position:relative;margin:0;color:var(--text-muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.customer-box-card__meta{position:relative;margin-top:15px;padding-top:14px;border-top:1px dashed var(--border-strong);color:var(--text-muted);font-size:11px}
.customer-box-card__meta b{color:var(--text-main);font-weight:900}
.customer-box-card__bottom{position:relative;margin-top:14px;align-items:flex-end}
.customer-box-card__bottom small{display:block;color:var(--text-muted);font-size:10px;margin-bottom:3px}
.customer-box-card__bottom strong{font-size:19px;color:var(--rebox-green);font-weight:900}
.customer-box-card__open{display:inline-flex;align-items:center;gap:7px;color:var(--rebox-green);font-size:12px;font-weight:900}
.customer-box-card__open span{font-size:17px;transition:transform .2s ease}
.customer-box-card:hover .customer-box-card__open span{transform:translateX(-3px)}
@keyframes customerBoxIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
/* Box detail: make it read as one coherent product rather than a stack of generic cards. */
.customer-box-detail-view .status-card{border-radius:26px;padding:24px;background:linear-gradient(145deg,#f0faef,#fff);border:1px solid rgba(87,179,90,.15);box-shadow:0 14px 34px rgba(31,36,48,.07)}
.customer-box-detail-view .status-card__title{font-size:25px}
.customer-box-detail-view .status-card__delivery{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.customer-box-detail-view .status-card__delivery-item{padding:13px;border-radius:16px;background:rgba(255,255,255,.75);border:1px solid rgba(31,36,48,.06)}
.customer-box-detail-view #orderQrCard{border-radius:22px;box-shadow:0 10px 28px rgba(31,36,48,.06);border:1px solid var(--border-soft)}
.customer-box-detail-view .box-contents{display:flex;flex-direction:column;gap:9px}
.customer-box-detail-view .box-contents__row{padding:13px;border-radius:17px;background:#fff;border:1px solid var(--border-soft);box-shadow:0 5px 16px rgba(31,36,48,.04)}
.customer-box-detail-view .box-contents__total{margin-top:3px;padding:16px;border-radius:18px;background:linear-gradient(135deg,#eff9ef,#fff);font-weight:900;border:1px solid rgba(87,179,90,.16)}
.customer-box-detail-view .action-tile{border-radius:18px;min-height:74px;background:#fff;border:1px solid var(--border-soft);box-shadow:0 6px 18px rgba(31,36,48,.04);transition:.2s ease}
.customer-box-detail-view .action-tile:hover{transform:translateY(-2px);border-color:rgba(87,179,90,.22);color:var(--rebox-green)}
/* ============================================================
REWARDS — streak is integrated into the yellow points hero
============================================================ */
.points-card--premium{padding:20px 18px 16px;border-radius:28px;text-align:center}
.points-card__topline{display:flex;align-items:center;justify-content:space-between;position:relative;margin-bottom:4px}
.points-card__eyebrow{font-size:11px;font-weight:900;opacity:.72}
.points-card__spark{width:31px;height:31px;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.3);font-size:15px}
.points-card--premium .points-card__value{font-size:48px;line-height:1.05}
.points-streak{position:relative;margin-top:17px;padding:14px 13px 12px;border-radius:20px;background:rgba(255,255,255,.28);border:1px solid rgba(255,255,255,.35);backdrop-filter:blur(8px)}
.points-streak__head{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:right}
.points-streak__head strong{display:block;font-size:14px}
.points-streak__head span:not(.points-streak__badge){display:block;margin-top:2px;font-size:10px;opacity:.72}
.points-streak__badge{white-space:nowrap;padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.48);font-size:10px;font-weight:900}
.points-streak__track{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:11px}
.points-streak__track .streak-dot{height:9px;min-width:0;border:0;border-radius:999px;background:rgba(255,255,255,.45);font-size:0;transition:all .35s ease}
.points-streak__track .streak-dot.is-filled{background:#fff;box-shadow:0 2px 8px rgba(74,51,0,.16)}
/* ============================================================
PROFILE HUB + ADDRESSES — more editorial, less form-like
============================================================ */
.customer-profile-hub h2,.customer-addresses-panel h2,.customer-profile-panel h2{font-size:clamp(28px,4vw,36px);letter-spacing:-.03em}
.customer-profile-hub .profile-hero-card{position:relative;overflow:hidden;border-radius:28px;padding:30px 20px;background:linear-gradient(145deg,#fff9ec,#fff);border:1px solid rgba(240,174,50,.15);box-shadow:0 14px 34px rgba(31,36,48,.07)}
.customer-profile-hub .profile-hero-card::after{content:'';position:absolute;width:150px;height:150px;border-radius:50%;background:rgba(87,179,90,.08);left:-60px;bottom:-70px}
.customer-profile-hub .profile-hero-card__avatar{width:104px;height:104px;border:4px solid #fff;box-shadow:0 10px 24px rgba(31,36,48,.12)}
.customer-profile-hub .profile-hero-card__name{font-size:22px;position:relative}
.customer-profile-hub .box-card{position:relative;min-height:82px;border-radius:22px;margin-bottom:12px;padding:14px 16px;border:1px solid var(--border-soft);background:#fff;box-shadow:0 8px 24px rgba(31,36,48,.055);transition:.2s ease}
.customer-profile-hub .box-card:hover{transform:translateY(-2px);border-color:rgba(87,179,90,.2)}
.customer-profile-hub .box-card__icon{width:50px;height:50px;border-radius:16px;background:var(--rebox-cream);color:var(--text-main)}
.customer-profile-panel .card{border-radius:24px;border:1px solid var(--border-soft);box-shadow:0 9px 26px rgba(31,36,48,.05);padding:20px}
.customer-profile-panel .card h3{font-size:17px}
.customer-profile-panel .form-field input{min-height:50px;border-radius:15px;background:#fbfcfb}
.customer-profile-panel .form-field input:focus{background:#fff;border-color:rgba(87,179,90,.45);box-shadow:0 0 0 4px rgba(87,179,90,.08)}
.customer-addresses-panel #addressList{gap:10px}
.customer-address-card{display:flex;align-items:center;gap:13px;padding:15px;border:1px solid var(--border-soft);border-radius:22px;background:#fff;box-shadow:0 8px 24px rgba(31,36,48,.055);cursor:pointer;animation:customerAddressIn .4s var(--ease-out) both;animation-delay:var(--address-delay,0ms);transition:.2s ease}
.customer-address-card:hover{transform:translateY(-2px);border-color:rgba(87,179,90,.22)}
.customer-address-card__icon{width:50px;height:50px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,#eff9ef,#fff);color:var(--rebox-green);font-size:26px;font-weight:900;flex:0 0 50px}
.customer-address-card__body{min-width:0;flex:1}
.customer-address-card__head{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.customer-address-card__head h3{margin:0;font-size:15px}
.customer-address-card__body p{margin:5px 0 0;color:var(--text-muted);font-size:12px;line-height:1.7;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.customer-address-card__default{font-size:9px;font-weight:900;color:var(--rebox-green);background:rgba(87,179,90,.1);padding:4px 7px;border-radius:999px}
.customer-address-card__edit{display:inline-flex;align-items:center;gap:4px;color:var(--text-muted);font-size:10px;font-weight:900;flex:0 0 auto}
.customer-address-card__edit span{font-size:16px}
@keyframes customerAddressIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (max-width:560px){
.customer-box-card{padding:17px;border-radius:21px}
.customer-box-card h3{font-size:17px}
.customer-box-card__meta{gap:6px;align-items:flex-start;flex-direction:column}
.customer-box-card__bottom strong{font-size:17px}
.customer-address-card{align-items:flex-start}
.customer-address-card__edit{padding-top:5px}
.customer-address-card__body p{white-space:normal}
.customer-profile-panel .card{padding:16px;border-radius:21px}
.points-card--premium{border-radius:24px}
}
/* Shared account photo in merchant/admin chrome */
.merchant-header__avatar,.rebox-admin-header__avatar{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:#f5f7f6;border:1px solid rgba(31,36,48,.08);color:var(--text-muted);font-family:'Material Symbols Rounded';flex:0 0 42px}
.merchant-header__avatar img,.rebox-admin-header__avatar img{width:100%;height:100%;object-fit:cover}
.merchant-header__avatar .icon,.rebox-admin-header__avatar .icon{font-size:21px}
@media(max-width:560px){.merchant-header__avatar{width:38px;height:38px;flex-basis:38px}.merchant-header .btn-icon{width:38px;height:38px}}
/* ================================================================
REBOX NOTIFICATIONS — polished header badge + notification drawer
================================================================ */
.app-header .notif-btn{
position:relative;
overflow:visible;
}
.app-header .notif-btn .notif-badge{
position:absolute;
top:-7px;
inset-inline-end:-7px;
min-width:20px;
height:20px;
padding:0 5px;
border:2px solid #fff;
border-radius:999px;
display:flex;
align-items:center;
justify-content:center;
background:var(--rebox-coral,#ef6f61);
color:#fff;
font-size:10px;
font-weight:900;
line-height:1;
letter-spacing:-.15px;
box-shadow:0 4px 10px rgba(239,111,97,.25);
transform:scale(1);
animation:notif-badge-in .22s var(--ease-out);
z-index:3;
}
.app-header .notif-btn .notif-badge.hidden{display:none!important}
.app-header .notif-btn.has-unread .icon-svg{
animation:notif-bell-nudge 2.8s ease-in-out infinite;
transform-origin:50% 12%;
}
@keyframes notif-badge-in{
from{opacity:0;transform:scale(.55)}
to{opacity:1;transform:scale(1)}
}
@keyframes notif-bell-nudge{
0%,82%,100%{transform:rotate(0)}
85%{transform:rotate(8deg)}
88%{transform:rotate(-7deg)}
91%{transform:rotate(5deg)}
94%{transform:rotate(-3deg)}
}
.notif-panel-overlay{
background:rgba(17,24,39,.28);
backdrop-filter:blur(3px);
-webkit-backdrop-filter:blur(3px);
}
.notif-panel{
width:min(440px,100%);
border-radius:24px 0 0 24px;
margin-block:10px;
margin-inline-end:10px;
height:calc(100% - 20px);
overflow:hidden;
border:1px solid rgba(31,36,48,.07);
box-shadow:-18px 0 55px rgba(31,36,48,.18);
}
.notif-panel__header{
min-height:78px;
padding:16px 18px;
background:linear-gradient(180deg,#fff 0%,#fbfcfc 100%);
}
.notif-panel__header h3{
margin:0;
font-size:20px;
font-weight:900;
}
.notif-panel__header > .flex{
align-items:center;
}
.notif-panel__header .link{
padding:7px 10px;
border-radius:10px;
background:rgba(87,179,90,.08);
color:var(--rebox-green);
font-weight:800;
text-decoration:none;
}
.notif-panel__body{
padding:14px;
background:#f7f8f9;
}
.notif-row{
position:relative;
gap:12px;
padding:15px 14px;
border-radius:18px;
margin-bottom:10px;
box-shadow:0 4px 16px rgba(31,36,48,.045);
}
.notif-row.is-unread{
background:linear-gradient(135deg,rgba(87,179,90,.09),#fff 65%);
border-color:rgba(87,179,90,.24);
}
.notif-row__dot{
margin-top:5px;
}
.notif-row.is-unread .notif-row__dot{
box-shadow:0 0 0 5px rgba(87,179,90,.10);
}
.notif-row__title{font-size:14px}
.notif-row__body{font-size:12.5px}
.notif-row__time{font-size:10.5px}
@media (max-width:600px){
.app-header .notif-btn .notif-badge{
top:-6px;
inset-inline-end:-5px;
min-width:19px;
height:19px;
font-size:9.5px;
}
.notif-panel{
width:100%;
margin:0;
height:100%;
border-radius:0;
border:0;
}
.notif-panel__header{padding:14px 15px}
.notif-panel__body{padding:12px}
}
/* ================================================================
NATIVE-LIKE PUSH NOTIFICATION CONTROLS
================================================================ */
.notif-push-status{
margin:10px 14px 0;
padding:10px 12px;
border:1px solid rgba(87,179,90,.16);
border-radius:14px;
background:rgba(87,179,90,.055);
color:var(--text-muted);
font-size:11px;
line-height:1.7;
}
.notif-push-status.is-active{color:var(--rebox-green);background:rgba(87,179,90,.09)}
#enablePushBtn.is-active{color:var(--rebox-green);background:rgba(87,179,90,.08)}
#enablePushBtn:disabled{opacity:.55;cursor:not-allowed}
.app-header .notif-btn .notif-badge{
min-width:22px;height:22px;top:-8px;inset-inline-end:-8px;
font-size:10px;border-width:2px;box-shadow:0 5px 14px rgba(239,111,97,.32);
}
@media(max-width:600px){
.notif-push-status{margin:8px 12px 0;font-size:10.5px}
.app-header .notif-btn .notif-badge{min-width:21px;height:21px;top:-7px;inset-inline-end:-6px}
}
/* ================================================================
PWA INSTALL PROMPT — CUSTOMER / ONE-TIME, 10s
================================================================ */
.rebox-install-prompt{position:fixed;top:max(12px,env(safe-area-inset-top));left:50%;transform:translate(-50%,-145%);width:min(720px,calc(100vw - 24px));z-index:100000;opacity:0;visibility:hidden;pointer-events:none;transition:transform .48s cubic-bezier(.22,1,.36,1),opacity .32s ease,visibility .32s;}
.rebox-install-prompt.is-visible{transform:translate(-50%,0);opacity:1;visibility:visible;pointer-events:auto}
.rebox-install-card{display:flex;align-items:center;gap:14px;padding:13px 15px;border:1px solid rgba(87,179,90,.18);border-radius:20px;background:rgba(255,255,255,.96);box-shadow:0 18px 55px rgba(25,55,35,.16),0 3px 12px rgba(25,55,35,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);direction:rtl}
.rebox-install-icon{width:46px;height:46px;flex:0 0 46px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(145deg,#57B35A,#3f9d49);color:#fff;box-shadow:0 8px 18px rgba(87,179,90,.25)}
.rebox-install-icon svg{width:23px;height:23px}
.rebox-install-copy{min-width:0;flex:1}.rebox-install-copy strong{display:block;font-size:14px;font-weight:900;color:#17341d;margin-bottom:3px}.rebox-install-copy span{display:block;font-size:11.5px;line-height:1.65;color:#637066}
.rebox-install-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}.rebox-install-btn{border:0;border-radius:12px;padding:10px 14px;font:800 12px inherit;cursor:pointer;white-space:nowrap}.rebox-install-btn--primary{background:#57B35A;color:#fff;box-shadow:0 7px 16px rgba(87,179,90,.2)}.rebox-install-btn--skip{background:transparent;color:#6b756e;padding-inline:9px}.rebox-install-btn:active{transform:scale(.97)}
@media(max-width:600px){.rebox-install-prompt{width:calc(100vw - 16px);top:max(8px,env(safe-area-inset-top))}.rebox-install-card{gap:10px;padding:11px 12px;border-radius:17px}.rebox-install-icon{width:40px;height:40px;flex-basis:40px;border-radius:12px}.rebox-install-icon svg{width:20px;height:20px}.rebox-install-copy strong{font-size:12.5px}.rebox-install-copy span{font-size:10.5px}.rebox-install-actions{gap:3px}.rebox-install-btn{padding:9px 10px;font-size:11px}.rebox-install-btn--skip{padding-inline:6px}}
@media(prefers-reduced-motion:reduce){.rebox-install-prompt{transition:none}.rebox-install-btn:active{transform:none}}
/* ============================================================
ReBox v10 — Customer products redesign
Merchant-first flow + modern product cards
============================================================ */
#section-products { padding-bottom: 12px; }
#section-products .category-header {
padding: 18px 18px 8px;
display: block;
background: transparent;
}
.products-page-head {
max-width: 1120px;
margin: 0 auto;
display: grid;
gap: 12px;
}
.products-category-identity {
display: flex;
align-items: center;
gap: 13px;
padding: 4px 2px;
}
.products-category-icon {
width: 58px;
height: 58px;
flex: 0 0 58px;
display: grid;
place-items: center;
border-radius: 18px;
background: linear-gradient(145deg, #fff7df, #fff);
box-shadow: var(--elevation-2);
font-size: 30px;
}
.products-category-identity h2 {
font-size: 23px;
line-height: 1.15;
font-weight: 900;
color: var(--text-main);
}
.products-category-identity p {
margin-top: 4px;
color: var(--text-muted);
font-size: 13px;
line-height: 1.5;
}
.merchant-filter {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 12px 13px;
border: 1px solid rgba(87,179,90,.18);
border-radius: 18px;
background: linear-gradient(135deg, rgba(87,179,90,.08), #fff);
box-shadow: var(--elevation-1);
transition: .2s ease;
}
.merchant-filter--locked {
border-color: rgba(87,179,90,.35);
box-shadow: var(--shadow-green);
}
.merchant-filter__copy {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
color: var(--rebox-green);
}
.merchant-filter__copy > .icon-svg { flex: 0 0 auto; }
.merchant-filter__copy div { min-width: 0; }
.merchant-filter__copy strong,
.merchant-filter__copy span:last-child {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.merchant-filter__copy strong { font-size: 13px; color: var(--text-main); }
.merchant-filter__copy span:last-child { margin-top: 2px; font-size: 11px; color: var(--text-muted); }
.merchant-filter select {
min-width: 145px;
max-width: 48%;
min-height: 42px;
padding: 0 12px;
border: 1px solid rgba(31,36,48,.10);
border-radius: 12px;
background: #fff;
color: var(--text-main);
font: inherit;
font-size: 13px;
font-weight: 800;
outline: none;
cursor: pointer;
}
.merchant-filter select:focus { border-color: var(--rebox-green); box-shadow: 0 0 0 3px rgba(87,179,90,.12); }
.products-search { margin-top: 0 !important; min-height: 48px; border: 1px solid rgba(31,36,48,.06); }
#section-products .product-list {
padding: 8px 18px 24px;
max-width: 1120px;
margin: 0 auto;
gap: 12px;
}
.product-card-modern {
position: relative;
display: grid;
grid-template-columns: 82px minmax(0, 1fr);
align-items: stretch;
gap: 12px;
padding: 11px;
margin: 0;
min-height: 150px;
border: 1px solid rgba(31,36,48,.07);
border-radius: 20px;
background: #fff;
box-shadow: 0 5px 18px rgba(31,36,48,.07);
overflow: hidden;
transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s ease;
}
.product-card-modern:hover { transform: translateY(-2px); box-shadow: var(--elevation-3); }
.product-card-modern.product-item--selected { border-color: rgba(87,179,90,.48); box-shadow: 0 0 0 2px rgba(87,179,90,.16), var(--elevation-2); }
.product-card-modern__media {
position: relative;
width: 82px;
height: 100%;
min-height: 128px;
border-radius: 15px;
background: linear-gradient(145deg, #f8f8f7, #fff5e3);
overflow: hidden;
display: grid;
place-items: center;
font-size: 34px;
}
.product-card-modern__media img { width: 100%; height: 100%; object-fit: cover; }
.product-card-modern__check {
position: absolute;
top: 7px;
left: 7px;
width: 25px;
height: 25px;
border-radius: 50%;
display: grid;
place-items: center;
color: #fff;
background: var(--rebox-green);
box-shadow: var(--shadow-green);
font-size: 14px;
font-weight: 900;
}
.product-card-modern__body { min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; }
.product-card-modern__merchant {
width: fit-content;
max-width: 100%;
padding: 3px 8px;
border-radius: 999px;
background: rgba(87,179,90,.08);
color: var(--rebox-green);
font-size: 10px;
font-weight: 800;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.product-card-modern .product-item__name { font-size: 16px; line-height: 1.35; }
.product-card-modern .product-item__unit { font-size: 11px; }
.product-card-modern .product-item__desc { margin-top: 0; font-size: 11px; }
.product-card-modern .product-item__rating { margin-top: 0; }
.product-card-modern__footer { display: flex; align-items: end; justify-content: space-between; gap: 8px; margin-top: 5px; }
.product-card-modern .product-item__price { font-size: 16px; color: var(--rebox-green); }
.product-card-modern__old-price { display: block; margin-bottom: 1px; color: var(--text-muted); font-size: 10px; text-decoration: line-through; font-weight: 700; }
.product-stepper { gap: 3px; padding: 3px; }
.product-stepper .btn-icon { width: 30px; height: 30px; font-size: 19px; line-height: 1; }
.product-stepper__add { background: var(--rebox-green) !important; color: #fff !important; box-shadow: var(--shadow-green) !important; }
.products-empty-state { margin: 8px 0; background: #fff; border-radius: 20px; box-shadow: var(--elevation-1); }
.merchant-switch-overlay { z-index: 1000; }
.merchant-switch-dialog { padding: 26px 20px; text-align: center; }
.merchant-switch-dialog__icon { width: 58px; height: 58px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 18px; background: var(--rebox-cream); font-size: 28px; }
.merchant-switch-dialog .sheet__body { line-height: 1.8; }
.merchant-switch-dialog__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }
@media (min-width: 768px) {
#section-products .category-header { padding-inline: 28px; }
.products-page-head { grid-template-columns: minmax(0,1fr) 360px; align-items: center; }
.products-search { grid-column: 1 / -1; }
#section-products .product-list { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (min-width: 1100px) {
#section-products .product-list { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 1400px) {
#section-products .product-list { grid-template-columns: repeat(4, minmax(0,1fr)); }
}
@media (max-width: 480px) {
.merchant-filter { align-items: stretch; flex-direction: column; }
.merchant-filter select { width: 100%; max-width: none; }
.products-category-identity h2 { font-size: 21px; }
.product-card-modern { grid-template-columns: 76px minmax(0,1fr); min-height: 142px; padding: 10px; }
.product-card-modern__media { width: 76px; min-height: 120px; }
}
/* ============================================================
V11 CUSTOMER POLISH — QR results + address sheet + Safari push
============================================================ */
.qr-sheet-head{display:flex;align-items:center;gap:12px;text-align:right}
.qr-sheet-head .sheet__title{text-align:right;margin:0}
.qr-sheet-head .sheet__body{text-align:right;margin-top:3px}
.qr-sheet-icon{width:48px;height:48px;flex:0 0 48px;border-radius:16px;display:grid;place-items:center;background:rgba(87,179,90,.10);color:var(--rebox-green)}
.qr-result-sheet{text-align:center;padding-top:18px}
.qr-result__icon{width:82px;height:82px;margin:2px auto 12px;border-radius:28px;display:grid;place-items:center;font-size:42px;font-weight:950;color:#fff;background:linear-gradient(145deg,#57B35A,#3f9e49);box-shadow:0 16px 34px rgba(87,179,90,.24);animation:qrResultPop .45s var(--ease-out)}
.qr-result-overlay[data-result-tone="already"] .qr-result__icon{background:linear-gradient(145deg,#f1b83f,#dc9622);box-shadow:0 16px 34px rgba(220,150,34,.20)}
.qr-result-overlay[data-result-tone="error"] .qr-result__icon{background:linear-gradient(145deg,#ef6f61,#d94d40);box-shadow:0 16px 34px rgba(217,77,64,.18)}
.qr-result__badge{display:inline-flex;padding:7px 11px;border-radius:999px;background:rgba(87,179,90,.09);color:var(--rebox-green);font-size:11px;font-weight:900}
.qr-result-overlay[data-result-tone="already"] .qr-result__badge{background:rgba(240,174,50,.12);color:#9b6900}
.qr-result-overlay[data-result-tone="error"] .qr-result__badge{background:rgba(239,111,97,.10);color:#c84d42}
.qr-result__title{margin-top:12px;font-size:26px;line-height:1.25}
.qr-result__body{max-width:430px;margin:7px auto 0;color:var(--text-muted);font-size:14px;line-height:1.8}
.qr-result__points{width:fit-content;margin:16px auto 0;padding:11px 20px;border-radius:16px;background:linear-gradient(135deg,#eef9ee,#fff);border:1px solid rgba(87,179,90,.16);color:var(--rebox-green);font-size:25px;font-weight:950;box-shadow:var(--shadow-green)}
.qr-result__tip{margin-top:12px;color:var(--text-muted);font-size:10.5px}
@keyframes qrResultPop{0%{opacity:0;transform:scale(.72)}100%{opacity:1;transform:scale(1)}}
.address-sheet{max-height:min(88vh,760px);overflow:auto}
.address-sheet__hero{display:flex;align-items:center;gap:12px;padding:2px 0 16px}
.address-sheet__hero .sheet__title{text-align:right;margin-top:2px;font-size:24px}
.address-sheet__hero p{margin:3px 0 0;color:var(--text-muted);font-size:11px;line-height:1.65}
.address-sheet__icon{width:52px;height:52px;flex:0 0 52px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(145deg,#eff9ef,#fff);color:var(--rebox-green);box-shadow:0 8px 20px rgba(87,179,90,.12)}
.address-sheet__eyebrow{font-size:10px;font-weight:900;color:var(--rebox-green)}
.address-form-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:10px}
.address-field label{display:block;margin:0 0 6px 3px;color:var(--text-main);font-size:11px;font-weight:900}
.address-field__control{display:flex;align-items:center;gap:8px;min-height:52px;padding:0 12px;border:1px solid rgba(31,36,48,.09);border-radius:16px;background:#fbfcfb;transition:.2s ease}
.address-field__control:focus-within{background:#fff;border-color:rgba(87,179,90,.42);box-shadow:0 0 0 4px rgba(87,179,90,.08)}
.address-field__control>span{color:var(--rebox-green);font-size:17px;flex:0 0 auto}
.address-field__control input,.address-field__control textarea{width:100%;border:0;outline:0;background:transparent;color:var(--text-main);font:inherit;font-size:13px}
.address-field__control textarea{min-height:72px;padding:12px 0;resize:vertical;line-height:1.7}
.address-field__control--textarea{align-items:flex-start}
.address-field--wide{grid-column:1 / -1}
.address-map-btn{width:100%;display:flex;align-items:center;gap:10px;margin-top:11px;padding:12px 13px;border:1px solid rgba(87,179,90,.16);border-radius:17px;background:linear-gradient(135deg,rgba(87,179,90,.09),#fff);color:var(--text-main);font:inherit;text-align:right;cursor:pointer}
.address-map-btn__icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#fff;color:var(--rebox-green);box-shadow:0 4px 12px rgba(31,36,48,.06);flex:0 0 38px}
.address-map-btn strong,.address-map-btn small{display:block}.address-map-btn strong{font-size:12px}.address-map-btn small{margin-top:2px;color:var(--text-muted);font-size:9.5px}.address-map-btn>span:last-child{margin-inline-start:auto;color:var(--rebox-green);font-size:18px}
.address-location-status{min-height:18px;margin:5px 3px 0;color:var(--rebox-green);font-size:10px;font-weight:800;text-align:right}
.address-default-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:7px;padding:13px 14px;border:1px solid var(--border-soft);border-radius:17px;background:#fff;box-shadow:0 5px 16px rgba(31,36,48,.035)}
.address-default-row strong,.address-default-row small{display:block}.address-default-row strong{font-size:12px}.address-default-row small{margin-top:2px;color:var(--text-muted);font-size:9.5px}
.address-sheet__actions{margin-top:13px;gap:8px}
@media(max-width:560px){
.address-form-grid{grid-template-columns:1fr}
.address-field--wide{grid-column:auto}
.address-sheet{padding-inline:16px}
.address-sheet__hero .sheet__title{font-size:22px}
.qr-result__icon{width:74px;height:74px;border-radius:25px;font-size:36px}
}
/* iOS/Safari push status should read as a setup step, not an unsupported-browser error. */
.notif-push-status.is-install-required{background:linear-gradient(135deg,rgba(240,174,50,.10),#fff);border-color:rgba(240,174,50,.20);color:#765b16}
/* ============================================================
ReBox FINAL DESKTOP / TABLET POLISH
- Bottom navigation is mobile-only.
- Customer sidebar is physically pinned to the RIGHT.
- Main content always occupies the LEFT side of the sidebar.
- Box detail colors/actions are corrected for contrast and reliability.
============================================================ */
@media (min-width:768px){
body{overflow-x:hidden}
.bottom-nav{display:none !important}
.app-layout{
display:flex !important;
flex-direction:row !important;
align-items:stretch;
width:100%;
min-height:100vh;
direction:ltr;
}
.app-layout > .app-shell{
order:1;
width:calc(100% - var(--sidebar-w)) !important;
max-width:none !important;
min-width:0;
margin:0 !important;
margin-right:var(--sidebar-w) !important;
direction:rtl;
padding-bottom:0 !important;
}
.sidebar{
display:flex !important;
order:2;
position:fixed !important;
top:0 !important;
right:0 !important;
left:auto !important;
inset-inline-start:auto !important;
inset-inline-end:auto !important;
width:var(--sidebar-w) !important;
height:100vh !important;
min-height:100vh;
padding:20px 14px;
direction:rtl;
border-left:0;
border-right:1px solid var(--border-soft);
box-shadow:-12px 0 32px rgba(31,36,48,.06);
z-index:60;
}
.sidebar__nav{gap:8px}
.sidebar__link{
justify-content:flex-start !important;
min-height:52px;
padding:12px 14px;
border-radius:16px;
font-size:14px;
}
.sidebar__link-label{display:inline !important}
.app-header{
position:sticky;
top:0;
z-index:30;
min-height:76px;
padding-inline:28px;
}
.app-header__brand{order:1}
.app-header__actions{order:2}
.sticky-bar{
left:0 !important;
right:var(--sidebar-w) !important;
width:auto !important;
max-width:none !important;
transform:none !important;
}
.customer-boxes-list-view .container.section,
.customer-box-detail-view .container.section{max-width:1100px}
.customer-boxes-list-view #boxesList{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:16px;
}
.customer-box-card{margin-bottom:0}
.customer-box-detail-view .status-card{max-width:1100px;margin-inline:auto}
.customer-box-detail-view #orderQrCard{max-width:1100px;margin-inline:auto}
.customer-box-detail-view .box-contents{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}
.customer-box-detail-view .box-contents__total{grid-column:1/-1}
.customer-box-detail-view .actions-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (min-width:768px) and (max-width:1023px){
:root{--sidebar-w:220px}
.app-layout > .app-shell{width:calc(100% - 220px) !important;margin-right:220px !important}
.sidebar{width:220px !important}
.app-header{padding-inline:20px}
.customer-boxes-list-view #boxesList{grid-template-columns:1fr}
.customer-box-detail-view .box-contents{grid-template-columns:1fr}
.customer-box-detail-view .actions-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (min-width:1280px){
.customer-boxes-list-view #boxesList{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* Box detail contrast fix: the old green-card rule left white text after the
card was redesigned to a light surface. */
.customer-box-detail-view .status-card{
color:var(--text-main) !important;
background:
radial-gradient(circle at 8% 12%,rgba(87,179,90,.13),transparent 30%),
linear-gradient(145deg,#f4fbf4 0%,#ffffff 72%) !important;
border:1px solid rgba(87,179,90,.18) !important;
box-shadow:0 16px 38px rgba(31,36,48,.08), inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.customer-box-detail-view .status-card::before{background:radial-gradient(circle,rgba(87,179,90,.12),transparent 70%)}
.customer-box-detail-view .status-card__badge{
background:rgba(87,179,90,.12) !important;
color:#318c38 !important;
border:1px solid rgba(87,179,90,.18);
}
.customer-box-detail-view .status-card__title{
color:var(--text-main) !important;
text-shadow:none !important;
}
.customer-box-detail-view .status-card__subtitle,
.customer-box-detail-view .status-card__delivery-label{color:var(--text-muted) !important;opacity:1}
.customer-box-detail-view .status-card__delivery-value{color:var(--text-main) !important}
.customer-box-detail-view .status-card.is-paused,
.customer-box-detail-view .status-card.is-cancelled{color:var(--text-main) !important}
.customer-box-detail-view .action-tile{
position:relative;
overflow:hidden;
cursor:pointer;
color:var(--text-main);
border:1px solid rgba(31,36,48,.08) !important;
background:linear-gradient(145deg,#fff,#fbfcfb) !important;
}
.customer-box-detail-view .action-tile::after{
content:'';position:absolute;inset:auto 0 0;height:3px;
background:linear-gradient(90deg,var(--rebox-green),var(--rebox-yellow),var(--rebox-coral));
opacity:.35;transform:scaleX(.25);transform-origin:center;transition:transform .2s ease;
}
.customer-box-detail-view .action-tile:hover::after{transform:scaleX(1)}
.customer-box-detail-view .action-tile:active{transform:translateY(1px) scale(.985)}
.customer-box-detail-view .action-tile__icon{color:var(--rebox-green)}
.customer-box-card__open{
border:0;background:transparent;color:var(--rebox-green);
font:inherit;font-size:12px;font-weight:900;cursor:pointer;
display:inline-flex;align-items:center;gap:7px;padding:4px 0;
}
/* ============================================================
ReBox BOX DETAIL — category explorer, order summary & actions
============================================================ */
.customer-box-detail-view .box-contents{display:flex;flex-direction:column;gap:12px}
.box-category-card{overflow:hidden;border:1px solid rgba(31,36,48,.075);border-radius:22px;background:linear-gradient(145deg,#fff,#fbfcfb);box-shadow:0 9px 24px rgba(31,36,48,.045);transition:box-shadow .2s ease,border-color .2s ease}
.box-category-card.is-open{border-color:rgba(87,179,90,.22);box-shadow:0 12px 30px rgba(31,36,48,.065)}
.box-category-card__head{width:100%;display:flex;align-items:center;gap:12px;padding:15px 16px;background:transparent;border:0;color:var(--text-main);font:inherit;text-align:right;cursor:pointer}
.box-category-card__icon{width:50px;height:50px;flex:0 0 50px;display:grid;place-items:center;border-radius:17px;background:color-mix(in srgb,var(--cat-tint) 25%,#fff);font-size:25px;box-shadow:inset 0 0 0 1px rgba(31,36,48,.035)}
.box-category-card__title{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}.box-category-card__title strong{font-size:15px}.box-category-card__title small{color:var(--text-muted);font-size:11px}.box-category-card__chevron{font-size:22px;color:var(--text-muted);transition:transform .22s ease}.box-category-card.is-open .box-category-card__chevron{transform:rotate(180deg);color:var(--rebox-green)}
.box-category-card__body{display:grid;grid-template-rows:0fr;padding:0 14px;transition:grid-template-rows .25s ease,padding .25s ease}.box-category-card__body>*{min-height:0;overflow:hidden}.box-category-card.is-open .box-category-card__body{grid-template-rows:1fr;padding:0 14px 14px}
.box-category-product{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:11px;padding:10px 0;border-top:1px solid rgba(31,36,48,.06)}
.box-category-product__media{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:var(--cat-tint,#f4f6f4);overflow:hidden;font-size:21px}.box-category-product__media img{width:100%;height:100%;object-fit:cover}.box-category-product__info{min-width:0}.box-category-product__info strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.box-category-product__info span{display:block;margin-top:3px;color:var(--text-muted);font-size:10px}.box-category-product__price{font-size:12px;font-weight:900;white-space:nowrap}
.box-price-summary{margin-top:2px;padding:17px;border-radius:22px;background:linear-gradient(145deg,#f0f9f0,#fff 72%);border:1px solid rgba(87,179,90,.17);box-shadow:0 12px 28px rgba(87,179,90,.07)}
.box-price-summary__head,.box-price-summary__row,.box-price-summary__total{display:flex;align-items:center;justify-content:space-between;gap:12px}.box-price-summary__head{padding-bottom:11px;border-bottom:1px dashed rgba(31,36,48,.13);font-weight:900}.box-price-summary__head small{color:var(--text-muted);font-weight:700;font-size:10px}.box-price-summary__row{padding-top:9px;font-size:12px}.box-price-summary__row strong{font-weight:800}.box-price-summary__row.is-discount{color:var(--rebox-green)}.box-price-summary__total{margin-top:12px;padding-top:12px;border-top:1px solid rgba(31,36,48,.08);font-size:15px;font-weight:900}.box-price-summary__total strong{font-size:20px;color:var(--rebox-green)}
.customer-box-detail-view .actions-grid{gap:12px}.customer-box-detail-view .action-tile{min-height:112px!important;padding:18px 12px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;font-weight:900;font-size:13px}.customer-box-detail-view .action-tile__icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:#f1f8f1;color:var(--rebox-green);transition:.2s ease}.customer-box-detail-view .action-tile:hover .action-tile__icon{transform:translateY(-2px) scale(1.04)}
.customer-box-detail-view .action-tile.is-paused{border-color:rgba(220,73,73,.18)!important;background:linear-gradient(145deg,#fff7f7,#fff)!important}.customer-box-detail-view .action-tile.is-paused .action-tile__icon{background:#fff0f0;color:#d84747}.customer-box-detail-view .action-tile.is-resume{border-color:rgba(87,179,90,.25)!important;background:linear-gradient(145deg,#f2fbf2,#fff)!important}.customer-box-detail-view .action-tile.is-resume .action-tile__icon{background:#eaf8eb;color:var(--rebox-green)}
/* Product editor sheet */
.box-products-sheet{max-height:min(90vh,820px);overflow:auto}.box-products-sheet__hero{display:flex;align-items:center;gap:12px;padding-bottom:15px}.box-products-sheet__icon{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(145deg,#f4faef,#fff);box-shadow:0 8px 22px rgba(87,179,90,.12);font-size:25px}.box-products-sheet__eyebrow{font-size:10px;font-weight:900;color:var(--rebox-green)}.box-products-sheet__hero .sheet__title{margin:2px 0 0;font-size:22px;text-align:right}.box-products-sheet__hero p{margin:3px 0 0;color:var(--text-muted);font-size:10px;line-height:1.65}.box-products-editor-list{display:flex;flex-direction:column;gap:12px}.box-editor-category{border:1px solid var(--border-soft);border-radius:19px;background:#fbfcfb;padding:12px}.box-editor-category__head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}.box-editor-category__head strong,.box-editor-category__head small{display:block}.box-editor-category__head strong{font-size:12px}.box-editor-category__head small{margin-top:3px;color:var(--rebox-green);font-size:9px;font-weight:800}.box-editor-category__head>span{font-size:9px;color:var(--text-muted)}.box-editor-products{display:flex;flex-direction:column;gap:7px}.box-editor-product{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:9px;padding:8px;border:1px solid rgba(31,36,48,.06);border-radius:15px;background:#fff;transition:.18s ease}.box-editor-product.is-selected{border-color:rgba(87,179,90,.3);box-shadow:0 5px 15px rgba(87,179,90,.08)}.box-editor-product__media{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:#f4f6f4;overflow:hidden;font-size:19px}.box-editor-product__media img{width:100%;height:100%;object-fit:cover}.box-editor-product__info{min-width:0}.box-editor-product__info strong{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.box-editor-product__info small{display:block;color:var(--text-muted);font-size:9px;margin-top:3px}.box-editor-product__qty{display:flex;align-items:center;gap:5px}.box-editor-product__qty button{width:29px;height:29px;border-radius:10px;border:1px solid var(--border-soft);background:#fff;color:var(--text-main);font:inherit;font-weight:900;cursor:pointer}.box-editor-product__qty b{min-width:18px;text-align:center;font-size:11px}.box-products-sheet__actions{position:sticky;bottom:0;margin-top:12px;padding-top:10px;background:linear-gradient(#fff0,#fff 30%)}
/* Installed PWA: keep the builder CTA below the box instead of floating over it. */
@media (display-mode:standalone){
body.customer-home-active .app-shell{padding-bottom:calc(var(--sticky-bar-h) + env(safe-area-inset-bottom,0px) + 18px)!important}
body.customer-home-active .sticky-bar{bottom:env(safe-area-inset-bottom,0px)!important;border-radius:24px 24px 0 0!important}
body.customer-home-active .sticky-bar__row{padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px))!important}
body.customer-home-active .rebox-box-wrap{margin-bottom:20px!important}
}
@media (min-width:768px){
.customer-box-detail-view .box-contents{grid-template-columns:1fr 1fr;display:grid}.customer-box-detail-view .box-price-summary{grid-column:1/-1}.box-products-sheet{width:min(760px,92vw);border-radius:28px}.box-editor-products{display:grid;grid-template-columns:1fr 1fr}.box-editor-category{padding:14px}
}
@media (max-width:560px){
.customer-box-detail-view .actions-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.customer-box-detail-view .action-tile{min-height:105px!important}.box-products-sheet{padding-inline:15px}.box-editor-products{gap:6px}.box-editor-product{grid-template-columns:40px minmax(0,1fr) auto;padding:7px}.box-editor-product__media{width:40px;height:40px}.box-editor-product__info strong{font-size:10px}.box-editor-product__qty button{width:27px;height:27px}
}
/* ============================================================
ReBox V7 — FINAL UX REDESIGN
Builder / Box Contents / Delivery Schedule
============================================================ */
.builder-hero{padding:34px 28px 28px;border-radius:0 0 30px 30px;background:radial-gradient(circle at 12% 15%,rgba(87,179,90,.14),transparent 30%),radial-gradient(circle at 90% 10%,rgba(255,194,71,.14),transparent 28%),linear-gradient(180deg,#fffaf0 0%,#f7faf7 100%)}
.builder-hero__eyebrow{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:rgba(87,179,90,.10);border:1px solid rgba(87,179,90,.18);color:#3e9745;font-size:12px;font-weight:900}
.builder-hero__title{font-size:clamp(30px,5vw,46px);max-width:760px;margin:14px auto 8px;letter-spacing:-.045em}.builder-hero__sub{max-width:620px;margin:auto;font-size:14px;color:var(--text-muted);line-height:1.8}
.progress-track{max-width:960px;margin:22px auto 6px;padding:0 28px;display:flex;align-items:center;gap:18px}.progress-track__bar{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:7px;height:7px}.progress-track__bar .seg{border-radius:999px;background:#e4e8e5;transition:.3s ease}.progress-track__bar .seg.is-filled{background:linear-gradient(90deg,var(--rebox-green),#8bce75)}.progress-track__label{font-size:13px;font-weight:900;color:var(--text-main)}
.rebox-box-wrap{padding-inline:20px!important}.rebox-box{border:1px solid rgba(31,36,48,.08)!important;background:linear-gradient(145deg,#f7f9f7,#fff)!important;box-shadow:0 28px 65px rgba(31,36,48,.10),inset 0 1px 0 #fff!important}.rebox-box::before{opacity:.55!important}.rebox-quadrant{background:linear-gradient(145deg,#fff,#f7faf8)!important;border:1px solid rgba(31,36,48,.07)!important;box-shadow:0 10px 24px rgba(31,36,48,.07)!important}.rebox-quadrant--empty{background:linear-gradient(145deg,#ffffff,#f8faf9)!important;border:2px dashed #d9dfdb!important}.rebox-quadrant--empty:hover{border-color:rgba(87,179,90,.45)!important;background:#fbfffb!important}.rebox-quadrant__icon{filter:drop-shadow(0 4px 8px rgba(31,36,48,.08))}.rebox-quadrant__cta{background:#fff!important;border:1px solid rgba(31,36,48,.08);box-shadow:0 5px 14px rgba(31,36,48,.07);padding:7px 14px!important;border-radius:999px!important}.rebox-quadrant.is-selected{background:linear-gradient(145deg,#f5fbf5,#fff)!important}
@media (display-mode:standalone){body.customer-home-active .app-shell{padding-bottom:0!important}body.customer-home-active #mainStickyBar{position:static!important;inset:auto!important;width:min(920px,calc(100% - 28px))!important;margin:18px auto 22px!important;border-radius:24px!important;box-shadow:0 16px 35px rgba(31,36,48,.10)!important}body.customer-home-active #mainStickyBar .sticky-bar__row{padding:14px 18px!important}body.customer-home-active .rebox-box-wrap{margin-bottom:0!important}}
@media (min-width:768px){.app-layout>.app-shell{background:linear-gradient(180deg,#fafcfb 0%,#f5f7f8 100%)}.app-header{background:rgba(255,255,255,.94);backdrop-filter:blur(16px);border-bottom:1px solid rgba(31,36,48,.07)}.app-header__brand{margin-inline:auto}#section-index .builder-hero{margin:0 auto;border-radius:0 0 34px 34px}#section-index .rebox-box-wrap{max-width:1050px;margin:24px auto 0}#section-index .rebox-box{max-width:720px!important;margin:auto}#section-index .order-summary-card{max-width:720px;margin:24px auto}.sticky-bar{border-radius:0!important}}
.customer-box-detail-view .status-card{position:relative;overflow:hidden;padding:28px!important;border-radius:30px!important}.customer-box-detail-view .status-card::after{content:'';position:absolute;inset:auto -35px -60px auto;width:190px;height:190px;border-radius:50%;background:rgba(87,179,90,.07);pointer-events:none}.customer-box-detail-view .status-card__badge,.customer-box-detail-view .status-card__title,.customer-box-detail-view .status-card__delivery{position:relative;z-index:1}.customer-box-detail-view .status-card__title{font-size:clamp(24px,4vw,32px)!important}.customer-box-detail-view .box-contents{gap:14px!important}.box-category-card{border-radius:24px!important;background:#fff!important;box-shadow:0 10px 28px rgba(31,36,48,.055)!important}.box-category-card__head{padding:18px!important}.box-category-card__icon{width:56px!important;height:56px!important;border-radius:18px!important}.box-category-card__title strong{font-size:16px!important}.box-category-card__title small{font-size:11px!important}.box-category-card__chevron{width:34px;height:34px;display:grid;place-items:center;border-radius:12px;background:#f4f7f5}.box-category-card.is-open .box-category-card__chevron{background:#edf8ee}.box-category-product{padding:12px 0!important}.box-category-product__media{width:54px!important;height:54px!important;border-radius:17px!important}.box-category-product__info strong{font-size:13px!important}.box-category-product__info span{font-size:11px!important}.box-category-product__price{font-size:13px!important;color:var(--rebox-green)}.box-price-summary{padding:20px!important;border-radius:24px!important;background:linear-gradient(145deg,#eff9ef 0%,#fff 72%)!important}.box-price-summary__head{font-size:16px}.box-price-summary__row{font-size:13px!important}.box-price-summary__total{font-size:17px!important}.box-price-summary__total strong{font-size:23px!important}
.customer-box-detail-view .actions-grid{gap:14px!important}.customer-box-detail-view .action-tile{position:relative;min-height:126px!important;border-radius:22px!important;padding:18px!important;overflow:hidden;border:1px solid rgba(31,36,48,.08)!important;box-shadow:0 10px 24px rgba(31,36,48,.055)!important;background:#fff!important}.customer-box-detail-view .action-tile::before{content:'';position:absolute;inset:0 auto 0 0;width:4px;background:linear-gradient(180deg,var(--rebox-green),var(--rebox-yellow));opacity:.8}.customer-box-detail-view .action-tile__icon{width:52px!important;height:52px!important;border-radius:17px!important;background:#eff8f0!important;color:var(--rebox-green)!important}.customer-box-detail-view .action-tile__text{font-size:14px;font-weight:900}.customer-box-detail-view .action-tile:hover{transform:translateY(-4px)!important;box-shadow:0 18px 34px rgba(31,36,48,.10)!important}.customer-box-detail-view .action-tile#skipBtn .action-tile__icon{background:#fff8e8!important;color:#b77a00!important}.customer-box-detail-view .action-tile#changeDateBtn .action-tile__icon{background:#eef6fb!important;color:#3d84b4!important}.customer-box-detail-view .action-tile#renameBoxBtn .action-tile__icon{background:#fff0ed!important;color:#e25d4a!important}.customer-box-detail-view .action-tile.is-paused{background:linear-gradient(145deg,#fff6f6,#fff)!important;border-color:rgba(217,48,37,.20)!important}.customer-box-detail-view .action-tile.is-paused .action-tile__icon{background:#fff0f0!important;color:#d93025!important}.customer-box-detail-view .action-tile.is-resume{background:linear-gradient(145deg,#f0fbf2,#fff)!important;border-color:rgba(87,179,90,.30)!important}
.schedule-page{padding-bottom:30px}.schedule-shell{max-width:1120px;margin:auto;padding:0 20px}.schedule-hero{position:relative;padding:18px 0 26px}.schedule-back{margin-bottom:22px}.schedule-hero__eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--rebox-green);font-size:12px;font-weight:900;background:rgba(87,179,90,.08);padding:7px 11px;border-radius:999px}.schedule-hero__dot{width:7px;height:7px;border-radius:50%;background:var(--rebox-green);box-shadow:0 0 0 5px rgba(87,179,90,.08)}.schedule-hero h2{font-size:clamp(28px,4vw,42px);margin:14px 0 7px;letter-spacing:-.04em}.schedule-hero p{max-width:680px;color:var(--text-muted);font-size:14px;line-height:1.8}.schedule-progress{display:flex;gap:7px;max-width:300px;margin-top:18px}.schedule-progress span{height:6px;flex:1;border-radius:999px;background:#e3e7e4}.schedule-progress span.is-done{background:var(--rebox-green)}.schedule-progress span.is-active{background:linear-gradient(90deg,var(--rebox-green),var(--rebox-yellow))}.schedule-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(290px,.65fr);gap:18px;align-items:start}.schedule-main{display:grid;gap:14px}.schedule-card{background:#fff;border:1px solid var(--border-soft);border-radius:24px;padding:20px;box-shadow:0 10px 28px rgba(31,36,48,.055)}.schedule-card__head{display:flex;align-items:center;gap:13px;margin-bottom:18px}.schedule-card__head h3{font-size:18px}.schedule-card__head p{font-size:11px;color:var(--text-muted);margin-top:3px}.schedule-card__icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;flex:0 0 48px}.schedule-card__icon--green{background:#edf8ee;color:var(--rebox-green)}.schedule-card__icon--yellow{background:#fff7e6;color:#bd8000}.schedule-card__icon--coral{background:#fff0ed;color:var(--rebox-coral)}.schedule-frequency-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.schedule-frequency-grid .option-chip{position:relative;min-height:78px!important;border-radius:18px!important;background:#fbfcfb!important;border:1px solid var(--border-soft)!important;box-shadow:none!important;justify-content:flex-start!important;align-items:center!important;flex-direction:row!important;gap:11px!important;padding:10px 13px!important;text-align:right!important;overflow:hidden!important}.schedule-frequency-grid .option-chip::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.8),transparent 55%);opacity:0;transition:opacity .2s ease}.schedule-frequency-grid .option-chip:hover{transform:translateY(-2px)!important;border-color:rgba(87,179,90,.28)!important;box-shadow:0 10px 24px rgba(31,36,48,.07)!important}.schedule-frequency-grid .option-chip.is-selected{background:linear-gradient(145deg,#eff9ef,#fff)!important;border-color:rgba(87,179,90,.40)!important;box-shadow:0 10px 24px rgba(87,179,90,.10)!important;color:#318c38!important}.schedule-frequency-grid .option-chip.is-selected::after{opacity:1}.schedule-frequency-option__icon{position:relative;z-index:1;flex:0 0 42px;width:42px;height:42px;border-radius:14px;display:grid;place-items:center;background:#f0f3f1;color:#68736c;transition:.2s ease}.schedule-frequency-grid .option-chip.is-selected .schedule-frequency-option__icon{background:#dff2e1;color:#43a84c;transform:scale(1.03)}.schedule-frequency-option__copy{position:relative;z-index:1;display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}.schedule-frequency-grid .option-chip__title{font-size:14px!important;font-weight:900!important;line-height:1.2}.schedule-frequency-grid .option-chip__sub{font-size:10px!important;color:var(--text-muted)!important;font-weight:700!important;line-height:1.3}.schedule-frequency-option__check{position:relative;z-index:1;flex:0 0 26px;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1.5px solid #d8dfda;color:transparent;background:#fff;transition:.2s ease}.schedule-frequency-option__check .icon{font-size:16px}.schedule-frequency-grid .option-chip.is-selected .schedule-frequency-option__check{border-color:var(--rebox-green);background:var(--rebox-green);color:#fff;transform:scale(1.02)}.schedule-weekdays-card .weekday-row{display:flex;flex-wrap:wrap;gap:8px}.schedule-weekdays-card .weekday-pill{min-width:54px;height:44px;padding:0 12px;border-radius:14px;border:1px solid var(--border-soft);background:#fbfcfb;font-weight:800}.schedule-weekdays-card .weekday-pill.is-selected{background:#edf8ee;color:#318c38;border-color:rgba(87,179,90,.28)}.schedule-time-input{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:6px 10px 6px 14px;border:1px solid var(--border-soft);border-radius:18px;background:#fbfcfb;cursor:pointer}.schedule-time-input__prefix{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:800;color:var(--text-muted)}.schedule-time-input input{width:100%;min-height:50px;border:0!important;background:transparent!important;outline:0!important;font-size:23px;font-weight:900;direction:ltr;text-align:center}.schedule-time-input__suffix{font-size:13px;font-weight:900;color:var(--text-muted)}.schedule-side{display:grid;gap:14px;position:sticky;top:92px}.schedule-preview-card{position:relative;overflow:hidden;background:linear-gradient(145deg,#eff9ef 0%,#fff 72%);border:1px solid rgba(87,179,90,.18);border-radius:26px;padding:22px;box-shadow:0 14px 32px rgba(87,179,90,.08)}.schedule-preview-card::after{content:'';position:absolute;width:130px;height:130px;border-radius:50%;right:-50px;bottom:-55px;background:rgba(87,179,90,.08)}.schedule-preview-card__top{position:relative;z-index:1;display:flex;align-items:center;gap:8px;color:#4b9651;font-size:12px;font-weight:900}.schedule-preview-card__top .icon{font-size:20px}.schedule-preview-card__date{position:relative;z-index:1;font-size:24px;font-weight:900;margin-top:16px}.schedule-preview-card__sub{position:relative;z-index:1;color:var(--text-muted);font-size:12px;line-height:1.7;margin-top:5px}.schedule-preview-card__line{height:1px;background:rgba(31,36,48,.08);margin:18px 0}.schedule-preview-card__hint{position:relative;z-index:1;display:flex;align-items:center;gap:7px;color:#5e6a63;font-size:10px;font-weight:700}.schedule-tip-card{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px solid rgba(255,194,71,.25);border-radius:20px;background:linear-gradient(145deg,#fff8e8,#fff)}.schedule-tip-card__icon{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:#fff0c9;color:#b97b00;font-size:18px}.schedule-tip-card strong{font-size:13px}.schedule-tip-card p{font-size:10px;color:var(--text-muted);line-height:1.7;margin-top:3px}
@media (min-width:768px){.schedule-page{margin-top:0!important}.schedule-hero{padding-top:26px}.schedule-shell{padding-inline:30px}.schedule-grid{grid-template-columns:minmax(0,1.5fr) minmax(300px,.65fr)}.customer-box-detail-view .container.section{padding-inline:30px}}
@media (max-width:899px){.schedule-grid{grid-template-columns:1fr}.schedule-side{position:static}.schedule-frequency-grid{grid-template-columns:1fr 1fr!important}}
@media (max-width:560px){.builder-hero{padding:24px 18px 20px}.builder-hero__title{font-size:30px}.progress-track{padding:0 18px}.rebox-box-wrap{padding-inline:12px!important}.customer-box-detail-view .action-tile{min-height:112px!important}.customer-box-detail-view .action-tile__icon{width:46px!important;height:46px!important}.schedule-shell{padding:0 14px}.schedule-hero{padding-top:12px}.schedule-hero h2{font-size:28px}.schedule-card{padding:16px;border-radius:21px}.schedule-frequency-grid{grid-template-columns:1fr!important}.schedule-frequency-grid .option-chip{min-height:62px!important}.schedule-preview-card{padding:18px}}
/* Action sheets — consistent ReBox visual language */
#renameBoxSheetOverlay .sheet,#dateSheetOverlay .sheet{width:min(560px,calc(100% - 28px));border-radius:28px;padding:22px;background:linear-gradient(180deg,#fff 0%,#fbfcfb 100%);box-shadow:0 24px 70px rgba(31,36,48,.18)}
#renameBoxSheetOverlay .sheet__title,#dateSheetOverlay .sheet__title{font-size:22px;margin-bottom:16px}
#renameBoxSheetOverlay .form-field,#dateSheetOverlay .form-field{margin-top:12px}.form-field label{font-weight:800;font-size:12px;margin-bottom:7px;display:block;color:var(--text-main)}
#renameBoxInput,#newDateInput,#newWindowSelect{width:100%;min-height:52px;border-radius:16px!important;border:1px solid var(--border-strong)!important;background:#fff!important;padding:0 14px!important;font-size:14px!important;outline:none}
#renameBoxInput:focus,#newDateInput:focus,#newWindowSelect:focus{border-color:rgba(87,179,90,.5)!important;box-shadow:0 0 0 4px rgba(87,179,90,.08)}
#renameBoxSheetOverlay .sheet__actions,#dateSheetOverlay .sheet__actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
#renameBoxSheetOverlay .sheet__actions .btn,#dateSheetOverlay .sheet__actions .btn{min-height:50px}
@media(max-width:560px){#renameBoxSheetOverlay .sheet,#dateSheetOverlay .sheet{width:calc(100% - 18px);padding:18px;border-radius:24px}#renameBoxSheetOverlay .sheet__actions,#dateSheetOverlay .sheet__actions{grid-template-columns:1fr}}
/* ============================================================
ReBox V8 — CUSTOMER DESKTOP / TABLET REDESIGN
Clean canvas + true right rail + builder workspace.
Mobile styles remain unchanged.
============================================================ */
@media (min-width:768px){
:root{--customer-rail:232px}
body{background:#f3f6f4!important;color:var(--text-main);overflow-x:hidden}
/* Physical right rail — independent from RTL logical properties. */
.app-layout{display:block!important;position:relative!important;min-height:100vh!important;width:100%!important;direction:ltr!important}
.app-layout>.app-shell{
width:calc(100% - var(--customer-rail))!important;
margin:0!important;margin-right:var(--customer-rail)!important;margin-left:0!important;
max-width:none!important;min-height:100vh!important;padding-bottom:0!important;
direction:rtl!important;background:#f3f6f4!important;
}
.sidebar{
display:flex!important;position:fixed!important;top:0!important;right:0!important;left:auto!important;
width:var(--customer-rail)!important;height:100dvh!important;min-height:100vh!important;
padding:28px 16px!important;background:rgba(255,255,255,.97)!important;
border:0!important;border-left:1px solid rgba(31,36,48,.07)!important;
box-shadow:-18px 0 45px rgba(31,36,48,.055)!important;z-index:90!important;
}
.sidebar__nav{gap:7px!important}
.sidebar__link{
width:100%!important;min-height:54px!important;padding:12px 14px!important;
justify-content:flex-start!important;gap:13px!important;border-radius:16px!important;
font-size:14px!important;font-weight:900!important;color:#70777d!important;
}
.sidebar__link .icon-svg{width:23px;height:23px;color:currentColor}
.sidebar__link-label{display:inline!important}
.sidebar__link--active,.sidebar__link.is-active{
background:linear-gradient(135deg,#eff9ef 0%,#e7f5e8 100%)!important;
color:#4aa650!important;box-shadow:inset 0 0 0 1px rgba(87,179,90,.18),0 8px 22px rgba(87,179,90,.08)!important;
}
.sidebar__link:hover{transform:none!important;background:#f5f8f6!important;color:var(--text-main)!important}
/* Header belongs to the main canvas, not the rail. */
.app-header{
min-height:78px!important;height:78px!important;padding:0 34px!important;
background:rgba(255,255,255,.96)!important;border-bottom:1px solid rgba(31,36,48,.07)!important;
box-shadow:0 4px 20px rgba(31,36,48,.035)!important;position:sticky!important;top:0!important;z-index:70!important;
}
.app-header__brand{position:absolute!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;margin:0!important}
.app-header__logo{height:43px!important;width:auto!important}
.app-header__actions{margin:0!important;gap:9px!important}
.header-points-pill,.app-header .btn-icon{width:46px!important;height:46px!important;border-radius:15px!important;background:#fff!important;box-shadow:0 6px 18px rgba(31,36,48,.07)!important}
/* Main page canvas. */
#section-index{max-width:1240px!important;margin:0 auto!important;padding:0 30px 52px!important}
#section-index>.builder-hero,
#section-index>.progress-track,
#section-index>.full-banner,
#section-index>.rebox-box-wrap,
#section-index>.order-summary-card,
#section-index>.schedule-summary-card,
#section-index>.container.section{width:100%;box-sizing:border-box}
#section-index>.builder-hero{
margin:24px 0 0!important;border-radius:28px!important;padding:42px 44px 36px!important;
min-height:250px;display:flex;flex-direction:column;align-items:center;justify-content:center;
background:radial-gradient(circle at 10% 20%,rgba(87,179,90,.13),transparent 28%),
radial-gradient(circle at 92% 8%,rgba(242,184,75,.18),transparent 28%),
linear-gradient(135deg,#fffdf7 0%,#f8fbf8 100%)!important;
border:1px solid rgba(31,36,48,.06);box-shadow:0 16px 40px rgba(31,36,48,.055)!important;
}
.builder-hero__title{font-size:clamp(38px,4.1vw,58px)!important;line-height:1.16!important;max-width:850px!important;margin-top:16px!important}
.builder-hero__sub{font-size:16px!important;max-width:700px!important;line-height:1.9!important}
.builder-hero__eyebrow{font-size:13px!important;padding:8px 16px!important}
#section-index>.progress-track{max-width:none!important;margin:22px 0 0!important;padding:0 4px!important;display:flex!important}
.progress-track__bar{height:8px!important;gap:8px!important}
.progress-track__label{font-size:14px!important;min-width:46px!important}
#section-index>.full-banner{margin:18px 0 0!important;border-radius:18px!important;padding:16px 20px!important}
/* Builder workspace: box left, live summary right. */
#section-index{display:grid!important;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:22px!important;align-items:start}
#section-index>.builder-hero{grid-column:1/-1}
#section-index>.progress-track{grid-column:1/-1}
#section-index>.full-banner{grid-column:1/-1}
#section-index>.rebox-box-wrap{grid-column:1;grid-row:auto;margin:0!important;padding:0!important;max-width:none!important;align-self:start}
#section-index>.order-summary-card{grid-column:2;margin:0!important;max-width:none!important;align-self:start;position:sticky;top:100px}
#section-index>.schedule-summary-card{grid-column:2;margin:0!important;max-width:none!important}
#section-index>.container.section{grid-column:1/-1;margin:0!important}
#section-index>.rebox-box-wrap .rebox-box{max-width:650px!important;width:100%!important;margin:0 auto!important;aspect-ratio:1/1!important;min-height:0!important;padding:15px!important;gap:14px!important;border-radius:30px!important}
#section-index>.rebox-box-wrap .rebox-quadrant{border-radius:23px!important;min-height:0!important;padding:24px!important;gap:10px!important}
#section-index>.rebox-box-wrap .rebox-quadrant__icon{font-size:48px!important}
#section-index>.rebox-box-wrap .rebox-quadrant__name{font-size:17px!important}
#section-index>.rebox-box-wrap .rebox-quadrant__cta{font-size:13px!important;padding:9px 17px!important}
#section-index>.order-summary-card:not(:empty){
border-radius:24px!important;padding:22px!important;background:#fff!important;
border:1px solid rgba(31,36,48,.07)!important;box-shadow:0 14px 34px rgba(31,36,48,.07)!important;
}
#section-index>.order-summary-card:empty{display:none!important}
/* Desktop/tablet CTA is a normal section card — never an overlay. */
.sticky-bar{
position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;transform:none!important;
width:calc(100% - var(--customer-rail))!important;max-width:none!important;margin:0!important;
border-radius:0!important;border-top:1px solid rgba(31,36,48,.07)!important;
background:rgba(255,255,255,.97)!important;box-shadow:0 -8px 28px rgba(31,36,48,.06)!important;
padding:14px 30px!important;z-index:55!important;
}
.sticky-bar__row{max-width:1240px!important;margin:0 auto!important;min-height:58px!important;gap:16px!important}
.sticky-bar__info{background:#f7f9f8;border-radius:16px;padding:9px 14px;min-width:220px}
.sticky-bar__count{font-size:11px!important}.sticky-bar__price{font-size:18px!important}
.sticky-bar__actions{gap:10px!important}
.sticky-bar .btn{min-height:48px!important;border-radius:15px!important;padding-inline:20px!important}
.sticky-bar .btn-primary{min-width:190px!important;box-shadow:0 9px 22px rgba(87,179,90,.22)!important}
/* Products and other customer screens use the same readable canvas. */
#section-products,#section-boxes,#section-rewards,#section-settings,#section-review,#section-schedule{max-width:1240px!important;margin:0 auto!important;padding-inline:30px!important}
}
/* iPad / tablet: preserve the two-column visual only when there is enough room. */
@media (min-width:768px) and (max-width:899px){
:root{--customer-rail:218px}
#section-index{padding:0 22px 42px!important;display:block!important}
#section-index>.builder-hero{min-height:215px;padding:32px 24px 28px!important}
.builder-hero__title{font-size:36px!important}
.builder-hero__sub{font-size:14px!important}
#section-index>.rebox-box-wrap{margin-top:20px!important}
#section-index>.rebox-box-wrap .rebox-box{max-width:560px!important}
#section-index>.order-summary-card{margin:20px auto 0!important;max-width:560px!important;position:static!important}
.sticky-bar{width:calc(100% - var(--customer-rail))!important;padding:12px 22px!important}
.sticky-bar__row{max-width:700px!important}
}
@media (min-width:900px){
:root{--customer-rail:250px}
}
@media (min-width:1200px){
:root{--customer-rail:280px}
#section-index{padding-inline:42px!important}
}
/* ============================================================
ReBox V9 — TARGETED CUSTOMER BOX FIXES
Only: home box color + box detail schedule/content presentation.
============================================================ */
/* Restore the original light cream ReBox surface on the home builder. */
#section-index .rebox-box{
background:linear-gradient(155deg,#F6E9D2 0%,#EDDBBC 55%,#E3CDA3 100%) !important;
border:0 !important;
}
/* Box detail: make the delivery schedule impossible to miss. */
.customer-box-detail-view .status-card{
position:relative;
overflow:hidden;
padding:26px !important;
}
.customer-box-detail-view .status-card__delivery{
position:relative;
z-index:1;
}
.customer-box-detail-view .status-card__schedule-row{
position:relative;
z-index:1;
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin-top:10px;
padding:12px 14px;
border-radius:15px;
background:rgba(255,255,255,.72);
border:1px dashed rgba(87,179,90,.20);
}
.customer-box-detail-view .status-card__schedule-label{
color:var(--text-muted);
font-size:11px;
font-weight:800;
}
.customer-box-detail-view .status-card__schedule-value{
color:#318c38;
font-size:12px;
font-weight:900;
}
/* Category explorer: clear cards, stronger hierarchy and a real summary area. */
.customer-box-detail-view .box-contents{
display:grid !important;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:14px !important;
align-items:start;
}
.customer-box-detail-view .box-category-card{
min-width:0;
border-radius:22px;
background:#fff;
box-shadow:0 9px 26px rgba(31,36,48,.055);
}
.customer-box-detail-view .box-category-card__head{
min-height:76px;
padding:13px 15px;
}
.customer-box-detail-view .box-category-card__icon{
width:52px;height:52px;flex-basis:52px;border-radius:17px;
}
.customer-box-detail-view .box-category-card__title strong{font-size:14px}
.customer-box-detail-view .box-category-card__title small{font-size:10px}
.customer-box-detail-view .box-category-product{
grid-template-columns:44px minmax(0,1fr) auto;
gap:10px;
padding:10px 0;
}
.customer-box-detail-view .box-category-product__media{width:44px;height:44px;border-radius:14px}
.customer-box-detail-view .box-category-product__info strong{font-size:11px}
.customer-box-detail-view .box-category-product__info span{font-size:9px}
.customer-box-detail-view .box-category-product__price{font-size:11px}
.customer-box-detail-view .box-price-summary{
grid-column:1 / -1;
margin-top:0;
border-radius:24px;
padding:18px 20px;
}
.customer-box-detail-view .box-price-summary__head{font-size:14px}
.customer-box-detail-view .box-price-summary__row{font-size:12px}
.customer-box-detail-view .box-price-summary__total strong{font-size:21px}
/* Actions become a deliberate control panel instead of generic buttons. */
.customer-box-detail-view .actions-grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:14px !important;
}
.customer-box-detail-view .action-tile{
min-height:124px !important;
border-radius:22px !important;
padding:18px 14px !important;
gap:10px !important;
}
.customer-box-detail-view .action-tile__icon{
width:52px !important;height:52px !important;border-radius:17px !important;
}
.customer-box-detail-view .action-tile__text,
.customer-box-detail-view .action-tile > :last-child:not(.action-tile__icon){
font-size:13px;
}
@media (min-width:768px){
.customer-box-detail-view .container.section{max-width:1120px;margin-inline:auto}
.customer-box-detail-view #orderContent{
padding-bottom:30px;
}
.customer-box-detail-view .status-card__delivery-item{
min-height:72px;
display:flex;
flex-direction:column;
justify-content:center;
}
}
@media (max-width:767px){
.customer-box-detail-view .box-contents{grid-template-columns:1fr !important}
.customer-box-detail-view .box-price-summary{grid-column:auto}
.customer-box-detail-view .actions-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.customer-box-detail-view .action-tile{min-height:112px !important}
}
@media (max-width:420px){
.customer-box-detail-view .status-card{padding:20px !important}
.customer-box-detail-view .status-card__schedule-row{align-items:flex-start;flex-direction:column;gap:4px}
.customer-box-detail-view .actions-grid{gap:10px !important}
.customer-box-detail-view .action-tile{min-height:104px !important;padding:14px 10px !important}
.customer-box-detail-view .action-tile__icon{width:46px !important;height:46px !important}
}
/* HOME BUILDER ACTIONS — integrated below the ReBox only. */
#section-index > .home-builder-actions {
position:relative!important; left:auto!important; right:auto!important; bottom:auto!important; top:auto!important; transform:none!important;
width:calc(100% - 40px)!important; max-width:920px!important; margin:18px auto 0!important;
padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px))!important;
border:1px solid var(--border-soft)!important; border-radius:24px!important;
background:rgba(255,255,255,.96)!important; box-shadow:0 16px 35px rgba(31,36,48,.10)!important; z-index:5!important;
}
#section-index > .home-builder-actions .sticky-bar__row { max-width:none!important; margin:0!important; }
@media (max-width:767px){
#section-index > .home-builder-actions { width:calc(100% - 28px)!important; margin:18px auto 22px!important; border-radius:24px!important; }
#section-index > .home-builder-actions .sticky-bar__row { gap:10px!important; }
#section-index > .home-builder-actions .sticky-bar__info { min-width:0!important; }
}
@media (min-width:768px){
#section-index > .home-builder-actions { grid-column:1!important; width:100%!important; max-width:650px!important; margin:22px auto 0!important; box-sizing:border-box!important; }
#section-index > .home-builder-actions .sticky-bar__row { min-height:58px!important; }
}
/* ============================================================
ReBox V12 — RESTORE CATEGORY COLORS ON HOME BUILDER
Uses the existing category palette from the catalog, with soft
gradients so every section keeps its own polished identity.
============================================================ */
#section-index .rebox-quadrant--meat,
#section-index .rebox-quadrant--dairy,
#section-index .rebox-quadrant--canned,
#section-index .rebox-quadrant--essentials{
border:1px solid rgba(255,255,255,.58)!important;
}
/* Assigned but not yet populated: a visible, gentle category tint. */
#section-index .rebox-quadrant--meat:not(.is-selected){
background:linear-gradient(145deg,color-mix(in srgb,var(--cat-color) 11%,#fff) 0%,color-mix(in srgb,var(--cat-color) 22%,#fff) 100%)!important;
--quad-text:#c94b3c;
}
#section-index .rebox-quadrant--dairy:not(.is-selected){
background:linear-gradient(145deg,color-mix(in srgb,var(--cat-color) 11%,#fff) 0%,color-mix(in srgb,var(--cat-color) 22%,#fff) 100%)!important;
--quad-text:#32843a;
}
#section-index .rebox-quadrant--canned:not(.is-selected){
background:linear-gradient(145deg,color-mix(in srgb,var(--cat-color) 10%,#fff) 0%,color-mix(in srgb,var(--cat-color) 20%,#fff) 100%)!important;
--quad-text:#9a7310;
}
#section-index .rebox-quadrant--essentials:not(.is-selected){
background:linear-gradient(145deg,color-mix(in srgb,var(--cat-color) 10%,#fff) 0%,color-mix(in srgb,var(--cat-color) 20%,#fff) 100%)!important;
--quad-text:#176ba8;
}
/* Populated: the original category color, softened into a premium gradient. */
#section-index .rebox-quadrant--meat.is-selected,
#section-index .rebox-quadrant--dairy.is-selected,
#section-index .rebox-quadrant--canned.is-selected,
#section-index .rebox-quadrant--essentials.is-selected{
background:linear-gradient(145deg,
color-mix(in srgb,var(--cat-color) 82%,#fff) 0%,
color-mix(in srgb,var(--cat-color) 96%,#000) 100%)!important;
}
#section-index .rebox-quadrant--meat.is-selected,
#section-index .rebox-quadrant--dairy.is-selected,
#section-index .rebox-quadrant--essentials.is-selected{
--quad-text:#fff;
}
#section-index .rebox-quadrant--canned.is-selected{
--quad-text:#5a4308;
}
#section-index .rebox-quadrant--canned.is-selected .rebox-quadrant__name,
#section-index .rebox-quadrant--canned.is-selected .rebox-quadrant__edit{
color:#5a4308!important;
text-shadow:none!important;
}
#section-index .rebox-quadrant--meat.is-selected .rebox-quadrant__name,
#section-index .rebox-quadrant--dairy.is-selected .rebox-quadrant__name,
#section-index .rebox-quadrant--essentials.is-selected .rebox-quadrant__name{
color:#fff!important;
}
/* ============================================================
ReBox V13 — CUSTOMER DESKTOP SHELL ALIGNMENT
Desktop only: full-width header + right sidebar below header.
Mobile layout is intentionally untouched.
============================================================ */
@media (min-width: 768px){
:root{ --customer-header-h:78px; }
/* Header spans the entire viewport, including the area above the rail. */
.app-header{
position:fixed!important;
top:0!important;
left:0!important;
right:0!important;
width:100vw!important;
height:var(--customer-header-h)!important;
min-height:var(--customer-header-h)!important;
box-sizing:border-box!important;
padding:0 34px!important;
z-index:200!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
direction:rtl!important;
}
.app-header__brand{
position:static!important;
left:auto!important;
right:auto!important;
transform:none!important;
order:1!important;
margin:0!important;
}
.app-header__logo{height:43px!important;width:auto!important;}
.app-header__actions{
order:2!important;
margin:0!important;
display:flex!important;
align-items:center!important;
gap:9px!important;
direction:ltr!important;
}
/* Right navigation rail starts immediately under the header. */
.sidebar{
top:var(--customer-header-h)!important;
bottom:0!important;
height:calc(100dvh - var(--customer-header-h))!important;
min-height:calc(100vh - var(--customer-header-h))!important;
z-index:190!important;
}
/* The content canvas begins below the fixed header and stays left of the rail. */
.app-layout>.app-shell{
width:calc(100% - var(--customer-rail))!important;
margin-right:var(--customer-rail)!important;
margin-left:0!important;
min-height:100vh!important;
padding-top:var(--customer-header-h)!important;
box-sizing:border-box!important;
}
/* Keep the desktop content visually centered inside the available canvas. */
#section-index,
#section-products,
#section-boxes,
#section-rewards,
#section-settings,
#section-review,
#section-schedule{
box-sizing:border-box!important;
width:100%!important;
margin-left:auto!important;
margin-right:auto!important;
}
/* Home follows the mobile hierarchy on large screens: hero → progress → box → actions. */
#section-index{
display:block!important;
max-width:1240px!important;
padding:0 42px 52px!important;
}
#section-index>.builder-hero{
width:100%!important;
margin:0 auto!important;
}
#section-index>.progress-track{
width:100%!important;
margin:22px auto 0!important;
}
#section-index>.full-banner{
width:100%!important;
margin:18px auto 0!important;
}
#section-index>.rebox-box-wrap{
width:100%!important;
max-width:none!important;
margin:24px auto 0!important;
padding:0!important;
}
#section-index>.rebox-box-wrap .rebox-box{
max-width:720px!important;
width:100%!important;
margin:0 auto!important;
}
#section-index>.home-builder-actions{
display:block!important;
width:min(720px,100%)!important;
max-width:720px!important;
margin:24px auto 0!important;
box-sizing:border-box!important;
}
#section-index>.order-summary-card{
display:none!important;
}
#section-index>.schedule-summary-card{
width:min(720px,100%)!important;
margin:24px auto 0!important;
}
}
/* ============================================================
ReBox V14 — CUSTOMER DESKTOP/TABLET VIEWPORT FIT
- Never let a previous customer section bleed into the active one.
- Home builder CTA stays fixed at the bottom of the usable canvas.
- Hero + full box are sized to fit the viewport without requiring
vertical scrolling on iPad/desktop in normal landscape use.
- Mobile (<768px) is intentionally untouched.
============================================================ */
@media (min-width:768px){
/* Hard visual isolation between routed customer sections. */
body.customer-section-rewards #section-index,
body.customer-section-boxes #section-index,
body.customer-section-map #section-index,
body.customer-section-settings #section-index,
body.customer-section-products #section-index,
body.customer-section-review #section-index,
body.customer-section-schedule #section-index,
body.customer-section-catalog #section-index,
body.customer-section-claim #section-index{
display:none!important;
}
/* Fixed builder actions: always visible at the bottom of the content
canvas, while the right navigation rail remains independent. */
body.customer-section-index #section-index > .home-builder-actions{
position:fixed!important;
left:0!important;
right:var(--customer-rail)!important;
bottom:0!important;
width:auto!important;
max-width:none!important;
margin:0!important;
border-radius:26px 26px 0 0!important;
padding:12px 28px calc(12px + env(safe-area-inset-bottom,0px))!important;
z-index:180!important;
background:rgba(255,255,255,.97)!important;
backdrop-filter:blur(16px)!important;
-webkit-backdrop-filter:blur(16px)!important;
box-shadow:0 -12px 34px rgba(31,36,48,.10)!important;
}
body.customer-section-index #section-index > .home-builder-actions .sticky-bar__row{
width:min(1120px,100%)!important;
min-height:58px!important;
margin:0 auto!important;
}
/* Reserve exactly the bottom action height so it never covers the box. */
body.customer-section-index .app-shell{
padding-bottom:108px!important;
}
/* Viewport-aware home layout. The hero remains prominent while the box
gets the remaining vertical space and keeps its 1:1 geometry. */
body.customer-section-index #section-index{
min-height:calc(100dvh - var(--customer-header-h))!important;
padding-bottom:124px!important;
}
body.customer-section-index #section-index > .builder-hero{
min-height:clamp(190px,25dvh,250px)!important;
margin-top:18px!important;
padding:30px 38px 26px!important;
}
body.customer-section-index #section-index > .builder-hero .builder-hero__title{
font-size:clamp(34px,4vw,54px)!important;
line-height:1.14!important;
}
body.customer-section-index #section-index > .progress-track{
margin-top:16px!important;
}
body.customer-section-index #section-index > .rebox-box-wrap{
margin-top:16px!important;
display:flex!important;
justify-content:center!important;
align-items:flex-start!important;
}
body.customer-section-index #section-index > .rebox-box-wrap .rebox-box{
width:min(100%,650px,calc(100dvh - var(--customer-header-h) - 440px))!important;
max-width:650px!important;
aspect-ratio:1/1!important;
height:auto!important;
}
}
/* Short desktop/iPad landscape heights: compact the hero slightly so the
entire box still fits above the fixed action bar. */
@media (min-width:768px) and (max-height:900px){
body.customer-section-index #section-index > .builder-hero{
min-height:170px!important;
padding:22px 30px 20px!important;
margin-top:12px!important;
}
body.customer-section-index #section-index > .builder-hero .builder-hero__title{
font-size:clamp(30px,3.6vw,46px)!important;
}
body.customer-section-index #section-index > .builder-hero .builder-hero__sub{
margin-top:8px!important;
line-height:1.6!important;
}
body.customer-section-index #section-index > .progress-track{margin-top:12px!important}
body.customer-section-index #section-index > .rebox-box-wrap{margin-top:12px!important}
body.customer-section-index #section-index > .rebox-box-wrap .rebox-box{
width:min(100%,600px,calc(100dvh - 390px))!important;
}
}
/* Tablet portrait: the available canvas is taller, so allow a larger box
while keeping the action bar fixed and separate from the content. */
@media (min-width:768px) and (max-width:899px){
body.customer-section-index #section-index{
padding-inline:22px!important;
}
body.customer-section-index #section-index > .rebox-box-wrap .rebox-box{
width:min(100%,560px,calc(100dvh - 500px))!important;
}
body.customer-section-index #section-index > .home-builder-actions{
right:var(--customer-rail)!important;
padding-inline:18px!important;
}
}
/* ============================================================
ReBox V15 — DESKTOP/TABLET BOX PROPORTION + VIEWPORT COMPOSITION
Final visual correction for the customer home builder.
Mobile (<768px) is intentionally untouched.
============================================================ */
@media (min-width:768px){
/* Keep the complete builder inside the usable viewport. */
body.customer-section-index #section-index{
height:calc(100dvh - var(--customer-header-h))!important;
min-height:0!important;
box-sizing:border-box!important;
overflow:hidden!important;
padding:12px 42px 112px!important;
}
/* Compact the hero only enough to make room for the full-size box. */
body.customer-section-index #section-index > .builder-hero{
height:clamp(118px,17dvh,150px)!important;
min-height:0!important;
box-sizing:border-box!important;
margin:0 auto!important;
padding:18px 34px 16px!important;
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
}
body.customer-section-index #section-index > .builder-hero .builder-hero__title{
font-size:clamp(30px,3.3vw,48px)!important;
line-height:1.12!important;
margin:5px 0 0!important;
}
body.customer-section-index #section-index > .builder-hero .builder-hero__sub{
margin-top:7px!important;
font-size:14px!important;
line-height:1.45!important;
}
body.customer-section-index #section-index > .progress-track{
margin:10px auto 0!important;
}
/* The box is intentionally large and square — never a narrow card. */
body.customer-section-index #section-index > .rebox-box-wrap{
margin:12px auto 0!important;
width:100%!important;
max-width:none!important;
padding:0!important;
display:flex!important;
justify-content:center!important;
align-items:flex-start!important;
}
body.customer-section-index #section-index > .rebox-box-wrap .rebox-box{
width:min(560px, calc(100dvh - 320px), 100%)!important;
max-width:560px!important;
min-width:0!important;
height:auto!important;
aspect-ratio:1 / 1!important;
padding:14px!important;
gap:12px!important;
border-radius:30px!important;
flex:0 0 auto!important;
}
/* Give the four sections enough breathing room at the larger scale. */
body.customer-section-index #section-index > .rebox-box-wrap .rebox-quadrant{
min-width:0!important;
min-height:0!important;
padding:16px!important;
gap:8px!important;
border-radius:23px!important;
box-sizing:border-box!important;
}
body.customer-section-index #section-index > .rebox-box-wrap .rebox-quadrant__icon{
font-size:clamp(38px,4.1vw,52px)!important;
}
body.customer-section-index #section-index > .rebox-box-wrap .rebox-quadrant__name{
font-size:clamp(15px,1.35vw,19px)!important;
}
body.customer-section-index #section-index > .rebox-box-wrap .rebox-quadrant__cta{
font-size:clamp(11px,1vw,14px)!important;
padding:7px 15px!important;
}
body.customer-section-index #section-index > .rebox-box-wrap .rebox-quadrant__pill{
min-width:88px!important;
padding:6px 13px!important;
}
/* Prevent the fixed action bar from visually merging into the box. */
body.customer-section-index #section-index > .home-builder-actions{
padding-top:10px!important;
padding-bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;
}
}
/* Short landscape screens: prioritize the full box while preserving the hero. */
@media (min-width:768px) and (max-height:820px){
body.customer-section-index #section-index{
padding-top:8px!important;
}
body.customer-section-index #section-index > .builder-hero{
height:108px!important;
padding:12px 28px!important;
}
body.customer-section-index #section-index > .builder-hero .builder-hero__title{
font-size:clamp(28px,3vw,42px)!important;
}
body.customer-section-index #section-index > .builder-hero .builder-hero__sub{
font-size:12px!important;
margin-top:4px!important;
}
body.customer-section-index #section-index > .progress-track{margin-top:7px!important}
body.customer-section-index #section-index > .rebox-box-wrap{margin-top:8px!important}
body.customer-section-index #section-index > .rebox-box-wrap .rebox-box{
width:min(500px, calc(100dvh - 270px), 100%)!important;
}
}
/* iPad portrait: use the available width/height without making the box
artificially tiny. The sidebar remains unchanged. */
@media (min-width:768px) and (max-width:899px){
body.customer-section-index #section-index{padding-inline:22px!important}
body.customer-section-index #section-index > .rebox-box-wrap .rebox-box{
width:min(540px, calc(100dvh - 300px), 100%)!important;
}
}
/* ============================================================
ReBox V7 — MAP EXPERIENCE / PHONE + TABLET + DESKTOP
============================================================ */
.google-map-frame{isolation:isolate;position:relative;min-height:0!important;height:560px!important;background:#e8efea!important}
.google-map-canvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;z-index:1}
.google-map-embed{display:none!important}
.google-map-loading{z-index:20!important}
.map-page__visual{position:relative}
.map-page__visual:after{content:"";position:absolute;inset:48px 10px 44px;pointer-events:none;border:1px solid rgba(255,255,255,.65);border-radius:20px;z-index:2}
.map-legend{position:relative;z-index:3}
/* ReBox pins — green primary, yellow nearest, coral user */
.rebox-map-div-icon{background:transparent!important;border:0!important}
.rebox-map-pin{width:46px;height:56px;display:grid;place-items:center;filter:drop-shadow(0 7px 11px rgba(31,36,48,.22));transform:scale(var(--pin-scale,1));transform-origin:50% 90%;transition:transform .18s ease,filter .18s ease}
.rebox-map-pin:before{content:"";position:absolute;width:38px;height:38px;border-radius:50% 50% 50% 0;background:var(--pin);border:3px solid #fff;transform:rotate(-45deg);box-shadow:0 4px 12px rgba(31,36,48,.18)}
.rebox-map-pin:after{content:"";position:absolute;bottom:0;width:8px;height:8px;border-radius:50%;background:var(--pin);opacity:.28;filter:blur(2px)}
.rebox-map-pin span{position:relative;z-index:1;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--pin);font:900 12px/1 Roboto,sans-serif;transform:translateY(-5px)}
.rebox-map-pin--user:before{border-radius:50%;transform:none;width:26px;height:26px;background:var(--pin);box-shadow:0 0 0 7px rgba(232,117,99,.16),0 5px 16px rgba(31,36,48,.22)}
.rebox-map-pin--user span{width:9px;height:9px;background:#fff;transform:none;font-size:0}
.rebox-map-pin--nearest:before{box-shadow:0 0 0 6px rgba(242,184,75,.16),0 7px 18px rgba(31,36,48,.22)}
.rebox-map-cluster{background:transparent!important;border:0!important}
.rebox-map-cluster span{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(145deg,#57B35A,#3f9945);color:#fff;border:4px solid rgba(255,255,255,.92);box-shadow:0 8px 20px rgba(31,36,48,.2);font:900 14px/1 Roboto,sans-serif}
.leaflet-container{font-family:"Noto Sans Arabic",sans-serif;background:#e8efea}
.leaflet-control-zoom{border:0!important;box-shadow:0 8px 20px rgba(31,36,48,.13)!important;border-radius:14px!important;overflow:hidden}
.leaflet-control-zoom a{width:40px!important;height:40px!important;line-height:40px!important;color:#25302a!important;background:rgba(255,255,255,.96)!important;border:0!important;font-weight:800}
.leaflet-control-attribution{font-size:8px!important;background:rgba(255,255,255,.78)!important;padding:2px 5px!important}
.rebox-map-popup{min-width:210px;display:flex;flex-direction:column;gap:7px;padding:2px 1px;font-family:"Noto Sans Arabic",sans-serif}
.rebox-map-popup__top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.rebox-map-popup__badge{font-size:9px;font-weight:900;color:#3f9945;background:rgba(87,179,90,.1);padding:4px 7px;border-radius:999px}
.rebox-map-popup__distance{font-size:9px;color:#7b8389;font-weight:800}
.rebox-map-popup__name{font-size:15px;color:#1e2521;font-weight:900}
.rebox-map-popup__address,.rebox-map-popup__rating{font-size:10px;color:#6d7670;line-height:1.6}
.rebox-map-popup__button{margin-top:3px;border:0;border-radius:12px;background:#57B35A;color:#fff;min-height:38px;font:900 11px "Noto Sans Arabic",sans-serif;cursor:pointer;box-shadow:0 5px 14px rgba(87,179,90,.22)}
.leaflet-popup-content-wrapper{border-radius:18px!important;box-shadow:0 15px 40px rgba(31,36,48,.18)!important}
.leaflet-popup-tip{box-shadow:3px 3px 7px rgba(31,36,48,.05)!important}
.map-empty-state{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:120px!important}
.map-empty-state strong{font-size:13px;color:var(--text-main)}
.map-empty-state span{font-size:11px;color:var(--text-muted)}
.map-mini-spinner{width:20px;height:20px;border:2px solid rgba(31,36,48,.12);border-top-color:var(--rebox-green);border-radius:50%;animation:mapspin .7s linear infinite}
.map-merchant-item__pin{background:rgba(87,179,90,.10)!important;color:var(--rebox-green)!important}
.map-merchant-item__pin span{font:900 12px Roboto,sans-serif}
.map-merchant-item.is-selected .map-merchant-item__pin{background:rgba(242,184,75,.15)!important;color:#b67b13!important}
.map-merchant-item.is-selected .map-merchant-item__distance{color:#b67b13!important}
.map-page__locate.is-loading{opacity:.72;pointer-events:none}
/* Desktop */
@media (min-width:1200px){
.customer-map-page{padding-top:28px!important}
.map-page__grid{max-width:1280px!important;grid-template-columns:390px minmax(0,1fr)!important;gap:20px!important}
.map-page__hero{max-width:1280px!important}
.google-map-frame{height:calc(100dvh - 270px)!important;min-height:560px!important;max-height:760px!important}
.map-page__panel{min-height:calc(100dvh - 270px)!important}
}
/* Tablet: map first, controls second, generous touch targets */
@media (min-width:768px) and (max-width:1199px){
.customer-map-page{padding:20px 0 32px!important}
.map-page__hero{padding:0 18px!important}
.map-page__grid{display:grid!important;grid-template-columns:1fr!important;padding:0 18px!important;gap:14px!important}
.map-page__visual{order:1!important;padding:9px!important}
.map-page__panel{order:2!important;min-height:0!important;padding:16px!important}
.google-map-frame{height:min(62dvh,620px)!important;min-height:460px!important}
.map-merchant-list{max-height:360px!important;grid-template-columns:repeat(2,minmax(0,1fr));display:grid!important}
.map-merchant-item{min-height:76px}
}
/* Phone */
@media (max-width:767px){
.customer-map-page{padding:10px 0 20px!important;min-height:calc(100dvh - var(--header-h))!important}
.map-page__hero{padding:0 12px!important;gap:10px!important;margin-bottom:10px!important}
.map-page__hero h1{font-size:25px!important;letter-spacing:-.5px!important;margin-top:4px!important}
.map-page__hero p{font-size:11.5px!important;line-height:1.7!important;max-width:360px}
.map-page__locate{height:48px!important;border-radius:15px!important;font-size:13px!important}
.map-page__grid{display:flex!important;flex-direction:column!important;padding:0!important;gap:10px!important}
.map-page__visual{order:1!important;padding:6px!important;border-radius:20px!important;box-shadow:0 8px 28px rgba(31,36,48,.08)!important}
.map-page__panel{order:2!important;padding:12px!important;border-radius:20px!important;box-shadow:0 8px 28px rgba(31,36,48,.07)!important}
.map-visual__toolbar{position:absolute;top:12px;left:12px;right:12px;z-index:10;padding:0;pointer-events:none}
.map-visual__status{background:rgba(255,255,255,.92);backdrop-filter:blur(8px);padding:8px 10px;border-radius:12px;box-shadow:0 7px 18px rgba(31,36,48,.10);font-size:9px;pointer-events:auto;max-width:62%}
#mapCenterNearestBtn{display:none}
.google-map-frame{height:56dvh!important;min-height:350px!important;max-height:520px!important;border-radius:17px!important}
.map-page__visual:after{inset:6px;border-radius:17px}
.map-legend{padding:8px 4px 1px;gap:11px;font-size:9px}
.map-panel__top{margin-bottom:10px}
.map-panel__top h2{font-size:18px}
.map-live-pill{font-size:9px;padding:6px 8px}
.map-nearest-card{padding:11px;border-radius:15px;margin-bottom:8px}
.map-nearest-card__icon{width:40px;height:40px;border-radius:12px}
#mapFindNearestBtn{min-height:46px;border-radius:14px}
.map-search-wrap{height:44px;margin-top:9px;border-radius:13px}
.map-list-head{margin:13px 0 7px}
.map-merchant-list{max-height:none!important;overflow:visible!important;gap:7px}
.map-merchant-item{min-height:68px;padding:9px;border-radius:14px}
.map-merchant-item__pin{width:38px;height:38px;flex-basis:38px}
.map-merchant-item__name{font-size:11px}
.map-merchant-item__meta{font-size:9px;line-height:1.5}
.map-merchant-item__distance{font-size:10px}
.leaflet-control-zoom{display:none!important}
.leaflet-control-attribution{font-size:7px!important}
.rebox-map-popup{min-width:190px}
}
@media (max-width:380px){
.google-map-frame{height:52dvh!important;min-height:320px!important}
.map-page__hero h1{font-size:23px!important}
.map-merchant-item__meta{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
}
/* Reduced motion */
@media (prefers-reduced-motion:reduce){
.rebox-map-pin,.map-merchant-item{transition:none!important}
}
/* ============================================================
ReBox V13 — CUSTOMER BOX PRODUCTS EXPERIENCE
Premium catalog layout + selection checkout bar
============================================================ */
#section-products {
background: linear-gradient(180deg, #f8faf9 0%, #f2f5f3 100%);
min-height: calc(100dvh - var(--customer-header-h));
padding-bottom: 150px;
}
#section-products .category-header {
position: relative;
padding: 28px 22px 18px;
background: transparent;
}
#section-products .category-header::before {
content: '';
position: absolute;
inset: 0 0 auto;
height: 190px;
background: radial-gradient(circle at 10% 0%, rgba(87,179,90,.15), transparent 34%),
radial-gradient(circle at 90% 10%, rgba(255,194,71,.13), transparent 32%);
pointer-events: none;
}
.products-page-head {
position: relative;
max-width: 1240px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0,1fr);
gap: 16px;
}
.products-category-identity {
position: relative;
display: flex;
align-items: center;
gap: 16px;
padding: 4px 2px 2px;
}
.products-category-icon {
width: 72px;
height: 72px;
flex: 0 0 72px;
border-radius: 22px;
background: linear-gradient(145deg,#ffffff 0%,#fff4dc 100%);
border: 1px solid rgba(87,179,90,.10);
box-shadow: 0 14px 35px rgba(31,36,48,.10);
font-size: 36px;
}
.products-category-identity .eyebrow {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--rebox-green);
font-size: 11px;
font-weight: 900;
background: rgba(87,179,90,.09);
border: 1px solid rgba(87,179,90,.12);
border-radius: 999px;
padding: 5px 10px;
}
.products-category-identity h2 {
margin-top: 8px;
font-size: clamp(25px,3vw,34px);
line-height: 1.12;
font-weight: 950;
letter-spacing: -.5px;
}
.products-category-identity p {
max-width: 620px;
margin-top: 7px;
font-size: 13px;
line-height: 1.7;
}
.merchant-filter {
min-height: 68px;
padding: 12px 14px;
border-radius: 20px;
border: 1px solid rgba(87,179,90,.16);
background: rgba(255,255,255,.88);
box-shadow: 0 10px 30px rgba(31,36,48,.07);
}
.merchant-filter__copy strong { font-size: 13px; }
.merchant-filter__copy span:last-child { font-size: 11px; }
.merchant-filter select { min-height: 44px; border-radius: 14px; }
.products-search {
min-height: 52px;
border-radius: 17px;
background: rgba(255,255,255,.94);
box-shadow: 0 8px 25px rgba(31,36,48,.06);
}
#section-products .product-list {
max-width: 1240px;
margin: 0 auto;
padding: 8px 22px 30px;
display: grid;
grid-template-columns: repeat(4,minmax(0,1fr));
gap: 16px;
}
.product-card-modern {
display: flex;
flex-direction: column;
gap: 0;
min-height: 0;
padding: 9px;
border-radius: 24px;
border: 1px solid rgba(31,36,48,.07);
background: rgba(255,255,255,.96);
box-shadow: 0 8px 26px rgba(31,36,48,.075);
overflow: hidden;
}
.product-card-modern:hover { transform: translateY(-3px); box-shadow: 0 16px 35px rgba(31,36,48,.12); }
.product-card-modern.product-item--selected {
border-color: rgba(87,179,90,.48);
box-shadow: 0 0 0 2px rgba(87,179,90,.13), 0 14px 32px rgba(31,36,48,.10);
}
.product-card-modern__media {
width: 100%;
height: 176px;
min-height: 176px;
border-radius: 18px;
background: radial-gradient(circle at 50% 35%, #fff 0%, #fff7e8 62%, #f4efe7 100%);
font-size: 58px;
}
.product-card-modern__media img { transition: transform .35s var(--ease-out); }
.product-card-modern:hover .product-card-modern__media img { transform: scale(1.04); }
.product-card-modern__check {
top: 10px; left: 10px;
width: 30px; height: 30px;
border: 3px solid #fff;
}
.product-card-modern__body {
padding: 13px 7px 5px;
gap: 5px;
}
.product-card-modern__merchant {
order: -1;
padding: 4px 9px;
font-size: 10px;
}
.product-card-modern .product-item__name { font-size: 17px; font-weight: 950; margin-top: 2px; }
.product-card-modern .product-item__unit { font-size: 11px; }
.product-card-modern .product-item__desc { font-size: 11px; line-height: 1.55; min-height: 2.9em; }
.product-card-modern .product-item__rating { margin-top: 3px; }
.product-card-modern__footer {
align-items: center;
margin-top: 10px;
padding-top: 10px;
border-top: 1px solid rgba(31,36,48,.06);
}
.product-card-modern .product-item__price { font-size: 18px; font-weight: 950; }
.product-card-modern__old-price { font-size: 10px; }
.product-stepper {
background: #f3f6f4;
border: 1px solid rgba(87,179,90,.10);
padding: 4px;
}
.product-stepper .btn-icon { width: 34px; height: 34px; }
.product-stepper__add { box-shadow: 0 7px 16px rgba(87,179,90,.22) !important; }
/* Bottom selection summary — not a generic sticky bar anymore. */
.products-save-bar {
position: fixed;
left: 50%;
bottom: max(14px, env(safe-area-inset-bottom, 0px));
transform: translateX(-50%);
width: min(1120px, calc(100% - 34px));
z-index: 190;
padding: 0;
background: transparent;
pointer-events: none;
}
.products-save-bar__inner {
position: relative;
display: grid;
grid-template-columns: minmax(230px,1.25fr) minmax(160px,.7fr) auto;
align-items: center;
gap: 16px;
padding: 13px 15px 13px 18px;
border: 1px solid rgba(255,255,255,.75);
border-radius: 24px;
background: rgba(255,255,255,.94);
box-shadow: 0 20px 55px rgba(31,36,48,.17), 0 2px 10px rgba(31,36,48,.06);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
overflow: hidden;
pointer-events: auto;
}
.products-save-bar__progress {
position: absolute; inset: 0 0 auto;
height: 3px; background: #edf1ee;
}
.products-save-bar__progress span {
display: block; height: 100%; width: 0;
background: linear-gradient(90deg,var(--rebox-green),var(--rebox-yellow),var(--rebox-coral));
transition: width .3s ease;
}
.products-save-bar__summary { display:flex;align-items:center;gap:11px;min-width:0; }
.products-save-bar__icon {
width: 42px;height:42px;flex:0 0 42px;border-radius:14px;display:grid;place-items:center;
background: rgba(87,179,90,.10);color:var(--rebox-green);font-weight:950;font-size:18px;
}
.products-save-bar__copy { min-width:0;display:flex;flex-direction:column; }
.products-save-bar__eyebrow { font-size:10px;color:var(--rebox-green);font-weight:900; }
.products-save-bar__copy strong { font-size:14px;font-weight:950; }
.products-save-bar__copy small { color:var(--text-muted);font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.products-save-bar__total { display:flex;flex-direction:column;gap:2px;padding-inline:16px;border-inline:1px solid rgba(31,36,48,.07); }
.products-save-bar__total span { color:var(--text-muted);font-size:10px; }
.products-save-bar__total strong { color:var(--rebox-green);font-size:21px;font-weight:950;white-space:nowrap; }
.products-save-bar__actions { display:flex;align-items:center;gap:8px; }
.products-save-clear { min-height:46px;padding:0 13px;border:1px solid rgba(31,36,48,.10);border-radius:14px;background:#fff;color:var(--text-muted);font:800 11px inherit;cursor:pointer; }
.products-save-clear:hover { border-color:rgba(239,111,97,.28);color:#c84d42; }
.products-save-btn { min-height:48px;min-width:150px;border-radius:15px;font-size:13px;gap:9px;display:inline-flex;align-items:center;justify-content:center; }
.products-save-btn:disabled { opacity:.5;box-shadow:none; }
@media (min-width:768px) and (max-width:1199px) {
#section-products .product-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
.products-save-bar__inner { grid-template-columns: minmax(200px,1fr) auto auto; }
}
@media (max-width:767px) {
#section-products { padding-bottom: 190px; }
#section-products .category-header { padding: 20px 14px 12px; }
.products-category-identity { align-items:flex-start; }
.products-category-icon { width:58px;height:58px;flex-basis:58px;border-radius:18px;font-size:29px; }
.products-category-identity h2 { font-size:23px; }
.products-category-identity p { font-size:12px; }
.merchant-filter { flex-direction:column;align-items:stretch; }
.merchant-filter select { width:100%;max-width:none; }
#section-products .product-list { grid-template-columns:1fr 1fr;gap:10px;padding:8px 12px 24px; }
.product-card-modern { border-radius:19px;padding:7px; }
.product-card-modern__media { height:128px;min-height:128px;border-radius:14px;font-size:42px; }
.product-card-modern__body { padding:10px 5px 4px; }
.product-card-modern .product-item__name { font-size:14px; }
.product-card-modern .product-item__desc { display:none; }
.product-card-modern .product-item__rating { font-size:10px; }
.product-card-modern__footer { align-items:flex-end;flex-direction:column;gap:8px; }
.product-card-modern .product-item__price { align-self:flex-start;font-size:16px; }
.product-stepper { width:100%;justify-content:space-between; }
.product-stepper .btn-icon { width:32px;height:32px; }
.products-save-bar { width:calc(100% - 18px);bottom:max(8px,env(safe-area-inset-bottom,0px)); }
.products-save-bar__inner { grid-template-columns:1fr auto;gap:10px;padding:12px;border-radius:21px; }
.products-save-bar__summary { grid-column:1; }
.products-save-bar__total { grid-column:2;grid-row:1;border:0;padding:0;text-align:left;align-items:flex-start; }
.products-save-bar__total strong { font-size:18px; }
.products-save-bar__actions { grid-column:1 / -1; }
.products-save-clear { flex:0 0 62px; }
.products-save-btn { flex:1;min-width:0; }
}
@media (max-width:390px) {
#section-products .product-list { grid-template-columns:1fr; }
.product-card-modern { display:grid;grid-template-columns:100px minmax(0,1fr);gap:10px;padding:8px; }
.product-card-modern__media { width:100px;height:116px;min-height:116px; }
.product-card-modern__body { padding:5px 2px; }
.product-card-modern__footer { flex-direction:row;align-items:center; }
}
.products-save-bar.has-selection .products-save-bar__icon { background: var(--rebox-green); color:#fff; box-shadow:0 8px 18px rgba(87,179,90,.22); }
.products-save-bar.has-selection .products-save-bar__progress span { width:100%; }
.products-save-bar:not(.has-selection) .products-save-btn { opacity:.58; }
/* ================================================================
PROFILE V2 — customer profile redesign
================================================================ */
.customer-profile-hub{max-width:1080px!important;padding-top:10px}
.profile-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:22px}
.profile-page-kicker{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:900;color:var(--rebox-green);background:rgba(87,179,90,.09);padding:7px 11px;border-radius:999px}
.profile-page-head h2,.profile-editor__intro h2{font-size:clamp(30px,4vw,42px);line-height:1.1;letter-spacing:-.045em;margin:10px 0 7px}
.profile-page-head p,.profile-editor__intro p{margin:0;color:var(--text-muted);font-size:13px;line-height:1.8}
.profile-page-mark{font-weight:900;font-size:25px;letter-spacing:-.06em;color:#ef6755;opacity:.8}
.profile-showcase{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px;min-height:230px;padding:30px 34px;border-radius:32px;overflow:hidden;color:#fff;background:linear-gradient(135deg,#1e2a22 0%,#273d2b 48%,#57b35a 150%);box-shadow:0 22px 55px rgba(40,82,46,.2)}
.profile-showcase:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 10% 10%,rgba(255,255,255,.15),transparent 30%),radial-gradient(circle at 90% 100%,rgba(255,194,71,.22),transparent 28%);pointer-events:none}
.profile-showcase__glow{position:absolute;width:300px;height:300px;border-radius:50%;background:rgba(255,255,255,.05);left:-100px;bottom:-170px}
.profile-showcase__avatar-wrap{position:relative;z-index:1}
.profile-showcase__avatar{width:122px;height:122px;border-radius:34px;display:grid;place-items:center;background:rgba(255,255,255,.12);border:5px solid rgba(255,255,255,.92);box-shadow:0 16px 35px rgba(0,0,0,.18);overflow:hidden;color:rgba(255,255,255,.78);backdrop-filter:blur(8px)}
.profile-showcase__avatar img{width:100%;height:100%;object-fit:cover}
.profile-showcase__camera{position:absolute;left:-7px;bottom:-7px;width:38px;height:38px;border:3px solid #263b2b;border-radius:50%;background:#ffc247;color:#27352a;font-weight:900;box-shadow:0 7px 18px rgba(0,0,0,.2);cursor:pointer}
.profile-showcase__content{position:relative;z-index:1;min-width:0}
.profile-showcase__eyebrow{font-size:11px;opacity:.72;font-weight:800}
.profile-showcase__name{font-size:clamp(24px,3vw,34px);font-weight:900;letter-spacing:-.04em;margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profile-showcase__email{font-size:13px;opacity:.76;margin-top:5px;direction:ltr;text-align:right;overflow:hidden;text-overflow:ellipsis}
.profile-showcase__chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:17px}.profile-showcase__chips span{font-size:10px;font-weight:800;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.11);border:1px solid rgba(255,255,255,.13)}
.profile-showcase__edit{position:relative;z-index:1;align-self:end;min-height:44px;padding:0 16px;border-radius:15px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.1);color:#fff;font-weight:900;cursor:pointer;backdrop-filter:blur(8px)}
.profile-showcase__edit span{margin-right:7px;color:#ffc247}
.profile-quick-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:16px}
.profile-quick-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;min-height:90px;padding:16px 18px;border:1px solid var(--border-soft);border-radius:22px;background:#fff;box-shadow:0 10px 28px rgba(31,36,48,.055);text-align:right;cursor:pointer;transition:.2s ease;color:var(--text-main)}
.profile-quick-card:hover{transform:translateY(-2px);border-color:rgba(87,179,90,.25);box-shadow:0 15px 32px rgba(31,36,48,.08)}
.profile-quick-card--green{background:linear-gradient(145deg,#f3fbf2,#fff)}
.profile-quick-card__icon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:#f7f8f6;font-size:21px;color:var(--rebox-green);font-weight:900}.profile-quick-card--green .profile-quick-card__icon{background:rgba(87,179,90,.13)}
.profile-quick-card b{display:block;font-size:15px}.profile-quick-card small{display:block;color:var(--text-muted);font-size:11px;margin-top:4px}.profile-quick-card strong{color:var(--rebox-green);font-size:20px}
.profile-logout{width:100%;margin-top:14px;min-height:50px;border:1px solid rgba(217,48,37,.15);border-radius:18px;background:rgba(217,48,37,.035);color:#c83e35;font-weight:900;cursor:pointer}.profile-logout span{margin-left:7px}
.profile-editor{max-width:1080px!important}.profile-back{border:0;background:transparent;color:var(--rebox-green);font-weight:900;cursor:pointer;padding:6px 0}.profile-back span{margin-left:5px}.profile-editor__intro{margin:18px 0 22px}
.profile-photo-card{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:26px;align-items:center;padding:25px;border-radius:28px;background:linear-gradient(135deg,#fff9ec,#fff);border:1px solid rgba(240,174,50,.16);box-shadow:0 15px 38px rgba(31,36,48,.06)}
.profile-photo-card__copy{padding:5px 4px}.profile-photo-card__badge{display:inline-block;padding:6px 10px;border-radius:999px;background:rgba(87,179,90,.1);color:var(--rebox-green);font-size:10px;font-weight:900}.profile-photo-card__copy h3{font-size:24px;letter-spacing:-.03em;margin:12px 0 7px}.profile-photo-card__copy p{max-width:520px;margin:0;color:var(--text-muted);font-size:12px;line-height:1.9}.profile-photo-card__status{display:inline-flex;margin-top:15px;padding:7px 10px;border-radius:10px;background:#f4f6f3;color:#667066;font-size:10px;font-weight:800}.profile-photo-card__status.is-loading{background:rgba(87,179,90,.1);color:#3d8a40;animation:profilePulse 1s ease-in-out infinite alternate}
.profile-photo-card__visual{text-align:center}.profile-photo-card__avatar{width:132px;height:132px;margin:0 auto 12px;border-radius:38px;display:grid;place-items:center;overflow:hidden;background:#f0f2f0;border:5px solid #fff;box-shadow:0 14px 30px rgba(31,36,48,.12);color:#7a827c}.profile-photo-card__avatar img{width:100%;height:100%;object-fit:cover}.profile-photo-card__add{display:block;color:var(--rebox-green);font-size:12px;font-weight:900;cursor:pointer}.profile-photo-card__actions{display:flex;justify-content:center;gap:7px;margin-top:9px}.profile-photo-card__actions .btn{min-height:38px;padding:0 13px;font-size:11px}
.profile-editor-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:16px;margin-top:16px}.profile-data-card,.profile-password-card{padding:24px;border-radius:26px}.profile-section-title{display:flex;align-items:center;gap:12px;margin-bottom:5px}.profile-section-title>span{width:34px;height:34px;display:grid;place-items:center;border-radius:12px;background:var(--rebox-cream);color:#8a6300;font-size:10px;font-weight:900}.profile-section-title h3{margin:0;font-size:18px}.profile-section-title p{margin:3px 0 0;color:var(--text-muted);font-size:10px}.profile-data-card .form-field,.profile-password-card .form-field{margin-top:14px}.profile-data-card input,.profile-password-card input{min-height:54px;border-radius:16px;background:#fafbfa}.profile-save-btn{margin-top:17px;min-height:52px}.profile-save-btn span{font-size:15px}.security-note{display:flex;gap:10px;align-items:center;margin:17px 0 4px;padding:12px 13px;border-radius:16px;background:#f6f8f5;border:1px solid #edf0eb}.security-note>span{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:#fff;color:var(--rebox-green);font-size:18px}.security-note b{display:block;font-size:11px}.security-note small{display:block;color:var(--text-muted);font-size:9px;margin-top:2px}
@keyframes profilePulse{from{opacity:.55}to{opacity:1}}
@media(max-width:900px){.profile-showcase{grid-template-columns:auto minmax(0,1fr);}.profile-showcase__edit{grid-column:1/-1;justify-self:start}.profile-editor-grid{grid-template-columns:1fr}}
@media(max-width:600px){.customer-profile-hub{padding-inline:16px}.profile-page-head{align-items:flex-start;margin-bottom:16px}.profile-page-mark{display:none}.profile-page-head h2,.profile-editor__intro h2{font-size:29px}.profile-showcase{grid-template-columns:1fr;text-align:center;padding:24px 18px 20px;border-radius:27px;gap:12px}.profile-showcase__avatar-wrap{margin:auto}.profile-showcase__avatar{width:106px;height:106px;border-radius:31px}.profile-showcase__camera{left:-4px}.profile-showcase__name{font-size:24px}.profile-showcase__email{text-align:center;font-size:11px}.profile-showcase__chips{justify-content:center;margin-top:12px}.profile-showcase__edit{justify-self:stretch;width:100%;margin-top:4px}.profile-quick-grid{grid-template-columns:1fr;gap:10px}.profile-quick-card{min-height:78px}.profile-photo-card{grid-template-columns:1fr;padding:20px;border-radius:24px;text-align:center}.profile-photo-card__copy h3{font-size:20px}.profile-photo-card__copy p{font-size:11px}.profile-editor-grid{gap:12px}.profile-data-card,.profile-password-card{padding:18px;border-radius:23px}.profile-section-title h3{font-size:16px}.profile-editor__intro{margin:15px 0 17px}.profile-back{font-size:12px}}
@media(min-width:901px){.customer-profile-hub .profile-logout{max-width:330px;margin-right:auto;margin-left:auto}}
/* ============================================================
ReBox V16 — HEADER / BUILDER ACTIONS / INTRO / GOOGLE MAP
============================================================ */
/* The brand is intentionally anchored closer to the physical RIGHT edge. */
.app-header{position:sticky!important;overflow:visible!important}
.app-header__brand{position:absolute!important;right:24px!important;left:auto!important;transform:none!important;margin:0!important;order:0!important;z-index:2!important}
.app-header__actions{position:absolute!important;left:18px!important;right:auto!important;margin:0!important;order:0!important;z-index:3!important}
/* Keep the action card floating just above the bottom navigation with a
deliberate breathing space. This also wins over the old standalone-mode
static rule. */
body.customer-section-index #section-index > .home-builder-actions,
body.customer-home-active #mainStickyBar{
position:fixed!important;
left:50%!important;
right:auto!important;
bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom,0px) + 10px)!important;
transform:translateX(-50%)!important;
width:calc(100% - 24px)!important;
max-width:920px!important;
margin:0!important;
border-radius:22px!important;
padding:10px 14px!important;
z-index:185!important;
background:rgba(255,255,255,.97)!important;
backdrop-filter:blur(18px)!important;
-webkit-backdrop-filter:blur(18px)!important;
box-shadow:0 14px 34px rgba(31,36,48,.14),0 2px 8px rgba(31,36,48,.06)!important;
border:1px solid rgba(31,36,48,.07)!important;
}
body.customer-section-index #section-index{padding-bottom:150px!important}
body.customer-section-index .app-shell{padding-bottom:0!important}
/* Splash: letters rise gently into place with a soft, quick stagger —
no scatter, no rotation, no blur. Calm and premium rather than energetic. */
.rebox-splash{background:radial-gradient(circle at 50% 46%,#ffffff 0%,#fbfcfb 58%,#f5f8f5 100%)!important;overflow:hidden}
.rebox-splash__brand{display:flex;flex-direction:row;direction:ltr;unicode-bidi:isolate;align-items:center;justify-content:center;gap:0;letter-spacing:-5px;font-size:clamp(62px,14vw,116px)!important;transform:none!important;opacity:1!important}
.rebox-splash__brand .splash-letter{display:inline-block;opacity:0;transform:translate3d(0,var(--sy),0);transition:transform .56s cubic-bezier(.16,1,.3,1),opacity .5s ease}
.rebox-splash.is-visible .splash-letter{opacity:1;transform:translate3d(0,0,0)}
.splash-letter--r{color:#67B85C;--sy:10px;transition-delay:.02s!important}
.splash-letter--e{color:#67B85C;--sy:10px;transition-delay:.06s!important}
.splash-letter--b{color:#E96E61;--sy:10px;transition-delay:.1s!important}
.splash-letter--o{color:#E96E61;--sy:10px;transition-delay:.14s!important}
.splash-letter--x{color:#F1B844;--sy:10px;transition-delay:.18s!important}
.rebox-splash.is-leaving .rebox-splash__brand{transform:translateY(-2px) scale(.99)!important;opacity:.97!important;transition:transform .34s ease,opacity .34s ease!important}
.rebox-splash__line{bottom:18%!important;gap:7px!important}
.rebox-splash__line i{width:28px!important;height:4px!important}
@media (prefers-reduced-motion: reduce){
.rebox-splash__brand .splash-letter{transition:opacity .3s ease!important;transform:none!important}
}
/* Google Maps customer experience */
.google-map-frame{height:560px!important;border-radius:24px!important;overflow:hidden!important;background:#dfe8e0!important;box-shadow:inset 0 0 0 1px rgba(255,255,255,.65)!important}
.google-map-canvas{border-radius:inherit!important;overflow:hidden!important}
.map-visual__toolbar{position:relative;z-index:8;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px!important;background:rgba(255,255,255,.92)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:18px!important;margin:10px!important;box-shadow:0 8px 24px rgba(31,36,48,.10)!important}
.map-visual__tools{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.map-mode-btn{min-height:38px;padding:0 13px;border-radius:12px;border:1px solid rgba(31,36,48,.10);background:#fff;color:#687078;font:800 11px "Noto Sans Arabic",sans-serif;cursor:pointer;transition:.2s ease}
.map-mode-btn:hover{transform:translateY(-1px);border-color:rgba(87,179,90,.3)}
.map-mode-btn.is-active{background:#eff9ef;border-color:rgba(87,179,90,.24);color:#3f9945;box-shadow:inset 0 0 0 1px rgba(87,179,90,.06)}
.rebox-map-popup{min-width:230px!important;padding:4px!important}
.rebox-map-user-popup{font:900 13px "Noto Sans Arabic",sans-serif;padding:8px 4px;color:#27302b}
@media (min-width:768px){
.app-header__brand{right:26px!important}
.app-header__actions{left:24px!important}
body.customer-section-index #section-index > .home-builder-actions{right:auto!important}
.google-map-frame{height:calc(100dvh - 290px)!important;min-height:560px!important;max-height:760px!important}
}
@media (max-width:767px){
.app-header{min-height:66px!important;height:66px!important;padding:0!important}
.app-header__brand{right:16px!important}
.app-header__logo{height:39px!important}
.app-header__actions{left:14px!important;gap:7px!important}
.header-points-pill,.app-header .btn-icon{width:42px!important;height:42px!important}
body.customer-section-index #section-index > .home-builder-actions,
body.customer-home-active #mainStickyBar{bottom:calc(82px + env(safe-area-inset-bottom,0px) + 8px)!important;width:calc(100% - 20px)!important;border-radius:20px!important;padding:9px 10px!important}
body.customer-section-index #section-index{padding-bottom:170px!important}
#section-index > .home-builder-actions .sticky-bar__row{gap:8px!important}
#section-index > .home-builder-actions .sticky-bar__info{max-width:42%!important}
#section-index > .home-builder-actions .sticky-bar__actions{flex:1!important;justify-content:flex-end!important}
#section-index > .home-builder-actions .sticky-reset-btn{min-width:46px!important;width:46px!important;height:46px!important;padding:0!important;border-radius:14px!important}
#section-index > .home-builder-actions .sticky-reset-btn span:last-child{display:none!important}
#section-index > .home-builder-actions #ctaBtn{min-height:46px!important;padding:0 16px!important;border-radius:14px!important;font-size:12px!important;white-space:nowrap!important}
.map-visual__toolbar{margin:7px!important;padding:7px!important;border-radius:15px!important;gap:6px!important}
.map-visual__status{font-size:8px!important;max-width:35%!important}
.map-visual__tools{gap:4px!important}
.map-mode-btn{min-height:34px!important;padding:0 9px!important;font-size:9px!important;border-radius:10px!important}
#mapCenterNearestBtn{display:none!important}
.google-map-frame{height:58dvh!important;min-height:380px!important;max-height:560px!important;border-radius:18px!important}
}
@media (max-width:380px){
.app-header__brand{right:12px!important}
.app-header__logo{height:36px!important}
.app-header__actions{left:10px!important}
.map-mode-btn{padding:0 7px!important}
.google-map-frame{height:54dvh!important;min-height:340px!important}
}
@media (prefers-reduced-motion:reduce){
.rebox-splash__brand .splash-letter,.rebox-splash.is-leaving .rebox-splash__brand{transition:none!important}
}
/* ================================================================
ReBox 16.2 — Profile app version footer
================================================================ */
.rebox-app-version{
width:min(1080px,calc(100% - 32px));
margin:24px auto 12px;
padding:14px 18px;
display:flex;
align-items:center;
justify-content:center;
gap:8px;
direction:rtl;
color:#7b8187;
font-size:12px;
font-weight:700;
border-top:1px solid rgba(31,36,48,.07);
}
.rebox-app-version__dot{width:7px;height:7px;border-radius:50%;background:#57B35A;box-shadow:0 0 0 5px rgba(87,179,90,.10)}
.rebox-app-version strong{color:#30343b;font-weight:900;letter-spacing:.02em}
@media(max-width:600px){
.rebox-app-version{width:calc(100% - 32px);margin:20px auto 10px;padding:13px 8px;font-size:11px}
}
/* ================================================================
ReBox V16.3 — DESKTOP / IPAD FINAL COMPOSITION
Header is always at the top. Content starts below it. The customer
profile and builder get a dedicated tablet/desktop composition.
================================================================ */
@media (min-width:768px){
:root{--customer-header-h:78px}
/* FIX: V16 had a later sticky rule that pushed the header into the
document flow. Keep the customer header fixed at the viewport top. */
.app-header{
position:fixed!important;
top:0!important;
left:0!important;
right:0!important;
width:100vw!important;
height:var(--customer-header-h)!important;
min-height:var(--customer-header-h)!important;
margin:0!important;
padding:0 30px!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
box-sizing:border-box!important;
z-index:500!important;
direction:rtl!important;
background:rgba(255,255,255,.96)!important;
border-bottom:1px solid rgba(31,36,48,.08)!important;
box-shadow:0 6px 24px rgba(31,36,48,.045)!important;
backdrop-filter:blur(18px)!important;
-webkit-backdrop-filter:blur(18px)!important;
}
.app-header__brand{
position:absolute!important;
right:30px!important;
left:auto!important;
top:50%!important;
transform:translateY(-50%)!important;
margin:0!important;
order:0!important;
z-index:2!important;
}
.app-header__logo{display:block!important;height:44px!important;width:auto!important}
.app-header__actions{
position:absolute!important;
left:30px!important;
right:auto!important;
top:50%!important;
transform:translateY(-50%)!important;
margin:0!important;
display:flex!important;
align-items:center!important;
gap:10px!important;
direction:ltr!important;
z-index:3!important;
}
.header-points-pill,.app-header .btn-icon{
width:48px!important;height:48px!important;border-radius:16px!important;
background:#fff!important;border:1px solid rgba(31,36,48,.07)!important;
box-shadow:0 7px 20px rgba(31,36,48,.08)!important;
}
/* Main canvas starts exactly below the fixed header. */
.app-layout>.app-shell{
box-sizing:border-box!important;
padding-top:var(--customer-header-h)!important;
min-height:100vh!important;
}
.sidebar{
top:var(--customer-header-h)!important;
height:calc(100dvh - var(--customer-header-h))!important;
min-height:calc(100vh - var(--customer-header-h))!important;
z-index:400!important;
}
/* Give every desktop/tablet customer page the same clean canvas. */
#section-products,#section-boxes,#section-rewards,#section-settings,
#section-review,#section-schedule,#section-map{
box-sizing:border-box!important;
width:100%!important;
max-width:1240px!important;
margin-inline:auto!important;
padding-inline:30px!important;
}
/* PROFILE — desktop: strong hero + balanced cards. */
#section-settings{padding-top:24px!important;padding-bottom:52px!important}
.customer-profile-hub{max-width:1120px!important;padding-top:0!important}
.profile-page-head{
margin-bottom:20px!important;
align-items:flex-end!important;
padding-inline:4px!important;
}
.profile-page-head h2{font-size:clamp(36px,3.4vw,50px)!important;margin-top:9px!important}
.profile-page-head p{font-size:14px!important;max-width:620px}
.profile-showcase{
min-height:260px!important;
padding:30px 34px!important;
border-radius:32px!important;
grid-template-columns:170px minmax(0,1fr) auto!important;
gap:26px!important;
align-items:center!important;
box-shadow:0 20px 46px rgba(31,36,48,.085)!important;
}
.profile-showcase__avatar{width:146px!important;height:146px!important;border-radius:42px!important}
.profile-showcase__camera{width:42px!important;height:42px!important;border-radius:14px!important}
.profile-showcase__name{font-size:clamp(28px,3vw,40px)!important}
.profile-showcase__email{font-size:14px!important}
.profile-showcase__edit{min-width:150px!important;justify-self:end!important}
.profile-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important;margin-top:18px!important}
.profile-quick-card{min-height:104px!important;padding:18px 22px!important;border-radius:23px!important}
.profile-logout{margin-top:16px!important;min-height:52px!important}
.customer-profile-panel{padding-bottom:52px!important}
.profile-editor{max-width:1120px!important}
.profile-editor__intro{margin:16px 0 20px!important}
.profile-editor__intro h2{font-size:clamp(32px,3vw,44px)!important}
.profile-photo-card{min-height:230px!important;grid-template-columns:minmax(0,1fr) 280px!important;padding:28px 32px!important;border-radius:30px!important}
.profile-photo-card__avatar{width:154px!important;height:154px!important;border-radius:42px!important}
.profile-editor-grid{grid-template-columns:1.08fr .92fr!important;gap:18px!important}
.profile-data-card,.profile-password-card{padding:26px!important;border-radius:28px!important}
/* HOME / BOX — spacious, centered, and never squeezed by the rail. */
body.customer-section-index #section-index{
width:100%!important;
max-width:1240px!important;
margin-inline:auto!important;
padding:20px 34px 132px!important;
box-sizing:border-box!important;
height:auto!important;
min-height:calc(100dvh - var(--customer-header-h))!important;
overflow:visible!important;
}
body.customer-section-index #section-index>.builder-hero{
height:auto!important;
min-height:154px!important;
margin:0 auto!important;
padding:24px 34px!important;
border-radius:28px!important;
}
body.customer-section-index #section-index>.progress-track{margin:12px auto 0!important}
body.customer-section-index #section-index>.rebox-box-wrap{
margin:16px auto 0!important;
display:flex!important;
justify-content:center!important;
width:100%!important;
}
body.customer-section-index #section-index>.rebox-box-wrap .rebox-box{
width:min(620px,calc(100dvh - 310px),100%)!important;
max-width:620px!important;
aspect-ratio:1!important;
padding:16px!important;
gap:13px!important;
border-radius:32px!important;
}
body.customer-section-index #section-index>.rebox-box-wrap .rebox-quadrant{
padding:18px!important;
border-radius:24px!important;
}
body.customer-section-index #section-index>.rebox-box-wrap .rebox-quadrant__icon{font-size:clamp(42px,4vw,56px)!important}
body.customer-section-index #section-index>.rebox-box-wrap .rebox-quadrant__name{font-size:clamp(16px,1.45vw,20px)!important}
/* Floating CTA: detached from the page content with a small breathing gap. */
body.customer-section-index #section-index>.home-builder-actions,
body.customer-home-active #mainStickyBar{
position:fixed!important;
left:0!important;
right:var(--customer-rail)!important;
bottom:14px!important;
width:auto!important;
margin:0!important;
padding:10px 24px!important;
border-radius:22px!important;
z-index:450!important;
background:rgba(255,255,255,.96)!important;
border:1px solid rgba(31,36,48,.07)!important;
box-shadow:0 12px 34px rgba(31,36,48,.13)!important;
backdrop-filter:blur(18px)!important;
-webkit-backdrop-filter:blur(18px)!important;
}
body.customer-section-index #section-index>.home-builder-actions .sticky-bar__row,
body.customer-home-active #mainStickyBar .sticky-bar__row{
width:min(1040px,100%)!important;
min-height:54px!important;
margin-inline:auto!important;
gap:14px!important;
}
body.customer-section-index #section-index>.home-builder-actions .btn,
body.customer-home-active #mainStickyBar .btn{min-height:48px!important;border-radius:15px!important}
}
/* iPad / small tablet: header remains full-width; sidebar is compact and
profile/box cards use one-column compositions to avoid cramped text. */
@media (min-width:768px) and (max-width:1023px){
:root{--customer-rail:220px;--customer-header-h:74px}
.app-header{height:var(--customer-header-h)!important;min-height:var(--customer-header-h)!important;padding-inline:20px!important}
.app-header__brand{right:22px!important}
.app-header__logo{height:40px!important}
.app-header__actions{left:20px!important;gap:8px!important}
.header-points-pill,.app-header .btn-icon{width:44px!important;height:44px!important;border-radius:14px!important}
.app-layout>.app-shell{padding-top:var(--customer-header-h)!important}
.sidebar{top:var(--customer-header-h)!important;height:calc(100dvh - var(--customer-header-h))!important}
#section-products,#section-boxes,#section-rewards,#section-settings,#section-review,#section-schedule,#section-map{padding-inline:20px!important}
#section-settings{padding-top:18px!important}
.profile-page-head h2{font-size:34px!important}
.profile-showcase{grid-template-columns:120px minmax(0,1fr)!important;min-height:220px!important;padding:22px!important;gap:18px!important}
.profile-showcase__avatar{width:112px!important;height:112px!important;border-radius:32px!important}
.profile-showcase__edit{grid-column:1/-1;justify-self:stretch!important;width:100%!important}
.profile-quick-grid{grid-template-columns:1fr!important}
.profile-photo-card{grid-template-columns:1fr 220px!important;padding:22px!important}
.profile-photo-card__avatar{width:126px!important;height:126px!important}
.profile-editor-grid{grid-template-columns:1fr!important}
body.customer-section-index #section-index{padding:16px 20px 126px!important}
body.customer-section-index #section-index>.builder-hero{min-height:135px!important;padding:20px 24px!important}
body.customer-section-index #section-index>.builder-hero .builder-hero__title{font-size:34px!important}
body.customer-section-index #section-index>.builder-hero .builder-hero__sub{font-size:13px!important}
body.customer-section-index #section-index>.rebox-box-wrap .rebox-box{width:min(540px,calc(100dvh - 290px),100%)!important}
body.customer-section-index #section-index>.rebox-box-wrap .rebox-quadrant{padding:14px!important}
body.customer-section-index #section-index>.rebox-box-wrap .rebox-quadrant__icon{font-size:40px!important}
body.customer-section-index #section-index>.rebox-box-wrap .rebox-quadrant__name{font-size:15px!important}
body.customer-section-index #section-index>.home-builder-actions,
body.customer-home-active #mainStickyBar{right:var(--customer-rail)!important;bottom:10px!important;padding:8px 14px!important}
}
/* Larger desktop: use the available canvas instead of leaving a huge empty
margin beside the box. */
@media (min-width:1280px){
body.customer-section-index #section-index>.rebox-box-wrap .rebox-box{width:min(650px,calc(100dvh - 300px),100%)!important;max-width:650px!important}
.customer-profile-hub,.profile-editor{max-width:1160px!important}
}
/* ============================================================
ReBox V16.4 — MOBILE ONLY / HOME BUILDER FIT
Goal: keep the complete box visible in the first viewport,
compact the hero, and dock the actions lower above the nav.
Desktop/tablet are intentionally untouched.
============================================================ */
@media (max-width: 767px){
/* Compact premium hero: less vertical air, stronger hierarchy. */
#section-index > .builder-hero{
position:relative;
margin:0!important;
min-height:0!important;
padding:18px 18px 14px!important;
border-radius:0 0 26px 26px!important;
background:
radial-gradient(circle at 8% 18%,rgba(87,179,90,.13),transparent 28%),
radial-gradient(circle at 94% 12%,rgba(242,184,75,.16),transparent 27%),
linear-gradient(180deg,#fffdf7 0%,#f7faf7 100%)!important;
border-bottom:1px solid rgba(31,36,48,.055);
box-shadow:0 8px 24px rgba(31,36,48,.045)!important;
overflow:hidden;
}
#section-index > .builder-hero::after{
content:'';
position:absolute;
left:50%;
bottom:0;
width:54px;
height:3px;
transform:translateX(-50%);
border-radius:999px;
background:linear-gradient(90deg,var(--rebox-green),var(--rebox-yellow),var(--rebox-coral));
opacity:.65;
}
.builder-hero__blob{filter:blur(24px)!important;opacity:.24!important}
.builder-hero__eyebrow{
font-size:11px!important;
padding:5px 12px!important;
border-radius:999px!important;
box-shadow:0 5px 14px rgba(87,179,90,.07);
}
.builder-hero__title{
font-size:27px!important;
line-height:1.18!important;
letter-spacing:-.045em!important;
margin:10px auto 0!important;
max-width:350px!important;
}
.builder-hero__sub{
font-size:11.5px!important;
line-height:1.65!important;
margin:6px auto 0!important;
max-width:340px!important;
}
/* Progress becomes a compact status row. */
#section-index > .progress-track{
margin:8px 18px 0!important;
padding:0!important;
gap:10px!important;
height:24px!important;
}
.progress-track__label{
min-width:34px!important;
font-size:11px!important;
font-weight:900!important;
}
.progress-track__bar{height:5px!important;gap:5px!important}
.progress-track__bar .seg{height:5px!important}
/* Keep the four-slot box entirely in the first viewport. */
#section-index > .rebox-box-wrap{
margin-top:5px!important;
padding:0 14px!important;
perspective:none!important;
}
#section-index > .rebox-box-wrap .rebox-box{
width:100%!important;
height:min(50vh,340px)!important;
min-height:0!important;
aspect-ratio:auto!important;
padding:8px!important;
gap:8px!important;
border-radius:23px!important;
box-shadow:0 18px 38px rgba(39,48,61,.13),0 3px 10px rgba(39,48,61,.07)!important;
}
#section-index > .rebox-box-wrap .rebox-box::before{inset:7px!important}
#section-index > .rebox-box-wrap .rebox-quadrant{
min-height:0!important;
padding:10px 7px!important;
gap:5px!important;
border-radius:16px!important;
}
#section-index > .rebox-box-wrap .rebox-quadrant__icon{
font-size:31px!important;
}
#section-index > .rebox-box-wrap .rebox-quadrant__name{
font-size:12px!important;
line-height:1.25!important;
}
#section-index > .rebox-box-wrap .rebox-quadrant__cta{
font-size:9px!important;
padding:5px 10px!important;
}
#section-index > .rebox-box-wrap .rebox-quadrant__count-badge{
top:6px!important;inset-inline-end:6px!important;min-width:18px!important;height:18px!important;font-size:9px!important;
}
#section-index > .rebox-box-wrap .rebox-quadrant__pill{
min-width:68px!important;padding:4px 9px!important;border-radius:11px!important;
}
#section-index > .rebox-box-wrap .rebox-quadrant__count{font-size:8px!important}
#section-index > .rebox-box-wrap .rebox-quadrant__subtotal{font-size:11px!important}
#section-index > .rebox-box-wrap .rebox-quadrant__edit{font-size:8px!important}
.rebox-box__center-seal{
width:40px!important;height:40px!important;border-width:3px!important;
}
.rebox-box__center-seal::before,.rebox-box__center-seal::after{width:13px!important;height:9px!important}
/* Hide the optional full banner from stealing first-viewport height;
it is still rendered when the box is full and can be seen after scroll. */
#section-index > .full-banner{margin:8px 14px 0!important}
/* Action bar: lower, shorter, and visually detached from the box. */
#mainStickyBar.home-builder-actions{
bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom,0px) - 3px)!important;
width:calc(100% - 20px)!important;
max-width:none!important;
border:1px solid rgba(31,36,48,.07)!important;
border-radius:19px!important;
padding:7px 9px!important;
background:rgba(255,255,255,.96)!important;
box-shadow:0 10px 30px rgba(31,36,48,.16),0 2px 7px rgba(31,36,48,.06)!important;
}
#mainStickyBar.home-builder-actions::before{top:-1px!important}
#mainStickyBar .sticky-bar__row{min-height:0!important;gap:7px!important}
#mainStickyBar .sticky-bar__info{padding:0 6px!important}
#mainStickyBar .sticky-bar__count{font-size:9.5px!important;line-height:1.3!important}
#mainStickyBar .sticky-bar__price{font-size:14px!important;line-height:1.2!important}
#mainStickyBar .sticky-bar__actions{gap:6px!important}
#mainStickyBar .sticky-bar .btn,
#mainStickyBar .btn{min-height:45px!important;height:45px!important}
#mainStickyBar .btn-primary{
min-width:126px!important;
padding-inline:14px!important;
font-size:12px!important;
border-radius:15px!important;
}
#mainStickyBar .sticky-reset-btn{
width:45px!important;height:45px!important;min-width:45px!important;padding:0!important;border-radius:15px!important;
}
/* The page itself reserves less dead space while keeping content clear of
both fixed controls. */
body.customer-home-active .app-shell,
.app-shell{
padding-bottom:calc(72px + 66px + env(safe-area-inset-bottom,0px))!important;
}
}
/* Extra-small phones: guarantee the box stays comfortably inside the viewport. */
@media (max-width:360px){
#section-index > .builder-hero{padding-inline:13px!important;padding-top:15px!important;padding-bottom:12px!important}
.builder-hero__title{font-size:24px!important}
.builder-hero__sub{font-size:10.5px!important}
#section-index > .rebox-box-wrap{padding-inline:10px!important}
#section-index > .rebox-box-wrap .rebox-box{height:min(49vh,315px)!important;padding:7px!important;gap:7px!important}
#section-index > .rebox-box-wrap .rebox-quadrant{padding:8px 5px!important;border-radius:14px!important}
#section-index > .rebox-box-wrap .rebox-quadrant__icon{font-size:27px!important}
#section-index > .rebox-box-wrap .rebox-quadrant__name{font-size:10.5px!important}
#section-index > .rebox-box-wrap .rebox-quadrant__cta{font-size:8px!important;padding:4px 8px!important}
#mainStickyBar .btn-primary{min-width:116px!important;font-size:11px!important}
}
/* ============================================================
ReBox Merchant V16.9.1 — FINAL DESKTOP + IPAD OVERRIDES
Kept in the existing stylesheet. No new frontend architecture.
============================================================ */
body[data-page="merchant"] {
--merchant-sidebar-width: 292px;
--merchant-header-height: 78px;
background: #f5f7f6 !important;
color: var(--text-main, #20252d);
overflow-x: hidden;
}
body[data-page="merchant"] .merchant-shell {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
body[data-page="merchant"] .merchant-header {
height: var(--merchant-header-height) !important;
min-height: var(--merchant-header-height) !important;
width: 100% !important;
box-sizing: border-box !important;
padding: 10px 28px !important;
background: rgba(255,255,255,.98) !important;
border-bottom: 1px solid #e3e8e4 !important;
box-shadow: 0 2px 18px rgba(31,36,48,.055) !important;
position: sticky !important;
top: 0 !important;
z-index: 1000 !important;
}
body[data-page="merchant"] .merchant-header__brand {
min-width: 0 !important;
gap: 13px !important;
}
body[data-page="merchant"] .merchant-header__logo {
height: 40px !important;
width: auto !important;
max-width: 150px !important;
}
body[data-page="merchant"] .merchant-header__title {
max-width: 320px !important;
color: #20252d !important;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
font-size: 20px !important;
font-weight: 900 !important;
}
body[data-page="merchant"] .merchant-header__actions {
gap: 9px !important;
direction: ltr !important;
}
body[data-page="merchant"] .merchant-header .btn-icon,
body[data-page="merchant"] .merchant-header__avatar {
width: 46px !important;
height: 46px !important;
min-width: 46px !important;
flex: 0 0 46px !important;
border-radius: 14px !important;
background: #fff !important;
border: 1px solid #e0e6e2 !important;
box-shadow: 0 2px 9px rgba(31,36,48,.05) !important;
}
body[data-page="merchant"] .merchant-header__avatar { display: grid !important; place-items: center !important; background: #eef8ef !important; color: #4ca951 !important; }
body[data-page="merchant"] .merchant-layout {
display: block !important;
width: 100% !important;
min-height: calc(100vh - var(--merchant-header-height)) !important;
position: relative !important;
}
body[data-page="merchant"] .merchant-sidebar {
position: fixed !important;
inset-block-start: var(--merchant-header-height) !important;
inset-inline-end: 0 !important;
inset-inline-start: auto !important;
bottom: 0 !important;
width: var(--merchant-sidebar-width) !important;
height: calc(100vh - var(--merchant-header-height)) !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
gap: 7px !important;
padding: 22px 14px 18px !important;
margin: 0 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
background: #fff !important;
border-inline-start: 1px solid #e1e7e3 !important;
box-shadow: -8px 0 30px rgba(31,36,48,.045) !important;
z-index: 900 !important;
scrollbar-width: thin !important;
}
body[data-page="merchant"] .merchant-sidebar__store {
display: flex !important;
align-items: center !important;
gap: 12px !important;
min-height: 78px !important;
padding: 14px 14px !important;
margin-bottom: 9px !important;
border: 1px solid #e2e8e4 !important;
border-radius: 18px !important;
background: #fff !important;
box-shadow: 0 3px 12px rgba(31,36,48,.035) !important;
}
body[data-page="merchant"] .merchant-sidebar__store-mark {
flex: 0 0 auto !important;
font: 900 12px/1 Roboto, sans-serif !important;
letter-spacing: -.5px !important;
color: #57b35a !important;
}
body[data-page="merchant"] .merchant-sidebar__store-mark span { color: #f46b57 !important; }
body[data-page="merchant"] .merchant-sidebar__store-copy { min-width: 0 !important; display: flex !important; flex-direction: column !important; gap: 5px !important; }
body[data-page="merchant"] .merchant-sidebar__store-copy strong { font-size: 16px !important; font-weight: 900 !important; color: #20252d !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
body[data-page="merchant"] .merchant-sidebar__store-copy small { color: #7b8580 !important; font-size: 12px !important; font-weight: 700 !important; }
body[data-page="merchant"] .merchant-sidebar__status-dot { display: inline-block !important; width: 7px !important; height: 7px !important; border-radius: 50% !important; background: #57b35a !important; margin-inline-end: 4px !important; }
body[data-page="merchant"] .merchant-sidebar__nav-title { padding: 5px 12px 4px !important; color: #98a19c !important; font-size: 11px !important; font-weight: 900 !important; }
body[data-page="merchant"] .merchant-sidebar__item {
width: 100% !important;
min-height: 52px !important;
flex: 0 0 auto !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 15px !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
border: 1px solid transparent !important;
border-radius: 15px !important;
background: transparent !important;
color: #515b56 !important;
font-size: 15px !important;
font-weight: 800 !important;
text-align: right !important;
cursor: pointer !important;
transition: background .18s ease, color .18s ease, transform .18s ease !important;
}
body[data-page="merchant"] .merchant-sidebar__item .icon { width: 24px !important; flex: 0 0 24px !important; font-family: 'Material Symbols Rounded' !important; font-size: 22px !important; line-height: 1 !important; text-align: center !important; }
body[data-page="merchant"] .merchant-sidebar__item:hover { background: #f3f8f3 !important; color: #2f8e38 !important; transform: translateX(-2px) !important; }
body[data-page="merchant"] .merchant-sidebar__item.is-active { background: #eaf7eb !important; color: #2f9639 !important; box-shadow: none !important; border-color: rgba(87,179,90,.08) !important; }
body[data-page="merchant"] .merchant-sidebar__item.is-active .icon { color: #2f9639 !important; }
body[data-page="merchant"] .merchant-sidebar__item .badge { margin-inline-start: auto !important; }
body[data-page="merchant"] .merchant-main {
width: auto !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 var(--merchant-sidebar-width) 0 0 !important;
padding: 34px 40px 58px !important;
box-sizing: border-box !important;
background: #f5f7f6 !important;
}
body[data-page="merchant"] .merchant-panel { width: 100% !important; max-width: 1480px !important; margin: 0 auto !important; min-width: 0 !important; }
body[data-page="merchant"] .merchant-section-head,
body[data-page="merchant"] .merchant-dashboard-head { margin-bottom: 22px !important; gap: 18px !important; }
body[data-page="merchant"] .merchant-panel__title { font-size: 28px !important; line-height: 1.3 !important; font-weight: 900 !important; }
body[data-page="merchant"] .profile-info-card { min-width: 0 !important; overflow: hidden !important; }
body[data-page="merchant"] .merchant-dashboard-stats { grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 14px !important; }
body[data-page="merchant"] .merchant-dashboard-grid,
body[data-page="merchant"] .finance-main-grid { grid-template-columns: minmax(0,1.35fr) minmax(300px,.85fr) !important; gap: 16px !important; }
body[data-page="merchant"] .merchant-products-grid { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap: 16px !important; }
body[data-page="merchant"] .merchant-order-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap: 14px !important; }
body[data-page="merchant"] .finance-stat-grid { grid-template-columns: repeat(4,minmax(0,1fr)) !important; gap: 14px !important; }
body[data-page="merchant"] .settings-layout { grid-template-columns: 210px minmax(0,1fr) !important; gap: 18px !important; }
body[data-page="merchant"] .settings-content,
body[data-page="merchant"] .settings-panel,
body[data-page="merchant"] .settings-card,
body[data-page="merchant"] .form-grid { min-width: 0 !important; width: 100% !important; }
body[data-page="merchant"] .finance-orders-table-wrap { overflow-x: auto !important; width: 100% !important; }
/* iPad / tablet: 768–1199px */
@media (min-width: 768px) and (max-width: 1199px) {
body[data-page="merchant"] { --merchant-sidebar-width: 250px; --merchant-header-height: 72px; }
body[data-page="merchant"] .merchant-header { padding-inline: 20px !important; }
body[data-page="merchant"] .merchant-header__logo { height: 37px !important; }
body[data-page="merchant"] .merchant-header__title { font-size: 17px !important; max-width: 230px !important; }
body[data-page="merchant"] .merchant-header .btn-icon,
body[data-page="merchant"] .merchant-header__avatar { width: 42px !important; height: 42px !important; min-width: 42px !important; flex-basis: 42px !important; }
body[data-page="merchant"] .merchant-sidebar { padding: 18px 11px 14px !important; }
body[data-page="merchant"] .merchant-sidebar__store { min-height: 72px !important; padding: 11px !important; }
body[data-page="merchant"] .merchant-sidebar__store-copy strong { font-size: 14px !important; }
body[data-page="merchant"] .merchant-sidebar__item { min-height: 49px !important; padding-inline: 12px !important; font-size: 14px !important; }
body[data-page="merchant"] .merchant-main { padding: 26px 24px 44px !important; }
body[data-page="merchant"] .merchant-panel__title { font-size: 25px !important; }
body[data-page="merchant"] .merchant-dashboard-stats,
body[data-page="merchant"] .finance-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
body[data-page="merchant"] .merchant-dashboard-grid,
body[data-page="merchant"] .finance-main-grid { grid-template-columns: 1fr !important; }
body[data-page="merchant"] .merchant-products-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; }
body[data-page="merchant"] .merchant-order-grid { grid-template-columns: 1fr !important; }
body[data-page="merchant"] .settings-layout { grid-template-columns: 180px minmax(0,1fr) !important; }
}
/* Wide desktop */
@media (min-width: 1440px) {
body[data-page="merchant"] { --merchant-sidebar-width: 304px; }
body[data-page="merchant"] .merchant-main { padding-inline: 52px !important; }
}
/* Keep mobile as the existing drawer behavior. */
@media (max-width: 767px) {
body[data-page="merchant"] { --merchant-header-height: 64px; }
body[data-page="merchant"] .merchant-header { padding: 9px 12px !important; }
body[data-page="merchant"] .merchant-header__title { display: none !important; }
body[data-page="merchant"] .merchant-sidebar { width: min(310px,88vw) !important; transform: translateX(105%) !important; transition: transform .22s ease !important; }
body[data-page="merchant"] .merchant-sidebar.is-open { transform: translateX(0) !important; }
body[data-page="merchant"] .merchant-main { margin: 0 !important; padding: 18px 14px 34px !important; }
body[data-page="merchant"] .merchant-dashboard-stats,
body[data-page="merchant"] .merchant-products-grid,
body[data-page="merchant"] .merchant-order-grid,
body[data-page="merchant"] .finance-stat-grid,
body[data-page="merchant"] .finance-main-grid,
body[data-page="merchant"] .merchant-dashboard-grid,
body[data-page="merchant"] .settings-layout { grid-template-columns: 1fr !important; }
}
body[data-page="merchant"] .merchant-stat-card {
min-width: 0 !important;
padding: 18px 18px 16px !important;
border: 1px solid #e2e8e4 !important;
border-radius: 18px !important;
background: #fff !important;
box-shadow: 0 5px 18px rgba(31,36,48,.045) !important;
display: flex !important;
flex-direction: column !important;
gap: 7px !important;
}
body[data-page="merchant"] .merchant-stat-card span { color:#7c8581 !important; font-size:12px !important; font-weight:800 !important; }
body[data-page="merchant"] .merchant-stat-card strong { color:#20252d !important; font:900 25px/1.1 Roboto,"Noto Sans Arabic",sans-serif !important; }
body[data-page="merchant"] .merchant-stat-card small { color:#3f9d46 !important; font-size:11px !important; font-weight:800 !important; }
:root{--m-green:#57b35a;--m-green-2:#eaf7eb;--m-ink:#20252d;--m-muted:#69736f;--m-border:#e3e9e5;--m-bg:#f6f8f6;--m-card:#fff;--m-warn:#a86a00;--m-danger:#b33b3b;}
*{box-sizing:border-box}.hidden{display:none!important}.mobile-only{display:none!important}.merchant-app{min-height:100vh;background:var(--m-bg);color:var(--m-ink);font-family:"Noto Sans Arabic",system-ui,sans-serif}.merchant-topbar{height:72px;background:#fff;border-bottom:1px solid var(--m-border);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:30}.merchant-brand{display:flex;align-items:center;gap:14px;font-weight:900;font-size:18px}.merchant-brand img{width:112px;height:auto;object-fit:contain}.merchant-topbar-actions{display:flex;align-items:center;gap:8px}.icon-btn{width:42px;height:42px;border:1px solid var(--m-border);background:#fff;border-radius:13px;display:grid;place-items:center;cursor:pointer;color:var(--m-ink);position:relative}.icon-btn:hover{border-color:#b8dabb;background:var(--m-green-2)}.icon{font-family:"Material Symbols Rounded";font-size:22px;line-height:1}.merchant-avatar,.merchant-sidebar-store__logo{width:42px;height:42px;border-radius:13px;background:var(--m-green-2);display:grid;place-items:center;overflow:hidden;color:var(--m-green)}.merchant-avatar img,.merchant-sidebar-store__logo img{width:100%;height:100%;object-fit:cover}.notif-dot{position:absolute;top:4px;right:4px;min-width:17px;height:17px;border-radius:9px;background:#d9534f;color:#fff;font:700 10px/17px Roboto;text-align:center}.merchant-body{display:grid;grid-template-columns:260px minmax(0,1fr);min-height:calc(100vh - 72px)}.merchant-sidebar{background:#fff;border-left:1px solid var(--m-border);padding:20px 14px;display:flex;flex-direction:column;gap:18px}.merchant-sidebar-store{display:flex;align-items:center;gap:10px;padding:10px;border:1px solid var(--m-border);border-radius:16px}.merchant-sidebar-store strong,.merchant-sidebar-store small{display:block}.merchant-sidebar-store small{font-size:12px;color:var(--m-muted);margin-top:2px}.merchant-sidebar nav{display:grid;gap:6px}.merchant-nav,.settings-tab{border:0;background:transparent;text-align:right;padding:12px 14px;border-radius:12px;display:flex;align-items:center;gap:11px;font:700 14px inherit;color:#46504b;cursor:pointer}.merchant-nav.is-active,.merchant-nav:hover,.settings-tab.is-active,.settings-tab:hover{background:var(--m-green-2);color:#2f8e36}.merchant-sidebar-footer{margin-top:auto;font-size:11px;color:var(--m-muted);display:flex;gap:8px;align-items:flex-start;padding:10px}.merchant-main{padding:30px;max-width:1500px;width:100%;margin:auto}.merchant-page{display:none}.merchant-page.is-active{display:block}.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}.page-head h1{font-size:30px;margin:3px 0 4px;font-weight:900}.page-head p{margin:0;color:var(--m-muted)}.eyebrow{font-size:11px;color:#49a34d;font-weight:900;letter-spacing:.04em}.btn{border:1px solid transparent;border-radius:12px;padding:11px 16px;min-height:44px;font:800 13px inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-primary{background:var(--m-green);color:#fff}.btn-secondary{background:#fff;border-color:#cfe2d2;color:#32863a}.btn-ghost{background:#fff;border-color:var(--m-border);color:#4b5650}.text-btn{border:0;background:none;color:#3c9644;font:800 13px inherit;cursor:pointer}.store-summary-card,.section-block,.metric-card,.order-card,.rebox-card,.product-row,.plan-card,.settings-card{background:var(--m-card);border:1px solid var(--m-border);border-radius:20px;box-shadow:0 6px 24px rgba(31,50,38,.04)}.store-summary-card{padding:20px;margin-bottom:20px}.dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}.section-block{padding:20px;margin-bottom:20px}.section-title{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:15px}.section-title h2{font-size:18px;margin:2px 0 0}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.metric-card{padding:18px}.metric-card b{font-size:28px;display:block;margin-top:4px}.metric-card span{font-size:12px;color:var(--m-muted)}.tabs{display:flex;gap:7px;overflow:auto;padding-bottom:10px;margin-bottom:12px}.tab{white-space:nowrap;border:1px solid var(--m-border);background:#fff;color:#53605a;border-radius:11px;padding:10px 14px;font:800 12px inherit;cursor:pointer}.tab.is-active{background:var(--m-green);color:#fff;border-color:var(--m-green)}.filterbar{display:grid;grid-template-columns:minmax(260px,1fr) 180px 170px auto;gap:10px;margin-bottom:16px}.searchbox{display:flex;align-items:center;gap:8px;border:1px solid var(--m-border);background:#fff;border-radius:12px;padding:0 12px;min-height:44px}.searchbox input{border:0;outline:0;min-width:0;width:100%;font:inherit}.filterbar select,.filterbar input[type=date]{border:1px solid var(--m-border);background:#fff;border-radius:12px;padding:0 12px;min-height:44px;font:inherit}.order-list,.rebox-list,.product-list{display:grid;gap:12px}.order-card{padding:17px}.order-top,.row-between{display:flex;align-items:flex-start;justify-content:space-between;gap:15px}.order-title{font-weight:900;font-size:16px}.order-meta,.muted{color:var(--m-muted);font-size:12px}.status-badge{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--m-border);border-radius:999px;padding:5px 9px;font-size:11px;font-weight:900;background:#f8faf8}.status-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:#88928d}.status-badge.good::before{background:#49a34d}.status-badge.warn::before{background:#d4932e}.status-badge.danger::before{background:#c74c4c}.order-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:15px 0}.order-grid div{background:#f8faf8;border-radius:12px;padding:10px}.order-grid small{display:block;color:var(--m-muted);font-size:10px;margin-bottom:3px}.order-actions{display:flex;gap:8px;justify-content:flex-start;margin-top:13px;flex-wrap:wrap}.rebox-card{padding:18px}.notice{display:flex;gap:10px;padding:14px 16px;border-radius:14px;border:1px solid #e7ddc8;background:#fffaf0;color:#775019;margin-bottom:16px}.notice p{margin:4px 0 0;font-size:12px}.catalog-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.product-row{display:grid;grid-template-columns:68px minmax(180px,1fr) 150px 120px 130px auto;gap:14px;align-items:center;padding:12px}.product-media{width:68px;height:68px;border-radius:14px;background:#f7f4ea;display:grid;place-items:center;overflow:hidden}.product-media img{width:100%;height:100%;object-fit:cover}.product-media .icon{font-size:30px;color:#9b8b66}.product-name{font-weight:900}.product-meta{font-size:11px;color:var(--m-muted);margin-top:4px}.price{font-weight:900;color:#35953f}.product-actions{display:flex;justify-content:flex-end;gap:6px}.switch{width:42px;height:24px;border-radius:20px;background:#d7dfda;position:relative;cursor:pointer}.switch::after{content:"";width:18px;height:18px;background:#fff;border-radius:50%;position:absolute;top:3px;right:21px;box-shadow:0 1px 4px #0002}.switch.on{background:var(--m-green)}.switch.on::after{right:3px}.plan-card{padding:26px;max-width:820px}.plan-state{display:inline-flex;padding:6px 10px;border-radius:999px;background:var(--m-green-2);color:#31863a;font-weight:900;font-size:12px}.plan-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:20px}.plan-item{padding:14px;background:#f8faf8;border-radius:14px}.plan-item small{display:block;color:var(--m-muted);font-size:11px}.plan-item b{display:block;margin-top:4px}.settings-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:20px}.settings-nav{background:#fff;border:1px solid var(--m-border);border-radius:18px;padding:10px;height:max-content}.settings-content{min-width:0}.settings-panel{display:none}.settings-panel.is-active{display:block}.settings-card{padding:22px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.settings-card label,.modal label{display:grid;gap:7px;font-weight:800;font-size:13px;margin-bottom:14px}.settings-card input,.settings-card textarea,.modal input,.modal select{width:100%;border:1px solid var(--m-border);border-radius:12px;min-height:44px;padding:10px 12px;font:inherit;background:#fff}.settings-card textarea{min-height:100px;resize:vertical}.form-note{font-size:11px;color:var(--m-muted);margin:4px 0 14px}.image-preview{width:96px;height:96px;border-radius:16px;background:#f7f9f7;border:1px dashed #cbd7ce;display:grid;place-items:center;overflow:hidden;margin-bottom:12px}.image-preview img{width:100%;height:100%;object-fit:cover}.form-error{background:#fff0f0;color:#a33a3a;border:1px solid #f0c6c6;border-radius:12px;padding:10px;font-size:12px;margin-bottom:12px}.modal-overlay{position:fixed;inset:0;background:rgba(17,24,20,.45);display:none;align-items:center;justify-content:center;padding:20px;z-index:100}.modal-overlay.is-open{display:flex}.modal{width:min(620px,100%);max-height:min(90vh,850px);overflow:auto;background:#fff;border-radius:22px;padding:22px;box-shadow:0 25px 70px rgba(0,0,0,.18)}.modal-lg{width:min(900px,100%)}.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:18px}.modal-head h2{margin:3px 0 0;font-size:21px}.modal-actions{display:flex;gap:8px;justify-content:flex-start;flex-wrap:wrap;margin-top:18px}.qr-frame{background:#111;border-radius:18px;aspect-ratio:4/3;overflow:hidden}.qr-frame video{width:100%;height:100%;object-fit:cover}.modal-status{text-align:center;color:var(--m-muted);font-size:12px}.empty-state,.error-state,.loading-state{padding:30px;text-align:center;background:#fff;border:1px dashed var(--m-border);border-radius:18px;color:var(--m-muted)}.empty-state strong,.error-state strong,.loading-state strong{display:block;color:var(--m-ink);margin-bottom:5px}.error-state button{margin-top:12px}.skeleton{background:linear-gradient(90deg,#eef2ef,#f8faf8,#eef2ef);background-size:200% 100%;animation:sh 1.2s infinite;border-radius:10px;height:18px}@keyframes sh{to{background-position:-200% 0}}@media(max-width:1050px){.merchant-body{grid-template-columns:220px 1fr}.merchant-main{padding:22px}.product-row{grid-template-columns:60px 1fr 110px 110px auto}.product-row>.availability{display:none}}@media(max-width:800px){.merchant-topbar{padding:0 14px}.merchant-brand img{width:92px}.merchant-brand span{display:none}.mobile-only{display:grid!important}.merchant-body{display:block}.merchant-sidebar{position:fixed;top:72px;right:0;bottom:0;width:280px;transform:translateX(105%);transition:transform .2s ease;z-index:40;border-left:1px solid var(--m-border);box-shadow:-10px 0 30px #0001}.merchant-sidebar.is-open{transform:none}.merchant-main{padding:16px}.page-head{flex-direction:column}.dashboard-grid,.metric-grid,.settings-layout{grid-template-columns:1fr}.filterbar{grid-template-columns:1fr 1fr}.filterbar .searchbox{grid-column:1/-1}.product-row{grid-template-columns:56px 1fr auto}.product-row>.category,.product-row>.unit,.product-row>.availability{display:none}.product-actions{grid-column:2/-1;justify-content:flex-start}.product-media{width:56px;height:56px}.form-grid{grid-template-columns:1fr}.settings-nav{display:flex;overflow:auto}.settings-tab{white-space:nowrap}.settings-content{margin-top:0}.order-grid{grid-template-columns:1fr 1fr}.merchant-topbar-actions{gap:5px}}
/* ReBoX Merchant Freeze 1.0 final shell alignment — desktop/iPad */
body[data-page="merchant"] .merchant-topbar{direction:rtl}
body[data-page="merchant"] .merchant-topbar-actions{direction:ltr}
body[data-page="merchant"] .merchant-body{direction:rtl;grid-template-columns:minmax(0,1fr) 260px}
body[data-page="merchant"] .merchant-sidebar{border-left:1px solid var(--m-border);border-right:0}
body[data-page="merchant"] .merchant-main{direction:rtl;min-width:0}
body[data-page="merchant"] .page-head,
body[data-page="merchant"] .section-title,
body[data-page="merchant"] .row-between{direction:rtl}
body[data-page="merchant"] .merchant-nav,
body[data-page="merchant"] .settings-tab{text-align:right;direction:rtl}
body[data-page="merchant"] .filterbar{direction:rtl}
body[data-page="merchant"] .product-row{direction:rtl}
body[data-page="merchant"] .product-actions{direction:ltr}
body[data-page="merchant"] .switch-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--m-border)}
body[data-page="merchant"] .switch-row > span{display:grid;gap:3px}
body[data-page="merchant"] .switch-row small{color:var(--m-muted);font-size:11px}
body[data-page="merchant"] .switch-row input[type="checkbox"]{width:44px;height:24px;accent-color:var(--m-green);flex:0 0 auto}
body[data-page="merchant"] .offer-row,
body[data-page="merchant"] .category-card,
body[data-page="merchant"] .service-area-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--m-border)}
body[data-page="merchant"] .category-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
body[data-page="merchant"] .category-card{border:1px solid var(--m-border);border-radius:14px;padding:14px}
body[data-page="merchant"] .category-card__icon{width:42px;height:42px;border-radius:12px;background:var(--m-green-2);display:grid;place-items:center;font-size:21px;flex:0 0 42px}
@media(max-width:1050px){body[data-page="merchant"] .merchant-body{grid-template-columns:minmax(0,1fr) 220px}}
@media(max-width:800px){body[data-page="merchant"] .merchant-body{display:block}.category-grid{grid-template-columns:1fr}}
/* Merchant shell refinement — collapsible right sidebar + clean header */
body[data-page="merchant"] .merchant-topbar {
direction: rtl;
}
body[data-page="merchant"] .merchant-brand {
min-width: 0;
}
body[data-page="merchant"] .merchant-brand img {
display: block;
width: 116px;
max-height: 42px;
}
body[data-page="merchant"] .merchant-topbar-actions {
direction: ltr;
}
body[data-page="merchant"] .merchant-body {
direction: rtl;
grid-template-columns: minmax(0, 1fr) 264px;
transition: grid-template-columns .28s cubic-bezier(.2,.8,.2,1);
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed {
grid-template-columns: minmax(0, 1fr) 82px;
}
body[data-page="merchant"] .merchant-sidebar {
position: relative;
overflow: visible;
padding: 14px 12px 16px;
gap: 12px;
transition: padding .28s ease, box-shadow .28s ease;
}
body[data-page="merchant"] .merchant-sidebar-head {
height: 30px;
display: flex;
align-items: center;
justify-content: flex-start;
padding-inline: 2px;
}
body[data-page="merchant"] .merchant-sidebar-toggle {
width: 32px;
height: 32px;
border: 1px solid var(--m-border);
background: #fff;
color: #56615b;
border-radius: 10px;
display: grid;
place-items: center;
cursor: pointer;
box-shadow: 0 3px 12px rgba(31,50,38,.05);
transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
body[data-page="merchant"] .merchant-sidebar-toggle:hover {
color: var(--m-green);
background: var(--m-green-2);
border-color: #b8dabb;
}
body[data-page="merchant"] .merchant-sidebar-toggle:focus-visible,
body[data-page="merchant"] .merchant-nav:focus-visible,
body[data-page="merchant"] .icon-btn:focus-visible,
body[data-page="merchant"] .merchant-avatar:focus-visible {
outline: 3px solid rgba(87,179,90,.22);
outline-offset: 2px;
}
body[data-page="merchant"] .merchant-sidebar-store {
min-width: 0;
transition: padding .24s ease, justify-content .24s ease;
}
body[data-page="merchant"] .merchant-sidebar-store > div:last-child,
body[data-page="merchant"] .merchant-nav > span:last-child,
body[data-page="merchant"] .merchant-sidebar-footer > span:last-child {
overflow: hidden;
max-width: 180px;
white-space: nowrap;
opacity: 1;
transition: max-width .22s ease, opacity .16s ease, transform .22s ease;
}
body[data-page="merchant"] .merchant-nav {
min-height: 48px;
justify-content: flex-start;
transition: background .18s ease, color .18s ease, padding .22s ease, gap .22s ease;
}
body[data-page="merchant"] .merchant-nav .icon {
flex: 0 0 24px;
text-align: center;
}
body[data-page="merchant"] .merchant-sidebar-footer {
transition: justify-content .22s ease, padding .22s ease;
}
body[data-page="merchant"] .merchant-sidebar-footer .icon {
flex: 0 0 24px;
text-align: center;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar {
padding-inline: 10px;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar-store {
justify-content: center;
padding: 10px 6px;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar-store > div:last-child,
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-nav > span:last-child,
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar-footer > span:last-child {
max-width: 0;
opacity: 0;
transform: translateX(5px);
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-nav {
justify-content: center;
padding-inline: 8px;
gap: 0;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-nav .icon {
font-size: 23px;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar-footer {
justify-content: center;
padding-inline: 4px;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar-toggle {
margin-inline-start: auto;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar-store__logo {
flex: 0 0 42px;
}
@media (max-width: 1100px) and (min-width: 801px) {
body[data-page="merchant"] .merchant-body {
grid-template-columns: minmax(0,1fr) 236px;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed {
grid-template-columns: minmax(0,1fr) 78px;
}
body[data-page="merchant"] .merchant-main {
padding: 22px 18px 28px;
}
}
@media (max-width: 800px) {
body[data-page="merchant"] .merchant-body,
body[data-page="merchant"] .merchant-body.sidebar-collapsed {
display: block;
}
body[data-page="merchant"] .merchant-sidebar {
width: 286px;
padding: 14px 12px 16px;
top: 0;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar {
width: 286px;
padding-inline: 12px;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar-store,
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-nav {
justify-content: flex-start;
padding-inline: 10px;
gap: 11px;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar-store > div:last-child,
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-nav > span:last-child,
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar-footer > span:last-child {
max-width: 180px;
opacity: 1;
transform: none;
}
body[data-page="merchant"] .merchant-topbar {
height: 68px;
padding: 0 12px;
}
body[data-page="merchant"] .merchant-brand img {
width: 96px;
}
}
/* ============================================================
ReBoX Merchant Shell — final RTL placement correction
Existing merchant shell only; no new files / no data changes.
In RTL Grid, the first track is the rightmost track, so the
sidebar must be the fixed-width first track and the content
must occupy the remaining second track.
============================================================ */
body[data-page="merchant"] .merchant-body {
direction: rtl;
grid-template-columns: 264px minmax(0, 1fr) !important;
transition: grid-template-columns .30s cubic-bezier(.2,.8,.2,1);
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed {
grid-template-columns: 82px minmax(0, 1fr) !important;
}
body[data-page="merchant"] .merchant-sidebar {
grid-column: 1;
grid-row: 1;
width: auto !important;
min-width: 0;
border-left: 1px solid var(--m-border) !important;
border-right: 0 !important;
overflow-x: hidden;
}
body[data-page="merchant"] .merchant-main {
grid-column: 2;
grid-row: 1;
width: 100%;
min-width: 0;
margin: 0 !important;
transition: padding .30s ease;
}
body[data-page="merchant"] .merchant-sidebar-head {
justify-content: flex-start;
}
body[data-page="merchant"] .merchant-sidebar-toggle {
margin-inline-start: 0;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar-toggle {
margin-inline-start: 0;
}
body[data-page="merchant"] .merchant-topbar-actions {
direction: ltr;
}
@media (max-width: 1100px) and (min-width: 801px) {
body[data-page="merchant"] .merchant-body {
grid-template-columns: 236px minmax(0, 1fr) !important;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed {
grid-template-columns: 78px minmax(0, 1fr) !important;
}
}
@media (max-width: 800px) {
body[data-page="merchant"] .merchant-body,
body[data-page="merchant"] .merchant-body.sidebar-collapsed {
display: block !important;
}
body[data-page="merchant"] .merchant-sidebar {
grid-column: auto;
grid-row: auto;
position: fixed !important;
top: 68px !important;
right: 0 !important;
left: auto !important;
bottom: 0 !important;
width: min(286px, 88vw) !important;
height: calc(100vh - 68px) !important;
transform: translateX(105%);
transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease;
z-index: 40;
}
body[data-page="merchant"] .merchant-sidebar.is-open {
transform: translateX(0);
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar {
width: min(286px, 88vw) !important;
}
body[data-page="merchant"] .merchant-main {
grid-column: auto;
grid-row: auto;
width: 100%;
margin: 0 !important;
}
}
/* ============================================================
ReBox Merchant — RTL command center refinement
Existing files only. No data/RLS changes.
============================================================ */
body[data-page="merchant"] .merchant-body{
direction:ltr !important;
grid-template-columns:minmax(0,1fr) 264px !important;
align-items:stretch;
}
body[data-page="merchant"] .merchant-main{
grid-column:1 !important;
grid-row:1 !important;
direction:rtl !important;
}
body[data-page="merchant"] .merchant-sidebar{
grid-column:2 !important;
grid-row:1 !important;
direction:rtl !important;
border-left:0 !important;
border-right:1px solid var(--m-border) !important;
}
body[data-page="merchant"] .merchant-sidebar-head{direction:ltr;justify-content:flex-start}
body[data-page="merchant"] .merchant-sidebar-toggle{transform:none}
body[data-page="merchant"] .merchant-nav{direction:rtl;justify-content:flex-start;text-align:right}
body[data-page="merchant"] .merchant-nav .icon{order:0}
body[data-page="merchant"] .merchant-nav > span:last-child{order:1}
body[data-page="merchant"] .merchant-sidebar-store{direction:rtl}
body[data-page="merchant"] .merchant-sidebar-footer{direction:rtl}
body[data-page="merchant"] .merchant-topbar{direction:rtl}
body[data-page="merchant"] .merchant-topbar-actions{direction:ltr}
body[data-page="merchant"] .merchant-topbar-actions #logoutBtn{order:99}
body[data-page="merchant"] .dashboard-hero{
display:flex;align-items:center;justify-content:space-between;gap:24px;
padding:6px 2px 24px;
}
body[data-page="merchant"] .dashboard-hero__copy h1{font-size:42px;line-height:1.1;margin:5px 0 8px;font-weight:900;letter-spacing:-.02em}
body[data-page="merchant"] .dashboard-hero__copy p{margin:0;color:var(--m-muted);font-size:14px}
body[data-page="merchant"] .dashboard-hero__actions{display:flex;gap:8px;flex:0 0 auto}
body[data-page="merchant"] .dashboard-welcome{
background:linear-gradient(135deg,#fff 0%,#fbfdfb 62%,#eff9f0 100%);
border:1px solid var(--m-border);border-radius:24px;padding:22px 24px;margin-bottom:16px;
box-shadow:0 10px 32px rgba(31,50,38,.055);position:relative;overflow:hidden;
}
body[data-page="merchant"] .dashboard-welcome:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:rgba(87,179,90,.08);inset-inline-start:-60px;bottom:-100px}
body[data-page="merchant"] .dashboard-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px}
body[data-page="merchant"] .dashboard-kpi{position:relative;min-height:118px;background:#fff;border:1px solid var(--m-border);border-radius:18px;padding:17px 18px;box-shadow:0 7px 24px rgba(31,50,38,.045);overflow:hidden}
body[data-page="merchant"] .dashboard-kpi:before{content:"";position:absolute;inset-inline-end:0;top:0;bottom:0;width:4px;background:var(--m-green);opacity:.85}
body[data-page="merchant"] .dashboard-kpi__top{display:flex;align-items:center;justify-content:space-between;gap:8px;color:var(--m-muted);font-size:11px;font-weight:800}
body[data-page="merchant"] .dashboard-kpi__icon{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--m-green-2);color:var(--m-green)}
body[data-page="merchant"] .dashboard-kpi strong{display:block;font:900 26px/1.15 Roboto,"Noto Sans Arabic",sans-serif;margin-top:13px;color:var(--m-ink)}
body[data-page="merchant"] .dashboard-kpi small{display:block;color:var(--m-muted);font-size:10px;margin-top:4px}
body[data-page="merchant"] .dashboard-quick-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:16px}
body[data-page="merchant"] .quick-action{min-width:0;border:1px solid var(--m-border);background:#fff;border-radius:16px;padding:13px 14px;display:flex;align-items:center;gap:10px;text-align:right;cursor:pointer;color:var(--m-ink);font:inherit;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease}
body[data-page="merchant"] .quick-action:hover{transform:translateY(-2px);border-color:#c5dfc8;box-shadow:0 9px 24px rgba(31,50,38,.07);background:#fcfffc}
body[data-page="merchant"] .quick-action__icon{width:40px;height:40px;flex:0 0 40px;border-radius:12px;background:var(--m-green-2);color:var(--m-green);display:grid;place-items:center}
body[data-page="merchant"] .quick-action > span:nth-child(2){min-width:0;flex:1}
body[data-page="merchant"] .quick-action strong{display:block;font-size:12px;font-weight:900}
body[data-page="merchant"] .quick-action small{display:block;margin-top:3px;color:var(--m-muted);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-page="merchant"] .quick-action > .icon:last-child{color:#8b958f;font-size:18px}
body[data-page="merchant"] .dashboard-attention{border-color:#e1e9e3;background:linear-gradient(180deg,#fff,#fcfefc)}
body[data-page="merchant"] .dashboard-attention .section-title{align-items:flex-start}
body[data-page="merchant"] .dashboard-attention .section-title p{margin:3px 0 0}
@media (max-width:1100px) and (min-width:801px){
body[data-page="merchant"] .merchant-body{grid-template-columns:minmax(0,1fr) 236px !important}
body[data-page="merchant"] .merchant-body.sidebar-collapsed{grid-template-columns:minmax(0,1fr) 78px !important}
body[data-page="merchant"] .dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-page="merchant"] .dashboard-quick-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:800px){
body[data-page="merchant"] .merchant-body,
body[data-page="merchant"] .merchant-body.sidebar-collapsed{display:block !important}
body[data-page="merchant"] .merchant-sidebar{direction:rtl;right:0 !important;left:auto !important;border-right:0 !important;border-left:1px solid var(--m-border) !important}
body[data-page="merchant"] .dashboard-hero{align-items:flex-start;flex-direction:column;padding-bottom:18px}
body[data-page="merchant"] .dashboard-hero__copy h1{font-size:32px}
body[data-page="merchant"] .dashboard-hero__actions{width:100%}
body[data-page="merchant"] .dashboard-hero__actions .btn{width:100%}
body[data-page="merchant"] .dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-page="merchant"] .dashboard-quick-actions{grid-template-columns:1fr 1fr}
}
@media (max-width:480px){
body[data-page="merchant"] .dashboard-kpis{gap:8px}
body[data-page="merchant"] .dashboard-kpi{min-height:104px;padding:13px}
body[data-page="merchant"] .dashboard-kpi strong{font-size:22px}
body[data-page="merchant"] .dashboard-quick-actions{grid-template-columns:1fr}
body[data-page="merchant"] .dashboard-welcome{padding:18px}
}
/* ============================================================
ReBox Merchant — FINAL RTL placement lock
Apply after all previous merchant overrides so the sidebar can
never fall back to the left side because of legacy CSS order.
============================================================ */
html[dir="rtl"] body[data-page="merchant"] .merchant-body,
body[data-page="merchant"] .merchant-body {
direction: ltr !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) 264px !important;
width: 100% !important;
min-width: 0 !important;
align-items: stretch !important;
}
body[data-page="merchant"] .merchant-main {
grid-column: 1 !important;
grid-row: 1 !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
direction: rtl !important;
overflow-x: hidden;
}
body[data-page="merchant"] .merchant-sidebar {
grid-column: 2 !important;
grid-row: 1 !important;
position: relative !important;
inset: auto !important;
width: 264px !important;
min-width: 264px !important;
max-width: 264px !important;
height: auto !important;
min-height: calc(100vh - 72px) !important;
direction: rtl !important;
background: rgba(255,255,255,.98) !important;
border-right: 1px solid var(--m-border) !important;
border-left: 0 !important;
box-shadow: -10px 0 30px rgba(31,50,38,.045) !important;
z-index: 20 !important;
transform: none !important;
}
/* Sidebar collapse: icon-only mode, while content expands smoothly. */
body[data-page="merchant"] .merchant-body.sidebar-collapsed {
grid-template-columns: minmax(0, 1fr) 82px !important;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar {
width: 82px !important;
min-width: 82px !important;
max-width: 82px !important;
padding-inline: 10px !important;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar-store {
justify-content: center !important;
padding: 9px !important;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar-store > div:last-child,
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-nav > span:last-child,
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar-footer > span:last-child {
display: none !important;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-nav {
justify-content: center !important;
padding-inline: 0 !important;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-nav .icon {
margin: 0 !important;
}
/* Toggle is always inside the right sidebar and stays easy to find. */
body[data-page="merchant"] .merchant-sidebar-head {
display: flex !important;
justify-content: flex-start !important;
align-items: center !important;
min-height: 36px !important;
direction: ltr !important;
}
body[data-page="merchant"] .merchant-sidebar-toggle {
width: 38px !important;
height: 38px !important;
border: 1px solid #dce7df !important;
background: #fff !important;
color: #4c5a53 !important;
border-radius: 12px !important;
box-shadow: 0 4px 14px rgba(31,50,38,.06) !important;
display: grid !important;
place-items: center !important;
cursor: pointer !important;
transition: transform .25s ease, background .2s ease, border-color .2s ease, color .2s ease !important;
}
body[data-page="merchant"] .merchant-sidebar-toggle:hover {
background: var(--m-green-2) !important;
border-color: #bfe0c2 !important;
color: #318d39 !important;
transform: translateY(-1px) !important;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar-toggle {
transform: none !important;
}
/* Header: clean RTL brand on the right; logout is the leftmost action. */
body[data-page="merchant"] .merchant-topbar {
direction: rtl !important;
}
body[data-page="merchant"] .merchant-brand {
direction: rtl !important;
}
body[data-page="merchant"] .merchant-topbar-actions {
direction: ltr !important;
}
body[data-page="merchant"] .merchant-topbar-actions #logoutBtn {
order: -10 !important;
}
@media (max-width: 1100px) and (min-width: 801px) {
body[data-page="merchant"] .merchant-body {
grid-template-columns: minmax(0, 1fr) 236px !important;
}
body[data-page="merchant"] .merchant-sidebar {
width: 236px !important;
min-width: 236px !important;
max-width: 236px !important;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed {
grid-template-columns: minmax(0, 1fr) 78px !important;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar {
width: 78px !important;
min-width: 78px !important;
max-width: 78px !important;
}
}
@media (max-width: 800px) {
body[data-page="merchant"] .merchant-body,
body[data-page="merchant"] .merchant-body.sidebar-collapsed {
display: block !important;
}
body[data-page="merchant"] .merchant-main {
width: 100% !important;
margin: 0 !important;
}
body[data-page="merchant"] .merchant-sidebar,
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar {
position: fixed !important;
top: 72px !important;
right: 0 !important;
left: auto !important;
bottom: 0 !important;
width: min(286px, 88vw) !important;
min-width: 0 !important;
max-width: none !important;
height: calc(100vh - 72px) !important;
min-height: 0 !important;
transform: translateX(105%) !important;
transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease !important;
z-index: 40 !important;
}
body[data-page="merchant"] .merchant-sidebar.is-open {
transform: translateX(0) !important;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar {
padding-inline: 14px !important;
}
}
/* ============================================================
ReBox Merchant — v16.9.1 professional operations refresh
Existing markup/data only. RTL right rail + dashboard redesign.
============================================================ */
body[data-page="merchant"] .merchant-body{
direction:ltr !important;
display:grid !important;
grid-template-columns:minmax(0,1fr) var(--merchant-sidebar-current,264px) !important;
transition:grid-template-columns .34s cubic-bezier(.22,.8,.22,1) !important;
overflow:visible !important;
}
body[data-page="merchant"] .merchant-main{
grid-column:1 !important; grid-row:1 !important; direction:rtl !important;
min-width:0 !important; width:100% !important; margin:0 !important;
overflow-x:hidden !important;
transition:padding .34s cubic-bezier(.22,.8,.22,1) !important;
}
body[data-page="merchant"] .merchant-sidebar{
grid-column:2 !important; grid-row:1 !important; direction:rtl !important;
position:relative !important; inset:auto !important;
width:auto !important; min-width:0 !important; max-width:none !important;
min-height:calc(100vh - 72px) !important; height:auto !important;
overflow:hidden !important; border-right:1px solid var(--m-border) !important; border-left:0 !important;
box-shadow:-12px 0 32px rgba(31,50,38,.055) !important;
transform:none !important;
transition:padding .34s ease,box-shadow .34s ease,background .25s ease !important;
z-index:20 !important;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed{--merchant-sidebar-current:82px}
body[data-page="merchant"] .merchant-body:not(.sidebar-collapsed){--merchant-sidebar-current:264px}
body[data-page="merchant"] .merchant-sidebar *{box-sizing:border-box}
body[data-page="merchant"] .merchant-sidebar-head{direction:ltr !important;justify-content:flex-start !important;padding:4px 2px 10px !important}
body[data-page="merchant"] .merchant-sidebar-toggle{margin:0 !important;flex:0 0 40px !important;transition:transform .28s ease,background .2s ease,border-color .2s ease !important}
body[data-page="merchant"] .merchant-sidebar-store{transition:padding .3s ease,justify-content .3s ease,background .2s ease !important;overflow:hidden !important}
body[data-page="merchant"] .merchant-nav{transition:padding .3s ease,gap .3s ease,background .2s ease,color .2s ease !important;overflow:hidden !important;white-space:nowrap !important}
body[data-page="merchant"] .merchant-nav > span:last-child,
body[data-page="merchant"] .merchant-sidebar-store > div:last-child,
body[data-page="merchant"] .merchant-sidebar-footer > span:last-child{transition:opacity .18s ease,transform .25s ease !important}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar{padding-inline:10px !important}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar-store{justify-content:center !important;padding:10px 6px !important}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar-store > div:last-child,
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-nav > span:last-child,
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar-footer > span:last-child{opacity:0 !important;transform:translateX(8px) !important;display:none !important}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-nav{justify-content:center !important;padding-inline:0 !important}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-nav .icon{margin:0 !important}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar-footer{justify-content:center !important}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar-toggle{transform:translateX(0) !important}
/* Dashboard store identity */
body[data-page="merchant"] .dashboard-store-card{
position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;
min-height:142px;padding:24px 28px;margin-bottom:16px;overflow:hidden;
border:1px solid #dfe9e1;border-radius:24px;background:linear-gradient(135deg,#fff 0%,#fbfefb 60%,#eef9ef 100%);
box-shadow:0 12px 34px rgba(31,50,38,.055)
}
body[data-page="merchant"] .dashboard-store-card__glow{position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(87,179,90,.08);left:-100px;bottom:-150px;pointer-events:none}
body[data-page="merchant"] .dashboard-store-main{display:flex;align-items:center;gap:15px;min-width:0;position:relative;z-index:1}
body[data-page="merchant"] .dashboard-store-avatar{width:72px;height:72px;flex:0 0 72px;border-radius:20px;display:grid;place-items:center;overflow:hidden;background:#eaf7eb;color:var(--m-green);border:1px solid #d4ead6;box-shadow:0 8px 18px rgba(87,179,90,.12)}
body[data-page="merchant"] .dashboard-store-avatar img{width:100%;height:100%;object-fit:cover}
body[data-page="merchant"] .dashboard-store-avatar .icon{font-size:34px}
body[data-page="merchant"] .dashboard-store-copy{min-width:0}
body[data-page="merchant"] .dashboard-store-copy h2{margin:3px 0 4px;font-size:25px;font-weight:900;color:var(--m-ink)}
body[data-page="merchant"] .dashboard-store-copy p{margin:0;color:var(--m-muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:600px}
body[data-page="merchant"] .dashboard-store-status{display:inline-flex;align-items:center;gap:6px;margin-top:9px;font-size:11px;font-weight:800;color:#388e42}
body[data-page="merchant"] .status-dot{width:7px;height:7px;border-radius:50%;background:#55b95a;box-shadow:0 0 0 4px rgba(85,185,90,.12)}
body[data-page="merchant"] .dashboard-store-clock{position:relative;z-index:1;display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid rgba(87,179,90,.14);background:rgba(255,255,255,.72);border-radius:16px;min-width:250px;color:var(--m-muted)}
body[data-page="merchant"] .dashboard-store-clock>.icon{width:34px;height:34px;display:grid;place-items:center;border-radius:11px;background:#eaf7eb;color:var(--m-green)}
body[data-page="merchant"] .dashboard-store-clock div:nth-child(2){display:flex;flex-direction:column;gap:2px;min-width:0}
body[data-page="merchant"] .dashboard-store-clock strong{font-size:12px;color:var(--m-ink)}
body[data-page="merchant"] .dashboard-store-clock span{font-size:10px}
body[data-page="merchant"] .dashboard-store-time{margin-inline-start:auto;font:900 20px/1 Roboto,"Noto Sans Arabic",sans-serif;color:var(--m-ink);white-space:nowrap}
/* Dashboard insight panels */
body[data-page="merchant"] .dashboard-command-grid{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:12px;margin-bottom:14px}
body[data-page="merchant"] .dashboard-panel{background:#fff;border:1px solid var(--m-border);border-radius:20px;padding:18px;min-width:0;box-shadow:0 7px 24px rgba(31,50,38,.045)}
body[data-page="merchant"] .dashboard-panel__head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:13px}
body[data-page="merchant"] .dashboard-panel__head h2{margin:3px 0 0;font-size:16px;font-weight:900;color:var(--m-ink)}
body[data-page="merchant"] .latest-row{display:flex;align-items:center;gap:9px;padding:10px 0;border-top:1px solid #edf1ee;min-width:0}
body[data-page="merchant"] .latest-row:first-child{border-top:0;padding-top:0}
body[data-page="merchant"] .latest-row__icon{width:38px;height:38px;flex:0 0 38px;display:grid;place-items:center;border-radius:12px;background:#eaf7eb;color:var(--m-green)}
body[data-page="merchant"] .latest-row__body{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
body[data-page="merchant"] .latest-row__body strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-page="merchant"] .latest-row__body span,.latest-row__meta span{font-size:10px;color:var(--m-muted)}
body[data-page="merchant"] .latest-row__meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;white-space:nowrap}
body[data-page="merchant"] .latest-row__meta b{font-size:10px;color:var(--m-ink)}
body[data-page="merchant"] .icon-btn--soft{width:34px;height:34px;border:0;background:#f5f9f5;color:var(--m-green);flex:0 0 34px}
body[data-page="merchant"] .report-highlight{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
body[data-page="merchant"] .report-highlight>div{padding:12px;border-radius:14px;background:#f7faf7}
body[data-page="merchant"] .report-highlight span,.report-lines span{display:block;font-size:10px;color:var(--m-muted)}
body[data-page="merchant"] .report-highlight strong{display:block;margin-top:5px;font-size:16px;font-weight:900;color:var(--m-ink)}
body[data-page="merchant"] .report-lines{display:grid;gap:7px}
body[data-page="merchant"] .report-lines>div{display:flex;align-items:center;justify-content:space-between;padding:7px 0;border-bottom:1px solid #edf1ee}
body[data-page="merchant"] .report-lines>div:last-child{border-bottom:0}
body[data-page="merchant"] .report-lines b{font-size:11px}
body[data-page="merchant"] .performance-score{display:flex;align-items:center;gap:15px}
body[data-page="merchant"] .performance-ring{width:88px;height:88px;flex:0 0 88px;border-radius:50%;display:grid;place-items:center;position:relative;background:conic-gradient(var(--m-green) calc(var(--score)*1%),#edf2ee 0)}
body[data-page="merchant"] .performance-ring:after{content:"";position:absolute;inset:8px;border-radius:50%;background:#fff}
body[data-page="merchant"] .performance-ring strong,.performance-ring span{position:relative;z-index:1;text-align:center}
body[data-page="merchant"] .performance-ring strong{font:900 20px/1 Roboto,"Noto Sans Arabic",sans-serif}
body[data-page="merchant"] .performance-ring span{font-size:8px;color:var(--m-muted);margin-top:-21px}
body[data-page="merchant"] .performance-copy{min-width:0;flex:1;display:flex;flex-direction:column;gap:5px}
body[data-page="merchant"] .performance-copy strong{font-size:12px}
body[data-page="merchant"] .performance-copy>span{font-size:10px;color:var(--m-muted);line-height:1.6}
body[data-page="merchant"] .mini-progress{height:6px;border-radius:999px;background:#edf2ee;overflow:hidden;margin-top:3px}
body[data-page="merchant"] .mini-progress i{display:block;height:100%;border-radius:999px;background:var(--m-green);transition:width .5s ease}
body[data-page="merchant"] .performance-stats{display:flex;gap:8px;margin-top:14px}
body[data-page="merchant"] .performance-stats span{flex:1;padding:9px;border-radius:12px;background:#f7faf7;text-align:center;font-size:9px;color:var(--m-muted)}
body[data-page="merchant"] .performance-stats b{font-size:13px;color:var(--m-ink);margin-inline-end:3px}
body[data-page="merchant"] .dashboard-shortcuts{background:#fff;border:1px solid var(--m-border);border-radius:20px;padding:18px;margin-bottom:16px;box-shadow:0 7px 24px rgba(31,50,38,.045)}
body[data-page="merchant"] .dashboard-shortcuts .dashboard-panel__head{margin-bottom:11px}
body[data-page="merchant"] .dashboard-quick-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:0}
body[data-page="merchant"] .quick-action{min-width:0;border:1px solid #e3ebe4;background:#fbfdfb;border-radius:15px;padding:11px 12px;display:flex;align-items:center;gap:9px;text-align:right;cursor:pointer;color:var(--m-ink);font:inherit;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease}
body[data-page="merchant"] .quick-action:hover{transform:translateY(-2px);border-color:#c6dfc9;box-shadow:0 9px 22px rgba(31,50,38,.07);background:#fff}
body[data-page="merchant"] .quick-action__icon{width:38px;height:38px;flex:0 0 38px;border-radius:11px;background:#eaf7eb;color:var(--m-green);display:grid;place-items:center}
body[data-page="merchant"] .quick-action>span:nth-child(2){min-width:0;flex:1}.quick-action strong{display:block;font-size:11px;font-weight:900}.quick-action small{display:block;margin-top:3px;color:var(--m-muted);font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.quick-action>.icon:last-child{color:#87918b;font-size:17px}
/* Compact operational cards */
body[data-page="merchant"] .order-card--compact{padding:15px 16px;border-radius:18px;background:#fff;border:1px solid var(--m-border);box-shadow:0 6px 18px rgba(31,50,38,.035);margin-bottom:10px}
body[data-page="merchant"] .order-card__top,.order-card__identity,.order-card__summary,.order-card__bottom{display:flex;align-items:center}
body[data-page="merchant"] .order-card__top{justify-content:space-between;gap:12px}.order-card__identity{gap:10px;min-width:0}.order-card__icon{width:40px;height:40px;flex:0 0 40px;border-radius:12px;background:#eaf7eb;color:var(--m-green);display:grid;place-items:center}.order-card__identity>div{min-width:0;display:flex;flex-direction:column;gap:3px}.order-card__identity strong{font-size:12px}.order-card__identity span{font-size:10px;color:var(--m-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.order-card__summary{gap:18px;justify-content:flex-end;margin-top:-1px;padding-inline-start:50px}.order-card__summary span{font-size:9px;color:var(--m-muted)}.order-card__summary strong{font:900 15px/1 Roboto,"Noto Sans Arabic",sans-serif;color:var(--m-green);margin-inline-start:auto}.order-card__products{margin:10px 0 0;padding:8px 10px;border-radius:10px;background:#f7faf7;color:#65716a;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.order-card__bottom{justify-content:space-between;gap:12px;margin-top:11px;padding-top:10px;border-top:1px solid #edf1ee}.order-card__bottom>.muted{font-size:9px;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.order-card__bottom .order-actions{margin:0;flex:0 0 auto}.departure-hint{color:#3c9644}
/* ReBox professional list */
body[data-page="merchant"] .rebox-card--pro{padding:18px;border-radius:20px;background:#fff;border:1px solid var(--m-border);box-shadow:0 7px 24px rgba(31,50,38,.045);margin-bottom:12px}
body[data-page="merchant"] .rebox-card__top{display:flex;align-items:center;justify-content:space-between;gap:12px}.rebox-card__identity{display:flex;align-items:center;gap:11px;min-width:0}.rebox-card__icon{width:46px;height:46px;flex:0 0 46px;border-radius:14px;background:#eaf7eb;color:var(--m-green);display:grid;place-items:center}.rebox-card__identity>div:last-child{min-width:0}.rebox-card__identity h3{margin:3px 0;font-size:16px}.rebox-card__identity p{margin:0;color:var(--m-muted);font-size:10px}.rebox-card__meta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}.rebox-card__meta>div{padding:10px 12px;border-radius:13px;background:#f7faf7;min-width:0}.rebox-card__meta small{display:block;color:var(--m-muted);font-size:9px}.rebox-card__meta strong{display:block;margin-top:4px;font-size:12px}.rebox-card__meta span{display:block;margin-top:2px;color:var(--m-muted);font-size:9px}.rebox-card__categories{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.rebox-card__categories>span{display:inline-flex;align-items:center;gap:4px;padding:5px 8px;border-radius:999px;background:#f1f7f1;color:#4f6555;font-size:9px}.rebox-card__categories .icon{font-size:13px;color:var(--m-green)}.rebox-card__products{margin-top:10px;padding:9px 11px;border:1px dashed #dbe6dd;border-radius:11px;color:#68736c;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.rebox-card__actions{display:flex;gap:7px;justify-content:flex-start;flex-wrap:wrap;margin-top:12px}.rebox-card__actions .btn{min-height:38px}
/* Detail modals */
body[data-page="merchant"] .detail-hero{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:16px;border:1px solid #e0e9e2;border-radius:18px;background:linear-gradient(135deg,#fff,#f5faf5)}
body[data-page="merchant"] .detail-identity{display:flex;align-items:center;gap:12px;min-width:0}.detail-avatar{width:52px;height:52px;border-radius:15px;background:#eaf7eb;color:var(--m-green);display:grid;place-items:center;flex:0 0 52px}.detail-avatar--rebox{background:#f0f7f0}.detail-identity h2{margin:3px 0 2px;font-size:20px}.detail-identity p{margin:0;color:var(--m-muted);font-size:11px}.detail-grid,.rebox-detail-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:12px}.detail-grid>div,.rebox-detail-grid>div{padding:12px;border-radius:14px;background:#f7faf7;min-width:0}.detail-grid small,.rebox-detail-grid small{display:block;color:var(--m-muted);font-size:9px}.detail-grid strong,.rebox-detail-grid strong{display:block;margin-top:4px;font-size:12px}.detail-grid span{display:block;margin-top:2px;color:var(--m-muted);font-size:9px}.detail-grid__total,.rebox-detail-grid__total{background:#eaf7eb !important;border:1px solid #d4ead6}.detail-grid__total strong,.rebox-detail-grid__total strong{font-size:17px;color:#328a3b}.detail-address{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:13px;border:1px solid #e2e9e3;border-radius:15px;background:#fff}.detail-address>div{display:flex;align-items:flex-start;gap:9px;min-width:0}.detail-address>.btn{flex:0 0 auto}.detail-address .icon{color:var(--m-green)}.detail-address small{display:block;color:var(--m-muted);font-size:9px}.detail-address strong{display:block;margin-top:3px;font-size:11px;line-height:1.7}.detail-section{margin-top:14px}.detail-category{border:1px solid #e2e9e3;border-radius:15px;overflow:hidden;margin-top:8px}.detail-category__head{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:#f7faf7}.detail-category__head strong{font-size:11px}.detail-category__head span{font-size:9px;color:var(--m-muted)}.detail-product{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;border-top:1px solid #edf1ee}.detail-product>div{display:flex;flex-direction:column;gap:3px;min-width:0}.detail-product strong{font-size:11px}.detail-product span{font-size:9px;color:var(--m-muted)}.detail-product>b{font-size:11px;white-space:nowrap}.delivery-plan{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;gap:11px;margin-top:13px;padding:13px;border-radius:16px;background:linear-gradient(135deg,#eff9f0,#fbfefb);border:1px solid #d7ead9}.delivery-plan__icon{width:44px;height:44px;border-radius:13px;background:#fff;color:var(--m-green);display:grid;place-items:center}.delivery-plan strong{font-size:12px}.delivery-plan p{margin:3px 0 0;color:var(--m-muted);font-size:9px;line-height:1.7}.delivery-plan>div:last-child{text-align:center;padding-inline-start:12px;border-inline-start:1px solid #d8e8da}.delivery-plan small{display:block;color:var(--m-muted);font-size:8px}.delivery-plan b{display:block;margin-top:3px;font:900 15px/1 Roboto,"Noto Sans Arabic",sans-serif}
@media (max-width:1200px){body[data-page="merchant"] .dashboard-command-grid{grid-template-columns:1fr 1fr}.dashboard-performance{grid-column:1/-1}.dashboard-quick-actions{grid-template-columns:repeat(2,1fr)!important}}
@media (max-width:1100px) and (min-width:801px){body[data-page="merchant"] .merchant-body{grid-template-columns:minmax(0,1fr) var(--merchant-sidebar-current,236px)!important}.merchant-body:not(.sidebar-collapsed){--merchant-sidebar-current:236px}.merchant-body.sidebar-collapsed{--merchant-sidebar-current:78px}.dashboard-store-clock{min-width:220px}.dashboard-command-grid{grid-template-columns:1fr 1fr}.dashboard-performance{grid-column:1/-1}}
@media (max-width:800px){
body[data-page="merchant"] .merchant-body,body[data-page="merchant"] .merchant-body.sidebar-collapsed{display:block!important;overflow:visible!important}
body[data-page="merchant"] .merchant-main{width:100%!important;grid-column:auto!important;grid-row:auto!important}
body[data-page="merchant"] .merchant-sidebar,body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar{position:fixed!important;top:68px!important;right:0!important;left:auto!important;bottom:0!important;width:min(286px,88vw)!important;height:calc(100vh - 68px)!important;min-height:0!important;max-width:none!important;transform:translateX(105%)!important;transition:transform .32s cubic-bezier(.22,.8,.22,1),box-shadow .32s ease!important;z-index:60!important;padding-inline:16px!important}
body[data-page="merchant"] .merchant-sidebar.is-open{transform:translateX(0)!important}
body[data-page="merchant"] .dashboard-store-card{align-items:flex-start;flex-direction:column;padding:18px}.dashboard-store-clock{width:100%;min-width:0!important}.dashboard-command-grid{grid-template-columns:1fr!important}.dashboard-performance{grid-column:auto}.dashboard-quick-actions{grid-template-columns:1fr 1fr!important}.order-card__summary{padding-inline-start:0}.rebox-card__meta,.detail-grid,.rebox-detail-grid{grid-template-columns:1fr 1fr}.delivery-plan{grid-template-columns:40px 1fr}.delivery-plan>div:last-child{grid-column:2;text-align:right;border-inline-start:0;padding:8px 0 0;border-top:1px solid #d8e8da}.detail-address{align-items:flex-start;flex-direction:column}.detail-address>.btn{width:100%}
}
@media (max-width:520px){body[data-page="merchant"] .dashboard-quick-actions{grid-template-columns:1fr!important}.order-card__summary{gap:9px}.order-card__bottom{align-items:flex-start;flex-direction:column}.order-card__bottom .order-actions{width:100%}.order-card__bottom .order-actions .btn{flex:1}.rebox-card__meta{grid-template-columns:1fr}.rebox-card__actions .btn{flex:1}.latest-row__meta{display:none}.detail-grid,.rebox-detail-grid{grid-template-columns:1fr 1fr}.dashboard-store-main{width:100%}.dashboard-store-copy p{max-width:calc(100vw - 150px)}}
/* ============================================================
ReBoX Merchant — Order Details refinement
Keeps existing data/events and only improves the modal presentation.
============================================================ */
body[data-page="merchant"] .merchant-order-details{display:grid;gap:14px}
body[data-page="merchant"] .merchant-order-details__hero{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px;border:1px solid #dfe9e1;border-radius:20px;background:linear-gradient(135deg,#ffffff 0%,#f3faf4 100%)}
body[data-page="merchant"] .merchant-order-details__hero-main{display:flex;align-items:center;gap:13px;min-width:0}
body[data-page="merchant"] .merchant-order-details__identity{min-width:0}
body[data-page="merchant"] .merchant-order-details__identity h3{margin:3px 0 2px;font-size:21px;font-weight:950}
body[data-page="merchant"] .merchant-order-details__identity p{margin:0;color:var(--m-muted);font-size:11px}
body[data-page="merchant"] .merchant-order-details__number{display:inline-flex;margin-top:7px;padding:4px 8px;border-radius:8px;background:#edf7ee;color:#3d8f47;font:900 10px/1 Roboto,"Noto Sans Arabic",sans-serif;letter-spacing:.6px;direction:ltr}
body[data-page="merchant"] .merchant-order-details__hero-status{display:grid;justify-items:end;gap:7px;flex:0 0 auto}
body[data-page="merchant"] .merchant-order-details__hero-status small{color:var(--m-muted);font-size:9px}
body[data-page="merchant"] .merchant-order-details__summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
body[data-page="merchant"] .merchant-order-details__summary-card{display:flex;align-items:center;gap:9px;min-width:0;padding:12px;border:1px solid #e3ebe4;border-radius:15px;background:#f8faf8}
body[data-page="merchant"] .merchant-order-details__summary-card>.icon{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;background:#fff;color:var(--m-green);font-size:18px;flex:0 0 34px}
body[data-page="merchant"] .merchant-order-details__summary-card div{min-width:0}
body[data-page="merchant"] .merchant-order-details__summary-card small{display:block;color:var(--m-muted);font-size:9px}
body[data-page="merchant"] .merchant-order-details__summary-card strong{display:block;margin-top:3px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body[data-page="merchant"] .merchant-order-details__summary-card span:not(.icon){display:block;margin-top:2px;color:var(--m-muted);font-size:9px}
body[data-page="merchant"] .merchant-order-details__summary-card.is-total{grid-column:1/-1;justify-content:flex-end;background:#eaf7eb;border-color:#d2e8d5}
body[data-page="merchant"] .merchant-order-details__summary-card.is-total strong{font-size:21px;color:#31883b}
body[data-page="merchant"] .merchant-order-details__section{padding:15px;border:1px solid #e2eae3;border-radius:18px;background:#fff}
body[data-page="merchant"] .merchant-order-details__section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
body[data-page="merchant"] .merchant-order-details__section-head h3{margin:3px 0 0;font-size:15px}
body[data-page="merchant"] .merchant-order-details__stage-count{padding:6px 10px;border-radius:999px;background:#edf7ee;color:#32863b;font:900 11px/1 Roboto,"Noto Sans Arabic",sans-serif;direction:ltr}
body[data-page="merchant"] .merchant-order-details__delivery{display:grid;grid-template-columns:1fr 1fr;gap:9px}
body[data-page="merchant"] .merchant-order-details__delivery>div{display:flex;align-items:flex-start;gap:9px;min-width:0;padding:11px;border-radius:13px;background:#f8faf8}
body[data-page="merchant"] .merchant-order-details__delivery>.is-wide{grid-column:1/-1;align-items:center}
body[data-page="merchant"] .merchant-order-details__delivery .icon{width:32px;height:32px;display:grid;place-items:center;border-radius:10px;background:#fff;color:var(--m-green);font-size:17px;flex:0 0 32px}
body[data-page="merchant"] .merchant-order-details__delivery small{display:block;color:var(--m-muted);font-size:9px}
body[data-page="merchant"] .merchant-order-details__delivery strong{display:block;margin-top:3px;font-size:11px;line-height:1.65;overflow-wrap:anywhere}
body[data-page="merchant"] .merchant-order-details__delivery .is-wide>div:nth-child(2){min-width:0;flex:1}
body[data-page="merchant"] .merchant-order-details__delivery .btn{flex:0 0 auto}
body[data-page="merchant"] .merchant-order-details__timeline-section .merchant-stage-timeline{margin:0;border:0;padding:4px 0 0;background:transparent}
body[data-page="merchant"] .merchant-order-details__timeline-section .merchant-stage-timeline__track{right:7%;left:7%}
body[data-page="merchant"] .merchant-order-details__timeline-section .merchant-stage{padding:0 4px}
@media(max-width:760px){
body[data-page="merchant"] .merchant-order-details__hero{align-items:flex-start;flex-direction:column}
body[data-page="merchant"] .merchant-order-details__hero-status{justify-items:start}
body[data-page="merchant"] .merchant-order-details__summary{grid-template-columns:1fr 1fr}
body[data-page="merchant"] .merchant-order-details__summary-card.is-total{grid-column:1/-1}
body[data-page="merchant"] .merchant-order-details__delivery{grid-template-columns:1fr}
body[data-page="merchant"] .merchant-order-details__delivery>.is-wide{grid-column:auto;align-items:flex-start;flex-wrap:wrap}
body[data-page="merchant"] .merchant-order-details__delivery>.is-wide .btn{width:100%}
}
@media(max-width:520px){
body[data-page="merchant"] .merchant-order-details__summary{grid-template-columns:1fr}
body[data-page="merchant"] .merchant-order-details__summary-card.is-total{grid-column:auto}
body[data-page="merchant"] .merchant-order-details__hero{padding:15px}
body[data-page="merchant"] .merchant-order-details__identity h3{font-size:18px}
body[data-page="merchant"] .merchant-order-details__timeline-section .merchant-stage-timeline{grid-template-columns:1fr 1fr}
}
/* ============================================================
ReBoX Merchant — Products + Settings redesign v2
Visual-only layer: keeps existing IDs, events and backend contracts.
============================================================ */
body[data-page="merchant"] .merchant-page.is-active{animation:merchantPageIn .34s cubic-bezier(.2,.8,.2,1) both}
@keyframes merchantPageIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Products */
body[data-page="merchant"] .catalog-overview{
position:relative;display:flex;align-items:center;justify-content:space-between;gap:24px;
padding:24px 26px;margin:-2px 0 18px;border:1px solid #dfe9e2;border-radius:24px;
background:linear-gradient(135deg,#ffffff 0%,#f6fbf7 62%,#eef8ef 100%);
box-shadow:0 12px 36px rgba(41,77,49,.06);overflow:hidden;
}
body[data-page="merchant"] .catalog-overview::after{content:"";position:absolute;width:210px;height:210px;border-radius:50%;background:rgba(87,179,90,.08);left:-70px;top:-110px;filter:blur(2px)}
.catalog-overview__intro{display:flex;align-items:center;gap:15px;position:relative;z-index:1}
.catalog-overview__icon{width:58px;height:58px;border-radius:18px;display:grid;place-items:center;background:#e8f6ea;color:var(--m-green);box-shadow:inset 0 0 0 1px rgba(87,179,90,.1)}
.catalog-overview__icon .icon{font-size:29px}
.catalog-overview__intro h2{font-size:20px;margin:2px 0 4px;font-weight:900}
.catalog-overview__intro p{margin:0;color:var(--m-muted);font-size:12px}
.catalog-overview__stats{display:grid;grid-template-columns:repeat(4,minmax(82px,1fr));gap:8px;position:relative;z-index:1}
.catalog-overview__stats>div{min-width:90px;padding:10px 13px;border:1px solid #e1ebe3;background:rgba(255,255,255,.8);border-radius:15px;text-align:right}
.catalog-overview__stats small{display:block;color:#7a847f;font-size:10px;font-weight:800;margin-bottom:4px}
.catalog-overview__stats b{display:block;font:900 20px/1 Roboto,"Noto Sans Arabic",sans-serif;color:#20252d}
.catalog-toolbar-modern{display:grid;grid-template-columns:minmax(260px,1fr) auto auto;gap:10px;align-items:center;margin-bottom:10px}
.catalog-search{min-height:50px;border-radius:15px;box-shadow:0 5px 18px rgba(31,50,38,.035);transition:.2s ease}
.catalog-search:focus-within{border-color:rgba(87,179,90,.55);box-shadow:0 0 0 4px rgba(87,179,90,.08),0 7px 22px rgba(31,50,38,.05);transform:translateY(-1px)}
.catalog-filter-group{display:flex;gap:8px}
.catalog-filter-group select{min-width:145px;height:50px;border:1px solid var(--m-border);border-radius:15px;background:#fff;padding:0 13px;font:800 12px inherit;color:#4b5650;outline:0;transition:.2s ease}
.catalog-filter-group select:focus{border-color:rgba(87,179,90,.5);box-shadow:0 0 0 4px rgba(87,179,90,.08)}
.product-subtabs{display:flex;gap:6px;align-items:center}
.product-subtabs .tab{height:50px;border-radius:15px;padding:0 14px;display:inline-flex;align-items:center;gap:7px;transition:.22s cubic-bezier(.2,.8,.2,1)}
.product-subtabs .tab .icon{font-size:18px}
.product-subtabs .tab:not(.is-active):hover{transform:translateY(-2px);border-color:#c7ddca;background:#f8fcf8}
body[data-page="merchant"] .catalog-toolbar{padding:0 3px;margin:4px 0 12px}
body[data-page="merchant"] #productSummary{font-size:12px;color:#75807a}
body[data-page="merchant"] #productSummary strong{font:900 14px Roboto,"Noto Sans Arabic",sans-serif;color:#20252d}
body[data-page="merchant"] #productSummary span{margin-inline-start:4px;color:#a0a8a4}
.catalog-live{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:900;color:#4b9e52;padding:6px 10px;border-radius:999px;background:#eef8ef;border:1px solid #d9ecd9}
.catalog-live i{width:7px;height:7px;border-radius:50%;background:#58b85c;box-shadow:0 0 0 4px rgba(88,184,92,.12);animation:livePulse 1.8s infinite}
@keyframes livePulse{50%{box-shadow:0 0 0 7px rgba(88,184,92,0)}}
body[data-page="merchant"] .merchant-products-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
body[data-page="merchant"] .merchant-product-card{min-height:238px;padding:17px;border-radius:22px;border:1px solid #e0e8e2;background:linear-gradient(180deg,#fff 0%,#fbfdfb 100%);box-shadow:0 8px 28px rgba(31,50,38,.055);transition:transform .24s cubic-bezier(.2,.8,.2,1),box-shadow .24s ease,border-color .24s ease;animation:cardRise .4s both;isolation:isolate}
body[data-page="merchant"] .merchant-product-card:nth-child(2){animation-delay:.035s}.merchant-product-card:nth-child(3){animation-delay:.07s}.merchant-product-card:nth-child(4){animation-delay:.105s}.merchant-product-card:nth-child(5){animation-delay:.14s}.merchant-product-card:nth-child(6){animation-delay:.175s}
@keyframes cardRise{from{opacity:0;transform:translateY(10px) scale(.985)}to{opacity:1;transform:none}}
body[data-page="merchant"] .merchant-product-card:hover{transform:translateY(-5px);box-shadow:0 18px 38px rgba(31,50,38,.10);border-color:rgba(87,179,90,.32)}
body[data-page="merchant"] .merchant-product-card__glow{position:absolute;width:130px;height:130px;border-radius:50%;background:rgba(87,179,90,.08);left:-55px;top:-65px;z-index:-1;transition:transform .35s ease}
body[data-page="merchant"] .merchant-product-card:hover .merchant-product-card__glow{transform:scale(1.35)}
body[data-page="merchant"] .merchant-product-card__top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
body[data-page="merchant"] .merchant-product-card__media{width:68px;height:68px;border-radius:19px;background:linear-gradient(145deg,#f1f7f2,#eaf2eb);border:1px solid #e0e9e1;box-shadow:inset 0 0 0 1px rgba(255,255,255,.7);display:grid;place-items:center;overflow:hidden;font-size:31px;color:#6e8a72;transition:transform .25s ease}
body[data-page="merchant"] .merchant-product-card:hover .merchant-product-card__media{transform:rotate(-2deg) scale(1.04)}
body[data-page="merchant"] .merchant-product-card__media img{width:100%;height:100%;object-fit:cover}
.status-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid #e1e8e3;border-radius:999px;padding:6px 9px;font-size:10px;font-weight:900;background:#fff}
.status-pill i{width:7px;height:7px;border-radius:50%;background:#d2d8d4}.status-pill.good{color:#3c9644;background:#f2faf3;border-color:#d7ead8}.status-pill.good i{background:#57b35a;box-shadow:0 0 0 3px rgba(87,179,90,.1)}
.status-pill.danger{color:#a54848;background:#fff6f6;border-color:#efd9d9}.status-pill.danger i{background:#d45a5a}
body[data-page="merchant"] .merchant-product-card__category{font-size:10px;color:#49a34d;font-weight:900;margin-bottom:3px}
body[data-page="merchant"] .merchant-product-card__name{font-size:17px;line-height:1.45;font-weight:900;margin:0;color:#20252d}
body[data-page="merchant"] .merchant-product-card__meta{font-size:10px;color:#87918c;margin-top:3px}.merchant-product-card__meta span{margin:0 4px;color:#c0c7c3}
body[data-page="merchant"] .merchant-product-card__price{font:900 22px/1.2 Roboto,"Noto Sans Arabic",sans-serif;color:#20252d;margin-top:13px}
body[data-page="merchant"] .merchant-product-card__price small{font:800 10px "Noto Sans Arabic",sans-serif;color:#87918c}
body[data-page="merchant"] .merchant-product-card__badges{margin-top:11px}
.mini-badge{display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border-radius:9px;background:#f5f7f6;color:#7b8580;font-size:9px;font-weight:900}.mini-badge.green{background:#edf8ee;color:#3d9545}.mini-badge .icon{font-size:14px}
body[data-page="merchant"] .merchant-product-card__footer{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid #edf1ee}
.product-edit-btn{border:1px solid #dce6de;background:#fff;color:#3f4c45;border-radius:11px;min-height:34px;padding:0 10px;font:800 11px inherit;display:inline-flex;align-items:center;gap:6px;cursor:pointer;transition:.2s ease}.product-edit-btn:hover{background:#eef8ef;border-color:#c8dfca;color:#34863b;transform:translateY(-1px)}.product-edit-btn .icon{font-size:16px}
.modern-switch{width:45px;height:26px;border:0;border-radius:999px;background:#d9e1dc;position:relative;cursor:pointer;transition:.22s ease;box-shadow:inset 0 1px 2px rgba(0,0,0,.06)}.modern-switch span{position:absolute;width:20px;height:20px;right:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.16);transition:.22s cubic-bezier(.2,.8,.2,1)}.modern-switch.on{background:#57b35a}.modern-switch.on span{transform:translateX(-19px)}.modern-switch:focus-visible{outline:3px solid rgba(87,179,90,.2);outline-offset:2px}
/* Settings */
body[data-page="merchant"] .settings-hero{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:24px 26px;margin-bottom:18px;border-radius:24px;border:1px solid #dfe8e1;background:linear-gradient(135deg,#fff 0%,#f7fbf8 65%,#eef8ef 100%);box-shadow:0 12px 34px rgba(41,77,49,.055);position:relative;overflow:hidden}
body[data-page="merchant"] .settings-hero::after{content:"";position:absolute;width:190px;height:190px;border-radius:50%;background:rgba(87,179,90,.075);left:-55px;top:-95px}
.settings-hero__copy{position:relative;z-index:1}.settings-hero__copy h1{font-size:30px;margin:3px 0 4px;font-weight:900}.settings-hero__copy p{margin:0;color:var(--m-muted);font-size:12px;max-width:650px}
.settings-hero__status{display:flex;align-items:center;gap:10px;padding:11px 14px;border:1px solid #d8e9da;background:rgba(255,255,255,.8);border-radius:15px;position:relative;z-index:1;min-width:180px}.settings-hero__status>.icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#eaf7eb;color:#4da953;font-size:20px}.settings-hero__status strong,.settings-hero__status small{display:block}.settings-hero__status strong{font-size:12px}.settings-hero__status small{font-size:9px;color:#7d8882;margin-top:2px}
body[data-page="merchant"] .settings-layout{grid-template-columns:220px minmax(0,1fr);gap:16px;align-items:start}
body[data-page="merchant"] .settings-nav{position:sticky;top:88px;padding:8px;border-radius:20px;background:rgba(255,255,255,.9);border:1px solid #dfe7e1;box-shadow:0 10px 28px rgba(31,50,38,.05);backdrop-filter:blur(8px)}
body[data-page="merchant"] .settings-tab{width:100%;min-height:52px;border-radius:14px;padding:9px 11px;gap:10px;font-size:12px;font-weight:900;position:relative;transition:transform .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease}
body[data-page="merchant"] .settings-tab::before{content:"";width:3px;height:18px;border-radius:99px;background:transparent;position:absolute;right:4px;transition:.2s ease}
body[data-page="merchant"] .settings-tab .icon{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:#f3f6f4;color:#6e7973;font-size:19px;transition:.2s ease}
body[data-page="merchant"] .settings-tab:hover{background:#f5faf6;transform:translateX(-2px)}
body[data-page="merchant"] .settings-tab.is-active{background:linear-gradient(135deg,#eaf7eb,#f4fbf5);color:#31883a;box-shadow:0 7px 18px rgba(87,179,90,.08)}
body[data-page="merchant"] .settings-tab.is-active::before{background:#57b35a}.settings-tab.is-active .icon{background:#dff2e1;color:#49a34d}
body[data-page="merchant"] .settings-content{min-width:0}
body[data-page="merchant"] .settings-panel.is-active{animation:settingsPanelIn .28s ease both}
@keyframes settingsPanelIn{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
body[data-page="merchant"] .settings-card{padding:26px;border-radius:22px;border:1px solid #dfe7e1;box-shadow:0 12px 32px rgba(31,50,38,.055);position:relative;overflow:hidden}
body[data-page="merchant"] .settings-card::before{content:"";position:absolute;right:0;top:0;width:90px;height:4px;background:linear-gradient(90deg,#57b35a,#9ed6a0);border-radius:0 0 0 10px}
body[data-page="merchant"] .settings-card>.eyebrow{display:inline-flex;padding:5px 8px;border-radius:8px;background:#eef8ef;margin-bottom:5px}
body[data-page="merchant"] .settings-card>h2{font-size:21px;font-weight:900;margin:4px 0 5px}.settings-card>p.muted{font-size:11px;margin:0 0 17px}
body[data-page="merchant"] .settings-card .section-title{margin-bottom:18px}.settings-card h3{font-size:15px;margin:0}
body[data-page="merchant"] .settings-card .form-grid{gap:12px}
body[data-page="merchant"] .settings-card label{font-size:11px;color:#56615b;gap:7px;margin-bottom:13px}
body[data-page="merchant"] .settings-card input,.settings-card textarea,.settings-card select{border:1px solid #dfe7e1;border-radius:13px;min-height:47px;background:#fbfdfb;transition:border-color .2s ease,box-shadow .2s ease,background .2s ease}
body[data-page="merchant"] .settings-card input:focus,.settings-card textarea:focus,.settings-card select:focus{outline:0;background:#fff;border-color:rgba(87,179,90,.5);box-shadow:0 0 0 4px rgba(87,179,90,.08)}
body[data-page="merchant"] .settings-card .image-preview{width:92px;height:92px;border-radius:18px;background:linear-gradient(145deg,#f6faf6,#edf5ee);border:1px dashed #c9d9cc;transition:.25s ease}.settings-card .image-preview:hover{transform:scale(1.02);border-color:#8fc894}
body[data-page="merchant"] .settings-card .notice{border-radius:15px;border-color:#e4e9d7;background:#fbfcf3;margin:14px 0 18px;padding:14px}
body[data-page="merchant"] .settings-card .switch-row{margin:0;border-bottom:1px solid #edf1ee;padding:16px 0}.settings-card .switch-row:last-of-type{border-bottom:0}
body[data-page="merchant"] .settings-card .switch-row strong{font-size:12px}.settings-card .switch-row small{font-size:10px;color:#87918c;line-height:1.7}
body[data-page="merchant"] .settings-card hr{border:0;border-top:1px solid #edf1ee;margin:22px 0}
body[data-page="merchant"] .settings-card .btn-primary{box-shadow:0 8px 18px rgba(87,179,90,.18);transition:.22s ease}.settings-card .btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(87,179,90,.23)}
body[data-page="merchant"] .settings-card .service-area-row,body[data-page="merchant"] .settings-card .offer-row{padding:13px 0;border-bottom:1px solid #edf1ee}
body[data-page="merchant"] .settings-card .category-card{background:#fbfdfb;border-color:#e3eae4;border-radius:16px;transition:.22s ease}.settings-card .category-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(31,50,38,.06);border-color:#cfe2d2}
@media (max-width:1200px){body[data-page="merchant"] .merchant-products-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.catalog-toolbar-modern{grid-template-columns:1fr 1fr}.catalog-search{grid-column:1/-1}.product-subtabs{justify-content:flex-start}.catalog-overview{align-items:flex-start;flex-direction:column}.catalog-overview__stats{width:100%}}
@media (max-width:800px){body[data-page="merchant"] .catalog-overview{padding:18px}.catalog-overview__stats{grid-template-columns:repeat(2,1fr)}.catalog-toolbar-modern{grid-template-columns:1fr}.catalog-search{grid-column:auto}.catalog-filter-group{display:grid;grid-template-columns:1fr 1fr}.catalog-filter-group select{min-width:0}.product-subtabs{overflow:auto}.product-subtabs .tab{flex:0 0 auto}.catalog-toolbar{margin-top:3px}.merchant-products-grid{grid-template-columns:1fr!important}.settings-hero{padding:18px!important;align-items:flex-start!important;flex-direction:column}.settings-hero__status{width:100%}body[data-page="merchant"] .settings-nav{position:relative;top:auto;display:flex;overflow:auto;padding:7px}.settings-nav .settings-tab{min-width:120px;width:auto}.settings-tab::before{display:none}body[data-page="merchant"] .settings-layout{grid-template-columns:1fr;gap:10px}body[data-page="merchant"] .settings-card{padding:19px}.catalog-overview__intro p{font-size:11px}}
@media (prefers-reduced-motion:reduce){body[data-page="merchant"] .merchant-page.is-active,.merchant-product-card,.settings-panel.is-active,.catalog-live i{animation:none!important}body[data-page="merchant"] .merchant-product-card,.product-edit-btn,.modern-switch,.settings-tab{transition:none!important}}
/* =========================================================
ReBox Subscription Center — v1
========================================================= */
.subscription-security-pill{display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid rgba(87,179,90,.18);background:rgba(87,179,90,.08);border-radius:999px;color:#2f8f45;font-weight:800}
.subscription-loading{padding:48px;text-align:center;color:#6b7472}.subscription-loading .icon{animation:rbSpin 1s linear infinite;display:inline-block}
@keyframes rbSpin{to{transform:rotate(360deg)}}
.subscription-hero-card{display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;padding:28px;border:1px solid #e6ece9;border-radius:28px;background:linear-gradient(135deg,#fff 0%,#f4fbf5 100%);box-shadow:0 18px 45px rgba(20,50,35,.06);animation:rbRise .5s ease both}
.subscription-hero-card.is-expiring{background:linear-gradient(135deg,#fff 0%,#fff8ee 100%)}
.subscription-hero-icon{width:64px;height:64px;border-radius:20px;background:#e9f8eb;color:#45aa51;display:grid;place-items:center;font-size:30px}
.subscription-hero-copy h2{margin:5px 0;font-size:30px}.subscription-hero-copy p{margin:0;color:#737c7a;line-height:1.8}.subscription-status{min-width:140px;text-align:center;padding:15px;border-radius:18px;background:#fff;border:1px solid #e7ece9}.subscription-status strong,.subscription-status small{display:block}.subscription-status small{color:#7a8380;margin-top:4px}.status-dot{display:inline-block;width:10px;height:10px;border-radius:50%;background:#8b9692;margin-left:7px}.status-dot.success{background:#49b55a}.status-dot.warn{background:#e6a72e}.status-dot.danger{background:#e05252}
.subscription-timeline{display:flex;align-items:center;gap:18px;padding:18px 6px;color:#66706d}.subscription-timeline>div:not(.timeline-line){display:flex;flex-direction:column;gap:4px}.timeline-line{height:2px;flex:1;background:linear-gradient(90deg,#57b35a,#dce8df)}
.subscription-alert{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;border-radius:20px;margin:10px 0 28px}.subscription-alert--danger{background:#fff5f2;border:1px solid #f2d6ce;color:#7d3e31}.subscription-alert p{margin:4px 0 0;line-height:1.7}
.subscription-section-head{display:flex;justify-content:space-between;align-items:end;margin:28px 0 14px}.subscription-section-head h2{margin:4px 0 0}.merchant-plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.merchant-plan-card{position:relative;padding:22px;border:1px solid #e4ebe7;border-radius:24px;background:#fff;box-shadow:0 12px 32px rgba(20,50,35,.045);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.merchant-plan-card:hover{transform:translateY(-5px);box-shadow:0 20px 42px rgba(20,50,35,.1);border-color:#a9d7ae}.merchant-plan-card.is-current{border:2px solid #57b35a}.plan-card-top{display:flex;justify-content:space-between;gap:8px}.plan-badge,.plan-current{padding:6px 10px;border-radius:999px;font-size:12px;font-weight:800}.plan-badge{background:#f0f4f2;color:#64706b}.plan-current{background:#eaf8ec;color:#319143}.merchant-plan-card h3{font-size:22px;margin:18px 0 8px}.merchant-plan-card>p{color:#78817e;min-height:48px;line-height:1.7}.plan-price{display:flex;align-items:baseline;gap:5px;margin:18px 0}.plan-price strong{font-size:34px}.plan-price span{color:#7c8582}.plan-features{display:grid;gap:10px;min-height:115px;margin-bottom:18px}.plan-features div{display:flex;gap:7px;align-items:center;font-size:14px}.plan-features .icon{color:#4db45b;font-size:18px}
.subscription-request-card,.subscription-security-card{margin-top:18px;padding:20px;border:1px solid #e6ece9;border-radius:22px;background:#fff;display:flex;align-items:center;gap:16px;position:relative}.subscription-request-card>div:first-child{flex:1}.subscription-admin-note{position:absolute;right:20px;left:20px;bottom:-45px;padding:10px;background:#fff8e8;border-radius:12px;color:#77551e}.subscription-security-card{background:#f5faf6;color:#4a5952}.subscription-security-card>.icon{font-size:28px;color:#47a653}.subscription-security-card p{margin:4px 0 0;color:#71807a;line-height:1.7}
.checkout-plan{display:flex;gap:12px;align-items:center;padding:15px;background:#f3faf4;border-radius:16px;margin-bottom:14px}.checkout-plan>.icon{font-size:28px;color:#4caf55}.checkout-plan strong,.checkout-plan small{display:block}.payment-method-detail{padding:15px;border:1px dashed #b7d9bc;border-radius:16px;margin-bottom:15px}.payment-method-detail>*{display:block;margin-bottom:5px}.payment-method-detail b{font-size:20px;direction:ltr;text-align:right}
.subscription-admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:20px 0}.subscription-admin-stat{padding:18px;border-radius:20px;background:#fff;border:1px solid #e5ebe8}.subscription-admin-stat strong{display:block;font-size:30px}.subscription-admin-stat span{color:#78827e}.subscription-admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.subscription-admin-item{padding:15px;border:1px solid #e7ecea;border-radius:16px;margin-top:10px}.subscription-admin-item__top{display:flex;justify-content:space-between;gap:10px}.subscription-admin-item small{display:block;color:#78827e;margin-top:4px}.subscription-admin-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}.subscription-request-row{display:grid;grid-template-columns:1.4fr 1fr auto;gap:15px;align-items:center;padding:16px;border-bottom:1px solid #edf0ef}.subscription-request-row:last-child{border-bottom:0}.admin-nav-badge{margin-right:auto;background:#e45c52;color:#fff;border-radius:999px;padding:2px 7px;font-size:11px}
@keyframes rbRise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(max-width:1000px){.merchant-plan-grid{grid-template-columns:1fr 1fr}.subscription-admin-grid{grid-template-columns:1fr}.subscription-admin-stats{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.subscription-hero-card{grid-template-columns:1fr}.subscription-status{min-width:0}.merchant-plan-grid{grid-template-columns:1fr}.subscription-admin-stats{grid-template-columns:1fr 1fr}.subscription-request-row{grid-template-columns:1fr}.subscription-timeline{font-size:13px}.subscription-security-pill{display:none}}
@media(prefers-reduced-motion:reduce){.merchant-plan-card,.subscription-hero-card{transition:none;animation:none}}
.replacement-case-banner{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:18px;padding:18px 20px;border:1px solid #f0d6a8;background:linear-gradient(135deg,#fffaf0,#fff);border-radius:22px;box-shadow:0 12px 30px rgba(90,65,20,.06);animation:rbRise .45s ease both}.replacement-case-banner>div{display:flex;align-items:flex-start;gap:12px}.replacement-case-banner .icon{color:#c88722;font-size:25px}.replacement-case-banner strong{display:block}.replacement-case-banner p{margin:4px 0 0;color:#777;line-height:1.7}@media(max-width:650px){.replacement-case-banner{flex-direction:column;align-items:stretch}}
/* ============================================================
ReBox Merchant V16.9.3 — Financial Center + fixed RTL sidebar
============================================================ */
body[data-page="merchant"] .merchant-body{
display:block !important;
position:relative !important;
min-height:calc(100vh - 72px) !important;
overflow:visible !important;
}
body[data-page="merchant"] .merchant-sidebar{
position:fixed !important;
top:72px !important;
right:0 !important;
left:auto !important;
bottom:0 !important;
width:264px !important;
height:calc(100vh - 72px) !important;
max-height:none !important;
overflow-y:auto !important;
overflow-x:hidden !important;
z-index:900 !important;
background:#fff !important;
border-left:1px solid var(--m-border) !important;
border-right:0 !important;
transition:width .34s cubic-bezier(.22,.8,.22,1),transform .34s cubic-bezier(.22,.8,.22,1),box-shadow .34s ease !important;
will-change:width,transform !important;
}
body[data-page="merchant"] .merchant-main{
margin:0 264px 0 0 !important;
width:auto !important;
min-height:calc(100vh - 72px) !important;
transition:margin-right .34s cubic-bezier(.22,.8,.22,1) !important;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar{width:82px !important}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-main{margin-right:82px !important}
body[data-page="merchant"] .merchant-sidebar::-webkit-scrollbar{width:5px}
body[data-page="merchant"] .merchant-sidebar::-webkit-scrollbar-thumb{background:#dce5df;border-radius:99px}
/* Financial center */
.finance-page-head{align-items:flex-end !important}
.finance-head-actions{display:flex;gap:8px;flex-wrap:wrap}
.finance-range-card{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:18px 20px;margin:0 0 18px;background:linear-gradient(135deg,#fff,#f8fcf8);border:1px solid var(--m-border);border-radius:22px;box-shadow:0 10px 30px rgba(31,50,38,.045)}
.finance-range-card>div:first-child{display:grid;gap:4px}.finance-range-card strong{font-size:16px}.finance-range-card small{font-size:11px;color:var(--m-muted)}
.finance-range-row{display:flex;gap:6px;overflow:auto;scrollbar-width:none}.finance-range-row::-webkit-scrollbar{display:none}
.finance-range-row .tab{white-space:nowrap}
.finance-stat-grid--hero{grid-template-columns:repeat(6,minmax(0,1fr)) !important;margin-bottom:18px}
.finance-stat-grid--hero .finance-stat{min-height:126px;align-items:flex-start}.finance-stat-grid--hero .finance-stat__value{font-size:21px}.finance-stat-grid--hero .finance-stat small{display:block;color:var(--m-muted);font-size:9px;margin-top:5px}
.finance-stat--income{background:linear-gradient(145deg,#fff,#f1fbf2)}.finance-stat--profit{border-color:rgba(87,179,90,.25);background:linear-gradient(145deg,#fff,#f4fbf5)}
.finance-stat--delivery .finance-stat__icon{color:#287bd8;background:rgba(40,123,216,.09)}.finance-stat--box .finance-stat__icon{color:#6f59bd;background:rgba(111,89,189,.09)}
.finance-chart{height:230px;display:flex;align-items:flex-end;gap:12px;padding:12px 4px 0;border-bottom:1px solid var(--border-soft);overflow-x:auto}.finance-chart__col{height:100%;min-width:76px;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:8px}.finance-chart__value{font-size:9px;color:var(--m-muted);white-space:nowrap}.finance-chart__bar{height:145px;width:28px;display:flex;align-items:flex-end;border-radius:10px 10px 4px 4px;background:#f0f4f1;overflow:hidden}.finance-chart__bar i{display:block;width:100%;border-radius:10px 10px 4px 4px;background:linear-gradient(180deg,#67bf6b,#48a94e);animation:financeGrow .7s cubic-bezier(.2,.8,.2,1) both}.finance-chart__col small{font-size:9px;color:var(--m-muted)}
@keyframes financeGrow{from{height:0!important;opacity:.3}to{opacity:1}}
.finance-orders-card{margin-top:16px}.finance-orders-table tbody tr{transition:background .18s ease}.finance-orders-table tbody tr:hover{background:#f8fbf8}
.finance-expense-row{animation:financeRowIn .3s ease both}.finance-expense-row .icon-btn{flex:0 0 38px}.finance-expense-row .icon-btn:hover{color:#c64e4e;background:#fff2f2;border-color:#efcccc}
@keyframes financeRowIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (max-width:1250px){.finance-stat-grid--hero{grid-template-columns:repeat(3,minmax(0,1fr)) !important}.finance-main-grid{grid-template-columns:1fr !important}}
@media (max-width:1100px) and (min-width:801px){body[data-page="merchant"] .merchant-sidebar{width:236px !important}.body[data-page="merchant"] .merchant-main{margin-right:236px !important}body[data-page="merchant"] .merchant-main{margin-right:236px !important}body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar{width:78px !important}body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-main{margin-right:78px !important}.finance-stat-grid--hero{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}
@media (max-width:800px){
body[data-page="merchant"] .merchant-body{display:block !important}
body[data-page="merchant"] .merchant-main,body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-main{margin:0 !important;min-height:calc(100vh - 68px) !important}
body[data-page="merchant"] .merchant-sidebar,body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar{position:fixed !important;top:68px !important;right:0 !important;left:auto !important;bottom:0 !important;width:min(286px,88vw) !important;height:calc(100vh - 68px) !important;transform:translateX(105%) !important;transition:transform .34s cubic-bezier(.22,.8,.22,1) !important;box-shadow:-18px 0 45px rgba(31,50,38,.13) !important;z-index:1001 !important}
body[data-page="merchant"] .merchant-sidebar.is-open{transform:translateX(0) !important}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar{padding-inline:12px !important}
.finance-range-card{align-items:flex-start;flex-direction:column}.finance-range-row{width:100%}.finance-range-row .tab{flex:1}
.finance-head-actions{width:100%}.finance-head-actions .btn{flex:1}
.finance-stat-grid--hero{grid-template-columns:1fr 1fr !important}.finance-stat-grid--hero .finance-stat{min-height:105px;padding:13px}.finance-stat-grid--hero .finance-stat__value{font-size:18px}
}
@media (max-width:560px){.finance-stat-grid--hero{grid-template-columns:1fr !important}.finance-chart__col{min-width:65px}.finance-card{padding:14px}.finance-orders-table{min-width:700px}}
/* ============================================================
ReBox v16.9.3 — Merchant viewport / spacing final lock
Keeps the RTL sidebar fixed while the main canvas uses the
exact remaining viewport width. Prevents legacy layout rules
from creating horizontal gaps or shifting the content.
============================================================ */
html:has(body[data-page="merchant"]),
body[data-page="merchant"] {
width: 100%;
max-width: 100%;
overflow-x: clip;
}
body[data-page="merchant"] .merchant-app {
width: 100%;
min-width: 0;
overflow-x: clip;
}
body[data-page="merchant"] .merchant-topbar {
width: 100%;
box-sizing: border-box;
}
@media (min-width: 801px) {
body[data-page="merchant"] .merchant-body {
display: block !important;
position: relative !important;
width: 100%;
min-height: calc(100vh - 72px) !important;
overflow: visible !important;
}
body[data-page="merchant"] .merchant-sidebar {
--merchant-sidebar-width: 264px;
position: fixed !important;
inset-block-start: 72px !important;
inset-inline-end: 0 !important;
inset-inline-start: auto !important;
inset-block-end: 0 !important;
width: var(--merchant-sidebar-width) !important;
height: calc(100dvh - 72px) !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
box-sizing: border-box !important;
overflow-x: hidden !important;
overflow-y: auto !important;
z-index: 900 !important;
}
body[data-page="merchant"] .merchant-main {
--merchant-sidebar-current: 264px;
display: block !important;
width: auto !important;
min-width: 0 !important;
min-height: calc(100dvh - 72px) !important;
margin-block: 0 !important;
margin-inline-start: 0 !important;
margin-inline-end: var(--merchant-sidebar-current) !important;
padding-block: clamp(24px, 3vw, 42px) !important;
padding-inline: clamp(20px, 3vw, 42px) !important;
box-sizing: border-box !important;
transition: margin-inline-end .34s cubic-bezier(.22,.8,.22,1) !important;
}
body[data-page="merchant"] .merchant-main > .merchant-page {
width: 100%;
max-width: 1480px;
margin-inline: auto;
min-width: 0;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed {
--merchant-sidebar-current: 82px;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar {
width: 82px !important;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-main {
--merchant-sidebar-current: 82px;
}
body[data-page="merchant"] .merchant-sidebar,
body[data-page="merchant"] .merchant-main,
body[data-page="merchant"] .merchant-main > .merchant-page {
transform: none !important;
}
body[data-page="merchant"] .page-head,
body[data-page="merchant"] .dashboard-hero {
width: 100%;
min-width: 0;
}
}
@media (min-width: 801px) and (max-width: 1100px) {
body[data-page="merchant"] .merchant-sidebar {
--merchant-sidebar-width: 236px;
width: 236px !important;
}
body[data-page="merchant"] .merchant-main {
--merchant-sidebar-current: 236px;
padding-inline: clamp(18px, 2.5vw, 28px) !important;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar {
width: 78px !important;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-main {
--merchant-sidebar-current: 78px;
}
}
@media (max-width: 800px) {
body[data-page="merchant"] .merchant-main {
width: 100% !important;
margin: 0 !important;
padding: 18px !important;
min-width: 0 !important;
}
}
/* ============================================================
ReBox v16.9.3 — MERCHANT SIDEBAR RIGHT/FIXED FINAL PATCH
Sidebar must stay pinned to the RIGHT while the main document
scrolls independently. The legacy grid placement below is
intentionally overridden here.
============================================================ */
@media (min-width: 801px) {
body[data-page="merchant"] .merchant-body,
html[dir="rtl"] body[data-page="merchant"] .merchant-body {
display: block !important;
position: relative !important;
width: 100% !important;
min-width: 0 !important;
direction: rtl !important;
}
body[data-page="merchant"] .merchant-sidebar {
position: fixed !important;
top: var(--merchant-header-height) !important;
right: 0 !important;
left: auto !important;
inset-inline-start: auto !important;
inset-inline-end: 0 !important;
bottom: 0 !important;
width: var(--merchant-sidebar-width) !important;
min-width: var(--merchant-sidebar-width) !important;
max-width: var(--merchant-sidebar-width) !important;
height: calc(100dvh - var(--merchant-header-height)) !important;
min-height: 0 !important;
margin: 0 !important;
transform: translate3d(0,0,0) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
z-index: 1100 !important;
transition: width .28s cubic-bezier(.22,1,.36,1),
box-shadow .28s ease,
padding .28s ease !important;
will-change: width;
}
body[data-page="merchant"] .merchant-main {
display: block !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 var(--merchant-sidebar-width) 0 0 !important;
padding: 34px 40px 58px !important;
box-sizing: border-box !important;
direction: rtl !important;
overflow-x: hidden !important;
transition: margin-right .28s cubic-bezier(.22,1,.36,1),
padding .28s ease !important;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar {
width: 82px !important;
min-width: 82px !important;
max-width: 82px !important;
padding-inline: 10px !important;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-main {
margin-right: 82px !important;
}
body[data-page="merchant"] .merchant-sidebar-head {
position: sticky !important;
top: 0 !important;
z-index: 2 !important;
background: #fff !important;
padding-bottom: 8px !important;
}
body[data-page="merchant"] .merchant-sidebar-toggle {
flex: 0 0 38px !important;
}
}
@media (min-width: 801px) and (max-width: 1199px) {
body[data-page="merchant"] {
--merchant-sidebar-width: 250px;
}
body[data-page="merchant"] .merchant-main {
margin-right: var(--merchant-sidebar-width) !important;
padding: 28px 28px 48px !important;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-main {
margin-right: 78px !important;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar {
width: 78px !important;
min-width: 78px !important;
max-width: 78px !important;
}
}
/* Mobile remains a right-side drawer, not a fixed desktop rail. */
@media (max-width: 800px) {
body[data-page="merchant"] .merchant-body,
html[dir="rtl"] body[data-page="merchant"] .merchant-body {
display: block !important;
direction: rtl !important;
}
body[data-page="merchant"] .merchant-main {
margin: 0 !important;
width: 100% !important;
}
body[data-page="merchant"] .merchant-sidebar {
right: 0 !important;
left: auto !important;
inset-inline-end: 0 !important;
inset-inline-start: auto !important;
}
}
/* ============================================================
ReBox Merchant — Sidebar redesign (right-aligned RTL rail)
Single, unambiguous source of truth for the merchant sidebar's
position, width and open/close behaviour. Placed at the very
end of the stylesheet on purpose: earlier sidebar rules above
are left untouched (nothing deleted), this section simply has
final say in the cascade so the sidebar always renders correctly
on the right and opens/closes cleanly, on every screen size.
Also hides the store name in the sidebar header per request.
============================================================ */
body[data-page="merchant"] {
--rbx-header-h: 72px;
--rbx-sidebar-w: 264px;
--rbx-sidebar-w-tablet: 236px;
--rbx-sidebar-w-collapsed: 82px;
--rbx-sidebar-w-mobile: min(300px, 86vw);
}
/* Desktop / tablet (>=801px): docked rail, fixed to the right edge */
@media (min-width: 801px) {
body[data-page="merchant"] .merchant-body {
display: block !important;
position: relative !important;
}
body[data-page="merchant"] .merchant-sidebar {
position: fixed !important;
top: var(--rbx-header-h) !important;
right: 0 !important;
left: auto !important;
bottom: 0 !important;
width: var(--rbx-sidebar-w) !important;
min-width: var(--rbx-sidebar-w) !important;
max-width: var(--rbx-sidebar-w) !important;
height: auto !important;
transform: none !important;
direction: rtl !important;
border-right: 0 !important;
border-left: 1px solid var(--m-border) !important;
box-shadow: -10px 0 30px rgba(31,50,38,.05) !important;
z-index: 500 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
transition: width .28s cubic-bezier(.22,1,.36,1) !important;
}
body[data-page="merchant"] .merchant-main {
margin: 0 var(--rbx-sidebar-w) 0 0 !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
transition: margin-right .28s cubic-bezier(.22,1,.36,1) !important;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-sidebar {
width: var(--rbx-sidebar-w-collapsed) !important;
min-width: var(--rbx-sidebar-w-collapsed) !important;
max-width: var(--rbx-sidebar-w-collapsed) !important;
}
body[data-page="merchant"] .merchant-body.sidebar-collapsed .merchant-main {
margin-right: var(--rbx-sidebar-w-collapsed) !important;
}
}
@media (min-width: 801px) and (max-width: 1100px) {
body[data-page="merchant"] .merchant-sidebar {
width: var(--rbx-sidebar-w-tablet) !important;
min-width: var(--rbx-sidebar-w-tablet) !important;
max-width: var(--rbx-sidebar-w-tablet) !important;
}
body[data-page="merchant"] .merchant-main {
margin-right: var(--rbx-sidebar-w-tablet) !important;
}
}
/* Mobile (<=800px): off-canvas drawer that slides in from the right */
@media (max-width: 800px) {
body[data-page="merchant"] .merchant-body {
display: block !important;
position: relative !important;
}
body[data-page="merchant"] .merchant-main {
margin: 0 !important;
width: 100% !important;
}
body[data-page="merchant"] .merchant-sidebar {
position: fixed !important;
top: var(--rbx-header-h) !important;
right: 0 !important;
left: auto !important;
bottom: 0 !important;
width: var(--rbx-sidebar-w-mobile) !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
direction: rtl !important;
border-left: 1px solid var(--m-border) !important;
border-right: 0 !important;
box-shadow: -18px 0 45px rgba(31,50,38,.16) !important;
z-index: 2000 !important;
overflow-y: auto !important;
overflow-x: hidden !important;
transform: translateX(100%) !important;
transition: transform .3s cubic-bezier(.22,1,.36,1) !important;
}
body[data-page="merchant"] .merchant-sidebar.is-open {
transform: translateX(0) !important;
}
/* Dimmed backdrop behind the open drawer; also gives the eye a clear "tap outside to close" target */
body[data-page="merchant"] .merchant-body::after {
content: "";
position: fixed;
inset: var(--rbx-header-h) 0 0 0;
background: rgba(15,23,18,.35);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .25s ease, visibility .25s ease;
z-index: 1900;
}
body[data-page="merchant"] .merchant-body:has(.merchant-sidebar.is-open)::after {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
}
/* Store name removed from the sidebar per request; logo + status stay */
body[data-page="merchant"] #merchantSidebarStoreName {
display: none !important;
}
body[data-page="merchant"] .merchant-sidebar-store > div:last-child {
justify-content: center !important;
}
/* ============================================================
ReBox Merchant — Design refresh (redesign pass)
Orders / ReBoxes / Products / Finance / Plan / Settings /
Toast notifications / section transitions.
Appended last on purpose — wins the cascade over the legacy
rules above without deleting or rewriting them.
============================================================ */
body[data-page="merchant"] {
--rbx-green: #57b35a;
--rbx-green-deep: #2f7a3a;
--rbx-green-tint: #eaf7eb;
--rbx-ink: #20252d;
--rbx-muted: #6d766f;
--rbx-border: #e5eae5;
--rbx-card: #ffffff;
--rbx-bg: #f5f7f5;
--rbx-kraft: #c99a5b;
--rbx-kraft-deep: #8a6431;
--rbx-kraft-ink: #6b4a20;
--rbx-kraft-tint: #fbf3e6;
--rbx-amber: #d4932e;
--rbx-amber-tint: #fdf3e2;
--rbx-red: #c6564c;
--rbx-red-tint: #fdeeed;
--rbx-blue: #2f7bd8;
--rbx-blue-tint: #eaf2fc;
--rbx-r-sm: 12px;
--rbx-r-md: 18px;
--rbx-r-lg: 24px;
--rbx-shadow-sm: 0 1px 2px rgba(20,30,24,.05), 0 3px 10px rgba(20,30,24,.04);
--rbx-shadow-md: 0 2px 4px rgba(20,30,24,.04), 0 12px 28px rgba(20,30,24,.07);
--rbx-shadow-lift: 0 10px 26px rgba(20,30,24,.12);
--rbx-ease: cubic-bezier(.22,1,.36,1);
}
/* ---------- Section-switch motion: one orchestrated moment ---------- */
body[data-page="merchant"] .merchant-page {
animation: rbxPageIn .28s ease-out both;
}
@keyframes rbxPageIn {
from { opacity: 0; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
body[data-page="merchant"] .merchant-page { animation: none; }
}
/* ============================================================
Toast notifications — shared component (all pages), redesigned.
Stacked container + typed cards with icon, accent, progress bar.
Function signature unchanged: showToast(message, type) still works
everywhere it is already called across the app.
============================================================ */
.toast-stack {
position: fixed;
z-index: 4000;
display: flex;
flex-direction: column;
gap: 10px;
pointer-events: none;
top: calc(78px + env(safe-area-inset-top, 0px));
right: max(14px, env(safe-area-inset-right, 0px));
left: auto;
bottom: auto;
transform: none;
width: min(380px, calc(100vw - 28px));
align-items: stretch;
}
@media (min-width: 641px) {
.toast-stack {
top: 24px;
right: 24px;
width: min(390px, calc(100vw - 48px));
}
}
body[data-page="merchant"] .toast-stack {
top: 24px;
right: 24px;
left: auto;
bottom: auto;
transform: none;
}
.toast-item {
pointer-events: auto;
display: flex;
align-items: flex-start;
gap: 10px;
background: #fff;
color: var(--rbx-ink, #20252d);
border: 1px solid #e7ece8;
border-radius: 14px;
padding: 12px 14px;
box-shadow: 0 10px 30px rgba(20,30,24,.14);
min-height: 46px;
position: relative;
overflow: hidden;
opacity: 0;
transform: translateY(-10px) scale(.98);
transition: opacity .22s ease, transform .22s ease;
}
.toast-item::before {
content: "";
position: absolute;
inset-inline-start: 0;
top: 0; bottom: 0;
width: 4px;
background: #9aa39d;
}
.toast-item.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.toast-item.is-leaving { opacity: 0; transform: translateY(-6px) scale(.98); }
.toast-item__icon {
flex: 0 0 26px;
width: 26px; height: 26px;
border-radius: 50%;
display: grid;
place-items: center;
font-family: "Material Symbols Rounded";
font-size: 16px;
margin-top: 1px;
background: #eef1ee;
color: #6d766f;
}
.toast-item__body { flex: 1; min-width: 0; }
.toast-item__msg { font-size: 13px; font-weight: 700; line-height: 1.5; word-break: break-word; }
.toast-item__bar { position: absolute; inset-inline-start: 0; bottom: 0; height: 2px; background: rgba(0,0,0,.08); width: 100%; overflow: hidden; }
.toast-item__bar i { display: block; height: 100%; width: 100%; transform-origin: right center; background: #c7cdc8; animation: rbxToastDrain linear forwards; }
[dir="rtl"] .toast-item__bar i { transform-origin: right center; }
@keyframes rbxToastDrain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.toast-item__close {
flex: 0 0 auto;
width: 22px; height: 22px;
border: 0; background: transparent; color: #9aa39d;
border-radius: 50%; cursor: pointer;
display: grid; place-items: center;
font-family: "Material Symbols Rounded"; font-size: 15px;
}
.toast-item__close:hover { background: #f1f3f1; color: #5a6560; }
.toast-item--success::before { background: var(--rbx-green, #57b35a); }
.toast-item--success .toast-item__icon { background: var(--rbx-green-tint, #eaf7eb); color: var(--rbx-green-deep, #2f7a3a); }
.toast-item--success .toast-item__bar i { background: var(--rbx-green, #57b35a); }
.toast-item--error::before { background: var(--rbx-red, #c6564c); }
.toast-item--error .toast-item__icon { background: var(--rbx-red-tint, #fdeeed); color: var(--rbx-red, #c6564c); }
.toast-item--error .toast-item__bar i { background: var(--rbx-red, #c6564c); }
.toast-item--info::before { background: var(--rbx-blue, #2f7bd8); }
.toast-item--info .toast-item__icon { background: var(--rbx-blue-tint, #eaf2fc); color: var(--rbx-blue, #2f7bd8); }
.toast-item--info .toast-item__bar i { background: var(--rbx-blue, #2f7bd8); }
.toast-item--warning::before { background: var(--rbx-amber, #d4932e); }
.toast-item--warning .toast-item__icon { background: var(--rbx-amber-tint, #fdf3e2); color: var(--rbx-amber, #d4932e); }
.toast-item--warning .toast-item__bar i { background: var(--rbx-amber, #d4932e); }
/* Hide the legacy single-node toast completely; the new stack replaces it visually. */
.toast { display: none !important; }
/* ============================================================
ReBoxes — literal box-shaped cards.
A kraft-cardboard "lid" (diagonal-cut flap + tape seam + folded
corner) sits over a clean manifest body. Grounded directly in
the product itself: a ReBox is a physical box.
============================================================ */
body[data-page="merchant"] #page-reboxes #reboxesList { margin-top: 4px; }
body[data-page="merchant"] .rbx-box-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 20px;
}
body[data-page="merchant"] .rbx-box-card {
position: relative;
background: var(--rbx-card);
border: 1px solid var(--rbx-border);
border-radius: var(--rbx-r-lg);
box-shadow: var(--rbx-shadow-sm);
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow .25s var(--rbx-ease), transform .25s var(--rbx-ease);
}
body[data-page="merchant"] .rbx-box-card:hover {
box-shadow: var(--rbx-shadow-md);
transform: translateY(-3px);
}
body[data-page="merchant"] .rbx-box-card--issue { box-shadow: 0 0 0 2px rgba(198,86,76,.35), var(--rbx-shadow-sm); }
/* --- the lid: kraft gradient, diagonal flap cut, tape seam, folded corner --- */
body[data-page="merchant"] .rbx-box-lid {
position: relative;
padding: 18px 20px 22px;
background: linear-gradient(155deg, var(--rbx-kraft-tint) 0%, #f1dfc0 100%);
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 14px), 52% 100%, 0 calc(100% - 14px));
padding-bottom: 30px;
}
body[data-page="merchant"] .rbx-box-lid::before {
/* folded corner */
content: "";
position: absolute;
inset-inline-end: 0; top: 0;
width: 22px; height: 22px;
background: linear-gradient(135deg, rgba(255,255,255,.75), rgba(255,255,255,0) 60%), #e4c691;
clip-path: polygon(100% 0, 0 0, 100% 100%);
}
body[data-page="merchant"] .rbx-box-lid::after {
/* tape seam */
content: "";
position: absolute;
top: 0; bottom: 14px;
inset-inline-start: 50%;
width: 0;
border-inline-start: 2px dashed rgba(138,100,49,.4);
transform: translateX(-1px);
}
body[data-page="merchant"] .rbx-box-lid__row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; position: relative; z-index: 1; }
body[data-page="merchant"] .rbx-box-lid__id { display: flex; align-items: center; gap: 10px; min-width: 0; }
body[data-page="merchant"] .rbx-box-lid__icon {
flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px;
background: rgba(255,255,255,.55); color: var(--rbx-kraft-ink);
display: grid; place-items: center; font-size: 20px;
box-shadow: inset 0 0 0 1px rgba(138,100,49,.18);
}
body[data-page="merchant"] .rbx-box-lid__id h3 { margin: 1px 0 0; font-size: 16px; font-weight: 900; color: var(--rbx-kraft-ink); }
body[data-page="merchant"] .rbx-box-lid__eyebrow { font-size: 10px; font-weight: 900; letter-spacing: .03em; color: rgba(138,100,49,.75); }
body[data-page="merchant"] .rbx-box-lid__customer { position: relative; z-index: 1; margin: 10px 0 0; font-size: 12px; font-weight: 700; color: var(--rbx-kraft-ink); opacity: .85; }
/* --- the body: manifest-style stats + compartments + actions --- */
body[data-page="merchant"] .rbx-box-body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
body[data-page="merchant"] .rbx-box-stats { display: flex; }
body[data-page="merchant"] .rbx-box-stats > div { flex: 1; min-width: 0; padding: 0 10px; text-align: center; }
body[data-page="merchant"] .rbx-box-stats > div:first-child { padding-inline-start: 0; }
body[data-page="merchant"] .rbx-box-stats > div:last-child { padding-inline-end: 0; }
body[data-page="merchant"] .rbx-box-stats > div + div { border-inline-start: 1px dashed var(--rbx-border); }
body[data-page="merchant"] .rbx-box-stats .icon { font-size: 16px; color: var(--rbx-muted); }
body[data-page="merchant"] .rbx-box-stats small { display: block; font-size: 9.5px; color: var(--rbx-muted); margin-top: 2px; }
body[data-page="merchant"] .rbx-box-stats strong { display: block; font: 900 14px/1.2 Roboto,"Noto Sans Arabic",sans-serif; color: var(--rbx-ink); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-page="merchant"] .rbx-box-stats span.stat-sub { display: block; font-size: 9px; color: var(--rbx-muted); margin-top: 1px; }
body[data-page="merchant"] .rbx-box-compartments { display: flex; flex-wrap: wrap; gap: 6px; }
body[data-page="merchant"] .rbx-box-compartments span {
display: inline-flex; align-items: center; gap: 4px;
padding: 5px 9px; border-radius: 8px;
background: var(--rbx-kraft-tint); color: var(--rbx-kraft-ink);
font-size: 10.5px; font-weight: 800;
border: 1px solid rgba(138,100,49,.14);
}
body[data-page="merchant"] .rbx-box-compartments .icon { font-size: 12px; }
body[data-page="merchant"] .rbx-box-products {
font-size: 11.5px; color: var(--rbx-muted);
background: #f8faf8; border-radius: 10px; padding: 8px 10px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body[data-page="merchant"] .rbx-box-actions { display: flex; gap: 8px; margin-top: auto; padding-top: 2px; }
body[data-page="merchant"] .rbx-box-actions .btn { flex: 1; }
/* Status ribbon sitting on the lid */
body[data-page="merchant"] .rbx-status {
display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
padding: 5px 10px; border-radius: 999px; font-size: 10.5px; font-weight: 900;
background: #fff; color: var(--rbx-muted); border: 1px solid var(--rbx-border);
white-space: nowrap;
}
body[data-page="merchant"] .rbx-status .icon { font-size: 13px; }
body[data-page="merchant"] .rbx-status--good { background: var(--rbx-green-tint); color: var(--rbx-green-deep); border-color: rgba(87,179,90,.25); }
body[data-page="merchant"] .rbx-status--warn { background: var(--rbx-amber-tint); color: #8a611c; border-color: rgba(212,147,46,.3); }
body[data-page="merchant"] .rbx-status--danger { background: var(--rbx-red-tint); color: #9a3e36; border-color: rgba(198,86,76,.3); }
body[data-page="merchant"] .rbx-status--neutral { background: #f1f3f1; color: var(--rbx-muted); }
@media (max-width: 700px) {
body[data-page="merchant"] .rbx-box-grid { grid-template-columns: 1fr; }
}
/* ============================================================
Orders — redesigned scannable cards with a status accent rail
and a 4-step progress tracker (the order lifecycle genuinely
is a sequence, so a stepper here encodes real information).
============================================================ */
body[data-page="merchant"] #ordersList,
body[data-page="merchant"] #dashboardOrders {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 16px;
}
body[data-page="merchant"] #dashboardOrders { grid-template-columns: 1fr; }
body[data-page="merchant"] .order-list { display: contents; }
body[data-page="merchant"] .rbx-order-card {
position: relative;
background: var(--rbx-card);
border: 1px solid var(--rbx-border);
border-radius: var(--rbx-r-md);
box-shadow: var(--rbx-shadow-sm);
padding: 16px 18px 16px 20px;
display: flex;
flex-direction: column;
gap: 12px;
transition: box-shadow .22s var(--rbx-ease), transform .22s var(--rbx-ease);
}
body[data-page="merchant"] .rbx-order-card:hover { box-shadow: var(--rbx-shadow-md); transform: translateY(-2px); }
body[data-page="merchant"] .rbx-order-card::before {
content: "";
position: absolute; inset-inline-start: 0; top: 12px; bottom: 12px;
width: 4px; border-radius: 4px;
background: var(--rbx-status-color, #9aa39d);
}
body[data-page="merchant"] .rbx-order-card--danger { --rbx-status-color: var(--rbx-red); }
body[data-page="merchant"] .rbx-order-card--warn { --rbx-status-color: var(--rbx-amber); }
body[data-page="merchant"] .rbx-order-card--info { --rbx-status-color: var(--rbx-blue); }
body[data-page="merchant"] .rbx-order-card--good { --rbx-status-color: var(--rbx-green); }
body[data-page="merchant"] .rbx-order-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
body[data-page="merchant"] .rbx-order-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
body[data-page="merchant"] .rbx-order-icon { flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; background: var(--rbx-green-tint); color: var(--rbx-green-deep); display: grid; place-items: center; font-size: 19px; }
body[data-page="merchant"] .rbx-order-id strong { display: block; font-size: 13px; font-weight: 900; }
body[data-page="merchant"] .rbx-order-id span { display: block; font-size: 11px; color: var(--rbx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
body[data-page="merchant"] .rbx-order-stats { display: flex; align-items: center; gap: 14px; padding: 10px 12px; background: #f8faf8; border-radius: 12px; }
body[data-page="merchant"] .rbx-order-stats > div { display: flex; align-items: center; gap: 6px; }
body[data-page="merchant"] .rbx-order-stats .icon { font-size: 15px; color: var(--rbx-muted); }
body[data-page="merchant"] .rbx-order-stats b { font-size: 12px; font-weight: 900; }
body[data-page="merchant"] .rbx-order-stats small { font-size: 10px; color: var(--rbx-muted); }
body[data-page="merchant"] .rbx-order-price { margin-inline-start: auto; text-align: end; }
body[data-page="merchant"] .rbx-order-price b { font: 900 16px/1 Roboto,"Noto Sans Arabic",sans-serif; color: var(--rbx-green-deep); }
body[data-page="merchant"] .rbx-steps { display: flex; align-items: center; gap: 4px; padding: 0 2px; }
body[data-page="merchant"] .rbx-steps i { flex: 1; height: 4px; border-radius: 4px; background: #e9ede9; }
body[data-page="merchant"] .rbx-steps i.is-done { background: var(--rbx-green); }
body[data-page="merchant"] .rbx-steps i.is-current { background: var(--rbx-status-color, var(--rbx-amber)); }
body[data-page="merchant"] .rbx-order-products { font-size: 11.5px; color: var(--rbx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body[data-page="merchant"] .rbx-order-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid #eef1ee; }
body[data-page="merchant"] .rbx-order-address { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--rbx-muted); min-width: 0; }
body[data-page="merchant"] .rbx-order-address .icon { font-size: 14px; flex: 0 0 auto; }
body[data-page="merchant"] .rbx-order-address span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
body[data-page="merchant"] .rbx-order-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: stretch; min-width: 0; max-width: 100%; }
body[data-page="merchant"] .rbx-order-actions .btn { flex: 0 1 auto; min-width: 0; max-width: 100%; }
body[data-page="merchant"] .rbx-order-foot { align-items: flex-end; }
body[data-page="merchant"] .rbx-order-address { flex: 1 1 180px; min-width: 0; }
@media (max-width: 700px) {
body[data-page="merchant"] #ordersList { grid-template-columns: 1fr; }
}
/* ============================================================
Cohesion pass — bring Products / Finance / Plan / Settings in
line with the same shadow, radius and motion language used by
the redesigned Orders / ReBoxes cards. Structure kept as-is
(it was already solid); this focuses on consistency + polish.
============================================================ */
body[data-page="merchant"] .merchant-product-card,
body[data-page="merchant"] .finance-stat,
body[data-page="merchant"] .finance-card,
body[data-page="merchant"] .subscription-hero-card,
body[data-page="merchant"] .merchant-plan-card,
body[data-page="merchant"] .settings-card,
body[data-page="merchant"] .dashboard-panel,
body[data-page="merchant"] .dashboard-kpi,
body[data-page="merchant"] .dashboard-welcome,
body[data-page="merchant"] .store-summary-card {
box-shadow: var(--rbx-shadow-sm) !important;
transition: box-shadow .22s var(--rbx-ease), transform .22s var(--rbx-ease), border-color .22s var(--rbx-ease) !important;
}
body[data-page="merchant"] .merchant-product-card:hover,
body[data-page="merchant"] .finance-card:hover,
body[data-page="merchant"] .merchant-plan-card:hover,
body[data-page="merchant"] .dashboard-panel:hover {
box-shadow: var(--rbx-shadow-md) !important;
transform: translateY(-2px);
}
body[data-page="merchant"] .merchant-plan-card.is-current {
border-color: rgba(87,179,90,.4) !important;
box-shadow: 0 0 0 2px rgba(87,179,90,.16), var(--rbx-shadow-sm) !important;
}
body[data-page="merchant"] .merchant-plan-card.is-current:hover {
box-shadow: 0 0 0 2px rgba(87,179,90,.2), var(--rbx-shadow-md) !important;
}
/* Buttons: consistent smooth interaction everywhere */
body[data-page="merchant"] .btn,
body[data-page="merchant"] .icon-btn,
body[data-page="merchant"] .tab,
body[data-page="merchant"] .merchant-nav,
body[data-page="merchant"] .settings-tab,
body[data-page="merchant"] .modern-switch,
body[data-page="merchant"] .switch {
transition: background .18s var(--rbx-ease), color .18s var(--rbx-ease), border-color .18s var(--rbx-ease), transform .18s var(--rbx-ease), box-shadow .18s var(--rbx-ease);
}
body[data-page="merchant"] .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(87,179,90,.28); }
body[data-page="merchant"] .btn:active { transform: translateY(0); }
/* Finance stat icon circles: consistent sizing/contrast */
body[data-page="merchant"] .finance-stat__icon {
width: 42px; height: 42px; border-radius: 13px;
display: grid; place-items: center; font-size: 21px;
background: var(--rbx-green-tint); color: var(--rbx-green-deep);
flex: 0 0 42px;
}
body[data-page="merchant"] .finance-stat__label { font-size: 11px; color: var(--rbx-muted); font-weight: 800; }
body[data-page="merchant"] .finance-stat__value { display: block; font: 900 21px/1.2 Roboto,"Noto Sans Arabic",sans-serif; color: var(--rbx-ink); margin-top: 2px; }
/* Settings form inputs: calmer, more generous, clearer focus */
body[data-page="merchant"] .settings-card input:not([type=checkbox]):not([type=file]),
body[data-page="merchant"] .settings-card textarea,
body[data-page="merchant"] .settings-card select {
border-radius: 12px !important;
border-color: var(--rbx-border) !important;
transition: border-color .18s ease, box-shadow .18s ease;
}
body[data-page="merchant"] .settings-card input:focus,
body[data-page="merchant"] .settings-card textarea:focus,
body[data-page="merchant"] .settings-card select:focus {
outline: none;
border-color: var(--rbx-green) !important;
box-shadow: 0 0 0 3px rgba(87,179,90,.15);
}
/* Accessible keyboard focus everywhere in the merchant dashboard */
body[data-page="merchant"] a:focus-visible,
body[data-page="merchant"] button:focus-visible,
body[data-page="merchant"] input:focus-visible,
body[data-page="merchant"] select:focus-visible,
body[data-page="merchant"] textarea:focus-visible,
body[data-page="merchant"] [tabindex]:focus-visible {
outline: 2px solid var(--rbx-green);
outline-offset: 2px;
}
/* Loading / empty / error states: calmer, consistent with card language */
body[data-page="merchant"] .loading-state,
body[data-page="merchant"] .empty-state,
body[data-page="merchant"] .error-state {
border-radius: var(--rbx-r-lg);
border-color: var(--rbx-border);
background: #fbfcfb;
}
body[data-page="merchant"] .loading-state .icon {
animation: rbxSpin 1s linear infinite;
display: inline-block;
color: var(--rbx-green);
}
@keyframes rbxSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
body[data-page="merchant"] .loading-state .icon { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
body[data-page="merchant"] * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
/* ============================================================
Customer pages — gentle section-switch fade (index/products/
schedule/review/boxes/rewards/settings/map). One calm, orchestrated
transition instead of an abrupt instant swap between sections.
============================================================ */
section[id^="section-"]:not(.hidden){
animation: reboxSectionIn .28s ease-out both;
}
@keyframes reboxSectionIn{
from{opacity:0}
to{opacity:1}
}
@media (prefers-reduced-motion: reduce){
section[id^="section-"]:not(.hidden){animation:none}
}
/* ============================================================
Settings — redesign pass (Store / Delivery / ReBox /
Notifications / Account / Legal) + new Payment Methods section.
Reuses the --rbx-* tokens from the earlier dashboard redesign.
============================================================ */
body[data-page="merchant"] .settings-content{
display:flex; flex-direction:column; gap:0;
}
body[data-page="merchant"] .rbx-settings-card{
background:var(--rbx-card,#fff);
border:1px solid var(--rbx-border,#e5eae5);
border-radius:var(--rbx-r-lg,24px);
box-shadow:var(--rbx-shadow-sm,0 1px 2px rgba(20,30,24,.05),0 3px 10px rgba(20,30,24,.04));
padding:24px 26px;
margin-bottom:20px;
transition:box-shadow .22s cubic-bezier(.22,1,.36,1);
}
body[data-page="merchant"] .rbx-settings-card:hover{ box-shadow:var(--rbx-shadow-md,0 2px 4px rgba(20,30,24,.04),0 12px 28px rgba(20,30,24,.07)); }
body[data-page="merchant"] .rbx-settings-card__head{
display:flex; align-items:flex-start; gap:14px;
margin-bottom:20px; padding-bottom:18px; border-bottom:1px solid #eef1ee;
}
body[data-page="merchant"] .rbx-settings-card__icon{
flex:0 0 46px; width:46px; height:46px; border-radius:14px;
display:grid; place-items:center; font-size:22px;
background:var(--rbx-green-tint,#eaf7eb); color:var(--rbx-green-deep,#2f7a3a);
}
body[data-page="merchant"] .rbx-settings-card__head h2{ margin:0; font-size:17px; font-weight:900; color:var(--rbx-ink,#20252d); }
body[data-page="merchant"] .rbx-settings-card__head p{ margin:3px 0 0; font-size:12px; color:var(--rbx-muted,#6d766f); line-height:1.6; }
body[data-page="merchant"] .rbx-field-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
body[data-page="merchant"] .rbx-field{ display:flex; flex-direction:column; gap:7px; margin-bottom:16px; }
body[data-page="merchant"] .rbx-field > span,
body[data-page="merchant"] .rbx-field > label{ font-size:12.5px; font-weight:800; color:var(--rbx-ink,#20252d); }
body[data-page="merchant"] .rbx-field input,
body[data-page="merchant"] .rbx-field select,
body[data-page="merchant"] .rbx-field textarea{
border:1px solid var(--rbx-border,#e5eae5); border-radius:12px; min-height:46px;
padding:0 14px; font:inherit; background:#fbfcfb;
transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
body[data-page="merchant"] .rbx-field textarea{ padding:12px 14px; min-height:90px; resize:vertical; }
body[data-page="merchant"] .rbx-field input:focus,
body[data-page="merchant"] .rbx-field select:focus,
body[data-page="merchant"] .rbx-field textarea:focus{
outline:none; border-color:var(--rbx-green,#57b35a); background:#fff;
box-shadow:0 0 0 3px rgba(87,179,90,.14);
}
body[data-page="merchant"] .rbx-field input:disabled{ background:#f1f3f1; color:var(--rbx-muted,#6d766f); }
body[data-page="merchant"] .rbx-switch-row{
display:flex; align-items:center; justify-content:space-between; gap:16px;
padding:14px 16px; border:1px solid var(--rbx-border,#e5eae5); border-radius:14px;
margin-bottom:10px; background:#fbfcfb;
}
body[data-page="merchant"] .rbx-switch-row strong{ display:block; font-size:13.5px; }
body[data-page="merchant"] .rbx-switch-row small{ display:block; color:var(--rbx-muted,#6d766f); font-size:11.5px; margin-top:2px; }
/* Payment methods */
body[data-page="merchant"] .rbx-payment-method{
display:flex; align-items:flex-start; gap:14px; padding:16px;
border:1px solid var(--rbx-border,#e5eae5); border-radius:16px; margin-bottom:12px;
transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
body[data-page="merchant"] .rbx-payment-method.is-enabled{
border-color:rgba(87,179,90,.35); box-shadow:0 0 0 3px rgba(87,179,90,.08); background:#fbfefb;
}
body[data-page="merchant"] .rbx-payment-method__icon{
width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
font-size:21px; flex:0 0 44px;
}
body[data-page="merchant"] .rbx-payment-method__body{ flex:1; min-width:0; }
body[data-page="merchant"] .rbx-payment-method__top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
body[data-page="merchant"] .rbx-payment-method__top strong{ font-size:13.5px; }
body[data-page="merchant"] .rbx-payment-method__body > small{ display:block; color:var(--rbx-muted,#6d766f); font-size:11.5px; margin-top:3px; line-height:1.6; }
body[data-page="merchant"] .rbx-payment-method__always{
font-size:10.5px; font-weight:800; color:var(--rbx-green-deep,#2f7a3a);
background:var(--rbx-green-tint,#eaf7eb); padding:4px 10px; border-radius:999px; white-space:nowrap;
}
body[data-page="merchant"] .rbx-payment-method__input{ margin-top:12px; overflow:hidden; max-height:60px; transition:max-height .25s ease, opacity .2s ease, margin .2s ease; opacity:1; }
body[data-page="merchant"] .rbx-payment-method__input.hidden{ display:block !important; max-height:0; opacity:0; margin-top:0; pointer-events:none; }
body[data-page="merchant"] .rbx-payment-method__input input{
width:100%; border:1px solid var(--rbx-border,#e5eae5); border-radius:11px; min-height:42px;
padding:0 13px; font:inherit; background:#fff;
}
body[data-page="merchant"] .rbx-payment-method__input input:focus{ outline:none; border-color:var(--rbx-green,#57b35a); box-shadow:0 0 0 3px rgba(87,179,90,.14); }
body[data-page="merchant"] .rbx-payment-hint{
display:flex; align-items:flex-start; gap:10px; padding:12px 14px; border-radius:12px;
background:var(--rbx-blue-tint,#eaf2fc); color:#1f5fa8; font-size:11.5px; line-height:1.7; margin-top:6px;
}
body[data-page="merchant"] .rbx-payment-hint .icon{ font-size:16px; flex:0 0 auto; margin-top:1px; }
/* Section save bar */
body[data-page="merchant"] .rbx-settings-card .btn-primary{ margin-top:6px; }
@media (max-width:700px){
body[data-page="merchant"] .rbx-field-grid{ grid-template-columns:1fr; }
}
/* ============================================================
Home page — pin the "إنشاء ReBox" bar to the bottom of the
SCREEN (fixed, above the bottom nav), instead of scrolling
inline with the page content. Restores the same fixed sticky-bar
behaviour every other page already uses, specifically for the
home builder actions bar which had been pinned in-flow instead.
============================================================ */
#section-index > .home-builder-actions{
position:fixed!important;
left:50%!important; right:auto!important; top:auto!important;
transform:translateX(-50%)!important;
bottom:calc(var(--bottom-nav-h) + env(safe-area-inset-bottom,0px))!important;
width:100%!important; max-width:var(--max-width)!important;
margin:0!important;
padding:var(--space-3) var(--space-5) calc(var(--space-3) + env(safe-area-inset-bottom,0px))!important;
border:none!important; border-top:1px solid var(--border-soft)!important;
border-radius:var(--radius-lg) var(--radius-lg) 0 0!important;
background:rgba(255,255,255,.92)!important;
backdrop-filter:blur(12px)!important; -webkit-backdrop-filter:blur(12px)!important;
box-shadow:0 -12px 32px rgba(31,36,48,.14)!important;
z-index:30!important;
}
#section-index > .home-builder-actions::before{
content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
width:56px; height:4px; border-radius:var(--radius-pill);
background:linear-gradient(90deg,var(--rebox-green),var(--rebox-yellow),var(--rebox-coral));
opacity:.7;
}
#section-index > .home-builder-actions .sticky-bar__row{ max-width:none!important; margin:0!important; }
@media (min-width:768px){
#section-index > .home-builder-actions{
left:0!important; right:var(--sidebar-w-rail)!important; transform:none!important;
width:auto!important; max-width:none!important;
bottom:0!important; border-radius:0!important;
}
}
@media (min-width:1200px){
#section-index > .home-builder-actions{ right:var(--sidebar-w)!important; }
}
/* Content must not sit underneath the fixed bar */
#section-index .rebox-box-wrap{ padding-bottom:calc(96px + env(safe-area-inset-bottom,0px)); }
/* Merchant picker — premium customer experience */
.merchant-filter{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 15px;border:1px solid rgba(87,179,90,.16);border-radius:20px;background:linear-gradient(135deg,#fff 0%,#fbfefb 100%);box-shadow:0 10px 28px rgba(31,36,48,.06)}
.merchant-filter__copy{display:flex;align-items:center;gap:11px;min-width:0}.merchant-filter__copy>div{min-width:0}.merchant-filter__copy strong{display:block;font-size:13px;color:var(--text-main);font-weight:900}.merchant-filter__copy span:last-child{display:block;margin-top:3px;font-size:10.5px;color:var(--text-muted)}
.merchant-selector__logo,.merchant-picker-card__logo{width:50px;height:50px;object-fit:cover;border-radius:16px;border:1px solid rgba(87,179,90,.16);background:#f5f8f5}.merchant-selector__logo-fallback,.merchant-picker-card__logo-fallback{width:50px;height:50px;display:grid;place-items:center;border-radius:16px;background:linear-gradient(145deg,#eff9ef,#fff);font-size:24px;flex:0 0 50px}
.merchant-picker-btn{min-width:128px;white-space:nowrap;box-shadow:0 7px 18px rgba(87,179,90,.18)}.merchant-picker-overlay{z-index:10050;background:rgba(17,24,20,.48);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.merchant-picker-dialog{width:min(720px,calc(100vw - 24px));max-height:min(88vh,820px);overflow:auto;padding:16px 18px calc(12px + env(safe-area-inset-bottom,0px));border-radius:30px 30px 0 0;background:linear-gradient(180deg,#ffffff 0%,#fbfdfb 100%);box-shadow:0 -24px 70px rgba(18,29,22,.22)}
.merchant-picker-dialog--premium{position:relative}.merchant-picker-dialog__grabber{width:48px;height:5px;border-radius:99px;background:#d6ddd7;margin:0 auto 16px}.merchant-picker-dialog__hero{display:grid;grid-template-columns:54px minmax(0,1fr) 40px;gap:12px;align-items:center}.merchant-picker-dialog__hero-icon{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;font-size:27px;background:linear-gradient(145deg,#edf9ed,#fff8e8);box-shadow:0 8px 24px rgba(87,179,90,.12)}.merchant-picker-dialog__hero-copy{min-width:0}.merchant-picker-dialog__hero-copy .eyebrow{font-size:9px}.merchant-picker-dialog__hero-copy .sheet__title{margin:2px 0 0;text-align:right;font-size:22px;font-weight:950;letter-spacing:-.02em}.merchant-picker-dialog__hero-copy .sheet__body{margin:3px 0 0;text-align:right;font-size:11px;line-height:1.7}.merchant-picker-close{width:40px;height:40px;border:1px solid var(--border-soft);background:#fff;border-radius:14px;color:var(--text-main);font-size:25px;line-height:1;cursor:pointer;transition:.18s}.merchant-picker-close:hover{background:#f5f8f5;transform:scale(1.03)}
.merchant-picker-location{margin:16px 0 14px;padding:12px 14px;border-radius:17px;display:flex;align-items:center;gap:11px;font-size:11px;transition:.25s ease}.merchant-picker-location__icon{width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center;font-size:18px;font-weight:950}.merchant-picker-location strong{display:block;font-size:11.5px}.merchant-picker-location small{display:block;margin-top:2px;font-size:9.5px;color:var(--text-muted)}.merchant-picker-location--loading{background:#f6faf6;border:1px solid #e4eee4}.merchant-picker-location--loading .merchant-picker-location__icon{background:#fff;color:var(--rebox-green)}.merchant-picker-location--success{background:linear-gradient(135deg,#eef9ef,#f9fcf8);border:1px solid rgba(87,179,90,.2)}.merchant-picker-location--success .merchant-picker-location__icon{background:var(--rebox-green);color:#fff;box-shadow:0 5px 15px rgba(87,179,90,.22)}.merchant-picker-location--error{background:#fff8f5;border:1px solid #f2ded7}.merchant-picker-location--error .merchant-picker-location__icon{background:#fff;color:#c66a4e;border:1px solid #f0d5ca}
.merchant-picker-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 2px 10px}.merchant-picker-toolbar>div{display:flex;align-items:baseline;gap:7px}.merchant-picker-toolbar strong{font-size:13px;font-weight:950}.merchant-picker-toolbar span{font-size:9.5px;color:var(--text-muted)}.merchant-picker-sort{border:1px solid var(--border-soft);background:#fff;color:var(--text-muted);padding:7px 11px;border-radius:11px;font:800 10px inherit;cursor:pointer}.merchant-picker-sort.is-active{border-color:rgba(87,179,90,.2);background:rgba(87,179,90,.08);color:var(--rebox-green)}
.merchant-picker-list{display:grid;gap:9px}.merchant-picker-card{position:relative;width:100%;display:flex;align-items:center;gap:12px;text-align:right;padding:13px;border:1px solid #e8ece9;border-radius:20px;background:#fff;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background .18s ease;box-shadow:0 4px 14px rgba(31,36,48,.025)}.merchant-picker-card:hover{transform:translateY(-1px);border-color:rgba(87,179,90,.3);box-shadow:0 9px 24px rgba(31,36,48,.07)}.merchant-picker-card:active{transform:scale(.992)}.merchant-picker-card.is-selected{border-color:rgba(87,179,90,.45);background:linear-gradient(135deg,#fbfffb,#f2faf2);box-shadow:0 9px 26px rgba(87,179,90,.1)}.merchant-picker-card__visual{position:relative;flex:0 0 50px}.merchant-picker-card__logo{display:block}.merchant-picker-card__verified{position:absolute;bottom:-4px;left:-4px;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--rebox-green);color:#fff;border:2px solid #fff;font-size:10px;font-weight:950;box-shadow:0 3px 8px rgba(87,179,90,.25)}.merchant-picker-card__content{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}.merchant-picker-card__topline{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}.merchant-picker-card__topline strong{font-size:14px;font-weight:950;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.merchant-picker-card__address{font-size:9.5px;color:var(--text-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.merchant-picker-card__meta{display:flex;align-items:center;gap:7px;font-size:9.5px;color:#67716b}.merchant-picker-card__rating b{color:#f1ad2e}.merchant-picker-card__rating em{font-style:normal;color:var(--text-muted)}.merchant-picker-card__rating--muted{color:#7a847e}.merchant-picker-card__distance{flex:0 0 auto;font-size:9.5px;font-weight:900;color:#32863a;background:#eef8ef;border-radius:999px;padding:4px 7px;white-space:nowrap}.merchant-picker-card__distance--muted{color:#7a847e;background:#f4f6f4}.merchant-picker-card__dot{color:#c7cec8}.merchant-picker-card__action{flex:0 0 auto;font-size:10.5px;font-weight:950;color:var(--rebox-green);padding:8px 11px;border-radius:12px;background:#eff9ef;border:1px solid rgba(87,179,90,.08);transition:.18s}.merchant-picker-card:hover .merchant-picker-card__action{background:var(--rebox-green);color:#fff}.merchant-picker-card.is-selected .merchant-picker-card__action{background:var(--rebox-green);color:#fff}
.merchant-picker-dialog__footer{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;padding:10px 4px 0;border-top:1px solid #edf0ed}.merchant-picker-dialog__footer>span{font-size:9px;color:var(--text-muted)}.merchant-picker-footer-close{min-height:36px;padding:7px 12px;border-radius:11px;font-size:10px}.merchant-picker-empty{padding:34px 16px!important;border:1px dashed #dfe7e1!important;background:#fbfdfb!important;border-radius:20px!important}.merchant-picker-empty>div{font-size:30px;margin-bottom:7px}.merchant-picker-empty strong{display:block;color:var(--text-main);font-size:13px;margin-bottom:3px}.merchant-picker-empty span{font-size:10px;color:var(--text-muted)}
.map-mini-spinner{width:18px;height:18px;border-radius:50%;border:2px solid #dfe9df;border-top-color:var(--rebox-green);animation:merchant-picker-spin .75s linear infinite;display:block}@keyframes merchant-picker-spin{to{transform:rotate(360deg)}}
@media(max-width:560px){.merchant-filter{align-items:stretch;flex-direction:column}.merchant-picker-btn{width:100%;min-height:46px}.merchant-picker-dialog{width:100%;max-height:91vh;padding:13px 13px calc(10px + env(safe-area-inset-bottom,0px));border-radius:27px 27px 0 0}.merchant-picker-dialog__hero{grid-template-columns:48px minmax(0,1fr) 38px;gap:9px}.merchant-picker-dialog__hero-icon{width:48px;height:48px;border-radius:16px;font-size:23px}.merchant-picker-dialog__hero-copy .sheet__title{font-size:19px}.merchant-picker-dialog__hero-copy .sheet__body{font-size:9.5px}.merchant-picker-close{width:38px;height:38px}.merchant-picker-location{margin:13px 0 11px;padding:10px 11px}.merchant-picker-card{gap:9px;padding:11px;border-radius:18px}.merchant-picker-card__visual{flex-basis:46px}.merchant-picker-card__logo,.merchant-picker-card__logo-fallback{width:46px;height:46px;border-radius:14px}.merchant-picker-card__topline{align-items:flex-start}.merchant-picker-card__topline strong{font-size:13px}.merchant-picker-card__distance{font-size:8.5px;padding:3px 6px}.merchant-picker-card__address{font-size:8.5px}.merchant-picker-card__meta{font-size:8.5px;gap:5px}.merchant-picker-card__action{padding:7px 8px;font-size:9.5px}.merchant-picker-dialog__footer>span{font-size:8.5px}.merchant-picker-toolbar{margin-bottom:8px}}
/* ============================================================
ReBox V16.9.6 — PREMIUM HOME CATEGORY CARDS
Cleaner palette, stronger hierarchy, and separated count/price.
============================================================ */
#section-index > .rebox-box-wrap .rebox-quadrant {
--cat-accent: var(--cat-color, #57b35a);
background: linear-gradient(145deg, #ffffff 0%, #f7faf8 100%) !important;
border: 1px solid rgba(31,36,48,.075) !important;
border-top: 4px solid color-mix(in srgb, var(--cat-accent) 82%, #fff) !important;
border-radius: 24px !important;
box-shadow: 0 12px 28px rgba(31,36,48,.075), inset 0 1px 0 #fff !important;
color: #20252d !important;
overflow: hidden;
isolation: isolate;
}
#section-index > .rebox-box-wrap .rebox-quadrant::before {
content: '';
position: absolute;
inset: auto -30px -55px auto;
width: 150px;
height: 150px;
border-radius: 50%;
background: color-mix(in srgb, var(--cat-accent) 9%, transparent);
pointer-events: none;
z-index: -1;
}
#section-index > .rebox-box-wrap .rebox-quadrant:hover {
transform: translateY(-3px) !important;
box-shadow: 0 18px 34px rgba(31,36,48,.10) !important;
}
#section-index > .rebox-box-wrap .rebox-quadrant.is-selected {
background: linear-gradient(145deg, #ffffff 0%, color-mix(in srgb, var(--cat-accent) 8%, #fff) 100%) !important;
border: 1px solid color-mix(in srgb, var(--cat-accent) 28%, #dfe7e1) !important;
border-top: 4px solid var(--cat-accent) !important;
box-shadow: 0 18px 36px color-mix(in srgb, var(--cat-accent) 17%, transparent), inset 0 1px 0 #fff !important;
}
#section-index > .rebox-box-wrap .rebox-quadrant__icon-wrap {
width: 62px;
height: 62px;
display: grid;
place-items: center;
border-radius: 20px;
background: color-mix(in srgb, var(--cat-accent) 11%, #fff);
border: 1px solid color-mix(in srgb, var(--cat-accent) 16%, #fff);
box-shadow: 0 8px 18px color-mix(in srgb, var(--cat-accent) 10%, transparent);
}
#section-index > .rebox-box-wrap .rebox-quadrant__icon {
font-size: 39px !important;
filter: drop-shadow(0 4px 7px rgba(31,36,48,.09));
}
#section-index > .rebox-box-wrap .rebox-quadrant__name {
color: #20252d !important;
font-size: 17px !important;
font-weight: 900 !important;
letter-spacing: -.2px;
}
#section-index > .rebox-box-wrap .rebox-quadrant.is-selected .rebox-quadrant__name {
color: #20252d !important;
text-shadow: none !important;
}
#section-index > .rebox-box-wrap .rebox-quadrant__count-badge {
top: 10px;
inset-inline-end: 10px;
min-width: 25px;
height: 25px;
padding: 0 7px;
background: var(--cat-accent) !important;
color: #fff !important;
border: 3px solid #fff;
box-shadow: 0 5px 12px color-mix(in srgb, var(--cat-accent) 28%, transparent);
font-size: 11px;
font-weight: 900;
}
#section-index > .rebox-box-wrap .rebox-quadrant__stats {
display: grid;
grid-template-columns: 1fr 1.18fr;
gap: 7px;
width: min(100%, 230px);
margin-top: 2px;
}
#section-index > .rebox-box-wrap .rebox-quadrant__stat {
min-height: 46px;
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
padding: 6px 8px;
border-radius: 15px;
text-align: right;
}
#section-index > .rebox-box-wrap .rebox-quadrant__stat > span:last-child {
display: flex;
flex-direction: column;
align-items: flex-start;
line-height: 1.05;
}
#section-index > .rebox-box-wrap .rebox-quadrant__stat b {
font-size: 13px;
font-weight: 950;
}
#section-index > .rebox-box-wrap .rebox-quadrant__stat small {
margin-top: 4px;
font-size: 8px;
font-weight: 800;
opacity: .78;
}
#section-index > .rebox-box-wrap .rebox-quadrant__stat-icon {
width: 25px;
height: 25px;
display: grid;
place-items: center;
border-radius: 9px;
font-size: 12px;
font-weight: 950;
}
#section-index > .rebox-box-wrap .rebox-quadrant__stat--count {
background: #edf8ef;
color: #2f8b42;
}
#section-index > .rebox-box-wrap .rebox-quadrant__stat--count .rebox-quadrant__stat-icon {
background: #d8f0dc;
color: #2f8b42;
}
#section-index > .rebox-box-wrap .rebox-quadrant__stat--price {
background: #fff5e7;
color: #b86a13;
border: 1px solid #f8dfb9;
}
#section-index > .rebox-box-wrap .rebox-quadrant__stat--price b {
color: #c66e0e;
font-size: 14px;
}
#section-index > .rebox-box-wrap .rebox-quadrant__stat--price .rebox-quadrant__stat-icon {
background: #ffe5bf;
color: #c66e0e;
}
#section-index > .rebox-box-wrap .rebox-quadrant__edit {
color: var(--cat-accent) !important;
background: color-mix(in srgb, var(--cat-accent) 8%, #fff);
border-radius: 999px;
padding: 5px 11px;
text-decoration: none;
font-size: 9px;
font-weight: 900;
}
#section-index > .rebox-box-wrap .rebox-quadrant__cta {
color: var(--cat-accent) !important;
background: #fff !important;
border: 1px solid color-mix(in srgb, var(--cat-accent) 18%, #dfe7e1) !important;
box-shadow: 0 6px 14px rgba(31,36,48,.06);
padding: 8px 15px !important;
font-size: 11px !important;
font-weight: 900 !important;
}
#section-index > .rebox-box-wrap .rebox-quadrant__empty-meta {
color: #7c858d;
font-size: 9px;
font-weight: 700;
}
#section-index > .rebox-box-wrap .rebox-quadrant--empty {
border: 2px dashed #dce3de !important;
border-top: 2px dashed #dce3de !important;
background: linear-gradient(145deg,#fff,#f8faf9) !important;
}
#section-index > .rebox-box-wrap .rebox-quadrant--empty:hover {
border-color: #8acb91 !important;
background: #fbfffb !important;
}
@media (max-width: 767px) {
#section-index > .rebox-box-wrap .rebox-quadrant { border-radius: 21px !important; padding: 20px 10px !important; gap: 8px !important; }
#section-index > .rebox-box-wrap .rebox-quadrant__icon-wrap { width: 55px; height: 55px; border-radius: 18px; }
#section-index > .rebox-box-wrap .rebox-quadrant__icon { font-size: 34px !important; }
#section-index > .rebox-box-wrap .rebox-quadrant__name { font-size: 15px !important; }
#section-index > .rebox-box-wrap .rebox-quadrant__stats { width: 100%; grid-template-columns: 1fr 1.15fr; gap: 5px; }
#section-index > .rebox-box-wrap .rebox-quadrant__stat { min-height: 42px; padding: 5px 5px; gap: 5px; border-radius: 13px; }
#section-index > .rebox-box-wrap .rebox-quadrant__stat b { font-size: 11px; }
#section-index > .rebox-box-wrap .rebox-quadrant__stat small { font-size: 7px; }
#section-index > .rebox-box-wrap .rebox-quadrant__stat-icon { width: 22px; height: 22px; border-radius: 8px; }
}
/* ================================================================
CATEGORY EXIT — consistent X button on every products/category page
================================================================ */
#section-products .category-header { position: relative; }
.category-exit-btn {
position: absolute;
left: 16px;
top: 16px;
z-index: 8;
width: 42px;
height: 42px;
display: grid;
place-items: center;
border: 1px solid rgba(31,36,48,.10);
border-radius: 14px;
background: rgba(255,255,255,.96);
color: #30363d;
box-shadow: 0 6px 18px rgba(31,36,48,.10);
font: 500 29px/1 Arial, sans-serif;
cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.category-exit-btn:hover {
transform: translateY(-1px) scale(1.03);
background: #fff;
box-shadow: 0 9px 24px rgba(31,36,48,.14);
}
.category-exit-btn:active { transform: scale(.94); }
.category-exit-btn:focus-visible { outline: 3px solid rgba(87,179,90,.28); outline-offset: 2px; }
@media (max-width: 560px) {
.category-exit-btn { left: 12px; top: 12px; width: 40px; height: 40px; border-radius: 13px; font-size: 27px; }
}
/* ============================================================
ReBox V16.9.8 — DESKTOP / IPAD HOME BUILDER COMPOSITION
Focus: eliminate the narrow mobile-sized canvas on larger screens,
improve hierarchy, and turn the box actions into a premium control bar.
Mobile remains untouched.
============================================================ */
@media (min-width:768px){
body.customer-section-index #section-index{
width:100%!important;
max-width:1240px!important;
margin:0 auto!important;
padding:18px 28px 132px!important;
overflow:visible!important;
}
body.customer-section-index #section-index > .builder-hero{
width:100%!important;
max-width:none!important;
height:auto!important;
min-height:156px!important;
padding:24px 34px 22px!important;
border-radius:28px!important;
margin:0 auto!important;
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
align-items:center!important;
box-shadow:0 10px 30px rgba(31,36,48,.045), inset 0 1px 0 rgba(255,255,255,.9)!important;
}
body.customer-section-index #section-index > .builder-hero .builder-hero__eyebrow{
font-size:12px!important;
padding:7px 14px!important;
}
body.customer-section-index #section-index > .builder-hero .builder-hero__title{
max-width:900px!important;
font-size:clamp(34px,3.4vw,50px)!important;
margin:10px 0 5px!important;
text-align:center!important;
}
body.customer-section-index #section-index > .builder-hero .builder-hero__sub{
max-width:650px!important;
font-size:14px!important;
text-align:center!important;
}
body.customer-section-index #section-index > .progress-track{
width:min(920px,100%)!important;
margin:16px auto 0!important;
padding-inline:0!important;
}
body.customer-section-index #section-index > .full-banner{
width:min(920px,100%)!important;
margin:14px auto 0!important;
}
body.customer-section-index #section-index > .rebox-box-wrap{
width:100%!important;
max-width:none!important;
margin:18px auto 0!important;
padding:0!important;
display:flex!important;
justify-content:center!important;
align-items:flex-start!important;
}
body.customer-section-index #section-index > .rebox-box-wrap .rebox-box{
width:min(620px,calc(100dvh - 360px))!important;
max-width:620px!important;
aspect-ratio:1/1!important;
height:auto!important;
padding:15px!important;
gap:13px!important;
border-radius:32px!important;
box-shadow:0 24px 60px rgba(31,36,48,.12), inset 0 1px 0 #fff!important;
}
body.customer-section-index #section-index > .rebox-box-wrap .rebox-quadrant{
padding:18px!important;
border-radius:25px!important;
}
body.customer-section-index #section-index > .rebox-box-wrap .rebox-quadrant__icon-wrap{
width:66px!important;
height:66px!important;
border-radius:21px!important;
}
body.customer-section-index #section-index > .rebox-box-wrap .rebox-quadrant__name{
font-size:18px!important;
}
body.customer-section-index #section-index > .rebox-box-wrap .rebox-quadrant__stats{
width:min(100%,250px)!important;
}
/* Premium floating action dock: compact, centered and visually tied to the box. */
body.customer-section-index #section-index > .home-builder-actions{
position:fixed!important;
left:calc(var(--sidebar-w) + 50%)!important;
right:auto!important;
bottom:18px!important;
transform:translateX(-50%)!important;
width:min(760px,calc(100vw - var(--sidebar-w) - 56px))!important;
max-width:760px!important;
margin:0!important;
padding:10px!important;
border:1px solid rgba(31,36,48,.08)!important;
border-radius:24px!important;
background:rgba(255,255,255,.94)!important;
backdrop-filter:blur(18px) saturate(1.1)!important;
-webkit-backdrop-filter:blur(18px) saturate(1.1)!important;
box-shadow:0 18px 48px rgba(31,36,48,.16),0 3px 10px rgba(31,36,48,.06)!important;
z-index:180!important;
}
body.customer-section-index #section-index > .home-builder-actions .sticky-bar__row{
min-height:62px!important;
width:100%!important;
margin:0!important;
gap:14px!important;
}
body.customer-section-index #section-index > .home-builder-actions .sticky-bar__info{
padding-inline:10px!important;
}
body.customer-section-index #section-index > .home-builder-actions .sticky-bar__count{
font-size:13px!important;
font-weight:800!important;
}
body.customer-section-index #section-index > .home-builder-actions .sticky-bar__price{
font-size:21px!important;
font-weight:950!important;
color:var(--rebox-green)!important;
}
body.customer-section-index #section-index > .home-builder-actions .sticky-bar__actions{
gap:9px!important;
flex:0 0 auto!important;
}
body.customer-section-index #section-index > .home-builder-actions #ctaBtn{
min-width:210px!important;
min-height:52px!important;
padding-inline:26px!important;
border-radius:16px!important;
font-size:14px!important;
font-weight:950!important;
box-shadow:0 10px 22px rgba(87,179,90,.22)!important;
}
body.customer-section-index #section-index > .home-builder-actions .sticky-reset-btn{
min-width:120px!important;
min-height:50px!important;
border-radius:15px!important;
font-size:12px!important;
font-weight:900!important;
}
}
/* iPad / tablet: prioritize comfortable touch targets without wasting the canvas. */
@media (min-width:768px) and (max-width:1199px){
body.customer-section-index #section-index{
max-width:none!important;
padding:16px 20px 126px!important;
}
body.customer-section-index #section-index > .builder-hero{
min-height:142px!important;
padding:20px 24px!important;
border-radius:25px!important;
}
body.customer-section-index #section-index > .builder-hero .builder-hero__title{
font-size:clamp(30px,4.6vw,42px)!important;
}
body.customer-section-index #section-index > .rebox-box-wrap .rebox-box{
width:min(540px,calc(100dvh - 330px))!important;
max-width:540px!important;
padding:13px!important;
gap:11px!important;
border-radius:29px!important;
}
body.customer-section-index #section-index > .rebox-box-wrap .rebox-quadrant{
padding:14px!important;
border-radius:21px!important;
}
body.customer-section-index #section-index > .rebox-box-wrap .rebox-quadrant__icon-wrap{
width:58px!important;height:58px!important;border-radius:18px!important;
}
body.customer-section-index #section-index > .rebox-box-wrap .rebox-quadrant__name{font-size:16px!important}
body.customer-section-index #section-index > .home-builder-actions{
left:calc(var(--sidebar-w) + 50%)!important;
width:min(680px,calc(100vw - var(--sidebar-w) - 32px))!important;
bottom:12px!important;
border-radius:21px!important;
}
body.customer-section-index #section-index > .home-builder-actions #ctaBtn{min-width:185px!important;min-height:50px!important}
}
/* Wide desktop: use the extra horizontal space while keeping the box as the hero. */
@media (min-width:1400px){
body.customer-section-index #section-index{max-width:1320px!important;padding-inline:40px!important}
body.customer-section-index #section-index > .rebox-box-wrap .rebox-box{width:min(650px,calc(100dvh - 350px))!important;max-width:650px!important}
body.customer-section-index #section-index > .home-builder-actions{width:780px!important}
}
@media (prefers-reduced-motion:reduce){
body.customer-section-index #section-index > .home-builder-actions{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
}
/* v16.9.9 — Home builder action bar: span the full content viewport
from the left edge to the right sidebar, with fluid inner layout. */
@media (min-width: 768px) {
#section-index .home-builder-actions.sticky-bar {
left: 0;
right: var(--sidebar-w-rail);
width: auto;
max-width: none;
transform: none;
border-radius: 0;
padding-inline: clamp(18px, 2.2vw, 42px);
}
#section-index .home-builder-actions .sticky-bar__row {
width: 100%;
max-width: none;
margin: 0;
padding: 0;
}
#section-index .home-builder-actions .sticky-bar__info {
min-width: 0;
flex: 1 1 auto;
}
#section-index .home-builder-actions .sticky-bar__actions {
display: flex;
align-items: center;
gap: clamp(10px, 1.2vw, 18px);
flex: 0 0 auto;
}
#section-index .home-builder-actions .sticky-bar__actions .btn {
min-height: 52px;
}
}
@media (min-width: 1024px) {
#section-index .home-builder-actions.sticky-bar {
right: var(--sidebar-w);
}
}
/* Tablet/iPad: use the entire available content width while keeping
comfortable touch targets and proportional spacing. */
@media (min-width: 768px) and (max-width: 1023px) {
#section-index .home-builder-actions .sticky-bar__row {
gap: 16px;
}
#section-index .home-builder-actions .sticky-bar__actions .btn {
padding-inline: 20px;
min-width: 150px;
}
}
@media (min-width: 1440px) {
#section-index .home-builder-actions .sticky-bar__actions .btn-primary {
min-width: 190px;
}
#section-index .home-builder-actions .sticky-bar__actions .sticky-reset-btn {
min-width: 150px;
}
}
/* Delivery pricing transparency */
.delivery-price-row{align-items:flex-start!important}.delivery-price-help{display:block;font-size:10px;color:var(--text-muted);margin-top:3px}.delivery-breakdown-card{margin:10px 0;padding:14px;border:1px solid rgba(87,179,90,.18);background:linear-gradient(135deg,#f3fbf3,#fff);border-radius:18px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.delivery-breakdown-card>div{padding:10px;border-radius:13px;background:#fff}.delivery-breakdown-card span{display:block;color:var(--text-muted);font-size:11px}.delivery-breakdown-card strong{display:block;margin-top:4px;font-size:15px}.delivery-breakdown-card p{grid-column:1/-1;margin:0;font-size:11px;line-height:1.8;color:var(--text-muted)}.delivery-policy-card{margin-top:14px;padding:15px 18px;border:1px solid #dfeee0;background:#f7fcf7;border-radius:18px;display:flex;gap:12px;align-items:flex-start}.delivery-policy-card__icon{font-size:24px}.delivery-policy-card strong{display:block}.delivery-policy-card p{margin:5px 0 0;color:var(--text-muted);font-size:12px;line-height:1.8}.delivery-tier-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}.delivery-tier-controls label{font-size:11px;color:var(--text-muted);display:flex;align-items:center;gap:5px}.delivery-tier-controls input{width:70px;padding:8px;border:1px solid var(--border);border-radius:10px}.delivery-tier-controls .switch{flex:0 0 auto}
.delivery-out-of-range-card{margin:12px 0;padding:16px;border:1px solid #f2caca;background:#fff5f5;border-radius:18px}.delivery-out-of-range-card strong{display:block;color:#b23a3a;font-size:14px}.delivery-out-of-range-card p{margin:5px 0 0;color:var(--text-muted);font-size:11px;line-height:1.8}
/* Order online-payment receipt flow */
.order-payment-sheet{max-width:560px}
.order-payment-sheet__hero{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.order-payment-sheet__icon{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,#edf9ee,#fff8e8);font-size:27px;box-shadow:inset 0 0 0 1px rgba(87,179,90,.12)}
.order-payment-sheet__method{padding:14px 16px;border:1px solid var(--border-soft,#e8ece9);border-radius:16px;background:#fbfcfb;margin-bottom:14px}
.order-payment-sheet__method strong{display:block;font-size:15px}.order-payment-sheet__method small{display:block;color:var(--rbx-muted,#6d766f);margin-top:4px}
.order-payment-upload{display:flex;align-items:center;gap:12px;padding:16px;border:1.5px dashed #a9d9ad;border-radius:18px;background:#f6fbf6;cursor:pointer;transition:.22s ease}
.order-payment-upload:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(41,76,45,.08)}
.order-payment-upload__icon{width:40px;height:40px;border-radius:13px;background:#fff;color:var(--rebox-green,#57b35a);display:grid;place-items:center;font-size:24px;font-weight:800}
.order-payment-upload strong,.order-payment-upload small{display:block}.order-payment-upload small{font-size:11px;color:var(--rbx-muted,#6d766f);margin-top:3px}.order-payment-upload input{display:none}
.order-payment-receipt-preview{margin-top:10px;padding:10px 12px;border-radius:13px;background:#f2f7f3;color:#4d6a51;font-size:12px}
.order-payment-sheet__actions{margin-top:16px}
.payment-receipt-status{display:inline-flex;align-items:center;gap:5px;margin-top:8px;padding:5px 9px;border-radius:999px;background:#edf9ee;color:#3f9d4b;font-size:11px;font-weight:800}
.payment-receipt-status.is-pending{background:#fff7e6;color:#a36a00}
.orders-history-receipt-btn{margin-top:10px}
/* v16.12.1 payment + schedule polish */
.payment-option{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) 22px;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--border-soft);border-radius:20px;background:#fff;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease;cursor:pointer}.payment-option:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(31,36,48,.07)}.payment-option.is-selected{border-color:rgba(87,179,90,.45);background:linear-gradient(135deg,#f3faf3,#fff);box-shadow:0 10px 25px rgba(87,179,90,.10)}.payment-option__icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;background:#f4f7f5;font-size:25px}.payment-option.is-selected .payment-option__icon{background:#eaf7ec}.payment-option__radio{width:18px;height:18px;border:2px solid #cfd6d1;border-radius:50%;position:relative}.payment-option.is-selected .payment-option__radio{border-color:var(--rebox-green)}.payment-option.is-selected .payment-option__radio:after{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--rebox-green)}.payment-detail-box{margin-top:7px;padding:9px 11px;border-radius:12px;background:#f5faf6;color:#4f6256;font-size:12px;line-height:1.7}.order-payment-sheet{max-width:560px!important}.order-payment-sheet__method{margin:14px 0;padding:15px 16px;border:1px solid rgba(87,179,90,.2);background:#f4faf5;border-radius:18px;display:flex;flex-direction:column;gap:4px}.order-payment-sheet__method strong{font-size:16px;color:#338b3a}.order-payment-sheet__method small{color:#68736d;line-height:1.7}.order-payment-upload{display:flex;align-items:center;gap:14px;padding:18px;border:1.5px dashed rgba(87,179,90,.42);background:#fbfefb;border-radius:18px;cursor:pointer;transition:.2s ease}.order-payment-upload:hover{background:#f4faf5;transform:translateY(-1px)}.order-payment-upload input{display:none}.order-payment-upload__icon{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:#eaf7ec;color:var(--rebox-green);font-size:25px;font-weight:900}.order-payment-receipt-preview{margin-top:10px;padding:10px 12px;border-radius:12px;background:#f4f6f5;color:#55615b;font-size:12px}.merchant-payment-receipt{margin-top:16px;padding:16px;border-radius:20px;background:linear-gradient(135deg,#f4faf5,#fff);border:1px solid rgba(87,179,90,.18);display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.merchant-payment-receipt__head{display:flex;align-items:center;gap:11px}.merchant-payment-receipt__head>.icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:#eaf7ec;color:var(--rebox-green)}.merchant-payment-receipt__head div{display:flex;flex-direction:column;gap:3px}.merchant-payment-receipt__head small{color:var(--text-muted);line-height:1.6}.schedule-card,.schedule-preview-card{animation:rbx-card-in .42s ease both}.schedule-main .schedule-card:nth-child(2){animation-delay:.05s}.schedule-main .schedule-card:nth-child(3){animation-delay:.1s}.schedule-side .schedule-preview-card{animation-delay:.14s}@keyframes rbx-card-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@media(max-width:899px){.merchant-payment-receipt{align-items:flex-start}.order-payment-sheet{width:calc(100% - 24px)!important}}@media(prefers-reduced-motion:reduce){.schedule-card,.schedule-preview-card{animation:none!important}.payment-option,.order-payment-upload{transition:none!important}}
/* v16.17 — Customer merchant rating + support center */
.profile-quick-card--support{background:linear-gradient(135deg,#fff,#f4fbf7);border-color:rgba(62,155,91,.16)}
.profile-quick-card--support .profile-quick-card__icon{background:#e9f7ed;color:#2f8a4f}
.box-merchant-rating-card{position:relative;overflow:hidden;border:1px solid #e2ebe4;border-radius:26px;padding:22px;background:linear-gradient(145deg,#fff,#f6fbf7);box-shadow:0 12px 30px rgba(31,55,38,.055);transition:transform .25s ease,box-shadow .25s ease}.box-merchant-rating-card:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(31,55,38,.075)}.box-merchant-rating-card__glow{position:absolute;width:180px;height:180px;border-radius:50%;background:rgba(240,200,90,.12);left:-90px;bottom:-110px;pointer-events:none}.box-merchant-rating-card__head{position:relative;display:flex;justify-content:space-between;align-items:center;gap:14px}.box-merchant-rating-card__identity{display:flex;align-items:center;gap:12px;min-width:0}.box-merchant-rating-card__avatar{width:54px;height:54px;border-radius:17px;background:#eef7f0;display:grid;place-items:center;overflow:hidden;font-size:23px;flex:0 0 54px}.box-merchant-rating-card__avatar img{width:100%;height:100%;object-fit:cover}.box-merchant-rating-card__identity span{display:block;color:#3a8b54;font-size:10px;font-weight:900}.box-merchant-rating-card__identity h3{margin:3px 0;font-size:16px;font-weight:950}.box-merchant-rating-card__identity p{margin:0;color:#7c8791;font-size:10px}.box-merchant-rating-card__badge{width:45px;height:45px;border-radius:15px;background:#fff5d9;color:#b27a13;display:grid;place-items:center;font-size:23px;box-shadow:0 8px 20px rgba(178,122,19,.08)}.box-merchant-rating-card__stars{display:flex;direction:rtl;justify-content:flex-start;gap:4px;margin:18px 0 12px}.box-rating-star{border:0;background:transparent;color:#d8dde0;font-size:34px;line-height:1;padding:3px;cursor:pointer;transition:transform .16s ease,color .16s ease}.box-rating-star:hover,.box-rating-star.is-preview{color:#e6ad2e;transform:translateY(-2px) scale(1.06)}.box-rating-star.is-filled{color:#e6ad2e}.box-merchant-rating-card__comment{width:100%;min-height:78px;border:1px solid #e1e8e3;border-radius:15px;background:#fff;padding:11px 13px;font:inherit;font-size:11px;resize:vertical;outline:none;box-sizing:border-box}.box-merchant-rating-card__comment:focus{border-color:rgba(62,155,91,.4);box-shadow:0 0 0 4px rgba(62,155,91,.07)}.box-merchant-rating-card__footer{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:11px}.box-merchant-rating-card__footer span{color:#78848e;font-size:10px;font-weight:800}.box-merchant-rating-card.has-rating{border-color:rgba(62,155,91,.24)}
.support-compose-card{position:relative;overflow:hidden;border:1px solid #e1e9e4;border-radius:28px;background:linear-gradient(145deg,#fff,#f7fbf8);padding:24px;box-shadow:0 14px 34px rgba(31,55,38,.055)}.support-compose-card__head{display:flex;justify-content:space-between;gap:20px;align-items:flex-start;padding-bottom:18px;border-bottom:1px solid #edf1ee}.support-kicker{display:block;color:#3d9256;font-size:10px;font-weight:950;letter-spacing:.02em}.support-compose-card h3,.support-history-head h3{margin:4px 0;font-size:20px;font-weight:950}.support-compose-card p{margin:5px 0 0;color:#7b8790;font-size:11px;line-height:1.8}.support-compose-card__icon{width:54px;height:54px;border-radius:18px;background:#edf8ef;color:#3c9757;display:grid;place-items:center;font-size:25px;flex:0 0 54px}.support-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-top:18px}.support-form-grid__full{grid-column:1/-1}.support-form-grid .form-field span{display:block;font-size:10px;font-weight:900;color:#697681;margin-bottom:7px}.support-form-grid input,.support-form-grid select,.support-form-grid textarea{width:100%;box-sizing:border-box;border:1px solid #e0e6e3;border-radius:14px;background:#fff;padding:11px 12px;font:inherit;font-size:11px;color:#243042;outline:none}.support-form-grid textarea{resize:vertical;min-height:110px}.support-form-grid input:focus,.support-form-grid select:focus,.support-form-grid textarea:focus{border-color:rgba(62,155,91,.42);box-shadow:0 0 0 4px rgba(62,155,91,.07)}.support-form-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:15px}.support-form-status{font-size:10px;font-weight:900;color:#3c8f55}.support-history-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.support-tickets-list{display:grid;gap:11px}.support-ticket-card{padding:17px;border:1px solid #e4e9e7;border-radius:20px;background:#fff;box-shadow:0 8px 24px rgba(31,36,48,.035);transition:transform .2s ease,box-shadow .2s ease}.support-ticket-card:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(31,36,48,.06)}.support-ticket-card__top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}.support-ticket-card__category{color:#3b8d54;font-size:9px;font-weight:950}.support-ticket-card h4{margin:4px 0 0;font-size:14px;font-weight:950}.support-ticket-card>p{margin:10px 0;color:#5f6d79;font-size:11px;line-height:1.8}.support-ticket-card__meta{display:flex;flex-wrap:wrap;gap:9px;color:#89939d;font-size:9px}.support-ticket-status{display:inline-flex;align-items:center;padding:6px 9px;border-radius:999px;font-size:9px;font-weight:950;white-space:nowrap}.support-ticket-status--open{background:#fff3e7;color:#b46b1e}.support-ticket-status--progress{background:#edf5ff;color:#4474a9}.support-ticket-status--resolved{background:#eaf7ed;color:#3d8d53}.support-ticket-status--closed{background:#f0f2f3;color:#707b84}.support-ticket-card__reply{margin-top:12px;padding:11px 12px;border-radius:14px;background:#f4faf5;border:1px solid #e1eee3}.support-ticket-card__reply span{font-size:9px;color:#3c8f55;font-weight:950}.support-ticket-card__reply p{margin:4px 0 0;color:#50615a;font-size:10px;line-height:1.8}.support-empty{min-height:150px;border:1px dashed #dce5df;border-radius:20px;background:#fbfcfb;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;color:#7f8992;text-align:center;font-size:11px}.support-empty div{font-size:25px}@media(max-width:650px){.support-form-grid{grid-template-columns:1fr}.support-form-grid__full{grid-column:auto}.support-form-actions{flex-direction:column-reverse;align-items:stretch}.box-merchant-rating-card__footer{flex-direction:column;align-items:stretch}.box-merchant-rating-card__footer .btn{width:100%}}
/* v16.17.5 — Accurate customer address location picker */
.location-picker-overlay{z-index:260}
.location-picker-sheet{width:min(620px,calc(100% - 24px));max-height:min(92vh,820px);overflow:auto;padding:20px;border-radius:28px;background:linear-gradient(180deg,#fff 0%,#fbfcfb 100%);box-shadow:0 28px 80px rgba(31,36,48,.22)}
.location-picker-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}.location-picker-head .sheet__title{font-size:23px;margin:3px 0}.location-picker-head p{margin:4px 0 0;color:var(--text-muted);font-size:11px;line-height:1.75}.location-picker-map-wrap{position:relative;height:330px;border-radius:22px;overflow:hidden;border:1px solid rgba(31,36,48,.09);background:#eef3ef;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}.location-picker-map{width:100%;height:100%}.location-picker-map-badge{position:absolute;z-index:500;top:12px;right:12px;padding:9px 11px;border-radius:999px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);box-shadow:0 8px 22px rgba(31,36,48,.12);font-size:10px;font-weight:800;color:#42504a}.location-picker-current{position:absolute;z-index:500;bottom:12px;right:12px;border:0;border-radius:14px;padding:10px 13px;background:#fff;color:var(--rebox-green);font:inherit;font-size:11px;font-weight:900;box-shadow:0 8px 22px rgba(31,36,48,.16);cursor:pointer}.location-picker-current span{font-size:17px;vertical-align:-2px}.location-picker-status{min-height:20px;margin:9px 3px 5px;color:#4d6354;font-size:10.5px;font-weight:800}.location-picker-result{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:8px;opacity:0;transform:translateY(5px);max-height:0;overflow:hidden;transition:.25s ease}.location-picker-result.is-visible{opacity:1;transform:none;max-height:150px;margin-bottom:9px}.location-picker-result>div{padding:11px 12px;border:1px solid #e2e9e4;border-radius:15px;background:#f9fcfa}.location-picker-result span{display:block;color:#7b8781;font-size:9px;margin-bottom:4px}.location-picker-result strong{display:block;color:#26342d;font-size:11px;line-height:1.55}.location-picker-actions{margin-top:10px;gap:8px}.location-picker-loading{height:100%;display:grid;place-items:center;text-align:center;color:#68756e;font-size:12px;line-height:1.8;padding:20px}.address-field__control input[placeholder*="تتحدد"],.address-field__control input[placeholder*="تتحدد"]{font-size:12px}
@media(max-width:560px){.location-picker-sheet{width:calc(100% - 12px);padding:15px;border-radius:24px}.location-picker-map-wrap{height:310px}.location-picker-result{grid-template-columns:1fr 1fr}.location-picker-result>div:first-child{grid-column:1/-1}.location-picker-head .sheet__title{font-size:20px}}
/* Stage 1 — Order details redesign: progress, delivery pricing and route plan */
body[data-page="merchant"] .merchant-order-details__timeline-section{
padding:18px;
background:linear-gradient(145deg,#fbfefb 0%,#f4faf5 100%);
border-color:#dce9de;
}
body[data-page="merchant"] .merchant-order-details__timeline-section .merchant-stage-timeline{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
gap:0;
position:relative;
padding:20px 4px 6px;
margin:0;
border:0;
background:transparent;
}
body[data-page="merchant"] .merchant-order-details__timeline-section .merchant-stage-timeline__track{
top:38px;
right:10%;
left:10%;
height:4px;
border-radius:999px;
background:#dfe9e1;
}
body[data-page="merchant"] .merchant-order-details__timeline-section .merchant-stage{
gap:9px;
padding:0 8px;
}
body[data-page="merchant"] .merchant-order-details__timeline-section .merchant-stage__dot{
width:42px;
height:42px;
border-width:2px;
box-shadow:0 5px 15px rgba(38,70,45,.08);
}
body[data-page="merchant"] .merchant-order-details__timeline-section .merchant-stage.done .merchant-stage__dot,
body[data-page="merchant"] .merchant-order-details__timeline-section .merchant-stage.current .merchant-stage__dot{
background:#f1fbf2;
border-color:var(--m-green);
}
body[data-page="merchant"] .merchant-order-details__timeline-section .merchant-stage.current .merchant-stage__dot{
box-shadow:0 0 0 6px rgba(87,179,90,.11),0 5px 15px rgba(38,70,45,.08);
}
body[data-page="merchant"] .merchant-order-details__timeline-section .merchant-stage strong{font-size:12px;font-weight:900}
body[data-page="merchant"] .merchant-order-details__timeline-section .merchant-stage small{max-width:150px;min-height:28px;font-size:9px;line-height:1.65}
body[data-page="merchant"] .merchant-order-details__timeline-section .merchant-stage.current strong{color:#2f8b3a}
body[data-page="merchant"] .merchant-delivery-breakdown--redesign{
margin-top:0;
padding:18px;
border:1px solid #dce9de;
border-radius:20px;
background:linear-gradient(145deg,#f8fcf8 0%,#ffffff 72%);
box-shadow:0 8px 24px rgba(36,70,44,.04);
}
body[data-page="merchant"] .merchant-delivery-breakdown--redesign .merchant-delivery-breakdown__head{
display:grid;
grid-template-columns:48px minmax(0,1fr) auto;
align-items:center;
gap:12px;
}
body[data-page="merchant"] .merchant-delivery-breakdown--redesign .merchant-delivery-breakdown__title-icon{
width:48px;height:48px;border-radius:15px;display:grid;place-items:center;
background:#eaf7eb;color:#3e9a4b;font-size:21px;
}
body[data-page="merchant"] .merchant-delivery-breakdown--redesign .merchant-delivery-breakdown__head strong{display:block;font-size:16px;margin-top:3px}
body[data-page="merchant"] .merchant-delivery-breakdown--redesign .merchant-delivery-breakdown__head small{display:block;color:var(--m-muted);font-size:9px;line-height:1.7;margin-top:3px}
body[data-page="merchant"] .merchant-delivery-breakdown__total{
min-width:132px;padding:10px 13px;border-radius:14px;background:#eaf7eb;border:1px solid #d1e8d4;text-align:center;
}
body[data-page="merchant"] .merchant-delivery-breakdown__total small{display:block!important;margin:0!important;font-size:9px!important;color:#4f7655!important}
body[data-page="merchant"] .merchant-delivery-breakdown__total b{display:block;margin-top:3px;color:#2e8739;font:900 17px/1.2 Roboto,"Noto Sans Arabic",sans-serif}
body[data-page="merchant"] .merchant-delivery-breakdown__grid--four{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:15px}
body[data-page="merchant"] .merchant-delivery-breakdown__grid--four>div{padding:13px;border:1px solid #e5ece6;background:#fff;border-radius:14px}
body[data-page="merchant"] .merchant-delivery-breakdown__grid--four span{font-size:9px}
body[data-page="merchant"] .merchant-delivery-breakdown__grid--four strong{font-size:13px;margin-top:5px}
body[data-page="merchant"] .merchant-delivery-breakdown__formula{
display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:10px;margin-top:10px;padding:11px 12px;border-radius:14px;background:#f6f9f6;
}
body[data-page="merchant"] .merchant-delivery-breakdown__formula>.icon{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:#fff;color:var(--m-green)}
body[data-page="merchant"] .merchant-delivery-breakdown__formula strong{display:block;font-size:10px}
body[data-page="merchant"] .merchant-delivery-breakdown__formula span:not(.icon){display:block;color:var(--m-muted);font-size:8px;line-height:1.7;margin-top:2px}
body[data-page="merchant"] .merchant-delivery-breakdown__formula>b{font-size:14px;color:#31863a;white-space:nowrap}
body[data-page="merchant"] .delivery-plan--accurate{
margin-top:0;padding:18px;border:1px solid #dce9de;border-radius:20px;background:linear-gradient(145deg,#eef9f0,#fbfefb);
}
body[data-page="merchant"] .delivery-plan--accurate .delivery-plan__head{display:grid;grid-template-columns:48px minmax(0,1fr);gap:12px;align-items:center}
body[data-page="merchant"] .delivery-plan--accurate .delivery-plan__icon{width:48px;height:48px;border-radius:15px;font-size:21px}
body[data-page="merchant"] .delivery-plan--accurate .delivery-plan__head strong{display:block;font-size:16px;margin-top:3px}
body[data-page="merchant"] .delivery-plan--accurate .delivery-plan__head p{font-size:9px;line-height:1.8;margin-top:4px}
body[data-page="merchant"] .delivery-plan__times{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:14px}
body[data-page="merchant"] .delivery-plan__times>div{padding:13px;border-radius:15px;background:#fff;border:1px solid #deeadf}
body[data-page="merchant"] .delivery-plan__times small{display:block;color:var(--m-muted);font-size:9px}
body[data-page="merchant"] .delivery-plan__times b{display:block;margin-top:5px;font:900 16px/1.2 Roboto,"Noto Sans Arabic",sans-serif;color:#18241b}
body[data-page="merchant"] .delivery-plan__times strong{display:block;margin-top:3px;font-size:12px;color:#2f8b3a}
body[data-page="merchant"] .delivery-plan__times span{display:block;color:var(--m-muted);font-size:8px;margin-top:4px}
body[data-page="merchant"] .delivery-plan__note{display:flex;align-items:flex-start;gap:8px;margin-top:10px;padding:9px 11px;border-radius:12px;background:#f5f8f5;color:#6d786f;font-size:8px;line-height:1.8}
body[data-page="merchant"] .delivery-plan__note .icon{font-size:15px;color:#69916d;flex:0 0 auto}
@media(max-width:760px){
body[data-page="merchant"] .merchant-order-details__timeline-section .merchant-stage-timeline{grid-template-columns:1fr 1fr;gap:15px;padding-top:10px}
body[data-page="merchant"] .merchant-order-details__timeline-section .merchant-stage-timeline__track{display:none}
body[data-page="merchant"] .merchant-order-details__timeline-section .merchant-stage{justify-items:center;text-align:center}
body[data-page="merchant"] .merchant-delivery-breakdown--redesign .merchant-delivery-breakdown__head{grid-template-columns:44px 1fr}
body[data-page="merchant"] .merchant-delivery-breakdown__total{grid-column:1/-1;width:100%}
body[data-page="merchant"] .merchant-delivery-breakdown__grid--four{grid-template-columns:1fr 1fr}
body[data-page="merchant"] .merchant-delivery-breakdown__formula{grid-template-columns:34px 1fr}
body[data-page="merchant"] .merchant-delivery-breakdown__formula>b{grid-column:2}
body[data-page="merchant"] .delivery-plan__times{grid-template-columns:1fr}
}
/* ============================================================
ReBoX Merchant — Stage 1 FIX6 visual correction
Corrects the Order Progress and Delivery Plan grid collision.
No data, events, or backend contracts are changed.
============================================================ */
body[data-page="merchant"] .merchant-order-details__timeline-section .merchant-stage-timeline{
width:100%;
box-sizing:border-box;
display:flex!important;
align-items:flex-start;
justify-content:space-between;
gap:14px;
position:relative;
padding:18px 8px 8px!important;
overflow:visible;
}
body[data-page="merchant"] .merchant-order-details__timeline-section .merchant-stage-timeline__track{
top:39px!important;
right:9%!important;
left:9%!important;
width:auto;
height:3px!important;
z-index:0;
}
body[data-page="merchant"] .merchant-order-details__timeline-section .merchant-stage{
flex:1 1 0;
width:0;
min-width:0;
display:flex!important;
flex-direction:column;
align-items:center!important;
justify-content:flex-start;
gap:9px;
padding:0 4px!important;
text-align:center!important;
}
body[data-page="merchant"] .merchant-order-details__timeline-section .merchant-stage__dot{
flex:0 0 42px;
width:42px!important;
height:42px!important;
position:relative;
z-index:2;
}
body[data-page="merchant"] .merchant-order-details__timeline-section .merchant-stage strong,
body[data-page="merchant"] .merchant-order-details__timeline-section .merchant-stage small{
display:block;
width:100%;
max-width:230px;
box-sizing:border-box;
overflow-wrap:normal;
word-break:normal;
white-space:normal;
}
body[data-page="merchant"] .merchant-order-details__timeline-section .merchant-stage strong{
font-size:12px!important;
line-height:1.65!important;
}
body[data-page="merchant"] .merchant-order-details__timeline-section .merchant-stage small{
min-height:0!important;
font-size:9px!important;
line-height:1.7!important;
}
body[data-page="merchant"] .delivery-plan--accurate{
display:block!important;
width:100%;
box-sizing:border-box;
overflow:hidden;
}
body[data-page="merchant"] .delivery-plan--accurate .delivery-plan__head{
width:100%;
box-sizing:border-box;
}
body[data-page="merchant"] .delivery-plan--accurate .delivery-plan__head > div:last-child,
body[data-page="merchant"] .delivery-plan--accurate .delivery-plan__head > div:nth-child(2){
min-width:0;
}
body[data-page="merchant"] .delivery-plan--accurate .delivery-plan__head p{
max-width:none;
overflow-wrap:normal;
word-break:normal;
}
body[data-page="merchant"] .delivery-plan--accurate .delivery-plan__times{
width:100%;
box-sizing:border-box;
}
body[data-page="merchant"] .delivery-plan--accurate .delivery-plan__times > div{
min-width:0;
box-sizing:border-box;
}
body[data-page="merchant"] .delivery-plan--accurate .delivery-plan__times b,
body[data-page="merchant"] .delivery-plan--accurate .delivery-plan__times strong,
body[data-page="merchant"] .delivery-plan--accurate .delivery-plan__times span{
overflow-wrap:normal;
word-break:normal;
}
body[data-page="merchant"] .delivery-plan--accurate .delivery-plan__note{
width:100%;
box-sizing:border-box;
}
@media(max-width:760px){
body[data-page="merchant"] .merchant-order-details__timeline-section .merchant-stage-timeline{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:18px 12px!important;
padding:12px 4px 4px!important;
}
body[data-page="merchant"] .merchant-order-details__timeline-section .merchant-stage-timeline__track{display:none!important}
body[data-page="merchant"] .merchant-order-details__timeline-section .merchant-stage{
width:auto;
flex:none;
}
}