/* ============================================================
   Talla modern layer: loads after styles.css.
   Same Talla colors, softer surfaces: shadows instead of borders,
   larger radii, floating nav, bolder type.
   Remove the <link> in index.html to roll back.
   ============================================================ */
:root {
  --shadow: 0 1px 2px rgba(28,25,23,.05), 0 10px 26px -14px rgba(28,25,23,.22);
  --shadow-lg: 0 18px 40px -18px rgba(28,25,23,.35);
  --grad: linear-gradient(135deg, #C2410C, #EA580C);
  --glass: rgba(255,255,255,.86);
  --r-lg: 22px;
}
:root[data-theme="dark"] { --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 30px -14px rgba(0,0,0,.8); --shadow-lg: 0 18px 40px -16px rgba(0,0,0,.9); --glass: rgba(28,25,22,.86); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 30px -14px rgba(0,0,0,.8); --shadow-lg: 0 18px 40px -16px rgba(0,0,0,.9); --glass: rgba(28,25,22,.86); } }

body { font-family: 'Cairo', system-ui, sans-serif; }
h1, h2, h3, .bold { font-weight: 800; }

/* surfaces */
.card, .rest, .order-row, .opt, .inst-steps li, .inv-stats > div, .mini { border-color: transparent; box-shadow: var(--shadow); border-radius: var(--r-lg); }
.card { padding: 16px; }
.icon-btn { border-color: transparent; box-shadow: var(--shadow); border-radius: 15px; }
.search { border-color: transparent; box-shadow: var(--shadow); border-radius: 18px; height: 52px; }
input, select, textarea { border-radius: 14px; }
.btn { border-radius: 15px; font-weight: 800; }
.btn:not(.primary):not(.ghost):not(.wa):not(.danger) { border-color: transparent; box-shadow: var(--shadow); }
.btn.primary { background: var(--grad); border: 0; box-shadow: 0 10px 24px -12px #C2410C; }
.btn.primary:active { transform: scale(.98); }
.chip, .fchip { border-color: transparent; box-shadow: var(--shadow); font-weight: 700; }
.chip.on { background: var(--ink); color: var(--bg); }
.badge, .st { font-weight: 800; }

/* home */
.addr-btn .val, .addr-btn select { font-size: 16px; font-weight: 800; }
.logo { width: 46px; height: 46px; border-radius: 15px; box-shadow: var(--shadow); }
.greet { font-size: 26px; font-weight: 900; line-height: 1.3; margin: 2px 0 -2px; }
.grad-t { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.banner { border-radius: var(--r-lg); padding: 16px 18px; position: relative; overflow: hidden; }
.banner::after { content: ""; position: absolute; width: 160px; height: 160px; border-radius: 50%; left: -50px; top: -70px; background: radial-gradient(circle, rgba(234,88,12,.35), transparent 65%); pointer-events: none; }
.promo { border-radius: 24px; padding: 18px; min-height: 118px; justify-content: flex-end; position: relative; overflow: hidden;
  background: radial-gradient(circle at 10% 120%, rgba(253,186,140,.9) 0, transparent 45%), radial-gradient(circle at 95% -30%, #F97316 0, transparent 55%), var(--grad); box-shadow: 0 14px 30px -16px #C2410C; }
.promo-k { background: rgba(255,255,255,.2); padding: 1px 10px; border-radius: 99px; margin-bottom: auto; }
.promo-t { font-size: 20px; font-weight: 900; line-height: 1.3; }
.cats { display: flex; gap: 10px; overflow-x: auto; margin: 0 -16px; padding: 4px 16px 8px; scrollbar-width: none; }
.cats::-webkit-scrollbar { display: none; }
.cat { flex: 0 0 74px; display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; font: inherit; font-size: 12px; font-weight: 800; color: var(--ink-2); cursor: pointer; padding: 0; }
.cat i { font-style: normal; width: 74px; height: 74px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); display: grid; place-items: center; font-size: 30px; transition: background .2s, transform .15s; }
.cat:active i { transform: scale(.95); }
.cat.on { color: var(--ink); }
.cat.on i { background: var(--ink); }
.sec-h { font-size: 18px; font-weight: 900; }
.rest { padding: 10px; gap: 14px; transition: transform .15s; }
.rest:active { transform: scale(.985); }
.rest .ph { width: 80px; height: 80px; border-radius: 18px; }
.rest .bold { font-weight: 900; }
.meta span { background: var(--soft); padding: 1px 8px; border-radius: 99px; font-weight: 700; }
.meta span:empty, .meta > span:nth-child(even):not(:last-child) { }
.meta { gap: 6px; }
.rest.featured { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent), var(--shadow); }
.mini-ph { border-radius: 16px; }
.inst-banner { border: 0; box-shadow: var(--shadow); border-radius: var(--r-lg); background: var(--surface); }

/* floating bottom nav */
.nav { background: transparent; border-top: 0; padding: 0 12px calc(12px + var(--safe-b)); pointer-events: none; }
/* liquid-glass pill: frosted, slightly tinted, with a bubble that slides under the active tab */
.nav .bottom-inner { --pad: 6px; --dir: 1; position: relative; pointer-events: auto; height: 70px; padding: var(--pad); border-radius: 999px;
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 40%, rgba(120,200,210,.10) 60%, color-mix(in srgb, var(--accent) 12%, transparent)),
    var(--glass-nav, rgba(255,255,255,.72));
  -webkit-backdrop-filter: blur(16px) saturate(170%); backdrop-filter: blur(16px) saturate(170%); contain: layout paint;
  box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.55), inset 0 1px 0 rgba(255,255,255,.8); }
