/* =========================================================================
   DUGU Customer Ordering UX V2 — premium mobile-first skin.

   Scoped to .dugu-cux. Wraps the native TableTrack shop.cart body without
   touching it: the engine (cart, Order::create, pickup date/time, delivery
   + fee, payments, table_id, KOT/Kitchen) stays the single source of truth.
   Every rule here is presentation only, and every rule is namespaced under
   .dugu-cux so Classic (flag off) is byte-identical.
   ========================================================================= */

.dugu-cux {
    --dugu-ink: #17130b;
    --dugu-ink-soft: #4b443a;
    --dugu-muted: #857b6c;
    --dugu-line: #ece5d8;
    --dugu-line-strong: #ddd3c1;
    --dugu-surface: #ffffff;
    --dugu-surface-2: #fbf8f2;
    --dugu-canvas: #f6f1e7;
    /* --dugu-accent, --color-base and --dugu-on-accent are set inline per
       restaurant from the native TableTrack Theme Setting (theme_hex /
       theme_rgb). These are DUGU-gold fallbacks only. */
    --dugu-accent: #b8860b;
    --color-base: 184, 134, 11;
    --dugu-on-accent: #ffffff;
    /* Darker shade of whatever the accent is, for text/price emphasis. */
    --dugu-accent-ink: color-mix(in srgb, var(--dugu-accent) 62%, #1a1206);
    --dugu-ok: #1a7f4b;
    --dugu-warn: #b4581f;
    --dugu-danger: #b3261e;

    --dugu-radius-xl: 22px;
    --dugu-radius: 16px;
    --dugu-radius-sm: 12px;
    --dugu-pill: 999px;

    --dugu-shadow-sm: 0 1px 2px rgba(23, 19, 11, .06), 0 2px 6px -3px rgba(23, 19, 11, .10);
    --dugu-shadow: 0 10px 30px -14px rgba(23, 19, 11, .22), 0 3px 10px -5px rgba(23, 19, 11, .12);
    --dugu-shadow-lg: 0 28px 60px -20px rgba(23, 19, 11, .34);

    --dugu-font: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --dugu-topbar-h: 66px;

    font-family: var(--dugu-font);
    color: var(--dugu-ink);
    background: var(--dugu-canvas);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100%;
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Dark mode follows TableTrack exactly: resources/js/app.js sets
   <html class="dark"> from the system preference by default (and honours the
   native manual toggle stored in localStorage['color-theme']). We key off
   that same class so DUGU never diverges from the native site — no separate
   DUGU dark preference. The @media block is the pre-JS fallback for the very
   first paint. `html.light` (explicit light choice) always wins. */
:where(html.dark) .dugu-cux {
    --dugu-ink: #f4efe4;
    --dugu-ink-soft: #d6cebd;
    --dugu-muted: #a79d8b;
    --dugu-line: #2a261f;
    --dugu-line-strong: #38332a;
    --dugu-surface: #1a1710;
    --dugu-surface-2: #15120c;
    --dugu-canvas: #100e09;
    --dugu-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
    --dugu-shadow: 0 14px 36px -16px rgba(0, 0, 0, .66);
    --dugu-shadow-lg: 0 30px 64px -22px rgba(0, 0, 0, .75);
}
@media (prefers-color-scheme: dark) {
    :where(html:not(.light):not(.dark)) .dugu-cux {
        --dugu-ink: #f4efe4;
        --dugu-ink-soft: #d6cebd;
        --dugu-muted: #a79d8b;
        --dugu-line: #2a261f;
        --dugu-line-strong: #38332a;
        --dugu-surface: #1a1710;
        --dugu-surface-2: #15120c;
        --dugu-canvas: #100e09;
        --dugu-shadow-sm: 0 1px 2px rgba(0, 0, 0, .5);
        --dugu-shadow: 0 14px 36px -16px rgba(0, 0, 0, .66);
        --dugu-shadow-lg: 0 30px 64px -22px rgba(0, 0, 0, .75);
    }
}

/* ============ NATIVE GUEST CHROME SUPPRESSION (page-level) =============
   These few rules are intentionally NOT scoped to .dugu-cux: the native
   layouts.guest navbar and promo band render as siblings of <main>, outside
   our wrapper. They only ever match on a page that actually mounts the DUGU
   ordering shell (that's what puts .dugu-cux in the DOM), so Classic is
   untouched. :has() is supported by every browser TableTrack targets. */
html:has(.dugu-cux) body > header,
html:has(.dugu-cux) body > nav,
html:has(.dugu-cux) header.lg\:hidden,
html:has(.dugu-cux) header.hidden.lg\:block,
/* the native layouts.guest public footer renders as a body-level sibling of
   the shell wrapper; in DUGU mode our own .dugu-cux__footer replaces it, so
   suppress the native one to avoid two stacked footers. Classic keeps it. */
html:has(.dugu-cux) body > footer {
    display: none !important;
}

/* Native full-width promo band ("Ready to satisfy your cravings…") — a big
   marketing CTA that fights a focused ordering UX. Precisely targeted:
   a centered max-width wrapper that directly contains the promo <h1>. */
.dugu-cux__body div[class*="max-w-screen-xl"][class*="text-center"]:has(> h1),
.dugu-cux__body section:has(> div > h1.text-4xl):first-child {
    display: none !important;
}

/* =============================== TOP BAR ================================= */
/* Two-row header at every phone width:
   row 1 → [logo + name]                       [language] [appearance]
   row 2 → [Area · Table / address]            [● Open until 23:00]      */
.dugu-cux__topbar {
    position: sticky;
    top: 0;
    z-index: 60;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 10px;
    row-gap: 7px;
    padding: 12px 16px;
    padding-top: max(12px, env(safe-area-inset-top, 0px));
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--dugu-accent) 16%, var(--dugu-surface)) 0%,
            var(--dugu-surface) 92%);
    border-bottom: 1px solid var(--dugu-line);
    backdrop-filter: saturate(1.5) blur(8px);
    -webkit-backdrop-filter: saturate(1.5) blur(8px);
}
.dugu-cux__brand      { grid-column: 1; grid-row: 1; }
.dugu-cux__topbar-end { grid-column: 2; grid-row: 1; justify-self: end; }
.dugu-cux__row2 {
    grid-column: 1 / -1;
    grid-row: 2;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.dugu-cux__row2 .dugu-cux__context {
    min-width: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
/* row 2 keeps only the status when there is no table / address context */
.dugu-cux__row2:has(.dugu-cux__context:empty) { justify-content: flex-end; }

.dugu-cux__brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dugu-cux__restaurant {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.dugu-cux__online { max-width: 100%; }

.dugu-cux__logo {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    object-fit: cover;
    flex: none;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--dugu-ink) 10%, transparent), var(--dugu-shadow-sm);
    background: var(--dugu-surface);
}
.dugu-cux__logo--text {
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -.02em;
    color: var(--dugu-on-accent);
    background: linear-gradient(135deg, var(--dugu-accent), color-mix(in srgb, var(--dugu-accent) 55%, #000));
}

.dugu-cux__restaurant {
    font-weight: 800;
    font-size: 16px;
    line-height: 1.14;
    letter-spacing: -.015em;
}
.dugu-cux__context { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--dugu-muted); min-width: 0; }
.dugu-cux__online { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* on row 2 the context shares the line with the status pill — let the table
   pill / address ellipsize rather than push the status off-screen. */
.dugu-cux__row2 .dugu-cux__table-pill {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dugu-cux__table-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px 3px 8px;
    border-radius: var(--dugu-pill);
    font-weight: 800;
    font-size: 11.5px;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--dugu-accent-ink);
    background: color-mix(in srgb, var(--dugu-accent) 18%, var(--dugu-surface));
    border: 1px solid color-mix(in srgb, var(--dugu-accent) 34%, transparent);
}
:where(html.dark) .dugu-cux .dugu-cux__table-pill {
    color: color-mix(in srgb, var(--dugu-accent) 70%, #fff);
}
.dugu-cux__table-pill .dugu-cux__area {
    max-width: 34vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dugu-cux__table-pill .dugu-cux__sep { opacity: .55; margin: 0 1px; }

/* QR dine-in physical context on the order-success page. */
.dugu-cux__place {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 12px;
    padding: 7px 13px;
    border-radius: var(--dugu-pill);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--dugu-accent-ink);
    background: color-mix(in srgb, var(--dugu-accent) 12%, var(--dugu-surface));
    border: 1px solid color-mix(in srgb, var(--dugu-accent) 28%, transparent);
}
:where(html.dark) .dugu-cux .dugu-cux__place { color: color-mix(in srgb, var(--dugu-accent) 72%, #fff); }

.dugu-cux__topbar-end { display: flex; align-items: center; gap: 8px; flex: none; }

/* Native storefront language switcher (@livewire('shop.languageSwitcher'))
   re-homed into the DUGU topbar. Only the presentation is adjusted. */
.dugu-cux__lang > div { position: relative; }
.dugu-cux__lang button[data-dropdown-toggle] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px !important;
    border-radius: var(--dugu-pill) !important;
    border: 1px solid var(--dugu-line-strong);
    background: var(--dugu-surface);
    color: var(--dugu-ink-soft) !important;
    font-size: 12px;
    font-weight: 700;
}
.dugu-cux__lang button[data-dropdown-toggle] svg { width: 15px; height: 15px; }
.dugu-cux__lang button[data-dropdown-toggle] span { display: inline !important; text-transform: uppercase; }
.dugu-cux__lang [id^="language-dropdown"],
.dugu-cux__lang [id*="language-dropdown"] {
    border-radius: var(--dugu-radius-sm) !important;
    border: 1px solid var(--dugu-line-strong) !important;
    background: var(--dugu-surface) !important;
    box-shadow: var(--dugu-shadow-lg) !important;
    min-width: 160px;
    overflow: hidden;
}
.dugu-cux__lang [id*="language-dropdown"] a,
.dugu-cux__lang [id*="language-dropdown"] button {
    color: var(--dugu-ink) !important;
    font-size: 13px;
}
.dugu-cux__lang [id*="language-dropdown"] a:hover,
.dugu-cux__lang [id*="language-dropdown"] button:hover {
    background: color-mix(in srgb, var(--dugu-accent) 10%, var(--dugu-surface)) !important;
}

.dugu-cux__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 72%;
    padding: 5px 11px;
    border-radius: var(--dugu-pill);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .01em;
    border: 1px solid var(--dugu-line-strong);
    background: var(--dugu-surface);
}
.dugu-cux__status-dot { flex: none; width: 7px; height: 7px; border-radius: var(--dugu-pill); background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }
.dugu-cux__status-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* full label by default; swap to the compact form only on the smallest
   phones so "Closed · Opens at 08:00" never has to ellipsize. There the
   status keeps its full width (it is the point of the row) and the
   Area·Table context absorbs the squeeze by truncating instead. */
.dugu-cux__status-compact { display: none; }
@media (max-width: 412px) {
    .dugu-cux__status-full { display: none; }
    .dugu-cux__status-compact { display: inline; }
    .dugu-cux__status { flex: 0 0 auto; max-width: none; padding-inline: 9px; }
}
.dugu-cux__status.is-open { color: var(--dugu-ok); }
.dugu-cux__status.is-closed { color: var(--dugu-warn); }

/* Appearance control — a compact 3-way segmented icon control (System /
   Light / Dark). Drives the native color-theme mechanism only. */
.dugu-cux__theme {
    display: inline-flex;
    flex: none;
    padding: 2px;
    gap: 1px;
    border-radius: var(--dugu-pill);
    border: 1px solid var(--dugu-line-strong);
    background: var(--dugu-surface);
}
.dugu-cux__theme button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: var(--dugu-pill);
    background: transparent;
    color: var(--dugu-muted);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.dugu-cux__theme button:hover { color: var(--dugu-ink-soft); }
.dugu-cux__theme button[aria-pressed="true"] {
    background: rgb(var(--color-base));
    color: var(--dugu-on-accent);
}
.dugu-cux__theme button svg { display: block; }

.dugu-cux__notice {
    margin: 12px 16px 0;
    padding: 12px 14px;
    border-radius: var(--dugu-radius-sm);
    font-size: 13px;
    font-weight: 600;
    color: var(--dugu-warn);
    background: color-mix(in srgb, var(--dugu-warn) 10%, var(--dugu-surface));
    border: 1px solid color-mix(in srgb, var(--dugu-warn) 26%, transparent);
}

/* =============================== BODY =================================== */
/* The native sticky "View cart" strip (`.fixed.inset-x-0.bottom-1`) is only
   in the DOM while the cart has items (`@if ($cartQty > 0)` /
   shopCartStripShouldDisplay()). Reserve space for it ONLY then — otherwise
   the 96px reservation is a dead gap above the footer. */
.dugu-cux__body { position: relative; padding-bottom: 20px; }
.dugu-cux__body:has([class*="fixed"][class*="bottom-1"]),
.dugu-cux__body:has(.fixed.bottom-0) {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}

/* Font + accent adoption inside the native tree. */
.dugu-cux :where(button, input, select, textarea, h1, h2, h3, h4, p, span, a, label, div) { font-family: var(--dugu-font); }

/* Warm the flat white native sections into the DUGU canvas. */
.dugu-cux :where(section, main) { background: transparent !important; }
.dugu-cux .bg-white:not([class*="shadow"]):not([role="dialog"] *) { background: transparent !important; }

/* Native "skin" accent classes already resolve through the --color-base
   triplet set on the .dugu-cux wrapper (TableTrack compiles bg-skin-base to
   rgb(var(--color-base) / a)), so bg-skin-base, bg-skin-base/[0.08],
   text-skin-base, border-skin-base all recolour to the DUGU accent with the
   right opacity WITHOUT an override here. Overriding them flattens the
   translucent variants and inverts text-on-accent, so we deliberately don't. */

/* ------------------------- Menu / category chips --------------------- */
/* ONLY the grid that actually holds .tt-shop-menu-card chips becomes a
   horizontal strip. (The old [x-data*="showAll"] selector also matched the
   ttShopClientMenuBrowse root — whose x-data JSON contains the word
   "showAll" — turning the whole menu column, incl. the search row, into a
   flex box and collapsing the search field. Never target that root.) */
.dugu-cux .grid:has(> .tt-shop-menu-card),
.dugu-cux .grid:has(> * > .tt-shop-menu-card) {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding: 2px 2px 10px !important;
    margin: 0 -2px;
    scrollbar-width: none;
}
.dugu-cux .grid:has(> .tt-shop-menu-card)::-webkit-scrollbar,
.dugu-cux .grid:has(> * > .tt-shop-menu-card)::-webkit-scrollbar { display: none; }
.dugu-cux [x-data="{ showAll: false }"] { padding-inline: 12px !important; }

.dugu-cux .tt-shop-menu-card {
    flex: 0 0 auto;
    scroll-snap-align: start;
    border-radius: var(--dugu-pill) !important;
    border: 1px solid var(--dugu-line-strong) !important;
    background: var(--dugu-surface) !important;
    box-shadow: var(--dugu-shadow-sm) !important;
    transition: transform .12s ease, box-shadow .12s ease;
}
.dugu-cux .tt-shop-menu-card { min-width: 96px; }
.dugu-cux .tt-shop-menu-card > div { padding: 9px 15px !important; width: 100%; }
/* drop the boxed / inline category icon on the compact mobile chips so only
   the label shows */
.dugu-cux .tt-shop-menu-card svg,
.dugu-cux .tt-shop-menu-card [class*="bg-gray-100"]:has(> svg),
.dugu-cux .tt-shop-menu-card .hidden.p-2 { display: none !important; }
.dugu-cux .tt-shop-menu-card > div > div { gap: 0 !important; justify-content: center; }
.dugu-cux .tt-shop-menu-card .grow { text-align: center; }
.dugu-cux .tt-shop-menu-card__title { font-size: 13px !important; font-weight: 700 !important; white-space: nowrap; color: var(--dugu-ink-soft) !important; }
.dugu-cux .tt-shop-menu-card__meta { display: none !important; }
.dugu-cux .tt-shop-menu-card:active { transform: translateY(1px) scale(.97); }

.dugu-cux .tt-shop-menu-card--active {
    background: rgb(var(--color-base)) !important;
    border-color: transparent !important;
    box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--dugu-accent) 70%, transparent) !important;
}
.dugu-cux .tt-shop-menu-card--active .tt-shop-menu-card__title { color: var(--dugu-on-accent) !important; }

/* "Show more" categories toggle inside the chip picker. */
.dugu-cux [x-data="{ showAll: false }"] button { font-weight: 700 !important; }

/* Remove the REDUNDANT native mobile category dropdown ("Show All ▾").
   Real rendered DOM (client-catalog): a wrapper
     <div class="relative min-w-0 lg:hidden">          (no x-data on it)
        <button class="w-full … rounded-lg … flex">Show All ▾</button>
        <div class="absolute inset-x-0 z-50 …">…options…</div>
     </div>
   The horizontal .tt-shop-menu-card chip strip is the primary category
   nav and calls the same native filterMenuItems(); they are independent,
   so this changes no behaviour. Classic mode (no .dugu-cux) keeps it. */
.dugu-cux__body div[class~="lg:hidden"]:has(> button):has(> div[class~="absolute"]) {
    display: none !important;
}

/* Mobile category dropdown trigger + panel. */
.dugu-cux .lg\:hidden > button[class*="border"] {
    border-radius: var(--dugu-radius-sm) !important;
    border-color: var(--dugu-line-strong) !important;
    background: var(--dugu-surface) !important;
    min-height: 46px;
    font-weight: 700;
    box-shadow: var(--dugu-shadow-sm);
}
.dugu-cux .lg\:hidden [class*="absolute"][class*="rounded"] {
    border-radius: var(--dugu-radius) !important;
    border: 1px solid var(--dugu-line-strong) !important;
    box-shadow: var(--dugu-shadow-lg) !important;
    overflow: hidden;
}

/* ------------------------- Category rail (desktop) ------------------- */
.dugu-cux nav[aria-label="Categories"],
.dugu-cux [aria-label="Categories"] {
    position: sticky;
    top: calc(var(--dugu-topbar-h) - 2px);
    z-index: 40;
    gap: 8px !important;
    padding: 12px 12px !important;
    margin: 0 -4px 8px !important;
    background: color-mix(in srgb, var(--dugu-canvas) 88%, transparent);
    backdrop-filter: saturate(1.3) blur(10px);
    -webkit-backdrop-filter: saturate(1.3) blur(10px);
    border-bottom: 1px solid var(--dugu-line);
    scrollbar-width: none;
}
.dugu-cux nav[aria-label="Categories"]::-webkit-scrollbar { display: none; }

.dugu-cux nav[aria-label="Categories"] button,
.dugu-cux nav[aria-label="Categories"] a {
    border-radius: var(--dugu-pill) !important;
    padding: 9px 15px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    letter-spacing: .005em;
    white-space: nowrap;
    border: 1px solid var(--dugu-line-strong) !important;
    background: var(--dugu-surface) !important;
    color: var(--dugu-ink-soft) !important;
    box-shadow: var(--dugu-shadow-sm);
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.dugu-cux nav[aria-label="Categories"] button:active,
.dugu-cux nav[aria-label="Categories"] a:active { transform: translateY(1px) scale(.98); }

.dugu-cux nav[aria-label="Categories"] button[class*="bg-skin-base"],
.dugu-cux nav[aria-label="Categories"] .bg-skin-base {
    background: rgb(var(--color-base)) !important;
    color: var(--dugu-on-accent) !important;
    border-color: transparent !important;
    box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--dugu-accent) 70%, transparent);
}
.dugu-cux nav[aria-label="Categories"] [class*="rounded-full"] {
    background: color-mix(in srgb, var(--dugu-ink) 8%, transparent) !important;
    color: inherit !important;
}

