@font-face {
    font-family: "Rubik";
    src: url("../foodking/fonts/rubik/Rubik-Regular.ttf") format("truetype");
    font-weight: 400;
}

.customer-cookie-banner {
    position: fixed;
    z-index: 120;
    right: 20px;
    bottom: 20px;
    left: 20px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 22px;
    align-items: center;
    width: min(1060px, calc(100% - 40px));
    margin: 0 auto;
    padding: 18px 20px;
    border: 1px solid #e4e6ee;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 14px 40px rgb(29 33 52 / 18%);
}

.customer-cookie-banner[hidden] {
    display: none;
}

.customer-cookie-banner strong {
    display: block;
    margin-bottom: 5px;
    color: #22243a;
    font-size: 17px;
}

.customer-cookie-banner p {
    margin: 0 0 6px;
    color: #6f748c;
    line-height: 1.45;
}

.customer-cookie-banner a {
    color: #ff006b;
    font-weight: 700;
}

.customer-cookie-actions {
    display: flex;
    gap: 8px;
}

.customer-cookie-actions button {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid #ff006b;
    border-radius: 6px;
    color: #ff006b;
    background: #fff;
    white-space: nowrap;
    font-weight: 800;
    cursor: pointer;
}

.customer-cookie-actions button:last-child {
    color: #fff;
    background: #ff006b;
}

@media (max-width: 720px) {
    .customer-cookie-banner {
        right: 12px;
        bottom: 12px;
        left: 12px;
        grid-template-columns: 1fr;
        gap: 14px;
        width: calc(100% - 24px);
        padding: 16px;
    }

    .customer-cookie-actions button {
        flex: 1;
        white-space: normal;
    }
}

@font-face {
    font-family: "Rubik";
    src: url("../foodking/fonts/rubik/Rubik-Medium.ttf") format("truetype");
    font-weight: 500;
}

@font-face {
    font-family: "Rubik";
    src: url("../foodking/fonts/rubik/Rubik-SemiBold.ttf") format("truetype");
    font-weight: 600;
}

@font-face {
    font-family: "Public Sans";
    src: url("../foodking/fonts/public/PublicSans-Regular.ttf") format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "Public Sans";
    src: url("../foodking/fonts/public/PublicSans-SemiBold.ttf") format("truetype");
    font-weight: 600;
}

:root {
    color-scheme: light;
    --heading: #1f1f39;
    --paragraph: #6e7191;
    --placeholder: #a0a3bd;
    --primary: #ff006b;
    --primary-soft: #ffedf4;
    --blue-soft: #eef5ff;
    --paper: #ffffff;
    --body: #f7f7fc;
    --line: #eff0f6;
    --success: #1ab759;
    --warning: #f6a609;
    --shadow-card: 0 2px 6px 0 rgb(67 89 113 / 12%);
    --shadow-menu: 0 4px 16px rgba(126, 133, 142, 0.16);
    --shadow-filter: 0 8px 16px rgba(23, 31, 70, 0.08);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--body);
    color: var(--paragraph);
    font-family: "Rubik", Arial, Helvetica, sans-serif;
    font-size: 15px;
}

button,
input,
select,
textarea {
    font: inherit;
}

button {
    min-height: 42px;
    border: 0;
    border-radius: 999px;
    padding: 0 18px;
    background: var(--primary);
    color: #fff;
    font-weight: 500;
    cursor: pointer;
    transition: 180ms ease;
}

button:hover {
    box-shadow: var(--shadow-filter);
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.58;
    box-shadow: none;
}

button.secondary {
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--heading);
}

button.secondary:hover {
    border-color: rgb(255 0 107 / 22%);
    background: var(--primary-soft);
    color: var(--primary);
}

button.secondary.active {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

button.icon {
    width: 34px;
    min-height: 34px;
    padding: 0;
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--heading);
    padding: 10px 12px;
    outline: none;
}

input:focus,
select:focus,
textarea:focus {
    border-color: rgb(255 0 107 / 25%);
}

label span,
.language-picker span {
    display: block;
    margin-bottom: 6px;
    color: var(--paragraph);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.app-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 18px;
    min-height: 74px;
    padding: 12px 24px;
    border-bottom: 1px solid var(--line);
    background: #fff;
    box-shadow: 0 1px 0 rgb(239 240 246 / 65%);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--heading);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.brand img {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    box-shadow: 0 0 8px rgba(51, 48, 48, 0.12);
}

.surface-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

.surface-tabs a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--heading);
    text-decoration: none;
    font-weight: 500;
    background: #fff;
    transition: 180ms ease;
}

body[data-surface="customer"] [data-surface-link="customer"],
body[data-surface="kiosk"] [data-surface-link="kiosk"],
body[data-surface="pos"] [data-surface-link="pos"],
body[data-surface="platform"] [data-surface-link="platform"],
body[data-surface="kds"] [data-surface-link="kds"],
body[data-surface="status-board"] [data-surface-link="status-board"] {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}

.language-picker {
    min-width: 150px;
}

.platform-sidebar {
    display: none;
}

.app-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 18px;
    width: min(1180px, calc(100vw - 32px));
    margin: 18px auto;
}

body[data-surface="platform"] .app-topbar {
    position: fixed;
    left: 0;
    right: 0;
}

body[data-surface="platform"] .platform-sidebar {
    position: fixed;
    top: 74px;
    left: 0;
    z-index: 20;
    display: block;
    width: 260px;
    height: calc(100vh - 74px);
    padding: 18px;
    overflow-y: auto;
    background: #fff;
    box-shadow: 0 0.125rem 0.375rem 0 rgb(161 172 184 / 12%);
}

body[data-surface="platform"] .app-shell {
    display: block;
    width: auto;
    margin: 0;
    padding: 96px 22px 22px 282px;
}

body[data-surface="platform"] .ordering-pane,
body[data-surface="platform"] .cart-pane,
body:not([data-surface="platform"]) .platform-pane,
body:not([data-surface="platform"]) .platform-sidebar {
    display: none;
}

.sidebar-title {
    margin: 8px 0 12px;
    color: var(--placeholder);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.sidebar-link {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 42px;
    padding: 0 12px;
    border-radius: 8px;
    color: var(--heading);
    text-decoration: none;
    text-transform: capitalize;
    transition: 180ms ease;
}

.sidebar-link:hover,
.sidebar-link.active {
    background: rgb(255 0 107 / 5%);
    color: var(--primary);
}

.ordering-pane,
.cart-pane,
.platform-pane {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    box-shadow: var(--shadow-card);
}

.ordering-pane,
.platform-pane {
    min-height: calc(100vh - 108px);
    padding: 20px;
}

.cart-pane {
    position: sticky;
    top: 92px;
    align-self: start;
    padding: 18px;
}

.pane-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.eyebrow {
    margin: 0 0 6px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

h1,
h2,
h3,
p {
    letter-spacing: 0;
}

h1,
h2,
h3 {
    color: var(--heading);
}

h1 {
    margin: 0;
    font-size: 30px;
    line-height: 1.15;
}

h2 {
    margin: 0 0 14px;
    font-size: 22px;
}

h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

.order-controls,
.login-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 12px;
}

.category-strip {
    display: flex;
    gap: 16px;
    padding-bottom: 16px;
    margin-bottom: 6px;
    overflow-x: auto;
}

.category-pill {
    flex: 0 0 128px;
    min-height: 108px;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 16px;
    background: #f7f7fc;
    color: var(--heading);
    padding: 12px;
    text-align: center;
}

.category-pill.active,
.category-pill:hover {
    border-color: var(--primary);
    background: var(--primary-soft);
    box-shadow: none;
}

.category-pill img {
    display: block;
    width: 42px;
    height: 42px;
    object-fit: contain;
    margin: 0 auto 12px;
    filter: drop-shadow(2px 4px 8px rgba(0, 0, 0, 0.18));
}

.item-type-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 22px;
}

.item-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 0 16px 0 12px;
    background: #eff0f6;
    color: var(--heading);
}

.item-type-pill.active,
.item-type-pill:hover {
    background: #fff;
    color: var(--heading);
    box-shadow: var(--shadow-filter);
}

.item-type-pill img {
    width: 24px;
    height: 24px;
}

.dietary-filter-icon {
    position: relative;
    display: inline-grid;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    place-items: center;
    color: currentColor;
    font-family: "Segoe UI Symbol", "Segoe UI Emoji", sans-serif;
    font-size: 19px;
    font-style: normal;
    line-height: 1;
    filter: grayscale(1);
}

.dietary-filter-icon.is-free::after {
    position: absolute;
    width: 2px;
    height: 23px;
    border-radius: 1px;
    background: currentColor;
    content: "";
    transform: rotate(42deg);
}

.type-dot {
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--primary);
}
.type-dot.vegan { background: #19a869; }
.type-dot.gluten-free { background: #e9a61a; }
.type-dot.dairy-free { background: #29a6c8; }
.type-dot.nut-free { background: #d7753e; }
.type-dot.halal { background: #177e59; }

.menu-grid {
    display: grid;
    gap: 20px;
}

.category-block h2 {
    margin-top: 0;
    color: var(--primary);
    font-size: 26px;
}

.item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.item-card,
.order-card,
.cart-row,
.stat-card {
    border: 1px solid var(--line);
    border-radius: 16px;
    background: #fff;
}

.item-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: 180ms ease;
}

.item-card:hover {
    box-shadow: var(--shadow-menu);
}

.item-card-image {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 16px 16px 0 0;
    background: #f7f7fc;
}

.item-card-body {
    display: grid;
    gap: 10px;
    height: 100%;
    padding: 14px;
}

.item-card p {
    min-height: 38px;
    margin: 0;
    color: var(--paragraph);
    font-size: 13px;
    line-height: 1.45;
}

.item-meta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.price {
    color: var(--primary);
    font-size: 18px;
    font-weight: 600;
}

.badge {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: #eff0f6;
    color: var(--paragraph);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.item-card button {
    min-height: 28px;
    padding: 0 12px;
    background: #fff;
    color: var(--heading);
    box-shadow: var(--shadow-card);
}

.item-card button:hover {
    background: var(--primary);
    color: #fff;
}

.cart-items {
    display: grid;
    gap: 10px;
    min-height: 48px;
}

.cart-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 12px;
    border-radius: 10px;
}

.cart-row p {
    margin: 4px 0 0;
    color: var(--paragraph);
}

.qty-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.customer-fields {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.payment-fieldset {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 16px 0 0;
    padding: 0;
    border: 0;
}

.payment-fieldset legend {
    grid-column: 1 / -1;
    color: var(--heading);
    font-weight: 600;
}

.payment-label {
    position: relative;
    display: flex;
    min-height: 76px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid #fff;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 6px 32px rgba(0, 0, 0, 0.04);
    cursor: pointer;
    text-align: center;
    transition: 180ms ease;
}

.payment-label.active,
.payment-label:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.payment-label strong {
    color: var(--heading);
    font-size: 16px;
}

.payment-label input {
    position: absolute;
    top: 8px;
    left: 8px;
    width: auto;
    accent-color: var(--primary);
}

.payment-label img {
    max-width: 70px;
    max-height: 28px;
    object-fit: contain;
}

.payment-label span {
    margin: 0;
    color: var(--heading);
    font-size: 13px;
    text-transform: capitalize;
}

.totals {
    display: grid;
    gap: 9px;
    margin: 18px 0;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.totals div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.totals dt {
    color: var(--paragraph);
}

.totals dd {
    margin: 0;
    color: var(--heading);
    font-weight: 600;
}

.cart-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.cart-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.message {
    min-height: 22px;
    margin: 12px 0 0;
    color: var(--success);
    font-weight: 500;
}

.message.error {
    color: var(--primary);
}

.platform-stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.stat-card {
    padding: 18px;
    box-shadow: var(--shadow-card);
}

.stat-card span {
    color: var(--paragraph);
    font-family: "Public Sans", Arial, sans-serif;
    font-size: 13px;
}

.stat-card strong {
    display: block;
    margin-top: 8px;
    color: var(--heading);
    font-family: "Public Sans", Arial, sans-serif;
    font-size: 28px;
}

.orders-list {
    display: grid;
    gap: 12px;
}

.platform-tools-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.tool-card {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    padding: 16px;
    box-shadow: var(--shadow-card);
}

.catalog-manager {
    margin-top: 18px;
}

.tool-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.quick-form-grid,
.catalog-lists {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.compact-form {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fbfbfe;
}

.compact-form h3,
.catalog-lists h3 {
    margin-bottom: 4px;
}

.form-row-2,
.form-row-3 {
    display: grid;
    gap: 10px;
}

.form-row-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.form-row-3 {
    grid-template-columns: minmax(0, 1fr) 120px 130px;
}

.catalog-lists {
    margin-top: 16px;
}

.catalog-list {
    display: grid;
    gap: 8px;
}

.catalog-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 54px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}

.catalog-row:last-child {
    border-bottom: 0;
}

.catalog-row strong {
    color: var(--heading);
}

.catalog-row p {
    margin: 4px 0 0;
    color: var(--paragraph);
    font-size: 13px;
}

.mini-list {
    display: grid;
    gap: 8px;
}

.mini-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 38px;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}

.mini-row:last-child {
    border-bottom: 0;
}

.mini-row strong {
    color: var(--heading);
}

.mini-row span {
    color: var(--paragraph);
    font-size: 13px;
}

.order-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    padding: 16px;
    border-radius: 10px;
    box-shadow: var(--shadow-card);
}

.order-card p {
    margin: 6px 0 0;
    color: var(--paragraph);
}

.status-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.status-actions button {
    min-height: 34px;
    border-radius: 6px;
    padding: 0 12px;
    font-size: 13px;
}

body[data-surface="kiosk"] .app-shell {
    grid-template-columns: minmax(0, 1fr) 420px;
    width: min(1380px, calc(100vw - 32px));
}

body[data-surface="pos"] .app-shell {
    grid-template-columns: minmax(0, 1fr) 430px;
    width: min(1440px, calc(100vw - 32px));
}

body[data-surface="kiosk"] .item-grid {
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
}

body[data-surface="pos"] .item-grid {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

body[data-surface="kiosk"] button {
    min-height: 54px;
    font-size: 17px;
}

body[data-surface="kiosk"] .item-card button {
    min-height: 42px;
}

body[data-surface="pos"] .cart-pane {
    top: 92px;
}

.pos-register-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: -6px 0 18px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow-card);
}

.pos-register-strip button {
    min-height: 36px;
    border-radius: 8px;
}
.waiter-return-link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; color: var(--primary); border: 1px solid #ffd0e2; border-radius: 6px; background: #fff2f7; font-weight: 700; text-decoration: none; white-space: nowrap; }
.pos-waiter-return { display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; color: var(--primary); border: 1px solid #ffd0e2; border-radius: 8px; background: #fff2f7; font-weight: 700; text-decoration: none; }

.pos-shift-pill {
    margin-left: auto;
    border-radius: 999px;
    padding: 8px 12px;
    background: #eef5ff;
    color: var(--heading);
    font-size: 13px;
    font-weight: 600;
}

.wordmark {
    color: #2f3142;
    font-size: 30px;
    font-weight: 400;
    letter-spacing: -1px;
    text-transform: lowercase;
}

.wordmark span {
    position: relative;
}

.wordmark span::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 8px;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--primary);
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
}

.branch-chip,
.user-chip,
.top-pill,
.top-icon {
    min-height: 40px;
    border-radius: 8px;
    background: #fff2f7;
}

.branch-chip,
.user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 12px;
    color: var(--heading);
}

.branch-chip small {
    display: block;
    color: var(--paragraph);
    font-size: 12px;
}

.branch-chip strong,
.user-chip strong {
    color: var(--heading);
    font-size: 13px;
    line-height: 1.15;
}

.chip-icon,
.top-icon {
    color: var(--primary);
}

.top-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    text-decoration: none;
    font-size: 18px;
}

