/* ============================================================================
   Flowiax customer table menu — /menu/<qr token>, /menu/explore/<till>, /menu.
   A restaurant's digital menu: a warm ground, the restaurant's own logo, whole
   dish photos, prices that say what the taxes do. Loaded after fx_staff.css,
   which brings the self-hosted Manrope / FlowiaxArabic fonts and the shared
   pieces (.fx-btn, .fx-chip, .fx-segment, .fx-input, .fx-pill, .fx-toast,
   .fx-foot). Mobile first; logical properties only, so Arabic needs no second
   stylesheet. No CDN.

   COLOURS — read this before adding a rule. The customer menu takes NO colour
   from fx_staff.css and writes no colour of its own: everything below comes
   from the block that follows, so that a restaurant can be given its own
   colours by changing those few lines alone. The staff screens (fx_staff.css)
   keep the Flowiax teal and are never touched from here.
   ============================================================================ */

:root {
    --fxm-top-h: 69px;
    --fxm-nav-h: 64px;
    --fxm-cartbar-h: 58px;
    --fxm-safe-b: env(safe-area-inset-bottom, 0px);
    --fxm-gutter: 16px;
    --fxm-radius-lg: 22px;
}

/* ══ The restaurant's palette — the ONE place a colour is chosen ══════════
   Change the channels and the two gradients and the whole menu follows: the
   header, the hero, the chips, the cards, the cart, the sheets and the
   assistant. Everything under them is derived, never picked by hand.

   THE RESTAURANT'S MANAGER CHOOSES THESE (owner, 2026-09-19). Every value in
   this block is written again, per till, as an inline style on the page's own
   <body> — the server computes the whole set from the three choices of the
   restaurant app («Menu colours»): the main colour, an optional second colour
   and the page tone (pos.config.flowiax_menu_color / _color2 / _tone,
   menu_palette() in flowiax_pos_restaurant_core/models/pos_config.py). What
   stands below is only the default the menu shipped with — the old crimson
   #ba0034 on a light ground — used when a page is opened with no till behind
   it (the restaurant list). Never add a colour outside this block: a rule that
   names one would not follow the restaurant. */
.fxm-body, .fxm-list-body {
    /* the restaurant's colour — the old crimson, the colour of a dining room */
    --fxm-accent-rgb: 186 0 52;
    --fxm-accent-strong-rgb: 145 0 41;
    --fxm-accent-deep-rgb: 84 0 23;
    --fxm-on-accent-rgb: 255 255 255;
    /* the page: a ground warmed by the colour itself, white cards, a warm ink */
    --fxm-bg-rgb: 252 242 245;
    --fxm-surface-rgb: 255 255 255;
    --fxm-ink-rgb: 42 18 27;
    --fxm-muted-rgb: 134 117 123;
    /* scrims and shadows: the ink on a light page, a near-black on a dark one */
    --fxm-shade-rgb: 42 18 27;
    /* the hero band behind the restaurant's logo, and the assistant */
    --fxm-hero-start: #2b0a13;
    --fxm-hero-mid: #8f0028;
    --fxm-hero-end: #ba0034;
    --fxm-ai-start: #7e2dba;
    --fxm-ai-end: #ba0034;
    /* the states, kept apart from the restaurant's colour so a warning reads */
    --fxm-success-rgb: 0 107 94;
    --fxm-warning-rgb: 146 88 0;
    --fxm-danger-rgb: 186 26 26;
    --fxm-warning-deep-rgb: 90 56 0;
    --fxm-info-rgb: 29 111 135;

    /* ── derived: nothing below this line is a choice ── */
    --fxm-accent: rgb(var(--fxm-accent-rgb));
    --fxm-accent-strong: rgb(var(--fxm-accent-strong-rgb));
    --fxm-accent-deep: rgb(var(--fxm-accent-deep-rgb));
    --fxm-accent-soft: rgb(var(--fxm-accent-rgb) / 0.07);
    --fxm-accent-soft-2: rgb(var(--fxm-accent-rgb) / 0.14);
    --fxm-accent-line: rgb(var(--fxm-accent-rgb) / 0.2);
    --fxm-accent-line-2: rgb(var(--fxm-accent-rgb) / 0.34);
    --fxm-accent-ring: rgb(var(--fxm-accent-rgb) / 0.3);
    --fxm-accent-dim: rgb(var(--fxm-accent-rgb) / 0.42);
    --fxm-on-accent: rgb(var(--fxm-on-accent-rgb));
    --fxm-on-accent-soft: rgb(var(--fxm-on-accent-rgb) / 0.74);
    --fxm-on-accent-line: rgb(var(--fxm-on-accent-rgb) / 0.26);
    --fxm-on-accent-fill: rgb(var(--fxm-on-accent-rgb) / 0.13);
    --fxm-bg: rgb(var(--fxm-bg-rgb));
    --fxm-surface: rgb(var(--fxm-surface-rgb));
    --fxm-ink: rgb(var(--fxm-ink-rgb));
    --fxm-muted: rgb(var(--fxm-muted-rgb));
    --fxm-line: rgb(var(--fxm-ink-rgb) / 0.13);
    --fxm-card-line: rgb(var(--fxm-ink-rgb) / 0.09);
    --fxm-soft-line: rgb(var(--fxm-ink-rgb) / 0.07);
    /* a dish photo sits on white so a packshot and a plate look alike */
    --fxm-photo-bg: rgb(var(--fxm-surface-rgb));
    --fxm-glass: rgb(var(--fxm-surface-rgb) / 0.94);
    --fxm-header-bg: rgb(var(--fxm-surface-rgb) / 0.9);
    --fxm-scrim: rgb(var(--fxm-shade-rgb) / 0.52);
    --fxm-shadow: 0 1px 2px rgb(var(--fxm-shade-rgb) / 0.05), 0 12px 28px -20px rgb(var(--fxm-shade-rgb) / 0.3);
    --fxm-shadow-hover: 0 1px 2px rgb(var(--fxm-shade-rgb) / 0.06), 0 20px 36px -22px rgb(var(--fxm-shade-rgb) / 0.42);
    --fxm-lift: 0 18px 40px -18px rgb(var(--fxm-shade-rgb) / 0.45);
    --fxm-accent-lift: 0 12px 26px -12px rgb(var(--fxm-accent-strong-rgb) / 0.5);
    --fxm-focus-ring: 0 0 0 3px var(--fxm-accent-ring);
    --fxm-success: rgb(var(--fxm-success-rgb));
    --fxm-warning: rgb(var(--fxm-warning-rgb));
    --fxm-warning-deep: rgb(var(--fxm-warning-deep-rgb));
    --fxm-danger: rgb(var(--fxm-danger-rgb));
    --fxm-info: rgb(var(--fxm-info-rgb));
    --fxm-success-soft: rgb(var(--fxm-success-rgb) / 0.1);
    --fxm-warning-soft: rgb(var(--fxm-warning-rgb) / 0.1);
    --fxm-danger-soft: rgb(var(--fxm-danger-rgb) / 0.08);
    --fxm-info-soft: rgb(var(--fxm-info-rgb) / 0.1);

    /* the shared Flowiax pieces (.fx-btn, .fx-chip, .fx-input, .fx-pill,
       .fx-segment, .fx-toast) follow the restaurant inside the customer menu */
    --fx-primary: var(--fxm-accent);
    --fx-primary-strong: var(--fxm-accent-strong);
    --fx-primary-deep: var(--fxm-accent-deep);
    --fx-primary-soft: var(--fxm-accent-soft);
    --fx-on-primary: var(--fxm-on-accent);
    --fx-app-bg: var(--fxm-bg);
    --fx-surface: var(--fxm-surface);
    --fx-ink: var(--fxm-ink);
    --fx-muted: var(--fxm-muted);
    --fx-line: var(--fxm-line);
    --fx-card-line: var(--fxm-card-line);
    --fx-soft-line: var(--fxm-soft-line);
    --fx-success: var(--fxm-success);
    --fx-warning: var(--fxm-warning);
    --fx-danger: var(--fxm-danger);
    --fx-info: var(--fxm-info);
    --fx-success-soft: var(--fxm-success-soft);
    --fx-warning-soft: var(--fxm-warning-soft);
    --fx-danger-soft: var(--fxm-danger-soft);
    --fx-info-soft: var(--fxm-info-soft);
    --fx-shadow: var(--fxm-shadow);
    --fx-focus-ring: var(--fxm-focus-ring);
}
/* the few shared pieces that still name the old teal by hand */
.fxm-body .fx-btn-secondary { border-color: var(--fxm-accent-line); }
.fxm-body .fx-btn-soft:hover:not(:disabled) { background: var(--fxm-accent-soft-2); }
.fxm-body .fx-icon-btn, .fxm-body .fx-input, .fxm-body .fx-select { border-color: var(--fxm-line); }
.fxm-body .fx-icon-btn { color: var(--fxm-accent-strong); }
.fxm-body .fx-chip { border-color: var(--fxm-line); }
.fxm-body .fx-segment button[aria-pressed="true"] { box-shadow: 0 1px 2px rgb(var(--fxm-shade-rgb) / 0.16); }
.fxm-body .fx-pill { background: rgb(var(--fxm-muted-rgb) / 0.1); }
.fxm-body .fx-btn-danger { border-color: rgb(var(--fxm-danger-rgb) / 0.3); }
.fxm-body .fx-toast { box-shadow: 0 12px 30px -12px rgb(var(--fxm-shade-rgb) / 0.6); }

.fxm-body { min-height: 100vh; min-height: 100dvh; background: var(--fxm-bg); font-size: 15px; }
.fxm-body.fxm-locked { overflow: hidden; }
.fxm-money { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; white-space: nowrap; }
html[dir="rtl"] .fxm-flip { transform: scaleX(-1); }
.fx-ic.is-filled { fill: currentColor; }
.fxm-wide-only { display: none !important; }
.fxm-link { border: 0; background: transparent; padding: 6px 4px; color: var(--fxm-accent); font-weight: 700; font-size: 13px; }
.fxm-link:hover { color: var(--fxm-accent-strong); text-decoration: underline; }
.fxm-error { color: var(--fxm-danger); font-weight: 700; font-size: 13px; }
h1, h2, h3, h4 { margin: 0; }
textarea { font: inherit; color: inherit; }
p { margin: 0; }

/* ── Top bar ───────────────────────────────────────────────────────────────
   A light, quiet bar so that the restaurant's own logo is the loudest thing on
   it (owner, 2026-09-19: «I want the restaurant's logo shown nicely»): a white
   tile of the logo's own ratio, the restaurant's name, then the table and the
   people, and the customer's buttons at the end. */
.fxm-top {
    position: sticky; top: 0; z-index: 40;
    padding: max(8px, env(safe-area-inset-top, 0px)) 12px 8px;
    background: var(--fxm-header-bg);
    -webkit-backdrop-filter: saturate(1.6) blur(14px);
    backdrop-filter: saturate(1.6) blur(14px);
    color: var(--fxm-ink);
    border-bottom: 1px solid var(--fxm-line);
    box-shadow: 0 10px 24px -22px rgb(var(--fxm-shade-rgb) / 0.55);
}
.fxm-top-inner { max-width: 1560px; margin-inline: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; }
.fxm-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
/* the logo keeps its own ratio: a tall one fills the tile, a wide one runs to
   180 px — never cropped, never stretched (app.js fitLogo) */
