/* TV portal: Chrome 68 custom TV CSS
   No Bootstrap dependency. No modern selectors. No backdrop-filter.
   TV pages should use simple fixed/table centering and one focus class only. */

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    background: #3f3f3f;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    overflow-x: hidden;
}

body {
    background-color: #3f3f3f !important;
    color: #ffffff !important;
}

* {
    box-sizing: border-box;
}

button,
a,
label,
[role="button"],
[data-tv-nav],
[data-nav-id],
.tv-nav {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

button:focus,
a:focus,
label:focus,
[role="button"]:focus,
[data-tv-nav]:focus,
[data-nav-id]:focus,
.tv-nav:focus {
    outline: none !important;
}

/* Basic TV surfaces */
.tv-page,
.tv-shell,
.tv-home,
.tv-orders,
.order-page,
.home-page,
.page-content,
.main-content {
    color: #ffffff;
}

.tv-card,
.tv-panel,
.patient-card,
.patient-info-card,
.info-card,
.nav-guide,
.card {
    background: rgba(18, 22, 32, .78);
    border: 1px solid rgba(70, 120, 210, .65);
    border-radius: 14px;
    color: #ffffff;
}

button,
.btn,
.tv-button {
    background: #2475ff;
    color: #ffffff;
    border: 0;
    border-radius: 10px;
    min-height: 48px;
    font-weight: bold;
}

button[disabled],
.btn[disabled],
.tv-button[disabled] {
    opacity: .55;
}

/* Product/category/meal card defaults */
.meal-period-nav-button,
.meal-card,
.meal-period-card,
.product-card,
.category-card,
.orders-item-card,
.orders-category-link,
.pos-product,
.pos-menu-item {
    border-radius: 14px;
    color: #ffffff;
}

/* One and only one navigation focus visual. */
.tv-selected,
.tv-selected:focus,
button.tv-selected,
.btn.tv-selected,
.meal-period-nav-button.tv-selected,
.orders-item-card.tv-selected,
.orders-category-link.tv-selected,
.product-card.tv-selected,
.category-card.tv-selected,
.pos-product.tv-selected,
.pos-menu-item.tv-selected {
    outline: none !important;
    box-shadow:
        0 0 0 2px rgba(255,255,255,.98),
        0 0 0 4px rgba(104,222,255,.92),
        0 0 18px rgba(88,210,255,.78) !important;
}

/* Kill old focus/ring systems completely. */
#ml-fixed-graph-focus-overlay,
#ml-tv-focus-overlay,
#ml-order-focus-overlay,
#ml-home-focus-overlay,
#ml-modal-focus-overlay,
#mltv-focus-ring,
#mltv-focus-ring,
#mltv-focus-ring,
#mltv-popup-focus-ring,
.ml-fixed-graph-focus-overlay,
.ml-tv-focus-overlay,
.ml-order-focus-overlay,
.ml-home-focus-overlay,
.ml-modal-focus-overlay,
.mltv-popup-focus-ring {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Make all old selected/focused classes visually silent unless TV JS converts the active one to .tv-selected. */
.nav-active:not(.tv-selected),
.keyboard-focus:not(.tv-selected),
.remote-focus:not(.tv-selected),
.tv-selected-old:not(.tv-selected),
.focused:not(.tv-selected),
.spatial-focus:not(.tv-selected),
.is-focused:not(.tv-selected),
.ml-tv-current-focus-source:not(.tv-selected),
.orders-tv-focused:not(.tv-selected),
.modal-tv-focused:not(.tv-selected),
.meal-period-button-focused:not(.tv-selected),
.meal-period-card-focused:not(.tv-selected),
.mltv-modal-button-focused:not(.tv-selected),
.mltv-current:not(.tv-selected),
.mltv-current:not(.tv-selected),
.mltv-current:not(.tv-selected),
.mltv-current:not(.tv-selected),
.mltv-current:not(.tv-selected),
.mltv-current:not(.tv-selected) {
    outline: none !important;
    box-shadow: none !important;
}

/* Custom modal root. This replaces Bootstrap modal behavior for TV popups. */
.tv-modal-overlay,
.modal.show,
.modal.d-block,
.modal.modal-pos.show,
.modal.modal-pos.d-block {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: table !important;
    table-layout: fixed !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(0,0,0,.58) !important;
    overflow: hidden !important;
    z-index: 2147483000 !important;
}

.tv-modal-cell,
.modal.show > .modal-dialog,
.modal.d-block > .modal-dialog,
.modal.modal-pos.show > .modal-dialog,
.modal.modal-pos.d-block > .modal-dialog {
    display: table-cell !important;
    vertical-align: middle !important;
    text-align: center !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 28px !important;
    position: static !important;
    transform: none !important;
}

.tv-modal-dialog,
.modal.show > .modal-dialog > .modal-content,
.modal.d-block > .modal-dialog > .modal-content,
.modal.modal-pos.show > .modal-dialog > .modal-content,
.modal.modal-pos.d-block > .modal-dialog > .modal-content,
.modal.show .modal-pos-product,
.modal.d-block .modal-pos-product,
.modal.show .modal-pos-product--qty,
.modal.d-block .modal-pos-product--qty {
    display: inline-block !important;
    vertical-align: middle !important;
    text-align: left !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 auto !important;
    transform: none !important;
    max-width: calc(100vw - 96px) !important;
    max-height: calc(100vh - 96px) !important;
    overflow: hidden !important;
    z-index: 2147483100 !important;
}

/* If existing markup has the visible popup as direct .modal-pos-product, center it with fixed positioning. */
.tv-centered-popup,
.modal-pos-product.tv-centered-popup,
.modal-pos-product--qty.tv-centered-popup {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    max-width: calc(100vw - 96px) !important;
    max-height: calc(100vh - 96px) !important;
    overflow: hidden !important;
    z-index: 2147483100 !important;
}

/* Plain hidden helper */
.tv-hidden {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}


/* =========================================================
   TV portal: root popup host correction
   ========================================================= */
#mltv-root-popup-host {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none;
    z-index: 2147482900 !important;
}

#mltv-root-popup-host > * {
    pointer-events: auto;
}

#mltv-root-popup-host .tv-modal-overlay,
#mltv-root-popup-host .modal,
#mltv-root-popup-host .modal.show,
#mltv-root-popup-host .modal.d-block {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: table !important;
    table-layout: fixed !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: rgba(0,0,0,.58) !important;
    z-index: 2147483000 !important;
}

#mltv-root-popup-host .tv-centered-popup,
#mltv-root-popup-host .modal-pos-product,
#mltv-root-popup-host .modal-pos-product--qty,
#mltv-root-popup-host .modal-content {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    max-width: calc(100vw - 96px) !important;
    max-height: calc(100vh - 96px) !important;
    overflow: hidden !important;
    z-index: 2147483100 !important;
}

/* Restore sane modal widths after moving to root. */
#mltv-root-popup-host .home-guest-order-modal {
    width: 920px !important;
}

#mltv-root-popup-host .modal-pos-product,
#mltv-root-popup-host .modal-pos-product--qty {
    width: 960px !important;
}

#mltv-root-popup-host .modal-pos-product--qty {
    width: 1060px !important;
}


/* TV portal: loading interop shim visual.
   Uses a self-contained CSS spinner so the loader does not depend on missing image assets
   and does not show the old half-rendered Bootstrap/Pace loading indicator. */
#mltv-loading-overlay {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .52);
    z-index: 2147483200;
}
#mltv-loading-overlay .mltv-loading-box {
    min-width: 300px;
    padding: 28px 42px 26px 42px;
    background: rgba(13, 26, 53, .96);
    border: 1px solid rgba(104,222,255,.92);
    border-radius: 14px;
    text-align: center;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
    box-shadow: 0 0 42px rgba(104,222,255,.28), 0 18px 60px rgba(0,0,0,.48);
}
#mltv-loading-overlay .mltv-loading-spinner {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px auto;
    border-radius: 50%;
    border: 7px solid rgba(255,255,255,.22);
    border-top-color: rgba(104,222,255,.98);
    animation: mltv-loading-spin .85s linear infinite;
}
#mltv-loading-overlay .mltv-loading-title {
    display: block;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.25;
}
#mltv-loading-overlay .mltv-loading-message {
    display: block;
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.25;
}
@keyframes mltv-loading-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
#loadingModal,
#loadingModal.show,
#loadingModal.d-block,
.pace,
.pace .pace-activity,
.pace .pace-progress {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}


/* =========================================================
   TV portal: Chrome 58 fixed TV layout patch
   - No CSS grid
   - No :has()
   - No CSS variables
   - Fixed TV dimensions/areas
   ========================================================= */

/* HOME/EXIT CONFIRMATION PROMPT:
   The blue line was the dialog/content collapsed or hidden behind overlay.
   Force a fixed visible confirmation box. */
#mltv-root-popup-host .modal,
#mltv-root-popup-host .modal.show,
#mltv-root-popup-host .modal.d-block,
body .modal.show,
body .modal.d-block,
body .modal[style*="display: block"] {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    background: rgba(0,0,0,.64) !important;
    z-index: 2147482000 !important;
}

#mltv-root-popup-host .modal-dialog,
body .modal.show > .modal-dialog,
body .modal.d-block > .modal-dialog,
body .modal[style*="display: block"] > .modal-dialog {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    width: 1040px !important;
    height: 310px !important;
    max-width: 1040px !important;
    max-height: 310px !important;
    margin-left: -520px !important;
    margin-top: -155px !important;
    transform: none !important;
    z-index: 2147482200 !important;
}

#mltv-root-popup-host .modal-content,
body .modal.show .modal-content,
body .modal.d-block .modal-content,
body .modal[style*="display: block"] .modal-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: 1040px !important;
    height: 310px !important;
    min-height: 310px !important;
    max-height: 310px !important;
    overflow: hidden !important;
    background: #12213f !important;
    border: 1px solid #31599a !important;
    border-radius: 18px !important;
    color: #fff !important;
    box-shadow: 0 24px 60px rgba(0,0,0,.5) !important;
}

#mltv-root-popup-host .modal-header,
#mltv-root-popup-host .modal-body,
#mltv-root-popup-host .modal-footer,
body .modal.show .modal-header,
body .modal.show .modal-body,
body .modal.show .modal-footer,
body .modal.d-block .modal-header,
body .modal.d-block .modal-body,
body .modal.d-block .modal-footer {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #fff !important;
    position: relative !important;
}

#mltv-root-popup-host .modal-header,
body .modal.show .modal-header,
body .modal.d-block .modal-header {
    height: 64px !important;
    padding: 24px 36px 0 36px !important;
    border: 0 !important;
}

#mltv-root-popup-host .modal-title,
body .modal.show .modal-title,
body .modal.d-block .modal-title {
    display: block !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    line-height: 34px !important;
    color: #fff !important;
}

#mltv-root-popup-host .modal-body,
body .modal.show .modal-body,
body .modal.d-block .modal-body {
    height: 105px !important;
    padding: 10px 36px 0 36px !important;
    font-size: 26px !important;
    font-weight: 700 !important;
    line-height: 34px !important;
    border: 0 !important;
}

#mltv-root-popup-host .modal-footer,
body .modal.show .modal-footer,
body .modal.d-block .modal-footer,
#mltv-root-popup-host .confirmation-actions,
body .modal.show .confirmation-actions,
body .modal.d-block .confirmation-actions {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    position: absolute !important;
    left: 36px !important;
    right: 36px !important;
    bottom: 28px !important;
    height: 64px !important;
    padding: 0 !important;
    border: 0 !important;
}

#mltv-root-popup-host .modal-footer button,
body .modal.show .modal-footer button,
body .modal.d-block .modal-footer button,
#mltv-root-popup-host .confirmation-actions button,
body .modal.show .confirmation-actions button,
body .modal.d-block .confirmation-actions button {
    display: block !important;
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 1 0 !important;
    flex: 1 1 0 !important;
    height: 64px !important;
    margin: 0 6px !important;
    border-radius: 12px !important;
}

/* ITEM DETAILS POPUP:
   Fixed TV size. No responsiveness. No clipping. */
#mltv-root-popup-host .modal-pos-product,
#mltv-root-popup-host .modal-pos-product--qty,
body .modal.show .modal-pos-product,
body .modal.d-block .modal-pos-product,
body .modal.show .modal-pos-product--qty,
body .modal.d-block .modal-pos-product--qty {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: 1040px !important;
    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;
    overflow: hidden !important;
    background: #12213f !important;
    color: #fff !important;
}

#mltv-root-popup-host .modal-pos-product-img,
body .modal.show .modal-pos-product-img,
body .modal.d-block .modal-pos-product-img {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 330px !important;
    height: 430px !important;
    min-width: 330px !important;
    max-width: 330px !important;
    overflow: hidden !important;
    background: rgba(255,255,255,.18) !important;
}

#mltv-root-popup-host .modal-pos-product-img .img,
body .modal.show .modal-pos-product-img .img,
body .modal.d-block .modal-pos-product-img .img {
    display: block !important;
    width: 330px !important;
    height: 430px !important;
    min-height: 430px !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}

#mltv-root-popup-host .modal-pos-product-img img,
body .modal.show .modal-pos-product-img img,
body .modal.d-block .modal-pos-product-img img {
    display: block !important;
    width: 300px !important;
    max-width: 300px !important;
    height: 380px !important;
    max-height: 380px !important;
    margin: 25px auto !important;
    object-fit: contain !important;
}

#mltv-root-popup-host .modal-pos-product-info,
body .modal.show .modal-pos-product-info,
body .modal.d-block .modal-pos-product-info {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    left: 330px !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 710px !important;
    height: 430px !important;
    padding: 42px 36px 112px 36px !important;
    overflow: hidden !important;
    color: #fff !important;
    box-sizing: border-box !important;
}

#mltv-root-popup-host .modal-pos-product-title,
body .modal.show .modal-pos-product-title,
body .modal.d-block .modal-pos-product-title,
#mltv-root-popup-host .modal-pos-product-info h1,
#mltv-root-popup-host .modal-pos-product-info h2,
#mltv-root-popup-host .modal-pos-product-info h3,
body .modal.show .modal-pos-product-info h1,
body .modal.show .modal-pos-product-info h2,
body .modal.show .modal-pos-product-info h3 {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    margin: 0 0 12px 0 !important;
    color: #fff !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    line-height: 32px !important;
    max-height: 68px !important;
    overflow: hidden !important;
}

#mltv-root-popup-host .modal-pos-product-info,
body .modal.show .modal-pos-product-info,
body .modal.d-block .modal-pos-product-info {
    font-size: 22px !important;
    line-height: 30px !important;
}

/* Actions inside item details. */
#mltv-root-popup-host .modal-pos-product-info .modal-footer,
body .modal.show .modal-pos-product-info .modal-footer,
body .modal.d-block .modal-pos-product-info .modal-footer,
#mltv-root-popup-host .modal-pos-product-actions,
body .modal.show .modal-pos-product-actions,
body .modal.d-block .modal-pos-product-actions {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    position: absolute !important;
    left: 36px !important;
    right: 36px !important;
    bottom: 32px !important;
    height: 64px !important;
    padding: 0 !important;
}

#mltv-root-popup-host .modal-pos-product-info button,
body .modal.show .modal-pos-product-info button,
body .modal.d-block .modal-pos-product-info button {
    height: 64px !important;
    border-radius: 12px !important;
}

/* CATEGORY RAIL:
   It is TV fixed-size. Stop left clipping by giving it enough width and forcing content box. */
body .orders-page-shell .pos-menu,
body .pos.pos-with-menu.pos-with-sidebar .pos-menu,
body .pos-menu {
    position: fixed !important;
    left: 34px !important;
    top: 64px !important;
    bottom: 20px !important;
    width: 270px !important;
    min-width: 270px !important;
    max-width: 270px !important;
    overflow: visible !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    z-index: 20 !important;
}

body .pos-menu *,
body .orders-page-shell .pos-menu * {
    box-sizing: border-box !important;
}

body .pos-menu a,
body .pos-menu button,
body .pos-menu .nav-link,
body .pos-menu .pos-menu-link,
body .pos-menu .category-card,
body .pos-menu .category-item,
body .pos-menu li {
    display: block !important;
    width: 270px !important;
    min-width: 270px !important;
    max-width: 270px !important;
    height: 104px !important;
    min-height: 104px !important;
    overflow: hidden !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    white-space: normal !important;
    text-align: center !important;
}

/* Content moves right to clear wider category rail. */
body .orders-page-shell .pos-content,
body .pos.pos-with-menu.pos-with-sidebar .pos-content,
body .pos-content {
    position: fixed !important;
    left: 330px !important;
    right: 430px !important;
    top: 62px !important;
    bottom: 20px !important;
    width: auto !important;
    max-width: none !important;
    overflow: hidden !important;
    padding: 0 10px !important;
}

/* Cart/review fixed. */
body .orders-page-shell .pos-sidebar,
body .pos.pos-with-menu.pos-with-sidebar .pos-sidebar,
body .pos-sidebar {
    position: fixed !important;
    right: 20px !important;
    top: 48px !important;
    bottom: 16px !important;
    width: 390px !important;
    min-width: 390px !important;
    max-width: 390px !important;
    overflow: hidden !important;
}

/* Product grid remains 3 columns, no duplicate media layers. */
body .orders-items-grid,
body .pos-content .orders-items-grid,
body .pos-content > .row {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-wrap: wrap !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin-left: -8px !important;
    margin-right: -8px !important;
}

body .orders-items-grid > *,
body .pos-content .orders-items-grid > *,
body .pos-content > .row > * {
    -ms-flex: 0 0 33.333333% !important;
    flex: 0 0 33.333333% !important;
    width: 33.333333% !important;
    max-width: 33.333333% !important;
    min-width: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin: 0 0 18px 0 !important;
}

body .orders-items-grid .orders-item-card,
body .orders-items-grid .pos-product,
body .pos-content .orders-item-card,
body .pos-content .pos-product,
body .pos-content .product-card {
    width: 100% !important;
    max-width: 100% !important;
    height: 246px !important;
    min-height: 246px !important;
    max-height: 246px !important;
    overflow: hidden !important;
}

body .orders-items-grid .orders-item-card__media,
body .orders-items-grid .pos-product-img,
body .pos-content .orders-item-card__media,
body .pos-content .pos-product-img,
body .pos-content .product-img {
    height: 158px !important;
    min-height: 158px !important;
    max-height: 158px !important;
    background-image: none !important;
    overflow: hidden !important;
}

body .orders-items-grid .orders-item-card__media:before,
body .orders-items-grid .orders-item-card__media:after,
body .orders-items-grid .pos-product-img:before,
body .orders-items-grid .pos-product-img:after,
body .pos-content .orders-item-card__media:before,
body .pos-content .orders-item-card__media:after,
body .pos-content .pos-product-img:before,
body .pos-content .pos-product-img:after {
    display: none !important;
    content: none !important;
}

body .orders-items-grid .orders-item-card__media img,
body .orders-items-grid .pos-product-img img,
body .pos-content .orders-item-card__media img,
body .pos-content .pos-product-img img,
body .pos-content .product-img img {
    display: block !important;
    width: auto !important;
    height: 150px !important;
    max-height: 150px !important;
    max-width: 100% !important;
    margin: 4px auto !important;
    object-fit: contain !important;
}


/* =========================================================
   TV portal: Chrome58 popup fixed heights and close-safe layout
   ========================================================= */