button.top-icon {
    border: 0;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

.top-pill {
    display: flex;
    align-items: center;
    min-width: 110px;
    padding: 0 8px;
}

.top-pill select {
    border: 0;
    background: transparent;
    padding: 0;
}

.user-chip span {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: linear-gradient(135deg, #13aab7, #e8fffb);
}

.top-logout {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 40px;
    border-radius: 8px;
    padding: 0 12px;
    background: #fff2f7;
    color: var(--primary);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.top-logout span {
    font-size: 17px;
}

body[data-surface="platform"] .surface-tabs,
body[data-surface="pos"] .surface-tabs {
    display: none;
}

body[data-surface="platform"] .app-topbar,
body[data-surface="pos"] .app-topbar {
    min-height: 68px;
    padding: 10px 18px;
}

body[data-surface="platform"] .platform-sidebar {
    top: 68px;
    width: 258px;
    height: calc(100vh - 68px);
    padding: 14px 18px 22px;
    border-right: 1px solid #f0f1f7;
    box-shadow: none;
    transition: transform 220ms ease, opacity 220ms ease;
    will-change: transform;
}

body[data-surface="platform"] .app-shell {
    padding: 92px 20px 28px 278px;
    background: #f7f7fc;
    transition: padding-left 220ms ease;
}

body[data-surface="platform"].sidebar-collapsed .platform-sidebar {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
}

body[data-surface="platform"].sidebar-collapsed .app-shell {
    padding-left: 20px;
}

body[data-surface="platform"].sidebar-collapsed #sidebarToggleButton {
    background: var(--primary);
    color: #fff;
}

body[data-surface="platform"] .platform-pane {
    min-height: auto;
    border: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

body[data-surface="platform"] .sidebar-link {
    min-height: 44px;
    margin-bottom: 4px;
    color: #7d82a4;
}

body[data-surface="platform"] .sidebar-link.active {
    background: #fff0f6;
    color: var(--primary);
}

body[data-surface="platform"] .sidebar-link span {
    width: 20px;
    color: currentColor;
}

.dashboard-greeting {
    margin-bottom: 28px;
}

.dashboard-greeting .eyebrow {
    margin: 0 0 8px;
    color: var(--primary);
    font-size: 24px;
    text-transform: none;
}

.dashboard-greeting h1 {
    color: #34364f;
    font-size: 20px;
    font-weight: 500;
}

.section-title {
    margin: 0 0 14px;
    color: #33354d;
    font-size: 20px;
}

body[data-surface="platform"] .platform-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

body[data-surface="platform"] .stat-card {
    position: relative;
    min-height: 74px;
    border: 0;
    border-radius: 8px;
    padding: 18px 18px 16px 74px;
    color: #fff;
    overflow: hidden;
}

body[data-surface="platform"] .stat-card::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 18px;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.9);
}

body[data-surface="platform"] .stat-card span,
body[data-surface="platform"] .stat-card strong {
    color: #fff;
    font-family: "Rubik", Arial, sans-serif;
}

body[data-surface="platform"] .stat-card span {
    font-weight: 600;
}

body[data-surface="platform"] .stat-card strong {
    margin-top: 5px;
    font-size: 20px;
}

.stat-sales {
    background: linear-gradient(90deg, #ff3a8b, #ff55aa);
}

.stat-orders {
    background: linear-gradient(90deg, #6d58f7, #865bf6);
}

.stat-customers {
    background: linear-gradient(90deg, #4b78f5, #5b80f7);
}

.stat-menu {
    background: linear-gradient(90deg, #a240f2, #b64df4);
}

.order-stat-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 28px;
}

.date-pill {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    border: 1px solid #e6e8f2;
    border-radius: 6px;
    padding: 0 12px;
    background: #fff;
    color: #5f637c;
    font-size: 13px;
}

.order-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.order-stat-card {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 72px;
    border-radius: 8px;
    padding: 18px;
    background: #fff;
    box-shadow: var(--shadow-card);
}

.order-stat-card span {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 999px;
    background: var(--tone-bg, #ffedf4);
}

.order-stat-card strong {
    display: block;
    color: #8a8fac;
    font-size: 13px;
    font-weight: 600;
}

.order-stat-card b {
    display: block;
    margin-top: 8px;
    color: var(--heading);
}

.tone-pink { --tone-bg: #ffe3f0; }
.tone-orange { --tone-bg: #fff2dc; }
.tone-green { --tone-bg: #ddfae9; }
.tone-blue { --tone-bg: #e5ebff; }
.tone-purple { --tone-bg: #f0e4ff; }
.tone-cyan { --tone-bg: #dff8ff; }
.tone-violet { --tone-bg: #ebe5ff; }
.tone-red { --tone-bg: #ffe3e3; }

.summary-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.7fr);
    gap: 18px;
    margin: 18px 0 22px;
}

.summary-card {
    min-height: 280px;
    border: 1px solid #edf0f7;
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-card);
}

.summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 64px;
    padding: 0 16px;
    border-bottom: 1px solid #eef0f6;
}

.summary-head h2 {
    margin: 0;
    color: #7f84a3;
    font-size: 16px;
}

.summary-metrics {
    display: flex;
    gap: 28px;
    padding: 18px 20px 0;
}

.summary-metrics strong {
    color: var(--heading);
    font-size: 22px;
}

.sales-summary-chart {
    min-height: 170px;
    padding: 8px 18px 16px;
}

.sales-summary-chart svg {
    display: block;
    width: 100%;
    height: 170px;
}

.sales-summary-axis {
    stroke: #ff5aa2;
    stroke-width: 2;
}

.sales-summary-area {
    fill: url("#salesSummaryFill");
}

.sales-summary-line {
    fill: none;
    stroke: #ff4f9b;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sales-summary-dot {
    fill: #ff4f9b;
    stroke: #fff;
    stroke-width: 3;
}

.sales-summary-label {
    fill: #6f7493;
    font-size: 11px;
}

.sales-summary-empty {
    fill: #8a8fac;
    font-size: 13px;
    font-weight: 600;
}

.orders-summary {
    display: grid;
    grid-template-columns: 230px 1fr;
}

.orders-summary .summary-head {
    grid-column: 1 / -1;
}

.donut-summary {
    align-self: center;
    justify-self: center;
    display: grid;
    place-items: center;
    width: 160px;
    height: 160px;
    border: 9px solid #f0f0f3;
    border-top-color: #ff5aa2;
    border-left-color: #ff5aa2;
    border-radius: 999px;
}

.donut-summary div {
    display: grid;
    place-items: center;
    color: var(--heading);
}

.summary-bars {
    display: grid;
    gap: 18px;
    align-content: center;
    padding: 18px 22px 18px 0;
}

.summary-bars p {
    margin: 0;
}

.summary-bars span {
    display: block;
    margin-bottom: 8px;
    color: #4e526d;
}

.summary-bars b {
    display: block;
    height: 6px;
    border-radius: 999px;
    background: var(--bar);
}

body[data-surface="platform"].authenticated .login-form {
    display: none;
}

body[data-surface="platform"][data-developer-mode="1"] .login-form {
    display: none !important;
}

.dashboard-lower-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.7fr);
    gap: 18px;
    margin-top: 18px;
}

.customer-stats-card,
.top-customers-card,
.featured-items-card,
.popular-items-card {
    min-height: 230px;
}

.customer-stats-chart {
    display: grid;
    grid-template-columns: repeat(18, minmax(18px, 1fr));
    align-items: end;
    gap: 8px;
    min-height: 220px;
    padding: 22px 22px 18px;
}

.customer-stats-chart span {
    display: grid;
    align-items: end;
    gap: 8px;
    min-width: 0;
    color: #6d7394;
    font-size: 11px;
    text-align: center;
}

.customer-stats-chart b {
    display: block;
    width: 16px;
    height: var(--height);
    justify-self: center;
    border-radius: 5px 5px 0 0;
    background: #5477ff;
}

.top-customers-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px;
}

.top-customer-card {
    display: grid;
    justify-items: center;
    width: 140px;
    border: 1px solid #e3e7f1;
    border-radius: 8px;
    padding: 12px;
    background: #fff;
}

.top-customer-card span {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: linear-gradient(135deg, #12a6b5, #e8fffb);
}

.top-customer-card strong {
    margin-top: 9px;
    color: var(--heading);
    font-size: 13px;
}

.top-customer-card b {
    width: 100%;
    margin-top: 10px;
    border-radius: 0 0 6px 6px;
    padding: 6px 8px;
    background: #0798bd;
    color: #fff;
    font-size: 12px;
    text-align: center;
}

.dashboard-item-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 14px;
    padding: 18px;
}

.dashboard-item-card {
    overflow: hidden;
    border: 1px solid #e3e7f1;
    border-radius: 8px;
    background: #fff;
}

.dashboard-item-card img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.dashboard-item-card strong {
    display: block;
    min-height: 42px;
    padding: 9px;
    color: var(--heading);
    font-size: 13px;
}

.popular-items-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 18px;
}

.popular-item-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px;
    border: 1px solid #e3e7f1;
    border-radius: 8px;
    padding: 8px;
    background: #fff;
}

.popular-item-row img {
    width: 72px;
    height: 58px;
    border-radius: 6px;
    object-fit: cover;
}

.popular-item-row strong,
.popular-item-row span,
.popular-item-row b {
    display: block;
}

.popular-item-row strong {
    color: var(--heading);
    font-size: 13px;
}

.popular-item-row span {
    margin-top: 3px;
    color: #0798bd;
    font-size: 12px;
    font-weight: 600;
}

.popular-item-row b {
    margin-top: 5px;
    color: var(--heading);
    font-size: 13px;
}

.admin-module {
    display: grid;
    gap: 18px;
}

.breadcrumb-line {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #98a0bb;
    font-size: 22px;
}

.breadcrumb-line a {
    color: #3d425c;
    text-decoration: none;
}

.module-login {
    max-width: 620px;
}

.module-card {
    border: 1px solid #edf0f7;
    border-radius: 6px;
    background: #fff;
    box-shadow: var(--shadow-card);
}

.module-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 74px;
    padding: 0 20px;
    border-bottom: 1px solid #e8ebf3;
}

.module-card-head h2 {
    margin: 0;
    color: #6d7394;
    font-size: 18px;
    font-weight: 500;
}

.module-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.module-actions button,
.module-card-head button,
.button-link {
    min-height: 38px;
    border-radius: 6px;
}

.button-link {
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    background: var(--primary);
    color: #fff;
    text-decoration: none;
    font-weight: 500;
}

.module-actions select {
    width: auto;
    min-width: 150px;
    min-height: 38px;
    padding: 0 12px;
}

.module-actions input {
    width: 210px;
    min-height: 38px;
}

.table-form {
    display: none;
    grid-template-columns: minmax(160px, 1fr) 120px 100px minmax(140px, 1fr) auto;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line);
    background: #fbfbfe;
}

.dining-module .table-form {
    display: none;
}

.dining-filter-panel {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 120px 150px auto auto;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid #e8ebf3;
    background: #fbfbfe;
}

.dining-filter-panel[hidden] {
    display: none;
}

.dining-filter-panel label {
    display: grid;
    gap: 6px;
}

.dining-filter-panel span,
.drawer-form label span,
.drawer-radio-group legend {
    color: #5b6382;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.admin-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgba(0, 0, 0, 0.58);
    opacity: 0;
    transition: opacity 180ms ease;
}

.admin-drawer-backdrop.open {
    opacity: 1;
}

.admin-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: none;
    background: rgba(0, 0, 0, 0.58);
}

.admin-modal-backdrop.open {
    display: block;
}

.admin-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 100;
    width: min(560px, 100vw);
    background: #fff;
    box-shadow: -12px 0 28px rgb(25 34 82 / 18%);
    transform: translateX(100%);
    transition: transform 220ms ease;
}

.admin-drawer.open {
    transform: translateX(0);
}

.admin-modal {
    position: fixed;
    top: 34px;
    left: 50%;
    z-index: 100;
    width: min(512px, calc(100vw - 32px));
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 24px 60px rgb(0 0 0 / 18%);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -18px);
    transition: opacity 180ms ease, transform 180ms ease;
}

.admin-modal.open {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.admin-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;
    border-bottom: 1px solid #e7eaf3;
    padding: 0 20px;
}

.admin-drawer-head h2 {
    margin: 0;
    color: var(--heading);
    font-size: 19px;
    font-weight: 600;
}

.admin-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;
    border-bottom: 1px solid #e7eaf3;
    padding: 0 16px;
}

.admin-modal-head h2 {
    margin: 0;
    color: var(--heading);
    font-size: 18px;
    font-weight: 500;
}

.drawer-close {
    min-width: 32px;
    min-height: 32px;
    border: 0;
    background: transparent;
    color: #6d7394;
    font-size: 28px;
    line-height: 1;
}

.drawer-form {
    display: grid;
    gap: 20px;
    padding: 30px 22px;
}

.drawer-grid {
    display: grid;
    grid-template-columns: 1fr 240px;
    gap: 12px;
}

.drawer-form label {
    display: grid;
    gap: 9px;
}

.drawer-form b,
.drawer-radio-group b {
    color: #ff4d4f;
}

.drawer-radio-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 20px;
    border: 0;
    padding: 0;
}

.drawer-radio-group legend {
    flex: 0 0 100%;
    margin-bottom: 4px;
}

.drawer-radio-group label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6d7394;
}

.drawer-radio-group input {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

.drawer-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.drawer-actions button {
    min-height: 38px;
    border-radius: 6px;
}

.user-form.open {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr)) auto;
}

.item-form.open {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
}

.promo-form.open {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
}

.communication-form.open {
    display: grid;
    grid-template-columns: repeat(4, minmax(140px, 1fr));
}

.item-form .wide {
    grid-column: span 2;
}

.dietary-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin: 0;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
}
.dietary-options legend { padding: 0 5px; color: var(--muted); font-size: 12px; font-weight: 700; }
.dietary-options label { display: inline-flex; align-items: center; gap: 6px; color: var(--heading); font-size: 13px; }
.dietary-options input { width: 16px; height: 16px; margin: 0; accent-color: var(--primary); }

.promo-form .wide,
.communication-form .wide {
    grid-column: span 2;
}

.communication-form textarea {
    min-height: 86px;
    resize: vertical;
}

.hidden-field {
    display: none;
}

.admin-table-wrap {
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

.admin-table th,
.admin-table td {
    min-height: 54px;
    border-bottom: 1px solid #e8ebf3;
    padding: 14px 18px;
    text-align: left;
}

.admin-table th {
    color: #65708f;
    font-size: 12px;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.admin-table td {
    color: #69708f;
}

.item-list-actions .outline-action {
    border: 1px solid var(--primary);
    background: #fff;
    color: var(--primary);
}

.table-actions a.action-icon {
    text-decoration: none;
}

.table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 18px;
}

.table-footer .table-count {
    margin: 0;
}

.table-pagination {
    display: flex;
    align-items: center;
    gap: 0;
}

.table-pagination button {
    min-width: 40px;
    min-height: 38px;
    border-radius: 0;
}

.table-pagination button:first-child {
    border-radius: 6px 0 0 6px;
}

.table-pagination button:last-child {
    border-radius: 0 6px 6px 0;
}

.table-pagination button.active {
    border-color: #2f74ff;
    color: #2f74ff;
    background: #f3f7ff;
}

.item-view-shell {
    display: grid;
}

.item-view-tabs {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: end;
}

.item-view-tabs button {
    min-height: 46px;
    border: 0;
    border-bottom: 1px solid var(--primary);
    border-radius: 0;
    background: transparent;
    color: #747b9d;
    font-weight: 500;
    justify-content: flex-start;
}

.item-view-tabs button.active {
    border: 1px solid var(--primary);
    border-bottom-color: #fff;
    border-radius: 4px 4px 0 0;
    background: #fff;
    color: var(--primary);
}

.item-detail-panel {
    min-height: 235px;
    border: 1px solid var(--primary);
    border-top: 0;
    background: #fff;
}

.item-detail-panel[hidden] {
    display: none !important;
}

.item-info-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 80px;
    row-gap: 16px;
    padding: 20px;
}

.info-pair {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 28px;
    min-height: 16px;
}

.info-pair b,
.info-block b {
    color: var(--heading);
    font-weight: 500;
}

.info-pair span,
.info-block p {
    margin: 0;
    color: #687095;
}

.info-block {
    grid-column: 1 / -1;
    display: grid;
    gap: 12px;
    min-height: 52px;
}

.item-images-grid {
    padding: 20px;
}

.item-image-preview {
    width: 220px;
    border: 1px solid #e8ebf3;
    border-radius: 8px;
    overflow: hidden;
}

.item-image-preview img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.item-image-preview strong {
    display: block;
    padding: 10px;
    color: var(--heading);
}

.item-relation-panel {
    display: grid;
    align-content: start;
    gap: 20px;
    padding: 18px;
}

.item-relation-panel > button {
    justify-self: start;
    min-height: 38px;
    border-radius: 6px;
}

.relation-card {
    border: 1px solid #edf0f7;
    border-radius: 6px;
    background: #fff;
    box-shadow: var(--shadow-card);
}

.relation-card h2 {
    margin: 0;
    padding: 20px 22px;
    border-bottom: 1px solid #e8ebf3;
    color: var(--heading);
    font-size: 18px;
    font-weight: 500;
}

.relation-table th:last-child,
.relation-table td:last-child {
    text-align: right;
}

.item-relation-form {
    padding: 16px;
}

.relation-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 8px;
}

.relation-form-grid label {
    display: grid;
    gap: 8px;
}

.relation-form-grid label span,
.relation-status-group legend {
    color: #50607f;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.relation-form-grid b,
.relation-status-group b {
    color: #ff4d4f;
}

.relation-status-group {
    margin: 0;
    padding: 0;
}

.relation-caution-field {
    grid-column: 1 / -1;
}

.relation-caution-field textarea {
    min-height: 144px;
    resize: vertical;
}

.relation-form-grid [hidden] {
    display: none;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    border-radius: 6px;
    padding: 0 10px;
    background: #d9fae5;
    color: #13a04a;
}

.status-pill.inactive {
    background: #ffe1e1;
    color: #ff4d4f;
}

.transaction-paid {
    background: #d9fae5;
    color: #13a04a;
}

.transaction-failed {
    background: #ffe1e1;
    color: #ff4d4f;
}

.transaction-refunded {
    background: #fff3d8;
    color: #d99000;
}

.report-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 14px;
    padding: 18px;
    border-bottom: 1px solid #e8ebf3;
    background: #fbfbfe;
}