/* Native "sticky top-0" list dividers (e.g. phone-code list header). */
.dugu-cux li.sticky.top-0 {
    background: var(--dugu-surface) !important;
    border-bottom: 1px solid var(--dugu-line);
}

/* ------------------------- Section headings --------------------------- */
.dugu-cux h3.my-4,
.dugu-cux .dugu-cux__body h3[class*="font-semibold"] {
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: -.01em;
    color: var(--dugu-ink) !important;
    margin: 22px 2px 12px !important;
    display: flex;
    align-items: center;
    gap: 10px;
}
.dugu-cux h3.my-4::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--dugu-line-strong), transparent);
}

/* --------------------------- Product cards --------------------------- */
.dugu-cux [wire\:key^="menu-item-"] {
    border-radius: var(--dugu-radius) !important;
    border: 1px solid var(--dugu-line) !important;
    background: var(--dugu-surface) !important;
    box-shadow: var(--dugu-shadow-sm) !important;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
    overflow: hidden;
}
.dugu-cux [wire\:key^="menu-item-"]:hover {
    box-shadow: var(--dugu-shadow) !important;
    border-color: var(--dugu-line-strong) !important;
}
.dugu-cux [wire\:key^="menu-item-"]:active { transform: scale(.995); }

.dugu-cux [wire\:key^="menu-item-"] img[wire\:click^="showItemDetail"],
.dugu-cux [wire\:key^="menu-item-"] img[class*="object-cover"] {
    width: 92px !important;
    height: 92px !important;
    border-radius: var(--dugu-radius-sm) !important;
    box-shadow: var(--dugu-shadow-sm);
}
@media (min-width: 1024px) {
    .dugu-cux [wire\:key^="menu-item-"] img[class*="object-cover"] { width: 108px !important; height: 108px !important; }
}