[dir="rtl"] .nav .bottom-inner { --dir: -1; }
.nav-bubble { position: absolute; top: var(--pad); bottom: var(--pad); inset-inline-start: var(--pad); width: calc((100% - 2 * var(--pad)) / 4); border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, rgba(255,255,255,.35));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.5), 0 4px 14px -6px color-mix(in srgb, var(--accent) 60%, transparent);
  transform: translate3d(calc(var(--i, 0) * 100% * var(--dir)), 0, 0) scale(var(--s, 1)); transition: transform .24s cubic-bezier(.3, 1.2, .5, 1), background .2s; will-change: transform; }
/* drag along the bar: the bubble follows the finger like a lens, and snaps to a tab on release */
.nav .bottom-inner { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.nav a { -webkit-user-drag: none; }
.nav .bottom-inner.dragging { --s: 1.14; }
.nav .bottom-inner.dragging .nav-bubble { background: color-mix(in srgb, var(--accent) 10%, rgba(255,255,255,.55)); }
.nav .bottom-inner.dragging a.on svg { transform: scale(1.12); }
.nav a { position: relative; z-index: 1; font-size: 11px; font-weight: 700; gap: 3px; border-radius: 999px; transition: color .2s; }
.nav a:active svg { transform: scale(.9); }
.nav a svg { transition: transform .15s; }
.nav a.on { color: var(--ink); font-weight: 800; }
.nav a.on svg { color: var(--accent); }
:root[data-theme="dark"] .nav .bottom-inner { --glass-nav: rgba(30,26,23,.62); box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.12); }
:root[data-theme="dark"] .nav-bubble { background: color-mix(in srgb, var(--accent) 30%, rgba(255,255,255,.06)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nav .bottom-inner { --glass-nav: rgba(30,26,23,.62); box-shadow: var(--shadow-lg), inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.12); }
  :root:not([data-theme="light"]) .nav-bubble { background: color-mix(in srgb, var(--accent) 30%, rgba(255,255,255,.06)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
}
@media (prefers-reduced-motion: reduce) { .nav-bubble { transition: none; } }
.nav .dot { top: 6px; border: 2px solid var(--surface); font-weight: 800; }
.content.with-nav { padding-bottom: calc(110px + var(--safe-b)); }
.content.with-nav-bar { padding-bottom: calc(184px + var(--safe-b)); }
.cartbar.above-nav { bottom: calc(88px + var(--safe-b)); }

/* cart bar */
.cartbar { background: none; padding: 10px 14px calc(14px + var(--safe-b)); }
.cartbar a { height: 62px; border-radius: 22px; background: var(--grad); box-shadow: 0 16px 32px -14px #C2410C; font-weight: 900; padding: 0 10px 0 18px; }
.cartbar .n { width: 42px; height: 42px; border-radius: 14px; background: rgba(255,255,255,.22); color: #fff; font-size: 15px; }

/* shop page */
.cover { height: 230px; }
.cover .ph { border-radius: 0 0 30px 30px; }
.cover-bar { top: calc(14px + env(safe-area-inset-top)); }
.cover-bar .icon-btn, .cover-bar .fav { background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--shadow); width: 44px; height: 44px; border-radius: 15px; }
.rinfo { margin: -44px 16px 0; padding: 18px; gap: 10px; box-shadow: var(--shadow-lg); }
.rinfo h1 { font-size: 24px; font-weight: 900; }
.stats { border-top: 0; padding: 10px 6px; background: var(--soft); border-radius: 16px; text-align: center; }
.sec-title { font-size: 18px; font-weight: 900; padding-top: 10px; }
.item { background: var(--surface); border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 12px; margin-bottom: 10px; }
.item:last-child { border-bottom: 0; }
.item .ph { width: 86px; height: 86px; border-radius: 18px; }
.item .ph img { border-radius: 18px; }
.price .s { font-weight: 900; font-size: 16px; color: var(--ink); }
.add { background: var(--grad); color: #fff; border-radius: 14px; box-shadow: 0 8px 18px -10px #C2410C; }
.stepper { background: var(--ink); color: var(--bg); border: 0; border-radius: 14px; box-shadow: var(--shadow); }
.stepper button { color: var(--bg); }
.offer { border-radius: 16px; }

/* cart */
.line { border-bottom-color: var(--line); }
.qty { background: var(--soft); border-radius: 14px; }
.opt { padding: 14px 16px; }
.opt.on { border: 0; padding: 14px 16px; box-shadow: 0 0 0 2px var(--accent), var(--shadow); }
.sum .t { font-size: 19px; font-weight: 900; border-top-color: var(--line); }
.warn, .err, .note { border-radius: 16px; }

/* orders & tracking */
.order-row { padding: 12px 14px; }
.map { border-radius: 26px; height: 220px; box-shadow: var(--shadow); }
.eta .v { font-size: 28px; font-weight: 900; }
.steps .cur .dotc { border-color: var(--accent); }
.avatar { border-radius: 16px; }

/* account, auth, misc */
.seg { border-radius: 16px; }
.seg button.on, .seg a.on { box-shadow: var(--shadow); }
.toast { border-radius: 16px; font-weight: 800; box-shadow: var(--shadow-lg); }
.invoice { border: 0; box-shadow: var(--shadow); border-radius: var(--r-lg); }

/* wider screens: keep the phone-width column centered with a soft frame */
@media (min-width: 700px) {
  body { background: var(--soft); }
  .screen { background: var(--bg); box-shadow: 0 0 0 1px var(--line); }
}

/* bottom bar over page content (cart page): solid fade behind the button */
.cartbar:not(.above-nav) { background: linear-gradient(to top, var(--bg) 72%, transparent); }
.btn.primary:disabled { opacity: 1; background: var(--soft); color: var(--muted); box-shadow: none; }

/* shop-owner & driver panels (partner.css is scoped to .pt) */
:root body .pt { font-family: 'Cairo', system-ui, sans-serif; }
:root body .pt .card, :root body .pt .tile, :root body .pt .table-wrap { border-color: transparent; box-shadow: var(--shadow); border-radius: 20px; }
:root body .pt .order.s-pending, :root body .pt .drv-card.hot { border-color: transparent; box-shadow: 0 0 0 2px var(--accent), 0 14px 30px -16px #C2410C; }
:root body .pt .btn { border-radius: 14px; font-weight: 800; }
:root body .pt .btn:not(.primary):not(.dark):not(.danger) { border-color: transparent; box-shadow: var(--shadow); }
:root body .pt .btn.primary { background: var(--grad); border: 0; }
:root body .pt .chip { border-color: transparent; box-shadow: var(--shadow); }
:root body .pt .chip.on { background: var(--ink); color: var(--bg); }
:root body .pt h1, :root body .pt h2, :root body .pt h3 { font-weight: 900; }
:root body .pt .tabs button { font-weight: 800; border-bottom: 0 !important; border-radius: 12px; padding: 8px 14px; margin: 6px 0; }
:root body .pt .tabs button.on { background: var(--ink); color: var(--bg); border-bottom-color: transparent; }
:root body .pt .items { border-radius: 14px; }

/* login page polish (client feedback) */
.auth-sub { color: var(--ink-2); margin: 0; }
.field-hint { display: block; color: var(--ink-2); margin-top: 6px; }
.link-accent { color: var(--accent-ink); }
.auth-seg { background: var(--soft); border: 1px solid var(--line); }
.auth-seg button { color: var(--ink-2); }
.auth-seg button.on { background: var(--surface); color: var(--accent-ink); font-weight: 800; box-shadow: inset 0 -3px 0 var(--accent), var(--shadow); }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { width: 100%; padding-right: 48px !important; }
.pw-eye { position: absolute; right: 8px; left: auto; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: var(--accent-ink); cursor: pointer; padding: 6px; line-height: 0; display: flex; align-items: center; }
:root[data-theme="dark"] .link-accent, :root[data-theme="dark"] .pw-eye, :root[data-theme="dark"] .auth-seg button.on { color: #FDBA74; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .link-accent, :root:not([data-theme="light"]) .pw-eye, :root:not([data-theme="light"]) .auth-seg button.on { color: #FDBA74; } }
@media (min-width: 768px) {
  .screen.auth-screen { max-width: none; background: transparent; box-shadow: none; }
  .auth-screen { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 32px 16px; }
  .auth-screen > .topbar { width: 100%; max-width: 460px; }
  .auth-screen > .content { width: 100%; max-width: 460px; background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 28px; box-shadow: var(--shadow-lg, 0 18px 40px -16px rgba(0,0,0,.25)); }
}

/* shop-owner panel: hamburger + right drawer on phones */
:root body .pt .hamb, :root body .pt .r-nav-head, :root body .pt .r-nav-bg { display: none; }
:root body .pt .r-ic { display: none; }
@media (max-width: 760px) {
  :root body .pt .hamb { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 46px; height: 46px; flex-shrink: 0; border: 0; border-radius: 15px; background: var(--surface); box-shadow: var(--shadow); cursor: pointer; padding: 0; }
  :root body .pt .hamb span { display: block; width: 22px; height: 2.5px; border-radius: 3px; background: var(--ink); }
  :root body .pt .topbar-inner { justify-content: flex-start; }
  :root body .pt .topbar-inner > .brand { flex: 1; min-width: 0; }
  :root body .pt .topbar-inner > .row { width: 100%; }
  :root body .pt .r-nav { position: fixed; top: 0; bottom: 0; right: 0; width: 280px; max-width: 84vw; height: 100dvh; margin: 0; z-index: 41; background: var(--surface); flex-direction: column; align-items: stretch; gap: 4px; padding: 16px 12px; overflow-y: auto; transform: translateX(105%); transition: transform .28s cubic-bezier(.2,.8,.2,1); box-shadow: -20px 0 60px -20px rgba(0,0,0,.45); }
  body.rnav-open .pt .r-nav { transform: none; }
  body.rnav-open { overflow: hidden; }
  :root body .pt .r-nav-head { display: flex; align-items: center; gap: 10px; padding: 4px 6px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--line); }
  :root body .pt .r-nav-head b { display: block; font-size: 16px; font-weight: 900; }
  :root body .pt .r-nav-head .small { display: block; }
  :root body .pt .r-nav-x { margin-inline-start: auto; width: 38px; height: 38px; border: 0; border-radius: 12px; background: var(--soft); color: var(--ink); font-size: 16px; cursor: pointer; }
  :root body .pt .r-nav button[data-rtab] { width: 100%; justify-content: flex-start; gap: 10px; margin: 0; padding: 12px 12px; font-size: 15px; }
  :root body .pt .r-ic { display: inline; font-size: 18px; }
  :root body .pt .r-nav button .count { margin-inline-start: auto; }
  :root body .pt .r-nav-bg { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(12,10,9,.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity .25s; }
  body.rnav-open .pt .r-nav-bg { opacity: 1; pointer-events: auto; }
}

/* ---------- Google / Apple sign-in + first-open welcome (store app) ---------- */
.sso { gap: 10px; font-weight: 700; }
.sso svg { flex: none; }
.sso-google { background: #fff; color: #1F1F1F; border: 1px solid #DADCE0; }
.sso-apple { background: #000; color: #fff; border: 1px solid #000; }
.sso-email { background: var(--surface, #fff); color: var(--ink); border: 1px solid var(--line, #E7E0D6); }
.welcome .sso-skip, .sso-skip { background: none !important; border: 0 !important; box-shadow: none !important; color: var(--ink-2); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.sso-box { gap: 10px; margin-top: 4px; }
.sso-or { display: flex; align-items: center; gap: 12px; color: var(--ink-2); font-size: 13px; font-weight: 600; margin: 14px 0 6px; }
.sso-or::before, .sso-or::after { content: ''; flex: 1; height: 1px; background: var(--line, #E7E0D6); }
:root[data-theme="dark"] .sso-apple { background: #fff; color: #000; border-color: #fff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .sso-apple { background: #fff; color: #000; border-color: #fff; } }
.welcome { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: space-between; padding: calc(env(safe-area-inset-top) + 48px) 20px calc(env(safe-area-inset-bottom) + 24px); background: radial-gradient(120% 70% at 80% 0%, #FFE7D3 0%, var(--bg) 55%); }
.welcome-top { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 8vh; }
.welcome-logo { border-radius: 26px; box-shadow: 0 18px 40px rgba(194, 65, 12, .3); margin-bottom: 10px; }
.welcome-top h1 { font-size: 44px; font-weight: 900; margin: 0; }
.welcome-top p { margin: 0; color: var(--ink-2); font-weight: 600; font-size: 17px; }
.welcome-actions { gap: 10px; width: 100%; max-width: 420px; margin: 0 auto; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .welcome { background: radial-gradient(120% 70% at 80% 0%, #3A1C0C 0%, var(--bg) 55%); } }
:root[data-theme="dark"] .welcome { background: radial-gradient(120% 70% at 80% 0%, #3A1C0C 0%, var(--bg) 55%); }

/* contact: WhatsApp / Instagram / Facebook as round icons */
.social-row { display: flex; justify-content: center; gap: 18px; margin-top: 4px; }
.social { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; box-shadow: 0 8px 18px rgba(0,0,0,.16); transition: transform .15s; }
.social:active { transform: scale(.92); }
.social svg { width: 28px; height: 28px; }
.social.wa-ic { background: #25D366; }
.social.ig-ic { background: radial-gradient(circle at 30% 110%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 95%); }
.social.fb-ic { background: #1877F2; }

/* account page: folding cards */
.card.fold > h2 { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; margin: 0; user-select: none; -webkit-tap-highlight-color: transparent; }
.card.fold > h2::after { content: ''; flex: none; width: 9px; height: 9px; border-right: 2.5px solid currentColor; border-bottom: 2.5px solid currentColor; transform: translateY(-3px) rotate(45deg); opacity: .55; transition: transform .2s; margin-inline-end: 4px; }
.card.fold.open > h2::after { transform: translateY(2px) rotate(-135deg); }
.card.fold > .fold-body { display: none; flex-direction: column; gap: inherit; }
.card.fold.open > .fold-body { display: flex; animation: foldIn .2s ease-out; }
@keyframes foldIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .card.fold.open > .fold-body { animation: none; } }

/* language switch */
.lang-btn { min-width: 40px; font-weight: 800; }
.welcome { position: relative; }
.welcome-lang { position: absolute; top: max(14px, env(safe-area-inset-top)); inset-inline-end: 16px; }
.lang-row > summary { list-style: none; display: flex; align-items: center; gap: 14px; cursor: pointer; }
.lang-row > summary::-webkit-details-marker { display: none; }
.lang-row .lang-ic { display: inline-flex; color: var(--ink, #1C1410); --lang-ic-fg: var(--surface); }
.lang-row .chev { font-size: 22px; line-height: 1; transition: transform .15s; }
[dir="rtl"] .lang-row .chev { transform: scaleX(-1); }
.lang-row[open] .chev { transform: rotate(90deg); }
[dir="ltr"] .flip-ltr { transform: scaleX(-1); }

/* Home: the delivery fee is one quiet line under the zone picker (was a big dark banner) */
.fee-line { margin-top: -8px; font-size: 13px; color: var(--muted); }
.fee-line b { color: var(--ink); font-weight: 800; }

/* Cart: cash is one line; extras and the coupon fold away until needed */
.pay-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 12px 14px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.fold { border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.fold > summary { list-style: none; cursor: pointer; padding: 13px 14px; display: flex; flex-direction: column; gap: 2px; min-height: 44px; justify-content: center; }
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary::after { content: '⌄'; position: absolute; inset-inline-end: 16px; margin-top: 2px; color: var(--muted); }
.fold { position: relative; }
.fold[open] > summary::after { content: '⌃'; }
.fold-body { padding: 0 14px 14px; }

/* Shop page: offers sit in one swipeable row instead of a tall stack */
.offers { flex-direction: row; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
.offers::-webkit-scrollbar { display: none; }
.offers > .offer { flex: 0 0 82%; scroll-snap-align: start; }
.offers > .offer:only-child { flex-basis: 100%; }
/* «طلباتي»: invoices button on the bar */
.topbar.between { justify-content: space-between; }

/* product search hits on the home screen */
.prod-hit { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-lg, 18px); background: var(--surface); box-shadow: var(--shadow); color: inherit; text-decoration: none; min-height: 64px; }
.prod-hit .mini-ph { width: 48px; height: 48px; flex: none; display: grid; place-items: center; overflow: hidden; background: var(--soft); font-weight: 800; color: var(--muted); }
.prod-hit .mini-ph img { width: 100%; height: 100%; object-fit: cover; }
.prod-hit.closed { opacity: .6; }
/* in-shop search + jump-to-item highlight */
.msearch { margin-bottom: 10px; }
.item.flash { animation: itemFlash 1.8s ease; }
@keyframes itemFlash { 0%, 40% { background: color-mix(in srgb, var(--accent) 16%, transparent); } 100% { background: transparent; } }
/* offline bar */
.net-bar { position: fixed; inset-inline: 12px; top: calc(10px + env(safe-area-inset-top, 0px)); z-index: 999; padding: 10px 14px; border-radius: 14px; background: var(--ink); color: var(--bg); font-size: 14px; font-weight: 700; text-align: center; box-shadow: var(--shadow-lg, 0 10px 30px rgba(0,0,0,.2)); }

/* live driver map on the order page */
.track { position: relative; padding: 0; overflow: hidden; }
.track-map { height: 260px; width: 100%; background: var(--soft); z-index: 0; }
.track-meta { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; font-size: 14px; }
.track-fit { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 500; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--surface); color: var(--ink); font-size: 20px; box-shadow: var(--shadow); cursor: pointer; }
.trk-ic { display: grid !important; place-items: center; font-size: 24px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.trk-ic.drv { border: 3px solid var(--accent); animation: trkPulse 2s ease-out infinite; }
.trk-ic.home { border: 3px solid #16A34A; }
@keyframes trkPulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent), 0 4px 14px rgba(0,0,0,.25); } 100% { box-shadow: 0 0 0 18px transparent, 0 4px 14px rgba(0,0,0,.25); } }
.warn-txt { color: #B45309; font-weight: 600; }
.leaflet-container { font-family: inherit; }

/* order chat sheet (customer order page + shop panel) */
body.chat-open { overflow: hidden; }
.chat-sheet { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; justify-content: center; }
.chat-bg { position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.chat-box { position: relative; width: 100%; max-width: 560px; height: min(78vh, 640px); background: var(--bg); border-radius: 22px 22px 0 0; display: flex; flex-direction: column; box-shadow: 0 -10px 40px rgba(0,0,0,.25); padding-bottom: env(safe-area-inset-bottom, 0px); animation: chatUp .22s ease-out; }
@keyframes chatUp { from { transform: translateY(40px); opacity: .5; } }
.chat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 16px; }
.chat-x { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--soft); color: var(--ink); font-size: 16px; cursor: pointer; }
.chat-list { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.chat-empty, .chat-closed { margin: auto; text-align: center; color: var(--muted); font-size: 14px; padding: 12px; }
.msg { max-width: 80%; display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 16px; font-size: 15px; line-height: 1.45; word-break: break-word; }
.msg.mine { align-self: flex-start; background: var(--accent); color: #fff; border-end-start-radius: 4px; }
.msg.theirs { align-self: flex-end; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-end-end-radius: 4px; }
.msg-who { font-size: 11px; font-weight: 800; opacity: .75; }
.msg-t { font-size: 10px; opacity: .7; align-self: flex-end; }
.chat-form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); }
.chat-form input { flex: 1; min-height: 46px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 0 16px; font: inherit; }
.chat-send { width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer; }
.chat-send svg { transform: scaleX(-1); }
[dir="ltr"] .chat-send svg { transform: none; }
.chat-btn .count { margin-inline-start: 6px; }
/* shop panel: stock running low */
.inline-num.low { border-color: #DC2626 !important; color: #B91C1C; font-weight: 700; }

/* address: pick the house on a map (pin fixed in the middle, the map moves) */
.pick-wrap { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line, #E7E0D6); }
.pick-map { height: 240px; }
.pick-pin { position: absolute; inset-inline-start: 50%; top: 50%; transform: translate(-50%, -100%); font-size: 34px; pointer-events: none; z-index: 500; filter: drop-shadow(0 3px 3px rgba(0,0,0,.35)); }
[dir=rtl] .pick-pin { transform: translate(50%, -100%); }
.pick-hint { position: absolute; top: 6px; inset-inline-start: 8px; z-index: 500; background: var(--card, #fff); padding: 2px 8px; border-radius: 999px; }

/* recent searches under the home search box */
.recent-q { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 10px; }
.recent-q[hidden] { display: none; }
.recent-q .chip { min-height: 34px; padding: 4px 12px; font-size: 13px; }

/* shop reply under a review */
.rv-reply { margin: 6px 0 0; padding: 8px 10px; border-radius: 12px; background: color-mix(in srgb, var(--brand, #EA580C) 8%, transparent); border-inline-start: 3px solid var(--brand, #EA580C); }

/* notify me when this shop opens */
.watch-btn { margin-top: 8px; }
.watch-btn.on { background: color-mix(in srgb, var(--green, #16A34A) 12%, transparent); color: var(--green, #16A34A); box-shadow: none; }

/* late delivery compensation */
.late-comp { border: 1px solid color-mix(in srgb, var(--brand, #EA580C) 35%, transparent); background: color-mix(in srgb, var(--brand, #EA580C) 6%, var(--card, #fff)); }
.late-comp .btn { align-self: flex-start; }