.report-mini-card {
    min-height: 78px;
    border: 1px solid #edf0f7;
    border-radius: 7px;
    background: #fff;
    padding: 14px 16px;
}

.report-mini-card span {
    display: block;
    color: #8b91ad;
    font-size: 13px;
    font-weight: 600;
}

.report-mini-card strong {
    display: block;
    margin-top: 9px;
    color: var(--heading);
    font-size: 22px;
}

.order-pending {
    background: #fff3d8;
    color: #d99000;
}

.order-confirmed,
.order-ready,
.order-completed {
    background: #d9fae5;
    color: #13a04a;
}

.order-preparing,
.order-out_for_delivery {
    background: #e8edff;
    color: #5477ff;
}

.order-cancelled {
    background: #ffe1e1;
    color: #ff4d4f;
}

.order-table-ref strong,
.order-customer-cell strong,
.promo-title-cell strong {
    display: block;
    color: var(--heading);
}

.order-table-ref span,
.order-customer-cell span,
.promo-title-cell span {
    display: block;
    margin-top: 4px;
    color: #9298b2;
    font-size: 12px;
}

.order-actions {
    flex-wrap: wrap;
}

.compact-status {
    min-height: 28px;
    border-radius: 5px;
    padding: 0 9px;
    font-size: 12px;
}

.table-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    min-height: 28px;
    border: 0;
    border-radius: 5px;
    padding: 0;
    text-decoration: none;
    font-size: 14px;
}

.action-icon.qr {
    background: #fff3d8;
    color: #f6a609;
}

.action-icon.view {
    background: #ffe5f2;
    color: var(--primary);
}

.action-icon.edit {
    background: #d9fae5;
    color: #19af5d;
}

.action-icon.status {
    background: #e8edff;
    color: #5477ff;
}

.action-icon.delete {
    background: #ffe1e1;
    color: #ff4d4f;
}

.item-table-name {
    display: flex;
    align-items: center;
    gap: 12px;
}

.item-table-name img {
    width: 54px;
    height: 42px;
    flex: 0 0 54px;
    border-radius: 7px;
    object-fit: cover;
}

.item-table-name strong {
    display: block;
    color: var(--heading);
}

.item-table-name span {
    display: block;
    margin-top: 4px;
    color: #9298b2;
    font-size: 12px;
}

.table-count {
    margin: 18px;
    color: #4e536b;
}

.dining-view-card {
    min-height: 580px;
}

.qr-view {
    display: grid;
    place-items: center;
    min-height: 510px;
    padding: 24px;
}

.qr-print-card {
    display: grid;
    justify-items: center;
    gap: 10px;
    color: #6f7596;
    text-align: center;
}

.qr-print-card img {
    width: 260px;
    height: 260px;
}

.qr-print-card p {
    margin: 0;
    line-height: 1.5;
}

.qr-print-card strong,
.qr-print-card b {
    color: #6f7596;
}

.qr-brand {
    color: #2f3142;
    font-size: 34px;
    letter-spacing: -1px;
}

.qr-brand span {
    position: relative;
}

.qr-brand span::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 10px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--primary);
}

.table-orders-board {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    padding: 18px;
}

.table-order-card {
    border: 1px solid #e8ebf3;
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-card);
}

.table-order-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    min-height: 62px;
    padding: 14px;
    border-bottom: 1px solid #eef0f6;
}

.table-order-head strong {
    display: block;
    color: var(--heading);
    font-size: 18px;
}

.table-order-head span:not(.status-pill) {
    display: block;
    margin-top: 4px;
    color: #7e83a2;
    font-size: 13px;
}

.table-order-body {
    padding: 14px;
}

.table-order-body h3 {
    font-size: 16px;
}

.table-order-body p {
    margin: 8px 0 0;
}

.table-order-actions {
    justify-content: flex-start;
    padding: 0 14px 14px;
}

.settings-layout {
    display: grid;
    grid-template-columns: 388px minmax(0, 1fr);
    gap: 24px;
}

.settings-menu {
    display: grid;
    align-self: start;
    gap: 0;
    border-radius: 6px;
    padding: 12px;
    background: #fff;
    box-shadow: var(--shadow-card);
}

.settings-menu button {
    justify-content: flex-start;
    min-height: 42px;
    border-bottom: 1px solid #edf0f7;
    border-radius: 4px;
    padding: 0 14px;
    background: #fff;
    color: #6f7596;
    text-align: left;
}

.settings-menu button:hover,
.settings-menu button.active {
    background: #fff0f6;
    color: var(--primary);
    box-shadow: none;
}

.settings-card {
    min-height: 620px;
}

.settings-panel {
    padding: 22px;
}

.settings-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.settings-form select {
    width: 100%;
}

.settings-form label span {
    color: #53617d;
}

.settings-form label b {
    color: #ff4d4f;
}

.settings-form .span-2 {
    grid-column: 1 / -1;
}

.settings-hint {
    margin: 0;
    color: #7380a3;
    font-size: 13px;
    word-break: break-word;
}

.settings-form button {
    width: max-content;
    min-width: 90px;
    border-radius: 6px;
}

.settings-list {
    display: grid;
    gap: 12px;
}

.gateway-setting-card {
    border: 1px solid #edf0f7;
    border-radius: 8px;
    background: #fff;
}

.gateway-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px;
}

.gateway-setting-row strong {
    color: var(--heading);
}

.gateway-setting-row p {
    margin: 6px 0 0;
}

.gateway-config-form {
    border-top: 1px solid #edf0f7;
    padding: 14px;
    background: #fbfbfe;
}

.settings-readiness {
    border-top: 1px solid #edf0f7;
    padding: 14px;
    background: #fff;
}

.sms-readiness {
    margin-bottom: 18px;
    border: 1px solid #edf0f7;
    border-radius: 8px;
}

.settings-readiness-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.settings-readiness-head strong {
    color: var(--heading);
}

.readiness-pill {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    border-radius: 999px;
    padding: 0 10px;
    font-size: 12px;
    font-weight: 600;
}

.readiness-pill.pass {
    background: #ddffe9;
    color: #029641;
}

.readiness-pill.warn {
    background: #fff3cf;
    color: #ba7100;
}

.readiness-pill.fail {
    background: #ffe2e2;
    color: #d62424;
}

.readiness-check-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.readiness-check {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    border: 1px solid #edf0f7;
    border-radius: 8px;
    padding: 10px;
    background: #fbfbfe;
}

.readiness-check > span {
    width: 10px;
    height: 10px;
    margin-top: 4px;
    border-radius: 50%;
    background: #f6a609;
}

.readiness-check.pass > span {
    background: #1ab759;
}

.readiness-check.fail > span {
    background: #fb4e4e;
}

.readiness-check strong {
    display: block;
    color: var(--heading);
    font-size: 13px;
}

.readiness-check p {
    margin: 4px 0 0;
    color: #7380a3;
    font-size: 12px;
    line-height: 1.4;
}

.sms-test-form {
    margin-bottom: 18px;
}

.settings-readout {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.settings-readout div {
    border: 1px solid #edf0f7;
    border-radius: 8px;
    padding: 14px;
    background: #fbfbfe;
}

.settings-readout span {
    display: block;
    color: #7e83a2;
    font-size: 12px;
    text-transform: uppercase;
}

.settings-readout strong {
    display: block;
    margin-top: 8px;
    color: var(--heading);
}

.settings-subpanel {
    margin-top: 18px;
    border-top: 1px solid #edf0f7;
    padding-top: 18px;
}

.settings-subpanel h3 {
    margin-bottom: 12px;
}

.settings-crud-panel {
    display: grid;
    gap: 18px;
}

.settings-crud-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.settings-crud-head h3 {
    margin-bottom: 6px;
}

.settings-crud-form {
    border: 1px solid #edf0f7;
    border-radius: 8px;
    padding: 16px;
    background: #fbfbfe;
}

.settings-crud-table-wrap {
    margin-top: 0;
}

.role-permissions-panel {
    margin-top: 0;
    border-top: 0;
    padding-top: 0;
}

.role-permission-grid {
    display: grid;
    gap: 12px;
    margin-top: 14px;
}

.role-permission-form {
    margin-top: 16px;
    border: 1px solid #edf0f7;
    border-radius: 8px;
    padding: 16px;
    background: #fbfbfe;
}

.permission-group-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.permission-group {
    display: grid;
    gap: 8px;
    border: 1px solid #edf0f7;
    border-radius: 8px;
    padding: 12px;
    background: #fff;
}

.permission-group legend {
    padding: 0 6px;
    color: var(--heading);
    font-size: 13px;
    font-weight: 700;
}

.permission-group label {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-height: 28px;
}

.permission-group input {
    width: 16px;
    height: 16px;
}

.permission-group span {
    color: #5c6686;
    font-size: 13px;
}

.role-permission-card {
    display: grid;
    grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    border: 1px solid #edf0f7;
    border-radius: 8px;
    padding: 14px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(46, 55, 90, 0.05);
}

.role-permission-card strong {
    display: block;
    color: var(--heading);
}

.role-permission-card span,
.role-permission-card em {
    color: #7380a3;
}

.role-card-actions {
    margin-top: 10px;
}

.action-icon:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}

.permission-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.permission-chip-list span {
    min-height: 26px;
    border-radius: 6px;
    padding: 5px 8px;
    background: #fff0f6;
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
}

.kiosk-background-settings {
    margin-top: 0;
    border-top: 0;
    padding-top: 0;
}

.kiosk-background-preview {
    width: min(360px, 100%);
    aspect-ratio: 9 / 16;
    margin-bottom: 18px;
    border: 1px solid #edf0f7;
    border-radius: 8px;
    overflow: hidden;
    background: #0a0d16;
    box-shadow: var(--shadow-card);
}

.kiosk-background-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kiosk-background-form {
    max-width: 620px;
}

.kiosk-machine-settings {
    display: grid;
    gap: 16px;
}

.kiosk-machine-form {
    max-width: none;
}

.slider-upload-settings {
    margin-top: 0;
    border-top: 0;
    padding-top: 0;
}

.slider-image-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin: 16px 0;
}

.slider-image-grid figure {
    position: relative;
    margin: 0;
    border: 1px solid #edf0f7;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 20px rgb(16 18 34 / 5%);
}

.slider-image-grid img {
    width: 100%;
    aspect-ratio: 16 / 7;
    object-fit: cover;
}

.slider-image-grid figcaption {
    overflow: hidden;
    padding: 8px 10px;
    color: #7380a3;
    font-size: 11px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.slider-image-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px 10px;
}

.slider-image-actions button {
    min-width: 30px;
}

.slider-upload-form {
    max-width: 720px;
}

.settings-data-table th,
.settings-data-table td {
    padding-left: 0;
}

body[data-surface="pos"] {
    background: #f7f7fc;
}

body[data-surface="pos"] .app-shell {
    width: 100%;
    min-height: calc(100vh - 68px);
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 16px;
    margin: 0;
    padding: 16px 20px 0;
}

body[data-surface="pos"] .ordering-pane,
body[data-surface="pos"] .cart-pane {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

body[data-surface="pos"] .pane-head {
    display: none;
}

.pos-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    margin-bottom: 16px;
}

.pos-search-row input {
    height: 38px;
    border-radius: 7px 0 0 7px;
}

.pos-search-row button {
    min-height: 38px;
    border-radius: 0 7px 7px 0;
    padding: 0;
    font-size: 22px;
}

body[data-surface="pos"] .pos-register-strip {
    display: none;
}

body[data-surface="pos"] .category-strip {
    gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 0;
    scrollbar-width: none;
}

body[data-surface="pos"] .category-strip::-webkit-scrollbar {
    display: none;
}

body[data-surface="pos"] .category-pill {
    flex-basis: 112px;
    min-height: 110px;
    border-radius: 8px;
    border-bottom-width: 2px;
    background: #fff;
    box-shadow: 0 1px 2px rgb(25 34 82 / 5%);
}

body[data-surface="pos"] .category-pill.active {
    background: #edf5ff;
    border-bottom-color: var(--primary);
}

body[data-surface="pos"] .item-type-strip,
body[data-surface="pos"] .category-block h2 {
    display: none;
}

body[data-surface="pos"] .menu-grid {
    display: block;
}

body[data-surface="pos"] .category-block {
    display: contents;
}

body[data-surface="pos"] .item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(198px, 1fr));
    gap: 20px;
}

body[data-surface="pos"] .item-card {
    border-radius: 12px;
    border-color: #e8ebf5;
    overflow: hidden;
    background: #fff;
}

body[data-surface="pos"] .item-card-image {
    aspect-ratio: 16 / 11.2;
    border-radius: 12px 12px 0 0;
    object-fit: cover;
}

body[data-surface="pos"] .item-card-body {
    gap: 12px;
    padding: 13px;
}

body[data-surface="pos"] .item-card p,
body[data-surface="pos"] .item-card .badge {
    display: none;
}

body[data-surface="pos"] .item-card h3 {
    font-size: 15px;
}

body[data-surface="pos"] .item-meta {
    align-items: center;
}

body[data-surface="pos"] .item-card button {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-height: 26px;
    border-radius: 999px;
    padding: 0 9px;
    background: #fff;
    box-shadow: 0 7px 18px rgb(25 34 82 / 8%);
    color: var(--primary);
    font-size: 12px;
}

body[data-surface="pos"] .item-card button::before {
    content: "";
    width: 9px;
    height: 8px;
    border: 2px solid currentColor;
    border-radius: 2px;
    box-shadow: 0 -3px 0 -1px currentColor;
}

body[data-surface="pos"] .cart-pane {
    position: sticky;
    top: 84px;
    min-height: calc(100vh - 84px);
    padding: 16px;
    border-radius: 8px 8px 0 0;
    background: #fff;
}

body[data-surface="pos"] .cart-heading {
    display: none;
}

body[data-surface="pos"] .cart-items {
    margin-top: 16px;
    border-top: 0;
}

body[data-surface="pos"] .cart-row {
    grid-template-columns: 1fr auto;
    border-width: 0 0 1px;
    border-radius: 0;
    padding: 12px 0;
}

body[data-surface="pos"] .totals {
    font-size: 14px;
}

body[data-surface="pos"] .cart-actions {
    grid-template-columns: 1fr 1fr;
}

body[data-surface="pos"] #placeOrderButton {
    background: #1db95b;
}

body[data-surface="pos"] #quoteButton {
    border-color: #ff4d4f;
    background: #ff4d4f;
    color: #fff;
}

.pos-customer-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px;
    gap: 12px;
    margin-bottom: 12px;
}

.pos-customer-row select,
.pos-token-input,
.pos-table-field select,
.pos-address-field textarea {
    width: 100%;
    min-height: 40px;
    border: 1px solid #d9dbe9;
    border-radius: 7px;
    background: #fff;
    color: var(--heading);
    font-size: 14px;
}

.pos-customer-row button {
    min-height: 40px;
    border-radius: 8px;
    padding: 0;
    font-size: 18px;
}

.pos-token-input {
    margin-bottom: 12px;
}

.pos-order-card {
    border: 1px solid #d9dbe9;
    border-radius: 8px;
    padding: 12px;
}

.pos-order-card h2 {
    margin: 0 0 14px;
    color: var(--heading);
    font-size: 14px;
    font-weight: 500;
}

.pos-order-type-group {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 12px;
}

.pos-order-type-group button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    border: 1px solid #f7f7fc;
    border-radius: 8px;
    padding: 0 8px;
    background: #f7f7fc;
    color: var(--heading);
    font-size: 13px;
}

.pos-order-type-group button span {
    width: 12px;
    height: 12px;
    border: 1px solid #cfd4e5;
    border-radius: 999px;
    background: #fff;
}

.pos-order-type-group button.active {
    border-color: var(--primary);
    background: #fff;
    color: var(--heading);
}

.pos-order-type-group button.active span {
    border-color: var(--primary);
    box-shadow: inset 0 0 0 3px #fff;
    background: var(--primary);
}

.pos-address-field {
    display: none;
}

.pos-cart-table {
    width: calc(100% + 32px);
    margin-left: -16px;
    border-collapse: collapse;
}

.pos-cart-table thead {
    background: #ffedf4;
}

.pos-cart-table th,
.pos-cart-table td {
    padding: 11px 10px;
    color: var(--heading);
    font-size: 12px;
    text-align: left;
    vertical-align: top;
}

.pos-cart-table th {
    font-weight: 400;
}

.pos-cart-table td {
    border-bottom: 1px solid #eff0f6;
}

.pos-cart-table th:first-child,
.pos-cart-table td:first-child {
    width: 28px;
    padding-left: 14px;
}

.pos-cart-table strong {
    display: block;
    color: #2e2f38;
    font-size: 12px;
    font-weight: 500;
}

