/* * 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; } .rp-global-service-switch { flex: 0 0 auto; } .rp-site-header .rp-location-content:has(> .rp-global-service-switch) { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1px 8px; } .rp-site-header .rp-location-content:has(> .rp-global-service-switch) > small { grid-column: 1 / -1; } .rp-site-header .rp-location-widget { min-width: 0; } .rp-site-header .rp-location-widget .transaction-info, .rp-site-header .rp-location-widget .widget-dropdown-address, .rp-site-header .rp-location-widget .widget-dropdown-address > button { max-width: 100%; } /* KMRS prints a scheduled slot as two complete datetimes. Keep that native * value, but present the address and slot as two compact, ellipsised rows so * a long schedule can never increase the header height. */ .rp-site-header .rp-location--home .rp-location-widget .widget-dropdown > button, .rp-site-header .rp-location--restaurant .rp-location-widget .widget-dropdown > button { display: grid !important; width: 100%; max-width: 235px; height: 42px; min-height: 42px; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 1px; overflow: hidden; padding: 5px 14px !important; text-align: left; } .rp-site-header .rp-location--home .rp-location-widget .widget-dropdown > button > span, .rp-site-header .rp-location--restaurant .rp-location-widget .widget-dropdown > button > span { display: block !important; max-width: 100% !important; min-width: 0; overflow: hidden; font-size: 11px; line-height: 14px; text-overflow: ellipsis; white-space: nowrap; } .rp-site-header .rp-location--home .rp-location-widget .widget-dropdown > button > span + span, .rp-site-header .rp-location--restaurant .rp-location-widget .widget-dropdown > button > span + span { color: #65756c; font-size: 9px; font-weight: 700; } .rp-global-service-switch .widget-dropdown { margin: 0 !important; } .rp-global-service-switch .widget-dropdown > button, .rp-global-services-mobile .widget-dropdown > button { position: relative; min-width: 92px; height: 34px; padding: 0 30px 0 13px !important; border: 1px solid #dfe8e2 !important; border-radius: 18px !important; background: #f2f7f3 !important; color: #153b28 !important; font-size: 12px !important; font-weight: 800 !important; line-height: 32px !important; text-align: left; white-space: nowrap; } .rp-global-service-switch .widget-dropdown > button::after, .rp-global-services-mobile .widget-dropdown > button::after { position: absolute; top: 50%; right: 12px; width: 7px; height: 7px; border-right: 2px solid #587164; border-bottom: 2px solid #587164; content: ""; transform: translateY(-65%) rotate(45deg); } .rp-global-service-switch .dropdown-menu, .rp-global-services-mobile .dropdown-menu { min-width: 170px; padding: 7px; border: 1px solid #e1e9e4; border-radius: 12px; box-shadow: 0 14px 32px rgba(8, 45, 25, .14); } .rp-global-service-switch .dropdown-menu a, .rp-global-services-mobile .dropdown-menu a { display: block; padding: 9px 11px; border-radius: 8px; color: #183b29; font-size: 12px; font-weight: 700; } .rp-global-service-switch .dropdown-menu a:hover, .rp-global-services-mobile .dropdown-menu a:hover { background: #edf8f0; color: var(--rp-primary, #07823d); } /* The trigger already displays the selected service, so the menu is reserved * for alternative transactions only. The compatibility script applies this * class after each KMRS component refresh. */ .rp-global-service-switch .dropdown-menu a.rp-service-option-current, .rp-global-services-mobile .dropdown-menu a.rp-service-option-current { display: none !important; } .rp-site-header .rp-order-context { display: flex; flex: 0 0 auto; align-items: center; gap: 0; } .rp-site-header .rp-global-services-mobile { display: flex !important; flex: 0 0 auto; align-items: center; } @media (max-width: 991.98px) { .rp-site-header .rp-header-inner:has(> .rp-order-context--has-services) { flex-wrap: wrap; } .rp-order-context--has-services { order: 5; flex: 1 0 calc(100% + 32px) !important; width: calc(100% + 32px); margin: 0 -16px; } .rp-global-services-mobile { width: 100%; min-height: 48px; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 16px; border-top: 1px solid #edf2ee; background: #fff; box-shadow: 0 5px 12px rgba(14, 48, 29, .05); } .rp-global-services-mobile__label { display: inline-flex; min-width: 0; align-items: center; gap: 7px; color: #52655b; font-size: 12px; font-weight: 700; } .rp-global-services-mobile__label i { color: var(--rp-primary, #07823d); font-size: 17px; } .rp-global-services-mobile .widget-dropdown { margin: 0 !important; } .rp-global-services-mobile .widget-dropdown > button { height: 32px; line-height: 30px !important; } } @media (min-width: 992px) { .rp-global-services-mobile__label { display: none; } .rp-global-services-mobile .widget-dropdown { margin: 0 !important; } } @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) { /* KMRS mounts its address and time dialogs inside the desktop location * component. Keep that Vue mount alive on phones while its trigger stays * visually absent, otherwise native dialogs open at 0 x 0 pixels. */ /* Standard discovery pages use one compact context row on phones. The * native KMRS address trigger remains the only source of location and * schedule state, while component-services remains the source of the order * type. This avoids duplicating either state in theme JavaScript. */ .rp-site-header:not(.rp-site-header--restaurant) .rp-order-context--has-services { position: relative; min-height: 48px; } .rp-site-header:not(.rp-site-header--restaurant) .rp-global-services-mobile { justify-content: flex-end; } .rp-site-header:not(.rp-site-header--restaurant) .rp-global-services-mobile__label { display: none; } .rp-site-header:not(.rp-site-header--restaurant) .rp-location.d-none.d-lg-flex { display: flex !important; position: absolute; z-index: 2; top: 7px; right: 124px; left: 16px; width: auto; height: 34px; min-width: 0; max-width: none; align-items: center; gap: 5px; padding: 0 9px; overflow: visible; border: 1px solid #dfe8e2; border-radius: 18px; background: #f2f7f3; } .rp-site-header:not(.rp-site-header--restaurant) .rp-location.d-none.d-lg-flex > i { display: inline-flex !important; flex: 0 0 auto; color: var(--rp-primary, #07823d); font-size: 15px; } .rp-site-header:not(.rp-site-header--restaurant) .rp-location.d-none.d-lg-flex > .rp-location-content > small { display: none !important; } .rp-site-header:not(.rp-site-header--restaurant) .rp-location.d-none.d-lg-flex .rp-location-content, .rp-site-header:not(.rp-site-header--restaurant) .rp-location.d-none.d-lg-flex .rp-location-widget, .rp-site-header:not(.rp-site-header--restaurant) .rp-location.d-none.d-lg-flex .rp-location-widget > .position-relative, .rp-site-header:not(.rp-site-header--restaurant) .rp-location.d-none.d-lg-flex .rp-location-widget .widget-dropdown { width: 100%; height: 32px; min-width: 0; } .rp-site-header:not(.rp-site-header--restaurant) .rp-location.d-none.d-lg-flex .rp-location-widget > .position-relative, .rp-site-header:not(.rp-site-header--restaurant) .rp-location.d-none.d-lg-flex .rp-location-widget .widget-dropdown { display: block !important; } .rp-site-header:not(.rp-site-header--restaurant) .rp-location.d-none.d-lg-flex .rp-location-widget .widget-dropdown > button { display: flex !important; width: 100%; height: 32px; min-height: 32px !important; max-height: 32px; min-width: 0; max-width: 100%; align-items: center; overflow: hidden; padding: 0 !important; border: 0 !important; background: transparent !important; color: #153b28 !important; font-size: 11px !important; font-weight: 750 !important; line-height: 32px !important; text-align: left; white-space: nowrap; } .rp-site-header:not(.rp-site-header--restaurant) .rp-location.d-none.d-lg-flex .rp-location-widget .widget-dropdown > button > span { display: block !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rp-site-header:not(.rp-site-header--restaurant) .rp-location.d-none.d-lg-flex .rp-location-widget .widget-dropdown > button > span:first-child { flex: 1 1 auto; } .rp-site-header:not(.rp-site-header--restaurant) .rp-location.d-none.d-lg-flex .rp-location-widget .widget-dropdown > button > span + span { flex: 0 1 72px; max-width: 72px; } /* Restaurant detail has its own compact, reference-matched mobile address * bar. Keep its KMRS dialog mount alive without exposing the desktop * trigger or allowing it to cover the brand. */ .rp-site-header--restaurant .rp-location.d-none.d-lg-flex { display: flex !important; position: absolute; top: 0; left: 0; width: 0; height: 0; min-width: 0; padding: 0; overflow: visible; border: 0; } .rp-site-header--restaurant .rp-location.d-none.d-lg-flex > i, .rp-site-header--restaurant .rp-location.d-none.d-lg-flex > .rp-location-content > small, .rp-site-header--restaurant .rp-location.d-none.d-lg-flex .rp-location-widget > .position-relative { display: none !important; } .rp-site-header--restaurant .rp-location.d-none.d-lg-flex .rp-location-content, .rp-site-header--restaurant .rp-location.d-none.d-lg-flex .rp-location-widget { width: 0; height: 0; min-width: 0; } .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; } }