/* WOS — iOS liquid glass theme overlay
   Loaded last so it can restyle Onsen + app pages globally. */

:root {
    --lg-bg-0: #d9e4f2;
    --lg-bg-1: #e8eef8;
    --lg-bg-2: #f4f7fb;
    --lg-bg-3: #c8d8ea;
    --lg-ink: rgba(15, 23, 42, 0.92);
    --lg-ink-soft: rgba(30, 41, 59, 0.72);
    --lg-muted: rgba(71, 85, 105, 0.78);
    --lg-line: rgba(255, 255, 255, 0.55);
    --lg-line-dark: rgba(15, 23, 42, 0.08);
    --lg-glass: rgba(255, 255, 255, 0.48);
    --lg-glass-strong: rgba(255, 255, 255, 0.72);
    --lg-glass-tint: rgba(236, 242, 250, 0.58);
    --lg-glass-dark: rgba(15, 23, 42, 0.42);
    --lg-accent: #007aff;
    --lg-accent-soft: rgba(0, 122, 255, 0.16);
    --lg-success: #34c759;
    --lg-warning: #ff9f0a;
    --lg-danger: #ff3b30;
    --lg-radius: 18px;
    --lg-radius-sm: 12px;
    --lg-radius-lg: 24px;
    --lg-blur: 28px;
    --lg-shadow: 0 10px 30px rgba(15, 23, 42, 0.12), 0 1px 0 rgba(255, 255, 255, 0.45) inset;
    --lg-shadow-sm: 0 4px 14px rgba(15, 23, 42, 0.08), 0 1px 0 rgba(255, 255, 255, 0.4) inset;
    --lg-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

html, body {
    font-family: var(--lg-font) !important;
    color: var(--lg-ink);
    background:
        radial-gradient(1200px 700px at 12% -10%, rgba(255, 255, 255, 0.85), transparent 55%),
        radial-gradient(900px 600px at 88% 8%, rgba(170, 205, 255, 0.55), transparent 50%),
        radial-gradient(800px 700px at 50% 110%, rgba(190, 220, 255, 0.45), transparent 55%),
        linear-gradient(165deg, var(--lg-bg-1) 0%, var(--lg-bg-0) 42%, var(--lg-bg-3) 100%) !important;
    background-attachment: fixed !important;
    -webkit-font-smoothing: antialiased;
}

body,
.page,
.page__content,
.ons-page,
ons-page,
.ons-sliding-menu,
ons-sliding-menu,
.sliding-menu,
.sliding-menu__main {
    background: transparent !important;
    color: var(--lg-ink);
}

/* Soft atmospheric sheet behind page content */
.page__background {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08)) !important;
}

.page__content {
    background: transparent !important;
}

/* ---------- Navigation / tabs ---------- */
/* Solid light chrome — overlay menu opacity/backdrop must not darken these */
.navigation-bar,
.toolbar,
ons-toolbar,
.topcoat-navigation-bar {
    background: rgba(248, 250, 252, 0.96) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
    color: var(--lg-ink) !important;
}

.navigation-bar__center,
.navigation-bar__title,
.toolbar__title,
.center {
    color: var(--lg-ink) !important;
    font-weight: 650 !important;
    letter-spacing: -0.02em;
}

.tab-bar,
ons-tabbar .tab-bar {
    background: rgba(248, 250, 252, 0.96) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-top: 1px solid rgba(15, 23, 42, 0.08) !important;
    box-shadow: 0 -8px 24px rgba(15, 23, 42, 0.06);
}

.tab-bar__item,
.tab-bar__button {
    color: var(--lg-muted) !important;
}

.tab-bar__item.active .tab-bar__button,
.tab-bar__button:active,
:checked + .tab-bar__button {
    color: var(--lg-accent) !important;
}