/* General item/details popup: fixed 500px height for TV. */
#mltv-root-popup-host .modal-dialog,
body .modal.show > .modal-dialog,
body .modal.d-block > .modal-dialog,
body .modal[style*="display: block"] > .modal-dialog {
    width: 1040px !important;
    height: 500px !important;
    max-width: 1040px !important;
    max-height: 500px !important;
    margin-left: -520px !important;
    margin-top: -250px !important;
    left: 50% !important;
    top: 50% !important;
    transform: none !important;
}

/* Default modal content fixed 500px. */
#mltv-root-popup-host .modal-content,
body .modal.show .modal-content,
body .modal.d-block .modal-content,
body .modal[style*="display: block"] .modal-content {
    width: 1040px !important;
    height: 500px !important;
    min-height: 500px !important;
    max-height: 500px !important;
}

/* Item details body fixed 500px. */
#mltv-root-popup-host .modal-pos-product,
#mltv-root-popup-host .modal-pos-product--qty,
body .modal.show .modal-pos-product,
body .modal.d-block .modal-pos-product,
body .modal.show .modal-pos-product--qty,
body .modal.d-block .modal-pos-product--qty {
    width: 1040px !important;
    height: 500px !important;
    min-height: 500px !important;
    max-height: 500px !important;
}

#mltv-root-popup-host .modal-pos-product-img,
body .modal.show .modal-pos-product-img,
body .modal.d-block .modal-pos-product-img {
    width: 330px !important;
    height: 500px !important;
    min-height: 500px !important;
    max-height: 500px !important;
}

#mltv-root-popup-host .modal-pos-product-img .img,
body .modal.show .modal-pos-product-img .img,
body .modal.d-block .modal-pos-product-img .img {
    width: 330px !important;
    height: 500px !important;
    min-height: 500px !important;
    max-height: 500px !important;
}

#mltv-root-popup-host .modal-pos-product-img img,
body .modal.show .modal-pos-product-img img,
body .modal.d-block .modal-pos-product-img img {
    width: 300px !important;
    max-width: 300px !important;
    height: 420px !important;
    max-height: 420px !important;
    margin: 40px auto !important;
    object-fit: contain !important;
}

#mltv-root-popup-host .modal-pos-product-info,
body .modal.show .modal-pos-product-info,
body .modal.d-block .modal-pos-product-info {
    left: 330px !important;
    width: 710px !important;
    height: 500px !important;
    min-height: 500px !important;
    max-height: 500px !important;
    padding: 46px 36px 126px 36px !important;
}

/* Submit/order confirmation prompt: 600px normal, can grow to 850px if content is longer. */
#confirmPrompt .modal-dialog,
#confirmPrompt.modal .modal-dialog,
#mltv-root-popup-host #confirmPrompt .modal-dialog,
body .modal.show#confirmPrompt > .modal-dialog,
body .modal.d-block#confirmPrompt > .modal-dialog,
body .modal.show .confirmPrompt .modal-dialog,
body .modal.d-block .confirmPrompt .modal-dialog {
    height: 600px !important;
    max-height: 850px !important;
    margin-top: -300px !important;
}

#confirmPrompt .modal-content,
#confirmPrompt.modal .modal-content,
#mltv-root-popup-host #confirmPrompt .modal-content,
body .modal.show#confirmPrompt .modal-content,
body .modal.d-block#confirmPrompt .modal-content {
    height: 600px !important;
    min-height: 600px !important;
    max-height: 850px !important;
}

/* Confirmation drawer/prompt bodies that are not id=confirmPrompt but include order confirmation content. */
#mltv-root-popup-host .drawer-confirm,
#mltv-root-popup-host .order-confirmation,
#mltv-root-popup-host .submit-order-confirmation,
body .modal.show .drawer-confirm,
body .modal.show .order-confirmation,
body .modal.show .submit-order-confirmation {
    min-height: 600px !important;
    max-height: 850px !important;
}

/* Plain exit/no prompt should remain compact: 500px. */
#yesnoPrompt .modal-dialog,
#yesnoPrompt.modal .modal-dialog,
#mltv-root-popup-host #yesnoPrompt .modal-dialog,
body .modal.show#yesnoPrompt > .modal-dialog,
body .modal.d-block#yesnoPrompt > .modal-dialog {
    height: 500px !important;
    max-height: 500px !important;
    margin-top: -250px !important;
}

#yesnoPrompt .modal-content,
#yesnoPrompt.modal .modal-content,
#mltv-root-popup-host #yesnoPrompt .modal-content,
body .modal.show#yesnoPrompt .modal-content,
body .modal.d-block#yesnoPrompt .modal-content {
    height: 500px !important;
    min-height: 500px !important;
    max-height: 500px !important;
}

/* Keep button row visible at bottom for all fixed prompts. */
#mltv-root-popup-host .modal-footer,
body .modal.show .modal-footer,
body .modal.d-block .modal-footer,
#mltv-root-popup-host .confirmation-actions,
body .modal.show .confirmation-actions,
body .modal.d-block .confirmation-actions,
#mltv-root-popup-host .modal-pos-product-actions,
body .modal.show .modal-pos-product-actions {
    position: absolute !important;
    left: 36px !important;
    right: 36px !important;
    bottom: 32px !important;
    height: 70px !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    padding: 0 !important;
}

/* Ensure No/Cancel buttons are normal pointer targets; JS handles close for Chrome58. */
#mltv-root-popup-host button,
body .modal.show button,
body .modal.d-block button {
    pointer-events: auto !important;
}


/* =========================================================
   TV portal: Chrome58 center prompt + wider home meal cards
   ========================================================= */

/* Fixed TV viewport center for prompts/modals.
   User test viewport is 1099x866. Center the 1040x500 box in that visible app area. */
#mltv-root-popup-host .modal-dialog,
body .modal.show > .modal-dialog,
body .modal.d-block > .modal-dialog,
body .modal[style*="display: block"] > .modal-dialog {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    width: 1040px !important;
    height: 500px !important;
    max-width: 1040px !important;
    max-height: 500px !important;
    margin-left: -520px !important;
    margin-top: -250px !important;
    transform: none !important;
}

/* In DevTools device viewport, browser chrome/top toolbar causes perceived downshift.
   Use 433px visual center for 866px viewport where available by keeping actual top 50%.
   This class exists after popup host moves modal. */
#mltv-root-popup-host .modal.mltv-active-modal > .modal-dialog {
    left: 50% !important;
    top: 50% !important;
    margin-left: -520px !important;
    margin-top: -250px !important;
}

/* Submit/order confirm prompt: 600px, max 850px, centered. */
#confirmPrompt .modal-dialog,
#confirmPrompt.modal .modal-dialog,
#mltv-root-popup-host #confirmPrompt .modal-dialog,
body .modal.show#confirmPrompt > .modal-dialog,
body .modal.d-block#confirmPrompt > .modal-dialog {
    width: 1040px !important;
    height: 600px !important;
    max-height: 850px !important;
    margin-left: -520px !important;
    margin-top: -300px !important;
}
#confirmPrompt .modal-content,
#confirmPrompt.modal .modal-content,
#mltv-root-popup-host #confirmPrompt .modal-content,
body .modal.show#confirmPrompt .modal-content,
body .modal.d-block#confirmPrompt .modal-content {
    height: 600px !important;
    min-height: 600px !important;
    max-height: 850px !important;
}

/* Make visible prompt content fill the fixed height nicely. */
#mltv-root-popup-host .modal-content,
body .modal.show .modal-content,
body .modal.d-block .modal-content {
    width: 1040px !important;
    height: 500px !important;
    min-height: 500px !important;
    max-height: 500px !important;
}
#mltv-root-popup-host .modal-header,
body .modal.show .modal-header,
body .modal.d-block .modal-header {
    height: 84px !important;
    padding: 34px 46px 0 46px !important;
}
#mltv-root-popup-host .modal-body,
body .modal.show .modal-body,
body .modal.d-block .modal-body {
    height: 220px !important;
    padding: 14px 46px 0 46px !important;
    font-size: 28px !important;
    line-height: 38px !important;
}
#mltv-root-popup-host .modal-footer,
body .modal.show .modal-footer,
body .modal.d-block .modal-footer,
#mltv-root-popup-host .confirmation-actions,
body .modal.show .confirmation-actions,
body .modal.d-block .confirmation-actions {
    left: 46px !important;
    right: 46px !important;
    bottom: 44px !important;
    height: 72px !important;
}

/* HOME screen: use available right-side width.
   Actual markup uses data-nav-scope home-days/home-meals. */
.home-panel-right-column,
.index-main-layout.home-dashboard-shell > .col-lg-7,
.index-main-layout.home-dashboard-shell > .col-xl-7 {
    padding-left: 24px !important;
    padding-right: 24px !important;
}

/* Expand the day buttons to two wide equal columns. */
[data-nav-scope="home-days"] {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
[data-nav-scope="home-days"] > .col-sm-6,
[data-nav-scope="home-days"] > .col-6,
[data-nav-scope="home-days"] > div {
    -ms-flex: 0 0 48% !important;
    flex: 0 0 48% !important;
    width: 48% !important;
    max-width: 48% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
[data-nav-scope="home-days"] > .col-sm-6:first-child,
[data-nav-scope="home-days"] > div:first-child {
    margin-right: 4% !important;
}
[data-nav-scope="home-days"] button {
    width: 100% !important;
    max-width: 100% !important;
    height: 64px !important;
}

/* Expand meal cards: two wider columns, not narrow squares. */
[data-nav-scope="home-meals"] {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
[data-nav-scope="home-meals"] > .col-12,
[data-nav-scope="home-meals"] > .col-sm-6,
[data-nav-scope="home-meals"] > div {
    -ms-flex: 0 0 48% !important;
    flex: 0 0 48% !important;
    width: 48% !important;
    max-width: 48% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-bottom: 18px !important;
}
[data-nav-scope="home-meals"] > .col-sm-6:nth-child(odd),
[data-nav-scope="home-meals"] > div:nth-child(odd) {
    margin-right: 4% !important;
}
[data-nav-scope="home-meals"] .meal-period-visible-card,
[data-nav-scope="home-meals"] .meal-period-card,
[data-nav-scope="home-meals"] .meal-card {
    width: 100% !important;
    max-width: 100% !important;
    height: 156px !important;
    min-height: 156px !important;
    padding: 20px 26px !important;
}

/* Guest Order matches left meal-card column width. */
.home-panel-right-column [data-nav-id="guest-order"],
.home-panel-right-column button[data-nav-id*="guest"],
.index-main-layout.home-dashboard-shell [data-nav-id="guest-order"],
.index-main-layout.home-dashboard-shell button[data-nav-id*="guest"] {
    width: 48% !important;
    max-width: 48% !important;
    height: 64px !important;
    min-height: 64px !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}


/* =========================================================
   TV portal: absolute center popup + cancel target repair
   Chrome 58 safe.
   ========================================================= */

#mltv-root-popup-host .modal,
#mltv-root-popup-host .modal.show,
#mltv-root-popup-host .modal.d-block,
body .modal.show,
body .modal.d-block,
body .modal[style*="display: block"] {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
    z-index: 2147482000 !important;
}

/* Hard override every previous popup placement. */
#mltv-root-popup-host .modal-dialog,
#mltv-root-popup-host .modal.mltv-active-modal > .modal-dialog,
body .modal.show > .modal-dialog,
body .modal.d-block > .modal-dialog,
body .modal[style*="display: block"] > .modal-dialog,
body .modal-dialog.modal-dialog-centered,
body .modal-lg.modal-dialog,
body .modal-dialog.modal-lg,
div.modal-dialog.modal-lg.modal-dialog-centered,
div.modal-dialog.modal-dialog-centered {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: 1040px !important;
    height: 500px !important;
    max-width: 1040px !important;
    max-height: 500px !important;
    min-width: 1040px !important;
    min-height: 500px !important;
    margin-left: -520px !important;
    margin-top: -250px !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    -webkit-transform: none !important;
    transform: none !important;
    z-index: 2147482200 !important;
}

/* Make the visible content occupy that fixed 500px. */
#mltv-root-popup-host .modal-content,
body .modal.show .modal-content,
body .modal.d-block .modal-content,
body .modal[style*="display: block"] .modal-content {
    width: 1040px !important;
    height: 500px !important;
    min-width: 1040px !important;
    min-height: 500px !important;
    max-width: 1040px !important;
    max-height: 500px !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
    background: #12213f !important;
}

/* Item details internal layout fixed inside centered box. */
#mltv-root-popup-host .modal-pos-product,
#mltv-root-popup-host .modal-pos-product--qty,
body .modal.show .modal-pos-product,
body .modal.d-block .modal-pos-product,
body .modal.show .modal-pos-product--qty,
body .modal.d-block .modal-pos-product--qty {
    width: 1040px !important;
    height: 500px !important;
    min-width: 1040px !important;
    min-height: 500px !important;
    max-width: 1040px !important;
    max-height: 500px !important;
    display: block !important;
    position: relative !important;
    overflow: hidden !important;
}

#mltv-root-popup-host .modal-pos-product-img,
body .modal.show .modal-pos-product-img,
body .modal.d-block .modal-pos-product-img {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 330px !important;
    height: 500px !important;
}

#mltv-root-popup-host .modal-pos-product-info,
body .modal.show .modal-pos-product-info,
body .modal.d-block .modal-pos-product-info {
    position: absolute !important;
    left: 330px !important;
    top: 0 !important;
    width: 710px !important;
    height: 500px !important;
    padding: 52px 36px 132px 36px !important;
    box-sizing: border-box !important;
}

/* Buttons remain real clickable areas. */
#mltv-root-popup-host button,
body .modal.show button,
body .modal.d-block button,
#mltv-root-popup-host .btn,
body .modal.show .btn,
body .modal.d-block .btn {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 2147482400 !important;
}

/* Bottom action row in item popup and confirmation prompt. */
#mltv-root-popup-host .modal-footer,
body .modal.show .modal-footer,
body .modal.d-block .modal-footer,
#mltv-root-popup-host .modal-pos-product-actions,
body .modal.show .modal-pos-product-actions,
body .modal.d-block .modal-pos-product-actions,
#mltv-root-popup-host .confirmation-actions,
body .modal.show .confirmation-actions,
body .modal.d-block .confirmation-actions {
    position: absolute !important;
    left: 36px !important;
    right: 36px !important;
    bottom: 38px !important;
    height: 72px !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    padding: 0 !important;
    z-index: 2147482350 !important;
}

/* For item popup, action row is inside the right info area. */
#mltv-root-popup-host .modal-pos-product-info .modal-footer,
body .modal.show .modal-pos-product-info .modal-footer,
body .modal.d-block .modal-pos-product-info .modal-footer,
#mltv-root-popup-host .modal-pos-product-info .modal-pos-product-actions,
body .modal.show .modal-pos-product-info .modal-pos-product-actions,
body .modal.d-block .modal-pos-product-info .modal-pos-product-actions {
    left: 36px !important;
    right: 36px !important;
    bottom: 38px !important;
}

/* TV portal:  Order item quantity popup centering fix only.
   Keep loading indicator unchanged. Do not touch navigation/JS/images/colors.
   The item popup must be centered and contained when selecting a menu item by Enter or click. */
#mltv-root-popup-host .modal.modal-pos.modal-pos-qty,
body .modal.modal-pos.modal-pos-qty.show,
body .modal.modal-pos.modal-pos-qty.d-block {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: rgba(0,0,0,.64) !important;
    z-index: 2147483000 !important;
}

#mltv-root-popup-host .modal.modal-pos.modal-pos-qty > .modal-dialog.modal-dialog-qty,
body .modal.modal-pos.modal-pos-qty.show > .modal-dialog.modal-dialog-qty,
body .modal.modal-pos.modal-pos-qty.d-block > .modal-dialog.modal-dialog-qty {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    width: 1040px !important;
    height: 430px !important;
    max-width: 1040px !important;
    max-height: 430px !important;
    margin-left: -520px !important;
    margin-top: -215px !important;
    padding: 0 !important;
    transform: none !important;
    text-align: left !important;
    overflow: visible !important;
    z-index: 2147483100 !important;
}

#mltv-root-popup-host .modal.modal-pos.modal-pos-qty .modal-content,
body .modal.modal-pos.modal-pos-qty.show .modal-content,
body .modal.modal-pos.modal-pos-qty.d-block .modal-content {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 1040px !important;
    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;
    margin: 0 !important;
    overflow: hidden !important;
    border-radius: 18px !important;
}

#mltv-root-popup-host .modal.modal-pos.modal-pos-qty .modal-pos-product.modal-pos-product--qty,
body .modal.modal-pos.modal-pos-qty.show .modal-pos-product.modal-pos-product--qty,
body .modal.modal-pos.modal-pos-qty.d-block .modal-pos-product.modal-pos-product--qty {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 1040px !important;
    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;
    margin: 0 !important;
    overflow: hidden !important;
}

#mltv-root-popup-host .modal.modal-pos.modal-pos-qty .modal-pos-product.modal-pos-product--qty .modal-pos-product-img,
body .modal.modal-pos.modal-pos-qty.show .modal-pos-product.modal-pos-product--qty .modal-pos-product-img,
body .modal.modal-pos.modal-pos-qty.d-block .modal-pos-product.modal-pos-product--qty .modal-pos-product-img {
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 330px !important;
    height: 430px !important;
    min-width: 330px !important;
    max-width: 330px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

#mltv-root-popup-host .modal.modal-pos.modal-pos-qty .modal-pos-product.modal-pos-product--qty .modal-pos-product-img .img,
body .modal.modal-pos.modal-pos-qty.show .modal-pos-product.modal-pos-product--qty .modal-pos-product-img .img,
body .modal.modal-pos.modal-pos-qty.d-block .modal-pos-product.modal-pos-product--qty .modal-pos-product-img .img {
    display: block !important;
    width: 330px !important;
    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;
    margin: 0 !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}

#mltv-root-popup-host .modal.modal-pos.modal-pos-qty .modal-pos-product.modal-pos-product--qty .modal-pos-product-info,
body .modal.modal-pos.modal-pos-qty.show .modal-pos-product.modal-pos-product--qty .modal-pos-product-info,
body .modal.modal-pos.modal-pos-qty.d-block .modal-pos-product.modal-pos-product--qty .modal-pos-product-info {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    left: 330px !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 710px !important;
    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;
    padding: 42px 36px 112px 36px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* =========================================================
   TV portal: generic modal-pos centering
   - Centers every POS popup through the modal wrapper.
   - Does not change loading, navigation JS, images, colors, or popup-specific content.
   ========================================================= */
#mltv-root-popup-host .modal.modal-pos,
#mltv-root-popup-host .modal.modal-pos.show,
#mltv-root-popup-host .modal.modal-pos.d-block,
body .modal.modal-pos.show,
body .modal.modal-pos.d-block,
body .modal.modal-pos[style*="display: block"] {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    z-index: 2147483000 !important;
}

#mltv-root-popup-host .modal.modal-pos > .modal-dialog,
#mltv-root-popup-host .modal.modal-pos.show > .modal-dialog,
#mltv-root-popup-host .modal.modal-pos.d-block > .modal-dialog,
body .modal.modal-pos.show > .modal-dialog,
body .modal.modal-pos.d-block > .modal-dialog,
body .modal.modal-pos[style*="display: block"] > .modal-dialog {
    display: block !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    width: 1040px !important;
    max-width: calc(100vw - 96px) !important;
    max-height: calc(100vh - 96px) !important;
    overflow: visible !important;
    z-index: 2147483100 !important;
}

#mltv-root-popup-host .modal.modal-pos .modal-content,
#mltv-root-popup-host .modal.modal-pos.show .modal-content,
#mltv-root-popup-host .modal.modal-pos.d-block .modal-content,
body .modal.modal-pos.show .modal-content,
body .modal.modal-pos.d-block .modal-content,
body .modal.modal-pos[style*="display: block"] .modal-content {
    display: block !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
    max-width: calc(100vw - 96px) !important;
    max-height: calc(100vh - 96px) !important;
    overflow: hidden !important;
}

#mltv-root-popup-host .modal.modal-pos .modal-pos-product,
#mltv-root-popup-host .modal.modal-pos.show .modal-pos-product,
#mltv-root-popup-host .modal.modal-pos.d-block .modal-pos-product,
body .modal.modal-pos.show .modal-pos-product,
body .modal.modal-pos.d-block .modal-pos-product,
body .modal.modal-pos[style*="display: block"] .modal-pos-product {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
    max-width: calc(100vw - 96px) !important;
    max-height: calc(100vh - 96px) !important;
    overflow: hidden !important;
}

/* =========================================================
   TV portal: final generic popup + action button stabilization
   - Generic modal centering for all POS popups.
   - Quantity item popup kept fully on-screen with buttons visible.
   - Back/Guest action buttons use stable, centered text.
   ========================================================= */
html body .right-column-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px !important;
    align-items: stretch !important;
}

html body .right-column-actions .ml-main-action-btn {
    width: 100% !important;
    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;
    padding: 0 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.12 !important;
    font-size: 21px !important;
    font-weight: 900 !important;
    white-space: normal !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
}

html body .right-column-actions .perf-iframe-only-action:not(.iframe-visible) {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

html body .modal.modal-pos.show,
html body .modal.modal-pos.d-block,
html body .modal.modal-pos[style*="display: block"],
html body #mltv-root-popup-host .modal.modal-pos {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 2147483000 !important;
}

html body .modal.modal-pos.show > .modal-dialog,
html body .modal.modal-pos.d-block > .modal-dialog,
html body .modal.modal-pos[style*="display: block"] > .modal-dialog,
html body #mltv-root-popup-host .modal.modal-pos > .modal-dialog {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    width: 1040px !important;
    max-width: calc(100vw - 96px) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 96px) !important;
    display: block !important;
    overflow: visible !important;
    z-index: 2147483100 !important;
}

html body .modal.modal-pos.show .modal-content,
html body .modal.modal-pos.d-block .modal-content,
html body .modal.modal-pos[style*="display: block"] .modal-content,
html body #mltv-root-popup-host .modal.modal-pos .modal-content,
html body .modal.modal-pos.show .modal-pos-product,
html body .modal.modal-pos.d-block .modal-pos-product,
html body .modal.modal-pos[style*="display: block"] .modal-pos-product,
html body #mltv-root-popup-host .modal.modal-pos .modal-pos-product {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 96px) !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
}

html body .modal.modal-pos.show .modal-pos-product .modal-pos-product-info,
html body .modal.modal-pos.d-block .modal-pos-product .modal-pos-product-info,
html body .modal.modal-pos[style*="display: block"] .modal-pos-product .modal-pos-product-info,
html body #mltv-root-popup-host .modal.modal-pos .modal-pos-product .modal-pos-product-info {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: auto !important;
    max-height: calc(100vh - 96px) !important;
    box-sizing: border-box !important;
}