.fxm-brand-logo {
    height: 48px; min-width: 48px; max-width: 180px; flex: none;
    padding: 4px 6px; border-radius: 13px; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--fxm-surface); border: 1px solid var(--fxm-line);
    box-shadow: 0 2px 6px -4px rgb(var(--fxm-shade-rgb) / 0.4);
}
.fxm-brand-logo img { height: 100%; width: auto; max-width: 100%; object-fit: contain; display: block; }
/* no logo: the restaurant's initials in its own colour */
.fxm-mono {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; height: 100%; color: var(--fxm-accent);
    font-weight: 800; letter-spacing: 0.02em; font-size: 19px; line-height: 1;
}
.fxm-brand-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.fxm-brand-text strong { font-size: 16.5px; font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fxm-brand-text span { font-size: 12.5px; font-weight: 600; color: var(--fxm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fxm-top-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.fxm-top-icon, .fxm-top-btn {
    height: 44px; min-width: 44px; flex: none;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    border: 1px solid var(--fxm-line); border-radius: 13px;
    background: var(--fxm-surface); color: var(--fxm-ink);
    font-size: 13px; font-weight: 700;
}
.fxm-top-btn { padding-inline: 14px; color: var(--fxm-accent-strong); border-color: var(--fxm-accent-line); }
.fxm-top-icon:hover, .fxm-top-btn:hover { background: var(--fxm-accent-soft); border-color: var(--fxm-accent-line); color: var(--fxm-accent-strong); }
.fxm-top :focus-visible { box-shadow: var(--fxm-focus-ring); }
/* the assistant carries its own gradient wherever it appears */
#fxm-top-ai { border: 0; background: linear-gradient(135deg, var(--fxm-ai-start), var(--fxm-ai-end)); color: var(--fxm-on-accent); }
#fxm-top-ai:hover { filter: brightness(1.08); }
.fxm-lang-btn { padding-inline: 10px; }
.fxm-lang-code { font-size: 12px; font-weight: 800; letter-spacing: 0.02em; }
.fxm-staff-btn { color: var(--fxm-muted); border-style: dashed; }
.fxm-staff-btn:hover, .fxm-staff-btn:focus-visible { color: var(--fxm-accent-strong); }
.fxm-avatar {
    width: 32px; height: 32px; border-radius: 50%; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--fxm-accent); color: var(--fxm-on-accent); font-weight: 800; font-size: 14px;
}
.fxm-profile-btn { padding-inline: 6px; }
.fxm-profile-name { display: none; max-width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* popover menus (language, profile) */
.fxm-pop { position: relative; }
.fxm-pop-menu {
    position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 50; min-width: 190px;
    display: flex; flex-direction: column; padding: 6px;
    background: var(--fxm-surface); color: var(--fxm-ink); border: 1px solid var(--fxm-card-line);
    border-radius: 14px; box-shadow: var(--fxm-lift);
}
.fxm-pop-menu button {
    min-height: 44px; padding-inline: 12px; border: 0; border-radius: 10px; background: transparent;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: 14px; font-weight: 600; text-align: start; color: var(--fxm-ink);
}
.fxm-pop-menu button:hover { background: var(--fxm-accent-soft); }
.fxm-pop-menu button .fx-ic { color: var(--fxm-accent); }
.fxm-pop-menu button[aria-checked="false"] .fx-ic { visibility: hidden; }
.fxm-pop-menu .is-danger { color: var(--fxm-danger); }
.fxm-pop-menu .is-danger .fx-ic { color: var(--fxm-danger); }
.fxm-pop-menu hr { border: 0; border-top: 1px solid var(--fxm-soft-line); margin: 4px 6px; }
.fxm-pop-head { padding: 8px 12px 6px; font-size: 12px; color: var(--fxm-muted); font-weight: 700; }

/* ── Table state banner ────────────────────────────────────────────────── */
.fxm-status-wrap { max-width: 1560px; margin-inline: auto; padding-inline: 12px; }
.fxm-status {
    margin-top: 12px; padding: 12px 14px; border-radius: 16px;
    display: flex; align-items: center; gap: 12px;
    background: var(--fxm-surface); border: 1px solid var(--fxm-card-line); box-shadow: var(--fxm-shadow);
}
.fxm-status-icon { width: 40px; height: 40px; flex: none; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--fxm-info-soft); color: var(--fxm-info); }
.fxm-status-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fxm-status-text strong { font-size: 14.5px; font-weight: 800; }
.fxm-status-text span { font-size: 13px; color: var(--fxm-muted); }
.fxm-status .fx-btn { flex: none; }
.fxm-status.is-ready { border-color: var(--fxm-accent-ring); background: linear-gradient(var(--fxm-accent-soft), var(--fxm-surface)); }
.fxm-status.is-ready .fxm-status-icon { background: var(--fxm-accent); color: var(--fxm-on-accent); }
.fxm-status.is-paused { border-color: rgb(var(--fxm-warning-rgb) / 0.3); }
.fxm-status.is-paused .fxm-status-icon { background: var(--fxm-warning-soft); color: var(--fxm-warning); }

@media (max-width: 479px) {
    .fxm-status { flex-wrap: wrap; }
    .fxm-status .fx-btn { flex: 1 1 100%; }
}

/* ── Shell ─────────────────────────────────────────────────────────────── */
.fxm-shell { max-width: 1560px; margin-inline: auto; }
.fxm-side, .fxm-panel { display: none !important; }
.fxm-main { min-width: 0; padding: 4px 12px 24px; }
.fxm-tab-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 12px; }
.fxm-tab-head h2 { font-size: 20px; font-weight: 800; }
.fxm-tabs { display: none !important; }

/* ── Hero: the restaurant's cover ──────────────────────────────────────────
   At the head of the menu tab, in table mode and browsing alike: the logo
   large on a white tile, the restaurant's name, one short line, the table and
   the people, and the assistant. One warm gradient — no decorative circles
   (the old page's glows), nothing over the logo, nothing cropped. */
.fxm-hero {
    position: relative; overflow: hidden; margin-top: 12px; padding: 24px 18px 22px; border-radius: var(--fxm-radius-lg);
    display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center;
    background:
        radial-gradient(125% 85% at 85% -12%, rgb(var(--fxm-on-accent-rgb) / 0.17), transparent 62%),
        linear-gradient(152deg, var(--fxm-hero-start) 0%, var(--fxm-hero-mid) 54%, var(--fxm-hero-end) 100%);
    color: var(--fxm-on-accent);
    box-shadow: 0 20px 44px -30px rgb(var(--fxm-shade-rgb) / 0.75);
}
.fxm-hero::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid rgb(var(--fxm-on-accent-rgb) / 0.1); pointer-events: none; }
/* app.js fitLogo gives the tile the logo's own shape, read from the picture
   itself; the caps here keep it a PLAQUE seated in the band and never a white
   sticker laid over it (owner, 2026-09-21: «the logo does not look good»):
   a hairline, a soft halo of the band's own light, one deep shadow. */
.fxm-hero-logo {
    width: 96px; height: 96px; flex: none;
    max-width: min(180px, 56vw); max-height: 68px;
    padding: 9px 13px; border-radius: 16px; overflow: hidden;
    background: linear-gradient(180deg, rgb(var(--fxm-surface-rgb) / 0.99), rgb(var(--fxm-surface-rgb) / 0.92));
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow:
        0 0 0 1px rgb(var(--fxm-shade-rgb) / 0.07),
        0 0 0 5px rgb(var(--fxm-on-accent-rgb) / 0.1),
        0 14px 30px -18px rgb(var(--fxm-shade-rgb) / 0.8);
    margin-bottom: 14px;
}
.fxm-hero-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
.fxm-hero .fxm-mono { font-size: 34px; }
.fxm-hero-body { min-width: 0; }
.fxm-hero h1 { font-size: 24px; font-weight: 800; line-height: 1.22; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.fxm-hero p {
    position: relative; margin-top: 10px; padding-top: 10px;
    font-size: 12px; font-weight: 700; color: var(--fxm-on-accent-soft);
}
.fxm-hero p::before {
    content: ""; position: absolute; top: 0; inset-inline-start: 50%; transform: translateX(-50%);
    width: 46px; height: 1px; background: rgb(var(--fxm-on-accent-rgb) / 0.36);
}
html[dir="ltr"] .fxm-hero p { letter-spacing: 0.18em; text-transform: uppercase; }
/* the table and the people, in table mode (app.js renderHeroChips) */
.fxm-hero-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 12px; }
.fxm-hero-chips[hidden] { display: none; }
.fxm-hero-chip {
    display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding-inline: 12px; border-radius: 999px;
    background: rgb(var(--fxm-on-accent-rgb) / 0.13); border: 1px solid rgb(var(--fxm-on-accent-rgb) / 0.24);
    font-size: 12.5px; font-weight: 700; color: var(--fxm-on-accent);
}
.fxm-hero-chip .fx-ic { width: 15px; height: 15px; opacity: 0.85; }
.fxm-hero-ai {
    flex: none; margin-top: 14px; min-height: 44px; padding-inline: 18px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid rgb(var(--fxm-on-accent-rgb) / 0.34); background: rgb(var(--fxm-on-accent-rgb) / 0.14); color: var(--fxm-on-accent);
    font-size: 14px; font-weight: 700;
}
.fxm-hero-ai:hover { background: rgb(var(--fxm-on-accent-rgb) / 0.24); }
.fxm-hero :focus-visible { box-shadow: 0 0 0 3px rgb(var(--fxm-on-accent-rgb) / 0.6); }
/* With room for it the cover lies down: the logo, the name beside it, the assistant at the end.
   app.js layoutHero decides from the hero's OWN width — a page that also shows the cart beside
   the menu leaves the middle column narrow, and a wide logo eats more of it than a square one. */
.fxm-hero.is-row { flex-direction: row; align-items: center; gap: 22px; text-align: start; padding: 20px 26px; }
.fxm-hero.is-row .fxm-hero-logo { margin-bottom: 0; }
/* lying down, a hairline parts the plaque from the name: the two read as one
   composed cover instead of a picture pasted next to a title */
.fxm-hero.is-row .fxm-hero-body {
    flex: 1 1 auto; padding-inline-start: 22px;
    border-inline-start: 1px solid rgb(var(--fxm-on-accent-rgb) / 0.17);
}
.fxm-hero.is-row h1 { font-size: 28px; }
.fxm-hero.is-row p::before { inset-inline-start: 0; transform: none; }
.fxm-hero.is-row .fxm-hero-chips { justify-content: flex-start; }
.fxm-hero.is-row .fxm-hero-ai { margin-top: 0; }

/* ── Banners ───────────────────────────────────────────────────────────── */
.fxm-banners {
    display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 12px -12px 0; padding: 0 12px 4px; scroll-padding-inline: 12px;
}
.fxm-banners::-webkit-scrollbar { display: none; }
.fxm-banner {
    position: relative; flex: 0 0 min(86%, 380px); min-height: 136px; overflow: hidden; scroll-snap-align: start;
    display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 16px;
    border-radius: 18px; color: var(--fxm-on-accent);
    background: linear-gradient(135deg, var(--fxm-accent), var(--fxm-accent-deep));
    background-size: cover; background-position: center;
}
.fxm-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(var(--fxm-shade-rgb) / 0.78), rgb(var(--fxm-shade-rgb) / 0.05) 70%); }
.fxm-banner > * { position: relative; }
.fxm-banner > .fxm-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fxm-banner.has-image::before { z-index: 0; }
.fxm-banner.has-image > :not(.fxm-banner-img) { z-index: 1; }
.fxm-banner.is-dark { background-color: var(--fxm-ink); background-image: linear-gradient(135deg, var(--fxm-ink), var(--fxm-accent-deep)); }
.fxm-banner.is-green { background-image: linear-gradient(135deg, var(--fxm-success), var(--fxm-accent-deep)); }
.fxm-banner.is-amber { background-image: linear-gradient(135deg, var(--fxm-warning), var(--fxm-warning-deep)); }
.fxm-banner.has-image { background-color: var(--fxm-accent-deep); }
.fxm-banner-badge { align-self: flex-start; padding: 3px 10px; border-radius: 999px; background: rgb(var(--fxm-on-accent-rgb) / 0.22); font-size: 12px; font-weight: 800; }
.fxm-banner strong { font-size: 18px; font-weight: 800; line-height: 1.25; }
.fxm-banner span.fxm-banner-sub { font-size: 13px; color: rgb(var(--fxm-on-accent-rgb) / 0.85); }

/* ── Search and categories ─────────────────────────────────────────────────
   The categories must work at every width and never clip a name (owner,
   2026-09-19: the old column cut them): below 1024 px they are chips that
   scroll, each with the number of dishes; from 1024 px they are the side
   column, whose names wrap over two lines instead of being cut. */
.fxm-search { position: relative; margin-top: 16px; }
.fxm-search > .fx-ic { position: absolute; inset-inline-start: 15px; top: 15px; color: var(--fxm-muted); pointer-events: none; }
.fxm-search .fx-input {
    height: 50px; border-radius: 15px; padding-inline: 46px; font-size: 15px;
    background: var(--fxm-surface); border-color: var(--fxm-line); box-shadow: var(--fxm-shadow);
}
.fxm-search .fx-input::placeholder { color: var(--fxm-muted); opacity: 0.85; }
.fxm-search .fx-input::-webkit-search-cancel-button { display: none; }
.fxm-search-clear {
    position: absolute; inset-inline-end: 5px; top: 5px; width: 40px; height: 40px; border: 0; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--fxm-muted);
}
.fxm-search-clear:hover { background: var(--fxm-accent-soft); color: var(--fxm-accent-strong); }

.fxm-cats-bar {
    position: sticky; top: var(--fxm-top-h); z-index: 20;
    margin: 10px -12px 0; padding: 9px 12px;
    background: var(--fxm-bg);
}
/* it is clear that the chips go on past the edge, without a scrollbar over them */
.fxm-cats-bar::after {
    content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; width: 26px; pointer-events: none;
    background: linear-gradient(to left, var(--fxm-bg), rgb(var(--fxm-bg-rgb) / 0));
}
html[dir="rtl"] .fxm-cats-bar::after { background: linear-gradient(to right, var(--fxm-bg), rgb(var(--fxm-bg-rgb) / 0)); }
.fxm-cats-bar.is-stuck { box-shadow: 0 10px 14px -14px rgb(var(--fxm-shade-rgb) / 0.5); }
.fxm-chips { gap: 8px; scroll-snap-type: x proximity; scroll-padding-inline: 12px; }
.fxm-chips .fx-chip {
    height: 42px; padding-inline: 15px 8px; font-size: 14px; font-weight: 700; scroll-snap-align: start;
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--fxm-surface); border-color: var(--fxm-line); box-shadow: var(--fxm-shadow);
}
.fxm-chips .fx-chip:hover { border-color: var(--fxm-accent-line); color: var(--fxm-accent-strong); }
.fxm-chips .fx-chip.is-on { background: var(--fxm-accent); border-color: var(--fxm-accent); color: var(--fxm-on-accent); box-shadow: var(--fxm-accent-lift); }
/* the number of dishes, as a small pill inside the chip */
.fxm-chip-count {
    flex: none; min-width: 26px; height: 24px; padding-inline: 7px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--fxm-accent-soft); color: var(--fxm-accent-strong);
    font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.fxm-chips .fx-chip.is-on .fxm-chip-count { background: rgb(var(--fxm-on-accent-rgb) / 0.22); color: var(--fxm-on-accent); }