.button-bar,
.button-bar__item > .button-bar__button,
.button-bar__button {
    background: var(--lg-glass) !important;
    border-color: var(--lg-line-dark) !important;
    color: var(--lg-ink) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.button-bar__item > input:checked + .button-bar__button,
.button-bar :checked + .button-bar__button {
    background: var(--lg-accent-soft) !important;
    color: var(--lg-accent) !important;
    border-color: rgba(0, 122, 255, 0.28) !important;
}

/* ---------- Buttons ---------- */
.button,
.button--large,
.button--large-cta,
.button--normal,
.button--default,
.button--primary,
.button--info,
.button--success,
.button--warning,
.button--danger,
.button--inverse,
.button--purple,
.coupon-btn,
.checkout-scan-btn {
    border-radius: var(--lg-radius-sm) !important;
    border: 1px solid var(--lg-line) !important;
    box-shadow: var(--lg-shadow-sm) !important;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    font-weight: 600 !important;
    letter-spacing: -0.01em;
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}

.button:active,
.coupon-btn:active {
    transform: scale(0.98);
    filter: brightness(0.98);
}

.button--default {
    background: rgba(120, 120, 128, 0.28) !important;
    color: #fff !important;
}

.button--primary,
.checkout-scan-btn,
.coupon-scanner-btn {
    background: linear-gradient(180deg, rgba(64, 156, 255, 0.92), rgba(0, 122, 255, 0.88)) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
}

.button--info {
    background: linear-gradient(180deg, rgba(90, 200, 250, 0.9), rgba(50, 173, 230, 0.88)) !important;
    color: #fff !important;
}

.button--success {
    background: linear-gradient(180deg, rgba(72, 220, 120, 0.92), rgba(52, 199, 89, 0.9)) !important;
    color: #fff !important;
}

.button--warning {
    background: linear-gradient(180deg, rgba(255, 186, 73, 0.95), rgba(255, 159, 10, 0.9)) !important;
    color: #fff !important;
}

.button--danger {
    background: linear-gradient(180deg, rgba(255, 105, 97, 0.95), rgba(255, 59, 48, 0.9)) !important;
    color: #fff !important;
}

.button--purple {
    background: linear-gradient(180deg, rgba(175, 82, 222, 0.9), rgba(145, 55, 200, 0.88)) !important;
    color: #fff !important;
}

.button--inverse {
    background: rgba(28, 28, 30, 0.78) !important;
    color: #fff !important;
}

.button--inactive,
.button--none {
    background: rgba(255, 255, 255, 0.45) !important;
    color: var(--lg-muted) !important;
    border: 1px solid var(--lg-line-dark) !important;
    box-shadow: none !important;
}

.button--large-cta,
.coupon-btn:not(.split-payment-btn) {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.28)) !important;
    color: var(--lg-ink) !important;
}

/* ---------- Lists / cards / tables ---------- */
.list,
.list__item,
.list-item,
ons-list,
ons-list-item {
    background: transparent !important;
}

.list {
    border-radius: var(--lg-radius) !important;
    overflow: hidden;
    border: 1px solid var(--lg-line-dark);
    background: var(--lg-glass) !important;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: var(--lg-shadow-sm);
}

.list__item {
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
    color: var(--lg-ink) !important;
}

.list__item:last-child {
    border-bottom: none !important;
}

.list_item_odd,
.preorder-list_item_odd,
.coupons-header {
    background: rgba(255, 255, 255, 0.28) !important;
}

table,
.table {
    background: transparent;
}

table tbody tr,
.order-summary,
.checkout-panel,
.discount-section,
.member-profile,
.content-page-scrollable > section,
.onspage {
    background: var(--lg-glass) !important;
    border: 1px solid var(--lg-line) !important;
    border-radius: var(--lg-radius) !important;
    box-shadow: var(--lg-shadow-sm);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
}

.onspage {
    border-left: 1px solid var(--lg-line) !important;
}