.pos-remove-item,
.pos-qty-controls button {
    min-height: 18px;
    width: 18px;
    border: 1px solid var(--primary);
    border-radius: 999px;
    padding: 0;
    background: #fff;
    color: var(--primary);
    font-size: 10px;
    line-height: 1;
}

.pos-remove-item {
    border: 0;
    color: #ff4d4f;
}

.pos-qty-controls {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.pos-qty-controls span {
    min-width: 18px;
    color: var(--heading);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
}

.pos-discount-row {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr) 64px;
    min-height: 38px;
    margin-top: 16px;
}

.pos-discount-row select,
.pos-discount-row input,
.pos-discount-row button {
    min-height: 38px;
    border: 1px solid #eff0f6;
    border-radius: 0;
    font-size: 13px;
}

.pos-discount-row select {
    border-radius: 7px 0 0 7px;
}

.pos-discount-row button {
    border-color: #008bba;
    border-radius: 0 7px 7px 0;
    background: #008bba;
    color: #fff;
}

.pos-totals {
    display: grid;
    gap: 7px;
    margin-top: 17px;
}

.pos-totals div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pos-totals dt,
.pos-totals dd {
    color: var(--heading);
    font-size: 14px;
}

.pos-totals dd {
    font-weight: 500;
}

.pos-cart-actions {
    margin-top: 18px;
}

body[data-surface="pos"] .item-card .price {
    color: var(--heading);
}

body:not([data-surface="platform"]) .login-form {
    display: none;
}

body[data-surface="pos"] .cart-pane.pos-empty .pos-discount-row,
body[data-surface="pos"] .cart-pane.pos-empty .cart-actions {
    display: none;
}

body[data-surface="customer"] {
    background:
        linear-gradient(180deg, #ffffff 0, #ffffff 70px, transparent 70px),
        var(--body);
}

body.customer-cart-open {
    overflow: hidden;
}

body[data-surface="customer"] .app-shell {
    display: block;
    width: min(1180px, calc(100vw - 24px));
    margin: 14px auto 104px;
}

body[data-surface="public-page"] {
    background: var(--body);
}

body[data-surface="public-page"] .wordmark {
    color: var(--heading);
}

body[data-surface="public-page"] .wordmark span {
    color: var(--primary);
}

.public-page-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 68px;
    padding: 10px max(18px, calc((100vw - 1020px) / 2));
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.public-page-topbar nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.public-page-topbar nav a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    border-radius: 10px;
    padding: 0 13px;
    color: var(--text);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.public-page-topbar nav a:hover,
.public-page-topbar nav a.active {
    background: var(--primary-soft);
    color: var(--primary);
}

.public-language-picker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 12px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
}

.public-language-picker select {
    min-height: 38px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 12px;
    background: #fff;
    color: var(--heading);
    font: inherit;
}

html[dir="rtl"] .public-language-picker {
    margin-right: 12px;
    margin-left: 0;
}

.public-page-shell {
    width: min(1020px, calc(100vw - 30px));
    margin: 34px auto 80px;
}

.public-page-document {
    padding: clamp(26px, 4vw, 46px);
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--shadow-card);
}

.public-page-document .eyebrow {
    margin: 0 0 8px;
    color: var(--primary);
    font-weight: 800;
}

.public-page-document h1 {
    margin: 0;
    color: var(--heading);
    font-size: clamp(32px, 5vw, 54px);
    line-height: 1.05;
}

.public-page-summary {
    max-width: 760px;
    margin: 18px 0 30px;
    color: var(--text);
    font-size: 18px;
    line-height: 1.65;
}

.public-page-section {
    padding: 26px 0;
    border-top: 1px solid var(--line);
}

.public-page-section h2 {
    margin: 0 0 10px;
    color: var(--heading);
    font-size: 20px;
}

.public-page-section p {
    max-width: 840px;
    margin: 0;
    color: var(--text);
    font-size: 15px;
    line-height: 1.75;
    white-space: pre-line;
}

.public-contact-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 28px;
}

.public-contact-list div {
    min-width: 0;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 15px 16px;
    background: #fbfcff;
}

.public-contact-list dt {
    margin-bottom: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.public-contact-list dd {
    margin: 0;
    color: var(--heading);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.public-contact-list a {
    color: var(--primary);
    text-decoration: none;
}

.customer-public-topbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 66px;
    padding: 10px max(16px, calc((100vw - 1180px) / 2));
    border-bottom: 1px solid var(--line);
    background: #fff;
    box-shadow: 0 1px 0 rgb(239 240 246 / 65%);
}

.customer-public-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.customer-public-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    border-radius: 10px;
    padding: 0 13px;
    color: var(--heading);
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
}

.customer-public-nav a:hover {
    background: var(--primary-soft);
    color: var(--primary);
}

.customer-public-nav a.active {
    background: var(--primary-soft);
    color: var(--primary);
}

.customer-header-search {
    display: grid;
    grid-template-columns: minmax(160px, 1fr) 44px;
    flex: 1 1 420px;
    max-width: 520px;
}

.customer-header-search input {
    min-height: 42px;
    border-color: #eef0f8;
    border-radius: 10px 0 0 10px;
    background: #fff;
}

.customer-header-search button {
    min-height: 42px;
    border-radius: 0 10px 10px 0;
    padding: 0;
    font-size: 22px;
}

.customer-top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.customer-public-topbar .language-picker {
    min-width: 118px;
}

.customer-public-topbar select {
    min-height: 38px;
    border: 0;
    border-radius: 10px;
    background: var(--primary-soft);
    color: var(--heading);
}

.customer-track-button {
    min-height: 38px;
    border-radius: 10px;
    padding: 0 14px;
    background: #fff0f6;
    color: var(--primary);
    font-size: 13px;
}

.customer-auth-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    border: 1px solid #ffd7e8;
    border-radius: 10px;
    padding: 0 12px;
    background: #fff;
    color: var(--heading);
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
}

.customer-auth-button.authenticated {
    border-color: #bcefd3;
    background: #eefcf4;
    color: #148148;
}

.customer-auth-icon {
    display: grid;
    place-items: center;
    width: 24px;
    min-width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 15px;
}

.customer-auth-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 18px;
}

.customer-auth-modal[hidden] {
    display: none;
}

.customer-auth-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(24 25 45 / 52%);
}

.customer-auth-panel {
    position: relative;
    z-index: 1;
    width: min(100%, 460px);
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 22px;
    background: #fff;
    box-shadow: 0 24px 70px rgb(21 24 48 / 24%);
}

.customer-auth-head,
.customer-auth-head > div {
    display: flex;
    align-items: center;
}

.customer-auth-head {
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.customer-auth-head > div {
    gap: 10px;
}

.customer-auth-head h2 {
    margin: 0;
    color: var(--heading);
    font-size: 21px;
}

.customer-auth-head > button {
    width: 36px;
    min-width: 36px;
    min-height: 36px;
    border-radius: 50%;
    padding: 0;
    background: #f5f5fa;
    color: var(--muted);
    font-size: 22px;
}

.customer-auth-mark,
.customer-account-avatar {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 21px;
}

.customer-auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: 18px;
    border-radius: 8px;
    padding: 4px;
    background: #f4f5fa;
}

.customer-auth-tabs button {
    min-height: 40px;
    border-radius: 6px;
    background: transparent;
    color: var(--muted);
}

.customer-auth-tabs button.active {
    background: #fff;
    color: var(--primary);
    box-shadow: 0 2px 8px rgb(31 34 63 / 9%);
}

.customer-auth-form {
    display: grid;
    gap: 14px;
}

.customer-auth-form[hidden] {
    display: none;
}

.customer-auth-form label {
    display: grid;
    gap: 7px;
    color: var(--heading);
    font-size: 12px;
    font-weight: 800;
}

.customer-auth-form input {
    min-height: 44px;
}

.customer-auth-form > button {
    min-height: 44px;
    margin-top: 4px;
}

.customer-auth-account {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 14px 0 4px;
    text-align: center;
}

.customer-auth-account[hidden] {
    display: none;
}

.customer-auth-account .customer-account-avatar {
    width: 58px;
    height: 58px;
    font-size: 29px;
}

.customer-auth-account strong {
    color: var(--heading);
    font-size: 18px;
}

.customer-auth-account > span:not(.customer-account-avatar) {
    color: var(--muted);
    font-size: 13px;
}

.customer-auth-account button {
    min-width: 140px;
    margin-top: 12px;
}

body.customer-auth-open {
    overflow: hidden;
}

.customer-header-cart-button {
    position: relative;
    display: grid;
    place-items: center;
    width: 42px;
    min-width: 42px;
    height: 42px;
    min-height: 42px;
    border-radius: 10px;
    padding: 0;
    background: var(--primary);
    color: #fff;
    box-shadow: 0 10px 22px rgb(255 0 107 / 18%);
}

.customer-header-cart-button::before {
    content: "";
    width: 17px;
    height: 15px;
    border: 2px solid currentColor;
    border-radius: 4px;
}

.customer-header-cart-button::after {
    content: "";
    position: absolute;
    top: 10px;
    width: 9px;
    height: 7px;
    border: 2px solid currentColor;
    border-bottom: 0;
    border-radius: 9px 9px 0 0;
}

.customer-header-cart-button span {
    position: absolute;
    top: -5px;
    right: -5px;
    display: grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    border: 2px solid #fff;
    border-radius: 999px;
    padding: 0 5px;
    background: #1f1f39;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

.customer-header-cart-button:not(.has-items) span {
    background: #a0a3bd;
}

.customer-shop {
    position: relative;
}

.customer-legal-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 18px;
    margin: 42px 0 0;
    padding: 20px 0 4px;
    border-top: 1px solid var(--line);
}

.customer-legal-footer a {
    color: var(--text);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

.customer-legal-footer a:hover {
    color: var(--primary);
}

.customer-shop[data-customer-nav-section="offers"] .customer-floating-cart.has-items {
    display: inline-flex;
}

.customer-menu-screen,
.customer-offers-section {
    scroll-margin-top: 86px;
}

.customer-screen[hidden] {
    display: none !important;
}

.customer-slider {
    position: relative;
    margin: 0 0 16px;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow-card);
}

.customer-slider[hidden] {
    display: none;
}

.customer-slider-track {
    --customer-slide-index: 0;
    display: flex;
    transform: translateX(calc(var(--customer-slide-index) * -100%));
    transition: transform 240ms ease;
}

.customer-slider-slide {
    flex: 0 0 100%;
    margin: 0;
}

.customer-slider-slide img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 5;
    object-fit: cover;
}

.customer-slider-control {
    position: absolute;
    top: 50%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 34px;
    min-height: 34px;
    border-radius: 50%;
    padding: 0;
    background: rgb(255 255 255 / 92%);
    color: var(--primary);
    box-shadow: 0 8px 20px rgb(16 18 34 / 16%);
    font-size: 24px;
    transform: translateY(-50%);
}

.customer-slider-control.prev {
    left: 12px;
}

.customer-slider-control.next {
    right: 12px;
}

.customer-slider.single .customer-slider-control,
.customer-slider.single .customer-slider-dots {
    display: none;
}

.customer-slider-dots {
    position: absolute;
    left: 50%;
    bottom: 12px;
    z-index: 2;
    display: inline-flex;
    gap: 7px;
    transform: translateX(-50%);
}

.customer-slider-dots button {
    width: 8px;
    min-width: 8px;
    height: 8px;
    min-height: 8px;
    border-radius: 50%;
    padding: 0;
    background: rgb(255 255 255 / 75%);
    box-shadow: none;
}

.customer-slider-dots button.active {
    width: 22px;
    border-radius: 999px;
    background: var(--primary);
}

.customer-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 78px;
    align-items: center;
    gap: 12px;
    min-height: 76px;
    margin-bottom: 12px;
    padding: 11px 14px;
    border: 1px solid #eef0f8;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow-card);
    color: var(--heading);
}

.customer-hero span {
    display: block;
    margin-bottom: 4px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 600;
}

.customer-hero h1 {
    margin: 0;
    color: var(--heading);
    font-size: 22px;
    line-height: 1.1;
}

.customer-hero p {
    display: none;
}

.customer-hero img {
    width: 100%;
    max-height: 60px;
    object-fit: contain;
    filter: drop-shadow(0 12px 18px rgb(16 18 34 / 12%));
}

.customer-table-context {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    border: 1px solid #ffd2e4;
    border-radius: 14px;
    padding: 10px 14px;
    background: #fff2f8;
    color: var(--heading);
    box-shadow: 0 8px 20px rgb(255 0 107 / 8%);
    font-size: 13px;
    font-weight: 700;
}

.customer-table-context[hidden] {
    display: none;
}

.customer-table-context div {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.customer-table-context span {
    color: var(--primary);
}

.customer-table-context b {
    color: var(--heading);
}

.customer-table-context small {
    color: var(--paragraph);
    font-size: 12px;
    font-weight: 600;
    text-align: right;
}

.customer-search-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 48px;
    margin-bottom: 14px;
}

.customer-search-row input {
    min-height: 48px;
    border-color: #eef0f8;
    border-radius: 10px 0 0 10px;
    background: #fff;
    box-shadow: 0 8px 20px rgb(16 18 34 / 4%);
}

.customer-search-row button {
    min-height: 48px;
    border-radius: 0 10px 10px 0;
    padding: 0;
    font-size: 23px;
}

.customer-category-strip {
    display: flex;
    gap: 12px;
    margin: 0 -2px 16px;
    padding: 2px 0 10px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
}

.customer-category-strip::-webkit-scrollbar {
    display: none;
}

.customer-category-strip .category-pill {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 8px;
    min-width: 118px;
    min-height: 98px;
    border: 1px solid #f0f1f7;
    border-radius: 8px;
    padding: 12px 10px;
    background: #fff;
    color: var(--heading);
    box-shadow: 0 8px 20px rgb(16 18 34 / 4%);
    scroll-snap-align: start;
}

.customer-category-strip .category-pill.active {
    border-color: var(--primary);
    background: #eef6ff;
    color: var(--heading);
    box-shadow: inset 0 -3px 0 var(--primary), 0 10px 24px rgb(255 0 107 / 9%);
}

.customer-category-strip img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.customer-category-strip span {
    display: block;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-transform: none;
}

.customer-type-strip {
    margin-bottom: 16px;
}

.customer-offers-section {
    margin: 0 0 18px;
}

.customer-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.customer-section-head h2 {
    margin: 0;
    color: var(--primary);
    font-size: 24px;
    line-height: 1.2;
}

.customer-offers-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.customer-offer-card {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-height: 142px;
    border: 1px solid #eef0f8;
    border-radius: 8px;
    padding: 12px;
    background: #fff;
    box-shadow: 0 10px 26px rgb(16 18 34 / 6%);
}

.customer-offer-card img,
.customer-offer-card-art {
    display: block;
    width: 118px;
    height: 118px;
    border-radius: 8px;
    object-fit: cover;
    background:
        radial-gradient(circle at 72% 28%, rgb(255 0 107 / 18%) 0 34px, transparent 35px),
        linear-gradient(135deg, #fff0f6, #eef6ff);
}

.customer-offer-card > div {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.customer-offer-card strong {
    color: var(--primary);
    font-size: 13px;
}

.customer-offer-card h3 {
    margin: 0;
    color: var(--heading);
    font-size: 16px;
}

.customer-offer-card p {
    margin: 0;
    color: var(--paragraph);
    font-size: 12px;
    line-height: 1.45;
}

.customer-offer-card button {
    justify-self: start;
    min-height: 34px;
    border-radius: 999px;
    padding: 0 12px;
    font-size: 12px;
}

.customer-category-section {
    margin-bottom: 26px;
}

.customer-category-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 12px;
}

.customer-category-head h2 {
    margin: 0;
    color: var(--primary);
    font-size: 24px;
    line-height: 1.25;
}

.customer-view-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.customer-view-toggle button {
    width: 34px;
    min-height: 34px;
    border-radius: 50%;
    padding: 0;
    background: #fff;
    color: var(--primary);
    box-shadow: 0 8px 18px rgb(16 18 34 / 7%);
}

.customer-view-toggle button.active {
    background: var(--primary);
    color: #fff;
}

.customer-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
    gap: 16px;
}

.customer-product-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
    min-height: 124px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 10px;
    background: #fff;
    box-shadow: 0 8px 20px rgb(16 18 34 / 5%);
    transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.customer-product-card:hover {
    border-color: rgb(255 0 107 / 20%);
    box-shadow: 0 14px 30px rgb(16 18 34 / 9%);
    transform: translateY(-1px);
}

.customer-product-card img {
    width: 112px;
    height: 104px;
    border-radius: 8px;
    object-fit: cover;
    background: #f7f7fc;
}

.customer-product-card > div {
    display: grid;
    gap: 7px;
    min-width: 0;
}

.customer-product-card header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.customer-offer-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    border-radius: 999px;
    padding: 0 8px;
    background: #fff0f6;
    color: var(--primary);
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.customer-product-card h3 {
    margin: 0;
    color: var(--heading);
    font-size: 15.5px;
    line-height: 1.25;
}