.dugu-cux [wire\:key^="menu-item-"] .break-words { font-size: 15px !important; letter-spacing: -.01em; color: var(--dugu-ink) !important; }

/* CFA price — unmistakable. */
.dugu-cux [wire\:key^="menu-item-"] span[class*="font-semibold"][class*="text-gray-900"],
.dugu-cux [wire\:key^="menu-item-"] .font-semibold.text-gray-900 {
    display: inline-block;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: -.01em;
    color: var(--dugu-accent-ink) !important;
}
:where(html.dark) .dugu-cux [wire\:key^="menu-item-"] span[class*="font-semibold"][class*="text-gray-900"] {
    color: color-mix(in srgb, var(--dugu-accent) 72%, #fff) !important;
}

/* "+" / add control on a card. */
.dugu-cux [wire\:key^="menu-item-"] button[wire\:click^="showItemDetail"],
.dugu-cux [wire\:key^="menu-item-"] button[wire\:click^="showItemVariations"],
.dugu-cux [wire\:key^="menu-item-"] button[wire\:click^="addCartItems"] {
    border-radius: var(--dugu-radius-sm) !important;
    min-width: 40px;
    min-height: 40px;
    font-weight: 800;
}

/* Out-of-stock card. */
.dugu-cux [wire\:key^="menu-item-"].bg-gray-100,
.dugu-cux [wire\:key^="menu-item-"][class*="bg-gray-100"] { opacity: .62; filter: grayscale(.25); }

/* Qty steppers everywhere. */
.dugu-cux button[wire\:click^="addQty"],
.dugu-cux button[wire\:click^="subQty"],
.dugu-cux button[wire\:click^="addCartItems"],
.dugu-cux button[wire\:click^="subCartItems"],
.dugu-cux button[wire\:click^="subModifiers"] {
    min-width: 38px;
    min-height: 38px;
    border-radius: 11px !important;
}

/* --------------------------- Search field --------------------------- */
/* The client-catalog search input carries NO id (it is
   <input x-model.debounce.400ms="search" class="block w-full …">). The
   server-rendered fallback path uses input#menu_name. Match BOTH. */
.dugu-cux input#menu_name,
.dugu-cux input[type="text"][id*="menu"],
.dugu-cux input[type="search"],
.dugu-cux .tt-shop-client-menu-root input[x-model\.debounce\.400ms="search"],
.dugu-cux input[placeholder*="Search" i],
.dugu-cux input[placeholder*="recherch" i] {
    width: 100% !important;
    border-radius: var(--dugu-pill) !important;
    border: 1px solid var(--dugu-line-strong) !important;
    background:
        var(--dugu-surface)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23857b6c' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cpath d='M13 13l4 4'/%3E%3C/svg%3E")
        no-repeat 14px center !important;
    padding: 12px 16px 12px 40px !important;
    min-height: 48px;
    font-size: 15px !important;
    box-shadow: var(--dugu-shadow-sm);
    text-overflow: ellipsis;
}
/* The client-catalog search row is
     <div class="mx-4 my-6 grid grid-cols-1 gap-4 sm:grid-cols-3 sm:items-center">
        <div class="col-span-full md:col-span-2"><input …search…></div>
        <div class="flex … col-span-2 …">Veg + filters</div>
     </div>
   Base class `grid` already gives one full-width column on a phone — it
   collapsed ONLY because the old `[x-data*="showAll"] > .grid` flex override
   matched it (the ttShopClientMenuBrowse root's x-data JSON contains the
   word "showAll"); that clause is now removed. This block just hardens it:
   one column, search cell first, Veg/filter cluster wrapping to its own line.
   The server-rendered fallback row (input#menu_name) gets the same. Desktop
   (>=640px, sm:grid-cols-3) untouched. */
@media (max-width: 639px) {
    .dugu-cux__body .tt-shop-client-menu-root div[class*="grid-cols-1"][class*="sm:grid-cols-3"]:has(> div[class*="col-span-full"]),
    .dugu-cux__body div[class*="grid"]:has(> * > input#menu_name),
    .dugu-cux__body div[class*="grid"]:has(> input#menu_name) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 10px !important;
    }
    .dugu-cux__body .tt-shop-client-menu-root div[class*="grid-cols-1"][class*="sm:grid-cols-3"]:has(> div[class*="col-span-full"]) > *,
    .dugu-cux__body div[class*="grid"]:has(> * > input#menu_name) > * {
        grid-column: 1 / -1 !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .dugu-cux__body .tt-shop-client-menu-root div[class*="grid-cols-1"]:has(> div[class*="col-span-full"]) > div[class*="col-span-full"] { order: -1; }
    .dugu-cux__body .tt-shop-client-menu-root input[x-model\.debounce\.400ms="search"] { width: 100% !important; }
}

/* --------------------------- B8 mobile polish --------------------------- */
/* Call Waiter: a compact bottom-right FAB that never spans over menu cards. */
.dugu-cux [class*="fixed"][class*="bottom-24"][class*="justify-center"] {
    inset-inline: auto !important;
    right: 12px !important;
    left: auto !important;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 0 !important;
    width: auto !important;
    justify-content: flex-end !important;
}
.dugu-cux [class*="fixed"][class*="bottom-24"] > div { width: auto !important; gap: 8px !important; }
.dugu-cux [class*="fixed"][class*="bottom-24"] button {
    border-radius: var(--dugu-pill) !important;
    box-shadow: var(--dugu-shadow-lg) !important;
    padding: 10px 16px !important;
    font-weight: 800 !important;
}

/* Bottom cart strip: premium, clear of the FAB, safe-area aware. */
.dugu-cux [class*="fixed"][class*="bottom-1"] { bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important; padding-inline: 12px !important; }
.dugu-cux [class*="fixed"][class*="bottom-1"] > div {
    border-radius: var(--dugu-radius) !important;
    box-shadow: var(--dugu-shadow-lg) !important;
    background: rgb(var(--color-base)) !important;
}

/* --------------------- Buttons (Jetstream x-*) --------------------- */
.dugu-cux button,
.dugu-cux [type="button"],
.dugu-cux [type="submit"],
.dugu-cux a[class*="inline-flex"][class*="rounded"] {
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease, opacity .12s ease;
}

.dugu-cux button[class*="bg-skin-base"],
.dugu-cux button[wire\:click^="placeOrder"],
.dugu-cux button[wire\:click^="addCartItems"],
.dugu-cux [type="submit"][class*="bg-"] {
    border-radius: 14px !important;
    min-height: 50px;
    padding-inline: 20px !important;
    font-weight: 800 !important;
    letter-spacing: .01em;
    box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--dugu-accent) 66%, transparent);
}
.dugu-cux button[class*="bg-skin-base"]:active,
.dugu-cux button[wire\:click^="placeOrder"]:active { transform: translateY(1px) scale(.99); }

.dugu-cux button[class*="border"][class*="bg-white"],
.dugu-cux .x-secondary-button,
.dugu-cux button[wire\:click="showCartItems"] {
    border-radius: 12px !important;
    min-height: 44px;
    border: 1px solid var(--dugu-line-strong) !important;
    background: var(--dugu-surface) !important;
    color: var(--dugu-ink) !important;
    font-weight: 700 !important;
    box-shadow: var(--dugu-shadow-sm);
}

/* --------------------------- Text inputs --------------------------- */
.dugu-cux input:not([type="checkbox"]):not([type="radio"]):not(#menu_name),
.dugu-cux select,
.dugu-cux textarea {
    border-radius: 12px !important;
    border: 1px solid var(--dugu-line-strong) !important;
    background: var(--dugu-surface) !important;
    min-height: 46px;
    padding: 10px 13px !important;
    font-size: 15px !important; /* >=16px avoids iOS zoom on focus for the important ones below */
}
.dugu-cux input[type="tel"],
.dugu-cux input[inputmode="numeric"],
.dugu-cux input[type="email"] { font-size: 16px !important; }
.dugu-cux input:focus,
.dugu-cux select:focus,
.dugu-cux textarea:focus {
    outline: none !important;
    border-color: rgb(var(--color-base)) !important;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--dugu-accent) 20%, transparent) !important;
}

