.waiter-app-shell {
    touch-action: manipulation;
}

@media (max-width: 639px) {
    .waiter-app-shell .discount-products-description {
        display: none;
    }
}

/*
 * Waiter app shell styles.
 * Mobile-first: the app is designed for phones/tablets used by waiters on the floor.
 * Follows the same viewport-locking approach as the Register shell so the page
 * never rubber-bands and inner lists scroll instead.
 */

:root {
    --nexus-waiter-shell-safe-bottom: var(--nexus-safe-bottom-inset, env(safe-area-inset-bottom, 0px));
    --nexus-waiter-shell-max-width: 860px;
    --nexus-waiter-page-gutter: 12px;
}

#reconnect-modal > .initial-error-state,
#reconnect-modal > .final-error-state {
    width: min(420px, calc(100% - 32px));
}

/* The viewport lock itself lives inline in WaiterLayout (same approach as RegisterLayout). */

/* Hidden scrollbars for inner scroll areas (chat list, conversation). */
.waiter-scroll {
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior: contain;
}

.waiter-scroll::-webkit-scrollbar {
    display: none;
}

.waiter-catalog-category-navigation {
    border-bottom: 1px solid transparent;
}

[data-testid="waiter-catalog-root"]:has(.waiter-flow-header--scrolled) .waiter-catalog-category-navigation {
    border-bottom-color: var(--color-divider);
}

[data-testid="waiter-catalog-root"] .waiter-flow-header--scrolled {
    box-shadow: none;
}

/* Horizontal chip rows (salons, filters). */
.waiter-chip-row {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}

.waiter-chip-row::-webkit-scrollbar {
    display: none;
}