.customer-product-card header button {
    display: grid;
    place-items: center;
    width: 22px;
    min-width: 22px;
    min-height: 22px;
    border-radius: 50%;
    padding: 0;
    background: #eff0f6;
    color: var(--paragraph);
    font-size: 12px;
}

.customer-product-card header button.customer-info-button {
    border: 1px solid #e4e6f0;
    background: #fff;
    color: var(--paragraph);
}

.customer-product-card p {
    height: 37px;
    margin: 0;
    overflow: hidden;
    color: var(--paragraph);
    font-size: 12px;
    line-height: 1.45;
}

.customer-product-card footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.customer-product-card strong {
    color: var(--heading);
    font-size: 15px;
}

.customer-sale-price {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
}

.customer-sale-price span {
    color: var(--primary);
}

.customer-sale-price del {
    color: #9aa3bd;
    font-size: 12px;
    font-weight: 600;
}

.customer-product-card footer button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    border-radius: 999px;
    padding: 0 11px;
    background: #fff;
    color: var(--primary);
    box-shadow: 0 8px 18px rgb(16 18 34 / 7%);
    font-size: 12px;
}

.customer-product-card footer button:hover {
    background: var(--primary);
    color: #fff;
}

.customer-bag-icon {
    position: relative;
    display: inline-block;
    width: 12px;
    height: 11px;
    margin: 2px 0 0;
    border: 1.7px solid currentColor;
    border-radius: 3px;
}

.customer-bag-icon::before {
    content: "";
    position: absolute;
    left: 2.2px;
    top: -5px;
    width: 5px;
    height: 5px;
    border: 1.6px solid currentColor;
    border-bottom: 0;
    border-radius: 6px 6px 0 0;
}

.customer-product-grid.grid-mode {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.customer-product-grid.grid-mode .customer-product-card {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 0;
    overflow: hidden;
    min-height: 100%;
}

.customer-product-grid.grid-mode .customer-product-card img {
    width: 100%;
    height: 196px;
    border-radius: 8px 8px 0 0;
}

.customer-product-grid.grid-mode .customer-product-card > div {
    padding: 13px 13px 12px;
}

.customer-product-grid.grid-mode .customer-product-card p {
    min-height: 0;
    height: 34px;
}

.customer-product-grid.grid-mode .customer-product-card footer {
    margin-top: 2px;
}

.customer-floating-cart {
    position: fixed;
    right: max(18px, calc((100vw - 1180px) / 2));
    bottom: 18px;
    z-index: 35;
    display: none;
    align-items: center;
    gap: 10px;
    min-height: 50px;
    border-radius: 999px;
    padding: 0 18px;
    box-shadow: 0 14px 34px rgb(255 0 107 / 28%);
}

.customer-floating-cart.has-items {
    display: inline-flex;
}

.customer-floating-cart span {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    color: var(--primary);
    font-size: 12px;
}

.customer-floating-cart em {
    color: #fff;
    font-style: normal;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

.customer-floating-cart strong {
    color: #fff;
}

.customer-cart-drawer {
    position: fixed;
    inset: 0;
    z-index: 10000;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: 180ms ease;
}

.customer-cart-drawer.open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.customer-cart-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgb(17 18 31 / 42%);
    backdrop-filter: blur(2px);
}

.customer-cart-panel {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto auto;
    width: min(430px, 100vw);
    height: 100vh;
    height: 100dvh;
    padding: 0;
    background: #fff;
    box-shadow: -26px 0 70px rgb(16 18 34 / 18%);
    transform: translateX(100%);
    transition: transform 220ms ease;
}

.customer-cart-drawer.open .customer-cart-panel {
    transform: translateX(0);
}

.customer-cart-panel header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    min-height: 74px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
}

.customer-cart-panel h2,
.customer-checkout-summary h2,
.customer-checkout-card h1,
.customer-checkout-card h2 {
    margin: 0;
    color: var(--heading);
    font-size: 19px;
}

.customer-cart-panel header p {
    margin: 4px 0 0;
    color: var(--paragraph);
    font-size: 12px;
    font-weight: 600;
}

.customer-cart-panel header button {
    display: grid;
    place-items: center;
    width: 32px;
    min-height: 32px;
    border-radius: 50%;
    padding: 0;
    background: #fb4e4e;
    color: #fff;
}

.customer-cart-items {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 18px 20px;
    overflow-y: auto;
}

.customer-cart-items > .message {
    align-self: center;
    justify-self: center;
    margin-top: 40px;
    color: var(--paragraph);
    text-align: center;
}

.customer-cart-items.compact {
    max-height: 360px;
    padding: 0 4px 0 0;
    padding-right: 4px;
}

.customer-cart-line {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.customer-cart-line:last-child {
    border-bottom: 0;
}

.customer-cart-line img {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
}

.customer-cart-line h3 {
    margin: 0;
    color: var(--heading);
    font-size: 14px;
}

.customer-cart-line p {
    margin: 4px 0 6px;
    color: var(--paragraph);
    font-size: 11px;
    line-height: 1.4;
}

.customer-cart-line strong {
    color: var(--heading);
    font-size: 13px;
}

.customer-line-controls {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--heading);
    font-weight: 600;
}

.customer-line-controls button {
    display: grid;
    place-items: center;
    width: 20px;
    min-width: 20px;
    min-height: 20px;
    border: 1px solid var(--primary);
    border-radius: 50%;
    padding: 0;
    background: #fff;
    color: var(--primary);
}

.customer-line-qty {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--heading);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
}

.customer-drawer-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0 20px 14px;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--heading);
}

.customer-cart-panel > button,
.customer-checkout-summary > button {
    width: 100%;
    min-height: 46px;
    border-radius: 999px;
}

.customer-cart-panel > button {
    width: calc(100% - 40px);
    margin: 0 20px 20px;
}

.customer-cart-panel > button:disabled,
.customer-checkout-summary > button:disabled {
    cursor: not-allowed;
    opacity: 0.58;
    box-shadow: none;
}

.customer-checkout-screen,
.customer-status-screen {
    padding-bottom: 30px;
}

.customer-back-link {
    min-height: 32px;
    margin-bottom: 14px;
    border-radius: 999px;
    padding: 0;
    background: transparent;
    color: var(--primary);
    box-shadow: none;
    font-size: 13px;
}

.customer-checkout-layout,
.customer-status-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(330px, 0.85fr);
    gap: 22px;
    align-items: start;
}

.customer-checkout-card,
.customer-checkout-summary,
.customer-status-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 20px;
    background: #fff;
    box-shadow: 0 10px 28px rgb(16 18 34 / 6%);
}

.customer-checkout-title {
    display: grid;
    gap: 6px;
}

.customer-checkout-title p {
    margin: 0;
    color: var(--paragraph);
    font-size: 13px;
}

.customer-order-type-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    width: 100%;
    margin: 18px 0;
    padding: 4px;
    border-radius: 8px;
    background: #f7f7fc;
    color: var(--heading);
}

.customer-order-type-group button {
    flex: 1 1 110px;
    min-height: 34px;
    border-radius: 7px;
    padding: 0 14px;
    background: transparent;
    color: var(--heading);
    box-shadow: none;
    font-size: 13px;
}

.customer-order-type-group button.active {
    background: var(--primary);
    color: #fff;
}

.customer-shop.table-qr-mode .customer-order-type-group button:not([data-customer-order-type="dine_in"]) {
    display: none;
}

.customer-shop.table-qr-mode .customer-order-type-group {
    width: auto;
    background: var(--primary-soft);
    color: var(--primary);
}

.customer-shop.table-qr-mode #tableName {
    color: var(--heading);
    background: #f7f7fc;
    cursor: not-allowed;
}

.customer-checkout-card .customer-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
}

.customer-checkout-card #addressField,
.customer-checkout-card .customer-payment-fieldset {
    grid-column: 1 / -1;
}

.customer-payment-fieldset {
    margin-top: 18px;
}

.customer-checkout-summary {
    display: grid;
    gap: 16px;
    position: sticky;
    top: 88px;
}

.customer-coupon-box {
    display: grid;
    gap: 8px;
}

.customer-loyalty-box {
    display: grid;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}
.customer-loyalty-box > label > span { display: block; margin-bottom: 8px; color: var(--heading); font-size: 13px; font-weight: 700; }
.customer-loyalty-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 8px; align-items: center; }
.customer-loyalty-row input { min-width: 0; }
.customer-loyalty-row button { min-height: 42px; border-radius: 8px; padding: 0 14px; white-space: nowrap; }
.customer-loyalty-row button.secondary { color: var(--primary); background: #fff2f7; box-shadow: none; }
.loyalty-redeem-choice { display: flex; align-items: center; gap: 9px; margin-top: 10px; color: var(--heading); font-size: 13px; font-weight: 700; }
.loyalty-redeem-choice[hidden] { display: none; }
.loyalty-redeem-choice input { width: 19px; height: 19px; margin: 0; accent-color: var(--primary); }

.customer-coupon-box label > span {
    display: block;
    margin-bottom: 8px;
    color: var(--heading);
    font-size: 13px;
    font-weight: 700;
}

.customer-coupon-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: 8px;
    align-items: center;
}

.customer-coupon-row input {
    min-width: 0;
}

.customer-coupon-row button {
    min-height: 42px;
    border-radius: 8px;
    padding: 0 14px;
    white-space: nowrap;
}

.customer-coupon-row button:disabled {
    cursor: not-allowed;
    opacity: 0.58;
    box-shadow: none;
}

.customer-coupon-row button.secondary {
    background: #fff2f7;
    color: var(--primary);
    box-shadow: none;
}

#removeCustomerCouponButton {
    width: 42px;
    padding: 0;
}

.customer-legal-accept {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 10px;
    align-items: flex-start;
    margin: 14px 0 12px;
    border: 1px solid #eef0f8;
    border-radius: 8px;
    padding: 12px;
    background: #fbfcff;
    color: var(--paragraph);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.55;
}

.customer-legal-accept input {
    width: 18px;
    height: 18px;
    min-height: 18px;
    margin: 1px 0 0;
    accent-color: var(--primary);
}

.customer-legal-accept a {
    color: var(--primary);
    font-weight: 800;
    text-decoration: none;
}

.customer-legal-accept a:hover {
    text-decoration: underline;
}

.coupon-qr-scanner {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: grid;
    place-items: center;
    padding: 18px;
}

.coupon-qr-scanner[hidden] {
    display: none;
}

.coupon-qr-backdrop {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 60%);
}

.coupon-qr-panel {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 14px;
    width: min(460px, 100%);
    border-radius: 14px;
    padding: 16px;
    background: #fff;
    box-shadow: 0 26px 80px rgb(16 18 34 / 28%);
}

.coupon-qr-panel header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.coupon-qr-panel h2 {
    margin: 0;
    color: var(--heading);
    font-size: 18px;
}

.coupon-qr-panel header button {
    display: grid;
    place-items: center;
    width: 34px;
    min-height: 34px;
    border-radius: 50%;
    padding: 0;
}

.coupon-qr-panel video {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 12px;
    background: #111827;
    object-fit: cover;
}

.customer-option-backdrop {
    position: fixed;
    inset: 0;
    z-index: 90;
    background: rgb(0 0 0 / 58%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
}

.customer-option-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.customer-item-options {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 100;
    width: min(650px, calc(100vw - 28px));
    max-height: calc(100vh - 42px);
    overflow-y: auto;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 20px 60px rgb(0 0 0 / 26%);
    transform: translate(-50%, -45%) scale(0.98);
    opacity: 0;
    pointer-events: none;
    transition: 160ms ease;
}

.customer-item-options.open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.customer-option-card {
    padding: 18px;
}

.customer-option-card > header {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) 32px;
    gap: 14px;
    align-items: start;
    margin-bottom: 16px;
}

.customer-option-card > header img {
    width: 72px;
    height: 72px;
    border-radius: 8px;
    object-fit: cover;
}

.customer-option-card h2 {
    margin: 0;
    color: var(--heading);
    font-size: 16px;
}

.customer-option-card header p {
    margin: 6px 0 8px;
    color: var(--paragraph);
    font-size: 12px;
    line-height: 1.4;
}

.customer-option-card header strong {
    color: var(--heading);
    font-size: 15px;
}

.customer-option-card header button {
    display: grid;
    place-items: center;
    width: 30px;
    min-height: 30px;
    border-radius: 50%;
    padding: 0;
    background: #fff;
    color: #fb4e4e;
    box-shadow: none;
    font-size: 22px;
}

.customer-option-quantity,
.customer-option-card footer {
    display: flex;
    align-items: center;
    gap: 10px;
}

.customer-option-quantity {
    margin-bottom: 16px;
    color: var(--heading);
}

.customer-option-quantity b {
    margin-right: auto;
}

.customer-option-quantity button {
    display: grid;
    place-items: center;
    width: 22px;
    min-width: 22px;
    min-height: 22px;
    border: 1px solid var(--primary);
    border-radius: 50%;
    padding: 0;
    background: #fff;
    color: var(--primary);
}

.customer-choice-group {
    margin-bottom: 16px;
}

.customer-choice-group h3,
.customer-instructions span {
    display: block;
    margin-bottom: 9px;
    color: var(--heading);
    font-size: 14px;
    font-weight: 600;
}

.customer-choice-group > div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.customer-choice-group button {
    display: grid;
    grid-template-columns: 14px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    min-width: 128px;
    min-height: 52px;
    border: 1px solid #f7f7fc;
    border-radius: 10px;
    padding: 8px 10px;
    background: #f7f7fc;
    color: var(--heading);
    box-shadow: none;
    font-size: 12px;
    text-align: left;
}

.customer-choice-group button.active {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.customer-choice-group button span {
    width: 13px;
    height: 13px;
    border: 1px solid #c8ccd8;
    border-radius: 50%;
}

.customer-choice-group button.active span {
    border: 4px solid var(--primary);
}

.customer-choice-group button b {
    grid-column: 2;
    font-size: 11px;
}

.customer-addon-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.customer-addon-choice {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) auto;
    align-items: center;
    min-height: 56px;
    border: 1px solid #f7f7fc;
    border-radius: 10px;
    background: #f7f7fc;
    overflow: hidden;
}

.customer-addon-choice.active {
    border-color: var(--primary);
    background: var(--primary-soft);
}

.customer-addon-choice > button {
    min-width: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.customer-addon-qty {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
}

.customer-addon-qty button {
    display: grid;
    place-items: center;
    width: 20px;
    min-width: 20px;
    min-height: 20px;
    border: 1px solid var(--primary);
    border-radius: 50%;
    padding: 0;
    background: #fff;
    color: var(--primary);
}

.customer-addon-qty strong {
    min-width: 18px;
    color: var(--heading);
    font-size: 12px;
    text-align: center;
}

.customer-info-body {
    margin: 16px 0;
    padding: 14px;
    border-radius: 8px;
    background: #f7f7fc;
}

.customer-info-body h3 {
    margin: 0 0 8px;
    color: var(--heading);
    font-size: 14px;
}

.customer-info-body p {
    margin: 0;
    color: var(--paragraph);
    font-size: 13px;
    line-height: 1.55;
}

.customer-instructions {
    display: block;
    margin-bottom: 16px;
}

.customer-instructions textarea {
    min-height: 52px;
}

.customer-option-card footer {
    justify-content: flex-end;
}

.customer-option-card footer button {
    min-height: 44px;
    border-radius: 999px;
}

.customer-status-card {
    position: relative;
    margin-bottom: 20px;
    padding-top: 28px;
    text-align: center;
}

.customer-status-card::before {
    content: "✓";
    display: grid;
    place-items: center;
    width: 62px;
    height: 62px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: #1ab759;
    color: #fff;
    box-shadow: 0 12px 24px rgb(26 183 89 / 18%);
    font-size: 34px;
    font-weight: 800;
}

.customer-status-card[data-status="cancelled"]::before,
.customer-status-card[data-status="rejected"]::before,
.customer-status-card[data-status="returned"]::before,
.customer-status-card[data-payment-status="failed"]::before {
    content: "×";
    background: #fb4e4e;
    box-shadow: 0 12px 24px rgb(251 78 78 / 18%);
}

.customer-status-card > span {
    color: var(--paragraph);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.customer-status-card h1 {
    margin: 7px 0;
    color: var(--primary);
    font-size: 30px;
}

.customer-status-token {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    margin-bottom: 14px;
    border-radius: 999px;
    padding: 0 14px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 13px;
}

.customer-status-token[hidden] {
    display: none;
}

.customer-status-card p {
    margin: 0 0 26px;
    color: var(--heading);
}

.customer-status-track {
    position: relative;
    display: grid;
    grid-template-columns: repeat(var(--status-steps, 5), minmax(0, 1fr));
    gap: 10px;
    margin: 0 auto;
    max-width: 760px;
    padding: 0;
    list-style: none;
}

.customer-status-track::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 7%;
    right: 7%;
    height: 4px;
    border-radius: 999px;
    background: var(--primary);
}

.customer-status-track li {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 9px;
    color: var(--paragraph);
    font-size: 11px;
}

.customer-status-track li span {
    position: relative;
    z-index: 1;
    width: 22px;
    height: 22px;
    border: 4px solid var(--primary);
    border-radius: 50%;
    background: #fff;
}

.customer-status-track li.done span {
    background: var(--primary);
    box-shadow: inset 0 0 0 4px #fff;
}

.customer-status-track li.active strong,
.customer-status-track li.done strong {
    color: var(--heading);
}

.customer-track-lookup {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 8px;
}

.customer-track-lookup button {
    min-height: 42px;
    border-radius: 8px;
    padding: 0 12px;
}

.customer-payment-panel {
    display: grid;
    gap: 10px;
    border: 1px solid #eef0f8;
    border-radius: 10px;
    padding: 14px;
    background: #fbfbff;
}

.customer-payment-panel[hidden] {
    display: none;
}

.customer-payment-panel h3 {
    margin: 0;
    color: var(--heading);
    font-size: 15px;
}

.customer-payment-state {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: var(--paragraph);
    font-size: 13px;
}

.customer-payment-state strong {
    border-radius: 999px;
    padding: 5px 9px;
    background: #fff3cf;
    color: #ba7100;
    font-size: 12px;
    text-transform: capitalize;
}

.customer-payment-state.paid strong {
    background: #ddffe9;
    color: #029641;
}

.customer-payment-state.failed strong {
    background: #ffe4e4;
    color: #fb4e4e;
}

.customer-payment-action {
    min-height: 42px;
    border-radius: 999px;
}

.customer-payment-note {
    margin: 0;
    color: #029641;
    font-size: 13px;
    font-weight: 600;
}

.customer-payment-note.error {
    color: #fb4e4e;
}

.customer-payment-note.pending {
    color: #ba7100;
}

body[data-surface="kiosk"] {
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    overflow: hidden;
    background: #fff;
}

body[data-surface="kiosk"] .app-shell {
    display: block;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    background: #fff;
}

.kiosk-app {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    background: #fff;
    color: #17182f;
}

.kiosk-screen[hidden] {
    display: none !important;
}

.kiosk-logo,
.kiosk-rail-logo {
    display: inline-flex;
    align-items: center;
    color: #17182f;
    font-size: 22px;
    font-weight: 500;
    letter-spacing: 0;
}

.kiosk-logo::after,
.kiosk-rail-logo::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: -29px;
    margin-top: 5px;
    border: 2px solid #ff006b;
    border-radius: 50%;
}