/* -------------------- Order-type (pickup / delivery) -------------- */
/* Radio-card group the native uses for the order-type chooser. */
.dugu-cux label:has(input[type="radio"][wire\:model*="orderType"]),
.dugu-cux label:has(input[name*="order_type"]),
.dugu-cux [wire\:click^="selectOrderType"] {
    border-radius: var(--dugu-radius) !important;
    border: 1.5px solid var(--dugu-line-strong) !important;
    background: var(--dugu-surface) !important;
    padding: 14px 16px !important;
    min-height: 60px;
    box-shadow: var(--dugu-shadow-sm);
    font-weight: 700;
}
.dugu-cux label:has(input[type="radio"]:checked) {
    border-color: rgb(var(--color-base)) !important;
    background: color-mix(in srgb, var(--dugu-accent) 8%, var(--dugu-surface)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dugu-accent) 16%, transparent);
}

/* ----------------------- Sticky bottom cart --------------------- */
.dugu-cux .fixed.bottom-0,
.dugu-cux .sticky.bottom-0,
.dugu-cux [class*="fixed"][class*="bottom-0"] {
    z-index: 55 !important;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: color-mix(in srgb, var(--dugu-surface) 94%, transparent) !important;
    border-top: 1px solid var(--dugu-line-strong) !important;
    box-shadow: 0 -12px 30px -18px rgba(23, 19, 11, .30);
    backdrop-filter: saturate(1.5) blur(12px);
    -webkit-backdrop-filter: saturate(1.5) blur(12px);
}
.dugu-cux .fixed.bottom-0 button[class*="bg-skin-base"],
.dugu-cux .sticky.bottom-0 button[class*="bg-skin-base"] {
    width: 100%;
    box-shadow: 0 16px 32px -16px color-mix(in srgb, var(--dugu-accent) 70%, transparent);
}

