/* ============ TOKENS THAT CROSS THE SHADOW BOUNDARY ============ * * The car detail and the whole checkout render inside * 's shadow root, which page CSS cannot select into. * The sheet that styles it is adopted by src/lib/lrShadowAccent.js, and it * used to read the page theme with :host-context([data-theme="dark"]). * * That was wrong, and it is why the owner saw a WHITE checkout in dark mode * while it looked correct here: :host-context is Chromium-only. Firefox has * never supported it, so every one of those rules was dead there and the * funnel stayed light. * * CUSTOM PROPERTIES INHERIT THROUGH A SHADOW BOUNDARY in every engine. So * the theme is published here as variables and the shadow sheet consumes * them. Defined only under [data-theme="dark"]: in light mode they are * simply absent, every var() in the shadow sheet falls back to the widget's * OWN stock colour, and light mode is byte-for-byte what it always was. * * These live on the theme selector itself, not on .mrcwhitelabel, because * the teleport element is a child of and never sits inside our mount. */ [data-theme="dark"] { --lr-sheet: #131313; --lr-block: #1C1C1C; --lr-field: #1F1F1F; --lr-ink: #F2F2F0; /* Two secondary tiers, both raised from where they started (0.65 / 0.5). Those were carried straight over from the widget's own light-mode ratios, and they do not transfer: the same alpha over a dark surface reads considerably fainter than it does over white. The owner flagged field labels and placeholders as too dim four separate times before the cause was clear. Do not lower these to "match" the widget again. */ --lr-ink-soft: rgba(242, 242, 240, 0.8); --lr-ink-faint: rgba(242, 242, 240, 0.74); --lr-line: rgba(242, 242, 240, 0.15); --lr-line-strong: rgba(242, 242, 240, 0.22); --lr-link: #FFD60A; /* The widget separates its dropdowns with a 10%-black drop shadow, which is invisible against a dark sheet, so the list merged into the field it belongs to. Replaced on dark by a deeper shadow PLUS a 1px spread ring. A ring drawn with box-shadow is paint only: unlike a real border it cannot shift the panel's contents by a pixel. */ --lr-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(242, 242, 240, 0.15); } /* ==================== PAGE FIT (not widget layout) ============== */ .mrcwhitelabel { max-width: calc(var(--rail) - var(--pad) * 2) !important; margin-left: auto !important; margin-right: auto !important; } /* ==================== HOST-PAGE DUTIES ==================== */ /* Hide the brand nav while the car-detail view is open so the nav never covers the widget's close X. The anchor exists only while a detail is showing; it renders with EITHER .booking__desktop OR .booking__mobile, so match the bare class. Belt and braces with data-zindex="200" on the mount, which is the widget's own documented attribute and covers every overlay it renders. MCH carries both; keep both. */ /* NOT hidden here, unlike MCH. See the note on the lock rules below: our nav is position:static on /book, so display:none would collapse it out of flow and shift the page. The widget's overlays are fixed inside its z-index 200 root and paint over a static nav anyway, so there is nothing to hide. */ /* Contain the car-detail overlay's overscroll so scrolling to its end does not chain to the page. Never reinstate a page-level overflow lock keyed to car-detail state; that froze the page after a widget rebuild. */ .mrcwhitelabel .booking { overscroll-behavior: contain !important; } /* The widget's dropdowns are full-viewport FIXED panels up to ~1039px. While one is open the host must hide its nav and stop the page scrolling behind the panel. The widget flags with .mrc-lock-scroll for exactly this. The :has() fallbacks cover builds observed not setting the flag; html:has() covers iOS Safari scrolling the root scroller. Scoped to mobile ON PURPOSE. Locking overflow at desktop widths removes the scrollbar, which widens the viewport and shifts the centred page sideways the moment a dropdown opens. */ @media (max-width: 1039px) { /* The nav-hide rules that belong here on MCH are deliberately ABSENT. MCH's nav is position:fixed, so display:none costs it no space. Ours is position:static on /book (design.css, so it scrolls away and the widget's bar can pin behind it), and hiding a static element REMOVES it from flow: the document lost 68px and the search bar jumped from top:68 to top:0 the instant any dropdown opened. Measured, not guessed. Nothing is lost by leaving it visible: a static nav creates no stacking context, so the widget's fixed panels inside its z-index 200 root cover it completely. */ body.mrc-lock-scroll, body.mrc-no-scroll, body:has(.mrcwhitelabel .dropdown__panel) { overflow: hidden !important; } html:has(body.mrc-lock-scroll), html:has(body.mrc-no-scroll), html:has(.mrcwhitelabel .dropdown__panel) { overflow: hidden !important; } /* NO CAR-DETAIL SELECTOR HERE, and this is deliberate. On 23 Aug 2026 a rule keyed to the widget's inline body lock was added to catch the car modal, whose background scrolled behind it. MCH's own file forbids exactly that, in terms: "Never reinstate a page-level overflow lock keyed to car-detail state; that froze the page after an LR rebuild." They have been here and it cost them a frozen page. MCH's answer to the same problem is the pair below, and ours now matches it: - overscroll-behavior:contain on .mrcwhitelabel .booking, so scrolling to the end of the overlay does not chain to the page (we already carry this, further down); - hiding the brand nav while the detail is open, which MCH does with body:has(.booking__link-close) .header-stack{display:none}. We do NOT copy that half: MCH's nav is fixed, ours is static on this route, and hiding a static element pulls 68px out of the flow and yanks the page up. See the note above. */ } /* NOT CARRIED, on purpose, because MCH does not carry it: a @media (min-width: 1040px) rule neutralising the lock above. Opening a dropdown puts .mrc-lock-scroll on and the widget sets overflow:hidden there, which on a desktop removes the viewport scrollbar and steps the centred page sideways by its width (measured 1735px before, 1749px after). scrollbar-gutter does NOT fix it in either position: a box with overflow:hidden is given no gutter at all, so reserving one is a no-op the moment the lock lands. If that shift is to be fixed, fix it the way MCH would, not with a rule MCH has never shipped. */ /* ======= WORKAROUNDS FOR THE WIDGET'S OWN BUGS (remove when fixed) ======= Both reproduced on the unstyled stock embed, reported 10 Aug 2026. */ /* <=1039px popups: the View-cars pill sits below the expandable location list and the panel cannot scroll to it, dead-ending the booking. */ @media (max-width: 1039px) { .mrcwhitelabel .dropdown__panel .view-cars-btn, body.mrc-lock-scroll .mrcwhitelabel .view-cars-btn { position: fixed !important; left: 16px !important; right: 16px !important; bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important; width: auto !important; z-index: 100 !important; box-shadow: 0 -2px 16px rgba(14, 14, 14, 0.18) !important; } } /* The delivery-location list is an ABSOLUTE dropdown with overflow hidden: long lists grow past the screen and cannot scroll. */ @media (max-width: 1039px) { .mrcwhitelabel .multi-select__dropdown { max-height: 50dvh !important; overflow-y: auto !important; } } /* Keep the widget light in both site themes, and keep Firefox's forced dark mode from inverting the calendar, which bleached the selected dates unreadable. Read rule 5 in the header before changing this. */ .mrcwhitelabel { color-scheme: only light !important; } /* ================= BRAND PALETTE - COLOUR ONLY ================= */ /* Search bar: the site's ink band. Background only; the widget keeps its own size and position. */ .mrcwhitelabel .search-cigarette, .mrcwhitelabel .search-cigarette__wrap, .mrcwhitelabel .search-cigarette__row, .mrcwhitelabel .search-cigarette__pinned, .mrcwhitelabel [class*="search-cigarette__pinned"] { background: #0E0E0E !important; } /* The 5px sliver above the PINNED bar. The widget sticks the bar at top: 5px, so once you scroll, page content shows through a 5px strip above it. The old fix forced top: 0, a position change on the element whose geometry we must not touch. box-shadow is PAINT ONLY: it cannot move, resize or reflow anything, so a solid shadow extending 5px upward covers the strip with zero layout risk. Blur 0, spread 0, so it reads as a flat extension of the bar. */ .mrcwhitelabel .search-cigarette { box-shadow: 0 -5px 0 0 #0E0E0E !important; } /* The widget ships id-scoped selectors (#mrc_wl_xxxx ...) at higher specificity; chain the class to outrank them. */ .mrcwhitelabel [id^="mrc_wl_"] .search-cigarette, .mrcwhitelabel [id^="mrc_wl_"] .search-cigarette__wrap, .mrcwhitelabel [id^="mrc_wl_"] .search-cigarette__row, .mrcwhitelabel [id^="mrc_wl_"] .search-cigarette__pinned { background-color: #0E0E0E !important; } /* Form-field pills white on the ink bar. Specify-location is painted on its .dropdown__trigger ONLY: see rule 3 at the top of this file. */ .mrcwhitelabel .search-filters, .mrcwhitelabel .search-filters__wrap, .mrcwhitelabel .search-cigarette__filters, .mrcwhitelabel .search-cigarette__city, .mrcwhitelabel .city-picker, .mrcwhitelabel .city-picker__wrap, .mrcwhitelabel .search-cigarette__calendar, .mrcwhitelabel .search-calendar, .mrcwhitelabel .search-calendar__trigger, .mrcwhitelabel .search-place-time .dropdown__trigger, /* .search-placeholder, the pinned bar's WRAPPER, IS painted, because MCH paints it: its localrentBrandCss.js lists all three of wrapper, __date-time and __places in one rule with background #fff and border-radius 8. It was dropped from here on 23 Aug on the advice of book-widget-gotchas.md item 2C, which says painting the wrapper merges the pills into one slab. That doc is from June and MCH's shipped file disagrees with it. Dropping it left the date pill hugging its text with no surround, which the owner saw on a real handset as the dates being cut off. Restored to match MCH. If the pills ever do merge, fix it the way MCH would rather than by removing the wrapper again. */ .mrcwhitelabel .search-placeholder, .mrcwhitelabel .search-placeholder__date-time, .mrcwhitelabel .search-placeholder__places { background-color: #ffffff !important; color: #0E0E0E !important; border-radius: 8px !important; } /* The place-time CONTAINER stays transparent so only the real trigger reads as a pill. MCH's rule, verbatim, and it does NOT include .search-placeholder: that wrapper is PAINTED, in the rule above, exactly as MCH paints it. It was briefly listed here as transparent, which silently beat the paint rule by source order and left the date pill with no surround. */ .mrcwhitelabel .search-cigarette__place-time, .mrcwhitelabel .search-place-time { background-color: transparent !important; } .mrcwhitelabel .search-filters, .mrcwhitelabel .search-cigarette__filters { border-color: #ffffff !important; } /* Filters button icon to ink. Scoped to the cigarette button ONLY: matching .search-filters (the whole panel) once force-filled every brand-logo SVG in the brand picker into ink blobs. */ .mrcwhitelabel .search-cigarette__filters > svg *, .mrcwhitelabel .search-cigarette__filters > button svg * { stroke: #0E0E0E !important; fill: #0E0E0E !important; } /* Date pill text + separator dots (the widget ships the dots near-white, which is invisible on the white pill). */ .mrcwhitelabel .date-range__date, .mrcwhitelabel .date-range__days, .mrcwhitelabel .date-range__dash, .mrcwhitelabel .date-range__time { color: #0E0E0E !important; } .mrcwhitelabel .date-range__dot { background-color: #0E0E0E !important; color: #0E0E0E !important; } /* Active-filter count badge. */ .mrcwhitelabel .search-filters__count, .mrcwhitelabel [class*="search-filters__count"], .mrcwhitelabel [class*="filters__counter"], .mrcwhitelabel [class*="filter-count"] { background-color: #0E0E0E !important; color: #ffffff !important; } /* Primary buttons (View, Continue) -> canary, so the accent runs through the whole funnel. Flat rather than MCH's gradient, matching this site's own buttons, and the label is INK because canary is a light colour. */ .mrcwhitelabel .button.appearance-default, .mrcwhitelabel .vehicle-card-footer__view, .mrcwhitelabel .search__button-more, .mrcwhitelabel [class*="button-primary"] { background: #FFD60A !important; border-color: #FFD60A !important; color: #0E0E0E !important; } .mrcwhitelabel .button.appearance-default svg *, .mrcwhitelabel .vehicle-card-footer__view svg *, .mrcwhitelabel .search__button-more svg * { fill: #0E0E0E !important; stroke: #0E0E0E !important; } .mrcwhitelabel .button.appearance-default:hover, .mrcwhitelabel .vehicle-card-footer__view:hover, .mrcwhitelabel .search__button-more:hover, .mrcwhitelabel [class*="button-primary"]:hover { filter: brightness(1.06) !important; } /* FINAL payment step: "Pay now ". This is the widget's OWN submit button (