.kiosk-home-screen {
    position: relative;
    min-height: 100vh;
    padding: 34px 30px 26px;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgb(2 5 9 / 52%) 0%, rgb(2 6 11 / 32%) 44%, rgb(4 5 9 / 72%) 100%),
        var(--kiosk-home-bg, linear-gradient(180deg, #02090f 0%, #071015 48%, #040509 100%));
    background-position: center;
    background-size: cover;
    color: #fff;
}

.kiosk-home-screen::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 112px;
    background: linear-gradient(0deg, #ff006b 0%, rgb(255 0 107 / 0%) 70%);
    opacity: 0.9;
}

.kiosk-home-top,
.kiosk-menu-head,
.kiosk-cart-head {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.kiosk-home-screen .kiosk-logo,
.kiosk-home-screen .kiosk-logo::after {
    color: #fff;
}

.kiosk-home-screen #languageSelect {
    width: auto;
    min-height: 28px;
    border: 0;
    border-radius: 999px;
    padding: 5px 13px;
    color: #17182f;
    font-size: 11px;
    background: #fff;
}

.kiosk-time-block {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: 5px;
    margin-top: 46px;
}

.kiosk-time-block strong {
    color: #fff;
    font-size: 28px;
    font-weight: 600;
}

.kiosk-time-block span {
    color: rgb(255 255 255 / 84%);
    font-size: 13px;
}

.kiosk-home-copy {
    position: relative;
    z-index: 2;
    width: 270px;
    margin-top: 42px;
}

.kiosk-home-copy h1 {
    margin: 0;
    color: #ffd232;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.28;
}

.kiosk-hero-food {
    display: none;
}

.kiosk-hero-food img {
    position: absolute;
    object-fit: contain;
    filter: drop-shadow(0 14px 24px rgb(0 0 0 / 42%));
}

.kiosk-hero-food .hero-burger {
    right: 22px;
    bottom: 3px;
    width: 260px;
}

.kiosk-hero-food .hero-fries {
    left: 8px;
    bottom: 16px;
    width: 160px;
}

.kiosk-hero-food .hero-drink {
    right: 18px;
    bottom: 105px;
    width: 142px;
}

.kiosk-start-button {
    position: absolute;
    right: 30px;
    bottom: 32px;
    left: 30px;
    z-index: 3;
    display: grid;
    gap: 3px;
    justify-items: center;
    min-height: 58px;
    border-radius: 0;
    padding: 0;
    background: transparent;
    color: #fff;
    box-shadow: none;
}

.kiosk-start-button strong {
    font-size: 14px;
    font-weight: 600;
}

.kiosk-start-button span {
    color: rgb(255 255 255 / 80%);
    font-size: 11px;
}

.kiosk-menu-screen {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    background: #fff;
}

.kiosk-category-rail {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 100vh;
    padding: 25px 10px 16px;
    border-right: 1px solid #f0f1f6;
    background: #fff;
}

.kiosk-rail-logo {
    justify-content: center;
    margin-bottom: 12px;
    font-size: 18px;
}

.kiosk-category-rail button {
    display: grid;
    justify-items: center;
    gap: 5px;
    min-height: 74px;
    border-radius: 10px;
    padding: 8px 5px;
    background: #fbfbfe;
    color: #17182f;
    box-shadow: none;
}

.kiosk-category-rail button.active {
    border: 1px solid #ffe1ec;
    background: #fff5fa;
    color: #ff006b;
}

.kiosk-category-rail img {
    width: 30px;
    height: 30px;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgb(33 35 63 / 12%));
}

.kiosk-category-rail span {
    max-width: 64px;
    color: inherit;
    font-size: 9px;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
}

.kiosk-menu-content {
    min-width: 0;
    height: 100vh;
    padding: 24px 18px 20px;
    overflow-y: auto;
}

.kiosk-menu-head {
    align-items: center;
}

.kiosk-menu-head .kiosk-logo {
    display: none;
}

.kiosk-menu-head input {
    height: 36px;
    border: 0;
    border-radius: 4px;
    padding: 0 14px;
    background: #f7f7fb;
    color: #17182f;
    font-size: 12px;
}

body[data-surface="kiosk"] .kiosk-menu-head button {
    position: relative;
    --kiosk-cart-button-size: 42px;
    width: var(--kiosk-cart-button-size);
    min-width: var(--kiosk-cart-button-size);
    height: var(--kiosk-cart-button-size);
    min-height: var(--kiosk-cart-button-size);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    padding: 0;
    background: #ff006b;
    color: #fff;
    font-size: 16px;
}

body[data-surface="kiosk"] .kiosk-menu-head button span {
    position: absolute;
    top: -5px;
    right: -5px;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #17182f;
    color: #fff;
    font-size: 10px;
}

.kiosk-menu-content h1 {
    margin: 20px 0 8px;
    color: #ff006b;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
}

.kiosk-type-pills {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

.kiosk-type-pills span {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    border-radius: 999px;
    padding: 0 10px;
    background: #fff7e9;
    color: #17182f;
    font-size: 10px;
    font-weight: 500;
}

.kiosk-type-pills span + span {
    background: #e9fff1;
}

.kiosk-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 12px;
    padding-bottom: 24px;
}

.kiosk-item-card {
    min-width: 0;
}

.kiosk-item-card button {
    position: relative;
    display: grid;
    width: 100%;
    min-height: 0;
    border-radius: 7px;
    padding: 0 0 28px;
    overflow: hidden;
    background: #fff;
    color: #17182f;
    text-align: left;
    box-shadow: 0 2px 14px rgb(44 48 68 / 10%);
}

.kiosk-item-card img {
    width: 100%;
    aspect-ratio: 1.2 / 1;
    object-fit: cover;
    background: #f8f8fb;
}

.kiosk-item-card strong,
.kiosk-item-card small,
.kiosk-item-card span {
    display: block;
    padding: 0 9px;
}

.kiosk-item-card strong {
    margin-top: 8px;
    color: #17182f;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
}

.kiosk-item-card small {
    min-height: 24px;
    margin-top: 4px;
    color: #777a95;
    font-size: 8px;
    line-height: 1.35;
}

.kiosk-item-card span {
    margin-top: 6px;
    color: #17182f;
    font-size: 11px;
    font-weight: 600;
}

.kiosk-item-card b {
    position: absolute;
    right: 9px;
    bottom: 9px;
    display: grid;
    place-items: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ff006b;
    color: #fff;
    font-size: 12px;
    line-height: 1;
}