/* Cart line rows. */
.dugu-cux [wire\:key^="cart-item-"],
.dugu-cux [wire\:key^="order-item-"] {
    border-radius: var(--dugu-radius-sm) !important;
    border: 1px solid var(--dugu-line) !important;
    background: var(--dugu-surface) !important;
    box-shadow: var(--dugu-shadow-sm) !important;
}

/* --------------------------- Modals --------------------------- */
/* Jetstream x-dialog-modal / x-modal shells used for product detail,
   variations/modifiers, pickup datetime, delivery address. */
.dugu-cux [role="dialog"] .bg-white,
.dugu-cux .jetstream-modal .bg-white,
.dugu-cux [x-show] > [class*="rounded-lg"][class*="shadow"] {
    border-radius: var(--dugu-radius-xl) !important;
    box-shadow: var(--dugu-shadow-lg) !important;
    border: 1px solid var(--dugu-line) !important;
}
.dugu-cux [role="dialog"] [class*="rounded"] { border-radius: var(--dugu-radius) !important; }
.dugu-cux [role="dialog"] img[class*="object-cover"],
.dugu-cux [role="dialog"] img[class*="aspect-"] {
    border-radius: var(--dugu-radius) !important;
}

/* Variation / modifier option rows inside a modal. */
.dugu-cux [role="dialog"] label:has(input[type="radio"]),
.dugu-cux [role="dialog"] label:has(input[type="checkbox"]) {
    border-radius: 12px !important;
    border: 1px solid var(--dugu-line-strong) !important;
    padding: 12px 14px !important;
    min-height: 52px;
    background: var(--dugu-surface) !important;
    transition: border-color .12s ease, background .12s ease;
}
.dugu-cux [role="dialog"] label:has(input:checked) {
    border-color: rgb(var(--color-base)) !important;
    background: color-mix(in srgb, var(--dugu-accent) 9%, var(--dugu-surface)) !important;
}

/* Pickup date/time modal — emphasise the two native fields. */
.dugu-cux [wire\:model\.live="showPickupDateTimeModal"] input,
.dugu-cux [wire\:model\.live="showPickupDateTimeModal"] select {
    min-height: 50px;
    font-weight: 700;
}

/* Delivery map container. */
.dugu-cux #cart-address-map,
.dugu-cux [id*="address-map"] {
    border-radius: var(--dugu-radius) !important;
    border: 1px solid var(--dugu-line-strong) !important;
    box-shadow: var(--dugu-shadow-sm) !important;
}

/* Delivery fee / free-delivery line. */
.dugu-cux .text-green-500,
.dugu-cux [class*="text-green-5"] { color: var(--dugu-ok) !important; font-weight: 700; }

/* --------------------------- States --------------------------- */
.dugu-cux [wire\:loading] svg,
.dugu-cux .animate-spin { color: rgb(var(--color-base)); }

.dugu-cux [wire\:loading].fixed,
.dugu-cux [wire\:loading][class*="inset-0"] {
    background: color-mix(in srgb, var(--dugu-canvas) 70%, transparent) !important;
    backdrop-filter: blur(2px);
}

/* Empty menu / no results. */
.dugu-cux .dugu-cux__body :where(p, div)[class*="text-center"]:has(> svg) {
    color: var(--dugu-muted);
}

/* Kill heavy admin-style borders. */
.dugu-cux [class*="border-2"] { border-width: 1px !important; }

/* Respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
    .dugu-cux * { transition: none !important; animation-duration: .001ms !important; }
}

/* ======================= ORDER SUCCESS ======================= */
.dugu-cux__success {
    max-width: 520px;
    margin: 0 auto;
    padding: 28px 20px calc(40px + env(safe-area-inset-bottom, 0px));
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.dugu-cux__success-badge {
    width: 76px;
    height: 76px;
    display: grid;
    place-items: center;
    border-radius: var(--dugu-pill);
    color: var(--dugu-on-accent);
    background: linear-gradient(135deg, var(--dugu-ok), color-mix(in srgb, var(--dugu-ok) 60%, #000));
    box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--dugu-ok) 60%, transparent);
    margin-bottom: 18px;
}
.dugu-cux__success h1 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -.02em;
    margin: 0 0 6px;
}
.dugu-cux__success p.lead { color: var(--dugu-muted); font-size: 14px; margin: 0 0 22px; }