/* ---------- Pads / dialogs / overlays ---------- */
.numPad,
.searchPad,
.qrcodesPad,
.printerPad,
.settlePad,
.checkoutPad,
.payMePad,
.customizationPrompt,
.dialog,
.alert-dialog,
.modal,
.popover {
    background: rgba(245, 248, 252, 0.72) !important;
    -webkit-backdrop-filter: saturate(190%) blur(34px) !important;
    backdrop-filter: saturate(190%) blur(34px) !important;
    border: 1px solid var(--lg-line) !important;
    border-radius: var(--lg-radius-lg) !important;
    box-shadow: var(--lg-shadow) !important;
    overflow: hidden;
}

.numPadHeader,
.checkoutPadHeader,
.settlePad .numPadHeader,
.customizationPrompt-bottom,
.numPadFooter {
    background: rgba(255, 255, 255, 0.42) !important;
    border-color: transparent !important;
    color: var(--lg-ink) !important;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.numPadContent,
.checkoutPadContent,
.settlePadContent,
.searchPad .numPadContent {
    background: transparent !important;
}

.settlePad-total,
.settlePad-row,
.checkoutPad-info-panel,
.payMePad-info-panel {
    background: rgba(255, 255, 255, 0.4) !important;
    border: 1px solid var(--lg-line) !important;
    border-radius: var(--lg-radius-sm) !important;
    box-shadow: var(--lg-shadow-sm);
}

.backdrop.fadein,
.backdrop {
    background: rgba(15, 23, 42, 0.28) !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    opacity: 1 !important;
}

/* Numeric / CTA keys inside pads */
.numPad .button,
.searchPad .button,
.settlePad .button,
.checkoutPad .button,
.button--pad-button,
.button--light {
    background: rgba(255, 255, 255, 0.55) !important;
    color: var(--lg-ink) !important;
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    border-radius: 14px !important;
}

.button--large.button--default,
.button--danger.button--pad-button,
.button--warning.button--pad-button {
    /* color: #fff !important; */
}

/* ---------- Forms ---------- */
.text-input,
.text-input--underbar,
input[type="text"],
input[type="number"],
input[type="password"],
input[type="email"],
input.mobile,
input.loginPassword,
textarea,
select,
.settlePad-select,
.payment-transaction-input {
    background: rgba(255, 255, 255, 0.55) !important;
    border: 1px solid rgba(15, 23, 42, 0.08) !important;
    border-radius: 12px !important;
    color: var(--lg-ink) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

.text-input--underbar {
    border-radius: 0 !important;
    border-width: 0 0 1.5px 0 !important;
    border-color: rgba(0, 122, 255, 0.35) !important;
    background: transparent !important;
    box-shadow: none !important;
}

.checkbox__checkmark,
.radio-button__checkmark {
    border-radius: 8px !important;
    border-color: rgba(15, 23, 42, 0.18) !important;
    background: rgba(255, 255, 255, 0.7) !important;
}

/* ---------- Page-specific surfaces ---------- */
.table-top-toolbar,
.table-button-list,
.queue-panel,
.dayend-panel,
.soldout-panel,
.orderlist-panel,
.bankdeposit-panel,
.notice-panel,
.callservice-panel,
.ordermeal-panel {
    background: var(--lg-glass-tint) !important;
    border: 1px solid var(--lg-line);
    border-radius: var(--lg-radius);
    box-shadow: var(--lg-shadow-sm);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.table-top-toolbar {
    margin: 8px;
    padding: 12px !important;
}

.button--table-btn {
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: var(--lg-shadow-sm) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.table-tableNumber,
.table-status {
    /* text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important; */
}

.coupons-header,
.coupons-title {
    color: var(--lg-ink) !important;
}

.coupons-title {
    color: var(--lg-danger) !important;
}

.split-payment-btn,
.split-payment-status.paid {
    border-radius: 10px;
}

.split-payment-btn {
    background: linear-gradient(180deg, rgba(255, 105, 97, 0.95), rgba(255, 69, 0, 0.9)) !important;
    color: #fff !important;
}

.split-payment-btn i,
.split-payment-btn span {
    color: #fff !important;
}

.split-payment-input.active {
    border-color: var(--lg-accent) !important;
    box-shadow: 0 0 0 3px var(--lg-accent-soft);
}

.title-label {
    color: var(--lg-accent) !important;
    text-shadow: none !important;
    font-weight: 700;
}

.tab-bar-badge {
    border-radius: 999px !important;
    box-shadow: 0 2px 6px rgba(255, 59, 48, 0.35);
}

/* Sliding menu — keep drawer lighter than main glass chrome */
.sliding-menu__menu,
ons-sliding-menu .menu,
.menu-page,
.left,
.page--menu-page,
.page--menu-page .page__background,
.page--menu-page .page__content,
.sliding-menu__menu .page,
.sliding-menu__menu .page__background,
.sliding-menu__menu .page__content,
.sliding-menu__menu ons-page,
.sliding-menu__menu .lg-page {
    background: linear-gradient(180deg, #f7fafc 0%, #eef4fa 55%, #e8f0f8 100%) !important;
    color: #1c2430 !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 8px 0 28px rgba(15, 23, 42, 0.12);
}

.profile {
    background: linear-gradient(165deg, #ffffff 0%, #e8f7ff 45%, #d7f3e4 100%) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.profile .system,
.profile .user,
.profile .system-info {
    color: #1c2430 !important;
    text-shadow: none !important;
    font-family: var(--lg-font) !important;
}

.profile .system {
    color: #0b6e4f !important;
}

.profile .menu-close {
    color: rgba(28, 36, 48, 0.55) !important;
}

.sliding-menu__menu .content,
.page--menu-page .content {
    background: transparent !important;
}

.sliding-menu__menu ons-list,
.sliding-menu__menu .list,
.page--menu-page ons-list,
.page--menu-page .list {
    background: rgba(255, 255, 255, 0.92) !important;
    border: 1px solid rgba(15, 23, 42, 0.06) !important;
    border-radius: 16px !important;
    margin: 10px !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.sliding-menu__menu ons-list-header,
.sliding-menu__menu .list__header,
.page--menu-page ons-list-header {
    background: rgba(241, 245, 249, 0.95) !important;
    color: #64748b !important;
}

.sliding-menu__menu ons-list-item,
.sliding-menu__menu .list__item,
.page--menu-page ons-list-item {
    background: transparent !important;
    color: #334155 !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.05) !important;
}

.sliding-menu__menu ons-list-item span,
.page--menu-page ons-list-item span {
    color: #334155 !important;
}

.display-bar,
.queue_item_odd,
.queue-bottom-hint {
    background: rgba(255, 255, 255, 0.45) !important;
    border-color: var(--lg-line-dark) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.queue-bottom-hint {
    background: rgba(255, 214, 10, 0.35) !important;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
}

.ordermeal-cancel-product-btn,
.product-button,
.category-btn {
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    box-shadow: var(--lg-shadow-sm) !important;
}

/* Login / index */
.login-button,
.main-image-wrapper,
.biteos-logo {
    filter: drop-shadow(0 10px 24px rgba(15, 23, 42, 0.12));
}

input[type=email],
input[type=password],
input.mobile,
input.loginPassword {
    background: rgba(255, 255, 255, 0.62) !important;
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow: var(--lg-shadow-sm) !important;
}

/* Keep semantic inline CTA colors readable on glass */
button[style*="background-color"],
.button[style*="background-color"] {
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: var(--lg-shadow-sm) !important;
}

/* Scroll areas feel floating */
.content-page-scrollable {
    padding: 12px !important;
}

/* Soften hard white panels commonly used inline */
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background-color: #FFF"],
[style*="background-color:#FFF"],
[style*="background-color: white"],
[style*="background: white"],
[style*="background:#fff"],
[style*="background: #fff"] {
    background-color: rgba(255, 255, 255, 0.45) !important;
}

[style*="background-color: aliceblue"],
[style*="background: aliceblue"],
[style*="background-color: lightskyblue"],
[style*="background: lightskyblue"] {
    background-color: rgba(220, 235, 255, 0.42) !important;
}

/* Reduce harsh flat shadows from older styles */
.coupon-btn,
.coupon-scanner-btn {
    box-shadow: var(--lg-shadow-sm) !important;
}

/* Prefer readable ink over pure black labels */
h1, h2, h3, h4, label, .checkoutPadLabel, .checkout-head-label {
    color: var(--lg-ink);
}

/* ---------- Page fragments (menu + www/pages) ---------- */
.lg-page,
ons-page.lg-page,
.lg-page .page,
.lg-page .page__content,
.lg-page .page__background {
    background: transparent !important;
    color: var(--lg-ink);
}

.lg-page .navigation-bar,
.lg-page .toolbar {
    background: rgba(248, 250, 252, 0.96) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
}

.lg-page .content-page-scrollable,
.lg-page .content,
.lg-page .onspage {
    background: transparent !important;
}

.lg-page .content > ons-list,
.lg-page ons-list,
.lg-page .list {
    background: var(--lg-glass) !important;
    border: 1px solid var(--lg-line);
    border-radius: var(--lg-radius);
    overflow: hidden;
    box-shadow: var(--lg-shadow-sm);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}

.lg-page ons-list-header,
.lg-page .list__header {
    background: rgba(255, 255, 255, 0.35) !important;
    color: var(--lg-muted) !important;
    font-weight: 650;
}

.lg-page ons-list-item,
.lg-page .list__item {
    background: transparent !important;
    color: var(--lg-ink) !important;
    border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
}

.lg-page .table-top-toolbar,
.lg-page .table-button-list,
.lg-page .ordermeal-action-bar {
    background: var(--lg-glass-tint) !important;
    border: 1px solid var(--lg-line);
    border-radius: var(--lg-radius);
    box-shadow: var(--lg-shadow-sm);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.lg-page .button,
.lg-page .coupon-btn,
.lg-page ons-button,
.lg-page .button--large {
    border-radius: var(--lg-radius-sm) !important;
    border: 1px solid var(--lg-line) !important;
    box-shadow: var(--lg-shadow-sm) !important;
}

.lg-page .tab-bar,
.lg-page ons-tabbar .tab-bar {
    background: rgba(248, 250, 252, 0.96) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Picture / cropper standalone page */
.picture-page,
html.lg-page {
    min-height: 100%;
}

.picture-page #container,
.lg-glass-panel {
    margin: 12px;
    padding: 12px;
    border-radius: var(--lg-radius-lg);
    background: rgba(245, 248, 252, 0.55);
    border: 1px solid var(--lg-line);
    box-shadow: var(--lg-shadow);
    -webkit-backdrop-filter: saturate(180%) blur(28px);
    backdrop-filter: saturate(180%) blur(28px);
}

.picture-page .cap-but,
.lg-btn {
    border-radius: 14px !important;
    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    box-shadow: var(--lg-shadow-sm) !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    font-weight: 650 !important;
}

.lg-btn-warning,
.picture-page .lg-btn-warning {
    background: linear-gradient(180deg, rgba(255, 186, 73, 0.95), rgba(255, 159, 10, 0.9)) !important;
    color: #fff !important;
}

.lg-btn-success,
.picture-page .lg-btn-success {
    background: linear-gradient(180deg, rgba(72, 220, 120, 0.92), rgba(52, 199, 89, 0.9)) !important;
    color: #fff !important;
}

.picture-page .cap-but:not(.lg-btn-warning):not(.lg-btn-success) {
    background: rgba(120, 120, 128, 0.35) !important;
}

/* Fallback when backdrop-filter unsupported */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .navigation-bar,
    .toolbar,
    .tab-bar,
    .numPad,
    .searchPad,
    .settlePad,
    .checkoutPad,
    .list,
    .onspage,
    .lg-page .list,
    .lg-page ons-list,
    .lg-glass-panel,
    .picture-page #container {
        background: rgba(248, 250, 252, 0.94) !important;
    }
}

/*
 * Onsen overlay sliding-menu sets main pane opacity to ~0.9 and shows a black
 * mask behind it. That makes translucent toolbar/tab-bar look darker.
 * Keep the main pane fully opaque and neutralize the mask.
 */
.onsen-sliding-menu__above,
.ons-sliding-menu-inner.onsen-sliding-menu__above,
ons-sliding-menu > .onsen-sliding-menu__above {
    opacity: 1 !important;
    background: #eef3f9 !important;
}

ons-sliding-menu > div[style*="background-color: black"],
ons-sliding-menu > div[style*="background-color:black"],
ons-sliding-menu > div[style*="backgroundColor"] {
    background-color: transparent !important;
    opacity: 0 !important;
}

/* Side menu must stay opaque/light over the dimmed main pane */
.sliding-menu__menu,
.sliding-menu__menu .page,
.sliding-menu__menu .page__background,
.sliding-menu__menu .page__content,
.sliding-menu__menu ons-page,
.sliding-menu__menu .lg-page,
.sliding-menu__menu .lg-page .page,
.sliding-menu__menu .lg-page .page__content,
.sliding-menu__menu .lg-page .page__background {
    background: #f4f7fb !important;
    background-image: linear-gradient(180deg, #fbfcfe 0%, #f0f5fa 100%) !important;
    color: #1c2430 !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.sliding-menu__menu .profile,
ons-sliding-menu .profile {
    background: linear-gradient(165deg, #ffffff 0%, #eaf8ff 42%, #dff6ea 100%) !important;
}

.sliding-menu__menu .lg-page ons-list,
.sliding-menu__menu .lg-page .list,
.sliding-menu__menu ons-list,
.sliding-menu__menu .list {
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.07) !important;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

.sliding-menu__menu .lg-page ons-list-header,
.sliding-menu__menu .lg-page .list__header,
.sliding-menu__menu ons-list-header {
    background: #f1f5f9 !important;
    color: #64748b !important;
}

.sliding-menu__menu .lg-page ons-list-item,
.sliding-menu__menu .lg-page .list__item,
.sliding-menu__menu ons-list-item {
    background: #ffffff !important;
    color: #334155 !important;
}

/* Queue admission — match all 3 column headers */
.queue-assign-seat-hint {
    background: rgba(60, 60, 67, 0.72) !important;
    color: #fff !important;
    border-radius: 12px !important;
    margin: 0 6px 8px !important;
    min-height: 40px;
    padding: 8px 12px !important;
    box-sizing: border-box;
    overflow: hidden;
}

.queue-middle-column .queueList,
.lg-page .queue-middle-column .queueList,
ul.list.queueList {
    border-radius: 12px !important;
    margin: 0 6px !important;
    width: auto !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch;
}

.available-table-button-list .queue-combined-list,
.lg-page .available-table-button-list .queue-combined-list {
    min-height: 0;
    overflow: hidden;
}

.available-table-button-list .queue-order-list,
.lg-page .available-table-button-list .queue-order-list {
    flex: 1 1 auto;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch;
}

.available-table-button-list .queue-order-list .list,
.lg-page .available-table-button-list .queue-order-list .list {
    overflow: visible !important;
    border-radius: 12px !important;
    margin: 0 6px !important;
}

.queue-right-column .queue-table-list,
.lg-page .queue-right-column .queue-table-list {
    border-radius: 12px !important;
    margin: 0 6px !important;
    flex: 1 1 auto;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch;
}

.queue-assign-seat-hint .display-bar {
    background: rgba(255, 255, 255, 0.92) !important;
    border-radius: 8px !important;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
}

/* Changelogs — scrollable iframe area below toolbar */
.changelog-page .changelog-scroll {
    position: absolute;
    top: 44px;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    z-index: 1;
}

.changelog-page .changelog-iframe {
    display: block;
    width: 100%;
    min-width: 100%;
    /* Tall frame so the outer panel can scroll the full remote changelog
       (cross-origin iframes cannot report content height) */
    height: 12000px;
    min-height: 12000px;
    border: 0;
    background: #fff;
}

/* Order detail list must scroll (global .list uses overflow: hidden) */
.orderDetailList,
.lg-page .orderDetailList,
ul.list.orderDetailList {
    overflow-x: hidden !important;
    overflow-y: scroll !important;
    -webkit-overflow-scrolling: touch;
}

/* Payment method buttons — restore logo background images (theme gradients use !important) */
.payment-section .payment-method,
.payment-methods .payment-method,
.lg-page .payment-method.button {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background-repeat: no-repeat !important;
    border: 1px solid gray !important;
    box-shadow: none !important;
}

.payment-section .payment-method[style*="5px solid black"],
.payment-methods .payment-method[style*="5px solid black"],
.lg-page .payment-method.button[style*="5px solid black"] {
    border: 5px solid #000 !important;
}

.payment-method[style*="cash.png"] {
    background-image: url("../images/cash.png") !important;
    background-size: cover !important;
    background-color: transparent !important;
}

.payment-method[style*="octopus.png"] {
    background-image: url("../images/octopus.png") !important;
    background-size: cover !important;
    background-color: transparent !important;
}

.payment-method[style*="payme.png"] {
    background-image: url("../images/payme.png") !important;
    background-size: cover !important;
    background-position: 0 -2px !important;
    background-color: #fff !important;
    color: #fff !important;
}

.payment-method[style*="creditcard.png"] {
    background-image: url("../images/creditcard.png") !important;
    background-size: 145px !important;
    background-position: -8px 10px !important;
    background-color: rgb(223, 70, 39) !important;
}

.payment-method[style*="alipay.png"] {
    background-image: url("../images/alipay.png") !important;
    background-size: 473px !important;
    background-position: -8px -13px !important;
    background-color: #fff !important;
}

.payment-method[style*="wechat_pay.png"] {
    background-image: url("../images/wechat_pay.png") !important;
    background-size: cover !important;
    background-position: 0 50% !important;
    background-color: #fff !important;
}

.payment-method[style*="kpay.png"] {
    background-image: url("../images/kpay.png") !important;
    background-size: contain !important;
    background-position: 5px -4px !important;
    background-color: #fff !important;
}

.payment-method[style*="mastercard.png"] {
    background-image: url("../images/mastercard.png") !important;
    background-size: 100px !important;
    background-position: 5px 16px !important;
    background-color: #010063 !important;
}

.payment-method[style*="visa.png"] {
    background-image: url("../images/visa.png") !important;
    background-size: 100px !important;
    background-position: 5px 16px !important;
    background-color: #28589a !important;
}

.payment-method[style*="unionpay.png"] {
    background-image: url("../images/unionpay.png") !important;
    background-size: 100px !important;
    background-position: 6px 15px !important;
    background-color: #f8f8f8 !important;
    color: darkslategray !important;
}

.payment-method[style*="ae.png"] {
    background-image: url("../images/ae.png") !important;
    background-size: contain !important;
    background-position: 0 0 !important;
    background-color: rgb(48, 111, 197) !important;
}

.payment-method[style*="foodpanda.png"] {
    background-image: url("../images/foodpanda.png") !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: transparent !important;
}

.payment-method[style*="slooth.png"] {
    background-image: url("../images/slooth.png") !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: transparent !important;
}

.payment-method[style*="keeta.png"] {
    background-image: url("../images/keeta.png") !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: transparent !important;
}

.payment-method[style*="openrice.png"] {
    background-image: url("../images/openrice.png") !important;
    background-size: 220px !important;
    background-position: center -10px !important;
    background-color: #ffd42f !important;
}

.payment-method[style*="deliveroo.png"] {
    background-image: url("../images/deliveroo.png") !important;
    background-size: cover !important;
    background-position: center !important;
    background-color: transparent !important;
}

.payment-method[style*="eps.png"] {
    background-image: url("../images/eps.png") !important;
    background-size: 92px !important;
    background-position: 70px -1px !important;
    background-color: #f8f8f8 !important;
    color: darkslategray !important;
}