.kiosk-option-backdrop {
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgb(0 0 0 / 58%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
}

.kiosk-option-backdrop.open {
    opacity: 1;
    pointer-events: auto;
}

.kiosk-item-options {
    position: fixed;
    top: 53%;
    left: 50%;
    z-index: 90;
    width: min(360px, calc(100vw - 36px));
    max-height: calc(100vh - 54px);
    overflow-y: auto;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 20px 60px rgb(0 0 0 / 26%);
    transform: translate(-50%, -45%) scale(0.98);
    opacity: 0;
    pointer-events: none;
    transition: 160ms ease;
}

.kiosk-item-options.open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.kiosk-option-card {
    padding: 18px 18px 16px;
}

.kiosk-option-card header {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.kiosk-option-card header img {
    width: 82px;
    height: 66px;
    border-radius: 6px;
    object-fit: cover;
}

.kiosk-option-card h2,
.kiosk-option-card h3,
.kiosk-order-method h2,
.kiosk-cart-screen h1 {
    margin: 0;
    color: #17182f;
    font-size: 14px;
    font-weight: 600;
}

.kiosk-option-card h2 span {
    color: #6e7191;
    font-size: 10px;
}

.kiosk-option-card header p {
    max-height: 32px;
    margin: 4px 0 8px;
    overflow: hidden;
    color: #777a95;
    font-size: 9px;
    line-height: 1.35;
}

.kiosk-option-card header strong {
    color: #17182f;
    font-size: 15px;
    font-weight: 600;
}

.kiosk-option-quantity {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
    color: #17182f;
    font-size: 12px;
}

.kiosk-option-quantity b {
    margin-right: auto;
}

body[data-surface="kiosk"] .kiosk-option-quantity button,
body[data-surface="kiosk"] .kiosk-cart-qty button {
    --kiosk-stepper-size: 18px;
    display: grid;
    place-items: center;
    width: var(--kiosk-stepper-size);
    min-width: var(--kiosk-stepper-size);
    height: var(--kiosk-stepper-size);
    min-height: var(--kiosk-stepper-size);
    flex: 0 0 var(--kiosk-stepper-size);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    padding: 0;
    background: #ff006b;
    color: #fff;
    font-size: 13px;
    line-height: 1;
}

body[data-surface="kiosk"] .kiosk-option-quantity button:first-of-type,
body[data-surface="kiosk"] .kiosk-cart-qty button:first-child {
    background: #74769a;
}

.kiosk-choice-group {
    margin-top: 16px;
}

.kiosk-choice-group h3,
.kiosk-instructions span {
    display: block;
    margin-bottom: 10px;
    color: #17182f;
    font-size: 12px;
    font-weight: 600;
}

.kiosk-choice-group > div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.kiosk-choice-group button {
    display: grid;
    min-height: 50px;
    border: 1px solid #eef0f6;
    border-radius: 4px;
    padding: 8px;
    background: #fff;
    color: #17182f;
    box-shadow: none;
    font-size: 9px;
    font-weight: 500;
    line-height: 1.2;
    text-align: left;
}

.kiosk-choice-group button.active {
    border-color: #ff006b;
    background: #fff5fa;
}

.kiosk-choice-group button span {
    width: 8px;
    height: 8px;
    margin-bottom: 4px;
    border: 1px solid #c9ccdc;
    border-radius: 50%;
}

.kiosk-choice-group button.active span {
    border: 3px solid #ff006b;
}

.kiosk-choice-group button b {
    margin-top: 2px;
    color: #17182f;
    font-size: 9px;
}

.kiosk-instructions {
    display: block;
    margin-top: 16px;
}

.kiosk-instructions input {
    height: 36px;
    border-radius: 3px;
    font-size: 10px;
}

.kiosk-option-card footer {
    display: grid;
    grid-template-columns: 0.9fr 1.6fr;
    gap: 10px;
    margin-top: 16px;
}

.kiosk-option-card footer button {
    min-height: 42px;
    border-radius: 999px;
    padding: 0 12px;
    font-size: 11px;
}

.kiosk-cart-screen,
.kiosk-success-screen {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    max-height: 100vh;
    max-height: 100dvh;
    padding: 28px 28px 26px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    scrollbar-width: thin;
    background: #fff;
}

.kiosk-cart-head {
    justify-content: center;
}

.kiosk-cart-head button {
    position: absolute;
    left: 0;
    min-height: 28px;
    border-radius: 999px;
    padding: 0 8px;
    background: #fff;
    color: #ff006b;
    box-shadow: none;
    font-size: 11px;
}

.kiosk-cart-head .kiosk-logo {
    margin: 0 auto;
}

.kiosk-cart-screen h1 {
    margin-top: 25px;
}

.kiosk-cart-screen > p {
    margin: 3px 0 16px;
    color: #777a95;
    font-size: 10px;
}

.kiosk-cart-list {
    display: grid;
    align-content: start;
    gap: 14px;
    min-height: 210px;
}

.kiosk-cart-item {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr) 70px;
    gap: 10px;
    align-items: center;
}

.kiosk-cart-item img {
    width: 82px;
    height: 65px;
    border-radius: 5px;
    object-fit: cover;
}

.kiosk-cart-item h2 {
    margin: 0;
    color: #17182f;
    font-size: 12px;
    font-weight: 600;
}

.kiosk-cart-item p {
    margin: 4px 0 6px;
    color: #777a95;
    font-size: 8px;
    line-height: 1.35;
}

.kiosk-cart-item strong {
    color: #17182f;
    font-size: 13px;
}

.kiosk-cart-qty {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    color: #17182f;
    font-size: 13px;
    font-weight: 600;
}

.kiosk-order-method {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #f1f1f6;
}

.kiosk-method-buttons,
.kiosk-table-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.kiosk-method-buttons button,
.kiosk-table-chips button {
    min-height: 42px;
    border: 1px solid transparent;
    border-radius: 5px;
    padding: 0 13px;
    background: #fbfbfe;
    color: #17182f;
    box-shadow: none;
    font-size: 10px;
}

.kiosk-method-buttons button.active,
.kiosk-table-chips button.active {
    border-color: #ff006b;
    background: #fff5fa;
    color: #ff006b;
}

.kiosk-table-picker {
    margin-top: 15px;
}

.kiosk-table-picker select {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.kiosk-table-picker h2 {
    margin-top: 0;
}

.kiosk-table-chips button span {
    color: #777a95;
}

.kiosk-discount-panel {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid #f1f1f6;
}

.kiosk-discount-panel h2 {
    margin: 0;
    color: #17182f;
    font-size: 13px;
}

.kiosk-discount-panel p {
    margin: 5px 0 0;
    color: #777a95;
    font-size: 9px;
}

.kiosk-discount-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.kiosk-discount-actions button {
    min-height: 42px;
    border: 1px solid #eef0f8;
    border-radius: 5px;
    background: #fbfbfe;
    color: #17182f;
    box-shadow: none;
    font-size: 10px;
}

.kiosk-discount-actions button.active {
    border-color: #ff006b;
    background: #fff5fa;
    color: #ff006b;
}

.kiosk-scanner-field {
    display: grid;
    gap: 6px;
    margin-top: 12px;
}

.kiosk-scanner-field span {
    color: #555b7c;
    font-size: 9px;
    font-weight: 600;
}

.kiosk-scanner-field input {
    width: 100%;
    min-height: 40px;
    border: 1px solid #e0e4f0;
    border-radius: 5px;
    padding: 0 12px;
    color: #17182f;
    font-size: 11px;
}

.kiosk-discount-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
    color: #17182f;
    font-size: 10px;
}

.kiosk-discount-result button {
    min-height: 30px;
    border: 1px solid #ffd8e8;
    border-radius: 999px;
    padding: 0 12px;
    background: #fff5fa;
    color: #ff006b;
    box-shadow: none;
    font-size: 9px;
}

.kiosk-totals {
    display: grid;
    gap: 8px;
    margin: 18px 0 18px;
    color: #17182f;
    font-size: 12px;
}

.kiosk-totals div {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.kiosk-totals dt,
.kiosk-totals dd {
    margin: 0;
}

.kiosk-totals dd {
    font-weight: 600;
}

.kiosk-totals div:last-child {
    font-weight: 600;
}

.kiosk-place-order,
.kiosk-success-screen > button {
    width: 100%;
    min-height: 48px;
    border-radius: 999px;
    background: #ff006b;
    color: #fff;
    font-size: 12px;
}

.kiosk-success-screen {
    display: grid;
    align-content: center;
    justify-items: center;
    text-align: center;
}

.success-burst {
    position: relative;
    display: grid;
    place-items: center;
    width: 96px;
    height: 96px;
    margin-bottom: 18px;
}

.success-burst::before {
    content: "";
    position: absolute;
    inset: 8px;
    background:
        radial-gradient(circle at 15% 20%, #1ea7e1 0 3px, transparent 4px),
        radial-gradient(circle at 70% 12%, #ffd232 0 5px, transparent 6px),
        radial-gradient(circle at 82% 66%, #1ab759 0 4px, transparent 5px),
        radial-gradient(circle at 26% 78%, #1ab759 0 4px, transparent 5px);
}

.success-burst span {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #25b65a;
    color: #fff;
    font-size: 34px;
    font-weight: 600;
}

.kiosk-success-screen h1 {
    margin: 0;
    color: #17182f;
    font-size: 15px;
    font-weight: 600;
}

.kiosk-success-screen > p {
    margin: 8px 0 26px;
    color: #17182f;
    font-size: 11px;
    line-height: 1.35;
}

.kiosk-receipt-card {
    width: 240px;
    min-height: 172px;
    margin-bottom: 22px;
    padding: 34px 18px 18px;
    background: #fff;
    color: #17182f;
    box-shadow: 0 2px 16px rgb(44 48 68 / 10%);
}

.kiosk-receipt-card span {
    display: block;
    font-size: 12px;
    font-weight: 600;
}

.kiosk-receipt-card strong {
    display: block;
    margin: 8px 0;
    color: #ff006b;
    font-size: 25px;
    font-weight: 600;
}

.kiosk-receipt-card p {
    margin: 0 0 28px;
    color: #17182f;
    font-size: 12px;
}

.kiosk-receipt-card small {
    display: block;
    color: #a0a3bd;
    font-size: 9px;
    line-height: 1.35;
}

.kiosk-success-screen > button.secondary {
    margin-top: 10px;
    border-color: #ff006b;
    color: #ff006b;
}

[dir="rtl"] .surface-tabs {
    margin-left: 0;
    margin-right: auto;
}

@media (max-width: 1040px) {
    .app-topbar,
    .pane-head,
    .order-card {
        align-items: stretch;
        flex-direction: column;
    }

    .app-shell,
    body[data-surface="kiosk"] .app-shell,
    body[data-surface="pos"] .app-shell {
        grid-template-columns: 1fr;
    }

    .cart-pane {
        position: static;
    }

    .surface-tabs {
        margin-left: 0;
    }

    body[data-surface="platform"] .platform-sidebar {
        display: none;
    }

    body[data-surface="platform"] .app-topbar {
        position: sticky;
    }

    body[data-surface="platform"] .app-shell {
        padding: 18px 14px;
    }

    .summary-grid,
    .dashboard-lower-grid,
    .popular-items-list {
        grid-template-columns: 1fr;
    }

    .dashboard-item-grid {
        grid-template-columns: repeat(2, minmax(120px, 1fr));
    }

    body[data-surface="platform"].sidebar-collapsed .app-shell {
        padding: 18px 14px;
    }

    .item-form .wide {
        grid-column: auto;
    }

    .promo-form .wide,
    .communication-form .wide {
        grid-column: auto;
    }
}

@media (max-width: 640px) {
    .app-topbar {
        padding: 12px;
    }

    .app-shell {
        width: min(100vw - 20px, 1180px);
        margin: 10px auto;
    }

    .ordering-pane,
    .platform-pane,
    .cart-pane {
        padding: 14px;
    }

    .order-controls,
    .login-form,
    .cart-actions,
    .payment-fieldset,
    .platform-stat-grid,
    .platform-tools-grid,
    .quick-form-grid,
    .catalog-lists,
    .form-row-2,
    .form-row-3,
    .report-summary-grid,
    .table-form,
    .item-form.open,
    .promo-form.open,
    .communication-form.open,
    .user-form.open,
    .settings-layout,
    .settings-form,
    .settings-readout,
    .role-permission-card,
    .permission-group-grid,
    .readiness-check-list {
        grid-template-columns: 1fr;
    }

    .settings-crud-head {
        flex-direction: column;
    }

    .dashboard-item-grid,
    .customer-stats-chart {
        grid-template-columns: 1fr 1fr;
    }

    .customer-stats-chart span {
        grid-template-columns: 40px minmax(0, 1fr);
        align-items: center;
        text-align: left;
    }

    .customer-stats-chart b {
        width: min(100%, var(--height));
        height: 10px;
        justify-self: stretch;
    }
}

@media (max-width: 640px) {
    .drawer-grid,
    .dining-filter-panel {
        grid-template-columns: 1fr;
    }

    .admin-drawer {
        width: 100vw;
    }
}

@media print {
    .app-topbar,
    .platform-sidebar,
    .breadcrumb-line,
    .module-login,
    .module-card-head,
    #platformMessage {
        display: none !important;
    }

    body,
    body[data-surface="platform"] .app-shell {
        background: #fff;
        padding: 0;
        margin: 0;
    }

    body[data-surface="platform"] .platform-pane,
    .module-card,
    .qr-view {
        border: 0;
        box-shadow: none;
    }
}

.ops-body {
    background: #f7f7fc;
}

.ops-body .app-topbar {
    min-height: 68px;
    padding: 10px 18px;
}

.ops-body .surface-tabs {
    display: none;
}

.ops-top-link {
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    color: var(--heading);
    text-decoration: none;
    font-weight: 500;
}

.ops-lang {
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    color: var(--heading);
}

.ops-branch-picker {
    min-width: 220px;
    cursor: pointer;
}

.ops-branch-picker > div {
    min-width: 0;
}

.ops-branch-picker select,
.ops-lang select {
    min-height: 22px;
    border: 0;
    border-radius: 0;
    padding: 0 22px 0 0;
    background-color: transparent;
    color: var(--heading);
    font-size: 13px;
    font-weight: 700;
    box-shadow: none;
    cursor: pointer;
}

.ops-branch-picker select {
    width: 178px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ops-lang select {
    width: auto;
    min-width: 92px;
}

html[dir="rtl"] .ops-branch-picker select,
html[dir="rtl"] .ops-lang select {
    padding-right: 0;
    padding-left: 22px;
}

.ops-fullscreen-button {
    display: grid;
    place-items: center;
    width: 44px;
    min-width: 44px;
    min-height: 44px;
    border-radius: 10px;
    border: 1px solid #c8f7db;
    padding: 0;
    background: #e9fff1;
    color: #16b95f;
    box-shadow: none;
    font-size: 24px;
    line-height: 1;
}

.ops-fullscreen-button.active {
    border-color: #16b95f;
    background: #16b95f;
    color: #fff;
}

html.ops-fullscreen-fallback,
html.ops-fullscreen-fallback body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

html.ops-fullscreen-fallback .ops-shell {
    position: fixed;
    inset: 0;
    z-index: 9999;
    width: 100%;
    min-height: 100%;
    margin: 0;
    overflow: auto;
    background: var(--surface-canvas, #f7f7fb);
}

.ops-shell {
    width: min(1440px, calc(100vw - 32px));
    margin: 18px auto;
}

.status-shell {
    width: 100%;
    min-height: calc(100vh - 68px);
    margin: 0;
    padding: 16px 20px 20px;
}

.ops-branch-control {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.kds-shell {
    display: grid;
    grid-template-columns: 454px minmax(0, 1fr);
    gap: 24px;
    width: 100%;
    min-height: calc(100vh - 68px);
    margin: 0;
    padding: 28px 20px 20px;
}

.items-board,
.kds-workspace {
    min-height: calc(100vh - 116px);
}

.items-board {
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-card);
}

.items-board h2 {
    min-height: 49px;
    margin: 0;
    padding: 16px 12px;
    border-bottom: 1px solid #e6e9f4;
    font-size: 18px;
}

#kdsItemsBoard {
    display: grid;
    gap: 8px;
    padding: 14px;
}

.item-board-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
}

.item-board-row strong {
    color: var(--heading);
}

.item-board-row span {
    color: var(--primary);
    font-weight: 600;
}

.kds-workspace {
    display: grid;
    grid-template-rows: auto auto 1fr;
    gap: 18px;
}

.kds-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px;
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-card);
}

.kds-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kds-filters button {
    min-width: 116px;
    min-height: 44px;
    border-radius: 7px;
}

#opsSearch {
    max-width: 305px;
    min-height: 44px;
}

.kds-login {
    max-width: 760px;
}

.kds-shell .ops-board {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0;
}

.kds-shell .ops-column {
    min-height: 620px;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.kds-shell .ops-column h2 {
    min-height: 50px;
    border: 0;
    border-radius: 8px;
    background: #fff;
    box-shadow: var(--shadow-card);
}

.kds-shell .ops-column-list {
    padding: 14px 0 0;
}

.kds-shell .kds-ticket {
    border-radius: 8px;
    box-shadow: var(--shadow-card);
}

.ops-hero {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow-card);
}

.ops-actions {
    display: grid;
    gap: 10px;
    min-width: min(520px, 100%);
}

.ops-login {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) minmax(110px, 1fr) auto;
    gap: 10px;
}

.ops-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 18px;
}

.status-shell .ops-board {
    grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 3fr);
    gap: 16px;
    height: calc(100dvh - 104px);
    min-height: 560px;
    margin-top: 0;
}

.ops-column {
    min-height: 520px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    box-shadow: var(--shadow-card);
}

.status-shell .ops-column {
    min-height: 0;
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
}

.ops-column h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 16px;
    border-bottom: 1px solid var(--line);
    color: var(--heading);
    font-size: 18px;
}

.status-shell .ops-column h2 {
    justify-content: center;
    min-height: 48px;
    border-bottom: 0;
    padding: 12px 16px;
    color: #fff;
    font-size: 19px;
    font-weight: 800;
}

.status-shell .popular-column h2 {
    justify-content: flex-start;
    background: #fff;
    color: #007aff;
    font-size: 22px;
}

.status-shell .preparing-column h2 {
    background: var(--primary);
}

.status-shell .ready-column h2 {
    background: #19b85c;
}

.ops-column h2 span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 14px;
}

.ops-column-list {
    display: grid;
    gap: 12px;
    padding: 14px;
}

.status-shell .ops-column-list {
    align-content: start;
    height: calc(100% - 48px);
    overflow-y: auto;
    padding: 18px;
}

.oss-popular-item {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    border: 1px solid #eef0f8;
    border-radius: 10px;
    padding: 13px 14px;
    background: #fff;
    box-shadow: 0 8px 18px rgb(16 18 34 / 5%);
}

.oss-popular-item span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #eff0f6;
    color: #6e7191;
    font-size: 12px;
    font-weight: 800;
}

.oss-popular-item strong {
    min-width: 0;
    color: var(--heading);
    font-size: 17px;
}

.oss-popular-item b {
    display: grid;
    place-items: center;
    min-width: 36px;
    height: 30px;
    border-radius: 999px;
    background: var(--primary-soft);
    color: var(--primary);
    font-size: 14px;
}

.kds-ticket {
    display: grid;
    gap: 12px;
    border: 1px solid #eff0f6;
    border-radius: 16px;
    padding: 14px;
    background: #fff;
    box-shadow: var(--shadow-menu);
}

.status-shell .kds-ticket {
    border-radius: 10px;
    box-shadow: 0 8px 18px rgb(16 18 34 / 5%);
}

.status-shell .ticket-head strong {
    font-size: 24px;
}

.status-shell .ticket-head span {
    background: #f7f7fc;
}

.ticket-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ticket-head strong {
    color: var(--heading);
    font-size: 18px;
}

.ticket-head span {
    border-radius: 999px;
    padding: 4px 10px;
    background: #eff0f6;
    color: var(--paragraph);
    font-size: 12px;
    text-transform: uppercase;
}

.kds-ticket p {
    margin: 0;
    color: var(--paragraph);
}