html body .modal.modal-pos.modal-pos-qty.show > .modal-dialog,
html body .modal.modal-pos.modal-pos-qty.d-block > .modal-dialog,
html body #mltv-root-popup-host .modal.modal-pos.modal-pos-qty > .modal-dialog {
    width: 1040px !important;
    max-width: calc(100vw - 96px) !important;
    height: 430px !important;
    max-height: calc(100vh - 96px) !important;
}

html body .modal.modal-pos.modal-pos-qty.show .modal-content,
html body .modal.modal-pos.modal-pos-qty.d-block .modal-content,
html body #mltv-root-popup-host .modal.modal-pos.modal-pos-qty .modal-content,
html body .modal.modal-pos.modal-pos-qty.show .modal-pos-product.modal-pos-product--qty,
html body .modal.modal-pos.modal-pos-qty.d-block .modal-pos-product.modal-pos-product--qty,
html body #mltv-root-popup-host .modal.modal-pos.modal-pos-qty .modal-pos-product.modal-pos-product--qty {
    width: 1040px !important;
    max-width: 100% !important;
    height: 430px !important;
    min-height: 430px !important;
    max-height: calc(100vh - 96px) !important;
    display: grid !important;
    grid-template-columns: 330px minmax(0, 1fr) !important;
    overflow: hidden !important;
}

html body .modal.modal-pos.modal-pos-qty.show .modal-pos-product.modal-pos-product--qty .modal-pos-product-img,
html body .modal.modal-pos.modal-pos-qty.d-block .modal-pos-product.modal-pos-product--qty .modal-pos-product-img,
html body #mltv-root-popup-host .modal.modal-pos.modal-pos-qty .modal-pos-product.modal-pos-product--qty .modal-pos-product-img {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 330px !important;
    height: 430px !important;
    min-width: 330px !important;
    max-width: 330px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}

html body .modal.modal-pos.modal-pos-qty.show .modal-pos-product.modal-pos-product--qty .modal-pos-product-info,
html body .modal.modal-pos.modal-pos-qty.d-block .modal-pos-product.modal-pos-product--qty .modal-pos-product-info,
html body #mltv-root-popup-host .modal.modal-pos.modal-pos-qty .modal-pos-product.modal-pos-product--qty .modal-pos-product-info {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;
    padding: 42px 36px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info .row.g-3 {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex !important;
    flex-wrap: nowrap !important;
}


/* =========================================================
   TV portal: popup position verification override
   Requested fixed offset test: keep POS popups 200px from top and 200px from left.
   No navigation, loading, JS, image, color, or unrelated layout changes.
   ========================================================= */
html body .modal.modal-pos.show,
html body .modal.modal-pos.d-block,
html body .modal.modal-pos[style*="display: block"],
html body #mltv-root-popup-host .modal.modal-pos {
    display: block !important;
    align-items: initial !important;
    justify-content: initial !important;
}

html body .modal.modal-pos.show > .modal-dialog,
html body .modal.modal-pos.d-block > .modal-dialog,
html body .modal.modal-pos[style*="display: block"] > .modal-dialog,
html body #mltv-root-popup-host .modal.modal-pos > .modal-dialog {
    position: fixed !important;
    left: 200px !important;
    top: 200px !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
}


/* =========================================================
   TV portal: generic modal repair
   - Overrides the TV portal: fixed 200px test.
   - All visible POS modals are viewport overlays.
   - Dialog position is controlled by JS after measuring width/height.
   ========================================================= */
html body .modal.modal-pos.show,
html body .modal.modal-pos.d-block,
html body .modal.modal-pos[style*="display: block"] {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 2147483000 !important;
    background: rgba(0,0,0,.55) !important;
}

html body .modal.modal-pos.show > .modal-dialog,
html body .modal.modal-pos.d-block > .modal-dialog,
html body .modal.modal-pos[style*="display: block"] > .modal-dialog,
html body .modal.modal-pos.mltv-tv-modal-active > .modal-dialog {
    position: fixed !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    z-index: 2147483100 !important;
}

html body.mltv-tv-modal-open .orders-page-shell,
html body.mltv-tv-modal-open .home-page-shell,
html body.mltv-tv-modal-open .index-page-shell {
    pointer-events: none !important;
}

html body.mltv-tv-modal-open .modal.modal-pos,
html body.mltv-tv-modal-open .modal.modal-pos * {
    pointer-events: auto !important;
}

/* =========================================================
   TV portal: Order screen generic popup modal fix
   Body-level modal host, true blocking backdrop, centered dialog.
   Applies only to Orders popups moved into #mltv-order-modal-host.
   ========================================================= */
html body #mltv-order-modal-host {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2147482900 !important;
    pointer-events: none !important;
}

html body #mltv-order-modal-host .modal.modal-pos,
html body #mltv-order-modal-host .modal.show,
html body #mltv-order-modal-host .modal.d-block,
html body .modal.modal-pos.mltv-active-modal {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
    z-index: 2147483000 !important;
    background: rgba(0,0,0,.60) !important;
    pointer-events: auto !important;
}

html body #mltv-order-modal-host .modal.mltv-active-modal > .modal-dialog,
html body .modal.modal-pos.mltv-active-modal > .modal-dialog {
    position: fixed !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 2147483100 !important;
    max-width: calc(100vw - 80px) !important;
    max-height: calc(100vh - 80px) !important;
}

html body.mltv-modal-open .orders-page-shell {
    pointer-events: none !important;
}

html body.mltv-modal-open #mltv-order-modal-host,
html body.mltv-modal-open #mltv-order-modal-host *,
html body.mltv-modal-open .modal.mltv-active-modal,
html body.mltv-modal-open .modal.mltv-active-modal * {
    pointer-events: auto !important;
}

html body #mltv-order-modal-host .modal-pos-qty .modal-dialog,
html body .modal.modal-pos-qty.mltv-active-modal .modal-dialog {
    width: 1040px !important;
    max-width: calc(100vw - 80px) !important;
    height: 430px !important;
    max-height: calc(100vh - 80px) !important;
}

html body #mltv-order-modal-host .modal-pos-qty .modal-content,
html body #mltv-order-modal-host .modal-pos-qty .modal-pos-product--qty,
html body .modal.modal-pos-qty.mltv-active-modal .modal-content,
html body .modal.modal-pos-qty.mltv-active-modal .modal-pos-product--qty {
    width: 100% !important;
    height: 430px !important;
    max-height: calc(100vh - 80px) !important;
    display: grid !important;
    grid-template-columns: 330px minmax(0, 1fr) !important;
    overflow: hidden !important;
}

html body #mltv-order-modal-host .modal-pos-qty .modal-pos-product-img,
html body .modal.modal-pos-qty.mltv-active-modal .modal-pos-product-img {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 330px !important;
    height: 430px !important;
    min-width: 330px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

html body #mltv-order-modal-host .modal-pos-qty .modal-pos-product-info,
html body .modal.modal-pos-qty.mltv-active-modal .modal-pos-product-info {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;
    padding: 42px 36px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow: hidden !important;
}

html body #mltv-order-modal-host button,
html body #mltv-order-modal-host .btn,
html body .modal.mltv-active-modal button,
html body .modal.mltv-active-modal .btn {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 2147483200 !important;
}

/* =========================================================
   TV portal: Order popup modal containment
   Generic order-screen popup fix: true fixed viewport modal,
   centered dialog, no background interaction while open.
   ========================================================= */
html body.mltv-modal-open {
    overflow: hidden !important;
}

html body .modal.modal-pos.mltv-active-order-modal,
html body .modal.modal-pos.show,
html body .modal.modal-pos.d-block {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
    background: rgba(0,0,0,.62) !important;
    z-index: 2147483000 !important;
    pointer-events: auto !important;
}

html body .modal.modal-pos.mltv-active-order-modal > .modal-dialog,
html body .modal.modal-pos.show > .modal-dialog,
html body .modal.modal-pos.d-block > .modal-dialog {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
    -webkit-transform: translate(-50%, -50%) !important;
    width: 1040px !important;
    max-width: calc(100vw - 96px) !important;
    max-height: calc(100vh - 96px) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    z-index: 2147483100 !important;
    pointer-events: auto !important;
}

html body .modal.modal-pos.mltv-active-order-modal .modal-content,
html body .modal.modal-pos.show .modal-content,
html body .modal.modal-pos.d-block .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100vh - 96px) !important;
    overflow: hidden !important;
    pointer-events: auto !important;
}

html body .modal.modal-pos-qty.mltv-active-order-modal > .modal-dialog,
html body .modal.modal-pos-qty.show > .modal-dialog,
html body .modal.modal-pos-qty.d-block > .modal-dialog {
    height: 430px !important;
}

html body .modal.modal-pos-qty.mltv-active-order-modal .modal-content,
html body .modal.modal-pos-qty.show .modal-content,
html body .modal.modal-pos-qty.d-block .modal-content {
    height: 430px !important;
}

html body .modal.modal-pos-qty.mltv-active-order-modal .modal-pos-product--qty,
html body .modal.modal-pos-qty.show .modal-pos-product--qty,
html body .modal.modal-pos-qty.d-block .modal-pos-product--qty {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 100% !important;
    height: 430px !important;
    display: grid !important;
    grid-template-columns: 330px minmax(0, 1fr) !important;
    overflow: hidden !important;
    transform: none !important;
    -webkit-transform: none !important;
}

html body .modal.modal-pos-qty.mltv-active-order-modal .modal-pos-product-img,
html body .modal.modal-pos-qty.show .modal-pos-product-img,
html body .modal.modal-pos-qty.d-block .modal-pos-product-img {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 330px !important;
    height: 430px !important;
    min-width: 330px !important;
    padding: 0 !important;
    overflow: hidden !important;
}

html body .modal.modal-pos-qty.mltv-active-order-modal .modal-pos-product-info,
html body .modal.modal-pos-qty.show .modal-pos-product-info,
html body .modal.modal-pos-qty.d-block .modal-pos-product-info {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: auto !important;
    height: 430px !important;
    min-height: 430px !important;
    max-height: 430px !important;
    padding: 42px 36px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow: hidden !important;
}

html body.mltv-modal-open .orders-page-shell {
    pointer-events: none !important;
}

html body.mltv-modal-open .modal.modal-pos.mltv-active-order-modal,
html body.mltv-modal-open .modal.modal-pos.mltv-active-order-modal * {
    pointer-events: auto !important;
}

/* =========================================================
   TV portal: Order popup viewport modal lock
   Final override: active order popup is hosted at body level,
   centered by JS using measured viewport/dialog dimensions.
   ========================================================= */
html body.mltv-modal-open {
    overflow: hidden !important;
}

html body.mltv-modal-open .orders-page-shell,
html body.mltv-modal-open .orders-page-shell * {
    pointer-events: none !important;
}

html body #mltv-order-modal-host,
html body #mltv-order-modal-host * {
    pointer-events: auto !important;
}

html body #mltv-order-modal-host .modal.mltv-active-order-modal {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
    background: rgba(0,0,0,.66) !important;
    z-index: 2147483000 !important;
}

html body #mltv-order-modal-host .modal.mltv-active-order-modal > .modal-dialog {
    position: fixed !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    z-index: 2147483100 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
}

html body #mltv-order-modal-host .modal.mltv-active-order-modal .modal-content,
html body #mltv-order-modal-host .modal.mltv-active-order-modal .modal-pos-product,
html body #mltv-order-modal-host .modal.mltv-active-order-modal .modal-pos-product-info,
html body #mltv-order-modal-host .modal.mltv-active-order-modal .card-body {
    pointer-events: auto !important;
}

html body #mltv-order-modal-host .modal.mltv-active-order-modal button,
html body #mltv-order-modal-host .modal.mltv-active-order-modal .btn {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 2147483200 !important;
}

html body.mltv-modal-open .orders-page-shell .nav-active,
html body.mltv-modal-open .orders-page-shell .keyboard-focus,
html body.mltv-modal-open .orders-page-shell .remote-focus,
html body.mltv-modal-open .orders-page-shell .ml-tv-current-focus-source,
html body.mltv-modal-open .orders-page-shell .tv-nav-ring {
    box-shadow: none !important;
    outline: none !important;
}


/* =========================================================
   TV portal: Order popup final viewport centering and modal lock
   ========================================================= */
html body.mltv-modal-open {
    overflow: hidden !important;
}
html body.mltv-modal-open .orders-page-shell,
html body.mltv-modal-open .orders-page-shell * {
    pointer-events: none !important;
}
html body .modal.modal-pos.mltv-active-modal,
html body .modal.mltv-active-modal {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
    background: rgba(0,0,0,.66) !important;
    z-index: 2147483000 !important;
    pointer-events: auto !important;
}
html body .modal.mltv-active-modal > .modal-dialog {
    position: fixed !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
    z-index: 2147483100 !important;
    pointer-events: auto !important;
}
html body .modal.mltv-active-modal .modal-content,
html body .modal.mltv-active-modal .modal-pos-product,
html body .modal.mltv-active-modal .modal-pos-product-info,
html body .modal.mltv-active-modal button,
html body .modal.mltv-active-modal .btn {
    pointer-events: auto !important;
}
html body.mltv-modal-open .orders-page-shell .tv-selected,
html body.mltv-modal-open .orders-page-shell .nav-active,
html body.mltv-modal-open .orders-page-shell .keyboard-focus,
html body.mltv-modal-open .orders-page-shell .remote-focus,
html body.mltv-modal-open .orders-page-shell .ml-tv-current-focus-source,
html body.mltv-modal-open .orders-page-shell .tv-nav-ring {
    box-shadow: none !important;
    outline: none !important;
}

/* =========================================================
   TV portal: Orders popup modal lock + viewport centering
   Loaded with early inline JS before legacy TV navigation.
   ========================================================= */
html body.mltv-modal-open {
    overflow: hidden !important;
}
html body.mltv-modal-open .orders-page-shell,
html body.mltv-modal-open .orders-page-shell * {
    pointer-events: none !important;
}
html body .modal.modal-pos.mltv-active-modal,
html body .modal.mltv-active-modal {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
    z-index: 2147483200 !important;
    background: rgba(0,0,0,.68) !important;
    pointer-events: auto !important;
}
html body .modal.mltv-active-modal > .modal-dialog {
    position: fixed !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
    z-index: 2147483300 !important;
    pointer-events: auto !important;
}
html body .modal.mltv-active-modal .modal-content,
html body .modal.mltv-active-modal .modal-pos-product,
html body .modal.mltv-active-modal .modal-pos-product-info,
html body .modal.mltv-active-modal button,
html body .modal.mltv-active-modal .btn {
    pointer-events: auto !important;
}
html body .modal.mltv-active-modal .mltv-modal-focused,
html body .modal.mltv-active-modal .mltv-modal-focused.tv-selected,
html body .modal.mltv-active-modal button.mltv-modal-focused {
    outline: 0 !important;
    box-shadow: 0 0 0 4px rgba(84, 213, 255, .95), 0 0 24px rgba(84, 213, 255, .85) !important;
}
html body.mltv-modal-open .orders-page-shell .tv-selected,
html body.mltv-modal-open .orders-page-shell .nav-active,
html body.mltv-modal-open .orders-page-shell .keyboard-focus,
html body.mltv-modal-open .orders-page-shell .remote-focus,
html body.mltv-modal-open .orders-page-shell .ml-tv-current-focus-source,
html body.mltv-modal-open .orders-page-shell .tv-nav-ring {
    box-shadow: none !important;
    outline: none !important;
}

/* =========================================================
   TV portal: Order Screen popup centering + modal lock
   Generic for all visible Order Screen .modal popups.
   ========================================================= */
html body.mltv-modal-open {
    overflow: hidden !important;
}
html body.mltv-modal-open .orders-page-shell,
html body.mltv-modal-open .orders-page-shell * {
    pointer-events: none !important;
}
html body .modal.mltv-active-modal,
html body .modal.modal-pos.mltv-active-modal {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
    z-index: 2147483400 !important;
    background: rgba(0,0,0,.70) !important;
    pointer-events: auto !important;
}
html body .modal.mltv-active-modal > .modal-dialog {
    position: fixed !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    z-index: 2147483500 !important;
    pointer-events: auto !important;
}
html body .modal.mltv-active-modal .modal-content,
html body .modal.mltv-active-modal .modal-pos-product,
html body .modal.mltv-active-modal .modal-pos-product-info,
html body .modal.mltv-active-modal .card-body,
html body .modal.mltv-active-modal button,
html body .modal.mltv-active-modal .btn {
    pointer-events: auto !important;
}
html body .modal.mltv-active-modal .mltv-focused,
html body .modal.mltv-active-modal button.mltv-focused,
html body .orders-page-shell .mltv-focused {
    outline: 0 !important;
    box-shadow: 0 0 0 4px rgba(84, 213, 255, .95), 0 0 24px rgba(84, 213, 255, .85) !important;
}
html body.mltv-modal-open .orders-page-shell .tv-selected,
html body.mltv-modal-open .orders-page-shell .nav-active,
html body.mltv-modal-open .orders-page-shell .keyboard-focus,
html body.mltv-modal-open .orders-page-shell .remote-focus,
html body.mltv-modal-open .orders-page-shell .ml-tv-current-focus-source,
html body.mltv-modal-open .orders-page-shell .tv-nav-ring {
    box-shadow: none !important;
    outline: none !important;
}