/* the second row: the categories under the chosen top one (sub-categories, fx_cat_tree.js) */
.fxm-subchips { margin-top: 8px; }
.fxm-subchips .fx-chip {
    height: 36px; padding-inline: 12px 6px; font-size: 13px; font-weight: 600; box-shadow: none;
    background: var(--fxm-accent-soft); border-color: transparent; color: var(--fxm-accent-strong);
}
.fxm-subchips .fx-chip.is-on { background: var(--fxm-surface); border-color: var(--fxm-accent); color: var(--fxm-accent-strong); box-shadow: none; }
.fxm-subchips .fx-chip.is-on .fxm-chip-count { background: var(--fxm-accent); color: var(--fxm-on-accent); }

/* ── Recommendations ───────────────────────────────────────────────────── */
.fxm-recs { margin-top: 14px; }
.fxm-recs-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.fxm-recs-head .fx-ic { color: var(--fxm-accent); }
.fxm-recs-head h2 { font-size: 18px; font-weight: 800; letter-spacing: -0.015em; }
.fxm-recs-row { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: -12px; padding: 2px 12px 6px; scroll-padding-inline: 12px; }
.fxm-recs-row::-webkit-scrollbar { display: none; }
.fxm-rec {
    position: relative; flex: 0 0 min(78%, 300px); scroll-snap-align: start;
    display: flex; align-items: center; gap: 12px; padding: 10px;
    background: var(--fxm-surface); border: 1px solid var(--fxm-card-line); border-radius: 18px; box-shadow: var(--fxm-shadow);
}
.fxm-rec-media { width: 68px; height: 68px; flex: none; border-radius: 12px; overflow: hidden; background: var(--fxm-accent-soft); color: var(--fxm-accent-dim); display: inline-flex; align-items: center; justify-content: center; }
.fxm-rec-media { background: var(--fxm-photo-bg); border: 1px solid var(--fxm-soft-line); }
.fxm-rec-media img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.fxm-rec-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fxm-rec-body .fxm-card-open { font-size: 14px; }
.fxm-rec-tag { align-self: flex-start; font-size: 11px; font-weight: 800; color: var(--fxm-accent-strong); background: var(--fxm-accent-soft); border-radius: 999px; padding: 2px 8px; }

/* ── Product list ──────────────────────────────────────────────────────── */
.fxm-section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 20px 0 12px; }
.fxm-section-title { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.fxm-section-title h2 { font-size: 19px; font-weight: 800; letter-spacing: -0.015em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fxm-count {
    flex: none; height: 23px; padding-inline: 9px; border-radius: 999px;
    display: inline-flex; align-items: center;
    background: var(--fxm-accent-soft); color: var(--fxm-accent-strong);
    font-size: 12px; font-weight: 800; white-space: nowrap;
}
.fxm-view { flex: none; padding: 3px; background: var(--fxm-accent-soft); }
.fxm-view button { min-height: 36px; min-width: 40px; padding-inline: 8px; }

.fxm-products { display: grid; gap: 14px; }
.fxm-products.is-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fxm-products.is-list { grid-template-columns: minmax(0, 1fr); gap: 10px; }

.fxm-card {
    position: relative; min-width: 0; overflow: hidden;
    display: flex; flex-direction: column;
    background: var(--fxm-surface); border: 1px solid var(--fxm-card-line); border-radius: 18px; box-shadow: var(--fxm-shadow);
    transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
}
.fxm-card:hover { border-color: var(--fxm-accent-line); box-shadow: var(--fxm-shadow-hover); transform: translateY(-2px); }
/* Product pictures are a mix of packshots (a bottle, a box on white) and plated food. Owner, 2026-09-16:
   show them whole and the same size — one frame ratio, the picture contained on a white ground, never
   cropped or blown up. */
.fxm-card-media { position: relative; aspect-ratio: 4 / 3; background: var(--fxm-photo-bg); border-bottom: 1px solid var(--fxm-soft-line); overflow: hidden; }
.fxm-card-media img { position: relative; width: 100%; height: 100%; object-fit: contain; padding: 10px; display: block; transition: transform 0.4s; }
.fxm-card.no-img .fxm-card-media { background: linear-gradient(160deg, var(--fxm-accent-soft), rgb(var(--fxm-bg-rgb))); }
.fxm-card:hover .fxm-card-media img { transform: scale(1.03); }
.fxm-card-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--fxm-accent-dim); }
.fxm-card-ph .fx-ic { width: 40px; height: 40px; stroke-width: 1.4; }
/* the chef's dishes wear a small mark on the photo */
.fxm-card-badge {
    position: absolute; z-index: 2; top: 9px; inset-inline-start: 9px;
    display: inline-flex; align-items: center; gap: 5px; height: 26px; padding-inline: 9px; border-radius: 999px;
    background: var(--fxm-accent); color: var(--fxm-on-accent);
    font-size: 11px; font-weight: 800; box-shadow: var(--fxm-accent-lift);
}
.fxm-card-badge .fx-ic { width: 13px; height: 13px; }
.fxm-card-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 5px; padding: 11px 13px 13px; min-width: 0; }
.fxm-card-name { font-size: 15px; font-weight: 700; line-height: 1.35; margin: 0; }
.fxm-card-open {
    all: unset; cursor: pointer; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    color: var(--fxm-ink); font: inherit; font-weight: 700; line-height: 1.35; overflow-wrap: anywhere;
}
.fxm-card-open::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.fxm-card-open:focus-visible { box-shadow: none; }
.fxm-card-open:focus-visible::after { box-shadow: inset 0 0 0 3px var(--fxm-accent-dim); border-radius: inherit; }
.fxm-card-desc { display: none; font-size: 13px; color: var(--fxm-muted); line-height: 1.45; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fxm-card-foot { margin-top: auto; padding-top: 8px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fxm-price { font-size: 16px; font-weight: 800; color: var(--fxm-accent-strong); letter-spacing: -0.01em; }
.fxm-add {
    position: relative; z-index: 2; width: 44px; height: 44px; flex: none; border: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--fxm-accent); color: var(--fxm-on-accent); box-shadow: var(--fxm-accent-lift);
}
.fxm-add:hover { background: var(--fxm-accent-strong); }
.fxm-add:active { transform: scale(0.94); }
.fxm-add .fx-ic { stroke-width: 2.4; }
.fxm-add.is-busy .fx-ic { animation: fx-spin 0.9s linear infinite; }
.fxm-fav {
    position: absolute; z-index: 2; top: 8px; inset-inline-end: 8px; width: 36px; height: 36px; border: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--fxm-glass); color: var(--fxm-muted); box-shadow: 0 2px 8px -3px rgb(var(--fxm-shade-rgb) / 0.35);
}
.fxm-fav:hover { color: var(--fxm-accent); }
.fxm-fav .fx-ic { width: 18px; height: 18px; }
.fxm-fav.is-on { color: var(--fxm-accent); }
.fxm-fav.is-on .fx-ic { fill: currentColor; }

/* list view: text first, a square photo at the end */
.fxm-products.is-list .fxm-card { flex-direction: row-reverse; align-items: stretch; }
.fxm-products.is-list .fxm-card-media { width: 112px; min-height: 112px; aspect-ratio: auto; flex: none; margin: 10px; margin-inline-start: 0; border-radius: 12px; }
.fxm-products.is-list .fxm-card.no-img .fxm-card-media { width: 0; margin: 0; min-height: 0; overflow: visible; background: none; }
.fxm-products.is-list .fxm-card.no-img .fxm-card-ph { display: none; }
.fxm-products.is-list .fxm-card.no-img .fxm-card-body { padding-inline-end: 52px; }
.fxm-products.is-list .fxm-card-desc { display: -webkit-box; }
.fxm-products.is-list .fxm-card-body { padding: 12px 14px; }
.fxm-products.is-list .fxm-fav { top: 6px; inset-inline-end: 6px; width: 34px; height: 34px; }
.fxm-products.is-list .fxm-card.no-img .fxm-fav { top: 10px; inset-inline-end: 10px; background: var(--fxm-accent-soft); box-shadow: none; }
/* the small photo of the list has no room for the words: the chef's mark keeps only its star,
   and its name stays for a screen reader */
.fxm-products.is-list .fxm-card-badge { top: 6px; inset-inline-start: 6px; width: 26px; padding: 0; justify-content: center; }
.fxm-products.is-list .fxm-card-badge-text {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.fxm-products.is-list .fxm-card.no-img .fxm-card-badge { display: none; }

.fxm-skel { pointer-events: none; }
.fxm-skel .fxm-card-media, .fxm-skel .fxm-card-body span {
    background: linear-gradient(90deg, rgb(var(--fxm-accent-rgb) / 0.06), rgb(var(--fxm-accent-rgb) / 0.12), rgb(var(--fxm-accent-rgb) / 0.06));
    background-size: 200% 100%; animation: fxm-shimmer 1.4s ease-in-out infinite;
}
.fxm-skel .fxm-card-body span { display: block; height: 12px; border-radius: 6px; width: 80%; }
.fxm-skel .fxm-card-body span + span { width: 45%; margin-top: 6px; }
@keyframes fxm-shimmer { to { background-position: -200% 0; } }

.fxm-empty { grid-column: 1 / -1; padding: 40px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--fxm-muted); }
.fxm-empty .fx-ic { width: 44px; height: 44px; color: var(--fxm-accent-ring); stroke-width: 1.4; }
.fxm-empty strong { color: var(--fxm-ink); font-size: 16px; }

/* ── Order lines, totals, kitchen progress ─────────────────────────────── */
.fxm-block { background: var(--fxm-surface); border: 1px solid var(--fxm-card-line); border-radius: 16px; box-shadow: var(--fxm-shadow); padding: 14px; }
.fxm-block + .fxm-block { margin-top: 12px; }
.fxm-block-title { font-size: 12.5px; font-weight: 800; color: var(--fxm-muted); margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.fxm-lines { display: flex; flex-direction: column; }
.fxm-line { display: flex; align-items: flex-start; gap: 10px; padding: 12px 0; }
.fxm-line + .fxm-line { border-top: 1px solid var(--fxm-soft-line); }
.fxm-line-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fxm-line-main strong { font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.fxm-line-main em { font-style: normal; font-size: 12.5px; color: var(--fxm-muted); display: inline-flex; gap: 4px; align-items: center; }
.fxm-line-main .fx-pill { align-self: flex-start; }
.fxm-line-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.fxm-line-amount { font-size: 14.5px; font-weight: 800; }
.fxm-line-qty { font-size: 13px; font-weight: 700; color: var(--fxm-muted); font-variant-numeric: tabular-nums; }
.fxm-qty { display: inline-flex; align-items: center; gap: 4px; }
.fxm-qty button {
    width: 40px; height: 40px; border: 0; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--fxm-accent-soft); color: var(--fxm-accent-strong);
}
.fxm-qty button:hover:not(:disabled) { background: var(--fxm-accent-soft-2); }
.fxm-qty button.is-plus { background: var(--fxm-accent); color: var(--fxm-on-accent); }
.fxm-qty button.is-plus:hover:not(:disabled) { background: var(--fxm-accent-strong); }
.fxm-qty button.is-remove { color: var(--fxm-danger); background: var(--fxm-danger-soft); }
.fxm-qty button:disabled { opacity: 0.45; }
.fxm-qty output { min-width: 30px; text-align: center; font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; }
.fxm-qty.is-lg button { width: 48px; height: 48px; }
.fxm-qty.is-lg output { min-width: 36px; font-size: 18px; }

.fxm-totals { display: flex; flex-direction: column; gap: 6px; }
.fxm-total-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--fxm-muted); }
.fxm-total-row .fxm-money { color: var(--fxm-ink); font-weight: 700; }
.fxm-total-row.is-grand { padding-top: 8px; margin-top: 2px; border-top: 1px solid var(--fxm-soft-line); color: var(--fxm-ink); font-weight: 800; font-size: 16px; }
.fxm-total-row.is-grand .fxm-money { font-size: 20px; font-weight: 800; color: var(--fxm-accent-strong); }
.fxm-order-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.fxm-order-actions .fxm-span { grid-column: 1 / -1; }

.fxm-steps { display: flex; align-items: flex-start; }
.fxm-step { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; position: relative; min-width: 0; }
.fxm-step + .fxm-step::before {
    content: ""; position: absolute; top: 19px; inset-inline-end: 50%; width: 100%; height: 3px; border-radius: 3px;
    background: var(--fxm-line); z-index: 0;
}
.fxm-step.is-done + .fxm-step.is-done::before, .fxm-step.is-done + .fxm-step.is-current::before { background: var(--fxm-accent); }
.fxm-step-dot {
    position: relative; z-index: 1; width: 40px; height: 40px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--fxm-surface); border: 2px solid var(--fxm-line); color: var(--fxm-muted);
}
.fxm-step.is-done .fxm-step-dot { background: var(--fxm-accent); border-color: var(--fxm-accent); color: var(--fxm-on-accent); }
.fxm-step.is-current .fxm-step-dot { box-shadow: 0 0 0 5px var(--fxm-accent-soft-2); }
.fxm-step span { font-size: 12px; font-weight: 600; color: var(--fxm-muted); }
.fxm-step.is-done span { color: var(--fxm-ink); }
.fxm-step.is-current span { font-weight: 800; }
.fxm-waiter-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--fxm-muted); }