.dugu-cux__success-badge.is-cancelled {
    background: linear-gradient(135deg, var(--dugu-danger), color-mix(in srgb, var(--dugu-danger) 55%, #000));
    box-shadow: 0 18px 40px -16px color-mix(in srgb, var(--dugu-danger) 55%, transparent);
}

/* ---- Premium dynamic tracker (vertical, mobile-first, 6–9 steps) ----
   States + position come only from App\Enums\OrderStatus; the native
   wire:poll re-renders this component so it advances on its own. */
.dugu-cux__track {
    position: relative;
    width: 100%;
    margin: 0 0 16px;
    padding: 6px 4px 6px 0;
    text-align: left;
}
.dugu-cux__track-spine {
    position: absolute;
    left: 12px;
    top: 20px;
    bottom: 20px;
    width: 2px;
    border-radius: var(--dugu-pill);
    background: color-mix(in srgb, var(--dugu-ink) 12%, transparent);
    overflow: hidden;
}
.dugu-cux__track-spine > span {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    display: block;
    background: rgb(var(--color-base));
    transition: height .6s cubic-bezier(.4, 0, .2, 1);
}
.dugu-cux__track-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    min-height: 34px;
}
.dugu-cux__track-dot {
    position: relative;
    z-index: 1;
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: var(--dugu-pill);
    display: grid;
    place-items: center;
    background: var(--dugu-surface);
    border: 2px solid color-mix(in srgb, var(--dugu-ink) 16%, transparent);
    color: var(--dugu-on-accent);
    transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.dugu-cux__track-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--dugu-muted);
    transition: color .3s ease;
}
.dugu-cux__track-now {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--dugu-on-accent);
    background: rgb(var(--color-base));
    padding: 3px 9px;
    border-radius: var(--dugu-pill);
}

.dugu-cux__track-step.is-done .dugu-cux__track-dot {
    background: rgb(var(--color-base));
    border-color: rgb(var(--color-base));
}
.dugu-cux__track-step.is-done .dugu-cux__track-label { color: var(--dugu-ink-soft); font-weight: 700; }

.dugu-cux__track-step.is-active .dugu-cux__track-dot {
    background: rgb(var(--color-base));
    border-color: rgb(var(--color-base));
    transform: scale(1.12);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--dugu-accent) 55%, transparent);
    animation: dugu-cux-pulse 1.9s ease-out infinite;
}
.dugu-cux__track-step.is-active .dugu-cux__track-label { color: var(--dugu-ink); font-weight: 800; }

.dugu-cux__track-step.is-todo .dugu-cux__track-dot { background: var(--dugu-surface); }
.dugu-cux__track-step.is-todo .dugu-cux__track-dot { color: var(--dugu-muted); }

/* Native OrderStatus->icon() SVGs sit inside the dot. */
.dugu-cux__track-dot svg { width: 14px; height: 14px; display: block; }
.dugu-cux__track-step.is-todo .dugu-cux__track-dot svg { opacity: .8; }

/* Terminal state: progression is visually finished — no pulse, full spine,
   no "in progress" affordance on the last step. */
.dugu-cux__track[data-dugu-order-status="completed"] .dugu-cux__track-step.is-active .dugu-cux__track-dot,
.dugu-cux__track[data-dugu-order-status="delivered"] .dugu-cux__track-step.is-active .dugu-cux__track-dot,
.dugu-cux__track[data-dugu-order-status="served"] .dugu-cux__track-step.is-active .dugu-cux__track-dot {
    animation: none;
    transform: none;
}
.dugu-cux__track[data-dugu-order-status="completed"] .dugu-cux__track-now,
.dugu-cux__track[data-dugu-order-status="delivered"] .dugu-cux__track-now,
.dugu-cux__track[data-dugu-order-status="served"] .dugu-cux__track-now { display: none; }
.dugu-cux__track[data-dugu-order-status="completed"] .dugu-cux__track-spine > span,
.dugu-cux__track[data-dugu-order-status="delivered"] .dugu-cux__track-spine > span { height: 100% !important; }

/* Lower summary badge (operational ↔ commercial reconciliation). */
.dugu-cux__lower-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: var(--dugu-pill);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--dugu-accent-ink);
    background: color-mix(in srgb, var(--dugu-accent) 16%, var(--dugu-surface));
    border: 1px solid color-mix(in srgb, var(--dugu-accent) 30%, transparent);
}
.dugu-cux__lower-badge[data-dugu-lower="paid"],
.dugu-cux__lower-badge[data-dugu-lower="part_paid"] {
    color: var(--dugu-ok);
    background: color-mix(in srgb, var(--dugu-ok) 12%, var(--dugu-surface));
    border-color: color-mix(in srgb, var(--dugu-ok) 30%, transparent);
}
.dugu-cux__lower-badge[data-dugu-lower="cancelled"] {
    color: var(--dugu-danger);
    background: color-mix(in srgb, var(--dugu-danger) 10%, var(--dugu-surface));
    border-color: color-mix(in srgb, var(--dugu-danger) 28%, transparent);
}

/* Hide the native "Cooking Now" KOT pill — the DUGU tracker + lower badge
   are the single, non-contradictory status surface. */
.dugu-cux__native-success [class*="bg-yellow-100"]:not(:has(*)),
.dugu-cux__native-success span[class*="bg-yellow-100"][class*="text-yellow-800"] { display: none !important; }

/* Follow-order bar (ordering page, active table order). */
.dugu-cux__followbar {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 10px 16px 0;
    padding: 11px 15px;
    border-radius: var(--dugu-radius);
    font-weight: 800;
    font-size: 13.5px;
    text-decoration: none;
    color: var(--dugu-on-accent);
    background: rgb(var(--color-base));
    box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--dugu-accent) 66%, transparent);
}
.dugu-cux__followbar svg:last-child { margin-left: auto; }
.dugu-cux__followbar-dot {
    width: 8px; height: 8px; border-radius: var(--dugu-pill);
    background: currentColor;
    box-shadow: 0 0 0 0 currentColor;
    animation: dugu-cux-pulse 1.9s ease-out infinite;
}

/* My-orders link in the topbar. */
.dugu-cux__myorders {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border-radius: var(--dugu-pill);
    border: 1px solid var(--dugu-line-strong);
    background: var(--dugu-surface);
    color: var(--dugu-ink-soft);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.dugu-cux__myorders span { display: none; }
@media (min-width: 400px) { .dugu-cux__myorders span { display: inline; } }

@keyframes dugu-cux-pulse {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dugu-accent) 55%, transparent); }
    70%  { box-shadow: 0 0 0 10px color-mix(in srgb, var(--dugu-accent) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--dugu-accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
    .dugu-cux__track-step.is-active .dugu-cux__track-dot { animation: none; }
}

.dugu-cux__track.is-cancelled {
    padding: 16px;
    border-radius: var(--dugu-radius);
    background: color-mix(in srgb, var(--dugu-danger) 9%, var(--dugu-surface));
    border: 1px solid color-mix(in srgb, var(--dugu-danger) 26%, transparent);
    text-align: center;
}
.dugu-cux__track-cancelled { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--dugu-danger); }