/* =========================================================
   TV portal: Order Screen popup center + modal lock stability
   Generic for visible Order Screen .modal popups.
   ========================================================= */
html body.mltv-modal-open {
    overflow: hidden !important;
}
html body.mltv-modal-open .orders-page-shell,
html body.mltv-modal-open .orders-page-shell * {
    pointer-events: none !important;
}
html body .modal.mltv-active-modal,
html body .modal.modal-pos.mltv-active-modal {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
    z-index: 2147483600 !important;
    background: rgba(0,0,0,.70) !important;
    pointer-events: auto !important;
}
html body .modal.mltv-active-modal > .modal-dialog {
    position: fixed !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    z-index: 2147483700 !important;
    pointer-events: auto !important;
}
html body .modal.mltv-active-modal .modal-content,
html body .modal.mltv-active-modal .modal-pos-product,
html body .modal.mltv-active-modal .modal-pos-product-info,
html body .modal.mltv-active-modal .card-body,
html body .modal.mltv-active-modal button,
html body .modal.mltv-active-modal .btn {
    pointer-events: auto !important;
}
html body .modal.mltv-active-modal .mltv-focused,
html body .modal.mltv-active-modal button.mltv-focused,
html body .orders-page-shell .mltv-focused {
    outline: 0 !important;
    box-shadow: 0 0 0 4px rgba(84, 213, 255, .95), 0 0 24px rgba(84, 213, 255, .85) !important;
}
html body.mltv-modal-open .orders-page-shell .tv-selected,
html body.mltv-modal-open .orders-page-shell .nav-active,
html body.mltv-modal-open .orders-page-shell .keyboard-focus,
html body.mltv-modal-open .orders-page-shell .remote-focus,
html body.mltv-modal-open .orders-page-shell .ml-tv-current-focus-source,
html body.mltv-modal-open .orders-page-shell .tv-nav-ring {
    box-shadow: none !important;
    outline: none !important;
}


/* =========================================================
   TV portal: Order Screen navigation/focus + modal containment
   ========================================================= */
html body .orders-page-shell .mltv-focused,
html body .orders-page-shell .mltv-focused.tv-selected,
html body .orders-page-shell .orders-category-link.mltv-focused,
html body .orders-page-shell .orders-category-link.tv-selected,
html body .orders-page-shell [data-nav-id="footer-home"].mltv-focused,
html body .orders-page-shell [data-nav-id="footer-submit"].mltv-focused {
    outline: 0 !important;
    box-shadow: 0 0 0 4px rgba(84, 213, 255, .98), 0 0 26px rgba(84, 213, 255, .90) !important;
    border-radius: 12px !important;
}
html body .orders-page-shell .orders-category-link.mltv-focused,
html body .orders-page-shell .orders-category-link.tv-selected {
    background: rgba(84, 213, 255, .18) !important;
}
html body.mltv-modal-open {
    overflow: hidden !important;
}
html body.mltv-modal-open .orders-page-shell,
html body.mltv-modal-open .orders-page-shell * {
    pointer-events: none !important;
}
html body .modal.mltv-active-modal,
html body .modal.modal-pos.mltv-active-modal {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
    z-index: 2147483600 !important;
    background: rgba(0,0,0,.70) !important;
    pointer-events: auto !important;
}
html body .modal.mltv-active-modal > .modal-dialog {
    position: fixed !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    z-index: 2147483700 !important;
    pointer-events: auto !important;
}
html body .modal.mltv-active-modal .modal-content,
html body .modal.mltv-active-modal .modal-pos-product,
html body .modal.mltv-active-modal .modal-pos-product-info,
html body .modal.mltv-active-modal .card-body,
html body .modal.mltv-active-modal button,
html body .modal.mltv-active-modal .btn {
    pointer-events: auto !important;
}
html body .modal.mltv-active-modal .mltv-focused,
html body .modal.mltv-active-modal button.mltv-focused,
html body .modal.mltv-active-modal .btn.mltv-focused {
    outline: 0 !important;
    box-shadow: 0 0 0 4px rgba(84, 213, 255, .98), 0 0 26px rgba(84, 213, 255, .90) !important;
    border-radius: 10px !important;
}
html body.mltv-modal-open .orders-page-shell .tv-selected,
html body.mltv-modal-open .orders-page-shell .nav-active,
html body.mltv-modal-open .orders-page-shell .keyboard-focus,
html body.mltv-modal-open .orders-page-shell .remote-focus,
html body.mltv-modal-open .orders-page-shell .mltv-focused {
    box-shadow: none !important;
    outline: none !important;
}


/* TV portal: Order Screen deterministic focus and modal popup containment. */
html body .orders-page-shell .mltv-focused,
html body .orders-page-shell .mltv-focused.tv-selected,
html body .orders-page-shell .orders-category-link.mltv-focused,
html body .orders-page-shell .orders-item-card.mltv-focused,
html body .orders-page-shell [data-nav-id="footer-home"].mltv-focused,
html body .orders-page-shell [data-nav-id="footer-submit"].mltv-focused {
    outline: 6px solid #ffde59 !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 6px rgba(0,0,0,.85), 0 0 26px rgba(255,222,89,.95) !important;
    position: relative !important;
    z-index: 50 !important;
}
html body .orders-page-shell .orders-category-link.mltv-focused .orders-category-link__text {
    color: #ffffff !important;
    text-decoration: underline !important;
}
html body.mltv-modal-open .orders-page-shell,
html body.mltv-modal-open .orders-page-shell * {
    pointer-events: none !important;
}
html body .modal.mltv-active-modal,
html body .modal.modal-pos.mltv-active-modal {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: hidden !important;
    z-index: 2147483600 !important;
    pointer-events: auto !important;
    background: rgba(0,0,0,.70) !important;
}
html body .modal.mltv-active-modal > .modal-dialog {
    position: fixed !important;
    margin: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    overflow: visible !important;
    z-index: 2147483700 !important;
    pointer-events: auto !important;
}
html body .modal.mltv-active-modal .modal-content,
html body .modal.mltv-active-modal .modal-pos-product,
html body .modal.mltv-active-modal .modal-pos-product-info,
html body .modal.mltv-active-modal .card-body,
html body .modal.mltv-active-modal button,
html body .modal.mltv-active-modal .btn {
    pointer-events: auto !important;
}
html body .modal.mltv-active-modal .mltv-focused,
html body .modal.mltv-active-modal button.mltv-focused,
html body .modal.mltv-active-modal .btn.mltv-focused {
    outline: 6px solid #ffde59 !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 6px rgba(0,0,0,.85), 0 0 28px rgba(255,222,89,.95) !important;
    position: relative !important;
    z-index: 2147483800 !important;
}
html body.mltv-modal-open .orders-page-shell .tv-selected,
html body.mltv-modal-open .orders-page-shell .nav-active,
html body.mltv-modal-open .orders-page-shell .keyboard-focus,
html body.mltv-modal-open .orders-page-shell .remote-focus,
html body.mltv-modal-open .orders-page-shell .mltv-focused {
    outline: none !important;
    box-shadow: none !important;
}

/* TV portal: Order Screen deterministic focus + true modal popup scope */
html body .orders-page-shell .mltv-focused,
html body .orders-page-shell .orders-category-link.mltv-focused,
html body .orders-page-shell .orders-item-card.mltv-focused,
html body .orders-page-shell .orders-review-delete-btn.mltv-focused,
html body .orders-page-shell [data-nav-id="footer-submit"].mltv-focused,
html body .orders-page-shell [data-nav-id="footer-home"].mltv-focused {
    outline: 6px solid #ffde59 !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 6px rgba(0,0,0,.85), 0 0 28px rgba(255,222,89,.95) !important;
    position: relative !important;
    z-index: 60 !important;
}
html body.mltv-modal-open {
    overflow: hidden !important;
}
html body.mltv-modal-open .orders-page-shell,
html body.mltv-modal-open .orders-page-shell * {
    pointer-events: none !important;
}
html body .modal.mltv-active-modal,
html body .modal.modal-pos.mltv-active-modal {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
    z-index: 2147483600 !important;
    background: rgba(0,0,0,.72) !important;
    pointer-events: auto !important;
}
html body .modal.mltv-active-modal > .modal-dialog {
    position: fixed !important;
    margin: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    z-index: 2147483700 !important;
    pointer-events: auto !important;
}
html body .modal.mltv-active-modal .modal-content,
html body .modal.mltv-active-modal .modal-pos-product,
html body .modal.mltv-active-modal .modal-pos-product-info,
html body .modal.mltv-active-modal .card-body,
html body .modal.mltv-active-modal button,
html body .modal.mltv-active-modal .btn {
    pointer-events: auto !important;
}
html body .modal.mltv-active-modal .mltv-focused,
html body .modal.mltv-active-modal button.mltv-focused,
html body .modal.mltv-active-modal .btn.mltv-focused {
    outline: 6px solid #ffde59 !important;
    outline-offset: 4px !important;
    box-shadow: 0 0 0 6px rgba(0,0,0,.85), 0 0 28px rgba(255,222,89,.95) !important;
    position: relative !important;
    z-index: 2147483800 !important;
}
html body.mltv-modal-open .orders-page-shell .tv-selected,
html body.mltv-modal-open .orders-page-shell .nav-active,
html body.mltv-modal-open .orders-page-shell .keyboard-focus,
html body.mltv-modal-open .orders-page-shell .remote-focus,
html body.mltv-modal-open .orders-page-shell .mltv-focused,
html body.mltv-modal-open .orders-page-shell .mltv-focused,
html body.mltv-modal-open .orders-page-shell .mltv-focused {
    outline: none !important;
    box-shadow: none !important;
}


/* TV portal:  keep current Menu Category visually selected while focus is inside Menu Items. */
.orders-category-link.mltv-category-context,
.orders-category-link.active.mltv-category-context,
.orders-category-link.tv-zone-selected.mltv-category-context {
    box-shadow: 0 0 0 4px rgba(255,255,255,.95) inset, 0 0 0 2px rgba(255,255,255,.65) !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.16) !important;
}

.orders-category-link.mltv-focused,
.orders-item-card.mltv-focused,
.orders-review-delete-btn.mltv-focused,
[data-nav-id="footer-submit"].mltv-focused,
[data-nav-id="footer-home"].mltv-focused,
.modal .mltv-focused {
    box-shadow: 0 0 0 5px rgba(255,255,255,.98), 0 0 18px rgba(255,255,255,.75) !important;
    outline: none !important;
}


/* TV portal:  selected Menu Category marker and item-right containment polish. */
.orders-category-link.active,
.orders-category-link.tv-zone-selected,
.orders-category-link.mltv-category-context {
    position: relative !important;
}
.orders-category-link.active::after,
.orders-category-link.tv-zone-selected::after,
.orders-category-link.mltv-category-context::after {
    content: "\2713" !important;
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 24px !important;
    height: 24px !important;
    line-height: 24px !important;
    text-align: center !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.95) !important;
    color: #102846 !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    z-index: 20 !important;
    pointer-events: none !important;
}


/* TV portal:  selected Menu Category marker visibility + wider rail.
   Scope: category selected indicator visibility only; no color/nav redesign. */
html body .orders-page-shell .pos-menu,
html body .pos.pos-with-menu.pos-with-sidebar .pos-menu {
    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
    overflow: visible !important;
}
html body .orders-page-shell .pos-menu [data-nav-scope="orders-categories"],
html body .orders-page-shell .pos-menu .nav-container,
html body .orders-page-shell .pos-menu .nav,
html body .orders-page-shell .pos-menu .nav-tabs,
html body .orders-page-shell .pos-menu .nav-item {
    overflow: visible !important;
}
html body .orders-page-shell .orders-category-link {
    width: 178px !important;
    min-width: 178px !important;
    max-width: 178px !important;
    padding-right: 34px !important;
    overflow: visible !important;
    position: relative !important;
}
html body .orders-page-shell .orders-category-link__selected-tick,
html body .orders-page-shell .orders-category-link.active::after,
html body .orders-page-shell .orders-category-link.tv-zone-selected::after,
html body .orders-page-shell .orders-category-link.mltv-category-context::after {
    content: "\2713" !important;
    display: block !important;
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    width: 24px !important;
    height: 24px !important;
    line-height: 24px !important;
    text-align: center !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.96) !important;
    color: #102846 !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    z-index: 50 !important;
    pointer-events: none !important;
    opacity: 1 !important;
}

/* TV portal:  keep TV portal: menu-item right-arrow fix; correct only category rail width/marker visibility.
   The prior TV portal: rail override reduced the rail/link to 230/178px, clipping the selected tick.
   Restore a single consistent 270px category rail/link width and keep overflow visible for the marker. */
html body .orders-page-shell .pos-menu,
html body .pos.pos-with-menu.pos-with-sidebar .pos-menu,
html body .orders-page-shell .pos-menu .nav-container,
html body .orders-page-shell .pos-menu [data-nav-scope="orders-categories"],
html body .orders-page-shell .pos-menu .nav,
html body .orders-page-shell .pos-menu .nav-tabs,
html body .orders-page-shell .pos-menu .nav-item {
    width: 270px !important;
    min-width: 270px !important;
    max-width: 270px !important;
    overflow: visible !important;
}

html body .orders-page-shell .orders-category-link,
html body .orders-page-shell .pos-menu button.orders-category-link,
html body .orders-page-shell .pos-menu .nav-item > .orders-category-link {
    width: 270px !important;
    min-width: 270px !important;
    max-width: 270px !important;
    padding-left: 12px !important;
    padding-right: 44px !important;
    overflow: visible !important;
    position: relative !important;
}

html body .orders-page-shell .orders-category-link__selected-tick,
html body .orders-page-shell .orders-category-link.active::after,
html body .orders-page-shell .orders-category-link.tv-zone-selected::after,
html body .orders-page-shell .orders-category-link.mltv-category-context::after {
    right: 10px !important;
    top: 8px !important;
    z-index: 999 !important;
    opacity: 1 !important;
    visibility: visible !important;
    clip: auto !important;
}

/* TV portal:  category rail width only.
   Keep TV portal menu item right-arrow behavior unchanged.
   Widen the real Orders category rail and move content to the right so the selected tick
   is inside the visible rail instead of being clipped/covered at the edge. */
html body .orders-page-shell .pos-menu,
html body .pos.pos-with-menu.pos-with-sidebar .pos-menu,
html body .pos-container > .pos-menu {
    left: 34px !important;
    width: 330px !important;
    min-width: 330px !important;
    max-width: 330px !important;
    flex: 0 0 330px !important;
    overflow: visible !important;
    z-index: 80 !important;
}

html body .orders-page-shell .pos-menu .nav-container,
html body .orders-page-shell .pos-menu [data-nav-scope="orders-categories"],
html body .orders-page-shell .pos-menu .nav,
html body .orders-page-shell .pos-menu .nav-tabs,
html body .orders-page-shell .pos-menu .nav-item {
    width: 330px !important;
    min-width: 330px !important;
    max-width: 330px !important;
    overflow: visible !important;
}

html body .orders-page-shell .orders-category-link,
html body .orders-page-shell .pos-menu button.orders-category-link,
html body .orders-page-shell .pos-menu .nav-item > .orders-category-link {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    padding-left: 12px !important;
    padding-right: 52px !important;
    overflow: visible !important;
    position: relative !important;
}

html body .orders-page-shell .orders-category-link__selected-tick,
html body .orders-page-shell .orders-category-link.active::after,
html body .orders-page-shell .orders-category-link.tv-zone-selected::after,
html body .orders-page-shell .orders-category-link.mltv-category-context::after {
    right: 14px !important;
    top: 8px !important;
    z-index: 9999 !important;
    opacity: 1 !important;
    visibility: visible !important;
    clip: auto !important;
}

html body .orders-page-shell .pos-content,
html body .pos.pos-with-menu.pos-with-sidebar .pos-content,
html body .pos-content {
    left: 394px !important;
}


/* =========================================================
   TV portal:  category rail width + item card visual cleanup only.
   Baseline: TV portal.
   - Widen Orders category rail/card so selected tick is fully visible.
   - Keep the selected tick inside the card, not clipped at rail edge.
   - Remove duplicated menu item image fallback on cards.
   - Remove the heavy extra black border/shadow from menu item cards.
   No navigation, popup, loading, image asset, or SQL changes.
   ========================================================= */