/* ── History ───────────────────────────────────────────────────────────── */
.fxm-hist { display: flex; flex-direction: column; gap: 12px; }
.fxm-hist-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.fxm-hist-head strong { font-size: 15px; display: block; }
.fxm-hist-head time { font-size: 12.5px; color: var(--fxm-muted); }
.fxm-hist-side { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.fxm-hist-lines { margin: 10px 0 12px; display: flex; flex-direction: column; gap: 4px; font-size: 13.5px; }
.fxm-hist-lines div { display: flex; justify-content: space-between; gap: 10px; }
.fxm-hist-lines span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fxm-hist-more { font-size: 12.5px; color: var(--fxm-muted); }

/* ── Order panel (large screens) ───────────────────────────────────────── */
.fxm-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 16px 8px; }
.fxm-panel-head h2 { font-size: 17px; font-weight: 800; }
.fxm-panel-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 16px; }
.fxm-panel-foot { padding: 12px 16px 16px; border-top: 1px solid var(--fxm-soft-line); display: flex; flex-direction: column; gap: 10px; }
.fxm-panel-note { margin: 4px 0 12px; padding: 12px; border-radius: 12px; background: var(--fxm-accent-soft); color: var(--fxm-accent-strong); font-size: 13px; font-weight: 600; display: flex; gap: 8px; }
.fxm-panel-note.is-paused { background: var(--fxm-warning-soft); color: var(--fxm-warning); }

/* ── Bottom bar and order bar (phones and tablets) ─────────────────────── */
.fxm-nav {
    position: fixed; inset-inline: 0; bottom: 0; z-index: 45;
    display: flex; height: calc(var(--fxm-nav-h) + var(--fxm-safe-b)); padding-bottom: var(--fxm-safe-b);
    background: var(--fxm-surface); border-top: 1px solid var(--fxm-line); box-shadow: 0 -8px 24px -18px rgb(var(--fxm-shade-rgb) / 0.4);
}
.fxm-nav button {
    position: relative; flex: 1 1 0; min-width: 0; border: 0; background: transparent; color: var(--fxm-muted);
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font-size: 11.5px; font-weight: 700; padding-inline: 2px;
}
.fxm-nav button span:not(.fx-badge) { max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fxm-nav button .fx-ic { position: relative; z-index: 1; }
.fxm-nav button[aria-pressed="true"] { color: var(--fxm-accent-strong); }
/* the chosen tab wears a soft pill behind its icon rather than a bar overhead */
.fxm-nav button[aria-pressed="true"]::before {
    content: ""; position: absolute; top: 7px; width: 44px; height: 26px; border-radius: 999px;
    background: var(--fxm-accent-soft-2);
}
.fxm-nav .fx-badge { position: absolute; top: 6px; inset-inline-start: calc(50% + 6px); }
body.has-nav .fxm-main { padding-bottom: calc(var(--fxm-nav-h) + var(--fxm-safe-b) + 24px); }
body.has-nav.has-cartbar .fxm-main { padding-bottom: calc(var(--fxm-nav-h) + var(--fxm-cartbar-h) + var(--fxm-safe-b) + 36px); }

.fxm-cartbar { position: fixed; inset-inline: 12px; bottom: calc(var(--fxm-nav-h) + var(--fxm-safe-b) + 10px); z-index: 44; }
body:not(.has-nav) .fxm-cartbar { bottom: calc(var(--fxm-safe-b) + 12px); }
.fxm-cartbar button {
    width: 100%; max-width: 640px; margin-inline: auto; height: var(--fxm-cartbar-h); padding-inline: 10px 16px; border: 0; border-radius: 18px;
    display: flex; align-items: center; gap: 12px;
    background: linear-gradient(120deg, var(--fxm-accent-strong), var(--fxm-accent)); color: var(--fxm-on-accent);
    box-shadow: var(--fxm-lift), var(--fxm-accent-lift);
    font-size: 15px; font-weight: 800;
}
.fxm-cartbar button:hover { filter: brightness(1.06); }
.fxm-cartbar-count { min-width: 38px; height: 38px; padding-inline: 8px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--fxm-on-accent); color: var(--fxm-accent-strong); font-size: 15px; }
.fxm-cartbar-label { flex: 1 1 auto; text-align: start; }

/* ── Menu assistant ────────────────────────────────────────────────────── */
.fxm-ai-fab {
    position: fixed; z-index: 46; inset-inline-end: 16px; bottom: calc(var(--fxm-safe-b) + 20px);
    width: 56px; height: 56px; border: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(140deg, var(--fxm-ai-start), var(--fxm-ai-end)); color: var(--fxm-on-accent);
    box-shadow: 0 14px 28px -12px rgb(var(--fxm-shade-rgb) / 0.55);
}
.fxm-ai-fab .fx-ic { width: 24px; height: 24px; }
.fxm-ai-fab:hover { filter: brightness(1.1); }
body.has-nav .fxm-ai-fab { bottom: calc(var(--fxm-nav-h) + var(--fxm-safe-b) + 14px); }
body.has-nav.has-cartbar .fxm-ai-fab { bottom: calc(var(--fxm-nav-h) + var(--fxm-cartbar-h) + var(--fxm-safe-b) + 24px); }
body.ai-open .fxm-ai-fab { display: none; }
/* the assistant belongs to the menu; on the order and history tabs it would cover their buttons */
body[data-tab="orders"] .fxm-ai-fab, body[data-tab="history"] .fxm-ai-fab { display: none; }

.fxm-ai {
    position: fixed; z-index: 70; inset-inline: 0; bottom: 0; height: min(82vh, 680px); height: min(82dvh, 680px);
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--fxm-surface); border-radius: 20px 20px 0 0; box-shadow: 0 -20px 60px -20px rgb(var(--fxm-shade-rgb) / 0.55);
}
.fxm-ai-head { display: flex; align-items: center; gap: 10px; padding-block: 10px; padding-inline: 16px 10px; background: linear-gradient(115deg, var(--fxm-ai-start), var(--fxm-ai-end)); color: var(--fxm-on-accent); }
.fxm-ai-avatar { width: 36px; height: 36px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: rgb(var(--fxm-on-accent-rgb) / 0.16); }
.fxm-ai-titles { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.fxm-ai-titles strong { font-size: 15px; font-weight: 800; }
.fxm-ai-titles span { font-size: 12px; color: rgb(var(--fxm-on-accent-rgb) / 0.75); }
.fxm-ai-close { width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: var(--fxm-on-accent); display: inline-flex; align-items: center; justify-content: center; }
.fxm-ai-close:hover { background: rgb(var(--fxm-on-accent-rgb) / 0.14); }
.fxm-ai-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--fxm-bg); }
.fxm-ai-row { display: flex; }
.fxm-ai-row.is-user { justify-content: flex-end; }
.fxm-ai-bubble { max-width: 86%; padding: 10px 14px; border-radius: 16px; font-size: 14.5px; line-height: 1.6; overflow-wrap: anywhere; white-space: pre-line; background: var(--fxm-surface); border: 1px solid var(--fxm-card-line); border-end-start-radius: 4px; }
.fxm-ai-row.is-user .fxm-ai-bubble { background: var(--fxm-accent); border-color: var(--fxm-accent); color: var(--fxm-on-accent); border-end-start-radius: 16px; border-end-end-radius: 4px; }
.fxm-ai-row.is-error .fxm-ai-bubble { background: var(--fxm-danger-soft); border-color: rgb(var(--fxm-danger-rgb) / 0.2); color: var(--fxm-danger); }
.fxm-ai-bubble.is-rich { white-space: normal; }
.fxm-ai-bubble strong { font-weight: 800; }
.fxm-ai-li { display: flex; gap: 6px; align-items: baseline; white-space: normal; }
.fxm-ai-li b { color: var(--fxm-accent); flex: none; }
.fxm-ai-typing { display: inline-flex; gap: 5px; padding: 4px 0; }
.fxm-ai-typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--fxm-accent-dim); animation: fxm-bounce 1.2s infinite; }
.fxm-ai-typing i:nth-child(2) { animation-delay: 0.2s; }
.fxm-ai-typing i:nth-child(3) { animation-delay: 0.4s; }
@keyframes fxm-bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }
.fxm-ai-chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px 0; border-top: 1px solid var(--fxm-soft-line); }
.fxm-ai-chips button, .fxm-ai-more {
    min-height: 36px; padding-inline: 12px; border-radius: 999px; border: 1px solid var(--fxm-accent-line);
    background: var(--fxm-accent-soft); color: var(--fxm-accent-strong); font-size: 13px; font-weight: 700;
}
.fxm-ai-chips button:hover, .fxm-ai-more:hover { background: var(--fxm-accent-soft-2); }
.fxm-ai-more { align-self: center; display: inline-flex; align-items: center; gap: 6px; }
.fxm-ai-form { display: flex; gap: 8px; padding: 10px 14px calc(12px + var(--fxm-safe-b)); }
.fxm-ai-form .fx-input { height: 48px; border-radius: 14px; font-size: 15px; }
.fxm-ai-send { width: 48px; height: 48px; flex: none; border: 0; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--fxm-accent); color: var(--fxm-on-accent); }
.fxm-ai-send:hover { background: var(--fxm-accent-strong); }
.fxm-ai-send:disabled { opacity: 0.5; }

/* ── Dialogs ───────────────────────────────────────────────────────────── */
.fxm-scrim { position: fixed; inset: 0; z-index: 80; background: var(--fxm-scrim); display: flex; align-items: flex-end; justify-content: center; }
.fxm-sheet {
    position: relative; width: 100%; max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
    display: flex; flex-direction: column; gap: 12px; padding: 16px 16px calc(16px + var(--fxm-safe-b));
    background: var(--fxm-surface); color: var(--fxm-ink); border-radius: 22px 22px 0 0; box-shadow: 0 -24px 60px -20px rgb(var(--fxm-shade-rgb) / 0.55);
    animation: fxm-rise 0.22s ease-out;
}
@keyframes fxm-rise { from { transform: translateY(24px); opacity: 0.6; } }
@keyframes fxm-pop { from { transform: scale(0.97); opacity: 0.6; } }
.fxm-session-scrim { z-index: 90; }
.fxm-cart-totals { margin-top: 8px; }
.fxm-cart-continue { margin-top: 10px; }
body.is-busy .fxm-qty button { pointer-events: none; opacity: 0.6; }
.fxm-sheet h2 { font-size: 20px; font-weight: 800; line-height: 1.3; }
.fxm-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.fxm-sheet-text { color: var(--fxm-muted); font-size: 14px; }
.fxm-sheet-icon { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--fxm-accent-soft); color: var(--fxm-accent); }
.fxm-sheet-icon .fx-ic { width: 26px; height: 26px; }
.fxm-sheet-close { width: 44px; height: 44px; flex: none; border: 0; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--fxm-accent-soft); color: var(--fxm-accent-strong); }
.fxm-sheet-close:hover { background: var(--fxm-accent-soft-2); }
.fxm-sheet-foot { display: flex; gap: 8px; margin-top: 4px; }
.fxm-sheet-foot .fx-btn { flex: 1 1 0; }
.fxm-field { display: flex; flex-direction: column; gap: 6px; }
.fxm-field > span { font-size: 12.5px; font-weight: 700; color: var(--fxm-muted); }
.fxm-field .fx-input { height: 48px; font-size: 15px; }
html[dir="rtl"] input[dir="ltr"] { text-align: end; }
.fxm-textarea { height: auto; min-height: 76px; padding: 10px 12px; resize: vertical; line-height: 1.5; font-size: 15px; }