/* Chat-style table list rows. */
.waiter-table-row {
    background: color-mix(in srgb, var(--table-state-bg, #e9ecef) 78%, transparent);
    transition: background-color 120ms ease-in-out, transform 120ms ease-in-out;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.waiter-table-row--free {
    background: #ffffff;
}

[data-testid="waiter-catalog-product-list"] .waiter-table-row {
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.waiter-table-row:active {
    transform: scale(0.985);
}

.waiter-table-number {
    background: var(--table-state-badge, #ced4da);
    color: var(--table-state-badge-text, #333333);
}

.waiter-table-number * {
    color: inherit !important;
}

/* WhatsApp-style table conversation. */
.waiter-chat-page {
    background: var(--Background, #f5f5f5);
}

.waiter-chat-header {
    background: var(--Background, #f5f5f5);
}

.waiter-flow-header--white {
    background: #fff;
}

.waiter-flow-header--scrolled {
    box-shadow: 0 1px 0 var(--HighlightText, #d8dbe0);
}

.waiter-chat-header-action {
    background: rgba(255, 255, 255, 0.7);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

[data-testid="waiter-product-back-button"],
[data-testid="waiter-order-details-back-button"] {
    border: 1px solid rgba(31, 41, 55, 0.12);
}

.waiter-chat-scroll {
    background: var(--Background, #f5f5f5);
}

/* While the note composer rides above the keyboard, Boot.js sets its lift here, so the feed keeps its
   newest messages just above the composer, as in messaging apps. */
.waiter-chat-page .waiter-chat-scroll {
    padding-bottom: calc(12px + var(--nexus-waiter-keyboard-lift, 0px));
}

.waiter-cart-dining-indicator {
    pointer-events: none;
    transition: transform 220ms cubic-bezier(.2, .8, .2, 1);
}

.waiter-app-shell [data-testid="waiter-catalog-root"] #nav-container [data-testid="category-item"] > div > div {
    border: 1px solid var(--color-primary-employee);
}

.waiter-app-shell [data-testid="waiter-catalog-root"] #nav-container [data-testid="category-item"]:not(.active) h2 {
    color: var(--color-primary-employee);
}

.waiter-cart-dining-indicator--right {
    transform: translateX(38px);
}

.waiter-cart-line-quantity [role="status"] {
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    .waiter-cart-dining-indicator { transition: none; }
}

.waiter-call-banner,
.waiter-message-in,
.waiter-message-out {
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.12);
}

.waiter-message-in {
    position: relative;
    border-radius: 4px 16px 16px 16px;
}


.waiter-message-out {
    position: relative;
    border-radius: 16px 4px 16px 16px;
}

.waiter-chat-action {
    border: 0;
    border-radius: 999px;
    min-height: 32px;
    padding: 6px 12px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-shadow: 0 1px 1px rgba(15, 23, 42, 0.08);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.waiter-chat-action-primary {
    background: var(--color-primary-employee);
}

.waiter-chat-action-disabled {
    opacity: 0.45;
}

.waiter-chat-action:active:not(:disabled) {
    transform: scale(0.985);
}

.waiter-chat-input {
    min-width: 0;
}

/* Conversation timeline. */
.waiter-conversation-day-divider {
    display: flex;
    align-items: center;
    gap: 12px;
}

.waiter-conversation-day-divider::before,
.waiter-conversation-day-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
}

.waiter-event-bubble {
    overflow-wrap: break-word;
}

/* Bottom action bar of the conversation page. */
.waiter-bottom-bar {
    padding-bottom: max(var(--nexus-waiter-shell-safe-bottom), 8px);
    background: #ffffff;
    box-shadow: 0 -4px 16px rgba(15, 23, 42, 0.06);
}

.waiter-bottom-bar.waiter-chat-composer {
    background: var(--Background, #f5f5f5);
    box-shadow: 0 -1px 0 rgba(15, 23, 42, 0.08);
}

/*
 * On iOS Safari, focusing a waiter text field can pan the visual viewport down
 * by the keyboard height. Keep the shell at its stable height while the field
 * is focused so its bottom action bar stays at the visual viewport's bottom.
 */
html:has([data-nexus-waiter-keyboard-anchor="true"]:focus) {
    --nexus-waiter-shell-viewport-height: var(--nexus-stable-viewport-height);
}

@supports (-webkit-touch-callout: none) {
    @media (max-width: 639px) and (display-mode: browser) {
        html:has([data-testid="waiter-dashboard-root"]:not([data-embedded="true"]), [data-testid="waiter-catalog-root"], [data-testid="waiter-payment-method-root"], [data-testid="waiter-manual-payment-root"], .wm-shell--rail:not(.wm-shell--desktop-only)):not(:has(input:focus, .waiter-action-sheet-overlay)) {
            --nexus-waiter-shell-viewport-height: calc(100lvh + 64px);
        }

        html:has([data-testid="waiter-dashboard-root"]):not(:has(input:focus, .waiter-action-sheet-overlay)) [data-testid="waiter-dashboard-table-list"] {
            padding-bottom: max(112px, calc(100lvh - 100dvh + 16px)) !important;
        }

        html:not(:has(input:focus, .waiter-action-sheet-overlay)) [data-testid="waiter-catalog-product-list"],
        html:not(:has(input:focus, .waiter-action-sheet-overlay)) [data-testid="waiter-payment-method-root"] > main,
        html:not(:has(input:focus, .waiter-action-sheet-overlay)) [data-testid="waiter-manual-payment-root"] > .waiter-cash-payment-layout {
            padding-bottom: max(112px, calc(100lvh - 100dvh + 16px)) !important;
        }
    }
}

/*
 * Action sheets (table menu, per-order menu): the shared Modal repositioned as a
 * mobile bottom sheet. !important intentionally outranks the modal's centered
 * positioning utilities.
 */
.waiter-card-scanning-sheet {
    position: absolute !important;
    box-sizing: border-box;
}

.waiter-action-sheet {
    bottom: 0;
    left: 0;
    right: 0;
    margin-inline: auto;
    width: 100%;
    max-width: none;
    padding-bottom: max(var(--nexus-waiter-shell-safe-bottom), 8px);
    overflow: hidden;
}

.waiter-action-sheet--flush .waiter-action-sheet-item:first-child {
    border-radius: 16px 16px 0 0;
}

.waiter-tip-selector .app-tip-choice {
    border-color: var(--color-primary-employee);
    color: var(--color-primary-employee);
}

.waiter-tip-selector .app-tip-choice[aria-pressed="true"] {
    background: var(--color-primary-employee);
    color: #ffffff;
}
@keyframes waiter-sheet-slide-up {
    0% {
        translate: 0 100%;
        opacity: 0.6;
    }

    100% {
        translate: 0 0;
        opacity: 1;
    }
}

/*
 * Waiter confirmations and editors remain centered dialogs on tablet/desktop,
 * but use the same edge-to-edge bottom-sheet composition as the App on phones.
 * The mobile override is deliberately scoped to opt-in Waiter surfaces so the
 * shared Modal and RetailModal components keep their behavior elsewhere.
 */
@media (max-width: 639px) {
    .fixed.inset-0:has(> .waiter-mobile-bottom-sheet) {
        padding-right: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 0 !important;
    }

    .waiter-mobile-bottom-sheet-backdrop {
        opacity: 1 !important;
        background: rgba(0, 0, 0, 0.2) !important;
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }

    .waiter-mobile-bottom-sheet {
        box-sizing: border-box;
        top: auto !important;
        right: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        align-self: flex-end !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: calc(var(--nexus-waiter-shell-viewport-height, 100dvh) - var(--nexus-safe-top-inset, 0px));
        overflow-y: auto;
        transform: none !important;
        border-radius: 24px 24px 0 0 !important;
        background: #ffffff !important;
        box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.18);
        animation: waiter-sheet-slide-up 220ms cubic-bezier(0.2, 0.8, 0.3, 1) !important;
    }

    .waiter-mobile-bottom-sheet--unpadded {
        padding-bottom: var(--nexus-waiter-shell-safe-bottom) !important;
    }

    .waiter-mobile-bottom-sheet--padded-24 {
        padding-bottom: max(24px, var(--nexus-waiter-shell-safe-bottom)) !important;
    }

    .waiter-mobile-bottom-sheet--padded-40 {
        padding-bottom: max(40px, var(--nexus-waiter-shell-safe-bottom)) !important;
    }

    /* While the keyboard is up, a sheet stays above it with its buttons: the sheet's box follows the
       visible part of the screen instead of the whole screen. */
    .fixed.inset-0:has(> .waiter-mobile-bottom-sheet :is(input, textarea):focus) {
        top: var(--nexus-visible-viewport-offset-top, 0px) !important;
        bottom: auto !important;
        height: var(--nexus-visible-viewport-height, 100dvh) !important;
    }

    .fixed.inset-0:has(> .waiter-mobile-bottom-sheet :is(input, textarea):focus) > .waiter-mobile-bottom-sheet {
        max-height: var(--nexus-visible-viewport-height, 100dvh);
    }
}

@media (max-width: 639px) and (prefers-reduced-motion: reduce) {
    .waiter-mobile-bottom-sheet {
        animation: none !important;
    }
}

/* Floating cart button container of the catalog, fading the list out underneath. */
.waiter-floating-cart {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--nexus-waiter-shell-max-width);
    padding: 24px 16px 0;
    z-index: 10;
    background: linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, rgba(245, 245, 245, 0.95) 40%);
    pointer-events: none;
}

.waiter-floating-cart > * {
    pointer-events: auto;
}

.waiter-action-sheet.waiter-action-sheet--flush {
    padding-bottom: 0;
}

html:has(.waiter-action-sheet-overlay),
body#app:has(.waiter-action-sheet-overlay) {
    background-color: #ffffff !important;
}

.waiter-action-sheet-item {
    transition: background-color 120ms ease-in-out;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.waiter-action-sheet-item:active:not(:disabled) {
    background-color: var(--color-light-border);
}

.waiter-action-sheet-item:hover:not(:disabled),
.waiter-action-sheet-item:focus-visible:not(:disabled) {
    background-color: var(--color-light-border);
}

.waiter-action-sheet-item:disabled {
    opacity: 0.4;
}

.waiter-table-menu-item + .waiter-table-menu-item {
    border-top: 1px solid var(--color-highlight-text, #e0e0e0);
}

/* "−" on a single cart item slides its card aside to show Delete, as in App mode. */
.waiter-cart-line-card {
    transition: transform 300ms cubic-bezier(.2, .8, .2, 1), opacity 300ms ease;
}

.waiter-cart-line-card--revealed {
    transform: translateX(-76px);
}

.waiter-cart-line-card--removing {
    transform: translateX(-100%);
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .waiter-cart-line-card {
        transition: none;
    }
}

/* The order card's actions menu answers a tap like the header's icon buttons. */
.waiter-order-menu-trigger {
    border-radius: 12px;
    transition: background-color 120ms ease-in-out, transform 120ms ease-in-out;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.waiter-order-menu-trigger:active:not(:disabled) {
    background-color: rgba(15, 23, 42, 0.08);
    transform: scale(0.9);
}

/* Star toggle marking a table as one of the waiter's own. */
.waiter-favorite-toggle {
    transition: background-color 120ms ease-in-out, transform 120ms ease-in-out;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

.waiter-favorite-toggle:active {
    background-color: rgba(15, 23, 42, 0.06);
    transform: scale(0.9);
}

/* The star keeps its pose and only fills; each tap pops it once. The two class names alternate so
   every tap restarts the animation. */
.waiter-favorite-toggle--pop-a > span {
    animation: waiter-favorite-pop-a 320ms cubic-bezier(.2, .8, .2, 1);
}

.waiter-favorite-toggle--pop-b > span {
    animation: waiter-favorite-pop-b 320ms cubic-bezier(.2, .8, .2, 1);
}

@keyframes waiter-favorite-pop-a {
    0% { transform: scale(1); }
    45% { transform: scale(1.3); }
    75% { transform: scale(0.94); }
    100% { transform: scale(1); }
}

@keyframes waiter-favorite-pop-b {
    0% { transform: scale(1); }
    45% { transform: scale(1.3); }
    75% { transform: scale(0.94); }
    100% { transform: scale(1); }
}

.waiter-favorite-toggle svg {
    transition: fill 220ms ease, stroke 220ms ease;
}

@media (prefers-reduced-motion: reduce) {
    .waiter-favorite-toggle,
    .waiter-favorite-toggle svg {
        transition: none;
    }

    .waiter-favorite-toggle > span {
        animation: none;
    }
}

#waiter-dashboard-search,
#waiter-dashboard-search:focus {
    border-color: transparent;
}

.waiter-dashboard-salon-chips-wrapper {
    border-bottom: 1px solid transparent;
    transition: border-color 150ms ease;
}

.waiter-dashboard-scrolled .waiter-dashboard-salon-chips-wrapper {
    border-bottom-color: var(--color-divider);
}

/* Unread badge pulse, mirrors the register sidebar badge animation. */
.waiter-unread-badge {
    animation: waiter-badge-pop 250ms ease-out;
}

@keyframes waiter-badge-pop {
    0% {
        transform: scale(0.4);
        opacity: 0;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/*
 * The Waiter app is used both handheld and from a counter/tablet. Keep the
 * phone composition as the base, then let the workspace grow only where a
 * wider layout makes scanning lists faster. These rules deliberately affect
 * presentation only; the DOM order and all interactions stay unchanged.
 */
.waiter-tip-mode-toggle {
    position: relative;
    isolation: isolate;
}

.waiter-invoice-form {
    width: 100%;
    max-width: 840px;
    margin-inline: auto;
    padding-top: 16px;
}

.waiter-food-order-content {
    width: 100%;
    max-width: 840px;
    margin-inline: auto;
}

.waiter-tip-mode-toggle::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 50%;
    border-radius: inherit;
    background: var(--color-primary-employee);
    transform: translateX(0);
    transition: transform 180ms linear;
    pointer-events: none;
}

.waiter-tip-mode-toggle[data-percentage="true"]::before {
    transform: translateX(100%);
}

.waiter-tip-mode-toggle > button {
    position: relative;
    background-color: transparent !important;
    transition: color 180ms linear;
}

@media (prefers-reduced-motion: reduce) {
    .waiter-tip-mode-toggle::before,
    .waiter-tip-mode-toggle > button {
        transition: none;
    }
}

.waiter-app-shell,
.waiter-modal-viewport {
    max-width: var(--nexus-waiter-shell-max-width);
}

@media (min-width: 640px) {
    :root {
        --nexus-waiter-shell-max-width: 960px;
        --nexus-waiter-page-gutter: 24px;
    }

    .waiter-app-shell:has([data-testid="waiter-dashboard-root"]:not([data-embedded="true"])) {
        max-width: none;
    }

    .waiter-dashboard-salon-chips-wrapper nav > div {
        padding-inline: var(--nexus-waiter-page-gutter);
    }

    .waiter-app-shell [data-testid="waiter-dashboard-root"] > header,
    .waiter-app-shell [data-testid="waiter-catalog-root"] .waiter-chat-header,
    .waiter-app-shell [data-testid="waiter-catalog-root"] > div:first-child > .px-12,
    .waiter-app-shell [data-testid="waiter-catalog-root"] .waiter-catalog-category-navigation > nav,
    .waiter-app-shell [data-testid="waiter-cart-root"] > header,
    .waiter-app-shell [data-testid="waiter-product-root"] > header,
    .waiter-app-shell [data-testid="waiter-payment-method-root"] > header,
    .waiter-app-shell [data-testid="waiter-manual-payment-root"] > header,
    .waiter-app-shell [data-testid="waiter-card-payment-root"] > header,
    .waiter-app-shell [data-testid="waiter-food-order-page"] > header,
    .waiter-app-shell .waiter-settings-page > header,
    .waiter-app-shell .waiter-settings-page > main,
    .waiter-app-shell [data-testid="waiter-settings-root"] > header,
    .waiter-app-shell [data-testid="waiter-settings-skeleton"] > header,
    .waiter-app-shell [data-testid="waiter-reports-root"] > header {
        padding-inline: var(--nexus-waiter-page-gutter);
    }

    .waiter-app-shell [data-testid="waiter-dashboard-table-list"],
    .waiter-app-shell [data-testid="waiter-catalog-product-list"],
    .waiter-app-shell [data-testid="waiter-cart-root"] > main,
    .waiter-app-shell [data-testid="waiter-payment-method-root"] > main,
    .waiter-app-shell [data-testid="waiter-manual-payment-root"] > main,
    .waiter-app-shell [data-testid="waiter-settings-root"] > main,
    .waiter-app-shell [data-testid="waiter-settings-skeleton"] > main,
    .waiter-app-shell [data-testid="waiter-reports-root"] > main,
    .waiter-app-shell [data-testid="waiter-food-order-page"] > .px-12,
    .waiter-app-shell [data-testid="waiter-food-order-page"] [data-testid="serving-order-editor"] > :is(main, footer) {
        padding-inline: var(--nexus-waiter-page-gutter);
    }

    .waiter-app-shell [data-testid="waiter-table-root"] > header,
    .waiter-app-shell [data-testid="waiter-conversation-filter-chips"],
    .waiter-app-shell [data-testid="waiter-table-root"] .waiter-chat-scroll,
    .waiter-app-shell [data-testid="waiter-table-root"] .waiter-bottom-bar,
    .waiter-app-shell [data-testid="waiter-product-root"] > .px-16,
    .waiter-app-shell [data-testid="waiter-product-root"] .waiter-scroll > div,
    .waiter-app-shell [data-testid="waiter-product-root"] .waiter-bottom-bar {
        padding-inline: var(--nexus-waiter-page-gutter);
    }

    .waiter-app-shell [data-testid="waiter-dashboard-table-list"],
    .waiter-app-shell [data-testid="waiter-catalog-product-list"] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-content: start;
    }

    .waiter-app-shell [data-testid="waiter-dashboard-table-list"] > :not(.waiter-table-row),
    .waiter-app-shell [data-testid="waiter-catalog-product-list"] > :not(.waiter-table-row) {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1024px) {
    :root {
        --nexus-waiter-shell-max-width: none;
        --nexus-waiter-page-gutter: 32px;
    }

    .waiter-app-shell [data-testid="waiter-dashboard-table-list"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 12px;
        row-gap: 12px;
    }

    .waiter-app-shell [data-testid="waiter-catalog-product-list"] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        column-gap: 12px;
        row-gap: 12px;
    }

    .waiter-app-shell:has(.wm-shell--rail) [data-testid="waiter-dashboard-root"] > header > div {
        max-width: none;
    }

    .waiter-app-shell [data-testid="waiter-cart-root"] > main,
    .waiter-app-shell [data-testid="waiter-payment-method-root"] > main,
    .waiter-app-shell [data-testid="waiter-manual-payment-root"] > main,
    .waiter-app-shell [data-testid="waiter-settings-root"] > main,
    .waiter-app-shell [data-testid="waiter-settings-skeleton"] > main,
    .waiter-app-shell [data-testid="waiter-reports-root"] > main {
        align-self: center;
        max-width: 840px;
        width: 100%;
    }

    .waiter-app-shell [data-testid="waiter-reports-root"] > main {
        max-width: 960px;
    }

    .waiter-app-shell [data-testid="waiter-product-details-root"] .waiter-scroll > div,
    .waiter-app-shell [data-testid="waiter-product-details-root"] .waiter-bottom-bar > * {
        margin-inline: auto;
        max-width: 840px;
    }

    .waiter-app-shell [data-testid="waiter-table-root"] > header,
    .waiter-app-shell [data-testid="waiter-conversation-filter-chips"],
    .waiter-app-shell [data-testid="waiter-table-root"] .waiter-chat-scroll {
        align-self: center;
        max-width: 900px;
        padding-inline: 0;
        width: 100%;
    }

    .waiter-app-shell [data-testid="waiter-table-root"] .waiter-bottom-bar > * {
        margin-inline: auto;
        max-width: 900px;
        width: 100%;
    }

    .waiter-floating-cart {
        padding-inline: 32px;
    }

    .waiter-floating-cart > * {
        margin-inline: auto;
        max-width: 640px;
    }

    .waiter-app-shell .waiter-modal-viewport:not([hidden]) {
        z-index: 40;
        display: flex;
        align-items: flex-end;
        justify-content: center;
    }

    .waiter-modal-viewport > * {
        max-width: 560px;
        width: 100%;
    }
}

@media (max-width: 639px) {
    :is([data-testid="waiter-cart-custom-tip-sheet"], [data-testid="waiter-custom-tip-sheet"]) {
        top: var(--nexus-visible-viewport-offset-top, 0px);
        bottom: auto;
        height: var(--nexus-visible-viewport-height, 100dvh);
    }

    :is([data-testid="waiter-cart-custom-tip-sheet"], [data-testid="waiter-custom-tip-sheet"]) > .waiter-action-sheet-overlay {
        position: absolute;
    }

    :is([data-testid="waiter-cart-custom-tip-sheet"], [data-testid="waiter-custom-tip-sheet"]) .waiter-custom-tip-dialog {
        bottom: 0;
        max-height: var(--nexus-visible-viewport-height, 100dvh);
        overflow-y: auto;
    }
}

@media (min-width: 640px) {
    [data-testid="waiter-cart-custom-tip-sheet"],
    [data-testid="waiter-custom-tip-sheet"] {
        width: 100%;
        max-width: none;
    }

    [data-testid="waiter-cart-custom-tip-sheet"] > *,
    [data-testid="waiter-custom-tip-sheet"] > * {
        max-width: none;
    }

    [data-testid="waiter-cart-custom-tip-sheet"] .waiter-custom-tip-dialog,
    [data-testid="waiter-custom-tip-sheet"] > .waiter-mobile-bottom-sheet {
        top: 50% !important;
        left: 50% !important;
        bottom: auto !important;
        width: min(560px, calc(100% - 48px)) !important;
        max-height: calc(100dvh - 48px);
        overflow-y: auto;
        transform: translate(-50%, -50%) !important;
        border-radius: 24px;
        animation: none !important;
    }
}

.waiter-action-sheet-overlay::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(max(env(safe-area-inset-top), env(safe-area-max-inset-top, 0px)) + 16px);
    background: linear-gradient(to bottom, #F5F5F5, transparent);
    pointer-events: none;
    z-index: 2;
    transition: opacity 300ms ease;
}

.waiter-action-sheet-overlay--closing::before {
    opacity: 0;
}

@media (max-width: 639px) {
    .waiter-main-snackbar {
        left: 50%;
        right: auto !important;
        transform: translateX(-50%);
    }
}

.waiter-profile-cropper .cropper-view-box {
    border-radius: 50%;
    outline: none;
    box-shadow: 0 0 0 2px white, 0 0 0 3px rgba(0, 0, 0, 0.3);
}

.waiter-profile-cropper .cropper-face {
    clip-path: circle(50%);
    background: transparent;
    opacity: 1;
}

.waiter-profile-cropper .cropper-dashed,
.waiter-profile-cropper .cropper-center,
.waiter-profile-cropper .cropper-point.point-ne,
.waiter-profile-cropper .cropper-point.point-nw,
.waiter-profile-cropper .cropper-point.point-se,
.waiter-profile-cropper .cropper-point.point-sw {
    display: none;
}

.waiter-profile-cropper .cropper-line {
    opacity: 0;
}

.waiter-profile-cropper .cropper-point.point-e,
.waiter-profile-cropper .cropper-point.point-n,
.waiter-profile-cropper .cropper-point.point-w,
.waiter-profile-cropper .cropper-point.point-s {
    width: 14px;
    height: 14px;
    border: 2px solid white;
    border-radius: 50%;
    background: var(--color-primary-employee);
    opacity: 1;
}

.waiter-profile-cropper .cropper-point.point-e {
    right: -7px;
    margin-top: -7px;
}

.waiter-profile-cropper .cropper-point.point-n {
    top: -7px;
    margin-left: -7px;
}

.waiter-profile-cropper .cropper-point.point-w {
    left: -7px;
    margin-top: -7px;
}

.waiter-profile-cropper .cropper-point.point-s {
    bottom: -7px;
    margin-left: -7px;
    left: 50%;
}

.waiter-settings-avatar:has(input:focus-visible) > div:first-child {
    box-shadow: 0 0 0 3px var(--color-primary-employee);
}

[data-testid="waiter-card-payment-confirmation"] {
    animation: waiter-payment-confirmation-enter 180ms ease-out;
}

@keyframes waiter-payment-confirmation-enter {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    [data-testid="waiter-card-payment-confirmation"] {
        animation: none;
    }
}

@media (min-width: 640px) {
    .waiter-partner-dialog {
        position: relative !important;
        inset: auto;
        margin: auto;
    }
}

@media (max-width: 639px) {
    .waiter-partner-dialog {
        top: auto;
        bottom: 0;
        width: 100% !important;
        border-radius: 24px 24px 0 0;
    }

    /* The partner search keeps room for its results but always fits above the keyboard, and lays its
       buttons out side by side at equal width like the other Waiter sheets. */
    .waiter-partner-dialog.waiter-mobile-bottom-sheet {
        height: min(380px, calc(var(--nexus-visible-viewport-height, 100dvh) - var(--nexus-safe-top-inset, 0px) - 16px)) !important;
    }

    .waiter-partner-dialog .nexus-partner-modal-footer {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .waiter-partner-dialog .nexus-partner-modal-footer > * {
        width: 100%;
    }
}

@media (min-width: 640px) {
    .waiter-action-sheet-overlay--closing .waiter-custom-tip-dialog {
        opacity: 0;
    }

    .waiter-custom-tip-dialog {
        margin: 0 !important;
        transition: opacity 300ms ease;
    }
}
[data-testid="waiter-manual-payment-root"] {
    container: waiter-manual-payment / inline-size;
}

@media (min-width: 640px) {
    .waiter-action-sheet-overlay > .waiter-action-sheet {
        top: 50%;
        right: auto;
        bottom: auto;
        left: 50%;
        width: min(560px, calc(100% - 48px));
        max-height: calc(100dvh - 48px);
        margin: 0;
        overflow-y: auto;
        border-radius: 24px;
        transform: translate(-50%, -50%);
        animation: waiter-dialog-enter 180ms ease-out;
        transition: opacity 300ms ease;
    }

    .waiter-action-sheet-overlay--closing > .waiter-action-sheet {
        opacity: 0;
        animation: none;
    }
}

@keyframes waiter-dialog-enter {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (min-width: 640px) and (prefers-reduced-motion: reduce) {
    .waiter-action-sheet-overlay > .waiter-action-sheet {
        animation: none;
        transition: none;
    }
}

@media (min-width: 640px) {
    .waiter-action-sheet-overlay::before {
        display: none;
    }

    [data-testid="waiter-table-menu-button"] {
        anchor-name: --waiter-table-menu-trigger;
    }

    .waiter-action-sheet-overlay > .waiter-table-actions-popover {
        position: fixed;
        top: anchor(--waiter-table-menu-trigger bottom, 52px);
        right: anchor(--waiter-table-menu-trigger right, 32px);
        left: auto;
        bottom: auto;
        margin-top: 8px;
        width: min(320px, calc(100vw - 32px));
        border: 1px solid var(--color-highlight-text);
        border-radius: 16px;
        transform: none;
        box-shadow: 0 8px 24px rgb(0 0 0 / 10%);
    }

    .waiter-action-sheet-overlay:has(> .waiter-table-actions-popover) > :first-child {
        background: transparent !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

#waiter-conversation-scroll > .waiter-timeline-order-enter {
    width: 100%;
    max-width: 840px;
    margin-inline: auto;
}

.waiter-cash-register-summary,
.waiter-cash-register-actions,
.waiter-register-payment-methods { display: none; }
.waiter-payment-keypad { display: contents; }
.waiter-cash-mobile-summary { display: flex; flex-shrink: 0; min-width: 0; }

@container waiter-manual-payment (max-width: 899px) {
    .waiter-app-shell [data-testid="waiter-manual-payment-root"] > .waiter-cash-payment-layout {
        overflow-y: auto;
        overscroll-behavior-y: contain;
        gap: 12px;
        padding-top: 12px;
    }
    .waiter-cash-payment-layout [data-testid="waiter-payment-amount-entry"] {
        --waiter-payment-key-size: clamp(44px, 6dvh, 48px);
        flex-grow: 0;
        gap: 12px;
        padding: 12px;
    }
    .waiter-cash-payment-layout .waiter-payment-keypad {
        display: flex;
        flex: 0 0 auto;
        flex-direction: column;
        justify-content: center;
        gap: 8px;
    }
    .waiter-cash-payment-layout [data-testid^="waiter-payment-numpad-digit-"] span {
        font-size: clamp(22px, 6cqi, 26px);
        line-height: 1.2;
    }
    .waiter-cash-payment-layout [data-testid="waiter-payment-suggestions"] h5 {
        font-size: clamp(14px, 4cqi, 20px);
        line-height: 1.4;
    }
}

@container waiter-manual-payment (min-width: 900px) {
    .waiter-app-shell [data-testid="waiter-manual-payment-root"] > .waiter-cash-payment-layout {
        display: grid;
        grid-template-columns: minmax(0, 4fr) minmax(0, 5fr);
        grid-template-rows: minmax(600px, 1fr);
        overflow-y: auto;
        width: 100%;
        max-width: 1200px;
        margin-inline: auto;
        gap: 16px;
        padding-top: 12px;
        padding-bottom: 24px;
    }
    .waiter-cash-payment-layout > .waiter-cash-mobile-summary,
    .waiter-cash-payment-layout [data-testid="waiter-payment-confirm-amount"],
    .waiter-cash-payment-layout [data-testid="waiter-payment-suggestions"] { display: none; }
    .waiter-cash-register-summary {
        grid-column: 1;
        grid-row: 1;
        display: flex;
        flex-direction: column;
        min-height: 0;
        min-width: 0;
        gap: 12px;
    }
    .waiter-cash-payment-layout [data-testid="waiter-payment-amount-entry"] {
        grid-column: 2;
        grid-row: 1;
        min-width: 0;
        min-height: 0;
        padding: 0;
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    .waiter-cash-payment-layout .waiter-payment-keypad {
        display: flex;
        flex: 1;
        min-height: 0;
        flex-direction: column;
        justify-content: center;
    }
    .waiter-cash-register-actions {
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        gap: 32px;
    }
    .waiter-cash-payment-layout [data-testid^="waiter-payment-numpad-digit-"],
    .waiter-cash-payment-layout [data-testid="waiter-payment-numpad-backspace"] {
        background: transparent;
    }
}

@container waiter-manual-payment (min-width: 900px) {
    .waiter-app-shell [data-testid="waiter-manual-payment-root"] > .waiter-partial-payment-layout {
        grid-template-columns: minmax(0, 4fr) minmax(0, 3.5fr) minmax(140px, 1.5fr);
    }
    .waiter-partial-payment-layout > [data-testid="waiter-partial-payment-methods"] {
        display: none;
    }
    .waiter-register-payment-methods {
        display: flex;
        grid-column: 3;
        grid-row: 1;
        min-width: 0;
        flex-direction: column;
        gap: 12px;
    }
    .waiter-partial-payment-layout > [data-testid="waiter-payment-completion"] {
        grid-column: 2;
        grid-row: 1;
    }
}
.waiter-action-sheet .nexus-partner-modal-footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.waiter-action-sheet .nexus-partner-modal-footer > * {
    width: 100%;
}

@media (max-width: 639px) {
    .waiter-action-sheet .nexus-card-scanning-modal__custom-content {
        height: min(380px, calc(var(--nexus-visible-viewport-height, 100dvh) - var(--nexus-safe-top-inset, 0px) - 16px)) !important;
    }
}

/* dark-theme:generated — dark variants of the colours above, written by Nexus.Retail.Server/TailwindAssets/dark-theme-sync.mjs.
   Edit the light rules and rerun the script; do not edit this block. */

:where(:root[data-theme="dark"]) .waiter-table-row {
    background: color-mix(in srgb, var(--table-state-bg, #262A31) 78%, transparent);
}

:where(:root[data-theme="dark"]) .waiter-table-row--free {
    background: #1A1D23;
}

:where(:root[data-theme="dark"]) [data-testid="waiter-catalog-product-list"] .waiter-table-row {
    box-shadow: 0 2px 16px rgba(15,23,42,0.06);
}

:where(:root[data-theme="dark"]) .waiter-table-number {
    background: var(--table-state-badge, #34373C);
    color: var(--table-state-badge-text, #ECEEF2);
}

:where(:root[data-theme="dark"]) .waiter-table-number * {
    color: inherit !important;
}

:where(:root[data-theme="dark"]) .waiter-chat-page {
    background: var(--Background, #111317);
}

:where(:root[data-theme="dark"]) .waiter-chat-header {
    background: var(--Background, #111317);
}

:where(:root[data-theme="dark"]) .waiter-flow-header--white {
    background: #1A1D23;
}

:where(:root[data-theme="dark"]) .waiter-flow-header--scrolled {
    box-shadow: 0 1px 4px var(--HighlightText, rgba(0,0,0,0.6));
}

:where(:root[data-theme="dark"]) .waiter-chat-header-action {
    background: rgba(26,29,35,0.7);
}

:where(:root[data-theme="dark"]) [data-testid="waiter-product-back-button"],
:where(:root[data-theme="dark"]) [data-testid="waiter-order-details-back-button"] {
    border: 1px solid rgba(154,157,164,0.12);
}

:where(:root[data-theme="dark"]) .waiter-chat-scroll {
    background: var(--Background, #111317);
}

:where(:root[data-theme="dark"]) .waiter-app-shell [data-testid="waiter-catalog-root"] #nav-container [data-testid="category-item"] > div > div {
    border: 1px solid #7F89F2;
}

:where(:root[data-theme="dark"]) .waiter-app-shell [data-testid="waiter-catalog-root"] #nav-container [data-testid="category-item"]:not(.active) h2 {
    color: #A3AAFF;
}

:where(:root[data-theme="dark"]) .waiter-call-banner,
:where(:root[data-theme="dark"]) .waiter-message-in,
:where(:root[data-theme="dark"]) .waiter-message-out {
    box-shadow: 0 1px 4px rgba(15,23,42,0.12);
}

:where(:root[data-theme="dark"]) .waiter-chat-action {
    border: 0;
    background: #1A1D23;
    box-shadow: 0 1px 4px rgba(15,23,42,0.08);
}

:where(:root[data-theme="dark"]) .waiter-chat-action-primary {
    background: #4A54C8;
}

:where(:root[data-theme="dark"]) .waiter-conversation-day-divider::before,
:where(:root[data-theme="dark"]) .waiter-conversation-day-divider::after {
    background: rgba(255,255,255,0.1);
}

:where(:root[data-theme="dark"]) .waiter-bottom-bar {
    background: #1A1D23;
    box-shadow: 0 -4px 32px rgba(15,23,42,0.06);
}

:where(:root[data-theme="dark"]) .waiter-bottom-bar.waiter-chat-composer {
    background: var(--Background, #111317);
    box-shadow: 0 -1px 4px rgba(15,23,42,0.08);
}

:where(:root[data-theme="dark"]) .waiter-tip-selector .app-tip-choice {
    border-color: #7F89F2;
    color: #A3AAFF;
}

:where(:root[data-theme="dark"]) .waiter-tip-selector .app-tip-choice[aria-pressed="true"] {
    background: #4A54C8;
    color: #FFFFFF;
}

@media (max-width: 639px) {
    :where(:root[data-theme="dark"]) .waiter-mobile-bottom-sheet-backdrop {
        background: rgba(0,0,0,0.2) !important;
    }

    :where(:root[data-theme="dark"]) .waiter-mobile-bottom-sheet {
        background: #1A1D23 !important;
        box-shadow: 0 -8px 64px rgba(15,23,42,0.18);
    }

}

:where(:root[data-theme="dark"]) .waiter-floating-cart {
    background: linear-gradient(180deg, rgba(245, 245, 245, 0) 0%, rgba(17,19,23,0.95) 40%);
}

html:where([data-theme="dark"]):has(.waiter-action-sheet-overlay),
:where(:root[data-theme="dark"]) body#app:has(.waiter-action-sheet-overlay) {
    background-color: #1A1D23 !important;
}

:where(:root[data-theme="dark"]) .waiter-action-sheet-item:active:not(:disabled) {
    background-color: #252A31;
}

:where(:root[data-theme="dark"]) .waiter-action-sheet-item:hover:not(:disabled),
:where(:root[data-theme="dark"]) .waiter-action-sheet-item:focus-visible:not(:disabled) {
    background-color: #252A31;
}

:where(:root[data-theme="dark"]) .waiter-table-menu-item + .waiter-table-menu-item {
    border-top: 1px solid #30353E;
}

:where(:root[data-theme="dark"]) .waiter-order-menu-trigger:active:not(:disabled) {
    background-color: rgba(165,177,203,0.1);
}

:where(:root[data-theme="dark"]) .waiter-favorite-toggle:active {
    background-color: rgba(165,177,203,0.075);
}

:where(:root[data-theme="dark"]) #waiter-dashboard-search,
:where(:root[data-theme="dark"]) #waiter-dashboard-search:focus {
    border-color: transparent;
}

:where(:root[data-theme="dark"]) .waiter-tip-mode-toggle::before {
    background: #4A54C8;
}

:where(:root[data-theme="dark"]) .waiter-tip-mode-toggle > button {
    background-color: transparent !important;
}

:where(:root[data-theme="dark"]) .waiter-action-sheet-overlay::before {
    background: linear-gradient(to bottom, #111317, transparent);
}

:where(:root[data-theme="dark"]) .waiter-profile-cropper .cropper-view-box {
    box-shadow: 0 0 0 2px #1A1D23, 0 0 0 3px rgba(180,183,190,0.3);
}

:where(:root[data-theme="dark"]) .waiter-profile-cropper .cropper-face {
    background: transparent;
}

:where(:root[data-theme="dark"]) .waiter-profile-cropper .cropper-point.point-e,
:where(:root[data-theme="dark"]) .waiter-profile-cropper .cropper-point.point-n,
:where(:root[data-theme="dark"]) .waiter-profile-cropper .cropper-point.point-w,
:where(:root[data-theme="dark"]) .waiter-profile-cropper .cropper-point.point-s {
    border: 2px solid #1A1D23;
    background: #4A54C8;
}

:where(:root[data-theme="dark"]) .waiter-settings-avatar:has(input:focus-visible) > div:first-child {
    box-shadow: 0 0 0 3px #7F89F2;
}

@media (min-width: 640px) {
    :where(:root[data-theme="dark"]) .waiter-action-sheet-overlay > .waiter-table-actions-popover {
        border: 1px solid #30353E;
        box-shadow: 0 8px 48px rgb(0 0 0 / 0.18);
    }

    :where(:root[data-theme="dark"]) .waiter-action-sheet-overlay:has(> .waiter-table-actions-popover) > :first-child {
        background: transparent !important;
    }

}

@container waiter-manual-payment (min-width: 900px) {
    :where(:root[data-theme="dark"]) .waiter-cash-payment-layout [data-testid="waiter-payment-amount-entry"] {
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    :where(:root[data-theme="dark"]) .waiter-cash-payment-layout [data-testid^="waiter-payment-numpad-digit-"],
    :where(:root[data-theme="dark"]) .waiter-cash-payment-layout [data-testid="waiter-payment-numpad-backspace"] {
        background: transparent;
    }

}

/* dark-theme:generated:end */