.kds-ticket ul {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.kds-ticket li {
    display: flex;
    gap: 8px;
    color: var(--heading);
}

.kds-ticket li b {
    color: var(--primary);
}

.kds-ticket > button {
    min-height: 44px;
    border-radius: 7px;
    background: var(--primary);
    color: #fff;
    box-shadow: none;
    font-weight: 700;
}

.kds-ticket > button[data-next-status="completed"] {
    background: #19b85c;
}

.empty-column {
    margin: 0;
    color: var(--placeholder);
}

@media (max-width: 1100px) {
    .ops-body .app-topbar {
        flex-wrap: wrap;
    }

    .ops-body .topbar-actions {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .ops-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .kds-shell {
        grid-template-columns: 1fr;
    }

    .kds-shell .ops-board {
        grid-template-columns: 1fr;
    }

    .status-shell .ops-board {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        height: auto;
        min-height: 0;
    }

    .status-shell .popular-column {
        grid-column: 1 / -1;
        min-height: 320px;
    }

    .status-shell .preparing-column,
    .status-shell .ready-column {
        min-height: 520px;
    }
}

@media (max-width: 720px) {
    .ops-body .app-topbar {
        align-items: flex-start;
    }

    .ops-body .topbar-actions {
        width: 100%;
        margin-left: 0;
    }

    .ops-branch-picker {
        flex: 1 1 210px;
    }

    .ops-hero,
    .ops-login {
        grid-template-columns: 1fr;
    }

    .ops-hero {
        flex-direction: column;
    }

    .ops-board {
        grid-template-columns: 1fr;
    }

    .status-shell {
        padding: 12px;
    }

    .status-shell .ops-board {
        grid-template-columns: 1fr;
    }

    .status-shell .popular-column {
        grid-column: auto;
    }

    .kds-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    #opsSearch {
        max-width: none;
    }
}

@media (max-width: 760px) {
    .public-page-topbar {
        align-items: flex-start;
        flex-direction: column;
        padding: 12px;
    }

    .public-page-topbar nav {
        justify-content: flex-start;
        width: 100%;
    }

    .public-language-picker {
        width: 100%;
        margin: 4px 0 0;
    }

    .public-page-shell {
        width: calc(100vw - 22px);
        margin-top: 16px;
    }

    .public-page-document {
        padding: 22px 18px;
        border-radius: 10px;
    }

    .public-page-document h1 {
        font-size: 34px;
    }

    .public-page-summary {
        font-size: 16px;
    }

    .public-contact-list {
        grid-template-columns: 1fr;
    }

    body[data-surface="customer"] .app-shell {
        width: min(100vw - 20px, 560px);
        margin-top: 12px;
    }

    .customer-public-topbar {
        flex-wrap: wrap;
        padding: 10px;
    }

    .customer-public-topbar .brand {
        min-width: 0;
    }

    .customer-public-topbar .wordmark {
        font-size: 24px;
    }

    .customer-public-topbar .language-picker {
        min-width: 100px;
    }

    .customer-public-nav {
        order: 2;
        margin-left: auto;
    }

    .customer-public-nav a {
        min-height: 34px;
        padding: 0 9px;
        font-size: 13px;
    }

    .customer-header-search {
        order: 4;
        flex: 1 0 100%;
        max-width: none;
    }

    .customer-top-actions {
        order: 3;
        margin-left: auto;
    }

    .customer-track-button {
        padding: 0 10px;
        font-size: 12px;
    }

    .customer-auth-button {
        padding: 0 9px;
        font-size: 12px;
    }

    .customer-slider-slide img {
        aspect-ratio: 16 / 8;
    }

    .customer-slider-control {
        width: 30px;
        min-height: 30px;
        font-size: 21px;
    }

    .customer-hero {
        grid-template-columns: minmax(0, 1fr) 78px;
        min-height: 78px;
        padding: 12px 14px;
    }

    .customer-hero h1 {
        font-size: 22px;
    }

    .customer-hero p {
        font-size: 13px;
    }

    .customer-product-grid,
    .customer-checkout-layout,
    .customer-status-layout,
    .customer-checkout-card .customer-fields {
        grid-template-columns: 1fr;
    }

    .customer-checkout-summary {
        position: static;
    }

    .customer-product-card {
        grid-template-columns: 104px minmax(0, 1fr);
    }

    .customer-product-card img {
        width: 104px;
        height: 108px;
    }

    .customer-product-grid.grid-mode {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .customer-product-grid.grid-mode .customer-product-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .customer-product-grid.grid-mode .customer-product-card img {
        width: 100%;
        height: 120px;
    }

    .customer-product-card h3 {
        font-size: 14px;
    }

    .customer-addon-choice {
        grid-template-columns: minmax(0, 1fr);
    }

    .customer-addon-qty {
        justify-content: flex-end;
        padding: 0 10px 10px;
    }

    .customer-coupon-row {
        grid-template-columns: 1fr 1fr;
    }

    .customer-loyalty-row { grid-template-columns: 1fr 1fr; }
    .customer-loyalty-row input { grid-column: 1 / -1; }
    .customer-loyalty-row button { width: 100%; }

    .customer-coupon-row input {
        grid-column: 1 / -1;
    }

    .customer-coupon-row button {
        width: 100%;
    }

    #removeCustomerCouponButton {
        grid-column: 1 / -1;
        width: 100%;
    }

    .customer-category-strip .category-pill {
        min-width: 106px;
        min-height: 92px;
    }

    .customer-floating-cart {
        right: 10px;
        bottom: 10px;
        left: 10px;
        justify-content: center;
    }

    .customer-cart-panel {
        width: 100vw;
        padding: 0 0 max(10px, env(safe-area-inset-bottom));
    }

    .customer-item-options {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100vw;
        max-height: 88vh;
        max-height: 88dvh;
        border-radius: 18px 18px 0 0;
        transform: translateY(100%);
    }

    .customer-item-options.open {
        transform: translateY(0);
    }

    .customer-order-type-group {
        width: 100%;
        justify-content: center;
    }

    .customer-status-track {
        overflow-x: auto;
        grid-template-columns: repeat(var(--status-steps, 5), 84px);
        padding-bottom: 8px;
    }

    .customer-status-track::before {
        left: 42px;
        right: auto;
        width: var(--status-track-mobile-width, 336px);
    }
}

@media (max-width: 430px) {
    body[data-surface="customer"] .app-shell {
        width: calc(100vw - 14px);
    }

    .customer-public-topbar {
        gap: 8px;
    }

    .customer-public-nav {
        order: 2;
        width: 100%;
        margin-left: 0;
    }

    .customer-public-nav a {
        flex: 1 1 0;
        justify-content: center;
    }

    .customer-top-actions {
        width: 100%;
        justify-content: space-between;
        margin-left: 0;
    }

    .customer-public-topbar .language-picker {
        flex: 1 1 0;
        min-width: 0;
    }

    .customer-track-button {
        flex: 1 1 0;
    }

    .customer-auth-button {
        flex: 1 1 0;
        justify-content: center;
    }

    .customer-auth-button .customer-auth-icon {
        display: none;
    }

    .customer-auth-panel {
        padding: 18px;
    }

    .customer-product-grid.grid-mode {
        grid-template-columns: minmax(0, 1fr);
    }

    .customer-product-grid.grid-mode .customer-product-card img {
        height: 168px;
    }

    .customer-product-card {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 10px;
    }

    .customer-product-card img {
        width: 96px;
        height: 104px;
    }

    .customer-option-card > header {
        grid-template-columns: 64px minmax(0, 1fr) 30px;
        gap: 10px;
    }

    .customer-option-card > header img {
        width: 64px;
        height: 64px;
    }

    .customer-option-card footer {
        display: grid;
        grid-template-columns: 1fr;
    }

    .customer-option-card footer button {
        width: 100%;
    }
}

@media (min-width: 700px) and (min-height: 1100px) {
    body[data-surface="kiosk"] {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        touch-action: manipulation;
    }

    body[data-surface="kiosk"] .app-shell,
    .kiosk-app,
    .kiosk-home-screen,
    .kiosk-menu-screen,
    .kiosk-cart-screen,
    .kiosk-success-screen {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
    }

    .kiosk-cart-screen,
    .kiosk-success-screen {
        min-height: 0;
    }

    .kiosk-logo,
    .kiosk-rail-logo {
        font-size: clamp(40px, 4.4vw, 56px);
    }

    .kiosk-rail-logo {
        font-size: clamp(31px, 3.2vw, 38px);
    }

    .kiosk-logo::after,
    .kiosk-rail-logo::after {
        width: 16px;
        height: 16px;
        margin-left: -70px;
        margin-top: 10px;
        border-width: 4px;
    }

    .kiosk-rail-logo::after {
        width: 12px;
        height: 12px;
        margin-left: -47px;
        margin-top: 7px;
        border-width: 3px;
    }

    .kiosk-home-screen {
        padding: clamp(64px, 6.4vh, 104px) clamp(62px, 7vw, 92px) clamp(54px, 5.2vh, 82px);
    }

    .kiosk-home-screen::after {
        height: clamp(240px, 17vh, 330px);
    }

    .kiosk-home-screen #languageSelect {
        min-height: 54px;
        border-radius: 999px;
        padding: 0 28px;
        font-size: 20px;
    }

    .kiosk-time-block {
        gap: 12px;
        margin-top: clamp(96px, 8.5vh, 160px);
    }

    .kiosk-time-block strong {
        font-size: clamp(58px, 6.7vw, 78px);
        line-height: 1;
    }

    .kiosk-time-block span {
        font-size: clamp(22px, 2.4vw, 30px);
    }

    .kiosk-home-copy {
        width: min(660px, 74vw);
        margin-top: clamp(96px, 9vh, 170px);
    }

    .kiosk-home-copy h1 {
        font-size: clamp(62px, 7vw, 86px);
        line-height: 1.16;
    }

    .kiosk-hero-food {
        right: clamp(-46px, -3vw, -22px);
        bottom: clamp(185px, 15vh, 260px);
        left: clamp(34px, 5vw, 78px);
        height: clamp(620px, 47vh, 900px);
    }

    .kiosk-hero-food .hero-burger {
        right: clamp(24px, 7vw, 106px);
        bottom: 0;
        width: clamp(520px, 64vw, 740px);
    }

    .kiosk-hero-food .hero-fries {
        left: 0;
        bottom: clamp(24px, 3vh, 58px);
        width: clamp(330px, 39vw, 455px);
    }

    .kiosk-hero-food .hero-drink {
        right: clamp(18px, 8vw, 120px);
        bottom: clamp(250px, 20vh, 380px);
        width: clamp(285px, 33vw, 390px);
    }

    body[data-surface="kiosk"] .kiosk-start-button {
        right: clamp(62px, 7vw, 96px);
        bottom: clamp(52px, 5.4vh, 88px);
        left: clamp(62px, 7vw, 96px);
        min-height: clamp(96px, 7.4vh, 124px);
    }

    .kiosk-start-button strong {
        font-size: clamp(27px, 2.9vw, 34px);
    }

    .kiosk-start-button span {
        font-size: clamp(18px, 1.9vw, 24px);
    }

    .kiosk-menu-screen {
        grid-template-columns: clamp(206px, 20vw, 250px) minmax(0, 1fr);
    }

    .kiosk-category-rail {
        gap: 18px;
        min-height: 100vh;
        min-height: 100dvh;
        padding: clamp(46px, 4.5vh, 72px) 22px 28px;
        overflow-y: auto;
    }

    .kiosk-rail-logo {
        margin-bottom: clamp(18px, 2.2vh, 34px);
    }

    .kiosk-category-rail button {
        gap: 14px;
        min-height: clamp(132px, 8.4vh, 168px);
        border-radius: 22px;
        padding: 18px 12px;
    }

    .kiosk-category-rail img {
        width: clamp(66px, 6.8vw, 82px);
        height: clamp(66px, 6.8vw, 82px);
    }

    .kiosk-category-rail span {
        max-width: 170px;
        font-size: clamp(18px, 1.9vw, 23px);
        line-height: 1.18;
    }

    .kiosk-menu-content {
        height: 100vh;
        height: 100dvh;
        padding: clamp(46px, 4.7vh, 72px) clamp(42px, 5.2vw, 68px) 46px;
    }

    .kiosk-menu-head {
        gap: 24px;
    }

    .kiosk-menu-head input {
        height: clamp(70px, 5.4vh, 86px);
        border-radius: 8px;
        padding: 0 28px;
        font-size: clamp(20px, 2vw, 24px);
    }

    body[data-surface="kiosk"] .kiosk-menu-head button {
        --kiosk-cart-button-size: clamp(76px, 7.4vw, 92px);
        font-size: clamp(28px, 3vw, 36px);
    }

    body[data-surface="kiosk"] .kiosk-menu-head button span {
        top: -10px;
        right: -10px;
        min-width: 34px;
        height: 34px;
        font-size: 18px;
    }

    .kiosk-menu-content h1 {
        margin: clamp(38px, 3.6vh, 56px) 0 18px;
        font-size: clamp(42px, 4.5vw, 54px);
    }

    .kiosk-type-pills {
        gap: 18px;
        margin-bottom: clamp(34px, 3.5vh, 52px);
    }

    .kiosk-type-pills span {
        min-height: 46px;
        padding: 0 24px;
        font-size: clamp(18px, 1.8vw, 22px);
    }

    .kiosk-menu-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(28px, 3.2vh, 44px) clamp(24px, 3vw, 36px);
        padding-bottom: 52px;
    }

    .kiosk-item-card button {
        min-height: clamp(460px, 30vh, 560px);
        border-radius: 18px;
        padding-bottom: 74px;
        box-shadow: 0 10px 30px rgb(44 48 68 / 12%);
    }

    .kiosk-item-card img {
        aspect-ratio: 1.24 / 1;
    }

    .kiosk-item-card strong,
    .kiosk-item-card small,
    .kiosk-item-card span {
        padding: 0 clamp(20px, 2.4vw, 30px);
    }

    .kiosk-item-card strong {
        margin-top: 22px;
        font-size: clamp(22px, 2.35vw, 28px);
        line-height: 1.22;
    }

    .kiosk-item-card small {
        min-height: 56px;
        margin-top: 10px;
        font-size: clamp(15px, 1.55vw, 19px);
        line-height: 1.35;
    }

    .kiosk-item-card span {
        margin-top: 14px;
        font-size: clamp(22px, 2.35vw, 28px);
    }

    .kiosk-item-card b {
        right: 24px;
        bottom: 24px;
        width: 38px;
        height: 38px;
        font-size: 28px;
    }

    .kiosk-item-options {
        width: min(820px, calc(100vw - 96px));
        max-height: calc(100vh - 130px);
        max-height: calc(100dvh - 130px);
        border-radius: 24px;
    }

    .kiosk-option-card {
        padding: 36px 36px 32px;
    }

    .kiosk-option-card header {
        grid-template-columns: 188px minmax(0, 1fr);
        gap: 28px;
    }

    .kiosk-option-card header img {
        width: 188px;
        height: 146px;
        border-radius: 14px;
    }

    .kiosk-option-card h2,
    .kiosk-option-card h3,
    .kiosk-order-method h2,
    .kiosk-cart-screen h1 {
        font-size: clamp(28px, 3vw, 34px);
    }

    .kiosk-option-card h2 span {
        font-size: 18px;
    }

    .kiosk-option-card header p {
        max-height: 76px;
        margin: 10px 0 16px;
        font-size: 18px;
        line-height: 1.4;
    }

    .kiosk-option-card header strong {
        font-size: 30px;
    }

    .kiosk-option-quantity {
        gap: 20px;
        margin-top: 34px;
        font-size: 24px;
    }

    body[data-surface="kiosk"] .kiosk-option-quantity button,
    body[data-surface="kiosk"] .kiosk-cart-qty button {
        --kiosk-stepper-size: 44px;
        font-size: 28px;
    }

    .kiosk-choice-group {
        margin-top: 30px;
    }

    .kiosk-choice-group h3,
    .kiosk-instructions span {
        margin-bottom: 16px;
        font-size: 22px;
    }

    .kiosk-choice-group > div {
        gap: 16px;
    }

    .kiosk-choice-group button {
        min-height: 106px;
        border-radius: 10px;
        padding: 16px;
        font-size: 18px;
    }

    .kiosk-choice-group button span {
        width: 16px;
        height: 16px;
        margin-bottom: 8px;
    }

    .kiosk-choice-group button.active span {
        border-width: 5px;
    }

    .kiosk-choice-group button b {
        margin-top: 6px;
        font-size: 17px;
    }

    .kiosk-instructions {
        margin-top: 30px;
    }

    .kiosk-instructions input {
        height: 68px;
        border-radius: 8px;
        padding: 0 18px;
        font-size: 18px;
    }

    .kiosk-option-card footer {
        gap: 18px;
        margin-top: 32px;
    }

    .kiosk-option-card footer button {
        min-height: 72px;
        padding: 0 24px;
        font-size: 20px;
    }

    .kiosk-cart-screen,
    .kiosk-success-screen {
        padding: clamp(58px, 5vh, 82px) clamp(68px, 7vw, 96px) clamp(52px, 5vh, 82px);
    }

    .kiosk-cart-head button {
        min-height: 54px;
        padding: 0 18px;
        font-size: 21px;
    }

    .kiosk-cart-screen h1 {
        margin-top: clamp(52px, 5vh, 76px);
    }

    .kiosk-cart-screen > p {
        margin: 8px 0 32px;
        font-size: 18px;
    }

    .kiosk-cart-list {
        gap: 28px;
        min-height: clamp(520px, 37vh, 720px);
    }

    .kiosk-cart-item {
        grid-template-columns: clamp(170px, 17vw, 210px) minmax(0, 1fr) clamp(146px, 15vw, 180px);
        gap: 24px;
    }

    .kiosk-cart-item img {
        width: clamp(170px, 17vw, 210px);
        height: clamp(132px, 13vw, 162px);
        border-radius: 12px;
    }

    .kiosk-cart-item h2 {
        font-size: clamp(24px, 2.6vw, 30px);
    }

    .kiosk-cart-item p {
        margin: 10px 0 12px;
        font-size: clamp(16px, 1.7vw, 20px);
        line-height: 1.35;
    }

    .kiosk-cart-item strong {
        font-size: clamp(25px, 2.6vw, 32px);
    }

    .kiosk-cart-qty {
        gap: 18px;
        font-size: 26px;
    }

    .kiosk-order-method {
        margin-top: clamp(30px, 3.4vh, 54px);
        padding-top: clamp(30px, 3.4vh, 54px);
    }

    .kiosk-method-buttons,
    .kiosk-table-chips {
        gap: 18px;
        margin-top: 22px;
    }

    .kiosk-method-buttons button,
    .kiosk-table-chips button {
        min-height: 72px;
        border-radius: 10px;
        padding: 0 28px;
        font-size: 20px;
    }

    .kiosk-table-picker {
        margin-top: 30px;
    }

    .kiosk-discount-panel {
        margin-top: clamp(30px, 3.4vh, 54px);
        padding-top: clamp(30px, 3.4vh, 54px);
    }

    .kiosk-discount-panel h2 {
        font-size: clamp(23px, 2.3vw, 29px);
    }

    .kiosk-discount-panel p {
        margin-top: 10px;
        font-size: clamp(16px, 1.6vw, 20px);
    }

    .kiosk-discount-actions {
        gap: 18px;
        margin-top: 22px;
    }

    .kiosk-discount-actions button {
        min-height: 72px;
        border-radius: 10px;
        padding: 0 24px;
        font-size: 20px;
    }

    .kiosk-scanner-field {
        gap: 12px;
        margin-top: 22px;
    }

    .kiosk-scanner-field span {
        font-size: clamp(16px, 1.6vw, 20px);
    }

    .kiosk-scanner-field input {
        min-height: 70px;
        border-radius: 10px;
        padding: 0 24px;
        font-size: 20px;
    }

    .kiosk-discount-result {
        gap: 20px;
        margin-top: 18px;
        font-size: clamp(18px, 1.8vw, 23px);
    }

    .kiosk-discount-result button {
        min-height: 58px;
        padding: 0 24px;
        font-size: 18px;
    }

    .kiosk-totals {
        gap: 16px;
        margin: clamp(36px, 4vh, 58px) 0 34px;
        font-size: clamp(23px, 2.4vw, 30px);
    }

    body[data-surface="kiosk"] .kiosk-place-order,
    body[data-surface="kiosk"] .kiosk-success-screen > button {
        min-height: 86px;
        font-size: 22px;
    }

    .success-burst {
        width: 220px;
        height: 220px;
        margin-bottom: 42px;
    }

    .success-burst::before {
        inset: 18px;
        background:
            radial-gradient(circle at 15% 20%, #1ea7e1 0 7px, transparent 8px),
            radial-gradient(circle at 70% 12%, #ffd232 0 10px, transparent 11px),
            radial-gradient(circle at 82% 66%, #1ab759 0 8px, transparent 9px),
            radial-gradient(circle at 26% 78%, #1ab759 0 8px, transparent 9px);
    }

    .success-burst span {
        width: 134px;
        height: 134px;
        font-size: 78px;
    }

    .kiosk-success-screen h1 {
        font-size: 34px;
    }

    .kiosk-success-screen > p {
        margin: 18px 0 54px;
        font-size: 22px;
        line-height: 1.4;
    }

    .kiosk-receipt-card {
        width: min(560px, 72vw);
        min-height: 360px;
        margin-bottom: 44px;
        padding: 66px 44px 34px;
        box-shadow: 0 8px 36px rgb(44 48 68 / 12%);
    }

    .kiosk-receipt-card span {
        font-size: 24px;
    }

    .kiosk-receipt-card strong {
        margin: 18px 0;
        font-size: 54px;
    }

    .kiosk-receipt-card p {
        margin-bottom: 60px;
        font-size: 24px;
    }

    .kiosk-receipt-card small {
        font-size: 17px;
        line-height: 1.45;
    }

    body[data-surface="kiosk"] .kiosk-success-screen > button.secondary {
        margin-top: 18px;
        border: 1px solid #ff006b;
        background: #fff;
        color: #ff006b;
    }
}