/* product sheet */
.fxm-sheet-product { padding: 0; gap: 0; }
.fxm-detail-media { position: relative; flex: none; aspect-ratio: 16 / 10; max-height: 42vh; background: var(--fxm-photo-bg); border-bottom: 1px solid var(--fxm-soft-line); overflow: hidden; }
.fxm-detail-media img { position: relative; width: 100%; height: 100%; object-fit: contain; padding: 14px; display: block; }
.fxm-detail-media.no-img { background: var(--fxm-accent-soft); }
.fxm-detail-media .fxm-card-ph .fx-ic { width: 56px; height: 56px; }
.fxm-detail-media.no-img { aspect-ratio: auto; height: 96px; }
.fxm-detail-tools { position: absolute; top: 12px; inset-inline: 12px; display: flex; justify-content: space-between; }
.fxm-detail-tools button {
    width: 44px; height: 44px; border: 0; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--fxm-glass); color: var(--fxm-ink); box-shadow: 0 4px 12px -6px rgb(var(--fxm-shade-rgb) / 0.5);
}
.fxm-detail-tools button.is-on { color: var(--fxm-accent); }
.fxm-detail-tools button.is-on .fx-ic { fill: currentColor; }
.fxm-detail-body { display: flex; flex-direction: column; gap: 14px; padding: 16px; }
.fxm-detail-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.fxm-detail-title h2 { font-size: 21px; }
.fxm-detail-title .fxm-price { font-size: 19px; padding-top: 2px; }
.fxm-detail-desc { color: var(--fxm-muted); font-size: 14.5px; line-height: 1.6; white-space: pre-line; }
.fxm-detail-cat { align-self: flex-start; }
.fxm-opts { display: flex; flex-direction: column; gap: 14px; }
.fxm-opt-group { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.fxm-opt-group legend { padding: 0; margin-bottom: 8px; display: flex; align-items: baseline; gap: 8px; font-size: 15px; font-weight: 800; }
.fxm-opt-group legend span { font-size: 12px; font-weight: 600; color: var(--fxm-muted); }
.fxm-opt-list { display: flex; flex-wrap: wrap; gap: 8px; }
.fxm-opt {
    position: relative; min-height: 44px; padding: 8px 14px; border-radius: 12px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px;
    border: 1.5px solid var(--fxm-accent-line); background: var(--fxm-surface); font-size: 14px; font-weight: 600;
}
.fxm-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.fxm-opt .fx-ic { width: 16px; height: 16px; display: none; }
.fxm-opt.is-on { border-color: var(--fxm-accent); background: var(--fxm-accent-soft); color: var(--fxm-accent-strong); }
.fxm-opt.is-on .fx-ic { display: inline-block; }
.fxm-opt:focus-within { box-shadow: var(--fxm-focus-ring); }
.fxm-opt-extra { font-size: 12.5px; color: var(--fxm-muted); font-weight: 700; }
.fxm-detail-foot {
    position: sticky; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 10px;
    padding: 12px 16px calc(12px + var(--fxm-safe-b));
    background: var(--fxm-surface); border-top: 1px solid var(--fxm-soft-line); box-shadow: 0 -10px 20px -18px rgb(var(--fxm-shade-rgb) / 0.5);
}
.fxm-detail-foot .fx-btn { flex: 1 1 auto; min-width: 0; min-height: 52px; justify-content: space-between; gap: 10px; padding-inline: 16px; font-size: 15px; }
.fxm-detail-foot .fx-btn > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.fxm-detail-foot .fx-btn .fxm-money { flex: none; font-weight: 800; }
@media (max-width: 419px) {
    .fxm-detail-foot { gap: 8px; padding-inline: 12px; }
    .fxm-detail-foot .fxm-qty.is-lg button { width: 42px; height: 42px; }
    .fxm-detail-foot .fxm-qty.is-lg output { min-width: 26px; }
    .fxm-detail-foot .fx-btn { padding-inline: 12px; font-size: 14px; }
}
.fxm-detail-notice { flex: 1 1 auto; display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: var(--fxm-muted); }
.fxm-detail-notice .fx-ic { color: var(--fxm-info); }

/* rating */
.fxm-rate { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.fxm-rate-label { font-size: 14px; font-weight: 700; color: var(--fxm-muted); }
.fxm-stars { display: flex; gap: 4px; }
.fxm-stars button { width: 48px; height: 48px; border: 0; border-radius: 12px; background: transparent; color: rgb(var(--fxm-muted-rgb) / 0.32); display: inline-flex; align-items: center; justify-content: center; }
.fxm-stars button .fx-ic { width: 32px; height: 32px; fill: currentColor; stroke-width: 1.2; }
.fxm-stars button.is-on { color: var(--fxm-accent); }
.fxm-stars button:hover { background: var(--fxm-accent-soft); }

/* toast above the bottom bars */
.fxm-toast { bottom: calc(var(--fxm-safe-b) + 24px); z-index: 95; }
body.has-nav .fxm-toast { bottom: calc(var(--fxm-nav-h) + var(--fxm-safe-b) + 16px); }
body.has-nav.has-cartbar .fxm-toast { bottom: calc(var(--fxm-nav-h) + var(--fxm-cartbar-h) + var(--fxm-safe-b) + 26px); }

/* the people prompt and the staff PIN (menu_session.js): the same sheets as the rest of the
   menu, in the restaurant's colour — the shared pieces still name the old teal by hand */
.fxm-session .fx-people button { height: 56px; border-color: var(--fxm-accent-line); color: var(--fxm-accent-strong); }
.fxm-session .fx-people button.is-on { background: var(--fxm-accent); border-color: var(--fxm-accent); color: var(--fxm-on-accent); box-shadow: var(--fxm-accent-lift); }
.fxm-session .fxm-pin { height: 52px; text-align: center; font-size: 20px; letter-spacing: 0.25em; }
.fxm-session .fxm-people-input { height: 48px; text-align: center; font-size: 18px; }
.fxm-session-langs { display: flex; flex-wrap: wrap; gap: 6px; }
.fxm-session-langs .fx-chip { height: 34px; padding-inline: 12px; font-size: 12.5px; font-weight: 700; }
.fxm-session-langs .fx-chip[aria-pressed="true"] { background: var(--fxm-accent); border-color: var(--fxm-accent); color: var(--fxm-on-accent); }

/* ── Footer (Flowiax logo and version) ─────────────────────────────────── */
.fxm-foot-wrap { margin-top: 28px; }
.fxm-foot-wrap .fx-foot { padding-bottom: 8px; }
html.fx-tablet .fxm-system { display: none !important; }

/* ── Restaurant list (/menu) ───────────────────────────────────────────── */
.fxm-list-body { min-height: 100vh; background: var(--fxm-bg); }
.fxm-list { max-width: 560px; margin-inline: auto; padding: 32px 16px 16px; display: flex; flex-direction: column; gap: 20px; }
.fxm-list-head { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.fxm-list-mark { width: 72px; height: 72px; border-radius: 20px; box-shadow: 0 12px 28px -16px rgb(var(--fxm-accent-strong-rgb) / 0.55); margin-bottom: 8px; }
.fxm-list-brand { font-size: 13px; font-weight: 700; color: var(--fxm-muted); }
.fxm-list-head h1 { font-size: 26px; font-weight: 800; }
.fxm-list-cards { display: flex; flex-direction: column; gap: 10px; }
.fxm-list-card {
    display: flex; align-items: center; gap: 14px; padding: 14px; min-height: 76px;
    background: var(--fxm-surface); border: 1px solid var(--fxm-card-line); border-radius: 16px; box-shadow: var(--fxm-shadow);
    color: var(--fxm-ink); transition: border-color 0.15s, transform 0.15s;
}
.fxm-list-card:hover { border-color: var(--fxm-accent-dim); transform: translateY(-1px); }
.fxm-list-logo { width: 52px; height: 52px; flex: none; border-radius: 14px; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; background: var(--fxm-accent-soft); color: var(--fxm-accent); }
.fxm-list-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; background: var(--fxm-surface); }
.fxm-list-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.fxm-list-text strong { font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fxm-list-text span { font-size: 13px; color: var(--fxm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fxm-list-chevron { color: var(--fxm-muted); }

/* ══ Breakpoints ═════════════════════════════════════════════════════════ */
@media (min-width: 480px) {
    .fxm-products.is-grid { grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); }
}
@media (min-width: 768px) {
    :root { --fxm-gutter: 20px; }
    .fxm-top { padding-inline: 20px; }
    .fxm-status-wrap { padding-inline: 20px; }
    .fxm-main { padding-inline: 20px; }
    .fxm-banners, .fxm-recs-row { margin-inline: -20px; padding-inline: 20px; scroll-padding-inline: 20px; }
    .fxm-cats-bar { margin-inline: -20px; padding-inline: 20px; }
    .fxm-profile-name { display: inline; }
    .fxm-profile-btn { padding-inline: 6px 12px; }
    .fxm-products.is-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
    .fxm-products.is-grid .fxm-card-desc { display: -webkit-box; -webkit-line-clamp: 2; }
    .fxm-products.is-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fxm-banner { flex-basis: 380px; min-height: 150px; }
    .fxm-hero { padding: 28px 30px; }
    .fxm-scrim { align-items: center; padding: 24px; }
    .fxm-sheet { max-width: 560px; max-height: calc(100vh - 48px); border-radius: 22px; padding-bottom: 16px; animation-name: fxm-pop; }
    .fxm-sheet-sm { max-width: 440px; padding: 20px; }
    .fxm-sheet-product { padding: 0; }
    .fxm-detail-foot { padding-bottom: 12px; }
    .fxm-ai { inset-inline: auto 20px; bottom: 20px; width: 400px; height: min(640px, calc(100vh - 110px)); border-radius: 20px; box-shadow: 0 24px 60px -20px rgb(var(--fxm-shade-rgb) / 0.55); }
    .fxm-ai-form { padding-bottom: 12px; }
    body.has-nav .fxm-ai { bottom: calc(var(--fxm-nav-h) + 16px); height: min(640px, calc(100vh - var(--fxm-nav-h) - 110px)); }
    .fxm-cartbar { inset-inline: 20px; }
}
@media (min-width: 1024px) {
    .fxm-wide-only { display: inline-flex !important; }
    .fxm-wide-only[hidden] { display: none !important; }
    .fxm-shell { display: grid; grid-template-columns: 268px minmax(0, 1fr); gap: 20px; padding: 16px 20px 0; align-items: start; }
    /* a table between 1024 and 1279 px: the order beside the menu, categories as chips */
    body.has-panel .fxm-shell { grid-template-columns: minmax(0, 1fr) 340px; }
    body.has-panel .fxm-side { display: none !important; }
    .fxm-main { padding: 0 0 24px; }
    .fxm-side:not([hidden]), .fxm-panel:not([hidden]) {
        display: flex !important; flex-direction: column; min-height: 0;
        position: sticky; top: calc(var(--fxm-top-h) + 16px); max-height: calc(100vh - var(--fxm-top-h) - 32px);
        background: var(--fxm-surface); border: 1px solid var(--fxm-card-line); border-radius: var(--fxm-radius-lg); box-shadow: var(--fxm-shadow);
    }
    .fxm-side { padding: 12px; gap: 10px; overflow-y: auto; }
    /* the three tabs of a large screen: a white bar, the open one in the restaurant's colour
       (they carry aria-selected, which the shared segment does not colour) */
    .fxm-tabs:not([hidden]) {
        display: flex !important; margin-bottom: 4px; padding: 5px;
        background: var(--fxm-surface); border: 1px solid var(--fxm-card-line); box-shadow: var(--fxm-shadow);
    }
    .fxm-tabs button { min-height: 44px; font-size: 14px; border-radius: 12px; }
    .fxm-tabs button[aria-selected="true"] { background: var(--fxm-accent-soft); color: var(--fxm-accent-strong); box-shadow: none; }
    .fxm-tabs button[aria-selected="true"] .fx-ic { color: var(--fxm-accent); }
    .fxm-tab-badge { margin-inline-start: 4px; }
    .fxm-status-wrap { padding-inline: 20px; }
    body:not(.has-panel) .fxm-cats-bar { display: none; }
    body.has-panel .fxm-cats-bar { margin-inline: 0; padding-inline: 0; }
    .fxm-hero { margin-top: 0; }
    .fxm-banners { margin-inline: 0; padding-inline: 0; margin-top: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); overflow: visible; }
    .fxm-hero:not([hidden]) + .fxm-banners { margin-top: 14px; }
    .fxm-banner { min-height: 150px; }
    .fxm-banners:not([hidden]) + .fxm-search { margin-top: 14px; }
    .fxm-tab:first-of-type > .fxm-search:first-child { margin-top: 0; }
    /* One row of as many picks as fit. grid-auto-rows:0 + overflow:hidden is what keeps it to ONE
       row: everything past it is drawn at zero height. That is right for the chef's picks, which are
       a taste of the menu — and wrong for the customer's own favourites, which are his list: on a
       tablet only three fitted and the rest were in the page but invisible, with nothing saying so
       (owner, 2026-09-21: «بس ٣ بيبيّنوا والباقي لأ»). The favourites wrap instead, and their head
       carries «Show all (n)» for the ones beyond what the row shows. */
    .fxm-recs-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); grid-template-rows: auto; grid-auto-rows: 0; row-gap: 0; margin-inline: 0; padding: 0; overflow: hidden; }
    .fxm-recs-group.is-favs .fxm-recs-row { grid-auto-rows: auto; row-gap: 10px; overflow: visible; }
    .fxm-rec { box-shadow: none; align-self: start; }
    .fxm-nav, .fxm-cartbar { display: none !important; }
    body.has-nav .fxm-main, body.has-nav.has-cartbar .fxm-main { padding-bottom: 24px; }
    body.has-nav .fxm-toast, body.has-nav.has-cartbar .fxm-toast { bottom: 24px; }
    body.has-nav .fxm-ai-fab, body.has-nav.has-cartbar .fxm-ai-fab { bottom: 24px; inset-inline-end: 24px; }
    body.has-panel .fxm-ai-fab { display: none; }
    body.has-nav .fxm-ai { bottom: 20px; height: min(640px, calc(100vh - 110px)); }
    .fxm-foot-wrap { margin-top: 36px; }
}
@media (min-width: 1280px) {
    body.has-panel .fxm-shell { grid-template-columns: 268px minmax(0, 1fr) 372px; }
    body.has-panel .fxm-side:not([hidden]) { display: flex !important; }
    body.has-panel .fxm-cats-bar { display: none; }
}

/* side categories */
.fxm-side-table { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 14px; background: var(--fxm-accent-soft); }
.fxm-side-table-icon { width: 40px; height: 40px; flex: none; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--fxm-accent); color: var(--fxm-on-accent); }
.fxm-side-table-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.fxm-side-table-text strong { font-size: 15px; font-weight: 800; }
.fxm-side-table-text span { font-size: 12.5px; color: var(--fxm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fxm-side-cats { display: flex; flex-direction: column; gap: 2px; }
.fxm-side-cat {
    position: relative; width: 100%; min-height: 44px; padding: 7px 12px; border: 0; border-radius: 12px; background: transparent;
    display: flex; align-items: center; justify-content: space-between; gap: 10px; text-align: start;
    font-size: 14px; font-weight: 600; color: var(--fxm-ink);
}
.fxm-side-cat:hover { background: var(--fxm-accent-soft); }
.fxm-side-cat[aria-current="true"] { background: var(--fxm-accent-soft); color: var(--fxm-accent-strong); font-weight: 800; }
/* the chosen category wears a short bar at its start, inside the rounded corners */
.fxm-side-cat[aria-current="true"]::before {
    content: ""; position: absolute; inset-inline-start: 0; top: 10px; bottom: 10px; width: 3px;
    border-radius: 999px; background: var(--fxm-accent);
}
/* a long category name wraps over two lines instead of being cut (owner, 2026-09-19) */
.fxm-side-cat > span:first-child {
    min-width: 0; line-height: 1.3; overflow-wrap: anywhere;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fxm-side-cat .fxm-side-count { font-size: 12px; color: var(--fxm-muted); font-variant-numeric: tabular-nums; font-weight: 600; }
.fxm-side-group { margin-top: 6px; }
.fxm-side-group-btn {
    width: 100%; min-height: 36px; padding-inline: 12px; border: 0; background: transparent; border-radius: 10px;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    font-size: 12px; font-weight: 800; letter-spacing: 0.03em; color: var(--fxm-muted); text-transform: uppercase;
}
.fxm-side-group-btn .fx-ic { transition: transform 0.15s; }
.fxm-side-group-btn[aria-expanded="false"] .fx-ic { transform: rotate(-90deg); }
html[dir="rtl"] .fxm-side-group-btn[aria-expanded="false"] .fx-ic { transform: rotate(90deg); }
.fxm-side-group .fxm-side-cat { padding-inline-start: 20px; }

@media (prefers-reduced-motion: reduce) {
    .fxm-card, .fxm-card-media img, .fxm-sheet { transition: none !important; animation: none !important; }
    .fxm-skel .fxm-card-media, .fxm-skel .fxm-card-body span { animation: none !important; }
}

/* ── Customer account (app.js renderAccountSheet / renderHistoryTab) ───── */
/* sign in / create account sheet: one teal accent, 48px fields, a numeric PIN with show / hide */
.fxm-account { gap: 14px; }
.fxm-account-switch button { min-height: 40px; font-size: 14px; }
.fxm-field > label { font-size: 12.5px; font-weight: 700; color: var(--fxm-muted); }
.fxm-field-hint { font-size: 12.5px; color: var(--fxm-muted); line-height: 1.45; }
.fxm-pin-wrap { position: relative; display: block; }
.fxm-field .fxm-pin-input {
    height: 52px; padding-inline-end: 52px; font-size: 20px; font-weight: 700;
    letter-spacing: 0.3em; font-variant-numeric: tabular-nums; direction: ltr; text-align: start;
}
html[dir="rtl"] .fxm-field .fxm-pin-input { text-align: end; }
.fxm-pin-eye {
    position: absolute; top: 4px; inset-inline-end: 4px; width: 44px; height: 44px; border: 0; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--fxm-muted);
}
.fxm-pin-eye:hover, .fxm-pin-eye[aria-pressed="true"] { background: var(--fxm-accent-soft); color: var(--fxm-accent-strong); }
.fxm-account-forgot { align-self: flex-start; min-height: 44px; }
.fxm-account-note {
    display: flex; gap: 10px; padding: 12px; border-radius: 12px; line-height: 1.55;
    background: var(--fxm-accent-soft); color: var(--fxm-accent-strong); font-size: 14px; font-weight: 600;
}
.fxm-account-note .fx-ic { margin-top: 2px; }
.fxm-account .fxm-error:not([hidden]) { padding: 10px 12px; border-radius: 12px; background: var(--fxm-danger-soft); }

/* top bar: «Sign in» before an account, the avatar after */
.fxm-signin-btn { padding-inline: 10px; }
.fxm-pop-account { display: flex; flex-direction: column; gap: 2px; }
.fxm-pop-account strong { font-size: 14px; color: var(--fxm-ink); font-weight: 800; }

/* the History tab: the account, its favourites, its past orders */
.fxm-subhead { margin: 20px 0 10px; font-size: 16px; font-weight: 800; }
.fxm-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 4px; }
.fxm-account-card { display: flex; align-items: center; gap: 12px; }
.fxm-avatar.is-lg { width: 48px; height: 48px; font-size: 20px; background: var(--fxm-accent); color: var(--fxm-on-accent); }
.fxm-account-id { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fxm-account-id strong { font-size: 16px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fxm-account-id .fxm-money { font-size: 13px; color: var(--fxm-muted); }
.fxm-account-card .fx-btn { flex: none; }
.fxm-fav-list { display: flex; flex-direction: column; }
.fxm-fav-row { display: flex; align-items: center; gap: 10px; padding-block: 8px; }
.fxm-fav-row + .fxm-fav-row { border-top: 1px solid var(--fxm-soft-line); }
.fxm-fav-thumb {
    width: 48px; height: 48px; flex: none; border-radius: 12px; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; background: var(--fxm-accent-soft); color: var(--fxm-accent);
}
.fxm-fav-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fxm-fav-name {
    flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 0; text-align: start; color: var(--fxm-ink);
    display: flex; flex-direction: column; gap: 2px;
}
.fxm-fav-name strong { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fxm-fav-name .fxm-money { font-size: 13px; color: var(--fxm-muted); }
.fxm-fav-row .fxm-fav { position: static; flex: none; background: var(--fxm-accent-soft); box-shadow: none; }

.fxm-hist-hint { margin: 0 0 12px; }
.fxm-hist-head > div:first-child { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fxm-hist-where { font-size: 13px; font-weight: 700; color: var(--fxm-accent-strong); }
.fxm-hist-lines .fxm-hist-line { align-items: center; gap: 10px; padding-block: 6px; }
.fxm-hist-lines .fxm-hist-line + .fxm-hist-line { border-top: 1px solid var(--fxm-soft-line); }
.fxm-hist-lines .fxm-hist-item { flex: 1 1 auto; min-width: 0; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px; }
.fxm-hist-item strong { font-size: 14px; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fxm-hist-meta { font-size: 12.5px; color: var(--fxm-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fxm-hist-off { font-style: normal; font-size: 12px; font-weight: 700; color: var(--fxm-warning); }
.fxm-hist-line.is-off .fxm-hist-item strong, .fxm-hist-line.is-off .fxm-hist-amount { color: var(--fxm-muted); }
.fxm-hist-amount { flex: none; font-weight: 700; }
.fxm-hist-add {
    width: 36px; height: 36px; flex: none; border: 0; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--fxm-accent-soft); color: var(--fxm-accent-strong);
}
.fxm-hist-add:hover { background: var(--fxm-accent); color: var(--fxm-on-accent); }
.fxm-hist-add:disabled { opacity: 0.5; }
.fxm-hist-add .fx-ic { width: 18px; height: 18px; stroke-width: 2.2; }
@media (max-width: 419px) {
    .fxm-account-card { flex-wrap: wrap; }
    .fxm-account-card .fx-btn { flex: 1 1 100%; }
    .fxm-empty-actions .fx-btn { flex: 1 1 100%; }
}

/* the open table's order, added to the account by the customer (history tab) */
.fxm-attach .fxm-sheet-text { margin: 4px 0 12px; }

/* ══ Cart, rounds sent to the kitchen, bill statement (owner, 2026-09-18) ═══════════════════════════
   app.js: the cart of this device (renderCartLines / renderCartFoot), «Send to the kitchen»
   (renderSendSheet), «My orders» (renderOrdersTab / renderRound), a note on a round (renderNoteSheet),
   the bill statement and the payment choice (renderBillSheet). Tokens only; one teal accent; the red
   and amber states come from the shared danger / warning tokens. */
.fxm-sr {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* the «new updates» dot on «My orders» */
.fxm-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--fxm-danger); box-shadow: 0 0 0 2px var(--fxm-surface); flex: none; }
.fxm-nav .fxm-dot { position: absolute; top: 8px; inset-inline-start: calc(50% + 8px); }
.fxm-tab-dot { margin-inline-start: 6px; }
.fxm-dot[hidden] { display: none; }

/* the cart */
.fxm-cart-line { align-items: center; }
.fxm-cart-thumb {
    position: relative; width: 56px; height: 56px; flex: none; border-radius: 12px; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--fxm-photo-bg); border: 1px solid var(--fxm-soft-line); color: var(--fxm-accent-dim);
}
.fxm-cart-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 3px; display: block; }
.fxm-line-opts { font-size: 12.5px; color: var(--fxm-muted); overflow-wrap: anywhere; }
.fxm-cart-remove {
    align-self: flex-start; min-height: 44px; padding-inline: 0; display: inline-flex; align-items: center; gap: 4px;
    color: var(--fxm-danger); font-weight: 700; font-size: 12.5px;
}
.fxm-cart-remove:hover { color: var(--fxm-danger); }
.fxm-cart-remove:disabled { opacity: 0.45; }
.fxm-cart-line .fxm-qty button { width: 44px; height: 44px; }
.fxm-estimate-note { font-size: 12px; color: var(--fxm-muted); line-height: 1.45; }
.fxm-send-btn { margin-top: 12px; }
.fxm-panel-foot .fxm-send-btn { margin-top: 0; }
.fxm-cart-totals .fxm-panel-note { margin: 12px 0 0; }
.fxm-cartbar.is-pulse button { animation: fxm-pulse-bar 0.45s ease-out; }
@keyframes fxm-pulse-bar { 40% { transform: scale(1.03); } }
@media (max-width: 379px) {
    .fxm-cart-thumb { width: 44px; height: 44px; }
    .fxm-cart-line .fxm-qty button { width: 40px; height: 44px; }
}

/* «Send to the kitchen?» */
.fxm-send-list, .fxm-round-lines, .fxm-stmt, .fxm-round-notes, .fxm-round-steps { list-style: none; margin: 0; padding: 0; }
.fxm-send-list { display: flex; flex-direction: column; border-block: 1px solid var(--fxm-soft-line); }
.fxm-send-line { display: flex; align-items: flex-start; gap: 10px; padding-block: 10px; }
.fxm-send-line + .fxm-send-line { border-top: 1px solid var(--fxm-soft-line); }
.fxm-send-amount { flex: none; font-weight: 700; }
.fxm-send-error:not([hidden]) { padding: 10px 12px; border-radius: 12px; background: var(--fxm-danger-soft); }
.fx-btn[aria-busy="true"] .fx-ic { animation: fx-spin 0.9s linear infinite; }

/* «My orders»: the cart not sent yet, the rounds, the bill */
.fxm-cart-pending { display: flex; align-items: center; gap: 10px; background: var(--fxm-accent-soft); border-color: var(--fxm-accent-line-2); }
.fxm-cart-pending > span { flex: 1 1 auto; min-width: 0; font-weight: 700; color: var(--fxm-accent-strong); }
.fxm-cart-pending > .fx-ic { color: var(--fxm-accent); flex: none; }
.fxm-cart-pending .fx-btn { flex: none; }
.fxm-cart-pending + .fxm-subhead, .fxm-panel-note + .fxm-subhead { margin-top: 16px; }
.fxm-rounds-title { margin-top: 4px; }
.fxm-rounds { display: flex; flex-direction: column; gap: 12px; }
.fxm-rounds + .fxm-bill-block { margin-top: 16px; }
.fxm-round { display: flex; flex-direction: column; gap: 12px; }
.fxm-round-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.fxm-round-title { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fxm-round-title h3 { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fxm-round-title time { font-size: 12.5px; color: var(--fxm-muted); font-variant-numeric: tabular-nums; }
.fxm-round-head .fx-pill { flex: none; height: auto; min-height: 26px; padding-block: 3px; white-space: normal; text-align: center; }
.fxm-round-steps .fxm-step-dot { width: 32px; height: 32px; }
.fxm-round-steps .fxm-step-dot .fx-ic { width: 17px; height: 17px; }
.fxm-round-steps .fxm-step + .fxm-step::before { top: 15px; }
.fxm-round-steps .fxm-step span:last-child { font-size: 11px; line-height: 1.25; overflow-wrap: anywhere; }
.fxm-round-steps .fxm-step.is-current .fxm-step-dot { box-shadow: 0 0 0 4px rgb(var(--fxm-accent-rgb) / 0.18); }
.fxm-round.is-waiting .fxm-step.is-current .fxm-step-dot { background: var(--fxm-warning); border-color: var(--fxm-warning); }
.fxm-round.is-waiting .fxm-step.is-current .fxm-step-dot { box-shadow: 0 0 0 4px var(--fxm-warning-soft); }
.fxm-round-alert { display: flex; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgb(var(--fxm-muted-rgb) / 0.08); color: var(--fxm-muted); font-size: 13px; line-height: 1.5; }
.fxm-round-alert > .fx-ic { flex: none; margin-top: 2px; }
.fxm-round-alert > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fxm-round-alert strong { font-weight: 800; }
.fxm-round-alert.is-danger { background: var(--fxm-danger-soft); color: var(--fxm-danger); }
.fxm-round-alert.is-warn { background: var(--fxm-warning-soft); color: var(--fxm-warning); }
.fxm-round-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.fxm-round.is-rejected { border-color: rgb(var(--fxm-danger-rgb) / 0.35); box-shadow: inset 4px 0 0 var(--fxm-danger), var(--fxm-shadow); }
html[dir="rtl"] .fxm-round.is-rejected { box-shadow: inset -4px 0 0 var(--fxm-danger), var(--fxm-shadow); }
.fxm-round.is-cancelled { background: var(--fxm-bg); box-shadow: none; }
.fxm-round.is-cancelled .fxm-round-title h3 { color: var(--fxm-muted); }
.fxm-round-lines { display: flex; flex-direction: column; }
.fxm-round-line { display: flex; align-items: flex-start; gap: 10px; padding-block: 8px; }
.fxm-round-line + .fxm-round-line { border-top: 1px solid var(--fxm-soft-line); }
.fxm-round-qty { flex: none; min-width: 40px; font-weight: 800; color: var(--fxm-accent-strong); font-size: 14px; }
.fxm-round-qty s { color: var(--fxm-muted); font-weight: 600; }
.fxm-round-item { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fxm-round-item strong { font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.fxm-round-item > span { font-size: 12.5px; color: var(--fxm-muted); }
.fxm-round-item em { font-style: normal; font-size: 12.5px; color: var(--fxm-muted); display: inline-flex; gap: 4px; align-items: center; }
.fxm-round-flag { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; color: var(--fxm-warning); }
.fxm-round-flag.is-danger { color: var(--fxm-danger); }
.fxm-round-line.is-off .fxm-round-item strong, .fxm-round-line.is-off .fxm-round-qty { color: var(--fxm-muted); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.fxm-round-notes { display: flex; flex-direction: column; gap: 8px; }
.fxm-note { max-width: 88%; padding: 8px 12px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.fxm-note p { margin-top: 2px; }
.fxm-note-meta { font-size: 11.5px; color: var(--fxm-muted); font-variant-numeric: tabular-nums; }
.fxm-note-meta strong { color: var(--fxm-ink); font-weight: 800; }
.fxm-note.is-mine { align-self: flex-end; background: var(--fxm-accent-soft); border-end-end-radius: 4px; }
.fxm-note.is-kitchen { align-self: flex-start; background: var(--fxm-surface); border: 1px solid var(--fxm-card-line); border-end-start-radius: 4px; }
.fxm-round-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--fxm-soft-line); }
.fxm-round-lock { flex: 1 1 200px; display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; color: var(--fxm-muted); line-height: 1.5; }
.fxm-round-lock .fx-ic { flex: none; margin-top: 2px; }
.fxm-round-foot .fx-btn { flex: none; }
@media (max-width: 379px) { .fxm-round-foot .fx-btn { flex: 1 1 100%; } }
.fxm-bill-lines { margin-bottom: 12px; }
.fxm-bill-lines > summary {
    min-height: 44px; display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none;
    font-weight: 700; color: var(--fxm-accent-strong); border-radius: 10px;
}
.fxm-bill-lines > summary::-webkit-details-marker { display: none; }
.fxm-bill-lines > summary .fx-ic { transition: transform 0.15s; transform: rotate(-90deg); }
html[dir="rtl"] .fxm-bill-lines > summary .fx-ic { transform: rotate(90deg); }
.fxm-bill-lines[open] > summary .fx-ic { transform: none; }
.fxm-bill-coming {
    margin-top: 12px; padding: 10px 12px; border-radius: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    background: var(--fxm-success-soft); color: var(--fxm-success); font-weight: 700; font-size: 13.5px;
}
.fxm-bill-coming > span { flex: 1 1 180px; }
.fxm-bill-coming .fxm-link { min-height: 44px; }

/* a note on a round */
.fxm-note-chips { flex-wrap: wrap; overflow: visible; }
.fxm-note-chips .fx-chip { height: auto; min-height: 44px; padding-block: 6px; white-space: normal; text-align: start; }
.fxm-note-count { align-self: flex-end; margin-top: -6px; font-size: 12px; color: var(--fxm-muted); }

/* the bill statement and the payment choice */
.fxm-bill-sheet { gap: 14px; }
.fxm-stmt { display: flex; flex-direction: column; border-block: 1px solid var(--fxm-soft-line); }
.fxm-stmt-line { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-block: 10px; }
.fxm-stmt-line + .fxm-stmt-line { border-top: 1px solid var(--fxm-soft-line); }
.fxm-stmt-item { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fxm-stmt-item strong { font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.fxm-stmt-item .fxm-money { font-size: 12.5px; color: var(--fxm-muted); align-self: flex-start; }
.fxm-stmt-item em { font-style: normal; font-size: 12.5px; color: var(--fxm-muted); display: inline-flex; gap: 4px; align-items: center; }
.fxm-stmt-amount { flex: none; font-weight: 800; }
.fxm-pay { border: 0; margin: 0; padding: 0; min-width: 0; }
.fxm-pay legend { padding: 0; margin-bottom: 10px; font-size: 16px; font-weight: 800; }
.fxm-pay-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.fxm-pay-opt {
    position: relative; min-height: 72px; padding: 12px 14px; border-radius: 16px; text-align: start;
    display: flex; align-items: center; gap: 12px;
    border: 1.5px solid var(--fxm-accent-line); background: var(--fxm-surface); color: var(--fxm-ink);
}
.fxm-pay-opt:hover:not(:disabled) { background: var(--fxm-accent-soft); }
.fxm-pay-opt.is-on { border-color: var(--fxm-accent); background: var(--fxm-accent-soft); box-shadow: inset 0 0 0 1px var(--fxm-accent); }
.fxm-pay-icon {
    width: 44px; height: 44px; flex: none; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--fxm-accent-soft); color: var(--fxm-accent);
}
.fxm-pay-opt.is-on .fxm-pay-icon { background: var(--fxm-accent); color: var(--fxm-on-accent); }
.fxm-pay-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fxm-pay-text strong { font-size: 15px; font-weight: 800; overflow-wrap: break-word; }
.fxm-pay-text > span { font-size: 12.5px; color: var(--fxm-muted); }
.fxm-pay-due { font-weight: 700; color: var(--fxm-accent-strong) !important; }
.fxm-pay-check { flex: none; color: var(--fxm-accent); visibility: hidden; }
.fxm-pay-opt.is-on .fxm-pay-check { visibility: visible; }

/* recommendations: favourites and chef's picks one under the other */
.fxm-recs-group + .fxm-recs-group { margin-top: 14px; }
.fxm-rec-media, .fxm-fav-thumb { position: relative; }
.fxm-fav-thumb { background: var(--fxm-photo-bg); border: 1px solid var(--fxm-soft-line); }
.fxm-fav-thumb img { object-fit: contain; padding: 3px; }

/* photos shown whole: one smaller than its frame keeps its real size, centred (app.js fitImage) */
.fxm-card-media > .fxm-card-ph, .fxm-detail-media > .fxm-card-ph { z-index: 0; }
.fxm-card-media.has-photo > .fxm-card-ph, .fxm-detail-media.has-photo > .fxm-card-ph { visibility: hidden; }
.fxm-card-media img.is-natural, .fxm-rec-media img.is-natural, .fxm-detail-media img.is-natural,
.fxm-fav-thumb img.is-natural, .fxm-cart-thumb img.is-natural {
    position: absolute; inset: 0; margin: auto; width: auto; height: auto; max-width: 100%; max-height: 100%;
    padding: 0; object-fit: contain;
}
.fxm-card:hover .fxm-card-media img.is-natural { transform: none; }

/* tablets (768 to 1279 px, portrait and landscape): the sheets a little wider, the rounds a readable width */
@media (min-width: 768px) {
    .fxm-bill-sheet { max-width: 520px; }
    #fxm-orders { max-width: 760px; }
}
@media (prefers-reduced-motion: reduce) {
    .fxm-cartbar.is-pulse button, .fx-btn[aria-busy="true"] .fx-ic, .fxm-bill-lines > summary .fx-ic { animation: none !important; transition: none !important; }
}

/* the quantity a waiter lowered: the old one struck through (a reset elsewhere must not hide it) */
.fxm-round-qty s { text-decoration: line-through; text-decoration-thickness: 1.5px; }

/* ── Menu assistant: what it put in the cart (owner, 2026-09-18: the assistant takes the order) ── */
.fxm-ai-row.is-card { display: block; }
.fxm-ai-card {
    max-width: 94%; display: flex; flex-direction: column; gap: 10px; padding: 12px;
    background: var(--fxm-surface); border: 1px solid var(--fxm-accent-line); border-radius: 16px;
    box-shadow: 0 8px 20px -16px rgb(var(--fxm-accent-deep-rgb) / 0.5);
}
.fxm-ai-card-head { display: flex; align-items: center; gap: 8px; color: var(--fxm-accent-strong); font-size: 14px; }
.fxm-ai-card-head .fx-ic { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--fxm-accent-soft); color: var(--fxm-accent); flex: none; }
.fxm-ai-card-head strong { font-weight: 800; }
.fxm-ai-card-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.fxm-ai-card-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: baseline; gap: 8px; padding-block: 6px; font-size: 14px; }
.fxm-ai-card-list li + li { border-top: 1px solid var(--fxm-soft-line); }
.fxm-ai-card-qty { min-width: 32px; color: var(--fxm-accent-strong); font-weight: 800; }
.fxm-ai-card-name { display: flex; flex-direction: column; min-width: 0; overflow-wrap: anywhere; }
.fxm-ai-card-name strong { font-weight: 700; }
.fxm-ai-card-name small { color: var(--fxm-muted); font-size: 12.5px; }
.fxm-ai-card-list li.is-removed { color: var(--fxm-muted); }
.fxm-ai-card-list li.is-removed .fxm-ai-card-qty { color: var(--fxm-muted); }
.fxm-ai-card-list s { text-decoration: line-through; text-decoration-thickness: 1.5px; }
.fxm-ai-card .fxm-money { font-variant-numeric: tabular-nums; white-space: nowrap; }
.fxm-ai-card-sum { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px; background: var(--fxm-accent-soft); font-size: 13.5px; font-weight: 700; color: var(--fxm-accent-strong); font-variant-numeric: tabular-nums; }
.fxm-ai-card-sum small { font-weight: 500; font-size: 12.5px; color: var(--fxm-muted); }
.fxm-ai-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fxm-ai-card-actions .fx-btn { flex: 1 1 auto; min-height: 44px; padding-inline: 12px; font-size: 13.5px; }
.fxm-ai-card-actions .fx-btn-primary { flex-basis: 100%; }
.fxm-ai-card.is-undone { opacity: 0.6; }
.fxm-ai-card.is-undone .fxm-ai-card-list { text-decoration: line-through; }
.fxm-ai-card .fx-btn:focus-visible { outline: none; box-shadow: var(--fxm-focus-ring); }

/* ══ Taxes and fees on the menu (owner, 2026-09-18: «in the digital menu the taxes do not show at all») ══
   app.js priceTag («+ taxes» under a price on a till that shows prices without taxes), renderTaxNote (one
   line near the menu's title), taxLines (one unit on the product sheet), renderEstimate (the cart). */
.fxm-price-box { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; line-height: 1.2; }
.fxm-plus-tax { font-size: 11.5px; font-weight: 600; color: var(--fxm-muted); white-space: nowrap; }
.fxm-tax-note { margin: -4px 0 10px; font-size: 12.5px; font-weight: 600; color: var(--fxm-muted); line-height: 1.45; }
.fxm-tax-lines {
    display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin-top: 6px;
    font-size: 12.5px; line-height: 1.5; color: var(--fxm-muted);
}
.fxm-tax-lines[hidden] { display: none; }
.fxm-tax-item { display: inline-flex; align-items: baseline; gap: 4px; max-width: 100%; }
.fxm-tax-item .fxm-money { color: var(--fxm-ink); font-weight: 700; }
.fxm-tax-item.is-total, .fxm-tax-item.is-total .fxm-money { color: var(--fxm-accent-strong); font-weight: 800; }
.fxm-tax-sep { opacity: 0.6; }
.fxm-tax-lead { font-weight: 700; }
.fxm-tax-lines.is-cart { margin-top: 0; }
.fxm-total-row.is-tax { font-size: 13px; }
.fxm-total-row.is-tax .fxm-money { font-weight: 600; }

/* ══ The restaurant's tablet and the floating buttons (owner, 2026-09-18: «on the tablet the staff button,
   the AI button and the cart button sit on top of each other») ══════════════════════════════════════
   The staff lock sits small at the start of the header (menu_session.js startTablet); the assistant's
   button stays at the bottom end, above the cart bar and the bottom bar; the cart bar spans the width
   below 1024 px, the cart is the side panel from 1024 px. The menu keeps room at its end so the floating
   buttons never hide its last dishes. */
.fxm-top-inner > .fxm-staff-btn { width: 36px; height: 36px; min-width: 36px; padding: 0; border-radius: 10px; }
.fxm-top-inner > .fxm-staff-btn .fx-ic { width: 18px; height: 18px; }
.fxm-top-inner > .fxm-staff-btn:not([hidden]) + .fxm-brand { flex: 1 1 auto; margin-inline-start: -2px; }
.fxm-cartbar button { max-width: none; }
body.has-nav.has-ai-fab .fxm-main { padding-bottom: calc(var(--fxm-nav-h) + var(--fxm-safe-b) + 14px + 56px + 16px); }
body.has-nav.has-cartbar.has-ai-fab .fxm-main { padding-bottom: calc(var(--fxm-nav-h) + var(--fxm-cartbar-h) + var(--fxm-safe-b) + 24px + 56px + 16px); }
body[data-tab="orders"].has-ai-fab .fxm-main, body[data-tab="history"].has-ai-fab .fxm-main { padding-bottom: calc(var(--fxm-nav-h) + var(--fxm-safe-b) + 24px); }
@media (max-width: 419px) {
    .fxm-ai-fab { width: 52px; height: 52px; inset-inline-end: 12px; }
}
@media (min-width: 1024px) {
    body.has-nav.has-ai-fab .fxm-main, body.has-nav.has-cartbar.has-ai-fab .fxm-main { padding-bottom: 24px; }
    body.has-nav.has-ai-fab:not(.has-panel) .fxm-main { padding-bottom: 96px; }
}
body.has-ai-fab:not(.has-nav) .fxm-main { padding-bottom: calc(var(--fxm-safe-b) + 96px); }

/* A card's price never runs under its add button: on narrow phones (two dishes a row) the price is a
   little smaller and closer to the button; a price still too long moves the button to its own row. */
.fxm-card-foot > .fxm-price-box { min-width: min-content; }
.fxm-products.is-grid .fxm-card-foot, .fxm-rec .fxm-card-foot { flex-wrap: wrap; row-gap: 6px; }
@media (max-width: 380px) {
    .fxm-products.is-grid .fxm-card-foot { gap: 4px; }
    .fxm-products.is-grid .fxm-card-foot .fxm-price { font-size: 14px; }
}

/* The category column (owner, 2026-09-19: "it does not look nice"): a thin scrollbar that shows only
   when needed, the number of dishes as a small pill beside the name, and each group as a clear section. */
.fxm-side { scrollbar-width: thin; scrollbar-color: var(--fxm-accent-line) transparent; overscroll-behavior: contain; }
.fxm-side::-webkit-scrollbar { width: 6px; }
.fxm-side::-webkit-scrollbar-track { background: transparent; }
.fxm-side::-webkit-scrollbar-thumb { background: var(--fxm-accent-line); border-radius: 999px; }
.fxm-side::-webkit-scrollbar-thumb:hover { background: var(--fxm-accent-dim); }
.fxm-side-cat .fxm-side-count {
    flex: none; min-width: 28px; height: 22px; padding-inline: 7px; border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--fxm-bg); color: var(--fxm-muted); font-size: 11.5px;
}
.fxm-side-cat[aria-current="true"] .fxm-side-count { background: var(--fxm-accent); color: var(--fxm-on-accent); }
.fxm-side-group { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--fxm-soft-line); }
.fxm-side-group-btn { color: var(--fxm-accent-strong); font-size: 12.5px; letter-spacing: 0; text-transform: none; }
.fxm-side-group-btn > span:first-child { flex: 1 1 auto; min-width: 0; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fxm-side-group .fxm-side-cat { padding-inline-start: 16px; min-height: 38px; font-weight: 500; }

/* ── The assistant from a tablet up: in the header, never floating over a dish ──────────────
   Owner, 2026-09-19, among the faults that must not come back: «the staff, assistant and cart
   buttons sitting on top of each other on a tablet». The fixed bars were separated, but the
   floating assistant still landed ON a dish's own add button — measured at 768 px, where the
   button sat at 16-72 px and the card's add button at 34-78 px, so the customer could not tap
   the dish. From 768 px up the header has room for the assistant, so it lives there and the
   floating button stays what it is: a phone's. It also frees the room the menu kept for it. */
@media (min-width: 768px) {
    #fxm-top-ai { display: inline-flex !important; }
    #fxm-top-ai[hidden] { display: none !important; }
    .fxm-ai-fab { display: none !important; }
    body.has-nav.has-ai-fab .fxm-main { padding-bottom: calc(var(--fxm-nav-h) + var(--fxm-safe-b) + 14px); }
    body.has-nav.has-cartbar.has-ai-fab .fxm-main { padding-bottom: calc(var(--fxm-nav-h) + var(--fxm-cartbar-h) + var(--fxm-safe-b) + 24px); }
    body.has-ai-fab:not(.has-nav) .fxm-main { padding-bottom: calc(var(--fxm-safe-b) + 24px); }
}
@media (min-width: 1024px) {
    body.has-nav.has-ai-fab .fxm-main, body.has-nav.has-cartbar.has-ai-fab .fxm-main { padding-bottom: 24px; }
    body.has-nav.has-ai-fab:not(.has-panel) .fxm-main { padding-bottom: 24px; }
}

/* On a phone the floating assistant is only wanted once the hero's own «Ask the assistant» has
   scrolled away. While the customer is at the top of the menu the two say the same thing, and the
   floating one lands on the category chips whenever the menu is short — a closed table, a small
   card — which is the very fault the owner reported (buttons on top of each other). The category
   bar sticks to the header as soon as the page scrolls (app.js, .is-stuck), so it tells us where
   the customer is. A restaurant with no categories keeps its bar hidden and keeps the floating
   button; a browser without :has() drops the rule and keeps it too. */
body:has(#fxm-cats-bar:not([hidden]):not(.is-stuck)) .fxm-ai-fab { display: none; }


/* ── Favourites: the whole list, never a silent cut (owner, 2026-09-21) ──────────────────────────
   On a phone the row scrolls sideways with nothing to say more exist; the head now says how many
   and opens them all. The favourites the table's menu does not carry are listed under their own
   sentence rather than disappearing. */
.fxm-recs-head { justify-content: space-between; }
.fxm-recs-head h2 { flex: 1 1 auto; min-width: 0; }
.fxm-recs-all {
    flex: none; display: inline-flex; align-items: center; gap: 2px; min-height: 36px;
    padding-inline: 10px; border: 0; border-radius: 999px; background: var(--fxm-accent-soft);
    color: var(--fxm-accent-strong); font-size: 13px; font-weight: 800; cursor: pointer;
}
.fxm-recs-all:hover { background: var(--fxm-accent); color: var(--fxm-on-accent); }
.fxm-recs-all .fx-ic { width: 16px; height: 16px; }
html[dir="rtl"] .fxm-recs-all .fx-ic { transform: scaleX(-1); }
.fxm-sheet-favs { max-width: 720px; }
.fxm-favs-grid { margin-top: 4px; }
.fxm-favs-note { margin-top: 14px; font-weight: 700; }
.fxm-fav-row.is-off { opacity: 0.72; }
.fxm-fav-row.is-off .fxm-fav-name { display: flex; flex-direction: column; gap: 2px; text-align: start; }
.fxm-block-title { display: flex; align-items: center; gap: 8px; }
.fxm-block-title > span:first-child { flex: 1 1 auto; min-width: 0; }

/* ── The restaurant tablet keeps the accreditation line (RESTAURANT_ICON_SURFACES.md §1-3) ───────
   `html.fx-tablet .fxm-system { display: none }` hid the whole block, and with it the Flowiax name
   and the version — which requirements 15 and 16 oblige to stay visible on the application's page.
   What that rule is for is the helper line beside it, so only that is hidden now. */
html.fx-tablet .fxm-system.fxm-foot-wrap { display: block !important; opacity: 0.55; margin-top: 18px; }


/* ── «Add this restaurant to the home screen» (owner, 2026-09-21) ────────────────────────────────
   Offered once per app and per device, and dismissible (static/src/pwa/fx_install.js). */
.fx-install {
    position: fixed; inset-inline: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 60;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px 14px; border-radius: 16px;
    background: var(--fxm-surface, #fff); color: var(--fxm-ink, #10292b);
    border: 1px solid var(--fxm-line, rgba(16, 41, 43, 0.12));
    box-shadow: 0 18px 40px -22px rgba(16, 41, 43, 0.6);
}
.fx-install-text { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fx-install-text strong { font-size: 15px; font-weight: 800; }
.fx-install-text span { font-size: 12.5px; color: var(--fxm-muted, #50686a); }
.fx-install-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.fx-install button { min-height: 40px; padding-inline: 14px; border-radius: 12px; font-size: 14px; font-weight: 700; cursor: pointer; }
.fx-install-no { border: 1px solid var(--fxm-line, rgba(16, 41, 43, 0.12)); background: transparent; color: inherit; }
.fx-install-yes { border: 0; background: var(--fxm-accent, #006970); color: #fff; }
@media (max-width: 480px) { .fx-install-actions { width: 100%; justify-content: flex-end; } }

/* ── لا زوم على الجوّال (المالك، 2026-09-22): الشاشة تُمرَّر ولا تُكبَّر ولا تُصغَّر ──
   touch-action pan-x pan-y يمنع القرص والنقر المزدوج للتكبير على Android وiOS 13+، وسمة
   viewport تمنع التحجيم، وfx_install.js يمسك إيماءات iOS التي تتجاوز الاثنين. */
html, body { touch-action: pan-x pan-y; -ms-touch-action: pan-x pan-y; }

/* the side column: a sub-category sits in under its category (fx_cat_tree.js) */
.fxm-side-cat.is-sub { padding-inline-start: 28px; min-height: 36px; font-size: 13.5px; font-weight: 500; }
.fxm-side-group .fxm-side-cat.is-sub { padding-inline-start: 32px; }

/* the bill split (fx_split.js): a simulation on the customer's phone, drawn in the bill sheet */
.fxm-split-entry { width: 100%; }
.fxm-split-entry .fxm-pay-text > span { line-height: 1.5; }
.fxm-split-go { flex: none; color: var(--fxm-accent); }
html:not([dir="rtl"]) .fxm-back { transform: scaleX(-1); }
.fxm-split-head-start { display: flex; align-items: center; gap: 10px; }
.fxm-split-count { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid var(--fxm-card-line); border-radius: 14px; }
.fxm-split-count > strong { font-size: 15px; font-weight: 800; }
.fxm-split-mode { display: grid; grid-template-columns: 1fr 1fr; }
.fxm-split-mode button { justify-content: center; min-height: 44px; font-weight: 700; }
.fxm-split-title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 16px; font-weight: 800; }
.fxm-split-title small { font-size: 12.5px; font-weight: 700; color: var(--fxm-muted); font-variant-numeric: tabular-nums; }
.fxm-split-rows, .fxm-split-cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fxm-split-row { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 16px; border: 1.5px solid var(--fxm-card-line); background: var(--fxm-surface); }
.fxm-split-row.is-open { border-style: dashed; border-color: var(--fxm-accent-line-2); background: var(--fxm-accent-soft); }
.fxm-split-row-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.fxm-split-row-name { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fxm-split-row-name strong { font-size: 14.5px; font-weight: 700; overflow-wrap: anywhere; }
.fxm-split-row-name .fxm-money { font-size: 12.5px; color: var(--fxm-muted); align-self: flex-start; }
.fxm-split-row-state { flex: none; max-width: 45%; font-size: 12.5px; font-weight: 800; color: var(--fxm-accent-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fxm-split-row.is-open .fxm-split-row-state { color: var(--fxm-warning-deep); }
.fxm-split-people { display: flex; flex-wrap: wrap; gap: 8px; }
.fxm-split-p {
    min-width: 44px; height: 44px; padding-inline: 12px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
    border: 1.5px solid var(--fxm-accent-line); background: var(--fxm-surface); color: var(--fxm-ink); font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums;
}
.fxm-split-p:hover { background: var(--fxm-accent-soft); }
.fxm-split-p[aria-pressed="true"] { background: var(--fxm-accent); border-color: var(--fxm-accent); color: var(--fxm-on-accent); }
.fxm-split-p .fx-ic { width: 16px; height: 16px; }
.fxm-split-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 16px; border: 1px solid var(--fxm-card-line); background: var(--fxm-surface); box-shadow: var(--fxm-shadow); }
.fxm-split-card-head { display: flex; align-items: center; gap: 10px; }
.fxm-split-avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--fxm-accent); color: var(--fxm-on-accent); font-weight: 800; font-size: 16px; font-variant-numeric: tabular-nums; }
.fxm-split-name { flex: 1 1 auto; min-width: 0; height: 44px; padding-inline: 8px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--fxm-ink); font: inherit; font-size: 15px; font-weight: 800; }
.fxm-split-name:hover { border-color: var(--fxm-card-line); }
.fxm-split-name:focus { outline: none; border-color: var(--fxm-accent); box-shadow: var(--fxm-focus-ring); }
.fxm-split-name::placeholder { color: var(--fxm-ink); opacity: 0.75; }
.fxm-split-due { flex: none; font-size: 19px; font-weight: 800; color: var(--fxm-accent-strong); }
.fxm-split-took { display: flex; flex-direction: column; gap: 4px; padding-top: 8px; border-top: 1px solid var(--fxm-soft-line); }
.fxm-split-took > div { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--fxm-muted); }
.fxm-split-took > div strong { color: var(--fxm-ink); font-weight: 600; overflow-wrap: anywhere; }
.fxm-split-took small { color: var(--fxm-muted); font-weight: 600; }
.fxm-split-took .is-tax { font-size: 12.5px; }
.fxm-split-none { font-size: 13px; color: var(--fxm-muted); }
.fxm-split-check { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; font-weight: 700; font-size: 14px; }
.fxm-split-check > span:not(.fxm-money) { flex: 1 1 auto; }
.fxm-split-check.is-ok { background: var(--fxm-success-soft); color: var(--fxm-success); }
.fxm-split-check.is-left { background: var(--fxm-warning-soft); color: var(--fxm-warning-deep); }
.fxm-split-disclaimer { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--fxm-muted); line-height: 1.6; }
.fxm-split-disclaimer .fx-ic { margin-top: 3px; }
@media (min-width: 768px) {
    .fxm-bill-sheet.is-split { max-width: 600px; }
    .fxm-split-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}