html body .orders-page-shell .pos-menu,
html body .pos.pos-with-menu.pos-with-sidebar .pos-menu,
html body .orders-page-shell .pos-container > .pos-menu {
    left: 38px !important;
    width: 380px !important;
    min-width: 380px !important;
    max-width: 380px !important;
    flex: 0 0 380px !important;
    overflow: visible !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

html body .orders-page-shell .pos-menu .nav-container,
html body .orders-page-shell .pos-menu [data-nav-scope="orders-categories"],
html body .orders-page-shell .pos-menu .nav,
html body .orders-page-shell .pos-menu .nav-tabs,
html body .orders-page-shell .pos-menu .nav-item {
    width: 380px !important;
    min-width: 380px !important;
    max-width: 380px !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

html body .orders-page-shell .pos-menu [data-nav-scope="orders-categories"] {
    padding-left: 22px !important;
    padding-right: 22px !important;
}

html body .orders-page-shell .orders-category-link,
html body .orders-page-shell .pos-menu button.orders-category-link,
html body .orders-page-shell .pos-menu .nav-item > .orders-category-link {
    width: 330px !important;
    min-width: 330px !important;
    max-width: 330px !important;
    padding-left: 18px !important;
    padding-right: 58px !important;
    overflow: visible !important;
    position: relative !important;
    box-sizing: border-box !important;
}

html body .orders-page-shell .orders-category-link__selected-tick {
    display: block !important;
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    margin-top: -13px !important;
    width: 26px !important;
    height: 26px !important;
    line-height: 26px !important;
    text-align: center !important;
    border-radius: 50% !important;
    background: #eaf4ff !important;
    color: #1f2f45 !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    z-index: 9999 !important;
    opacity: 1 !important;
    visibility: visible !important;
    clip: auto !important;
}

html body .orders-page-shell .orders-category-link.active::after,
html body .orders-page-shell .orders-category-link.tv-zone-selected::after,
html body .orders-page-shell .orders-category-link.mltv-category-context::after {
    right: 18px !important;
    top: 50% !important;
    margin-top: -13px !important;
    z-index: 9998 !important;
    opacity: 1 !important;
    visibility: visible !important;
    clip: auto !important;
}

html body .orders-page-shell .pos-content,
html body .pos.pos-with-menu.pos-with-sidebar .pos-content,
html body .pos-content {
    left: 438px !important;
}

html body .orders-page-shell .orders-item-card .tv-item-img-fallback,
html body .orders-page-shell .orders-item-card .orders-item-card__media .img > img,
html body .orders-page-shell .pos-product.orders-item-card .orders-item-card__media .img > img {
    display: none !important;
    visibility: hidden !important;
}

html body .orders-page-shell .orders-item-card,
html body .orders-page-shell .pos-product.orders-item-card {
    border: 1px solid rgba(105, 142, 190, .42) !important;
    outline: none !important;
    box-shadow: 0 10px 20px rgba(0,0,0,.22) !important;
    background-clip: padding-box !important;
}

html body .orders-page-shell .orders-item-card:not(.nav-active):not(.orders-tv-focused):not(:focus):not(:focus-visible),
html body .orders-page-shell .pos-product.orders-item-card:not(.nav-active):not(.orders-tv-focused):not(:focus):not(:focus-visible) {
    box-shadow: 0 10px 20px rgba(0,0,0,.18) !important;
}

/* =========================================================
   TV portal:  Orders category marker and item-card bottom edge only.
   Baseline: TV portal.
   - Widen category rail/card slightly so the selected tick sits fully inside.
   - Keep only the explicit tick span; suppress older pseudo tick markers.
   - Make menu-item bottom strip fill the card bottom so bottom edge matches top edge.
   No navigation, popup, loading, JS, image asset, or SQL changes.
   ========================================================= */
html body .orders-page-shell .pos-menu,
html body .pos.pos-with-menu.pos-with-sidebar .pos-menu,
html body .orders-page-shell .pos-container > .pos-menu {
    width: 430px !important;
    min-width: 430px !important;
    max-width: 430px !important;
    flex: 0 0 430px !important;
    overflow: visible !important;
}

html body .orders-page-shell .pos-menu .nav-container,
html body .orders-page-shell .pos-menu [data-nav-scope="orders-categories"],
html body .orders-page-shell .pos-menu .nav,
html body .orders-page-shell .pos-menu .nav-tabs,
html body .orders-page-shell .pos-menu .nav-item {
    width: 430px !important;
    min-width: 430px !important;
    max-width: 430px !important;
    overflow: visible !important;
}

html body .orders-page-shell .orders-category-link,
html body .orders-page-shell .pos-menu button.orders-category-link,
html body .orders-page-shell .pos-menu .nav-item > .orders-category-link {
    width: 380px !important;
    min-width: 380px !important;
    max-width: 380px !important;
    padding-right: 62px !important;
    overflow: hidden !important;
}

html body .orders-page-shell .orders-category-link.active::after,
html body .orders-page-shell .orders-category-link.tv-zone-selected::after,
html body .orders-page-shell .orders-category-link.mltv-category-context::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

html body .orders-page-shell .orders-category-link__selected-tick {
    display: block !important;
    right: 18px !important;
    left: auto !important;
    top: 50% !important;
    margin-top: -13px !important;
}

html body .orders-page-shell .pos-content,
html body .pos.pos-with-menu.pos-with-sidebar .pos-content,
html body .pos-content {
    left: 488px !important;
}

html body .orders-page-shell .orders-item-card,
html body .orders-page-shell .pos-product.orders-item-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding-bottom: 0 !important;
}

html body .orders-page-shell .orders-item-card .modal-pos-product-img,
html body .orders-page-shell .pos-product.orders-item-card .modal-pos-product-img,
html body .orders-page-shell .orders-item-card .orders-item-card__media,
html body .orders-page-shell .pos-product.orders-item-card .orders-item-card__media {
    flex: 0 0 158px !important;
}

html body .orders-page-shell .orders-item-card .info,
html body .orders-page-shell .pos-product.orders-item-card .info,
html body .orders-page-shell .orders-item-card .content,
html body .orders-page-shell .pos-product.orders-item-card .content,
html body .orders-page-shell .orders-item-card .product-info,
html body .orders-page-shell .pos-product.orders-item-card .product-info {
    flex: 1 1 auto !important;
    min-height: 88px !important;
    height: auto !important;
    max-height: none !important;
    margin-bottom: 0 !important;
    border-radius: 0 0 14px 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* =========================================================
   TV portal:  Orders item image height + usable centered item popup.
   Baseline: TV portal.
   - Increase MenuItem image area height only.
   - Force Order item add popup to a centered, fully visible modal with accessible buttons.
   No category navigation, right-arrow item navigation, loading, images, or SQL changes.
   ========================================================= */
html body .orders-page-shell .orders-item-card,
html body .orders-page-shell .pos-product.orders-item-card {
    min-height: 328px !important;
}

html body .orders-page-shell .orders-item-card .modal-pos-product-img,
html body .orders-page-shell .pos-product.orders-item-card .modal-pos-product-img,
html body .orders-page-shell .orders-item-card .orders-item-card__media,
html body .orders-page-shell .pos-product.orders-item-card .orders-item-card__media {
    flex: 0 0 205px !important;
    height: 205px !important;
    min-height: 205px !important;
    max-height: 205px !important;
}

html body .orders-page-shell .orders-item-card .modal-pos-product-img .img,
html body .orders-page-shell .pos-product.orders-item-card .modal-pos-product-img .img,
html body .orders-page-shell .orders-item-card .orders-item-card__media .img,
html body .orders-page-shell .pos-product.orders-item-card .orders-item-card__media .img {
    height: 205px !important;
    min-height: 205px !important;
    max-height: 205px !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

html body .modal.modal-pos.modal-pos-qty.show,
html body .modal.modal-pos.modal-pos-qty.d-block,
html body .modal.modal-pos.modal-pos-qty.mltv-active-modal {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: block !important;
    overflow: hidden !important;
    background: rgba(0,0,0,.70) !important;
    z-index: 2147483600 !important;
    pointer-events: auto !important;
}

html body .modal.modal-pos.modal-pos-qty.show > .modal-dialog,
html body .modal.modal-pos.modal-pos-qty.d-block > .modal-dialog,
html body .modal.modal-pos.modal-pos-qty.mltv-active-modal > .modal-dialog,
html body .modal.modal-pos.modal-pos-qty.show > .modal-dialog.modal-dialog-qty,
html body .modal.modal-pos.modal-pos-qty.d-block > .modal-dialog.modal-dialog-qty {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    -webkit-transform: translate(-50%, -50%) !important;
    width: 860px !important;
    max-width: calc(100vw - 120px) !important;
    height: auto !important;
    max-height: calc(100vh - 140px) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    z-index: 2147483700 !important;
    pointer-events: auto !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-content,
html body .modal.modal-pos.modal-pos-qty .modal-pos-product.modal-pos-product--qty {
    width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 140px) !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    pointer-events: auto !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-pos-product.modal-pos-product--qty {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-pos-product.modal-pos-product--qty .modal-pos-product-img {
    flex: 0 0 285px !important;
    width: 285px !important;
    min-width: 285px !important;
    max-width: 285px !important;
    height: auto !important;
    min-height: 300px !important;
    max-height: calc(100vh - 160px) !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-pos-product.modal-pos-product--qty .modal-pos-product-info {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: calc(100vh - 160px) !important;
    overflow: auto !important;
    padding: 30px !important;
    pointer-events: auto !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info .row.g-3,
html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info button,
html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info .btn {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info button.mltv-focused,
html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info .btn.mltv-focused,
html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info button:focus {
    outline: 4px solid #6ee6ff !important;
    box-shadow: 0 0 0 5px rgba(110,230,255,.45), 0 0 18px rgba(110,230,255,.9) !important;
}


/* =========================================================
   TV portal:  Orders screen focused repair on top of TV portal.
   Scope:
   - Make category rail professional width while keeping one selected tick visible.
   - Force item add popup to true centered viewport modal via one generic qty-modal override.
   - Keep popup buttons visible and accessible.
   ========================================================= */
html body .orders-page-shell .pos-menu,
html body .pos.pos-with-menu.pos-with-sidebar .pos-menu,
html body .orders-page-shell .pos-container > .pos-menu {
    width: 340px !important;
    min-width: 340px !important;
    max-width: 340px !important;
    flex: 0 0 340px !important;
    overflow: visible !important;
}

html body .orders-page-shell .pos-menu .nav-container,
html body .orders-page-shell .pos-menu [data-nav-scope="orders-categories"],
html body .orders-page-shell .pos-menu .nav,
html body .orders-page-shell .pos-menu .nav-tabs,
html body .orders-page-shell .pos-menu .nav-item {
    width: 340px !important;
    min-width: 340px !important;
    max-width: 340px !important;
    overflow: visible !important;
}

html body .orders-page-shell .orders-category-link,
html body .orders-page-shell .pos-menu button.orders-category-link,
html body .orders-page-shell .pos-menu .nav-item > .orders-category-link {
    width: 304px !important;
    min-width: 304px !important;
    max-width: 304px !important;
    margin-left: 18px !important;
    margin-right: 18px !important;
    padding-left: 18px !important;
    padding-right: 54px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

html body .orders-page-shell .orders-category-link.active::before,
html body .orders-page-shell .orders-category-link.tv-zone-selected::before,
html body .orders-page-shell .orders-category-link.mltv-category-context::before,
html body .orders-page-shell .orders-category-link.active::after,
html body .orders-page-shell .orders-category-link.tv-zone-selected::after,
html body .orders-page-shell .orders-category-link.mltv-category-context::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

html body .orders-page-shell .orders-category-link__selected-tick {
    display: block !important;
    position: absolute !important;
    left: auto !important;
    right: 16px !important;
    top: 50% !important;
    width: 26px !important;
    height: 26px !important;
    line-height: 26px !important;
    margin-top: -13px !important;
    text-align: center !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    z-index: 4 !important;
}

html body .orders-page-shell .pos-content,
html body .pos.pos-with-menu.pos-with-sidebar .pos-content,
html body .pos-content {
    left: 380px !important;
}

/* Center the Add MenuItem modal using the viewport itself, not page columns. */
html body .modal.modal-pos.modal-pos-qty.show,
html body .modal.modal-pos.modal-pos-qty.d-block,
html body .modal.modal-pos.modal-pos-qty.mltv-active-modal {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: rgba(0,0,0,.72) !important;
    z-index: 2147483600 !important;
    pointer-events: auto !important;
}

html body .modal.modal-pos.modal-pos-qty.show > .modal-dialog,
html body .modal.modal-pos.modal-pos-qty.d-block > .modal-dialog,
html body .modal.modal-pos.modal-pos-qty.mltv-active-modal > .modal-dialog,
html body .modal.modal-pos.modal-pos-qty.show > .modal-dialog.modal-dialog-qty,
html body .modal.modal-pos.modal-pos-qty.d-block > .modal-dialog.modal-dialog-qty {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    -webkit-transform: none !important;
    width: 900px !important;
    max-width: calc(100vw - 120px) !important;
    height: auto !important;
    max-height: calc(100vh - 110px) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    z-index: 2147483700 !important;
    pointer-events: auto !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-content,
html body .modal.modal-pos.modal-pos-qty .modal-pos-product.modal-pos-product--qty {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 110px) !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-pos-product.modal-pos-product--qty {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-pos-product.modal-pos-product--qty .modal-pos-product-img {
    flex: 0 0 300px !important;
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    min-height: 320px !important;
    max-height: calc(100vh - 130px) !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-pos-product.modal-pos-product--qty .modal-pos-product-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-height: calc(100vh - 130px) !important;
    overflow: auto !important;
    padding: 30px !important;
    box-sizing: border-box !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info .row.g-3 {
    display: flex !important;
    flex-wrap: nowrap !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info .row.g-3 > .col-4,
html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info .row.g-3 > .col-8 {
    flex: 1 1 0 !important;
    max-width: none !important;
    width: auto !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info button,
html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info .btn {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    min-height: 64px !important;
}

/* =========================================================
   TV portal:  focused Order screen repair.
   Scope:
   - Keep Category selection flow simple: selecting a category moves focus to its first visible MenuItem.
   - Keep Home reachable through footer navigation path.
   - Contain the Add MenuItem popup in the viewport with visible Cancel/Add buttons.
   No image assets, SQL, loading indicator, or unrelated navigation changes.
   ========================================================= */
html body .modal.modal-pos.modal-pos-qty.show,
html body .modal.modal-pos.modal-pos-qty.d-block,
html body .modal.modal-pos.modal-pos-qty.mltv-active-modal {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    min-width: 100vw !important;
    min-height: 100vh !important;
    display: block !important;
    overflow: hidden !important;
    background: rgba(0,0,0,.72) !important;
    z-index: 2147483600 !important;
    pointer-events: auto !important;
}

html body .modal.modal-pos.modal-pos-qty.show > .modal-dialog,
html body .modal.modal-pos.modal-pos-qty.d-block > .modal-dialog,
html body .modal.modal-pos.modal-pos-qty.mltv-active-modal > .modal-dialog,
html body .modal.modal-pos.modal-pos-qty.show > .modal-dialog.modal-dialog-qty,
html body .modal.modal-pos.modal-pos-qty.d-block > .modal-dialog.modal-dialog-qty {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: 780px !important;
    max-width: calc(100vw - 80px) !important;
    height: auto !important;
    max-height: calc(100vh - 80px) !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translate(-50%, -50%) !important;
    -webkit-transform: translate(-50%, -50%) !important;
    overflow: visible !important;
    z-index: 2147483700 !important;
    pointer-events: auto !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-content,
html body .modal.modal-pos.modal-pos-qty .modal-pos-product.modal-pos-product--qty {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: calc(100vh - 80px) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border-radius: 18px !important;
    pointer-events: auto !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-pos-product.modal-pos-product--qty {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    min-height: 340px !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-pos-product.modal-pos-product--qty .modal-pos-product-img {
    flex: 0 0 250px !important;
    width: 250px !important;
    min-width: 250px !important;
    max-width: 250px !important;
    min-height: 340px !important;
    max-height: calc(100vh - 100px) !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-pos-product.modal-pos-product--qty .modal-pos-product-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-height: calc(100vh - 100px) !important;
    overflow: auto !important;
    padding: 26px !important;
    box-sizing: border-box !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info .row.g-3 {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info .row.g-3 > .col-4,
html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info .row.g-3 > .col-8 {
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info button,
html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info .btn {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    min-height: 62px !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info button.mltv-focused,
html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info button.mltv-focused,
html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info button:focus,
html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info .btn:focus {
    outline: 4px solid #6ee6ff !important;
    box-shadow: 0 0 0 5px rgba(110,230,255,.45), 0 0 18px rgba(110,230,255,.9) !important;
}

/* =========================================================
   TV portal:  Order MenuItem Add popup final containment.
   Keeps Add/Cancel visible and blocks background while popup is active.
   ========================================================= */
html body.mltv-modal-open {
    overflow: hidden !important;
}

html body .modal.modal-pos.modal-pos-qty.show,
html body .modal.modal-pos.modal-pos-qty.d-block,
html body .modal.modal-pos.modal-pos-qty.mltv-active-modal {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
    background: rgba(0,0,0,.72) !important;
    z-index: 2147483600 !important;
    pointer-events: auto !important;
}

html body .modal.modal-pos.modal-pos-qty.show > .modal-dialog,
html body .modal.modal-pos.modal-pos-qty.d-block > .modal-dialog,
html body .modal.modal-pos.modal-pos-qty.mltv-active-modal > .modal-dialog {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    width: 860px !important;
    max-width: calc(100vw - 60px) !important;
    height: auto !important;
    max-height: calc(100vh - 60px) !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translate(-50%, -50%) !important;
    -webkit-transform: translate(-50%, -50%) !important;
    overflow: visible !important;
    z-index: 2147483700 !important;
    pointer-events: auto !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-content,
html body .modal.modal-pos.modal-pos-qty .modal-pos-product.modal-pos-product--qty {
    width: 100% !important;
    max-width: 100% !important;
    height: 380px !important;
    min-height: 320px !important;
    max-height: calc(100vh - 60px) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border-radius: 18px !important;
    background: #12213f !important;
    pointer-events: auto !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-pos-product.modal-pos-product--qty {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
    align-items: stretch !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-pos-product.modal-pos-product--qty .modal-pos-product-img {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    -webkit-box-flex: 0 !important;
    -ms-flex: 0 0 300px !important;
    flex: 0 0 300px !important;
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    height: 380px !important;
    max-height: calc(100vh - 60px) !important;
    overflow: hidden !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-pos-product.modal-pos-product--qty .modal-pos-product-img .img {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-pos-product.modal-pos-product--qty .modal-pos-product-info {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    height: 380px !important;
    max-height: calc(100vh - 60px) !important;
    overflow: auto !important;
    padding: 30px !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info .row.g-3 {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 16px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info .row.g-3 > .col-4,
html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info .row.g-3 > .col-8 {
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 1 0 !important;
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info button,
html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info .btn {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    min-height: 62px !important;
    height: 62px !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info button.mltv-focused,
html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info .btn.mltv-focused,
html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info button:focus,
html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info .btn:focus {
    outline: 4px solid #6ee6ff !important;
    box-shadow: 0 0 0 5px rgba(110,230,255,.45), 0 0 18px rgba(110,230,255,.9) !important;
}

/* =========================================================
   TV portal:  Order popup containment - viewport centered modal.
   Focuses only on making order popups fully visible and usable.
   Chrome 58/68 safe: no CSS grid, no min()/max() functions.
   ========================================================= */
html body .modal.modal-pos.show,
html body .modal.modal-pos.d-block,
html body .modal.modal-pos.mltv-active-modal {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 40px !important;
    box-sizing: border-box !important;
    background: rgba(0,0,0,.72) !important;
    z-index: 2147483600 !important;
    pointer-events: auto !important;
}

html body .modal.modal-pos.show > .modal-dialog,
html body .modal.modal-pos.d-block > .modal-dialog,
html body .modal.modal-pos.mltv-active-modal > .modal-dialog,
html body .modal.modal-pos.modal-pos-qty.show > .modal-dialog,
html body .modal.modal-pos.modal-pos-qty.d-block > .modal-dialog,
html body .modal.modal-pos.modal-pos-qty.mltv-active-modal > .modal-dialog {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    width: 860px !important;
    max-width: calc(100vw - 100px) !important;
    height: auto !important;
    max-height: calc(100vh - 100px) !important;
    overflow: visible !important;
    z-index: 2147483700 !important;
    pointer-events: auto !important;
}

html body .modal.modal-pos .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    max-height: calc(100vh - 100px) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    border-radius: 18px !important;
    background: #12213f !important;
    pointer-events: auto !important;
}

html body .modal.modal-pos .modal-pos-product {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 320px !important;
    max-height: calc(100vh - 100px) !important;
    margin: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: #12213f !important;
    pointer-events: auto !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-content,
html body .modal.modal-pos.modal-pos-qty .modal-pos-product.modal-pos-product--qty {
    height: auto !important;
    min-height: 340px !important;
    max-height: calc(100vh - 100px) !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-pos-product.modal-pos-product--qty {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
    -webkit-box-align: stretch !important;
    -ms-flex-align: stretch !important;
    align-items: stretch !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-pos-product.modal-pos-product--qty .modal-pos-product-img {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    -webkit-box-flex: 0 !important;
    -ms-flex: 0 0 300px !important;
    flex: 0 0 300px !important;
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    min-height: 340px !important;
    height: auto !important;
    max-height: calc(100vh - 100px) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-pos-product.modal-pos-product--qty .modal-pos-product-info {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 340px !important;
    height: auto !important;
    max-height: calc(100vh - 100px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 30px !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info .row.g-3 {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    gap: 16px !important;
    visibility: visible !important;
    opacity: 1 !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info .row.g-3 > .col-4,
html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info .row.g-3 > .col-8 {
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 1 0 !important;
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info button,
html body .modal.modal-pos.modal-pos-qty .modal-pos-product-info .btn {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    min-height: 64px !important;
    height: 64px !important;
}

@media (max-height: 520px) {
    html body .modal.modal-pos.show,
    html body .modal.modal-pos.d-block,
    html body .modal.modal-pos.mltv-active-modal {
        padding: 20px !important;
    }
    html body .modal.modal-pos.show > .modal-dialog,
    html body .modal.modal-pos.d-block > .modal-dialog,
    html body .modal.modal-pos.mltv-active-modal > .modal-dialog {
        max-height: calc(100vh - 40px) !important;
    }
    html body .modal.modal-pos.modal-pos-qty .modal-pos-product.modal-pos-product--qty .modal-pos-product-img,
    html body .modal.modal-pos.modal-pos-qty .modal-pos-product.modal-pos-product--qty .modal-pos-product-info {
        min-height: 280px !important;
        max-height: calc(100vh - 40px) !important;
    }
}


/* =========================================================
   TV portal:  Orders Add MenuItem popup real centered modal.
   This overrides earlier fixed/absolute modal rules only for Order popups.
   Chrome 58/68 safe.
   ========================================================= */
html body.mltv-modal-open {
    overflow: hidden !important;
}
html body .modal.modal-pos.show,
html body .modal.modal-pos.d-block,
html body .modal.modal-pos.mltv-active-modal {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: rgba(0,0,0,.74) !important;
    z-index: 2147483600 !important;
    pointer-events: auto !important;
}
html body .modal.modal-pos.mltv-active-modal > .modal-dialog,
html body .modal.modal-pos.modal-pos-qty.mltv-active-modal > .modal-dialog {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    -webkit-transform: none !important;
    width: 720px !important;
    height: 330px !important;
    max-width: 760px !important;
    max-height: 330px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: block !important;
    overflow: visible !important;
    pointer-events: auto !important;
    z-index: 2147483700 !important;
}
html body .modal.modal-pos.mltv-active-modal:not(.modal-pos-qty) > .modal-dialog {
    height: 360px !important;
    max-height: 360px !important;
}
html body .modal.modal-pos.mltv-active-modal .modal-content {
    width: 100% !important;
    height: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: block !important;
    overflow: hidden !important;
    background: #12213f !important;
    border-radius: 18px !important;
    pointer-events: auto !important;
}
html body .modal.modal-pos.modal-pos-qty.mltv-active-modal .modal-pos-product,
html body .modal.modal-pos.modal-pos-qty.mltv-active-modal .modal-pos-product--qty {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: 760px !important;
    height: 330px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 760px !important;
    max-height: 330px !important;
    margin: 0 !important;
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
    -ms-flex-direction: row !important;
    flex-direction: row !important;
    overflow: hidden !important;
    background: #12213f !important;
    pointer-events: auto !important;
}
html body .modal.modal-pos.modal-pos-qty.mltv-active-modal .modal-pos-product-img {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    -webkit-box-flex: 0 !important;
    -ms-flex: 0 0 230px !important;
    flex: 0 0 230px !important;
    width: 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
    height: 330px !important;
    min-height: 0 !important;
    max-height: 330px !important;
    overflow: hidden !important;
}
html body .modal.modal-pos.modal-pos-qty.mltv-active-modal .modal-pos-product-img .img {
    width: 230px !important;
    height: 330px !important;
    min-height: 0 !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}
html body .modal.modal-pos.modal-pos-qty.mltv-active-modal .modal-pos-product-info {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 1 auto !important;
    flex: 1 1 auto !important;
    width: 530px !important;
    height: 330px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-height: 330px !important;
    padding: 28px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    pointer-events: auto !important;
}
html body .modal.modal-pos.modal-pos-qty.mltv-active-modal .modal-pos-product-info .row.g-3 {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-wrap: nowrap !important;
    flex-wrap: nowrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 18px !important;
}
html body .modal.modal-pos.modal-pos-qty.mltv-active-modal .modal-pos-product-info .row.g-3 > .col-4,
html body .modal.modal-pos.modal-pos-qty.mltv-active-modal .modal-pos-product-info .row.g-3 > .col-8 {
    -webkit-box-flex: 1 !important;
    -ms-flex: 1 1 0 !important;
    flex: 1 1 0 !important;
    width: auto !important;
    max-width: none !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
}
html body .modal.modal-pos.modal-pos-qty.mltv-active-modal .modal-pos-product-info button,
html body .modal.modal-pos.modal-pos-qty.mltv-active-modal .modal-pos-product-info .btn {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-box-align: center !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    height: 64px !important;
    min-height: 64px !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    border-radius: 12px !important;
}
html body .modal.modal-pos.modal-pos-qty.mltv-active-modal .modal-pos-product-info button.mltv-focused,
html body .modal.modal-pos.modal-pos-qty.mltv-active-modal .modal-pos-product-info button:focus {
    outline: 4px solid #6ee6ff !important;
    box-shadow: 0 0 0 5px rgba(110,230,255,.45), 0 0 18px rgba(110,230,255,.9) !important;
}

/* Prompt/confirmation popups use the same centered host, but compact readable content. */
html body .modal.modal-pos.mltv-active-modal:not(.modal-pos-qty) .modal-pos-product {
    position: relative !important;
    width: 760px !important;
    height: 360px !important;
    min-height: 0 !important;
    max-height: 360px !important;
    overflow: hidden !important;
    background: #12213f !important;
}
html body .modal.modal-pos.mltv-active-modal:not(.modal-pos-qty) .modal-pos-product-img {
    position: absolute !important;
    left: 28px !important;
    top: 28px !important;
    width: 88px !important;
    height: 88px !important;
    min-width: 88px !important;
    max-width: 88px !important;
}
html body .modal.modal-pos.mltv-active-modal:not(.modal-pos-qty) .modal-pos-product-info,
html body .modal.modal-pos.mltv-active-modal:not(.modal-pos-qty) .card-body {
    position: absolute !important;
    left: 132px !important;
    top: 28px !important;
    right: 28px !important;
    bottom: 28px !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* =========================================================
   TV portal: Orders Add Item popup: isolated true modal surface
   Chrome 58/68 safe. This avoids legacy Bootstrap modal clipping.
   ========================================================= */
body .mltv-order-popup-overlay {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: rgba(0,0,0,.72) !important;
    overflow: hidden !important;
    z-index: 2147483600 !important;
    pointer-events: auto !important;
}

body .mltv-order-popup-panel {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    width: 860px !important;
    height: 390px !important;
    max-width: calc(100vw - 96px) !important;
    max-height: calc(100vh - 96px) !important;
    margin: 0 !important;
    -webkit-transform: translate(-50%, -50%) !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: #12213f !important;
    border: 1px solid rgba(76, 177, 255, .55) !important;
    border-radius: 18px !important;
    box-shadow: 0 28px 70px rgba(0,0,0,.52) !important;
    color: #fff !important;
    z-index: 2147483700 !important;
    pointer-events: auto !important;
}

body .mltv-order-popup-image {
    flex: 0 0 280px !important;
    width: 280px !important;
    min-width: 280px !important;
    height: 100% !important;
    overflow: hidden !important;
    background: rgba(255,255,255,.08) !important;
    position: relative !important;
}

body .mltv-order-popup-image .img {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-position: center center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

body .mltv-order-popup-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 100% !important;
    padding: 42px 40px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    overflow: hidden !important;
}

body .mltv-order-popup-title {
    font-size: 24px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    margin: 0 0 22px 0 !important;
    color: #fff !important;
}

body .mltv-order-popup-qty {
    font-size: 23px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    margin-bottom: 22px !important;
    color: #fff !important;
}

body .mltv-order-popup-rule {
    width: 100% !important;
    border: 0 !important;
    border-top: 1px solid rgba(255,255,255,.22) !important;
    margin: 0 0 28px 0 !important;
    opacity: 1 !important;
}

body .mltv-order-popup-restricted-message {
    font-size: 24px !important;
    line-height: 1.3 !important;
    font-weight: 800 !important;
    color: #ffe48a !important;
    background: rgba(255, 205, 80, .12) !important;
    border: 1px solid rgba(255, 205, 80, .34) !important;
    border-radius: 12px !important;
    padding: 16px 18px !important;
    margin: 0 0 24px 0 !important;
}

body .mltv-order-popup-actions {
    display: flex !important;
    gap: 20px !important;
    align-items: stretch !important;
    width: 100% !important;
}

body .mltv-order-popup-button {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 64px !important;
    height: 76px !important;
    padding: 0 18px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
    pointer-events: auto !important;
}

body .mltv-order-popup-overlay .tv-selected,
body .mltv-order-popup-overlay .nav-active,
body .mltv-order-popup-overlay .keyboard-focus,
body .mltv-order-popup-overlay .modal-tv-focused,
body .mltv-order-popup-overlay .mltv-focused {
    outline: 4px solid #78eaff !important;
    box-shadow: 0 0 0 6px rgba(120,234,255,.35), 0 0 26px rgba(120,234,255,.9) !important;
}

/* =========================================================
   TV portal: Orders Submit Prompt: isolated centered modal
   Scope: Submit Order confirmation prompt only. Does not touch Add Item popup.
   Chrome 58/68 safe CSS.
   ========================================================= */
html body .mltv-submit-popup-overlay {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: rgba(0,0,0,.72) !important;
    overflow: hidden !important;
    z-index: 2147483400 !important;
    pointer-events: auto !important;
}
html body .mltv-submit-popup-panel {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    width: 1080px !important;
    min-height: 720px !important;
    max-width: calc(100vw - 120px) !important;
    max-height: calc(100vh - 120px) !important;
    margin: 0 !important;
    -webkit-transform: translate(-50%, -50%) !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: #12213f !important;
    border: 1px solid rgba(76, 177, 255, .65) !important;
    border-radius: 18px !important;
    box-shadow: 0 28px 70px rgba(0,0,0,.55) !important;
    color: #fff !important;
    z-index: 2147483500 !important;
    pointer-events: auto !important;
}
html body .mltv-submit-popup-header {
    display: flex !important;
    align-items: center !important;
    gap: 22px !important;
    padding: 28px 36px 18px 36px !important;
    border-bottom: 1px solid rgba(255,255,255,.16) !important;
    flex: 0 0 auto !important;
}
html body .mltv-submit-popup-icon {
    width: 72px !important;
    height: 72px !important;
    min-width: 72px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.12) !important;
    overflow: hidden !important;
    position: relative !important;
}
html body .mltv-submit-popup-icon .img {
    position: absolute !important;
    left: 10px !important;
    top: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    background-position: center center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}
html body .mltv-submit-popup-title {
    font-size: 32px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: #fff !important;
}
html body .mltv-submit-popup-body {
    padding: 24px 36px 10px 36px !important;
    overflow: hidden !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

html body .mltv-submit-popup-context-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 56px !important;
    row-gap: 8px !important;
    margin-bottom: 14px !important;
}
html body .mltv-submit-popup-context-grid .mltv-submit-popup-row {
    margin-bottom: 0 !important;
    min-width: 0 !important;
}
html body .mltv-submit-popup-context-grid .mltv-submit-popup-row span {
    min-width: 150px !important;
    white-space: nowrap !important;
}
html body .mltv-submit-popup-context-grid .mltv-submit-popup-row strong {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
html body .mltv-submit-popup-row {
    display: flex !important;
    align-items: baseline !important;
    gap: 22px !important;
    margin-bottom: 10px !important;
    font-size: 25px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
}
html body .mltv-submit-popup-row span { min-width: 190px !important; color: rgba(255,255,255,.9) !important; }
html body .mltv-submit-popup-row strong { font-weight: 800 !important; color: #fff !important; }
html body .mltv-submit-popup-review {
    max-height: 275px !important;
    overflow: hidden !important;
    margin: 16px 0 18px 0 !important;
    padding: 10px 0 10px 20px !important;
    border-top: 1px solid rgba(255,255,255,.14) !important;
    border-bottom: 1px solid rgba(255,255,255,.14) !important;
    list-style-position: outside !important;
    box-sizing: border-box !important;
}
html body .mltv-submit-popup-review-item {
    display: inline-block !important;
    vertical-align: top !important;
    width: 48% !important;
    padding-right: 24px !important;
    box-sizing: border-box !important;
    font-size: 22px !important;
    line-height: 1.24 !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 4px 0 !important;
}
html body .mltv-submit-popup-review-item::before {
    content: "•" !important;
    display: inline-block !important;
    width: 18px !important;
    margin-left: -18px !important;
}
html body .mltv-submit-popup-message {
    font-size: 25px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin: 0 !important;
}
html body .mltv-submit-popup-actions {
    display: flex !important;
    gap: 18px !important;
    width: 100% !important;
    padding: 18px 34px 28px 34px !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
}
html body .mltv-submit-popup-button {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 64px !important;
    height: 76px !important;
    padding: 0 24px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
    pointer-events: auto !important;
}
html body .mltv-submit-popup-overlay .tv-selected,
html body .mltv-submit-popup-overlay .nav-active,
html body .mltv-submit-popup-overlay .keyboard-focus,
html body .mltv-submit-popup-overlay .modal-tv-focused,
html body .mltv-submit-popup-overlay .mltv-submit-focused {
    outline: 4px solid #78eaff !important;
    box-shadow: 0 0 0 6px rgba(120,234,255,.35), 0 0 26px rgba(120,234,255,.9) !important;
}

/* =========================================================
   TV portal:  Review Delete confirmation popup only.
   Baseline TV portal:  Submit Order popup is already fixed; Add Item popup is fixed.
   This block does not target Add Item or Submit Order popups.
   ========================================================= */
html body .mltv-delete-popup-overlay {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: rgba(0,0,0,.72) !important;
    overflow: hidden !important;
    z-index: 2147483420 !important;
    pointer-events: auto !important;
}
html body .mltv-delete-popup-panel {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    width: 760px !important;
    max-width: calc(100vw - 120px) !important;
    max-height: calc(100vh - 120px) !important;
    margin: 0 !important;
    -webkit-transform: translate(-50%, -50%) !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: #12213f !important;
    border: 1px solid rgba(76, 177, 255, .65) !important;
    border-radius: 18px !important;
    box-shadow: 0 28px 70px rgba(0,0,0,.55) !important;
    color: #fff !important;
    z-index: 2147483520 !important;
    pointer-events: auto !important;
}
html body .mltv-delete-popup-header {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 28px 36px 18px 36px !important;
    border-bottom: 1px solid rgba(255,255,255,.16) !important;
    flex: 0 0 auto !important;
}
html body .mltv-delete-popup-icon {
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.12) !important;
    overflow: hidden !important;
    position: relative !important;
}
html body .mltv-delete-popup-icon .img {
    position: absolute !important;
    left: 10px !important;
    top: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    background-position: center center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}
html body .mltv-delete-popup-title {
    font-size: 32px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: #fff !important;
}
html body .mltv-delete-popup-body {
    padding: 26px 36px 12px 36px !important;
    overflow: hidden !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}
html body .mltv-delete-popup-message {
    font-size: 27px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin: 0 0 18px 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
}
html body .mltv-delete-popup-item {
    font-size: 23px !important;
    line-height: 1.24 !important;
    font-weight: 700 !important;
    color: rgba(255,255,255,.88) !important;
    padding: 12px 0 4px 0 !important;
    border-top: 1px solid rgba(255,255,255,.14) !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
}
html body .mltv-delete-popup-actions {
    display: flex !important;
    gap: 18px !important;
    width: 100% !important;
    padding: 22px 36px 32px 36px !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
}
html body .mltv-delete-popup-button {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 76px !important;
    height: 76px !important;
    padding: 0 24px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
    pointer-events: auto !important;
}
html body .mltv-delete-popup-overlay .tv-selected,
html body .mltv-delete-popup-overlay .nav-active,
html body .mltv-delete-popup-overlay .keyboard-focus,
html body .mltv-delete-popup-overlay .modal-tv-focused,
html body .mltv-delete-popup-overlay .mltv-delete-focused {
    outline: 4px solid #78eaff !important;
    box-shadow: 0 0 0 6px rgba(120,234,255,.35), 0 0 26px rgba(120,234,255,.9) !important;
}


/* =========================================================
   TV portal:  Home button exit confirmation popup only.
   Baseline TV portal: keeps Add Item, Delete, and Submit popups fixed.
   This block only targets .mltv-exit-popup-*.
   ========================================================= */
html body .mltv-exit-popup-overlay {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: rgba(0,0,0,.72) !important;
    overflow: hidden !important;
    z-index: 2147483440 !important;
    pointer-events: auto !important;
}
html body .mltv-exit-popup-panel {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    width: 760px !important;
    max-width: calc(100vw - 120px) !important;
    max-height: calc(100vh - 120px) !important;
    margin: 0 !important;
    -webkit-transform: translate(-50%, -50%) !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: #12213f !important;
    border: 1px solid rgba(76, 177, 255, .65) !important;
    border-radius: 18px !important;
    box-shadow: 0 28px 70px rgba(0,0,0,.55) !important;
    color: #fff !important;
    z-index: 2147483540 !important;
    pointer-events: auto !important;
}
html body .mltv-exit-popup-header {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 28px 36px 18px 36px !important;
    border-bottom: 1px solid rgba(255,255,255,.16) !important;
    flex: 0 0 auto !important;
}
html body .mltv-exit-popup-icon {
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.12) !important;
    overflow: hidden !important;
    position: relative !important;
}
html body .mltv-exit-popup-icon .img {
    position: absolute !important;
    left: 10px !important;
    top: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    background-position: center center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}
html body .mltv-exit-popup-title {
    font-size: 32px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: #fff !important;
}
html body .mltv-exit-popup-body {
    padding: 30px 36px 16px 36px !important;
    overflow: hidden !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
}
html body .mltv-exit-popup-message {
    font-size: 28px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    color: #fff !important;
    margin: 0 !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
}
html body .mltv-exit-popup-actions {
    display: flex !important;
    gap: 18px !important;
    width: 100% !important;
    padding: 22px 36px 32px 36px !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
}
html body .mltv-exit-popup-button {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 76px !important;
    height: 76px !important;
    padding: 0 24px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
    pointer-events: auto !important;
}
html body .mltv-exit-popup-overlay .tv-selected,
html body .mltv-exit-popup-overlay .nav-active,
html body .mltv-exit-popup-overlay .keyboard-focus,
html body .mltv-exit-popup-overlay .modal-tv-focused,
html body .mltv-exit-popup-overlay .mltv-exit-focused {
    outline: 4px solid #78eaff !important;
    box-shadow: 0 0 0 6px rgba(120,234,255,.35), 0 0 26px rgba(120,234,255,.9) !important;
}


/* =========================================================
   TV portal:  iframe exit confirmation prompt containment only.
   Does not target Add Item, Delete, or Submit Order popups.
   ========================================================= */
html body #iframeExitPrompt.show,
html body #iframeExitPrompt.d-block {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: block !important;
    overflow: hidden !important;
    background: rgba(0,0,0,.72) !important;
    z-index: 2147483440 !important;
    pointer-events: auto !important;
}
html body #iframeExitPrompt.show .modal-dialog,
html body #iframeExitPrompt.d-block .modal-dialog {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    width: 760px !important;
    max-width: calc(100vw - 120px) !important;
    max-height: calc(100vh - 120px) !important;
    margin: 0 !important;
    -webkit-transform: translate(-50%, -50%) !important;
    transform: translate(-50%, -50%) !important;
    overflow: visible !important;
    z-index: 2147483540 !important;
}
html body #iframeExitPrompt.show .modal-content,
html body #iframeExitPrompt.d-block .modal-content,
html body #iframeExitPrompt.show .modal-pos-product,
html body #iframeExitPrompt.d-block .modal-pos-product {
    max-height: calc(100vh - 120px) !important;
    overflow: hidden !important;
    border-radius: 18px !important;
}
html body #iframeExitPrompt .btn.nav-active,
html body #iframeExitPrompt .btn.tv-selected,
html body #iframeExitPrompt .btn.keyboard-focus,
html body #iframeExitPrompt .btn:focus {
    outline: 4px solid #78eaff !important;
    box-shadow: 0 0 0 6px rgba(120,234,255,.35), 0 0 26px rgba(120,234,255,.9) !important;
}

/* =========================================================
   TV portal: - Orders selection ring restore without navigation changes
   Baseline: TV portal: stable navigation.
   Scope: visual selection ring only for Order screen Category, MenuItem,
          and non-popup Order buttons.
   Does not touch Add Item/Delete/Submit/Home confirmation popup styling.
   Does not change JS navigation behavior or element layout.
   ========================================================= */
html body .orders-page-shell .orders-category-link.tv-selected,
html body .orders-page-shell .orders-category-link.nav-active,
html body .orders-page-shell .orders-category-link.keyboard-focus,
html body .orders-page-shell .orders-category-link:focus,
html body .orders-page-shell .orders-category-link:focus-visible,
html body .orders-page-shell .orders-category-link.mltv-focused,
html body .orders-page-shell .orders-category-link.mltv-focused,
html body .orders-page-shell .orders-category-link.mltv-focused,
html body .orders-page-shell .orders-category-link.mltv-focused {
    outline: 4px solid #78eaff !important;
    outline-offset: 0 !important;
    box-shadow: 0 0 0 6px rgba(120,234,255,.35), 0 0 26px rgba(120,234,255,.9) !important;
}

html body .orders-page-shell .orders-item-card.tv-selected,
html body .orders-page-shell .orders-item-card.nav-active,
html body .orders-page-shell .orders-item-card.keyboard-focus,
html body .orders-page-shell .orders-item-card:focus,
html body .orders-page-shell .orders-item-card:focus-visible,
html body .orders-page-shell .orders-item-card.mltv-focused,
html body .orders-page-shell .orders-item-card.mltv-focused {
    outline: 4px solid #78eaff !important;
    outline-offset: 0 !important;
    box-shadow: 0 0 0 6px rgba(120,234,255,.35), 0 0 26px rgba(120,234,255,.9) !important;
}

html body .orders-page-shell button.focusable.tv-selected:not(.mltv-order-popup-button):not(.mltv-submit-popup-button):not(.mltv-delete-popup-button):not(.mltv-exit-popup-button),
html body .orders-page-shell button.focusable.nav-active:not(.mltv-order-popup-button):not(.mltv-submit-popup-button):not(.mltv-delete-popup-button):not(.mltv-exit-popup-button),
html body .orders-page-shell button.focusable.keyboard-focus:not(.mltv-order-popup-button):not(.mltv-submit-popup-button):not(.mltv-delete-popup-button):not(.mltv-exit-popup-button),
html body .orders-page-shell button.focusable:focus:not(.mltv-order-popup-button):not(.mltv-submit-popup-button):not(.mltv-delete-popup-button):not(.mltv-exit-popup-button),
html body .orders-page-shell button.focusable:focus-visible:not(.mltv-order-popup-button):not(.mltv-submit-popup-button):not(.mltv-delete-popup-button):not(.mltv-exit-popup-button),
html body .orders-page-shell .orders-review-delete-btn.tv-selected,
html body .orders-page-shell .orders-review-delete-btn.nav-active,
html body .orders-page-shell .orders-review-delete-btn.keyboard-focus,
html body .orders-page-shell .orders-review-delete-btn:focus,
html body .orders-page-shell .orders-review-delete-btn:focus-visible {
    outline: 4px solid #78eaff !important;
    outline-offset: 0 !important;
    box-shadow: 0 0 0 6px rgba(120,234,255,.35), 0 0 26px rgba(120,234,255,.9) !important;
}

/* Keep popup button rings owned by their existing popup-specific CSS blocks. */

/* =========================================================
   TV portal: - One visible Orders page selection ring.
   Scope: Order screen non-popup Category/MenuItem/Review/Footer only.
   Popup button rings are untouched.
   ========================================================= */
html body .orders-page-shell .orders-category-link:not(.mltv-current),
html body .orders-page-shell .orders-item-card:not(.mltv-current),
html body .orders-page-shell .orders-review-delete-btn:not(.mltv-current),
html body .orders-page-shell [data-nav-id="footer-submit"]:not(.mltv-current),
html body .orders-page-shell [data-nav-id="footer-home"]:not(.mltv-current) {
    outline: none !important;
    box-shadow: none !important;
}

html body .orders-page-shell .orders-category-link.mltv-current,
html body .orders-page-shell .orders-item-card.mltv-current,
html body .orders-page-shell .orders-review-delete-btn.mltv-current,
html body .orders-page-shell [data-nav-id="footer-submit"].mltv-current,
html body .orders-page-shell [data-nav-id="footer-home"].mltv-current {
    outline: 4px solid #78eaff !important;
    outline-offset: 0 !important;
    box-shadow: 0 0 0 6px rgba(120,234,255,.35), 0 0 26px rgba(120,234,255,.9) !important;
}

html body .orders-page-shell .orders-category-link.active:not(.mltv-current) {
    background: rgba(120,234,255,.16) !important;
    outline: none !important;
    box-shadow: none !important;
}

/* TV portal: iframe host full viewport shell. The host page is intentionally invisible except for the iframe. */
.mltv-iframe-host-fullpage {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: #111;
    z-index: 1;
}

.mltv-iframe-host-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: #111;
}


/* TV portal:  clean iframe host and Index exit prompt using classes only. */
html, body {
    min-width: 100%;
    min-height: 100%;
}

.mltv-iframe-host-fullpage {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #111 !important;
    z-index: 1 !important;
}

.mltv-iframe-host-frame {
    display: block !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: #111 !important;
}


/* =========================================================
   Iframe exit prompt root host
   Root cause: the iframe exit prompt was rendered inside the Home/Index page
   layout. In Chrome 58, position:fixed is captured by transformed/clipped
   ancestors, so the dialog was centered against the wrong containing block.
   The prompt is now hosted directly under body; centering remains CSS-owned.
   ========================================================= */
#mltv-iframe-exit-host {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    pointer-events: none !important;
    z-index: 2147483300 !important;
}

#mltv-iframe-exit-host > .mltv-iframe-exit-overlay {
    pointer-events: auto !important;
}

html body .mltv-iframe-exit-overlay {
    display: none !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(0,0,0,.72) !important;
    z-index: 2147483400 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

html body .mltv-iframe-exit-overlay.show,
html body .mltv-iframe-exit-overlay.d-block {
    display: block !important;
    pointer-events: auto !important;
}

html body .mltv-iframe-exit-panel {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    width: 760px !important;
    max-width: calc(100vw - 120px) !important;
    min-height: 310px !important;
    max-height: calc(100vh - 120px) !important;
    margin: 0 !important;
    padding: 0 !important;
    -webkit-transform: translate(-50%, -50%) !important;
    transform: translate(-50%, -50%) !important;
    background: #12213f !important;
    border: 1px solid rgba(76,177,255,.65) !important;
    border-radius: 18px !important;
    box-shadow: 0 28px 70px rgba(0,0,0,.55) !important;
    color: #fff !important;
    z-index: 2147483500 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

html body .mltv-iframe-exit-header {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 28px 36px 18px 36px !important;
    border-bottom: 1px solid rgba(255,255,255,.16) !important;
}

html body .mltv-iframe-exit-icon {
    width: 68px !important;
    height: 68px !important;
    min-width: 68px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.12) !important;
    overflow: hidden !important;
    position: relative !important;
}

html body .mltv-iframe-exit-icon .img {
    position: absolute !important;
    left: 10px !important;
    top: 10px !important;
    right: 10px !important;
    bottom: 10px !important;
    background-image: url(/img/icon/question.svg) !important;
    background-position: center center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

html body .mltv-iframe-exit-title {
    margin: 0 !important;
    color: #fff !important;
    font-size: 32px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
}

html body .mltv-iframe-exit-body {
    padding: 36px 36px 16px 36px !important;
}

html body .mltv-iframe-exit-message {
    color: #fff !important;
    font-size: 28px !important;
    line-height: 1.28 !important;
    font-weight: 700 !important;
}

html body .mltv-iframe-exit-actions {
    display: flex !important;
    gap: 18px !important;
    width: 100% !important;
    padding: 22px 36px 32px 36px !important;
    box-sizing: border-box !important;
}

html body .mltv-iframe-exit-button {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 76px !important;
    min-height: 76px !important;
    padding: 0 24px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    pointer-events: auto !important;
}

html body .mltv-iframe-exit-overlay .tv-selected,
html body .mltv-iframe-exit-overlay .nav-active,
html body .mltv-iframe-exit-overlay .keyboard-focus,
html body .mltv-iframe-exit-overlay .modal-tv-focused,
html body .mltv-iframe-exit-overlay .ml-tv-current-focus-source {
    outline: 4px solid #78eaff !important;
    box-shadow: 0 0 0 6px rgba(120,234,255,.35), 0 0 26px rgba(120,234,255,.9) !important;
}

/* Shared popup foundation. Keep legacy panel classes; centralize modal ownership marker. */
html body [data-mltv-popup="active"] {
    pointer-events: auto !important;
}
html body [data-mltv-popup="active"] button {
    pointer-events: auto !important;
}
html body [data-mltv-popup="active"] .tv-selected,
html body [data-mltv-popup="active"] .nav-active,
html body [data-mltv-popup="active"] .keyboard-focus,
html body [data-mltv-popup="active"] .modal-tv-focused,
html body [data-mltv-popup="active"] .mltv-focused {
    outline: 4px solid #fff !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 6px rgba(255, 193, 7, .92) !important;
}

/* =========================================================
   Iframe host and exit prompt containment
   Why: IFrameHost is a test shell and must not be wrapped by the normal
   app header/content-shell. The exit prompt must be centered by the single
   popup host, not by page columns or focused launch buttons. Chrome 68-safe.
   ========================================================= */
html body #mltv-iframe-exit-host {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    z-index: 2147483300 !important;
    pointer-events: none !important;
    -webkit-transform: none !important;
    transform: none !important;
}

html body #mltv-iframe-exit-host .mltv-iframe-exit-overlay.show,
html body #mltv-iframe-exit-host .mltv-iframe-exit-overlay.d-block {
    display: -ms-flexbox !important;
    display: flex !important;
    -ms-flex-align: center !important;
    align-items: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    pointer-events: auto !important;
    -webkit-transform: none !important;
    transform: none !important;
}

html body #mltv-iframe-exit-host .mltv-iframe-exit-panel {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    width: 760px !important;
    max-width: 760px !important;
    min-height: 310px !important;
    -webkit-transform: none !important;
    transform: none !important;
}


/* Guest order popup uses the shared popup host so positioning and keyboard scope match other TV dialogs. */
html body .mltv-guest-popup-overlay {
    position: fixed !important;
    left: 0 !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: rgba(0,0,0,.72) !important;
    overflow: hidden !important;
    z-index: 2147483380 !important;
    pointer-events: auto !important;
}

html body .mltv-guest-popup-panel {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    width: 1160px !important;
    max-width: calc(100vw - 120px) !important;
    max-height: calc(100vh - 120px) !important;
    margin: 0 !important;
    -webkit-transform: translate(-50%, -50%) !important;
    transform: translate(-50%, -50%) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    background: #12213f !important;
    border: 1px solid rgba(80,160,255,.9) !important;
    border-radius: 14px !important;
    color: #ffffff !important;
    box-shadow: 0 0 34px rgba(0,0,0,.65) !important;
    pointer-events: auto !important;
}

html body .mltv-guest-popup-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 26px 14px 26px !important;
    border-bottom: 1px solid rgba(255,255,255,.12) !important;
    background: rgba(20,35,66,.92) !important;
}

html body .mltv-guest-popup-title {
    margin: 0 0 4px 0 !important;
    color: #ffffff !important;
    font-size: 18px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    max-width: 620px !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

html body .mltv-guest-popup-subtitle {
    color: rgba(255,255,255,.76) !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    font-weight: 600 !important;
}

html body .mltv-guest-popup-header .mltv-guest-popup-close,
html body .mltv-guest-popup-panel .mltv-guest-popup-close {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 6px 14px !important;
    border-radius: 10px !important;
    font-size: 16px !important;
    line-height: 1.1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

html body .mltv-guest-popup-grid {
    display: grid !important;
    grid-template-columns: 470px 470px !important;
    grid-column-gap: 34px !important;
    grid-row-gap: 18px !important;
    justify-content: center !important;
    align-items: stretch !important;
    padding: 22px 26px 26px 26px !important;
    margin: 0 !important;
    overflow: auto !important;
    max-height: calc(100vh - 260px) !important;
}

html body .mltv-guest-meal-card,
html body button.mltv-guest-meal-card {
    width: 470px !important;
    min-width: 470px !important;
    max-width: 470px !important;
    min-height: 168px !important;
    margin: 0 !important;
    padding: 18px 24px !important;
    text-align: left !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #1454cc, #267aff) !important;
    border: 1px solid rgba(255,255,255,.28) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    display: block !important;
}

html body .mltv-guest-meal-card--unavailable {
    background: linear-gradient(135deg, #3f4651, #596170) !important;
}

html body .mltv-guest-meal-name {
    font-size: 19px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
}

html body .mltv-guest-meal-line {
    height: 5px !important;
    width: 100% !important;
    background: rgba(255,255,255,.55) !important;
    margin-bottom: 12px !important;
}

html body .mltv-guest-meal-fields {
    display: table !important;
    table-layout: fixed !important;
    width: 100% !important;
    margin: 0 !important;
}

html body .mltv-guest-meal-field {
    display: table-cell !important;
    width: 50% !important;
    padding: 0 12px 8px 0 !important;
    box-sizing: border-box !important;
    vertical-align: top !important;
}

html body .mltv-guest-meal-field span {
    display: block !important;
    color: rgba(255,255,255,.9) !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
}

html body .mltv-guest-meal-field strong {
    display: block !important;
    color: #ffffff !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    margin-top: 3px !important;
    white-space: normal !important;
}

html body .mltv-guest-meal-status {
    display: flex !important;
    align-items: center !important;
    color: #ffffff !important;
    font-size: 16px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    margin-top: 4px !important;
}

html body .mltv-guest-meal-status-dot {
    width: 10px !important;
    height: 10px !important;
    margin-right: 10px !important;
    border-radius: 50% !important;
    background: #54ff82 !important;
    box-shadow: 0 0 8px rgba(84,255,130,.75) !important;
}

html body .mltv-guest-popup-overlay .tv-selected,
html body .mltv-guest-popup-overlay .nav-active,
html body .mltv-guest-popup-overlay .keyboard-focus,
html body .mltv-guest-popup-overlay .modal-tv-focused {
    outline: 4px solid #78eaff !important;
    box-shadow: 0 0 0 6px rgba(120,234,255,.35), 0 0 26px rgba(120,234,255,.9) !important;
}

/* =========================================================
   MLT-CSHTML-029: Chrome 68 Orders key ownership + popup sizing
   - Orders key handling is owned by mltv-chrome68.js only.
   - Popup actions are smaller so buttons do not overlap at 1366x768 / Chrome 68.
   - Review bullets are drawn as CSS dots, avoiding encoded bullet glyph issues.
   ========================================================= */
html body .mltv-submit-popup-panel {
    width: 980px !important;
    min-height: 0 !important;
    height: 620px !important;
    max-width: calc(100vw - 90px) !important;
    max-height: calc(100vh - 90px) !important;
}
html body .mltv-submit-popup-header {
    padding: 22px 32px 14px 32px !important;
    gap: 18px !important;
}
html body .mltv-submit-popup-icon {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
}
html body .mltv-submit-popup-title {
    font-size: 30px !important;
}
html body .mltv-submit-popup-body {
    padding: 18px 32px 8px 32px !important;
}
html body .mltv-submit-popup-row {
    font-size: 22px !important;
    line-height: 1.18 !important;
    gap: 12px !important;
    margin-bottom: 6px !important;
}
html body .mltv-submit-popup-context-grid {
    column-gap: 44px !important;
    row-gap: 4px !important;
    margin-bottom: 10px !important;
}
html body .mltv-submit-popup-review {
    max-height: 210px !important;
    margin: 10px 0 12px 0 !important;
    padding: 8px 0 8px 0 !important;
}
html body .mltv-submit-popup-review-item {
    display: inline-block !important;
    width: 49% !important;
    font-size: 20px !important;
    line-height: 1.18 !important;
    padding-left: 20px !important;
    padding-right: 16px !important;
    margin: 3px 0 !important;
    position: relative !important;
}
html body .mltv-submit-popup-review-item::before {
    content: "" !important;
    display: none !important;
}
html body .mltv-submit-popup-bullet {
    position: absolute !important;
    left: 2px !important;
    top: 10px !important;
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: #fff !important;
    display: block !important;
}
html body .mltv-submit-popup-message {
    font-size: 22px !important;
    line-height: 1.22 !important;
}
html body .mltv-submit-popup-actions {
    padding: 12px 30px 22px 30px !important;
    gap: 14px !important;
}
html body .mltv-submit-popup-button {
    min-height: 54px !important;
    height: 62px !important;
    font-size: 20px !important;
    padding: 0 16px !important;
}


/* MLT-CSHTML-033: Chrome 68 submit item marker + SVG category icon parity. */
html body .mltv-submit-popup-review {
    list-style: none !important;
    padding-left: 0 !important;
}
html body .mltv-submit-popup-review-item {
    display: inline-block !important;
    width: 49% !important;
    vertical-align: top !important;
    position: relative !important;
    padding-left: 28px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
}
html body .mltv-submit-popup-review-item::before {
    content: none !important;
    display: none !important;
}
html body .mltv-submit-popup-bullet,
html body .mltv-submit-popup-bullet::before,
html body .mltv-submit-popup-bullet:before {
    content: none !important;
}
html body .mltv-submit-popup-bullet {
    position: absolute !important;
    left: 0 !important;
    top: 2px !important;
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    background: none !important;
    border-radius: 0 !important;
}
html body .mltv-submit-popup-bullet svg {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
    fill: #ffffff !important;
    opacity: .95 !important;
}
html body .mltv-submit-popup-review-item span + span {
    display: inline !important;
}


/* MLT-CSHTML-040: force Guest Order popup cards to expose order user/time/status on Chrome 68 */
html body .mltv-guest-popup-panel .mltv-guest-popup-close {
    flex: 0 0 260px !important;
    width: 260px !important;
    max-width: 260px !important;
    min-width: 260px !important;
    height: 58px !important;
    min-height: 58px !important;
    padding: 0 22px !important;
    font-size: 18px !important;
}
html body .mltv-guest-popup-panel .mltv-guest-meal-card,
html body .mltv-guest-popup-panel button.mltv-guest-meal-card {
    min-height: 190px !important;
    height: 190px !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
html body .mltv-guest-popup-panel .mltv-guest-meal-fields,
html body .mltv-guest-popup-panel .mltv-guest-meal-fields--three {
    display: block !important;
    width: 100% !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
}
html body .mltv-guest-popup-panel .mltv-guest-meal-field {
    display: inline-block !important;
    width: 32% !important;
    padding: 0 8px 6px 0 !important;
    margin: 0 !important;
    vertical-align: top !important;
    box-sizing: border-box !important;
}
html body .mltv-guest-popup-panel .mltv-guest-meal-field span,
html body .mltv-guest-popup-panel .mltv-guest-meal-field strong {
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
html body .mltv-guest-popup-panel .mltv-guest-meal-field span { font-size: 14px !important; line-height: 1.1 !important; }
html body .mltv-guest-popup-panel .mltv-guest-meal-field strong { font-size: 15px !important; line-height: 1.1 !important; margin-top: 3px !important; }
html body .mltv-guest-popup-panel .mltv-guest-meal-status { margin-top: 2px !important; display: flex !important; }

/* MLT-CSHTML-041: Guest popup details must be visible on Chrome 68. */
html body .mltv-guest-popup-panel button.mltv-guest-meal-card-v3 {
    height: 156px !important;
    min-height: 156px !important;
    padding: 16px 20px 14px 20px !important;
    overflow: hidden !important;
}
html body .mltv-guest-popup-panel .mltv-guest-meal-v3-title,
html body .mltv-guest-popup-panel .mltv-guest-meal-v3-line,
html body .mltv-guest-popup-panel .mltv-guest-meal-v3-info,
html body .mltv-guest-popup-panel .mltv-guest-meal-v3-row,
html body .mltv-guest-popup-panel .mltv-guest-meal-v3-row span,
html body .mltv-guest-popup-panel .mltv-guest-meal-v3-row strong {
    display: block;
}
html body .mltv-guest-popup-panel .mltv-guest-meal-v3-title {
    color: #fff !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    line-height: 1.1 !important;
    margin-bottom: 8px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
html body .mltv-guest-popup-panel .mltv-guest-meal-v3-line {
    height: 5px !important;
    background: rgba(255,255,255,.55) !important;
    border-radius: 5px !important;
    margin-bottom: 10px !important;
}
html body .mltv-guest-popup-panel .mltv-guest-meal-v3-row {
    color: #fff !important;
    font-size: 15px !important;
    line-height: 1.15 !important;
    font-weight: 800 !important;
    margin-bottom: 5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}
html body .mltv-guest-popup-panel .mltv-guest-meal-v3-row span {
    display: inline-block !important;
    width: 118px !important;
    color: rgba(255,255,255,.88) !important;
}
html body .mltv-guest-popup-panel .mltv-guest-meal-v3-row strong {
    display: inline-block !important;
    max-width: 300px !important;
    color: #fff !important;
    font-weight: 900 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}


/* MLT-CSHTML-042: Guest popup card visible detail fix.
   Uses v4 classes and CSS2-compatible layout so Chrome 68 cannot collapse the detail rows.
   Also overrides earlier v3/compact button rules and browser cache-sensitive button defaults. */
html body .mltv-guest-popup-panel .mltv-guest-popup-close {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 6px 14px !important;
    font-size: 16px !important;
    line-height: 1.1 !important;
}
html body .mltv-guest-popup-panel .mltv-guest-popup-grid,
html body .mltv-guest-popup-grid {
    display: block !important;
    overflow: auto !important;
    padding: 22px 26px 26px 26px !important;
    max-height: calc(100vh - 260px) !important;
    font-size: 0 !important;
    text-align: center !important;
}
html body .mltv-guest-popup-panel button.mltv-guest-meal-card-v4,
html body button.mltv-guest-meal-card-v4 {
    display: inline-block !important;
    width: 470px !important;
    min-width: 470px !important;
    max-width: 470px !important;
    height: 176px !important;
    min-height: 176px !important;
    max-height: 176px !important;
    margin: 0 16px 18px 16px !important;
    padding: 16px 22px 14px 22px !important;
    vertical-align: top !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    text-align: left !important;
    white-space: normal !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    color: #ffffff !important;
}
html body .mltv-guest-popup-panel .mltv-guest-meal-v4-title {
    display: block !important;
    height: 25px !important;
    line-height: 25px !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    color: #ffffff !important;
    font-size: 20px !important;
    font-weight: 900 !important;
    text-align: left !important;
}
html body .mltv-guest-popup-panel .mltv-guest-meal-v4-rule {
    display: block !important;
    height: 5px !important;
    width: 100% !important;
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
    border-radius: 4px !important;
    background: rgba(255,255,255,.58) !important;
    overflow: hidden !important;
}
html body .mltv-guest-popup-panel .mltv-guest-meal-v4-details {
    display: block !important;
    width: 100% !important;
    height: 94px !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #ffffff !important;
}
html body .mltv-guest-popup-panel .mltv-guest-meal-v4-detail {
    display: block !important;
    width: 100% !important;
    height: 29px !important;
    line-height: 29px !important;
    margin: 0 0 2px 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    text-align: left !important;
}
html body .mltv-guest-popup-panel .mltv-guest-meal-v4-detail span {
    display: inline-block !important;
    width: 122px !important;
    min-width: 122px !important;
    max-width: 122px !important;
    height: 29px !important;
    line-height: 29px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    vertical-align: top !important;
    color: rgba(255,255,255,.86) !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}
html body .mltv-guest-popup-panel .mltv-guest-meal-v4-detail strong {
    display: inline-block !important;
    width: 290px !important;
    max-width: 290px !important;
    height: 29px !important;
    line-height: 29px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    vertical-align: top !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 900 !important;
}
html[dir="rtl"] body .mltv-guest-popup-panel button.mltv-guest-meal-card-v4,
html[dir="rtl"] body .mltv-guest-popup-panel .mltv-guest-meal-v4-title,
html[dir="rtl"] body .mltv-guest-popup-panel .mltv-guest-meal-v4-detail { text-align: right !important; }
html[dir="rtl"] body .mltv-guest-popup-panel .mltv-guest-popup-grid { text-align: center !important; }

/* MLT-CSHTML-043: Guest meal card placeholders restored. Chrome 68-safe duplicated override. */
html body .mltv-guest-popup-panel button.mltv-guest-meal-card-v5,
html body button.mltv-guest-meal-card-v5 { display:inline-block!important; width:470px!important; min-width:470px!important; max-width:470px!important; height:178px!important; min-height:178px!important; max-height:178px!important; padding:16px 22px 14px 22px!important; margin:0 16px 18px 16px!important; vertical-align:top!important; overflow:hidden!important; box-sizing:border-box!important; text-align:left!important; color:#fff!important; white-space:normal!important; }
html body .mltv-guest-popup-panel button.mltv-guest-meal-card-v5 .mltv-guest-meal-name { display:block!important; height:26px!important; line-height:26px!important; margin:0 0 8px 0!important; padding:0!important; overflow:hidden!important; white-space:nowrap!important; text-overflow:ellipsis!important; font-size:20px!important; font-weight:900!important; color:#fff!important; }
html body .mltv-guest-popup-panel button.mltv-guest-meal-card-v5 .mltv-guest-meal-line { display:block!important; height:5px!important; width:100%!important; margin:0 0 10px 0!important; padding:0!important; background:rgba(255,255,255,.58)!important; border-radius:4px!important; }
html body .mltv-guest-popup-panel button.mltv-guest-meal-card-v5 .mltv-guest-meal-fields,
html body .mltv-guest-popup-panel button.mltv-guest-meal-card-v5 .mltv-guest-meal-fields--two { display:block!important; height:45px!important; width:100%!important; margin:0 0 8px 0!important; padding:0!important; overflow:hidden!important; }
html body .mltv-guest-popup-panel button.mltv-guest-meal-card-v5 .mltv-guest-meal-field { display:inline-block!important; width:49%!important; height:45px!important; margin:0!important; padding:0!important; vertical-align:top!important; overflow:hidden!important; text-align:left!important; }
html body .mltv-guest-popup-panel button.mltv-guest-meal-card-v5 .mltv-guest-meal-field span,
html body .mltv-guest-popup-panel button.mltv-guest-meal-card-v5 .mltv-guest-meal-field strong { display:block!important; width:100%!important; overflow:hidden!important; white-space:nowrap!important; text-overflow:ellipsis!important; color:#fff!important; }
html body .mltv-guest-popup-panel button.mltv-guest-meal-card-v5 .mltv-guest-meal-field span { font-size:15px!important; line-height:19px!important; font-weight:900!important; color:rgba(255,255,255,.88)!important; }
html body .mltv-guest-popup-panel button.mltv-guest-meal-card-v5 .mltv-guest-meal-field strong { font-size:16px!important; line-height:21px!important; font-weight:900!important; }
html body .mltv-guest-popup-panel button.mltv-guest-meal-card-v5 .mltv-guest-meal-status { display:block!important; width:100%!important; height:30px!important; line-height:30px!important; margin:0!important; padding:0!important; overflow:hidden!important; white-space:nowrap!important; text-overflow:ellipsis!important; font-size:15px!important; font-weight:900!important; color:#fff!important; }
html body .mltv-guest-popup-panel button.mltv-guest-meal-card-v5 .mltv-guest-meal-status-dot { display:inline-block!important; width:9px!important; height:9px!important; margin:0 8px 0 0!important; border-radius:9px!important; background:#ffcf53!important; vertical-align:middle!important; }
html body .mltv-guest-popup-panel button.mltv-guest-meal-card-v5 .mltv-guest-meal-status-dot--ordered { background:#7cff9b!important; }
html body .mltv-guest-popup-panel button.mltv-guest-meal-card-v5 .mltv-guest-meal-status span,
html body .mltv-guest-popup-panel button.mltv-guest-meal-card-v5 .mltv-guest-meal-status strong { display:inline!important; color:#fff!important; font-size:15px!important; font-weight:900!important; }
html[dir="rtl"] body .mltv-guest-popup-panel button.mltv-guest-meal-card-v5,
html[dir="rtl"] body .mltv-guest-popup-panel button.mltv-guest-meal-card-v5 .mltv-guest-meal-name,
html[dir="rtl"] body .mltv-guest-popup-panel button.mltv-guest-meal-card-v5 .mltv-guest-meal-field,
html[dir="rtl"] body .mltv-guest-popup-panel button.mltv-guest-meal-card-v5 .mltv-guest-meal-status { text-align:right!important; }


/* MLT-CSHTML-044: force visible guest order placeholders on Chrome 68 and cached TV browsers.
   This intentionally removes clipping from the guest meal cards so Order User/Time/Status rows are visible. */
html body .mltv-guest-popup-panel button.mltv-guest-meal-card-v6,
html body button.mltv-guest-meal-card-v6 {
    display:inline-block!important; width:470px!important; min-width:470px!important; max-width:470px!important;
    height:166px!important; min-height:166px!important; max-height:166px!important;
    padding:14px 20px 12px 20px!important; margin:0 16px 18px 16px!important;
    vertical-align:top!important; box-sizing:border-box!important; text-align:left!important;
    white-space:normal!important; overflow:visible!important; color:#fff!important;
}
html body .mltv-guest-popup-panel button.mltv-guest-meal-card-v6 .mltv-guest-meal-name { display:block!important; height:25px!important; line-height:25px!important; margin:0 0 6px 0!important; overflow:hidden!important; white-space:nowrap!important; text-overflow:ellipsis!important; font-size:20px!important; font-weight:900!important; color:#fff!important; }
html body .mltv-guest-popup-panel button.mltv-guest-meal-card-v6 .mltv-guest-meal-line { display:block!important; height:5px!important; width:100%!important; margin:0 0 8px 0!important; background:rgba(255,255,255,.58)!important; border-radius:4px!important; }
html body .mltv-guest-popup-panel button.mltv-guest-meal-card-v6 .mltv-guest-meal-fields { display:block!important; width:100%!important; height:48px!important; margin:0 0 5px 0!important; padding:0!important; overflow:visible!important; }
html body .mltv-guest-popup-panel button.mltv-guest-meal-card-v6 .mltv-guest-meal-field { display:inline-block!important; width:48%!important; height:48px!important; margin:0!important; padding:0!important; vertical-align:top!important; overflow:hidden!important; text-align:left!important; }
html body .mltv-guest-popup-panel button.mltv-guest-meal-card-v6 .mltv-guest-meal-field span { display:block!important; width:100%!important; font-size:14px!important; line-height:18px!important; font-weight:900!important; color:rgba(255,255,255,.85)!important; overflow:hidden!important; white-space:nowrap!important; text-overflow:ellipsis!important; }
html body .mltv-guest-popup-panel button.mltv-guest-meal-card-v6 .mltv-guest-meal-field strong { display:block!important; width:100%!important; font-size:15px!important; line-height:22px!important; font-weight:900!important; color:#fff!important; overflow:hidden!important; white-space:nowrap!important; text-overflow:ellipsis!important; }
html body .mltv-guest-popup-panel button.mltv-guest-meal-card-v6 .mltv-guest-meal-status { display:block!important; width:100%!important; height:28px!important; line-height:28px!important; margin:0!important; padding:0!important; overflow:hidden!important; white-space:nowrap!important; text-overflow:ellipsis!important; font-size:14px!important; font-weight:900!important; color:#fff!important; }
html body .mltv-guest-popup-panel button.mltv-guest-meal-card-v6 .mltv-guest-meal-status-dot { display:inline-block!important; width:9px!important; height:9px!important; margin:0 8px 0 0!important; border-radius:9px!important; background:#ffcf53!important; vertical-align:middle!important; }
html body .mltv-guest-popup-panel button.mltv-guest-meal-card-v6 .mltv-guest-meal-status-dot--ordered { background:#7cff9b!important; }
html body .mltv-guest-popup-panel button.mltv-guest-meal-card-v6 .mltv-guest-meal-status span { display:inline!important; color:rgba(255,255,255,.85)!important; font-size:14px!important; font-weight:900!important; }
html body .mltv-guest-popup-panel button.mltv-guest-meal-card-v6 .mltv-guest-meal-status strong { display:inline!important; color:#fff!important; font-size:14px!important; font-weight:900!important; margin-left:8px!important; }
html[dir="rtl"] body .mltv-guest-popup-panel button.mltv-guest-meal-card-v6,
html[dir="rtl"] body .mltv-guest-popup-panel button.mltv-guest-meal-card-v6 .mltv-guest-meal-name,
html[dir="rtl"] body .mltv-guest-popup-panel button.mltv-guest-meal-card-v6 .mltv-guest-meal-field,
html[dir="rtl"] body .mltv-guest-popup-panel button.mltv-guest-meal-card-v6 .mltv-guest-meal-status { text-align:right!important; }

/* MLT-CSHTML-058: Chrome 68-safe Guest Meals Selected footer alignment. */
html body #guestOrderPrompt button.mltv-guest-meal-card-v8,
html body .mltv-guest-popup-panel button.mltv-guest-meal-card-v8 { position:relative!important; padding-bottom:38px!important; overflow:hidden!important; }
html body #guestOrderPrompt button.mltv-guest-meal-card-v8 .mltv-guest-selected-indicator,
html body .mltv-guest-popup-panel button.mltv-guest-meal-card-v8 .mltv-guest-selected-indicator { position:absolute!important; left:22px!important; right:auto!important; top:auto!important; bottom:10px!important; display:block!important; width:auto!important; max-width:240px!important; height:20px!important; line-height:20px!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; color:#fff!important; font-size:13px!important; font-weight:900!important; text-align:left!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; z-index:3!important; }
html body #guestOrderPrompt button.mltv-guest-meal-card-v8 .mltv-guest-selected-indicator .meal-period-selected-indicator__dot,
html body .mltv-guest-popup-panel button.mltv-guest-meal-card-v8 .mltv-guest-selected-indicator .meal-period-selected-indicator__dot { display:inline-block!important; width:9px!important; height:9px!important; min-width:9px!important; margin:0 7px 0 0!important; padding:0!important; border-radius:9px!important; background:#7cff9b!important; vertical-align:middle!important; box-shadow:0 0 8px rgba(124,255,155,.85)!important; }
html body #guestOrderPrompt button.mltv-guest-meal-card-v8 .mltv-guest-selected-indicator .meal-period-selected-indicator__text,
html body .mltv-guest-popup-panel button.mltv-guest-meal-card-v8 .mltv-guest-selected-indicator .meal-period-selected-indicator__text { display:inline-block!important; vertical-align:middle!important; max-width:210px!important; overflow:hidden!important; white-space:nowrap!important; text-overflow:ellipsis!important; }
html[dir="rtl"] body #guestOrderPrompt button.mltv-guest-meal-card-v8 .mltv-guest-selected-indicator,
html[dir="rtl"] body .mltv-guest-popup-panel button.mltv-guest-meal-card-v8 .mltv-guest-selected-indicator { left:auto!important; right:22px!important; text-align:right!important; }
html[dir="rtl"] body #guestOrderPrompt button.mltv-guest-meal-card-v8 .mltv-guest-selected-indicator .meal-period-selected-indicator__dot,
html[dir="rtl"] body .mltv-guest-popup-panel button.mltv-guest-meal-card-v8 .mltv-guest-selected-indicator .meal-period-selected-indicator__dot { margin:0 0 0 7px!important; }

/* =========================================================
   MLT-DEMO-018: single TV navigation selection ring
   ---------------------------------------------------------
   Several legacy navigation controllers intentionally keep their own
   focus classes for key-routing compatibility.  They must not each draw
   a separate visual ring.  This final cascade makes every supported
   focus class visually silent and lets the active element draw one cyan
   ring only.  It does not alter navigation, sizing, card backgrounds,
   disabled-state logic, or popup ownership.
   ========================================================= */

/* Never let a focused wrapper and its inner card both render a ring. */
html body .focusable > .card,
html body .focusable > .pos-product,
html body .focusable > .meal-period-card,
html body .focusable > .meal-period-nav-button,
html body .tv-selected > .card,
html body .tv-selected > .pos-product,
html body .nav-active > .card,
html body .nav-active > .pos-product,
html body .mltv-current > .card,
html body .mltv-current > .pos-product {
    outline: none !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Remove every legacy/native ring before applying the single owner ring. */
html body .tv-selected,
html body .nav-active,
html body .keyboard-focus,
html body .remote-focus,
html body .focused,
html body .spatial-focus,
html body .is-focused,
html body .orders-tv-focused,
html body .modal-tv-focused,
html body .mltv-focused,
html body .mltv-current,
html body .mltv-home-focused,
html body .ml-tv-current-focus-source,
html body button:focus,
html body button:focus-visible,
html body a:focus,
html body a:focus-visible,
html body [role="button"]:focus,
html body [role="button"]:focus-visible,
html body [data-tv-nav]:focus,
html body [data-nav-id]:focus {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

/* One visual ring, regardless of how many routing classes are present. */
html body .tv-selected:not([disabled]),
html body .mltv-current:not([disabled]),
html body .mltv-focused:not([disabled]),
html body .mltv-home-focused:not([disabled]) {
    outline: none !important;
    box-shadow: 0 0 0 4px #78eaff, 0 0 22px rgba(120, 234, 255, .82) !important;
}

/* Active modal focus follows the same single-ring contract. */
html body .modal.mltv-active-modal .tv-selected:not([disabled]),
html body .modal.mltv-active-modal .mltv-focused:not([disabled]),
html body [data-mltv-popup="active"] .tv-selected:not([disabled]),
html body [data-mltv-popup="active"] .mltv-focused:not([disabled]),
html body .mltv-guest-popup-overlay .tv-selected:not([disabled]),
html body .mltv-guest-popup-overlay .mltv-focused:not([disabled]) {
    outline: none !important;
    box-shadow: 0 0 0 4px #78eaff, 0 0 22px rgba(120, 234, 255, .82) !important;
}

/* Disabled/non-selectable meals must never appear focused. */
html body [disabled].tv-selected,
html body [disabled].mltv-current,
html body [aria-disabled="true"].tv-selected,
html body [aria-disabled="true"].mltv-current,
html body .meal-period-disabled.tv-selected,
html body .meal-period-disabled.mltv-current {
    outline: none !important;
    box-shadow: none !important;
}