/* The DUGU tracker replaces the native order-status-progress + its heading;
   hide those inside the wrapped native body, keep everything else. */
.dugu-cux__native-success > h2:first-of-type,
.dugu-cux__native-success h2.text-green-600,
.dugu-cux__native-success div:has(> div > div > [data-status-step]),
.dugu-cux__native-success div.rounded-lg:has([data-status-step]) {
    display: none !important;
}

/* Assigned staff (native Order->waiter / Order->deliveryExecutive). Name only. */
.dugu-cux__staff {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border-radius: var(--dugu-radius);
    background: var(--dugu-surface);
    border: 1px solid var(--dugu-line-strong);
    box-shadow: var(--dugu-shadow-sm);
}
.dugu-cux__staff-avatar {
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: var(--dugu-pill);
    display: grid;
    place-items: center;
    overflow: hidden;
    font-weight: 800;
    color: var(--dugu-on-accent);
    background: rgb(var(--color-base));
}
.dugu-cux__staff-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.dugu-cux__staff-text { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.dugu-cux__staff-role { font-size: 11.5px; color: var(--dugu-muted); font-weight: 600; }
.dugu-cux__staff-name { font-size: 14.5px; font-weight: 800; letter-spacing: -.01em; }
.dugu-cux__staff-line { font-size: 13.5px; font-weight: 700; color: var(--dugu-ink); }

/* Polish the NATIVE order-status-progress stepper (partials/order-status-progress). */
.dugu-cux .progress-bar-fill { background: rgb(var(--color-base)) !important; height: 3px !important; border-radius: var(--dugu-pill); }
.dugu-cux [data-status-step] {
    box-shadow: var(--dugu-shadow-sm) !important;
}
.dugu-cux [data-status-step] svg { width: 16px; height: 16px; }
.dugu-cux .animate-checkmark { color: var(--dugu-on-accent); }

.dugu-cux__ticket {
    width: 100%;
    background: var(--dugu-surface);
    border: 1px solid var(--dugu-line);
    border-radius: var(--dugu-radius-xl);
    box-shadow: var(--dugu-shadow);
    overflow: hidden;
    text-align: left;
}
.dugu-cux__ticket-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 18px;
    background: color-mix(in srgb, var(--dugu-accent) 10%, var(--dugu-surface));
    border-bottom: 1px dashed var(--dugu-line-strong);
}
.dugu-cux__ticket-order { font-weight: 800; font-size: 16px; letter-spacing: -.01em; }
.dugu-cux__ticket-type {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--dugu-accent-ink);
    padding: 4px 10px;
    border-radius: var(--dugu-pill);
    background: color-mix(in srgb, var(--dugu-accent) 16%, var(--dugu-surface));
    border: 1px solid color-mix(in srgb, var(--dugu-accent) 30%, transparent);
    white-space: nowrap;
}
.dugu-cux__ticket-rows { padding: 6px 18px 14px; }
.dugu-cux__ticket-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px solid var(--dugu-line);
    font-size: 14px;
}
.dugu-cux__ticket-row:last-child { border-bottom: 0; }
.dugu-cux__ticket-row dt { color: var(--dugu-muted); font-weight: 600; flex: none; }
.dugu-cux__ticket-row dd { margin: 0; text-align: right; font-weight: 700; color: var(--dugu-ink); }
.dugu-cux__ticket-row.is-total { padding-top: 14px; }
.dugu-cux__ticket-row.is-total dt { color: var(--dugu-ink); font-weight: 800; }
.dugu-cux__ticket-row.is-total dd { font-size: 18px; font-weight: 800; color: var(--dugu-accent-ink); }

.dugu-cux__success-actions {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 22px;
}
.dugu-cux__btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-height: 52px;
    padding: 10px 16px;
    border-radius: 14px;
    font-weight: 800;
    letter-spacing: .01em;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
}
.dugu-cux__btn-main { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.dugu-cux__btn-hint { font-size: 11.5px; font-weight: 600; opacity: .82; padding-left: 24px; }
.dugu-cux__btn--primary {
    color: var(--dugu-on-accent);
    background: rgb(var(--color-base));
    box-shadow: 0 16px 32px -16px color-mix(in srgb, var(--dugu-accent) 68%, transparent);
}
.dugu-cux__btn--ghost {
    color: var(--dugu-ink);
    background: var(--dugu-surface);
    border-color: var(--dugu-line-strong);
}
.dugu-cux__btn--ghost .dugu-cux__btn-hint { color: var(--dugu-muted); opacity: 1; }
.dugu-cux__success-foot { margin-top: 20px; font-size: 12px; color: var(--dugu-muted); }

/* ---------------------------- Footer ---------------------------- */
/* Footer = commercial CTA + social + discreet brand. Utilities live in the
   hamburger. */
.dugu-cux__footer {
    margin-top: 4px;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--dugu-line);
    background: var(--dugu-surface-2);
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: center;
    text-align: center;
}
.dugu-cux__footer-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: var(--dugu-pill);
    background: rgb(var(--color-base));
    color: var(--dugu-on-accent);
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: .01em;
    text-decoration: none;
    box-shadow: 0 12px 26px -14px color-mix(in srgb, var(--dugu-accent) 66%, transparent);
}
.dugu-cux__footer-cta:active { transform: translateY(1px); }
.dugu-cux__footer-social { display: flex; gap: 6px; align-items: center; }
.dugu-cux__social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--dugu-pill);
    border: 1px solid var(--dugu-line-strong);
    background: var(--dugu-surface);
    color: var(--dugu-ink-soft);
    text-decoration: none;
}
.dugu-cux__social:hover { color: var(--dugu-accent-ink); border-color: var(--dugu-accent-ink); }
.dugu-cux__footer-brand {
    margin: 0;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--dugu-muted);
    opacity: .8;
}

/* --------------------- Hamburger + drawer ---------------------- */
.dugu-cux__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    padding: 0;
    border-radius: var(--dugu-pill);
    border: 1px solid var(--dugu-line-strong);
    background: var(--dugu-surface);
    color: var(--dugu-ink-soft);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.dugu-cux__burger:active { transform: scale(.96); }

.dugu-cux__drawer {
    margin: 0 0 0 auto;
    padding: 0;
    max-width: 340px;
    width: min(88vw, 340px);
    height: 100%;
    max-height: 100%;
    border: 0;
    background: transparent;
    color: var(--dugu-ink);
    overflow: visible;
}
.dugu-cux__drawer::backdrop { background: rgba(10, 8, 4, .44); backdrop-filter: blur(2px); }
.dugu-cux__drawer[open] { animation: dugu-drawer-in .18s ease; }
@keyframes dugu-drawer-in { from { transform: translateX(16px); opacity: .4; } }
.dugu-cux__drawer-panel {
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    padding: 16px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    background: var(--dugu-canvas);
    border-left: 1px solid var(--dugu-line);
    box-shadow: var(--dugu-shadow-lg);
    overflow-y: auto;
}
.dugu-cux__drawer-head { display: flex; align-items: center; justify-content: space-between; }
.dugu-cux__drawer-title { font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.dugu-cux__drawer-x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0;
    border-radius: var(--dugu-pill); border: 1px solid var(--dugu-line-strong);
    background: var(--dugu-surface); color: var(--dugu-ink-soft); cursor: pointer;
}

