/* Mazbut brand: clean neutrals, one green that means "done right" (see the brand guide). Inside a restaurant's own
   screens applyBranding() swaps --brand for the restaurant's colour; everything else stays.
   Type: IBM Plex Sans and Plex Sans Arabic for text and numbers (their digits are all one width, so prices line up),
   Readex Pro for headings and the wordmark. */
@font-face { font-family: "IBM Plex Sans"; font-weight: 400; font-display: swap; src: url(/shared/fonts/plex-sans-latin-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 600; font-display: swap; src: url(/shared/fonts/plex-sans-latin-600.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-weight: 700; font-display: swap; src: url(/shared/fonts/plex-sans-latin-700.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 400; font-display: swap; src: url(/shared/fonts/plex-sans-arabic-400.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 600; font-display: swap; src: url(/shared/fonts/plex-sans-arabic-600.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 700; font-display: swap; src: url(/shared/fonts/plex-sans-arabic-700.woff2) format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 600; font-display: swap; src: url(/shared/fonts/plex-mono-latin-600.woff2) format("woff2"); }
@font-face { font-family: "Readex Pro"; font-weight: 500; font-display: swap; src: url(/shared/fonts/readex-latin-500.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Readex Pro"; font-weight: 700; font-display: swap; src: url(/shared/fonts/readex-latin-700.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F; }
@font-face { font-family: "Readex Pro"; font-weight: 500; font-display: swap; src: url(/shared/fonts/readex-arabic-500.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Readex Pro"; font-weight: 700; font-display: swap; src: url(/shared/fonts/readex-arabic-700.woff2) format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
:root {
  --brand: #047857;      /* Mazbut green; white text on it is 5.5:1 */
  /* On restaurant screens applyBranding() sets --r-ink/--r-soft (and dark versions) from the restaurant's colour. */
  --brand-ink: var(--r-ink, #065f46);   /* links and text in the brand colour on the page ground */
  --brand-soft: var(--r-soft, #e7f6ef); /* selected items, quiet highlights */
  --brand-2: var(--r-brand-2, var(--brand)); /* the logo's second colour, for small accents */
  --bg: #f4f5f7;
  --panel: #ffffff;
  --tint: #eef0f3;       /* secondary buttons, table heads */
  --text: #111827;
  --muted: #5b6472;
  --line: #e3e6ea;
  --line-strong: #cdd2d9;
  --field-line: #7d8591; /* borders of inputs and switches: 3.7:1 on panel, the WCAG floor for controls is 3:1 */
  --ok: #047857;
  --warn: #b45309;
  --bad: #d92d20;
  --saffron: #f59e0b;    /* amber: new and waiting, someone has to act */
  --ok-bg: #e7f6ef; --ok-text: #065f46;    /* ready, paid, online */
  --bad-bg: #fdecea; --bad-text: #912018;  /* offline, urgent, suspended */
  --note-bg: #fef3c7; --note-text: #78350f;
  --radius: 16px;        /* panels */
  --r-control: 12px;     /* buttons and fields */
  --shadow: 0 1px 2px rgb(17 24 39 / .06), 0 4px 14px rgb(17 24 39 / .06);
  --shadow-lg: 0 12px 40px rgb(17 24 39 / .18);
  --shadow-float: 0 1px 2px rgb(17 24 39 / .06), 0 18px 48px rgb(17 24 39 / .10); /* screenshots and pictures lifted off the page */
  --font: "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", sans-serif;
  --font-display: "Readex Pro", "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --toast-bg: #111827; --toast-text: #f9fafb;
  --on-brand: #fff; /* text on brand-colored buttons; app.js picks dark text for light brand colors */
  --on-saffron: #111827; /* text on amber, in light and dark (amber stays the same) */
  /* Order status colours: the same on every screen (till, kitchen, back office, tracking, account).
     --st-x is the solid colour (ticket edges, dots); -bg and -text are the chip. */
  --st-pending: var(--saffron); --st-pending-bg: var(--saffron); --st-pending-text: var(--on-saffron);   /* waiting to be accepted */
  --st-accepted: #7c3aed; --st-accepted-bg: #ede9fe; --st-accepted-text: #4c1d95;                       /* new in the kitchen (violet: few brands use it, so it is not mistaken for a button) */
  --st-preparing: var(--warn); --st-preparing-bg: var(--note-bg); --st-preparing-text: var(--note-text); /* being made */
  --st-ready: var(--ok); --st-ready-bg: var(--ok-bg); --st-ready-text: var(--ok-text);                    /* ready, out, delivered */
  --st-done: var(--line-strong); --st-done-bg: var(--tint); --st-done-text: var(--muted);                /* completed or cancelled */
  --logo-bg: #fff;  /* behind restaurant logos: they are drawn for white, in dark mode too */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --brand: #34d399; --on-brand: #0b0f14; --brand-ink: var(--r-ink-dark, #6ee7b7); --brand-soft: var(--r-soft-dark, #0f2e24);
    --bg: #0b0f14; --panel: #151a21; --tint: #1f2630; --text: #f3f4f6; --muted: #9ca3af; --line: #252c36; --line-strong: #343d49; --field-line: #6b7686;
    --note-bg: #3a2a0c; --note-text: #fcd38d; --toast-bg: #f3f4f6; --toast-text: #111827;
    --ok-bg: #0f2e24; --ok-text: #6ee7b7; --bad-bg: #3b1512; --bad-text: #fca5a0; --logo-bg: #fff;
    --st-accepted: #a78bfa; --st-accepted-bg: #2e1065; --st-accepted-text: #ddd6fe;
    --shadow: 0 1px 2px rgb(0 0 0 / .4); --shadow-float: 0 18px 50px rgb(0 0 0 / .45); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --brand: #34d399; --on-brand: #0b0f14; --brand-ink: var(--r-ink-dark, #6ee7b7); --brand-soft: var(--r-soft-dark, #0f2e24);
  --bg: #0b0f14; --panel: #151a21; --tint: #1f2630; --text: #f3f4f6; --muted: #9ca3af; --line: #252c36; --line-strong: #343d49; --field-line: #6b7686;
  --note-bg: #3a2a0c; --note-text: #fcd38d; --toast-bg: #f3f4f6; --toast-text: #111827;
  --ok-bg: #0f2e24; --ok-text: #6ee7b7; --bad-bg: #3b1512; --bad-text: #fca5a0; --logo-bg: #fff;
  --st-accepted: #a78bfa; --st-accepted-bg: #2e1065; --st-accepted-text: #ddd6fe;
  --shadow: 0 1px 2px rgb(0 0 0 / .4); --shadow-float: 0 18px 50px rgb(0 0 0 / .45); color-scheme: dark;
}
html[lang=ar] { --font: "IBM Plex Sans Arabic", "IBM Plex Sans", system-ui, "Segoe UI", "Noto Sans Arabic", sans-serif; }

* { box-sizing: border-box; }
/* Layout classes like .row set display, which would otherwise override the hidden attribute. */
[hidden] { display: none !important; }
/* Restaurant-only controls (tables, dine-in, kitchen stations) are left off a shop's screens (applyBranding). */
html.shop .not-shop { display: none !important; }
/* And shop-only ones (shelf labels) are left off a restaurant's. */
html:not(.shop) .shop-only { display: none !important; }
html, body { margin: 0; }
body {
  font-family: var(--font);
  background: var(--bg); color: var(--text); font-size: 16px; line-height: 1.45;
  /* Prices and totals line up in columns and do not jitter as they change. */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent; /* replaced by the :active feedback below */
}
h1, h2, h3 { font-family: var(--font-display); margin: 0 0 .5rem; line-height: 1.2; text-wrap: balance; font-weight: 700; letter-spacing: -.01em; }
h3 { font-weight: 500; }
html[lang=ar] :is(h1, h2, h3) { letter-spacing: 0; line-height: 1.35; }
a { color: var(--brand-ink); text-underline-offset: 3px; }
/* Ticket numbers and money in the receipt face. */
.mono { font-family: var(--font-mono); font-weight: 600; }
button, input, select, textarea { font: inherit; color: inherit; }
input, select, textarea {
  width: 100%; min-height: 48px; padding: .6rem .85rem; border: 1px solid var(--field-line); border-radius: var(--r-control); background: var(--panel);
  transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 96px; }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; min-height: 0; accent-color: var(--brand); vertical-align: middle; }
/* The padding above shrinks a colour picker's swatch to a thin line. */
input[type=color] { height: 48px; padding: .25rem; cursor: pointer; }
label { display: block; font-size: .875rem; font-weight: 600; color: var(--muted); margin: .75rem 0 .3rem; }
button {
  cursor: pointer; border: 1px solid transparent; background: var(--tint); border-radius: var(--r-control); padding: .6rem 1rem; min-height: 48px; font-weight: 600;
  transition: background-color .15s, border-color .15s, box-shadow .15s, filter .15s, transform .1s;
}
/* Taps on a busy till: no double-tap zoom delay, and every press shows it landed. */
button, a, input, select, textarea, summary { touch-action: manipulation; }
button:hover:not(:disabled), .button:hover { background: color-mix(in srgb, var(--text) 9%, var(--tint)); }
button:active:not(:disabled), .button:active { transform: scale(.98); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 2px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
button.primary, .button.primary { background: var(--brand); color: var(--on-brand); box-shadow: 0 1px 2px rgb(17 24 39 / .12); }
button.primary:hover:not(:disabled), .button.primary:hover { background: var(--brand); filter: brightness(.92); }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; text-decoration: none; color: var(--text); font-weight: 600; border-radius: var(--r-control); padding: .6rem 1rem; background: var(--tint); }
.pill.tag { background: var(--tint); color: var(--muted); }
button.danger { background: var(--bad-bg); color: var(--bad-text); }
button.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--bad) 18%, var(--panel)); }
button:disabled { opacity: .45; cursor: not-allowed; }
.muted { color: var(--muted); }
.row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.spacer { flex: 1; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.15rem; box-shadow: var(--shadow); }
.pill { display: inline-flex; align-items: center; gap: .25rem; font-size: .78rem; font-weight: 600; padding: .2rem .6rem; border-radius: 99px; background: var(--tint); }
.pill.pending { background: var(--st-pending-bg); color: var(--st-pending-text); }
.pill.accepted { background: var(--st-accepted-bg); color: var(--st-accepted-text); }
.pill.preparing { background: var(--st-preparing-bg); color: var(--st-preparing-text); }
.pill.ready { background: var(--st-ready-bg); color: var(--st-ready-text); }
.pill.completed { background: var(--st-done-bg); color: var(--st-done-text); }
/* Also used for refunded, unavailable and disabled, so no strike-through. */
.pill.cancelled { background: var(--st-done-bg); color: var(--st-done-text); }

header.bar {
  display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; background: var(--panel); border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 0 rgb(17 24 39 / .02); position: sticky; top: 0; z-index: 5;
}
header.bar .logo { width: 36px; height: 36px; border-radius: 10px; background: var(--brand); flex: none; object-fit: cover; }
header.bar nav a { margin-inline-start: .75rem; text-decoration: none; }

dialog { border: none; border-radius: 20px; padding: 1.5rem; width: min(480px, 92vw); background: var(--panel); color: var(--text); overscroll-behavior: contain; box-shadow: var(--shadow-lg); }
dialog::backdrop { background: rgb(11 15 20 / .5); backdrop-filter: blur(2px); }

#toast {
  position: fixed; inset-inline: 0; bottom: 1.25rem; margin: auto; width: fit-content; max-width: 90vw; font-weight: 600;
  padding: .8rem 1.2rem; border-radius: 14px; background: var(--toast-bg); color: var(--toast-text); box-shadow: var(--shadow-lg);
  opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; pointer-events: none; z-index: 50;
}
#toast[popover] { inset: auto 0 1.25rem; border: none; overflow: visible; } /* undo the browser's popover box */
#toast.show { opacity: 1; transform: none; }
#toast.bad { background: var(--bad); color: #fff; }

/* Tabs are a segmented control: one soft track, the chosen tab lifted out of it. */
.tabs { display: flex; gap: .25rem; overflow-x: auto; padding: .25rem; background: var(--tint); border-radius: 14px; width: fit-content; max-width: 100%; }
.tabs button { background: none; min-height: 42px; padding: .45rem .95rem; border-radius: 10px; white-space: nowrap; color: var(--muted); font-weight: 600; }
.tabs button:hover:not(:disabled) { background: color-mix(in srgb, var(--panel) 60%, transparent); }
.tabs button.on { background: var(--panel); color: var(--text); box-shadow: var(--shadow); }

table.list { width: 100%; border-collapse: collapse; }
/* Code and addresses shown to copy (Add-on services): long lines break instead of widening the page. */
pre { max-width: 100%; overflow-wrap: anywhere; }
/* Phones: every header control stays on screen (More shows its dots; its word stays for screen readers), and a wide
   table scrolls inside its card instead of pushing the whole page sideways. */
@media (max-width: 600px) {
  header.bar { flex-wrap: wrap; gap: .5rem; padding-inline: .75rem; }
  header.bar > * { min-width: 0; }
  .more-btn > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  table.list { display: block; overflow-x: auto; }
}
table.list td, table.list th { padding: .6rem .5rem; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
table.list th { font-size: .8rem; font-weight: 600; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; scroll-behavior: auto !important; }
}

/* The Mazbut mark beside the name, on Mazbut's own pages (login, console). */
.wordmark { display: inline-flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; color: var(--text); text-decoration: none; }
.wordmark img { width: 34px; height: 34px; flex: none; }
/* A calm notice strip: offline queue, subscription, pending orders. */
.note-strip { background: var(--note-bg); color: var(--note-text); }
/* Messages from the Mazbut team (shared/notices.js): a strip under the header, and the inbox's list. */
.notice-strip { padding: .5rem 1rem; }
.notice-strip p { margin: .15rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; }
.notice { border-block-end: 1px solid var(--line); padding: .75rem 0; }
.notice h3 { margin: .2rem 0 .4rem; }
.notice p { margin: .3rem 0; }
.notice.unread h3::before { content: ''; display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; background: var(--saffron); margin-inline-end: .5rem; vertical-align: middle; }
.notice-body { white-space: pre-wrap; }
.notice-support { padding: .6rem .9rem; border-radius: var(--r-control); display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
/* Choices (a size, an extra) are text you tap, not form labels: normal weight, a full-width tap row. */
label:has(> input[type=checkbox]), label:has(> input[type=radio]) { display: flex; flex-wrap: nowrap; align-items: center; gap: .6rem; min-height: 44px; margin: 0; font-weight: 400; color: var(--text); font-size: 1rem; cursor: pointer; }
/* A long label wraps its own words; the box stays beside the first line. */
:is(label > input[type=checkbox], label > input[type=radio]) { flex-shrink: 0; }
fieldset { border: 1px solid var(--line); border-radius: var(--r-control); padding: .5rem 1rem .75rem; margin: 0 0 .75rem; }
legend { padding: 0 .35rem; font-weight: 600; }
/* Dark mode switch (themeToggle in i18n.js): a slider with a sun or moon on its thumb. */
#lang { display: inline-flex; align-items: center; gap: .5rem; }
.theme-switch { background: none; min-width: 60px; padding: 0 .2rem; display: inline-flex; align-items: center; justify-content: center; }
.theme-switch:hover:not(:disabled) { background: none; }
.theme-switch .track { position: relative; width: 52px; height: 30px; border-radius: 99px; background: var(--field-line); transition: background-color .2s; }
.theme-switch .thumb { position: absolute; top: 3px; inset-inline-start: 3px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: #111827; box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .2s; }
.theme-switch[aria-checked="true"] .track { background: var(--brand); }
.theme-switch[aria-checked="true"] .thumb { transform: translateX(22px); }
html[dir=rtl] .theme-switch[aria-checked="true"] .thumb { transform: translateX(-22px); }

/* "More" (moreMenu() in app.js): what is set once a day (printing, language, theme, home) in one menu off the header. */
.more-menu { position: fixed; inset: auto; margin: 0; padding: .4rem; min-width: 260px; max-width: calc(100vw - 24px); border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--panel); color: var(--text); box-shadow: var(--shadow-lg); }
.more-menu > :is(button, .button, select) { display: flex; width: 100%; justify-content: flex-start; text-align: start; margin: 0; }
.more-menu > :is(button, .button) { background: none; font-weight: 500; }
.more-menu > :is(button, .button):hover { background: var(--tint); }
.more-menu > select { border-color: var(--line); margin: .2rem 0; }
.more-menu hr { border: 0; border-top: 1px solid var(--line); margin: .35rem 0; }
.more-menu #lang { display: flex; justify-content: space-between; padding: .2rem .4rem; }
.more-menu > label { display: flex; align-items: center; gap: .6rem; min-height: 48px; margin: 0; padding: 0 1rem; color: var(--text); font-size: 1rem; font-weight: 500; cursor: pointer; }
.more-btn { display: inline-flex; align-items: center; gap: .4rem; }
.more-btn svg { flex: none; }
/* A count on a button: amber when someone has to act (new orders), red for a problem. */
.count { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .4rem; border-radius: 99px; font-size: .8rem; font-weight: 700;
  background: var(--saffron); color: var(--on-saffron); margin-inline-start: .35rem; }
.count.bad { background: var(--bad); color: #fff; }
.count[hidden] { display: none; }
/* A status in a header that is also a button (the shift): quiet until it is the next step. */
.chip { background: none; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); font-weight: 500; }
.chip.primary { border-color: transparent; border-radius: var(--r-control); }
/* The restaurant and branch in a header, on two lines. */
header.bar .who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
header.bar .who b { font-family: var(--font-display); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
header.bar .who .muted { font-size: .82rem; }
/* A − 2 + quantity control, 48 px tall. */
.stepper { display: inline-flex; align-items: center; background: var(--tint); border-radius: var(--r-control); flex: none; }
.stepper button { background: none; min-width: 44px; padding: 0; }
.stepper b { min-width: 1.6rem; text-align: center; }

/* The restaurant on customer pages (ordering, tracking): one line, and under it the brand colour running into the logo's second colour. */
.store { background: var(--panel); border-bottom: 1px solid var(--line); position: relative; }
.store::after { content: ""; position: absolute; inset-inline: 0; bottom: -1px; height: 3px;
  background: linear-gradient(to var(--end, right), var(--brand), var(--brand-2)); }
html[dir=rtl] .store { --end: left; }
.store .in { max-width: 760px; margin: 0 auto; padding: .75rem 16px; display: flex; align-items: center; gap: .75rem; }
.store img { width: 48px; height: 48px; border-radius: var(--r-control); object-fit: contain; background: var(--logo-bg); border: 1px solid var(--line); flex: none; }
.store .who { flex: 1; min-width: 0; }
.store h1 { font-size: 1.15rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.store .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .5rem; font-size: .85rem; color: var(--muted); }
/* A square 48 px button holding only an icon (it carries an aria-label). */
.icon-btn { width: 48px; padding: 0; display: inline-grid; place-items: center; flex: none; }
.help-btn { width: 48px; padding: 0; flex: none; border-radius: 50%; font-weight: 700; font-size: 1.15rem; }  /* "?": help for this function (help.js) */
dialog > .help-btn { position: absolute; inset-block-start: .75rem; inset-inline-end: .75rem; }
dialog:has(> .help-btn) :is(h2, h3):first-of-type:not(.row *), dialog:has(> .help-btn) > .row:first-of-type { padding-inline-end: 56px; }  /* room for the "?" */
.help-dlg { width: min(720px, calc(100vw - 2rem)); max-height: 88dvh; }  /* the help window */
.help-dlg[open] { display: flex; flex-direction: column; gap: .6rem; }
.help-body { overflow: auto; min-height: 0; flex: 1; line-height: 1.6; }
.help-body :is(ol, ul) { padding-inline-start: 1.4rem; margin: .4rem 0; }
.help-body li { margin: .25rem 0; }
.help-body h4 { margin: 1rem 0 .3rem; }
.help-list { list-style: none; padding: 0 !important; }
.help-link { width: 100%; justify-content: flex-start; text-align: start; background: transparent; min-height: 44px; }
.help-link:hover { background: var(--tint); }
.help-foot { border-block-start: 1px solid var(--line); padding-block-start: .6rem; }

/* The sales pages' "end to end" strip: the business's steps in order, each saying what runs by itself there. */
.flow { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 10px; counter-reset: step; }
.flow li { counter-increment: step; position: relative; background: var(--panel); border-radius: var(--r-control); box-shadow: var(--shadow); padding: 14px 14px 16px; }
.flow li::before { content: counter(step); display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand-ink); font-weight: 700; font-size: .85rem; margin-bottom: .4rem; }
html[lang=ar] .flow li::before { content: counter(step, arabic-indic); } /* ١ ٢ ٣ beside Arabic, like every other number */
.flow b { display: block; font-family: var(--font-display); font-size: 1.02rem; margin-bottom: .2rem; }
.flow span { color: var(--muted); font-size: .92rem; line-height: 1.45; display: block; }
.flow .auto { color: var(--brand-ink); font-weight: 600; font-size: .78rem; margin-top: .45rem; }
/* The owner's question above a sales-page heading: the need first, then the answer (the decks' pattern) */
.owner-q { margin: 0 0 .4rem; color: var(--brand-ink); font-weight: 600; font-size: .95rem; }
/* Two cards side by side on the sales pages: what runs by itself, and what stays with people */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.6rem; }
.split > div { background: var(--panel); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.3rem 1.4rem; }
.split ul { margin: .6rem 0 0; padding-inline-start: 1.2rem; display: grid; gap: .45rem; }
.split li { color: var(--muted); }
@media (max-width: 700px) { .split { grid-template-columns: 1fr; } }
/* Links to social media pages (public/shared/social.js): words, not logos, each a comfortable tap. */
.social-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.1rem; margin: 1.5rem 0 0; }
.social-links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--brand-ink); font-weight: 600; }
/* The sales pages' prepaid packages: one tile per package, the saving under its price. */
.packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; margin-top: 18px; }
.pack { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; display: flex; flex-direction: column; gap: .25rem; }
.pack b { font-family: var(--font-display); font-size: 1.05rem; }
.pack .amount { font-size: 1.35rem; font-weight: 700; }
.pack .save { color: var(--brand-ink); font-weight: 600; font-size: .9rem; }
.pack span { color: var(--muted); font-size: .92rem; }
/* The customer pages' language list, when a restaurant offers more than Arabic and English. */
#lang .lang-pick { width: auto; min-width: 7.5rem; }