/* * RestoPrime header-only refinement. It deliberately styles the native KMRS * widgets rather than reproducing their state, so address, language, currency, * cart and account actions retain their platform behaviour. */ .rp-site-header { isolation: isolate; } /* Bootstrap creates the backdrop after the modal in the DOM. Because the * header is an isolated stacking context, the modal mounted by KMRS' native * delivery widget could be painted beneath that backdrop. Keep the native * modal above its backdrop without changing its JavaScript lifecycle. */ .rp-site-header .modal.show { z-index: 1080 !important; } .rp-site-header .modal-backdrop.show { z-index: 1070 !important; } /* The Bootstrap backdrop is attached to , while the Vue component is * intentionally mounted inside the header. Raise the header's own stacking * context only while that native dialog is open; a child z-index alone cannot * escape an isolated parent stacking context. */ .rp-site-header:has(.modal.show) { z-index: 1080; /* backdrop-filter creates a containing block for fixed descendants. The * KMRS delivery modal is mounted inside this header, so leaving the blur * active confines the full-screen dialog to the header strip. */ -webkit-backdrop-filter: none; backdrop-filter: none; } /* Element Plus dialogs (address search, exact-location map and address form) * are also mounted inside the header's Vue root. Their overlay is fixed, so * the header blur would otherwise reduce it to the header's 68px containing * block after the Bootstrap delivery dialog closes. */ .rp-site-header:has(.el-overlay:not([style*="display: none"])) { /* Keep the header above the page, but below Element Plus poppers teleported * to (normally z-index 2008+), so autocomplete results stay clickable. */ z-index: 1080; -webkit-backdrop-filter: none; backdrop-filter: none; } .rp-site-header .rp-header-inner { box-sizing: border-box; width: 100%; } .rp-site-header .rp-native-controls, .rp-site-header .rp-native-controls .top-menu { display: flex; min-width: 0; align-items: center; } /* WidgetUserNav always emits the first two desktop list items. Hide only the * empty slots when the corresponding KMRS option is off—never invent a value. */ .rp-site-header[data-rp-currency-control="0"] .rp-native-controls .top-menu > li:first-child, .rp-site-header[data-rp-language-control="0"] .rp-native-controls .top-menu > li:nth-child(2) { display: none !important; } .rp-site-header .rp-native-controls .top-menu > li { flex: 0 0 auto; } .rp-site-header .rp-native-controls .language-bar { position: relative; } .rp-site-header .rp-native-controls .language-bar > a, .rp-site-header .rp-native-controls component-currency-selection > .language-bar > a { gap: 4px; text-decoration: none; } .rp-site-header .rp-native-controls .language-bar > a::after, .rp-site-header .rp-native-controls component-currency-selection > .language-bar > a::after { margin-left: 2px; vertical-align: 0.1em; } .rp-site-header .rp-native-controls .language-bar .img-30-flag { box-shadow: 0 0 0 1px rgba(18, 46, 31, .11); } .rp-site-header .rp-native-controls .dropdown-menu { z-index: 1060; min-width: 136px; margin-top: 8px; } /* The native KMRS cart action is deliberately kept as an so it can open * the existing cart preview. Give that real control enough contrast and a * generous hit target instead of replacing it with a decorative icon. */ .rp-site-header .top-menu .cart-handle { position: relative; overflow: visible; width: 40px; height: 40px; border: 1px solid #b8d7c1; border-radius: 11px; background: #fff; box-shadow: 0 4px 12px rgba(10, 77, 37, .08); } .rp-site-header .top-menu .cart-handle:hover, .rp-site-header .top-menu .cart-handle:focus-visible { border-color: var(--rp-primary); background: #eef9f1; box-shadow: 0 7px 16px rgba(10, 77, 37, .14); outline: 0; } .rp-site-header .top-menu .cart-handle img { display: block !important; width: 18px !important; height: 18px !important; max-width: none; opacity: 1 !important; visibility: visible !important; filter: brightness(0) saturate(100%) invert(22%) sepia(40%) saturate(1105%) hue-rotate(96deg) brightness(88%) contrast(91%); } .rp-site-header .top-menu .cart-handle .badge { display: inline-flex; align-items: center; justify-content: center; top: -5px; right: -5px; bottom: auto; width: auto; min-width: 18px; height: 18px; min-height: 18px; padding: 0 4px; border: 2px solid #fff; border-radius: 9px; background: var(--rp-primary) !important; box-shadow: 0 2px 5px rgba(5, 88, 39, .22); font-size: 9px; line-height: 1; } .rp-site-header .top-menu .line-left > a, .rp-site-header .top-menu .userprofile > a { min-height: 40px; padding: 10px 17px !important; border-radius: 10px; box-shadow: 0 5px 13px rgba(5, 99, 47, .14); font-size: 12px; line-height: 18px; } .rp-site-header .rp-location-content .component-services, .rp-site-header .rp-location-content component-services { max-width: 100%; } .rp-site-header .rp-location-content .transaction-info, .rp-site-header .rp-location-content a { min-width: 0; } /* Once KMRS hydrates the discovery widget it owns the service selector. The * server-rendered chip remains available before JavaScript starts, then steps * aside to avoid presenting the same Delivery control twice. */ #vue-widget-nav[data-v-app].rp-location--discovery .rp-location-mode--fallback { display: none; } @media (min-width: 1200px) { .rp-site-header .rp-header-inner { min-height: 68px; } .rp-site-header .rp-brand { font-size: 21px; } .rp-site-header .rp-location-content, .rp-site-header .rp-location-content a { font-size: 12.5px; } .rp-site-header .rp-location-content small { font-size: 10.5px; } .rp-site-header .rp-primary-nav a { font-size: 12px; } .rp-site-header--home .rp-primary-nav { min-width: 0; } .rp-site-header--restaurant .rp-detail-search { flex-basis: clamp(285px, 28vw, 390px); } .rp-site-header--discovery .rp-header-actions { gap: 9px; } .rp-site-header--discovery .rp-header-search { margin-right: 2px; } } @media (max-width: 991.98px) { .rp-site-header .rp-native-controls .top-menu > li:first-child, .rp-site-header .rp-native-controls .top-menu > li:nth-child(2) { display: none !important; } } @media (max-width: 575.98px) { .rp-site-header .rp-native-controls .top-menu { gap: 3px; } }