.dugu-cux__estab {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    border-radius: var(--dugu-radius-sm);
    border: 1px solid var(--dugu-line-strong);
    background: var(--dugu-surface);
}
.dugu-cux__estab-label {
    font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
    text-transform: uppercase; color: var(--dugu-muted);
}
.dugu-cux__estab-name { font-size: 13.5px; font-weight: 800; color: var(--dugu-ink); }
.dugu-cux__estab-lock { font-size: 11px; font-weight: 600; color: var(--dugu-muted); }
.dugu-cux__estab-switch summary {
    margin-top: 6px; font-size: 12px; font-weight: 800;
    color: var(--dugu-accent-ink); cursor: pointer; list-style: none;
}
.dugu-cux__estab-switch summary::-webkit-details-marker { display: none; }
.dugu-cux__estab-switch ul { margin: 8px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; }
.dugu-cux__estab-switch a {
    display: block; padding: 8px 10px; border-radius: var(--dugu-radius-sm);
    font-size: 13px; font-weight: 700; color: var(--dugu-ink-soft); text-decoration: none;
}
.dugu-cux__estab-switch a:hover { background: color-mix(in srgb, var(--dugu-accent) 10%, transparent); }
.dugu-cux__estab-switch a.is-current { color: var(--dugu-accent-ink); background: color-mix(in srgb, var(--dugu-accent) 14%, transparent); }

.dugu-cux__drawer-nav { display: flex; flex-direction: column; gap: 2px; }
.dugu-cux__drawer-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 12px;
    border-radius: var(--dugu-radius-sm);
    font-size: 14px;
    font-weight: 700;
    color: var(--dugu-ink);
    text-decoration: none;
}
.dugu-cux__drawer-link svg { color: var(--dugu-accent-ink); flex: none; }
.dugu-cux__drawer-link:hover { background: color-mix(in srgb, var(--dugu-accent) 9%, transparent); }
.dugu-cux__drawer .dugu-cux__wifi { margin-top: auto; }

/* Native Wi-Fi (restaurants.wifi_name / wifi_password / show_wifi_icon) —
   a compact <details> disclosure. Collapsed = one pill-height row. */
.dugu-cux__wifi {
    min-width: 0;
    border-radius: var(--dugu-radius-sm);
    border: 1px solid var(--dugu-line-strong);
    background: var(--dugu-surface);
    text-align: left;
    overflow: hidden;
}
.dugu-cux__wifi-summary {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--dugu-ink-soft);
    cursor: pointer;
    list-style: none;
    white-space: nowrap;
}
.dugu-cux__wifi-summary::-webkit-details-marker { display: none; }
.dugu-cux__wifi-title { font-weight: 800; color: var(--dugu-accent-ink); }
.dugu-cux__wifi-ssid {
    min-width: 0;
    max-width: 42vw;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--dugu-ink);
}
.dugu-cux__wifi-cta {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 800;
    color: var(--dugu-accent-ink);
}
.dugu-cux__wifi[open] .dugu-cux__wifi-cta { opacity: .55; }
.dugu-cux__wifi-panel {
    padding: 4px 12px 10px;
    border-top: 1px solid var(--dugu-line);
}
.dugu-cux__wifi-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 0;
    font-size: 13px;
}
.dugu-cux__wifi-label { color: var(--dugu-muted); font-weight: 600; min-width: 72px; }
.dugu-cux__wifi-value { font-weight: 800; letter-spacing: .02em; word-break: break-all; }
.dugu-cux__wifi-actions { display: flex; gap: 6px; margin-top: 6px; }
.dugu-cux__wifi-btn {
    padding: 4px 12px;
    border-radius: var(--dugu-pill);
    border: 1px solid var(--dugu-line-strong);
    background: var(--dugu-surface-2);
    color: var(--dugu-ink-soft);
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
}

/* The native "New Order" link inside the wrapped success body is the same
   intent as our two explicit CTAs — remove the ambiguous duplicate. */
.dugu-cux__native-success a[href*="new_order"],
.dugu-cux__native-success a[href*="current_order"],
.dugu-cux__native-success [class*="primary-link"] { display: none !important; }

/* =====================================================================
   Phone verification gate (DUGU Sender OTP). Mobile-first overlay shown
   between the native phone step and native order placement.
   ===================================================================== */
.dugu-cux__otp {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.dugu-cux__otp-scrim {
    position: absolute;
    inset: 0;
    background: rgba(8, 10, 14, .55);
    backdrop-filter: blur(2px);
}
.dugu-cux__otp-panel {
    position: relative;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    background: var(--dugu-surface, #fff);
    color: var(--dugu-ink, #14181f);
    border-radius: 20px 20px 0 0;
    padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -12px 40px rgba(8, 10, 14, .28);
}
@media (min-width: 520px) {
    .dugu-cux__otp { align-items: center; }
    .dugu-cux__otp-panel { border-radius: 20px; }
}
.dugu-cux__otp-x {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border: none;
    background: transparent;
    color: var(--dugu-muted, #6b7280);
    cursor: pointer;
}
.dugu-cux__otp-title { margin: 2px 0 4px; font-size: 18px; font-weight: 900; }
.dugu-cux__otp-sub { margin: 0 0 12px; font-size: 13.5px; color: var(--dugu-muted, #6b7280); }
.dugu-cux__otp-notice {
    margin: 0 0 10px; padding: 8px 12px; border-radius: 12px;
    background: rgba(16, 152, 84, .12); color: #0c7a45; font-size: 13px; font-weight: 700;
}
.dugu-cux__otp-error {
    margin: 0 0 10px; padding: 8px 12px; border-radius: 12px;
    background: rgba(200, 40, 40, .10); color: #b42020; font-size: 13px; font-weight: 700;
}
.dugu-cux__otp-label { display: block; font-size: 12px; font-weight: 800; color: var(--dugu-muted, #6b7280); margin-bottom: 6px; }
.dugu-cux__otp-input {
    width: 100%;
    padding: 13px 14px;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .32em;
    text-align: center;
    border: 1.5px solid var(--dugu-line-strong, #d3d8e0);
    border-radius: 14px;
    background: var(--dugu-surface-2, #f6f7f9);
    color: inherit;
}
.dugu-cux__otp-input:focus { outline: 2px solid var(--dugu-accent, #111827); outline-offset: 1px; }
.dugu-cux__otp-verify {
    width: 100%;
    margin-top: 12px;
    padding: 13px 16px;
    border: none;
    border-radius: 14px;
    background: var(--dugu-accent, #111827);
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    cursor: pointer;
}
.dugu-cux__otp-verify[disabled] { opacity: .6; cursor: progress; }
.dugu-cux__otp-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
.dugu-cux__otp-link {
    border: none;
    background: transparent;
    color: var(--dugu-accent, #111827);
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    padding: 4px 2px;
    text-decoration: underline;
}
.dugu-cux__otp-link[disabled] { opacity: .5; cursor: default; text-decoration: none; }