/* ============================================================ Rated Driving · Core Lessons · Front-end CSS Derived from Claude Design v9. All selectors scoped under .rdlb-flow at build time to prevent Flatsome conflicts. ============================================================ */ /* === Main styles (mobile-first) === */ /* ════════════════════════════════════════════════════════════════════ RATED DRIVING · v9 · BOOKING FLOW · MOBILE Aesthetic: Apple clarity + TikTok motion. Restraint over chaos. Palette: navy #000842 + red #e55353 + neutrals. Nothing else. Screens: 5 + done (was 7). The deal screen was redundant casino noise. ════════════════════════════════════════════════════════════════════ */ :root{ --navy:#000842; --navy-2:#1a2056; --red:#e55353; --red-dark:#c43d3d; --red-tint:rgba(229,83,83,.08); --white:#FFFFFF; --bg:#FAFAFB; --surface:#FFFFFF; --surface-2:#F2F3F7; --ink:#0E1230; --ink-2:#4A5170; --ink-3:#8A91AB; --ink-4:#C6CAD8; --line:#E8EAF1; --shadow-soft:0 1px 2px rgba(14,18,48,.04), 0 4px 12px -2px rgba(14,18,48,.06); --shadow-card:0 1px 2px rgba(14,18,48,.04), 0 12px 28px -8px rgba(14,18,48,.10); --shadow-lift:0 24px 60px -12px rgba(14,18,48,.20), 0 4px 12px -4px rgba(14,18,48,.08); --shadow-red:0 12px 32px -8px rgba(229,83,83,.40), 0 2px 6px rgba(229,83,83,.10); }*{box-sizing:border-box;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}/* RDLB: dropped page-level html/body resets (would conflict with Flatsome) */ .rdlb-flow{ /* RDLB: body-derived rule, page-incompatible bits stripped */ font:500 16px/1.45 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--ink); letter-spacing:-.005em; /* Provide a sensible default container — the design originally used the prototype harness for sizing; here we let the flow size to viewport within the theme's page wrapper. */ position:relative; width:100%; max-width:480px; margin:0 auto; min-height:100vh; background:var(--bg); overflow:hidden; } /* ============================================================ v2.9.31 · FULL-SCREEN MODE When .rdlb-fullscreen is on the flow, it covers the entire viewport (above the WordPress/Flatsome header, footer and nav) using position:fixed. This is theme-agnostic — it sits on top of everything rather than trying to hide the theme's specific markup. A close (X) button top-right returns to the normal in-page view. Body scroll is locked via the rdlb-fs-lock class. ============================================================ */ .rdlb-flow.rdlb-fullscreen{ position:fixed !important; inset:0 !important; top:0 !important;left:0 !important;right:0 !important;bottom:0 !important; width:100vw !important; max-width:none !important; height:100vh !important;height:100dvh !important; margin:0 !important; z-index:2147483000 !important; overflow:hidden !important; background:var(--bg); } /* v2.9.59: the full-screen flow (above) is correctly pinned to the viewport with position:fixed; inset:0; height:100dvh. But the harness/phone/stack inside each carried their OWN independent height:100dvh, and the harness centred its child (align-items:center). On mobile, dvh evaluated at three nested levels can resolve to slightly different pixel values (iOS toolbars), and the centring let the phone float — so the page bled through above and below the flow. Fix: in full-screen, the inner layers fill the fixed parent EXACTLY via height:100% (cascading the one true pinned height, not re-evaluating dvh) and the harness stretches rather than centres. Scoped to full-screen so the embedded/desktop paths are untouched. */ .rdlb-flow.rdlb-fullscreen .harness{ height:100% !important; min-height:0 !important; align-items:stretch !important; justify-content:flex-start !important; padding:0 !important; } .rdlb-flow.rdlb-fullscreen .phone{ height:100% !important; min-height:0 !important; } .rdlb-flow.rdlb-fullscreen .stack{ height:100% !important; min-height:0 !important; } /* v2.9.67: the internal scroller, matching the reference. Each .screen is position:absolute;inset:0, a flex column of [topbar, body]; .body is flex:1;min-height:0 and contains [heading, content]; .content is the scroller (flex:1;min-height:0;overflow-y:auto) and contains [ ...fields, footer ]. Two screens (Details, Pay) have more content than fits, so .content scrolls INTERNALLY. Because the harness/phone/stack/screen/body chain is height-locked to the fixed full-screen box, only .content ever scrolls - the page never does. The footer is pinned sticky to the bottom of .content so the CTA stays visible while the fields scroll above it. Pure CSS, correct on first paint before the delayed external booking.js runs. */ .rdlb-flow.rdlb-fullscreen .screen{ overflow:hidden !important; } .rdlb-flow.rdlb-fullscreen .screen > .body{ flex:1 1 auto !important; min-height:0 !important; overflow:hidden !important; } .rdlb-flow.rdlb-fullscreen .screen > .body > .content{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling:touch; } /* Pin the CTA footer to the bottom of the scrolling content so it is always visible. margin-top:auto seats it at the bottom when content is short. The pay screen footer is a .screen child (not inside .content); it is handled below. v2.9.74: the Details screen (idx 3) is EXCLUDED here - its Review button must flow inline under the consent ("Email me") box, not pin to the bottom. Without the :not() this fullscreen rule (higher specificity than the idx-3 override) re-pinned it. */ .rdlb-flow.rdlb-fullscreen .screen:not([data-idx="3"]) > .body > .content > .footer{ position:sticky !important; bottom:0 !important; margin-top:auto !important; flex-shrink:0 !important; z-index:5 !important; } /* Details (idx 3): footer is a normal inline flex child after the consent box. */ .rdlb-flow.rdlb-fullscreen .screen[data-idx="3"] > .body > .content > .footer{ position:static !important; bottom:auto !important; margin-top:18px !important; flex-shrink:0 !important; } /* Pay screen footer is a direct child of .screen, outside .body; pin it to the bottom of the screen. .body above it scrolls. */ .rdlb-flow.rdlb-fullscreen .screen[data-idx="5"] > .footer, .rdlb-flow.rdlb-fullscreen .screen.is-dark > .footer{ flex-shrink:0 !important; } html.rdlb-fs-lock, body.rdlb-fs-lock{overflow:hidden !important;} /* v2.9.449 — natural full-page scroll (flag-gated; booking.js moves .topbar + .heading into .content). Un-pin the CTA so it flows at the bottom of the scrolled content instead of sticking. Only active under .rdlb-natural-scroll (opt-in ?rdscroll=natural). */ .rdlb-flow.rdlb-natural-scroll.rdlb-fullscreen .screen > .body > .content > .footer{ position:static !important; bottom:auto !important; margin-top:24px !important; } .rdlb-flow.rdlb-natural-scroll.rdlb-fullscreen .screen > .footer{ position:static !important; bottom:auto !important; margin-top:24px !important; } /* Close (X) button — only shown in full-screen mode. */ .rdlb-flow .rdlb-fs-close{ display:none; } .rdlb-flow.rdlb-fullscreen .rdlb-fs-close{ /* v2.9.56: layout-critical props pinned with !important so the live stack (Flatsome button resets / WP Rocket CSS combination reordering) cannot suppress the close X while full-screen is otherwise active. Matches the icon-hardening pattern used elsewhere (2.9.39/41/42). Cosmetic props below stay un-pinned so the desktop dark variant can still override them. */ display:flex !important; position:fixed !important; top:16px !important;right:16px !important; z-index:2147483001 !important; width:42px !important;height:42px !important; visibility:visible !important; opacity:1 !important; align-items:center;justify-content:center; border-radius:50%; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); color:#fff; cursor:pointer; backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); box-shadow:0 4px 14px rgba(0,0,0,.18); transition:background .15s ease, transform .15s ease; } .rdlb-flow.rdlb-fullscreen .rdlb-fs-close:hover{ background:rgba(255,255,255,.26); transform:scale(1.05); } .rdlb-flow.rdlb-fullscreen .rdlb-fs-close svg{width:20px;height:20px;stroke-width:2.4} /* On screens whose top area is light (cream/white confirm column on desktop), give the X a dark variant so it stays visible against a pale background. */ @media(min-width:1024px){ .rdlb-flow.rdlb-fullscreen .rdlb-fs-close{ background:rgba(14,18,48,.08); border-color:rgba(14,18,48,.12); color:var(--ink,#0f1733) !important; backdrop-filter:none;-webkit-backdrop-filter:none; } .rdlb-flow.rdlb-fullscreen .rdlb-fs-close:hover{background:rgba(14,18,48,.16);} } .rdlb-flow button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit;padding:0;text-transform:none;letter-spacing:inherit;min-height:0;min-width:0;box-shadow:none;-webkit-appearance:none;appearance:none;margin:0;box-sizing:border-box}.rdlb-flow input{font-family:inherit;border:0;outline:none;background:transparent;color:inherit;box-sizing:border-box} /* ============================================================ FLATSOME / WORDPRESS DEFENCE LAYER The reference HTML is a clean standalone document, so it never has to defend against a theme's global element styling. On the live site, Flatsome injects defaults for lists, links, forms, headings and inline text. These resets neutralise only those theme defaults; the flow's own classed rules build on top. Scoped under .rdlb-flow so nothing leaks to the rest of the page. ============================================================ */ .rdlb-flow ul,.rdlb-flow ol{list-style:none;margin:0;padding:0} .rdlb-flow li{margin:0;padding:0;list-style:none} .rdlb-flow .dt-hero-list,.rdlb-flow .php-list{list-style:none !important;margin:0;padding:0} .rdlb-flow .dt-hero-list li,.rdlb-flow .php-list li{list-style:none !important;margin:0} .rdlb-flow .dt-hero-list li::marker,.rdlb-flow .php-list li::marker{content:"" !important} .rdlb-flow p{margin:0} .rdlb-flow h1,.rdlb-flow h2,.rdlb-flow h3,.rdlb-flow h4,.rdlb-flow h5,.rdlb-flow h6{margin:0;font-family:inherit;font-weight:inherit;line-height:inherit;color:inherit} .rdlb-flow strong,.rdlb-flow b{font-weight:700} .rdlb-flow em,.rdlb-flow i{font-style:normal} .rdlb-flow small{font-size:inherit} .rdlb-flow label{margin:0;font-weight:inherit;display:inherit} .rdlb-flow form{margin:0;padding:0} .rdlb-flow textarea{font-family:inherit;border:0;outline:none;background:transparent;color:inherit;resize:none} .rdlb-flow .notes-textarea{border:0 !important;outline:0 !important;box-shadow:none !important;background:transparent !important;border-radius:0 !important;-webkit-appearance:none !important;appearance:none !important;min-height:84px !important} .rdlb-flow select{font-family:inherit;border:0;outline:none;background:transparent;color:inherit} .rdlb-flow a{text-decoration:none;color:inherit} .rdlb-flow a:hover,.rdlb-flow a:focus{text-decoration:none} .rdlb-flow button:focus,.rdlb-flow a:focus{outline:none} .rdlb-flow button:focus-visible,.rdlb-flow a:focus-visible{outline:2px solid var(--red);outline-offset:2px} /* Flatsome inline-SVG fix (well-known issue): a viewBox-only with no width/height attribute has no intrinsic size, so inside Flatsome's flex/grid it can balloon to fill available space (e.g. the hp-icon rendering 366x366). Flatsome also sets svg{overflow:hidden} and can override fill. Give every in-flow SVG a sane default size + cap; the flow's specific `.x svg{width:Npx}` rules are higher-specificity and still win for each named icon. */ .rdlb-flow svg{ width:1em;height:1em; max-width:100%; flex:0 0 auto; vertical-align:middle; overflow:visible; } /* Stroke protection: our icons are stroke-based outlines. Some themes ship icon resets like `svg line,svg path{stroke:none;fill:currentColor}` which erase them (button background shows, icon does not). Pin stroke on the children with .rdlb-flow-scoped specificity so those resets cannot blank our icons. Icons that are intentionally filled (fill:currentColor on the ) are unaffected because this targets stroke, not fill, and only forces fill:none where the element is stroke-drawn. We scope to elements that use stroke by leaving filled icons' own fill intact via the svg-level fill. */ .rdlb-flow svg[stroke] line,.rdlb-flow svg[stroke] path,.rdlb-flow svg[stroke] polyline, .rdlb-flow svg[stroke] circle,.rdlb-flow svg[stroke] rect,.rdlb-flow svg[stroke] polygon{stroke:currentColor !important} .rdlb-flow svg[fill="none"] line,.rdlb-flow svg[fill="none"] path,.rdlb-flow svg[fill="none"] polyline, .rdlb-flow svg[fill="none"] circle,.rdlb-flow svg[fill="none"] rect,.rdlb-flow svg[fill="none"] polygon{fill:none !important} /* ════════════════════════════════════════════════════════════════ v2.9.67 · MOBILE = PURE-CSS FULL-SCREEN (no JS, delay-engine proof) The audit showed the page-scroll/"button rides down" bug came from the flow being sized by JS (fitFlowHeight) that lives in the WP-Rocket-DELAYED booking.js, so on load the flow was too tall and the PAGE scrolled. The reference model is a fixed-viewport flow with internal scrolling and the page never scrolling. We now achieve that with PURE CSS that applies on first paint, regardless of whether any JS has run: - the flow is position:fixed; inset:0; height:100dvh (covers the theme header on mobile, exactly like desktop's full-screen) so the page behind it cannot scroll; - harness/phone/stack/screen are a height-locked flex chain; - .body is the single internal scroller (flex:1; min-height:0; overflow -y:auto) - the reference's own flex idiom, with scroll enabled because the Details and Pay screens genuinely exceed the viewport; - the footer sits after .body in the flex column, so it is pinned at the bottom by layout alone (no position:fixed maths, no sticky, no JS). ════════════════════════════════════════════════════════════════ */ @media(max-width:1023px){ .rdlb-flow{ position:fixed !important; inset:0 !important;top:0 !important;left:0 !important;right:0 !important;bottom:0 !important; width:100vw !important;max-width:none !important; height:100vh !important;height:100dvh !important; min-height:0 !important;max-height:none !important;margin:0 !important; z-index:2147483000 !important; overflow:hidden !important; background:var(--bg); } .rdlb-flow .harness{padding:0 !important;margin:0 !important;height:100% !important;min-height:0 !important;display:flex !important;flex-direction:column !important;align-items:stretch !important;justify-content:flex-start !important;background:var(--navy)} .rdlb-flow .harness::before{display:none !important} .rdlb-flow .phone{width:100% !important;height:100% !important;min-height:0 !important;border-radius:0 !important;border:0 !important;box-shadow:none !important;display:flex !important;flex-direction:column !important;overflow:hidden !important} .rdlb-flow .phone::before{display:none !important} } /* ──────────── STACK ──────────── */ .rdlb-flow .stack{flex:1;position:relative;overflow:hidden;background:var(--bg)}.rdlb-flow .screen{ position:absolute;inset:0;display:flex;flex-direction:column; transform:translateY(100%); transition:transform .55s cubic-bezier(.32,1.10,.42,1); will-change:transform; } /* v2.9.67: mobile internal-scroll model (replaces the 2.9.60-2.9.66 sticky- footer scaffolding). The screen is a height-locked flex column; .body is the only scroller; the footer is a non-scrolling flex child pinned at the bottom by layout. Because the whole chain is height-locked by CSS (the full-screen lock above), the page never scrolls and the CTA never rides away - and it works on first paint with no JS, so the WP Rocket delay is irrelevant. */ @media(max-width:1023px){ .rdlb-flow .stack{flex:1 1 auto !important;min-height:0 !important;overflow:hidden !important} .rdlb-flow .screen{ overflow:hidden !important; display:flex !important;flex-direction:column !important; } /* .body is the single scroll region. The footer lives inside .content on screens 0-3 and as a .screen child on the pay screen, so make BOTH the body and content flex columns and let the body scroll. */ .rdlb-flow .screen > .body{ flex:1 1 auto !important;min-height:0 !important;height:auto !important; overflow-y:auto !important;overflow-x:hidden !important; -webkit-overflow-scrolling:touch; display:flex !important;flex-direction:column !important; } .rdlb-flow .screen > .body > .heading{flex:0 0 auto !important} .rdlb-flow .screen > .body > .content{ flex:1 1 auto !important;min-height:0 !important; display:flex !important;flex-direction:column !important; overflow:visible !important; } /* Footer: a normal non-scrolling flex child pinned to the bottom by margin -top:auto. NOT sticky, NOT fixed - it is simply the last item in the height-locked column, so it is always visible at the bottom and the body scrolls above it. Works on both footer nestings. */ .rdlb-flow .screen > .body > .content > .footer, .rdlb-flow .screen > .footer{ position:static !important; margin-top:auto !important; flex:0 0 auto !important; background:transparent !important; padding-bottom:max(20px, env(safe-area-inset-bottom)) !important; } /* The pay-screen footer is a .screen child; its scroller is .body above it. */ .rdlb-flow .screen[data-idx="5"] > .body{flex:1 1 auto !important;min-height:0 !important;overflow-y:auto !important;-webkit-overflow-scrolling:touch} /* v2.9.68: on the Details screen (idx 3) the Review button must flow INLINE, directly after the consent ("Email me about my quote") box - not pinned to the bottom. The screen scrolls, so the button is reached at the natural end of the content, matching the reference. Remove the margin-top:auto pin here only; screens 0-2 keep the bottom-seated button and the pay screen stays pinned. */ .rdlb-flow .screen[data-idx="3"] > .body > .content > .footer{ margin-top:18px !important; } } .rdlb-flow .screen.is-active{transform:translateY(0)}.rdlb-flow .screen.is-past{transform:translateY(-100%)}.rdlb-flow .stack.is-dragging .screen{transition:none}/* ──────────── TOP BAR ──────────── */ .rdlb-flow .topbar{ flex-shrink:0; padding:46px 24px 0; display:flex;align-items:center;gap:12px; }.rdlb-flow .topbar-back{ width:36px;height:36px;border-radius:50%; background:var(--surface);border:1px solid var(--line); display:flex;align-items:center;justify-content:center; color:var(--ink-2);transition:all .2s; flex-shrink:0; }.rdlb-flow .topbar-back:hover{background:var(--surface-2);color:var(--ink)}.rdlb-flow .topbar-back svg{width:16px;height:16px}.rdlb-flow .topbar-back.is-hidden{visibility:hidden;pointer-events:none}.rdlb-flow .topbar-progress{ flex:1;height:5px;background:var(--line); border-radius:999px;overflow:hidden; }.rdlb-flow .topbar-progress-fill{ height:100%;background:var(--red); border-radius:999px; transition:width .55s cubic-bezier(.32,1.10,.42,1); }.rdlb-flow .topbar-step{ font:700 11px/1 'Plus Jakarta Sans'; color:var(--ink-3);letter-spacing:.06em; flex-shrink:0; }.rdlb-flow .screen.is-dark .topbar-back{ background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.85); }.rdlb-flow .screen.is-dark .topbar-back:hover{background:rgba(255,255,255,.18);color:#fff}.rdlb-flow .screen.is-dark .topbar-progress{background:rgba(255,255,255,.14)}.rdlb-flow .screen.is-dark .topbar-progress-fill{background:#fff}.rdlb-flow .screen.is-dark .topbar-step{color:rgba(255,255,255,.65)}/* ──────────── CONTENT BODY ──────────── */ .rdlb-flow .body{ flex:1;display:flex;flex-direction:column; padding:26px 24px 0;min-height:0; }.rdlb-flow .heading{ flex-shrink:0; margin-bottom:24px; }.rdlb-flow .title{ font:700 30px/1.10 'Plus Jakarta Sans'; color:var(--ink); letter-spacing:-.025em; margin:0; }.rdlb-flow .screen.is-dark .title-pop, .rdlb-flow .screen[data-idx="0"] .title-pop{ background:linear-gradient(135deg,#FFB0B0 0%,#FF7575 45%,#e55353 100%); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; filter:drop-shadow(0 4px 20px rgba(229,83,83,.40)); }.rdlb-flow .subtitle{ margin:8px 0 0; font:500 15px/1.45 'Plus Jakarta Sans'; color:var(--ink-2); max-width:34ch; letter-spacing:-.005em; }.rdlb-flow .screen.is-dark .title{color:#fff}.rdlb-flow .screen.is-dark .subtitle{color:rgba(255,255,255,.72)}.rdlb-flow .content{ flex:1;display:flex;flex-direction:column; min-height:0; overflow:auto; scrollbar-width:none; -ms-overflow-style:none; }.rdlb-flow .content::-webkit-scrollbar{display:none}/* ──────────── FOOTER · CTA + swipe affordance ──────────── */ .rdlb-flow .footer{ flex-shrink:0; padding:14px 24px 22px; background:linear-gradient(180deg,rgba(250,250,251,0) 0%,var(--bg) 28%); }.rdlb-flow .screen.is-dark .footer{background:linear-gradient(180deg,rgba(0,8,66,0) 0%,var(--navy) 28%)}.rdlb-flow .cta{ width:100%;padding:18px 22px; background:var(--red); color:#fff;border-radius:18px; font:700 17px/1 'Plus Jakarta Sans'; letter-spacing:-.01em; display:flex;align-items:center;justify-content:center;gap:10px; transition:transform .2s cubic-bezier(.32,1.10,.42,1),background .2s,box-shadow .25s,opacity .2s; box-shadow:var(--shadow-red); }.rdlb-flow .cta:hover{background:var(--red-dark);transform:translateY(-1px);box-shadow:0 18px 40px -10px rgba(229,83,83,.55)}.rdlb-flow .cta:active{transform:translateY(0) scale(.985)}.rdlb-flow .cta:disabled, .rdlb-flow .cta.is-disabled{ background:var(--line);color:var(--ink-4); box-shadow:none;cursor:not-allowed;pointer-events:none; }.rdlb-flow .screen.is-dark .cta:disabled, .rdlb-flow .screen.is-dark .cta.is-disabled{background:rgba(255,255,255,.10);color:rgba(255,255,255,.40)}.rdlb-flow .cta svg{width:18px;height:18px;stroke-width:2.6}.rdlb-flow .swipe-hint{ display:none !important; margin-top:10px; text-align:center; font:700 10.5px/1 'Plus Jakarta Sans'; color:var(--ink-4); text-transform:uppercase;letter-spacing:.14em; }.rdlb-flow .screen.is-dark .swipe-hint{color:rgba(255,255,255,.40)}/* ───────────────────────────────────────────────── SCREEN 1 · POSTCODE + ADDRESS CONFIRMATION ───────────────────────────────────────────────── */ .rdlb-flow .pc-stage{ flex:1;display:flex;flex-direction:column; align-items:stretch;justify-content:flex-start; position:relative; }.rdlb-flow .screen[data-idx="0"]{ background: radial-gradient(ellipse 700px 600px at 30% 10%, rgba(229,83,83,.30) 0%, transparent 60%), radial-gradient(ellipse 600px 500px at 90% 90%, rgba(229,83,83,.18) 0%, transparent 60%), linear-gradient(165deg, #1a2056 0%, #000625 100%); color:#fff; }.rdlb-flow .screen[data-idx="0"]::after{ content:"";position:absolute;inset:0; background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px); background-size:24px 24px; mask-image:radial-gradient(ellipse 100% 100% at center,#000 20%,transparent 75%); -webkit-mask-image:radial-gradient(ellipse 100% 100% at center,#000 20%,transparent 75%); pointer-events:none; }.rdlb-flow .screen[data-idx="0"] .topbar-back{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.85)}.rdlb-flow .screen[data-idx="0"] .topbar-progress{background:rgba(255,255,255,.14)}.rdlb-flow .screen[data-idx="0"] .topbar-progress-fill{background:#fff}.rdlb-flow .screen[data-idx="0"] .topbar-step{color:rgba(255,255,255,.70)}.rdlb-flow .screen[data-idx="0"] .title{color:#fff}.rdlb-flow .screen[data-idx="0"] .subtitle{color:rgba(255,255,255,.72)}.rdlb-flow .screen[data-idx="0"] .pc-hero::before{ background-image:none; }.rdlb-flow .screen[data-idx="0"] .pc-float{ background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); color:#fff; box-shadow:0 10px 24px -8px rgba(0,0,0,.30); }/* Inputs sit on dark · refined card pattern */ .rdlb-flow .screen[data-idx="0"] .pc-input-wrap{ background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); border-radius:18px; padding:14px 18px 12px; margin-top:6px; }.rdlb-flow .screen[data-idx="0"] .pc-input{ color:#fff; padding:8px 0 8px; font:700 28px/1 'Plus Jakarta Sans'; } /* v2.9.58: the postcode field is autocomplete="off", but iOS/WebKit can still paint a remembered value with a yellow autofill background. Neutralise it so the field always reads as the dark design (no yellow box, white text). */ .rdlb-flow .screen[data-idx="0"] .pc-input:-webkit-autofill, .rdlb-flow .screen[data-idx="0"] .pc-input:-webkit-autofill:hover, .rdlb-flow .screen[data-idx="0"] .pc-input:-webkit-autofill:focus{ -webkit-text-fill-color:#fff; -webkit-box-shadow:0 0 0 1000px transparent inset; box-shadow:0 0 0 1000px transparent inset; transition:background-color 9999s ease-in-out 0s; caret-color:#fff; }.rdlb-flow .screen[data-idx="0"] .pc-input::placeholder{color:rgba(255,255,255,.50)}.rdlb-flow .screen[data-idx="0"] .pc-input-wrap::before{display:none}.rdlb-flow .screen[data-idx="0"] .pc-input-wrap::after{display:none}.rdlb-flow .screen[data-idx="0"] .pc-helper{color:rgba(255,255,255,.55)}.rdlb-flow .screen[data-idx="0"] .pc-helper.is-error{color:#FFB4B4}/* Address picker as bright cards on dark */ .rdlb-flow .screen[data-idx="0"] .address-list{ background:rgba(255,255,255,.10); box-shadow:none; border-color:rgba(255,255,255,.16); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); }/* Hide the "Select your address · N nearby" header when attached */ .rdlb-flow .screen[data-idx="0"] .address-list .address-list-header{display:none}.rdlb-flow .screen[data-idx="0"] .address-option{ background:transparent; color:#fff; border-bottom:1px solid rgba(255,255,255,.06); }.rdlb-flow .screen[data-idx="0"] .address-option:last-child{border-bottom:0}.rdlb-flow .screen[data-idx="0"] .address-option-text{color:#fff}.rdlb-flow .screen[data-idx="0"] .address-option-text small{color:rgba(255,255,255,.50)}.rdlb-flow .screen[data-idx="0"] .address-option-radio{ border-color:rgba(255,255,255,.28); background:transparent; }.rdlb-flow .screen[data-idx="0"] .address-option:hover, .rdlb-flow .screen[data-idx="0"] .address-option:focus-visible{ background:rgba(255,255,255,.06); }.rdlb-flow .screen[data-idx="0"] .address-option.is-active{ background:rgba(229,83,83,.18); }.rdlb-flow .screen[data-idx="0"] .address-option.is-active .address-option-radio{ border-color:var(--red);background:var(--red); }.rdlb-flow .screen[data-idx="0"] .address-option.is-suggested{ background:transparent; }.rdlb-flow .screen[data-idx="0"] .address-option.is-suggested.is-active{ background:rgba(229,83,83,.18); }.rdlb-flow .screen[data-idx="0"] .address-option.is-manual .address-option-text{ color:rgba(255,255,255,.65); }.rdlb-flow .screen[data-idx="0"] .address-list-scroll::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18); }.rdlb-flow .screen[data-idx="0"] .footer{ background:linear-gradient(180deg,rgba(0,8,66,0) 0%, rgba(0,8,66,.85) 50%, #000625 100%); }.rdlb-flow .screen[data-idx="0"] .cta.is-disabled, .rdlb-flow .screen[data-idx="0"] .cta:disabled{ background:rgba(255,255,255,.10);color:rgba(255,255,255,.40); }.rdlb-flow .screen[data-idx="0"] .swipe-hint{color:rgba(255,255,255,.45)}.rdlb-flow .pc-hero{ position:relative; height:172px; margin:6px 0 12px; display:flex;align-items:center;justify-content:center; }.rdlb-flow .pc-hero::before{ content:"";position:absolute;inset:0; background-image:radial-gradient(rgba(14,18,48,.06) 1px,transparent 1px); background-size:20px 20px; mask-image:radial-gradient(ellipse 70% 70% at center,#000 0%,transparent 70%); -webkit-mask-image:radial-gradient(ellipse 70% 70% at center,#000 0%,transparent 70%); pointer-events:none; }.rdlb-flow .pc-floats{position:absolute;inset:0;pointer-events:none}.rdlb-flow .pc-float{ position:absolute; width:38px;height:38px;border-radius:13px; background:#fff; border:1px solid var(--line); box-shadow:0 8px 16px -4px rgba(14,18,48,.16); display:flex;align-items:center;justify-content:center; font:800 13px/1 'Plus Jakarta Sans'; color:var(--ink); }.rdlb-flow .pc-float.x1{top:20px;left:30px;animation:floatA 5s ease-in-out infinite}.rdlb-flow .pc-float.x2{top:36px;right:32px;animation:floatA 4.5s ease-in-out .4s infinite}.rdlb-flow .pc-float.x3{bottom:18px;left:48px;animation:floatA 6s ease-in-out .8s infinite} @keyframes floatA{0%, 100%{transform:translateY(0)}50%{transform:translateY(-5px)}}.rdlb-flow .pc-pin{ width:118px;height:118px;border-radius:36px; background:var(--red); display:flex;align-items:center;justify-content:center; color:#fff;position:relative; box-shadow:0 30px 60px -12px rgba(229,83,83,.45),0 1px 0 rgba(255,255,255,.20) inset; animation:pinFloat 4s ease-in-out infinite; } @keyframes pinFloat{0%, 100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-6px) rotate(4deg)}}.rdlb-flow .pc-pin svg{width:50px;height:50px;stroke-width:2.4}.rdlb-flow .pc-pin::before, .rdlb-flow .pc-pin::after{ content:"";position:absolute;border-radius:36px;pointer-events:none; }.rdlb-flow .pc-pin::before{ inset:-12px;border:2px solid rgba(229,83,83,.35); animation:pinRing 2.6s ease-out infinite; }.rdlb-flow .pc-pin::after{ inset:-26px;border:2px solid rgba(229,83,83,.18); animation:pinRing 2.6s ease-out .9s infinite; } @keyframes pinRing{0%{transform:scale(.90);opacity:.55}100%{transform:scale(1.22);opacity:0}}.rdlb-flow .pc-input-wrap{ position:relative;width:100%; }.rdlb-flow .pc-input{ width:100%;padding:18px 0 16px; background:transparent;border:0; font:700 36px/1 'Plus Jakarta Sans'; color:var(--ink); letter-spacing:.04em;text-transform:uppercase;text-align:center; transition:color .2s; }.rdlb-flow .pc-input::placeholder{color:var(--ink-4);font-weight:600;letter-spacing:.01em;text-transform:none}.rdlb-flow .pc-input-wrap::before{ content:"";position:absolute;bottom:6px;left:0;right:0;height:2px; background:var(--line);border-radius:999px; }.rdlb-flow .pc-input-wrap::after{ content:"";position:absolute;bottom:6px;left:50%;width:0;height:2px; background:var(--red);border-radius:999px; transition:width .4s cubic-bezier(.22,1,.36,1),left .4s cubic-bezier(.22,1,.36,1); }.rdlb-flow .pc-input-wrap:has(.pc-input:focus)::after, .rdlb-flow .pc-input-wrap:has(.pc-input.is-valid)::after{width:100%;left:0}.rdlb-flow .pc-helper{ margin-top:12px;text-align:center; font:600 12px/1.4 'Plus Jakarta Sans'; color:var(--ink-3); min-height:18px; transition:color .2s,opacity .2s; }.rdlb-flow .pc-helper.is-error{color:var(--red)}/* Local social proof strip (screen 1) */ .rdlb-flow .local-proof.is-hidden{ opacity:0;pointer-events:none; max-height:0;margin-top:0; padding-top:0;padding-bottom:0; border-width:0;overflow:hidden; transition:opacity .2s,max-height .25s,margin .25s,padding .25s,border-width .25s; }.rdlb-flow .local-proof{ margin-top:14px; display:inline-flex;align-items:center;gap:8px; padding:8px 13px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:999px; align-self:center; font:600 11.5px/1 'Plus Jakarta Sans'; color:rgba(255,255,255,.78); letter-spacing:-.005em; backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); animation:proofFadeIn .6s cubic-bezier(.32,1.10,.42,1) .8s both; margin-left:auto;margin-right:auto; }.rdlb-flow .local-proof strong{color:#fff;font-weight:800}.rdlb-flow .local-proof-dot{ width:7px;height:7px;border-radius:50%; background:#4ADE80; box-shadow:0 0 0 0 rgba(74,222,128,.55); animation:proofPulse 2s ease-out infinite; flex-shrink:0; } @keyframes proofPulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.55)}70%{box-shadow:0 0 0 8px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}} @keyframes proofFadeIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}/* Centre it within the column */ .rdlb-flow .pc-stage{align-items:stretch}.rdlb-flow .pc-stage .local-proof{display:inline-flex;margin-left:auto;margin-right:auto}/* Address picker list · replaces auto-confirm card */ .rdlb-flow .address-list{ margin-top:8px; background:var(--surface); border:1.5px solid var(--line); border-radius:16px; overflow:hidden; opacity:0; max-height:0; transform:translateY(-4px); transition:opacity .25s ease, max-height .35s cubic-bezier(.32,1.10,.42,1), transform .3s cubic-bezier(.32,1.10,.42,1), margin-top .3s ease; pointer-events:none; }/* When attached to the postcode input, drop the gap + share the radius */ .rdlb-flow .pc-stage:has(.address-list.is-visible) .pc-helper{display:none}.rdlb-flow .pc-stage:has(.address-list.is-visible) .pc-input-wrap{ border-bottom-left-radius:0 !important; border-bottom-right-radius:0 !important; border-bottom:1px solid rgba(255,255,255,.08) !important; }.rdlb-flow .address-list.is-visible{ margin-top:0; border-top-left-radius:0; border-top-right-radius:0; }.rdlb-flow .address-list.is-visible{ opacity:1; max-height:340px; transform:translateY(0); pointer-events:auto; margin-top:0; border-top-left-radius:0; border-top-right-radius:0; }.rdlb-flow .address-list-header{ padding:12px 14px 8px; border-bottom:1px solid var(--line); display:flex;align-items:center;justify-content:space-between;gap:10px; }.rdlb-flow .address-list-title{ font:700 10.5px/1 'Plus Jakarta Sans'; color:var(--ink-3); text-transform:uppercase;letter-spacing:.14em; }.rdlb-flow .address-list-meta{ font:600 11px/1.2 'Plus Jakarta Sans'; color:var(--ink-2); }.rdlb-flow .address-list-meta strong{color:var(--ink);font-weight:800}.rdlb-flow .address-list-scroll{ max-height:248px; overflow-y:auto; scrollbar-width:thin;scrollbar-color:var(--ink-4) transparent; }.rdlb-flow .address-list-scroll::-webkit-scrollbar{width:4px}.rdlb-flow .address-list-scroll::-webkit-scrollbar-thumb{background:var(--ink-4);border-radius:4px}.rdlb-flow .address-option{ width:100%;padding:12px 14px; display:flex;align-items:center;gap:11px; text-align:left; border-bottom:1px solid var(--line); background:transparent; transition:background .15s; }.rdlb-flow .address-option:last-child{border-bottom:0}.rdlb-flow .address-option:hover{background:var(--bg)}.rdlb-flow .address-option-radio{ width:20px;height:20px;border-radius:50%; border:1.5px solid var(--ink-4); display:flex;align-items:center;justify-content:center; flex-shrink:0; transition:all .2s; }.rdlb-flow .address-option.is-active{background:var(--red-tint)}.rdlb-flow .address-option.is-suggested{background:transparent}.rdlb-flow .address-option.is-suggested.is-active{background:var(--red-tint)}.rdlb-flow .address-option.is-active .address-option-flag{display:none}.rdlb-flow .address-option.is-active .address-option-radio{border-color:var(--red);background:var(--red)}.rdlb-flow .address-option-radio svg{width:10px;height:10px;color:#fff;stroke-width:3.2;opacity:0;transform:scale(.5);transition:all .2s}.rdlb-flow .address-option.is-active .address-option-radio svg{opacity:1;transform:scale(1)}.rdlb-flow .address-option-text{ flex:1;min-width:0; font:600 13.5px/1.3 'Plus Jakarta Sans'; color:var(--ink);letter-spacing:-.005em; }.rdlb-flow .address-option-text small{ display:block; font:500 11.5px/1.3 'Plus Jakarta Sans'; color:var(--ink-3); margin-top:2px; }.rdlb-flow .address-option.is-manual{background:var(--bg)}.rdlb-flow .address-option.is-manual .address-option-text{color:var(--ink-2);font-weight:600}/* Address confirmation card · slides in once postcode is valid */ .rdlb-flow .pc-address{ margin-top:24px; padding:14px 14px 14px 14px; background:var(--surface); border:1px solid var(--line); border-radius:16px; display:flex;align-items:center;gap:12px; opacity:0;transform:translateY(12px); transition:opacity .35s ease,transform .35s cubic-bezier(.32,1.10,.42,1); pointer-events:none; }.rdlb-flow .pc-address.is-visible{opacity:1;transform:translateY(0);pointer-events:auto} @keyframes spin{to{transform:rotate(360deg)}}/* ───────────────────────────────────────────────── SCREEN 2 · MANUAL / AUTOMATIC ───────────────────────────────────────────────── */ .rdlb-flow .trans-stack{ display:flex;flex-direction:column;gap:12px; margin-top:4px; }.rdlb-flow .trans-tile{ width:100%;padding:20px 22px; background:var(--surface); border:1.5px solid var(--line); border-radius:20px;text-align:left; display:flex;align-items:center;gap:16px; transition:transform .25s cubic-bezier(.32,1.10,.42,1),border-color .2s,background .2s,box-shadow .25s; position:relative; }.rdlb-flow .trans-tile:hover{border-color:var(--ink-4);transform:translateY(-1px)}.rdlb-flow .trans-tile:active{transform:translateY(0) scale(.99)}.rdlb-flow .trans-tile.is-active{ border-color:var(--red); background:var(--surface); box-shadow:0 0 0 4px var(--red-tint),var(--shadow-card); }.rdlb-flow .tt-glyph{ width:48px;height:48px;border-radius:14px; background:var(--bg); color:var(--navy); display:flex;align-items:center;justify-content:center; flex-shrink:0; transition:background .2s,color .2s; border:1px solid var(--line); }.rdlb-flow .trans-tile.is-active .tt-glyph{background:var(--navy);color:#fff;border-color:var(--navy)}.rdlb-flow .tt-glyph svg{width:22px;height:22px;stroke-width:2}.rdlb-flow .tt-body{flex:1;min-width:0}.rdlb-flow .tt-name{ font:700 19px/1.1 'Plus Jakarta Sans'; color:var(--ink);letter-spacing:-.015em; }.rdlb-flow .tt-sub{ margin-top:3px; font:500 13px/1.3 'Plus Jakarta Sans'; color:var(--ink-3); }.rdlb-flow .tt-radio{ width:22px;height:22px;border-radius:50%; border:1.5px solid var(--ink-4); display:flex;align-items:center;justify-content:center; flex-shrink:0; transition:all .2s; }.rdlb-flow .trans-tile.is-active .tt-radio{ border-color:var(--red);background:var(--red); }.rdlb-flow .tt-radio svg{ width:11px;height:11px;color:#fff;stroke-width:3.2; opacity:0;transform:scale(.5);transition:all .2s; }.rdlb-flow .trans-tile.is-active .tt-radio svg{opacity:1;transform:scale(1)}/* ════════════════════════════════════════════════════ v9.1 ADDITIONS · mobile ════════════════════════════════════════════════════ */ .rdlb-flow .tt-name-row{display:block;margin-bottom:3px}.rdlb-flow .tt-name-row .tt-inline-tag{margin-bottom:7px}.rdlb-flow .tt-name-row .tt-name{display:block}.rdlb-flow .trans-tile.is-active .tt-inline-tag{ background:var(--red-tint); border-color:rgba(229,83,83,.30); color:var(--red); }.rdlb-flow .trans-tile.is-active .tt-inline-tag::before{ background:var(--red); box-shadow:0 0 0 3px rgba(229,83,83,.18); }.rdlb-flow .trans-tile.is-active .tt-glyph{background:var(--red-tint);color:var(--red);border-color:transparent}.rdlb-flow .trans-tile.is-active{ border-color:var(--red); background:#fff; box-shadow:0 0 0 4px var(--red-tint),var(--shadow-card); }/* Heavy-lift guarantee block above wallet button */ .rdlb-flow .guarantee{ margin-top:18px; padding:16px 18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:16px; display:flex;gap:12px;align-items:flex-start; position:relative;overflow:hidden; }.rdlb-flow .guarantee::before{ content:"";position:absolute;inset:0; background:radial-gradient(ellipse 220px 160px at 90% 10%, rgba(229,83,83,.30) 0%, transparent 60%); pointer-events:none; }/* Pre-auth explainer · info icon + modal */ .rdlb-flow .tp-widget{ margin-top:6px; margin-bottom:8px; display:flex;flex-direction:column;align-items:center;gap:12px; }.rdlb-flow .tp-chip, .rdlb-flow .tp-google{ display:flex;align-items:center;gap:8px; font:700 12px/1 'Plus Jakarta Sans';color:#fff; white-space:nowrap; }.rdlb-flow .tp-div{display:none}.rdlb-flow .tp-chip{display:flex;align-items:center;gap:7px;font:700 12px/1 'Plus Jakarta Sans';color:#fff}.rdlb-flow .tp-word{color:#7ED8B1;font:800 12px/1 'Plus Jakarta Sans';letter-spacing:-.005em}.rdlb-flow .tp-stars{display:flex;gap:2px;background:#00B67A;padding:3px 5px;border-radius:3px}.rdlb-flow .tp-stars svg{width:10px;height:10px;color:#fff}.rdlb-flow .tp-brand{font:800 12px/1 'Plus Jakarta Sans';color:#fff;letter-spacing:-.01em}.rdlb-flow .tp-brand span{color:#7ED8B1}.rdlb-flow .tp-google{display:flex;align-items:center;gap:5px;font:700 11px/1 'Plus Jakarta Sans';color:rgba(255,255,255,.85)}.rdlb-flow .tp-google strong{color:#fff;font-weight:800}.rdlb-flow .tp-google .stars{display:flex;gap:1px;color:#FBBC04}.rdlb-flow .tp-google .stars svg{width:10px;height:10px}.rdlb-flow .tp-div{width:1px;height:13px;background:rgba(255,255,255,.18)}/* Encrypted reassure pill */ .rdlb-flow .reassure{ margin-top:14px; padding:9px 12px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:11px; font:700 11.5px/1.3 'Plus Jakarta Sans'; color:rgba(255,255,255,.85); display:flex;align-items:center;gap:8px; letter-spacing:-.005em; }.rdlb-flow .reassure svg{width:13px;height:13px;stroke-width:2.6;flex-shrink:0;color:rgba(255,255,255,.65)} /* S6 · Uber-style map (mobile) */ @keyframes uberPing{0%{transform:translate(-50%,-50%) scale(.4);opacity:.6}100%{transform:translate(-50%,-50%) scale(1.6);opacity:0}}/* Resume banner mobile */ .rdlb-flow .bf-resume-banner{ position:fixed;top:8px;left:8px;right:8px; z-index:2147483100; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:0 18px 40px -12px rgba(14,18,48,.30); padding:12px 14px; display:flex;align-items:center;gap:10px; opacity:0;transform:translateY(-8px); transition:opacity .35s ease,transform .35s cubic-bezier(.32,1.10,.42,1); pointer-events:none; }.rdlb-flow .bf-resume-banner.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}.rdlb-flow .bf-resume-icon{width:30px;height:30px;border-radius:9px;background:var(--red-tint);color:var(--red);display:flex;align-items:center;justify-content:center;flex-shrink:0}.rdlb-flow .bf-resume-icon svg{width:14px;height:14px;stroke-width:2.4}.rdlb-flow .bf-resume-body{flex:1;min-width:0}.rdlb-flow .bf-resume-title{font:800 12px/1.2 'Plus Jakarta Sans';color:var(--ink);letter-spacing:-.005em}.rdlb-flow .bf-resume-detail{margin-top:1px;font:500 11px/1.3 'Plus Jakarta Sans';color:var(--ink-3)}.rdlb-flow .bf-resume-actions{display:flex;gap:6px;flex-shrink:0}.rdlb-flow .bf-resume-btn{padding:8px 10px;border-radius:8px;font:800 10.5px/1 'Plus Jakarta Sans';letter-spacing:-.005em}.rdlb-flow .bf-resume-btn.is-primary{background:var(--red);color:#fff}.rdlb-flow .bf-resume-btn.is-secondary{color:var(--ink-3);background:var(--bg)}/* Hesitation toast mobile */ .rdlb-flow .bf-hesitation{ position:fixed;left:8px;right:8px;bottom:12px; z-index:2147483100; background:var(--navy);color:#fff; padding:12px 14px;border-radius:14px; display:flex;align-items:center;gap:10px; box-shadow:0 18px 40px -12px rgba(0,0,0,.50); font:600 12.5px/1.35 'Plus Jakarta Sans';letter-spacing:-.005em; opacity:0;transform:translateY(20px); transition:opacity .35s ease,transform .4s cubic-bezier(.32,1.10,.42,1); pointer-events:none; }.rdlb-flow .bf-hesitation.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}.rdlb-flow .bf-hesitation-icon{width:26px;height:26px;border-radius:9px;background:rgba(255,255,255,.16);color:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0}.rdlb-flow .bf-hesitation-icon svg{width:13px;height:13px;stroke-width:2.4}.rdlb-flow .bf-hesitation strong{color:#fff;font-weight:800}.rdlb-flow .bf-hesitation-close{background:none;color:rgba(255,255,255,.55);padding:4px;font:800 14px/1 'Plus Jakarta Sans'}/* S6 · cohesive navy hero + map dominant · reimagined */ .rdlb-flow .screen-done{ background: radial-gradient(ellipse 700px 600px at 20% 8%, rgba(229,83,83,.30) 0%, transparent 60%), radial-gradient(ellipse 600px 500px at 90% 95%, rgba(229,83,83,.16) 0%, transparent 60%), linear-gradient(165deg, #1a2056 0%, #000625 100%); color:#fff; }.rdlb-flow .screen-done::after{ content:"";position:absolute;inset:0;z-index:0; background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px); background-size:24px 24px; mask-image:radial-gradient(ellipse 100% 100% at center,#000 20%,transparent 75%); -webkit-mask-image:radial-gradient(ellipse 100% 100% at center,#000 20%,transparent 75%); pointer-events:none; }.rdlb-flow .screen-done .topbar-progress{background:rgba(255,255,255,.14)}.rdlb-flow .screen-done .topbar-progress-fill{background:#fff}.rdlb-flow .screen-done .topbar-step{color:rgba(255,255,255,.70)}/* Done body · cleaner cinematic composition */ .rdlb-flow .done-body{ flex:1;display:flex;flex-direction:column; padding:18px 24px 0;color:#fff; position:relative;z-index:2; align-items:stretch; overflow:hidden; }/* Hero row · small check + name + narration */ .rdlb-flow .done-check{ width:54px;height:54px;border-radius:18px; background:#fff;color:var(--red); display:flex;align-items:center;justify-content:center; position:relative;flex-shrink:0; transform:scale(0) rotate(-12deg); animation:checkPop .65s cubic-bezier(.34,1.56,.64,1) .1s forwards; box-shadow:0 18px 28px -10px rgba(0,0,0,.30); margin:0; }.rdlb-flow .done-check svg{width:24px;height:24px;stroke-width:3.4}.rdlb-flow .done-check::before{content:"";position:absolute;inset:-8px;border:2px solid rgba(255,255,255,.40);border-radius:18px;animation:checkRing 2.2s ease-out .5s infinite;pointer-events:none}.rdlb-flow .done-check::after{content:"";position:absolute;inset:-18px;border:2px solid rgba(255,255,255,.22);border-radius:18px;animation:checkRing 2.2s ease-out .8s infinite;pointer-events:none} @keyframes checkPop{0%{transform:scale(0) rotate(-12deg)}60%{transform:scale(1.15) rotate(2deg)}100%{transform:scale(1) rotate(0deg)}} @keyframes checkRing{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.5);opacity:0}} @keyframes fadeUp{to{opacity:1;transform:translateY(0)}}/* Map dominant in the middle · full-bleed corners refined */ /* Next steps · clean compact inline rows, not numbered cards */ .rdlb-flow .next-steps{ margin-top:16px; margin-bottom:18px; opacity:0;transform:translateY(12px); animation:fadeUp .55s ease-out 1.0s forwards; flex:1; min-height:0; }.rdlb-flow .next-steps-title{ font:800 10.5px/1 'Plus Jakarta Sans'; color:rgba(255,255,255,.55); text-transform:uppercase;letter-spacing:.14em; margin-bottom:10px; }.rdlb-flow .next-list{display:flex;flex-direction:column;gap:1px;background:rgba(255,255,255,.06);border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.10)}.rdlb-flow .next-item{ display:flex;gap:12px;align-items:center; padding:12px 14px; background:transparent; border:0; }.rdlb-flow .next-num{ width:22px;height:22px;border-radius:7px; background:rgba(255,255,255,.16);color:#fff; display:flex;align-items:center;justify-content:center; font:800 11px/1 'Plus Jakarta Sans'; flex-shrink:0; }.rdlb-flow .next-h{font:700 13.5px/1.2 'Plus Jakarta Sans';color:#fff;letter-spacing:-.005em}.rdlb-flow .next-d{margin-top:1px;font:500 11.5px/1.35 'Plus Jakarta Sans';color:rgba(255,255,255,.62)}/* App row · glassmorphic, refined */ .rdlb-flow .next-app-row{ margin-top:14px; display:grid;grid-template-columns:1fr 1fr;gap:8px; padding-bottom:18px; }.rdlb-flow .next-app-btn{ display:flex;align-items:center;justify-content:flex-start;gap:10px; padding:11px 14px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); color:#fff;border-radius:12px;text-decoration:none; transition:transform .2s,background .15s,border-color .15s; }.rdlb-flow .next-app-btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.30)}.rdlb-flow .next-app-btn svg{width:18px;height:18px;flex-shrink:0}.rdlb-flow .next-app-text-eye{font:600 8px/1 'Plus Jakarta Sans';color:rgba(255,255,255,.55);letter-spacing:.10em;text-transform:uppercase;margin-bottom:2px;display:block}.rdlb-flow .next-app-text-name{font:800 12.5px/1 'Plus Jakarta Sans';color:#fff;display:block;letter-spacing:-.01em} @keyframes pinRingDone{0%{transform:scale(.9);opacity:.6}100%{transform:scale(1.6);opacity:0}} @keyframes pingPop{0%{opacity:0;transform:scale(.4)}60%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:scale(1)}} @keyframes pingRing{0%{transform:scale(.9);opacity:.7}100%{transform:scale(1.7);opacity:0}}/* Next steps · mobile */ .rdlb-flow .next-steps{ margin-top:18px; opacity:0;transform:translateY(12px); animation:fadeUp .55s ease-out 1.0s forwards; }.rdlb-flow .next-steps-title{ font:700 11px/1 'Plus Jakarta Sans'; color:rgba(255,255,255,.75); text-transform:uppercase;letter-spacing:.14em; margin-bottom:10px; }.rdlb-flow .next-list{display:flex;flex-direction:column;gap:8px}.rdlb-flow .next-item{ display:flex;gap:11px;align-items:center; padding:12px 14px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14); border-radius:12px; }.rdlb-flow .next-num{ width:24px;height:24px;border-radius:8px; background:#fff;color:var(--red); display:flex;align-items:center;justify-content:center; font:800 12px/1 'Plus Jakarta Sans'; flex-shrink:0; }.rdlb-flow .next-h{font:700 13px/1.2 'Plus Jakarta Sans';color:#fff;letter-spacing:-.005em}.rdlb-flow .next-d{margin-top:1px;font:500 11.5px/1.35 'Plus Jakarta Sans';color:rgba(255,255,255,.75)}/* Download CTA · unmissable hero on S6 */ .rdlb-flow .next-app-eyebrow{ display:flex;align-items:center;justify-content:center;gap:8px; margin-top:22px; font:800 10.5px/1 'Plus Jakarta Sans'; color:#fff; text-transform:uppercase;letter-spacing:.16em; text-align:center; }.rdlb-flow .next-app-eyebrow::before, .rdlb-flow .next-app-eyebrow::after{ content:"";flex:1;height:1px; background:linear-gradient(90deg,transparent,rgba(255,255,255,.25),transparent); max-width:60px; }.rdlb-flow .next-app-eyebrow-dot{ width:8px;height:8px;border-radius:50%; background:var(--red); box-shadow:0 0 0 4px rgba(229,83,83,.25); animation:eyebrowPulse 1.6s ease-in-out infinite; flex:none; }.rdlb-flow .next-app-row{ margin-top:12px; display:flex;flex-direction:column;gap:8px; padding-bottom:18px; position:relative; }.rdlb-flow .next-app-row::before{ content:"";position:absolute; inset:-14px -8px; border-radius:22px; background:radial-gradient(ellipse at center, rgba(229,83,83,.30) 0%, transparent 70%); filter:blur(20px); pointer-events:none; z-index:-1; animation:ctaGlow 2.6s ease-in-out infinite; } @keyframes ctaGlow{0%, 100%{opacity:.7;transform:scale(.98)}50%{opacity:1;transform:scale(1.02)}}.rdlb-flow .next-app-btn{ display:flex;align-items:center;gap:14px; padding:16px 18px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); color:#fff;border-radius:14px;text-decoration:none; transition:transform .2s,background .15s,border-color .2s,box-shadow .2s; position:relative; }.rdlb-flow .next-app-btn:hover{ transform:translateY(-2px); background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.24); box-shadow:0 18px 36px -12px rgba(0,0,0,.40); }.rdlb-flow .next-app-btn:active{transform:translateY(0) scale(.99)}.rdlb-flow .next-app-icon{ width:38px;height:38px;border-radius:11px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14); display:flex;align-items:center;justify-content:center; flex-shrink:0; }.rdlb-flow .next-app-icon svg{width:18px;height:18px;color:#fff}.rdlb-flow .next-app-btn-body{flex:1;min-width:0;text-align:left}.rdlb-flow .next-app-text-eye{font:600 9px/1 'Plus Jakarta Sans';color:rgba(255,255,255,.60);letter-spacing:.12em;text-transform:uppercase;margin-bottom:3px;display:block}.rdlb-flow .next-app-text-name{font:800 14px/1 'Plus Jakarta Sans';color:#fff;display:block;letter-spacing:-.01em}.rdlb-flow .next-app-arrow{ width:28px;height:28px;border-radius:50%; background:var(--red);color:#fff; display:flex;align-items:center;justify-content:center; flex-shrink:0; box-shadow:0 6px 14px -4px rgba(229,83,83,.55); }.rdlb-flow .next-app-arrow svg{width:13px;height:13px;stroke-width:3}/* ───────────────────────────────────────────────── SCREEN 3 · HOURS · with INLINE live price ───────────────────────────────────────────────── */ .rdlb-flow .hours-list{ display:flex;flex-direction:column;gap:6px; margin-bottom:14px; } /* S3 (hours) MOBILE only · the content scrolls (overflow:auto), which clips the scale pulse at the row edges. Symmetric horizontal padding + equal negative margin gives the pulse room while keeping the full-width rows in place. Does NOT apply on desktop (>=1024px), where .content is overflow:visible. */ @media(max-width:1023px){ .rdlb-flow .screen[data-idx="2"] .content{ padding-left:16px !important;padding-right:16px !important; margin-left:-16px !important;margin-right:-16px !important; } }.rdlb-flow .hr-row{ width:100%;padding:13px 16px; background:var(--surface); border:1.5px solid var(--line); border-radius:16px; display:flex;align-items:center;gap:14px; position:relative; transition:transform .2s cubic-bezier(.32,1.10,.42,1),border-color .2s,box-shadow .25s; }.rdlb-flow .hr-row:hover{border-color:var(--ink-4)}.rdlb-flow .hr-row:active{transform:scale(.99)}.rdlb-flow .hr-row.is-active{ border-color:var(--line); background:rgba(229,83,83,.06); box-shadow:0 0 0 3px rgba(229,83,83,.10),var(--shadow-card); }.rdlb-flow .hr-figure{ font:700 22px/1 'Plus Jakarta Sans'; color:var(--ink); letter-spacing:-.02em; width:54px;flex-shrink:0; display:flex;align-items:baseline;gap:2px; }.rdlb-flow .hr-figure small{ font:600 11px/1 'Plus Jakarta Sans'; color:var(--ink-3); }.rdlb-flow .hr-mid{flex:1;min-width:0}.rdlb-flow .hr-price{ font:700 16px/1.1 'Plus Jakarta Sans'; color:var(--ink);letter-spacing:-.015em; }.rdlb-flow .hr-rate{ margin-top:2px; font:500 12px/1.2 'Plus Jakarta Sans'; color:var(--ink-3); }.rdlb-flow .hr-radio{ width:20px;height:20px;border-radius:50%; border:1.5px solid var(--ink-4); display:flex;align-items:center;justify-content:center; flex-shrink:0;transition:all .2s; }.rdlb-flow .hr-row.is-active .hr-radio{border-color:var(--red);background:var(--red)}.rdlb-flow .hr-radio svg{width:10px;height:10px;color:#fff;stroke-width:3.2;opacity:0;transform:scale(.5);transition:all .2s}.rdlb-flow .hr-row.is-active .hr-radio svg{opacity:1;transform:scale(1)}.rdlb-flow .hr-pop{ position:absolute;top:-8px;left:50px; padding:3px 8px; background:var(--navy);color:#fff; border-radius:999px; font:700 9px/1 'Plus Jakarta Sans'; text-transform:uppercase;letter-spacing:.08em; }.rdlb-flow .hr-save{ font:700 12px/1.2 'Plus Jakarta Sans'; color:var(--red); margin-left:2px; }/* Live preview · S3 · cleanly formatted */ .rdlb-flow .live-preview{ margin-top:0; margin-bottom:14px; padding:18px 20px; background:var(--navy); border-radius:20px; color:#fff; display:flex;align-items:center;justify-content:space-between;gap:18px; min-height:132px; }/* ───────────────────────────────────────────────── SCREEN 4 · CONTACT · staggered reveal ───────────────────────────────────────────────── */ .rdlb-flow .contact-stack{ display:flex;flex-direction:column;gap:12px; margin-top:4px; }.rdlb-flow .contact-row{ position:relative; padding:6px 16px 6px 16px; background:var(--surface); border:1.5px solid var(--line); border-radius:16px; display:flex;align-items:center;gap:12px; transition:opacity .35s ease,max-height .4s cubic-bezier(.32,1.10,.42,1), margin-top .4s,transform .4s,border-color .2s,box-shadow .2s,padding .4s; overflow:hidden; max-height:80px; }.rdlb-flow .contact-row.is-hidden{ opacity:0;max-height:0;margin-top:-12px; transform:translateY(-6px);pointer-events:none; padding-top:0;padding-bottom:0;border-width:0; }.rdlb-flow .contact-row:has(input:focus){ border-color:var(--line); box-shadow:none; }.rdlb-flow .contact-row.is-valid{border-color:var(--line);background:var(--red-tint)}.rdlb-flow .cr-glyph{ width:36px;height:36px;border-radius:11px; background:var(--bg);color:var(--navy); display:flex;align-items:center;justify-content:center; flex-shrink:0; border:1px solid var(--line); }.rdlb-flow .cr-glyph svg{width:17px;height:17px;stroke-width:2.2}.rdlb-flow .contact-row.is-valid .cr-glyph{background:var(--navy);color:#fff;border-color:var(--navy)}.rdlb-flow .cr-field{ flex:1;min-width:0; }.rdlb-flow .cr-field-split{ display:flex;align-items:stretch;gap:10px; }.rdlb-flow .cr-sub{flex:1;min-width:0}.rdlb-flow .cr-sub-divider{width:1px;background:var(--line);align-self:stretch;flex:0 0 1px}.rdlb-flow .screen[data-idx="3"] .cr-select{ background-image:url("data:image/svg+xml;utf8,"); }.rdlb-flow .screen[data-idx="3"] .contact-row.is-valid .cr-select{ background-image:url("data:image/svg+xml;utf8,"); }.rdlb-flow .contact-row-notes .cr-glyph{margin-top:2px}.rdlb-flow .contact-row-notes .cr-label{margin-bottom:8px}/* ──────────── NOTES CARD · re-imagined v2 ──────────── */ .rdlb-flow .notes-card{ position:relative; background:rgba(255,255,255,.06); border:1.5px solid rgba(255,255,255,.12); border-radius:20px; padding:18px 18px 16px; display:flex;flex-direction:column;gap:14px; transition:opacity .35s ease,max-height .4s cubic-bezier(.32,1.10,.42,1), margin-top .4s,transform .4s,border-color .2s,box-shadow .2s,padding .4s; overflow:hidden; max-height:520px; }.rdlb-flow .notes-card.is-hidden{ opacity:0;max-height:0;margin-top:-12px; transform:translateY(-6px);pointer-events:none; padding-top:0;padding-bottom:0;border-width:0; } /* Marketing-consent row · abandoned-cart follow-up opt-in. Mirrors the notes-card reveal so it surfaces with the optional notes. */ .rdlb-flow .rdlb-consent{ display:flex;align-items:flex-start;gap:11px; margin-top:12px; padding:14px 16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:14px; cursor:pointer; transition:opacity .35s ease,max-height .4s cubic-bezier(.32,1.10,.42,1), margin-top .4s,transform .4s,border-color .2s,padding .4s; overflow:hidden; max-height:160px; } .rdlb-flow .rdlb-consent.is-hidden{ opacity:0;max-height:0;margin-top:0; transform:translateY(-6px);pointer-events:none; padding-top:0;padding-bottom:0;border-width:0; } .rdlb-flow .rdlb-consent input[type="checkbox"]{ flex:0 0 18px;width:18px;height:18px;margin:1px 0 0; accent-color:var(--red);cursor:pointer; } .rdlb-flow .rdlb-consent-text{ flex:1;min-width:0; font:500 12.5px/1.45 'Plus Jakarta Sans',-apple-system,system-ui,sans-serif; color:rgba(255,255,255,.72);letter-spacing:-.005em; } .rdlb-flow .rdlb-consent-text a{ color:#fff;text-decoration:underline;text-underline-offset:2px; }.rdlb-flow .notes-card:has(textarea:focus){ border-color:rgba(255,255,255,.30); background:rgba(255,255,255,.10); }.rdlb-flow .notes-card-head{ display:flex;align-items:flex-start;gap:12px; }.rdlb-flow .notes-card-icon{ flex:0 0 36px;width:36px;height:36px;border-radius:11px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14); color:#fff; display:flex;align-items:center;justify-content:center; }.rdlb-flow .notes-card-icon svg{width:17px;height:17px}.rdlb-flow .notes-card-titles{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.rdlb-flow .notes-card-title{ font:700 14px/1.2 'Plus Jakarta Sans'; color:#fff;letter-spacing:-.01em; display:flex;align-items:center;gap:8px;flex-wrap:wrap; }.rdlb-flow .notes-card-sub{ font:500 12px/1.35 'Plus Jakarta Sans'; color:rgba(255,255,255,.55);letter-spacing:-.005em; }.rdlb-flow .notes-optional{ display:inline-block;padding:2px 8px; background:rgba(255,255,255,.10); border-radius:999px; font:700 9px/1.4 'Plus Jakarta Sans'; color:rgba(255,255,255,.65); text-transform:uppercase;letter-spacing:.05em; }/* Chip strip */ .rdlb-flow .notes-chips{ display:flex;flex-wrap:wrap;gap:6px; }.rdlb-flow .notes-chip{ appearance:none;-webkit-appearance:none; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.04); color:rgba(255,255,255,.82); padding:7px 11px; border-radius:999px; font:600 12px/1 'Plus Jakarta Sans'; letter-spacing:-.005em; cursor:pointer; transition:background .18s,border-color .18s,transform .18s,color .18s; }.rdlb-flow .notes-chip:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.28);color:#fff}.rdlb-flow .notes-chip:active{transform:scale(.96)}.rdlb-flow .notes-chip.is-on{ background:#fff;color:var(--navy);border-color:#fff; }/* Access-needs chip with info icon */ /* Inline help tip on hover/focus */ .rdlb-flow .notes-chip[data-show-when-time].is-hidden{display:none}/* Textarea field */ .rdlb-flow .notes-field{ background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.10); border-radius:14px; padding:12px 14px 10px; display:flex;flex-direction:column;gap:8px; }.rdlb-flow .notes-field:has(textarea:focus){ border-color:rgba(255,255,255,.28); background:rgba(0,0,0,.28); }.rdlb-flow .notes-textarea{ width:100%; background:transparent;border:0;outline:0; resize:none; min-height:84px; padding:0; color:#fff; font:500 16px/1.5 'Plus Jakarta Sans',-apple-system,system-ui,sans-serif; letter-spacing:-.005em; }.rdlb-flow .notes-textarea::placeholder{color:rgba(255,255,255,.38);font-weight:500}.rdlb-flow .notes-meta{ display:flex;align-items:center;justify-content:space-between; gap:10px; padding-top:6px; border-top:1px dashed rgba(255,255,255,.10); }.rdlb-flow .notes-meta-hint{ font:600 10.5px/1.2 'Plus Jakarta Sans'; color:rgba(255,255,255,.50); letter-spacing:.005em; }.rdlb-flow .notes-counter{ font:700 10.5px/1 'Plus Jakarta Sans'; color:rgba(255,255,255,.55); font-variant-numeric:tabular-nums; }.rdlb-flow .notes-counter.is-near{color:#ffd0a8}.rdlb-flow .notes-counter.is-max{color:#ff9c9c}/* Stagger this card with the rest of the contact-stack */ .rdlb-flow .screen.is-active .contact-stack .notes-card:not(.is-hidden){ animation:stageIn .5s cubic-bezier(.32,1.10,.42,1) .64s both; }.rdlb-flow .screen[data-idx="3"] .cr-optional{ background:rgba(255,255,255,.10); color:rgba(255,255,255,.65); }.rdlb-flow .screen[data-idx="3"] .cr-counter{color:rgba(255,255,255,.40)}.rdlb-flow .cr-label{ font:600 10.5px/1 'Plus Jakarta Sans'; color:var(--ink-3); text-transform:uppercase;letter-spacing:.12em; margin-bottom:2px; }.rdlb-flow .cr-input{ width:100%; padding:4px 0 8px; font:600 16px/1.4 'Plus Jakarta Sans'; color:var(--ink);letter-spacing:-.01em; } /* v2.9.60: details fields are autocomplete="off", but iOS/WebKit can still paint a remembered value with a yellow autofill background. Neutralise it on every contact field so they always read as the design (no yellow box). */ .rdlb-flow .cr-input:-webkit-autofill, .rdlb-flow .cr-input:-webkit-autofill:hover, .rdlb-flow .cr-input:-webkit-autofill:focus, .rdlb-flow .cr-input:-webkit-autofill:active{ -webkit-text-fill-color:var(--ink); -webkit-box-shadow:0 0 0 1000px transparent inset; box-shadow:0 0 0 1000px transparent inset; transition:background-color 9999s ease-in-out 0s; caret-color:var(--ink); } /* v2.9.60: a native , OUTSIDE .rdlb-flow, so they do NOT inherit the flow's svg defence layer and are fully exposed to the theme's global svg{} rules. TWO failure modes were found by reproduction: (1) size — Flatsome's svg{width:1em} collapses icons; (2) STROKE — theme icon resets like `svg line,svg path{stroke:none;fill:currentColor}` erase our stroke-based outline icons, leaving the button circle but no X (the real cause of the persistent empty-circle close buttons). Fix BOTH: pin sizes AND pin stroke:currentColor/fill:none on the svg CHILDREN with id-scoped specificity that outranks a bare `svg line` selector even under !important. ============================================================ */ #rdlbPayLightbox svg,#rdlbInfoSheet svg{box-sizing:content-box} /* STROKE FIX — must target the line/path/etc CHILDREN with id-level specificity so it beats a theme's `svg line{stroke:none!important}`. This is what makes the X actually render. */ #rdlbPayLightbox svg line,#rdlbPayLightbox svg path,#rdlbPayLightbox svg polyline,#rdlbPayLightbox svg circle,#rdlbPayLightbox svg rect, #rdlbInfoSheet svg line,#rdlbInfoSheet svg path,#rdlbInfoSheet svg polyline,#rdlbInfoSheet svg circle,#rdlbInfoSheet svg rect, .rdlb-flow .rdlb-fs-close svg line,.rdlb-flow .rdlb-fs-close svg path, .rdlb-flow .rdlb-promo-close svg line,.rdlb-flow .rdlb-promo-close svg path, .rdlb-flow .save-quote-cancel svg line,.rdlb-flow .save-quote-cancel svg path{stroke:currentColor !important;fill:none !important} #rdlbPayLightbox .rdlb-pay-lightbox-close svg, #rdlbInfoSheet .rdlb-info-close svg{width:16px !important;height:16px !important} #rdlbPayLightbox .rdlb-pay-lightbox-badge svg{width:16px !important;height:16px !important} #rdlbPayLightbox .rdlb-pay-lightbox-trust svg{width:13px !important;height:13px !important} #rdlbInfoSheet .rdlb-info-ic svg{width:18px !important;height:18px !important} #rdlbInfoSheet .rdlb-info-done svg{width:16px !important;height:16px !important} /* In-flow close/control icons that an !important theme svg rule could still shrink — pin their sizes too. */ .rdlb-flow.rdlb-fullscreen .rdlb-fs-close svg{width:20px !important;height:20px !important} .rdlb-flow .rdlb-promo-close svg{width:15px !important;height:15px !important} .rdlb-flow .save-quote-cancel svg{width:14px !important;height:14px !important} /* ============================================================ v2.9.42 · PURE-CSS CLOSE X (no SVG dependency) The close (X) icons are stroke-based SVGs. On the live site they render as empty circles because the environment interferes with the SVG (theme svg{} resets, stroke removal, or SVG sanitising). To make the X IMPOSSIBLE to break, draw it with two rotated CSS bars on the button itself and hide the inner SVG. A CSS pseudo-element cannot be touched by any svg{} rule, cannot be stripped, and needs no stroke/fill. The button keeps its circular styling; only the glyph changes from SVG to CSS. ============================================================ */ #rdlbPayLightbox .rdlb-pay-lightbox-close, #rdlbInfoSheet .rdlb-info-close, .rdlb-flow .rdlb-promo-close, .rdlb-flow .save-quote-cancel{position:relative} #rdlbPayLightbox .rdlb-pay-lightbox-close > svg, #rdlbInfoSheet .rdlb-info-close > svg, .rdlb-flow.rdlb-fullscreen .rdlb-fs-close > svg, .rdlb-flow .rdlb-promo-close > svg, .rdlb-flow .save-quote-cancel > svg{display:none !important} #rdlbPayLightbox .rdlb-pay-lightbox-close::before,#rdlbPayLightbox .rdlb-pay-lightbox-close::after, #rdlbInfoSheet .rdlb-info-close::before,#rdlbInfoSheet .rdlb-info-close::after, .rdlb-flow.rdlb-fullscreen .rdlb-fs-close::before,.rdlb-flow.rdlb-fullscreen .rdlb-fs-close::after, .rdlb-flow .rdlb-promo-close::before,.rdlb-flow .rdlb-promo-close::after, .rdlb-flow .save-quote-cancel::before,.rdlb-flow .save-quote-cancel::after{ content:"";position:absolute;left:50%;top:50%; width:15px;height:2.4px;border-radius:2px; background:currentColor; } #rdlbPayLightbox .rdlb-pay-lightbox-close::before, #rdlbInfoSheet .rdlb-info-close::before, .rdlb-flow.rdlb-fullscreen .rdlb-fs-close::before, .rdlb-flow .rdlb-promo-close::before, .rdlb-flow .save-quote-cancel::before{transform:translate(-50%,-50%) rotate(45deg)} #rdlbPayLightbox .rdlb-pay-lightbox-close::after, #rdlbInfoSheet .rdlb-info-close::after, .rdlb-flow.rdlb-fullscreen .rdlb-fs-close::after, .rdlb-flow .rdlb-promo-close::after, .rdlb-flow .save-quote-cancel::after{transform:translate(-50%,-50%) rotate(-45deg)} /* The full-screen close sits on a dark backdrop and is larger — bigger bars. */ .rdlb-flow.rdlb-fullscreen .rdlb-fs-close::before, .rdlb-flow.rdlb-fullscreen .rdlb-fs-close::after{width:18px;height:2.6px} /* v2.9.32 · Edit-enquiry sheet (white modal, above the full-screen flow) */ .rdlb-flow .edit-scrim{position:fixed;inset:0;background:rgba(10,14,44,.45);backdrop-filter:blur(6px) saturate(120%);-webkit-backdrop-filter:blur(6px) saturate(120%);opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:2147483200} .rdlb-flow .edit-scrim.is-visible{opacity:1;pointer-events:auto} .rdlb-flow .edit-sheet{position:fixed;left:50%;top:50%;transform:translate(-50%,-46%) scale(.98);width:calc(100% - 32px);max-width:460px;max-height:88vh;max-height:88dvh;overflow-y:auto;background:#fff;border:1px solid rgba(15,25,50,.06);border-radius:24px;box-shadow:0 2px 8px rgba(14,18,48,.04),0 30px 70px -18px rgba(14,18,48,.28);padding:22px 22px 18px;color:#0f1733;opacity:0;pointer-events:none;transition:opacity .22s ease, transform .22s cubic-bezier(.34,1.4,.5,1);z-index:2147483201} .rdlb-flow .edit-sheet.is-visible{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)} .rdlb-flow .edit-sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px} .rdlb-flow .edit-sheet-title{font:800 19px/1.15 'Plus Jakarta Sans';letter-spacing:-.02em;color:#0f1733} .rdlb-flow .edit-sheet-close{width:34px;height:34px;border-radius:50%;background:#f3f4f8;border:1px solid rgba(15,25,50,.06);color:#5b647e;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;transition:background .15s,color .15s} .rdlb-flow .edit-sheet-close:hover{background:#e9ebf2;color:#0f1733} .rdlb-flow .edit-sheet-close svg{width:16px;height:16px} .rdlb-flow .es-label{display:block;font:700 12px/1.2 'Plus Jakarta Sans';color:#6b7390;margin:14px 0 7px;text-transform:none} .rdlb-flow .es-label:first-child{margin-top:0} .rdlb-flow .es-optional{font-weight:600;color:#9aa1b5;font-size:11px} .rdlb-flow .es-input{width:100%;border:1.5px solid #e3e6ef;border-radius:12px;padding:13px 14px;font:600 15px/1.2 'Plus Jakarta Sans';color:#0f1733;background:#fff;box-shadow:0 1px 2px rgba(14,18,48,.04)} .rdlb-flow .es-input:focus{outline:none;border-color:var(--red,#e55353);box-shadow:0 0 0 3px rgba(229,83,83,.14)} .rdlb-flow .es-hint{margin-top:7px;font:600 12px/1.4 'Plus Jakarta Sans';color:#6b7390;min-height:16px} .rdlb-flow .es-trans{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px} .rdlb-flow .es-trans-tile{padding:13px;border:1.5px solid #e3e6ef;border-radius:12px;background:#fff;font:700 14px/1 'Plus Jakarta Sans';color:#0f1733;cursor:pointer;transition:border-color .15s,background .15s} .rdlb-flow .es-trans-tile:hover{background:#f6f7fb} .rdlb-flow .es-trans-tile.is-on{border-color:var(--red,#e55353);background:#fff5f5;color:var(--red,#e55353)} .rdlb-flow .es-stop-list{display:flex;flex-direction:column;gap:8px} .rdlb-flow .es-time-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px} .rdlb-flow .es-chips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px} .rdlb-flow .es-chip{padding:8px 12px;border:1.5px solid #e3e6ef;border-radius:999px;background:#fff;font:600 12.5px/1 'Plus Jakarta Sans';color:#3c4668;cursor:pointer;transition:all .15s} .rdlb-flow .es-chip:hover{background:#f6f7fb} .rdlb-flow .es-chip.is-on{background:#0f1733;border-color:#0f1733;color:#fff} .rdlb-flow .es-textarea{width:100%;border:1.5px solid #e3e6ef;border-radius:12px;padding:12px 14px;font:500 16px/1.5 'Plus Jakarta Sans';color:#0f1733;background:#fff;resize:vertical;min-height:96px} .rdlb-flow .es-textarea:focus{outline:none;border-color:var(--red,#e55353);box-shadow:0 0 0 3px rgba(229,83,83,.14)} .rdlb-flow .es-count{margin-top:6px;text-align:right;font:600 11px/1 'Plus Jakarta Sans';color:#9aa1b5} .rdlb-flow .edit-sheet-foot{margin-top:18px} .rdlb-flow .es-save{width:100%;background:var(--red,#e55353);color:#fff;border:0;border-radius:14px;padding:16px 22px;font:800 16px/1 'Plus Jakarta Sans';letter-spacing:-.01em;cursor:pointer;box-shadow:0 10px 24px -8px rgba(229,83,83,.45);transition:transform .15s ease} .rdlb-flow .es-save:hover{transform:translateY(-1px)} /* v2.9.28 · "How your payment is protected" info sheet (white modal) */ #rdlbInfoSheet{position:fixed;inset:0;z-index:2147483600;display:none;align-items:center;justify-content:center;padding:20px} #rdlbInfoSheet.is-open{display:flex} #rdlbInfoSheet .rdlb-info-backdrop{position:absolute;inset:0;background:rgba(10,14,44,.45);backdrop-filter:blur(6px) saturate(120%);-webkit-backdrop-filter:blur(6px) saturate(120%);animation:rdlbLbFade .2s ease} #rdlbInfoSheet .rdlb-info-panel{position:relative;width:100%;max-width:460px;max-height:90vh;max-height:90dvh;overflow-y:auto;background:#ffffff;border:1px solid rgba(15,25,50,.06);border-radius:24px;box-shadow:0 2px 8px rgba(14,18,48,.04),0 30px 70px -18px rgba(14,18,48,.28);padding:26px 26px 22px;color:#0f1733;animation:rdlbLbPop .26s cubic-bezier(.34,1.4,.5,1)} #rdlbInfoSheet .rdlb-info-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px} #rdlbInfoSheet .rdlb-info-title{font:800 19px/1.2 'Plus Jakarta Sans';letter-spacing:-.02em;color:#0f1733} #rdlbInfoSheet .rdlb-info-close{width:34px;height:34px;border-radius:50%;background:#f3f4f8;border:1px solid rgba(15,25,50,.06);color:#5b647e;display:flex;align-items:center;justify-content:center;cursor:pointer;flex:0 0 auto;transition:background .15s,color .15s} #rdlbInfoSheet .rdlb-info-close:hover{background:#e9ebf2;color:#0f1733} #rdlbInfoSheet .rdlb-info-close svg{width:16px;height:16px} #rdlbInfoSheet .rdlb-info-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px} #rdlbInfoSheet .rdlb-info-list li{display:flex;gap:13px;align-items:flex-start} #rdlbInfoSheet .rdlb-info-list div{font:500 14px/1.5 'Plus Jakarta Sans';color:#5b647e} #rdlbInfoSheet .rdlb-info-list strong{color:#0f1733;font-weight:700} #rdlbInfoSheet .rdlb-info-ic{width:36px;height:36px;flex:0 0 auto;border-radius:11px;background:#fff5f5;color:var(--red);display:flex;align-items:center;justify-content:center} #rdlbInfoSheet .rdlb-info-ic svg{width:18px;height:18px} #rdlbInfoSheet .rdlb-info-done{width:100%;margin-top:20px;background:var(--red);color:#fff;border:0;border-radius:14px;padding:15px 22px;font:800 16px/1 'Plus Jakarta Sans';letter-spacing:-.01em;cursor:pointer;box-shadow:0 10px 24px -8px rgba(229,83,83,.45);transition:transform .15s ease} #rdlbInfoSheet .rdlb-info-done:hover{transform:translateY(-1px)} /* save-quote inline error */ .rdlb-flow .save-quote-error{margin:8px 0 0;font:600 12.5px/1.4 'Plus Jakarta Sans';color:#ffd2d2;display:none} /* v2.9.26 · inline mobile wallets (Express Checkout). Hidden on desktop — the lightbox carries wallets there; shown on mobile above the Pay button. */ .rdlb-flow .rdlb-express-checkout{margin:0 0 10px} .rdlb-flow .rdlb-express-checkout:empty{display:none} /* v2.9.71: the Stripe card Payment Element is mounted into #payment-element but it is only used inside the pay lightbox (appended to , OUTSIDE .rdlb-flow, with its own show rules). On the confirm screen it rendered as an empty navy box above the Pay button, so hide the in-flow copy. The lightbox copy (#rdlbPayLightbox #payment-element) is unaffected (not inside .rdlb-flow). NOTE: this is the CARD form only - the Apple Pay / Klarna / Link WALLET row is #rdlbExpressCheckout, which stays visible (below) so the wallets show inline. */ .rdlb-flow #payment-element{display:none !important} /* v2.9.72: the express-checkout wallet row (Apple Pay / Klarna / Link) shows on ALL breakpoints. It was previously hidden on desktop; the :empty rule above still collapses it when Stripe reports no available wallet, so a desktop with no wallet stays clean while one with Apple Pay/Link shows them. */ /* v2.9.73: WALLET-PRIMARY layout. When Stripe reports an available wallet (Apple Pay on iOS / Google Pay on Android), the footer gets .rdlb-has-wallet and the real Stripe wallet button (#rdlbExpressCheckout) is the PRIMARY CTA, while the white card button (#walletBtn) is demoted to a clean, understated "Pay by card" text link beneath it. With no wallet, neither rule applies and the white button stays the primary "Pay" button. */ .rdlb-flow .pay-footer.rdlb-has-wallet .rdlb-express-checkout{margin:2px 0 4px;min-height:48px} .rdlb-flow .pay-footer.rdlb-has-wallet #walletBtn{ background:transparent !important; color:rgba(255,255,255,.62) !important; border:0 !important;box-shadow:none !important; padding:10px 0 4px !important; font:700 14px/1 'Plus Jakarta Sans' !important; letter-spacing:0 !important; text-decoration:underline; text-decoration-thickness:1.5px;text-underline-offset:4px; text-decoration-color:rgba(255,255,255,.30); border-radius:0 !important; min-height:0 !important; } .rdlb-flow .pay-footer.rdlb-has-wallet #walletBtn:hover{color:#fff !important;text-decoration-color:rgba(255,255,255,.7)} .rdlb-flow .pay-footer.rdlb-has-wallet #walletBtn::after{display:none !important} /* On the cream desktop theme the card link reads dark, in keeping with that theme's other secondary links. */ @media(min-width:1024px){ .rdlb-flow .pay-footer.rdlb-has-wallet #walletBtn{ color:var(--ink-2) !important; text-decoration-color:var(--line) !important; } .rdlb-flow .pay-footer.rdlb-has-wallet #walletBtn:hover{color:var(--ink) !important} } /* v2.9.99: DESKTOP must always show a real PAY BUTTON, never a "Pay by card" text link. Per owner: on a laptop with no Apple/Google Pay the affordance was rendering as understated text (the demoted secondary style), which did not read as a button. On desktop we therefore OVERRIDE the wallet-primary demotion and keep #walletBtn as a full, solid button even when a wallet IS present (the Stripe wallet button still shows above it as the express option). This block is placed after the rule it overrides so it wins at equal specificity. The button uses the navy ink fill so it reads as a strong CTA on the cream desktop theme. */ @media(min-width:1024px){ .rdlb-flow .pay-footer #walletBtn, .rdlb-flow .pay-footer.rdlb-has-wallet #walletBtn{ width:100% !important; padding:18px 22px !important; background:var(--ink,#0e1230) !important; color:#fff !important; border:0 !important; border-radius:16px !important; font:700 18px/1 'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,sans-serif !important; letter-spacing:-.01em !important; text-decoration:none !important; min-height:56px !important; box-shadow:0 14px 30px -10px rgba(14,18,48,.45) !important; transition:transform .2s cubic-bezier(.32,1.10,.42,1),box-shadow .2s !important; margin:6px 0 0 !important; } .rdlb-flow .pay-footer #walletBtn:hover, .rdlb-flow .pay-footer.rdlb-has-wallet #walletBtn:hover{ color:#fff !important; transform:translateY(-2px) !important; box-shadow:0 20px 38px -10px rgba(14,18,48,.55) !important; text-decoration:none !important; } .rdlb-flow .pay-footer #walletBtn:active, .rdlb-flow .pay-footer.rdlb-has-wallet #walletBtn:active{transform:translateY(0) scale(.99) !important} }/* ───────────────────────────────────────────────── SCREEN 6 · DONE ───────────────────────────────────────────────── */ /* Legacy red S6 styles · superseded by the re-imagined navy block below */ .rdlb-flow .confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}.rdlb-flow .confetti-piece{ position:absolute;top:-30px;width:9px;height:16px; border-radius:2px;opacity:0; animation:confettiFall 3.5s ease-out forwards; } @keyframes confettiFall{0%{opacity:0;transform:translateY(0) rotate(0deg)}10%{opacity:1}100%{opacity:0;transform:translateY(900px) rotate(720deg)}}.rdlb-flow .done-body{ flex:1;display:flex;flex-direction:column; padding:24px 24px 0;color:#fff; position:relative;z-index:2; align-items:flex-start; }.rdlb-flow .done-check{ width:84px;height:84px;border-radius:28px; background:#fff;color:var(--red); display:flex;align-items:center;justify-content:center; margin:8px 0 24px; transform:scale(0) rotate(-12deg); animation:checkPop .65s cubic-bezier(.34,1.56,.64,1) .1s forwards; position:relative; box-shadow:0 24px 40px -10px rgba(0,0,0,.18); }.rdlb-flow .done-check svg{width:40px;height:40px;stroke-width:3.4}.rdlb-flow .done-check::before{ content:"";position:absolute;inset:-10px; border:2px solid rgba(255,255,255,.35);border-radius:28px; animation:checkRing 2.2s ease-out .5s infinite; pointer-events:none; }.rdlb-flow .done-check::after{ content:"";position:absolute;inset:-22px; border:2px solid rgba(255,255,255,.18);border-radius:28px; animation:checkRing 2.2s ease-out .8s infinite; pointer-events:none; } @keyframes checkPop{0%{transform:scale(0) rotate(-12deg)}60%{transform:scale(1.15) rotate(2deg)}100%{transform:scale(1) rotate(0deg)}} @keyframes checkRing{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.5);opacity:0}} @keyframes fadeUp{to{opacity:1;transform:translateY(0)}} @keyframes dotPulse{0%, 100%{box-shadow:0 0 0 3px rgba(255,255,255,.30)}50%{box-shadow:0 0 0 6px rgba(255,255,255,.15)}}/* ════════════════════════════════════════════════════════════════ All mobile screens share the navy/red brand shell · cohesive premium feel ════════════════════════════════════════════════════════════════ */ .rdlb-flow .screen[data-idx="1"]{ background: radial-gradient(ellipse 700px 600px at 90% 10%, rgba(229,83,83,.26) 0%, transparent 60%), radial-gradient(ellipse 600px 500px at 10% 90%, rgba(229,83,83,.16) 0%, transparent 60%), linear-gradient(165deg, #1a2056 0%, #000625 100%); color:#fff; }.rdlb-flow .screen[data-idx="2"]{ background: radial-gradient(ellipse 700px 600px at 10% 10%, rgba(229,83,83,.28) 0%, transparent 60%), radial-gradient(ellipse 600px 500px at 90% 95%, rgba(229,83,83,.16) 0%, transparent 60%), linear-gradient(165deg, #1a2056 0%, #000625 100%); color:#fff; }.rdlb-flow .screen[data-idx="3"]{ background: radial-gradient(ellipse 700px 600px at 50% 8%, rgba(229,83,83,.22) 0%, transparent 60%), radial-gradient(ellipse 500px 400px at 50% 95%, rgba(229,83,83,.14) 0%, transparent 60%), linear-gradient(165deg, #1a2056 0%, #000625 100%); color:#fff; }.rdlb-flow .screen[data-idx="1"]::after, .rdlb-flow .screen[data-idx="2"]::after, .rdlb-flow .screen[data-idx="3"]::after{ content:"";position:absolute;inset:0; background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px); background-size:24px 24px; mask-image:radial-gradient(ellipse 100% 100% at center,#000 20%,transparent 75%); -webkit-mask-image:radial-gradient(ellipse 100% 100% at center,#000 20%,transparent 75%); pointer-events:none; }.rdlb-flow .screen[data-idx="1"] .topbar-back, .rdlb-flow .screen[data-idx="2"] .topbar-back, .rdlb-flow .screen[data-idx="3"] .topbar-back{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.14);color:rgba(255,255,255,.85)}.rdlb-flow .screen[data-idx="1"] .topbar-progress, .rdlb-flow .screen[data-idx="2"] .topbar-progress, .rdlb-flow .screen[data-idx="3"] .topbar-progress{background:rgba(255,255,255,.14)}.rdlb-flow .screen[data-idx="1"] .topbar-progress-fill, .rdlb-flow .screen[data-idx="2"] .topbar-progress-fill, .rdlb-flow .screen[data-idx="3"] .topbar-progress-fill{background:#fff}.rdlb-flow .screen[data-idx="1"] .topbar-step, .rdlb-flow .screen[data-idx="2"] .topbar-step, .rdlb-flow .screen[data-idx="3"] .topbar-step{color:rgba(255,255,255,.70)}.rdlb-flow .screen[data-idx="1"] .title, .rdlb-flow .screen[data-idx="2"] .title, .rdlb-flow .screen[data-idx="3"] .title{color:#fff}.rdlb-flow .screen[data-idx="1"] .subtitle, .rdlb-flow .screen[data-idx="2"] .subtitle, .rdlb-flow .screen[data-idx="3"] .subtitle{color:rgba(255,255,255,.72)}.rdlb-flow .screen[data-idx="1"] .footer, .rdlb-flow .screen[data-idx="2"] .footer, .rdlb-flow .screen[data-idx="3"] .footer{background:linear-gradient(180deg,rgba(0,8,66,0) 0%, rgba(0,8,66,.85) 50%, #000625 100%)}.rdlb-flow .screen[data-idx="1"] .swipe-hint, .rdlb-flow .screen[data-idx="2"] .swipe-hint, .rdlb-flow .screen[data-idx="3"] .swipe-hint{color:rgba(255,255,255,.45)}.rdlb-flow .screen[data-idx="1"] .cta.is-disabled, .rdlb-flow .screen[data-idx="2"] .cta.is-disabled, .rdlb-flow .screen[data-idx="3"] .cta.is-disabled{background:rgba(255,255,255,.10);color:rgba(255,255,255,.40)}/* S2 · transmission tiles · glass on navy */ .rdlb-flow .screen[data-idx="1"] .trans-tile{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); }.rdlb-flow .screen[data-idx="1"] .trans-tile .tt-name{color:#fff}.rdlb-flow .screen[data-idx="1"] .trans-tile .tt-sub{color:rgba(255,255,255,.65)}.rdlb-flow .screen[data-idx="1"] .trans-tile .tt-glyph{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.14);color:#fff}.rdlb-flow .screen[data-idx="1"] .trans-tile .tt-radio{border-color:rgba(255,255,255,.40)}.rdlb-flow .screen[data-idx="1"] .trans-tile.is-active{ background:#fff;border-color:#fff; box-shadow:0 0 0 4px rgba(255,255,255,.20),0 18px 40px -10px rgba(0,0,0,.40); }.rdlb-flow .screen[data-idx="1"] .trans-tile.is-active .tt-name{color:var(--ink)}.rdlb-flow .screen[data-idx="1"] .trans-tile.is-active .tt-sub{color:var(--ink-3)}.rdlb-flow .screen[data-idx="1"] .trans-tile.is-active .tt-glyph{background:var(--red-tint);color:var(--red);border-color:transparent} /* v2.9.475 · per-transmission availability gate (enquiry flow only). When an area covers only one transmission the unavailable tile is disabled and the available one auto-selected (see enquiry.js applyTransmissionGate). Hardened with !important so it reliably beats the .trans-tile hover/active rules. */ .rdlb-flow .trans-tile.rdlb-enq-trans-unavail{ opacity:.45 !important; pointer-events:none !important; cursor:not-allowed !important; box-shadow:none !important; transform:none !important; background:#f6f7fb !important; border-color:var(--line,#e3e6ef) !important; } .rdlb-flow .trans-tile.rdlb-enq-trans-unavail .tt-name, .rdlb-flow .trans-tile.rdlb-enq-trans-unavail .tt-sub{color:var(--ink-4,#9aa3bd) !important} .rdlb-flow .trans-tile.rdlb-enq-trans-unavail .tt-glyph{background:transparent !important;border-color:var(--line,#e3e6ef) !important;color:var(--ink-4,#9aa3bd) !important} .rdlb-flow .trans-tile.rdlb-enq-trans-unavail .tt-radio{opacity:.4 !important} /* dark Gearbox screen (navy) override */ .rdlb-flow .screen[data-idx="1"] .trans-tile.rdlb-enq-trans-unavail{ opacity:.40 !important; background:rgba(255,255,255,.04) !important; border-color:rgba(255,255,255,.10) !important; } .rdlb-flow .screen[data-idx="1"] .trans-tile.rdlb-enq-trans-unavail .tt-name{color:rgba(255,255,255,.55) !important} .rdlb-flow .screen[data-idx="1"] .trans-tile.rdlb-enq-trans-unavail .tt-sub{color:rgba(255,255,255,.40) !important} .rdlb-flow .screen[data-idx="1"] .trans-tile.rdlb-enq-trans-unavail .tt-glyph{background:rgba(255,255,255,.06) !important;border-color:rgba(255,255,255,.10) !important;color:rgba(255,255,255,.50) !important} /* S2 · transmission · reassurance "switch later" microcopy */ .rdlb-flow .trans-reassure{ margin-top:14px; display:flex;align-items:center;gap:10px; font:500 13px/1.4 'Plus Jakarta Sans'; color:var(--ink-3); padding:12px 14px; background:var(--cream); border:1px solid var(--line); border-radius:12px; }.rdlb-flow .trans-reassure svg{ width:16px;height:16px;flex-shrink:0; color:var(--red);stroke-width:2.2; }.rdlb-flow .screen[data-idx="1"] .trans-reassure{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.10); color:rgba(255,255,255,.78); }.rdlb-flow .screen[data-idx="1"] .trans-reassure svg{color:#FFB8B8}/* S3 · hours tiles · glass on navy + live preview as glass */ .rdlb-flow .screen[data-idx="2"] .hr-row{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); }.rdlb-flow .screen[data-idx="2"] .hr-figure{color:#fff}.rdlb-flow .screen[data-idx="2"] .hr-figure small{color:rgba(255,255,255,.60)}.rdlb-flow .screen[data-idx="2"] .hr-price{color:#fff}.rdlb-flow .screen[data-idx="2"] .hr-rate{color:rgba(255,255,255,.65)}.rdlb-flow .screen[data-idx="2"] .hr-radio{border-color:rgba(255,255,255,.40)}.rdlb-flow .screen[data-idx="2"] .hr-row.is-active{ background:rgba(229,83,83,.14); border-color:rgba(255,255,255,.18); box-shadow:0 0 0 3px rgba(229,83,83,.16),0 14px 32px -10px rgba(0,0,0,.40); }.rdlb-flow .screen[data-idx="2"] .hr-row.is-active .hr-figure{color:#fff}.rdlb-flow .screen[data-idx="2"] .hr-row.is-active .hr-figure small{color:rgba(255,255,255,.65)}.rdlb-flow .screen[data-idx="2"] .hr-row.is-active .hr-price{color:#fff}.rdlb-flow .screen[data-idx="2"] .hr-row.is-active .hr-rate{color:rgba(255,255,255,.70)}.rdlb-flow .screen[data-idx="2"] .hr-pop{background:var(--red);color:#fff}.rdlb-flow .screen[data-idx="2"] .live-preview{ background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); }/* S4 · contact rows · glass on navy */ .rdlb-flow .screen[data-idx="3"] .contact-row{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.14); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); }.rdlb-flow .screen[data-idx="3"] .cr-glyph{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.14);color:#fff}.rdlb-flow .screen[data-idx="3"] .cr-label{color:rgba(255,255,255,.55)}.rdlb-flow .screen[data-idx="3"] .cr-input{color:#fff}.rdlb-flow .screen[data-idx="3"] .cr-sub-divider{background:rgba(255,255,255,.14)}.rdlb-flow .screen[data-idx="3"] input[type="date"]::-webkit-calendar-picker-indicator, .rdlb-flow .screen[data-idx="3"] input[type="time"]::-webkit-calendar-picker-indicator{ filter:invert(1) brightness(1.2); opacity:.7; cursor:pointer; }.rdlb-flow .screen[data-idx="3"] input[type="date"]::-webkit-calendar-picker-indicator:hover, .rdlb-flow .screen[data-idx="3"] input[type="time"]::-webkit-calendar-picker-indicator:hover{opacity:1}.rdlb-flow .screen[data-idx="3"] .contact-row.is-valid input[type="date"]::-webkit-calendar-picker-indicator, .rdlb-flow .screen[data-idx="3"] .contact-row.is-valid input[type="time"]::-webkit-calendar-picker-indicator{ filter:none;opacity:.85; }.rdlb-flow .screen[data-idx="3"] .cr-input::placeholder{color:rgba(255,255,255,.40)}.rdlb-flow .screen[data-idx="3"] .contact-row.is-valid{ background:#fff;border-color:#fff; box-shadow:none; }.rdlb-flow .screen[data-idx="3"] .contact-row.is-valid .cr-glyph{background:var(--red-tint);color:var(--red);border-color:transparent}.rdlb-flow .screen[data-idx="3"] .contact-row.is-valid .cr-label{color:var(--ink-3)}/* S4 · ensure the (expanded) notes card can scroll fully above the fixed CTA */ .rdlb-flow .screen[data-idx="3"] .contact-stack{padding-bottom:0}.rdlb-flow .screen[data-idx="3"] .contact-row.is-valid .cr-input{color:var(--ink)}/* ===== S6 · DONE · re-imagined v9.x · excitement-first ===== */ .rdlb-flow .screen-done{ background: radial-gradient(ellipse 700px 600px at 20% 8%, rgba(229,83,83,.36) 0%, transparent 60%), radial-gradient(ellipse 600px 500px at 90% 95%, rgba(229,83,83,.20) 0%, transparent 60%), linear-gradient(165deg, #1a2056 0%, #000625 100%) !important; color:#fff; }.rdlb-flow .screen-done::after{ content:"";position:absolute;inset:0;z-index:0; background-image:radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px); background-size:24px 24px; mask-image:radial-gradient(ellipse 100% 100% at center,#000 20%,transparent 75%); -webkit-mask-image:radial-gradient(ellipse 100% 100% at center,#000 20%,transparent 75%); pointer-events:none; }.rdlb-flow .screen-done .topbar-progress{background:rgba(255,255,255,.14)}.rdlb-flow .screen-done .topbar-progress-fill{background:#fff}.rdlb-flow .screen-done .topbar-back{display:none}.rdlb-flow .screen-done .topbar-step{color:rgba(255,255,255,.70)}/* Re-imagined body */ .rdlb-flow .screen-done .done-body{ flex:1;display:flex;flex-direction:column; padding:28px 22px 18px;color:#fff; position:relative;z-index:2; align-items:stretch; overflow-y:auto; scrollbar-width:none; }.rdlb-flow .screen-done .done-body::-webkit-scrollbar{display:none}.rdlb-flow .done-stamp{ display:flex;align-items:center;gap:12px; margin-bottom:16px; }.rdlb-flow .screen-done .done-check{ width:48px;height:48px;border-radius:16px; background:#fff;color:var(--red); display:flex;align-items:center;justify-content:center; position:relative;flex-shrink:0;margin:0; transform:scale(0) rotate(-12deg); animation:checkPop .65s cubic-bezier(.34,1.56,.64,1) .1s forwards; box-shadow:0 14px 24px -8px rgba(0,0,0,.30); }.rdlb-flow .screen-done .done-check svg{width:22px;height:22px;stroke-width:3.4}.rdlb-flow .screen-done .done-check::before, .rdlb-flow .screen-done .done-check::after{display:none !important} @keyframes checkPop{0%{transform:scale(0) rotate(-12deg)}60%{transform:scale(1.15) rotate(2deg)}100%{transform:scale(1) rotate(0deg)}}.rdlb-flow .done-booked{ display:inline-flex;align-items:center;gap:7px; padding:8px 13px 8px 10px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.18); border-radius:999px; font:800 10.5px/1 'Plus Jakarta Sans'; color:#fff;letter-spacing:.14em;text-transform:uppercase; opacity:0;transform:translateY(8px); animation:fadeUp .5s ease-out .55s forwards; backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); }.rdlb-flow .done-booked::before{ content:"";width:7px;height:7px;border-radius:50%; background:#7ED8B1; box-shadow:0 0 0 3px rgba(126,216,177,.25); animation:eyebrowPulse 1.6s ease-in-out infinite; }.rdlb-flow .screen-done .done-name{ font:800 48px/1.05 'Plus Jakarta Sans'; color:#fff; letter-spacing:-.04em; margin:0 0 12px; opacity:0;transform:translateY(14px); animation:fadeUp .55s ease-out .35s forwards; }.rdlb-flow .screen-done .done-name strong{ background:linear-gradient(135deg,#FFFFFF 0%,#FFD7D7 100%); -webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent; font-weight:800; }.rdlb-flow .done-headline{ font:500 15px/1.45 'Plus Jakarta Sans'; color:rgba(255,255,255,.80); margin:0 0 18px; letter-spacing:-.005em; opacity:0;transform:translateY(10px); animation:fadeUp .55s ease-out .6s forwards; max-width:32ch; }.rdlb-flow .done-headline strong{color:#fff;font-weight:800}.rdlb-flow .done-summary{ margin-bottom:14px; padding:14px 16px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); border-radius:14px; display:flex;align-items:center;gap:12px; opacity:0;transform:translateY(10px); animation:fadeUp .55s ease-out .75s forwards; }.rdlb-flow .done-summary-icon{ width:34px;height:34px;border-radius:10px; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.16); display:flex;align-items:center;justify-content:center; color:#fff;flex-shrink:0; }.rdlb-flow .done-summary-icon svg{width:16px;height:16px;stroke-width:2.2}.rdlb-flow .done-summary-body{flex:1;min-width:0}.rdlb-flow .done-summary-title{font:800 13.5px/1.2 'Plus Jakarta Sans';color:#fff;letter-spacing:-.005em}.rdlb-flow .done-summary-detail{margin-top:3px;font:600 11.5px/1.3 'Plus Jakarta Sans';color:rgba(255,255,255,.62)}.rdlb-flow .done-summary-price{ font:800 16px/1 'Plus Jakarta Sans'; color:#fff;letter-spacing:-.02em; flex-shrink:0;text-align:right; }.rdlb-flow .done-summary-price small{ display:block; font:600 8.5px/1 'Plus Jakarta Sans'; color:rgba(255,255,255,.55); text-transform:uppercase;letter-spacing:.10em; margin-top:4px; }.rdlb-flow .done-ticker{ margin-bottom:14px; padding:12px 14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); border-radius:14px; position:relative; opacity:0;transform:translateY(10px); animation:fadeUp .55s ease-out .9s forwards; }.rdlb-flow .done-ticker-head{ display:flex;align-items:center;gap:7px; font:800 9px/1 'Plus Jakarta Sans'; color:rgba(255,255,255,.55); text-transform:uppercase;letter-spacing:.14em; margin-bottom:8px; }.rdlb-flow .done-ticker-head::before{ content:"";width:7px;height:7px;border-radius:50%; background:var(--red); box-shadow:0 0 0 3px rgba(229,83,83,.25); animation:eyebrowPulse 1.4s ease-in-out infinite; }.rdlb-flow .done-ticker-stage{ position:relative; min-height:34px; }.rdlb-flow .done-ticker-msg{ position:absolute;inset:0; display:flex;align-items:center;gap:10px; font:600 12.5px/1.3 'Plus Jakarta Sans'; color:rgba(255,255,255,.90); letter-spacing:-.005em; opacity:0;transform:translateY(6px); transition:opacity .4s ease,transform .4s cubic-bezier(.32,1.10,.42,1); }.rdlb-flow .done-ticker-msg.is-visible{opacity:1;transform:translateY(0)}.rdlb-flow .done-ticker-msg.is-leaving{opacity:0;transform:translateY(-6px)}.rdlb-flow .done-ticker-avatar{ width:26px;height:26px;border-radius:50%; background:linear-gradient(135deg,#FF6B6B,#e55353); color:#fff; display:flex;align-items:center;justify-content:center; font:800 11px/1 'Plus Jakarta Sans'; flex-shrink:0; box-shadow:0 4px 10px -3px rgba(229,83,83,.50); }.rdlb-flow .done-ticker-msg-text{flex:1;min-width:0}.rdlb-flow .done-ticker-msg-text strong{color:#fff;font-weight:800}.rdlb-flow .done-ticker-msg-time{ font:700 10.5px/1 'Plus Jakarta Sans'; color:rgba(255,255,255,.50); flex-shrink:0; letter-spacing:-.005em; }.rdlb-flow .done-anticipate{ margin-bottom:18px; padding:13px 16px; background:linear-gradient(135deg,rgba(229,83,83,.20) 0%,rgba(229,83,83,.08) 100%); border:1px solid rgba(229,83,83,.28); border-radius:14px; display:flex;align-items:center;gap:12px; opacity:0;transform:translateY(10px); animation:fadeUp .55s ease-out 1.05s forwards; }.rdlb-flow .done-anticipate-icon{ width:30px;height:30px;border-radius:10px; background:#fff;color:var(--red); display:flex;align-items:center;justify-content:center; flex-shrink:0; box-shadow:0 6px 14px -4px rgba(229,83,83,.40); }.rdlb-flow .done-anticipate-icon svg{width:15px;height:15px;stroke-width:2.4}.rdlb-flow .done-anticipate-body{flex:1;min-width:0}.rdlb-flow .done-anticipate-title{font:800 13px/1.2 'Plus Jakarta Sans';color:#fff;letter-spacing:-.005em}.rdlb-flow .done-anticipate-detail{margin-top:2px;font:600 11.5px/1.3 'Plus Jakarta Sans';color:rgba(255,255,255,.75)} /* Screen 6 left-column trust + support block (fills the lower navy area). */ .rdlb-flow .done-trust{ margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,.10); display:flex;flex-direction:column;gap:14px; opacity:0;transform:translateY(10px); animation:fadeUp .55s ease-out 1.25s forwards; } .rdlb-flow .done-trust .tp-widget{margin:0;align-items:flex-start} .rdlb-flow .done-support{ display:flex;align-items:center;gap:12px; padding:13px 16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:14px; text-decoration:none; transition:background .2s,border-color .2s; } .rdlb-flow .done-support:hover{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22)} .rdlb-flow .done-support-icon{ width:30px;height:30px;border-radius:10px;flex-shrink:0; background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14); color:#fff;display:flex;align-items:center;justify-content:center; } .rdlb-flow .done-support-icon svg{width:15px;height:15px;stroke-width:2} .rdlb-flow .done-support-body{flex:1;min-width:0} .rdlb-flow .done-support-title{font:800 13px/1.2 'Plus Jakarta Sans';color:#fff;letter-spacing:-.005em} .rdlb-flow .done-support-detail{margin-top:2px;font:600 11.5px/1.3 'Plus Jakarta Sans';color:rgba(255,255,255,.75)} .rdlb-flow .done-cta-wrap{ margin-top:auto; padding-top:14px;padding-bottom:18px; opacity:0;transform:translateY(12px); animation:fadeUp .55s ease-out 1.2s forwards; }.rdlb-flow .done-cta-eye{ text-align:center; font:800 10.5px/1 'Plus Jakarta Sans'; color:rgba(255,255,255,.65); letter-spacing:.16em;text-transform:uppercase; margin-bottom:6px; }.rdlb-flow .done-cta{ width:100%; padding:18px 18px; background:#fff; color:var(--ink); border-radius:16px; display:flex;align-items:center;justify-content:center;gap:10px; font:800 16px/1 'Plus Jakarta Sans'; letter-spacing:-.01em; text-decoration:none; transition:transform .2s,box-shadow .2s; box-shadow: 0 1px 0 rgba(255,255,255,1) inset, 0 18px 36px -12px rgba(0,0,0,.45), 0 4px 10px rgba(0,0,0,.20); }.rdlb-flow .done-cta:hover{transform:translateY(-2px);box-shadow:0 1px 0 rgba(255,255,255,1) inset,0 24px 48px -12px rgba(0,0,0,.55),0 6px 14px rgba(0,0,0,.25)}.rdlb-flow .done-cta:active{transform:translateY(0) scale(.985)}.rdlb-flow .done-cta svg{width:22px;height:22px;flex-shrink:0;color:var(--ink)}.rdlb-flow .done-cta-android{ margin-top:10px; display:block;text-align:center; font:700 12.5px/1 'Plus Jakarta Sans'; color:rgba(255,255,255,.65); text-decoration:underline; text-underline-offset:4px;text-decoration-thickness:1.5px; padding:6px 0; letter-spacing:-.005em; }.rdlb-flow .done-cta-android:hover{color:#fff}/* Hide all legacy S6 chrome */ .rdlb-flow .screen-done .done-hero, .rdlb-flow .screen-done .next-steps, .rdlb-flow .screen-done .done-map, .rdlb-flow .screen-done .done-narration, .rdlb-flow .screen-done .done-app{display:none !important}/* ════════════════════════════════════════════════════════════════ v9.x · Choreographed animations · escalating delight per screen ════════════════════════════════════════════════════════════════ */ /* Universal screen-entry stagger · heading + footer only · content blocks animate themselves */ .rdlb-flow .screen.is-active .heading{animation:stageIn .55s cubic-bezier(.32,1.10,.42,1) .08s both}.rdlb-flow .screen.is-active .footer{animation:stageIn .55s cubic-bezier(.32,1.10,.42,1) .42s both} @keyframes stageIn{0%{opacity:0;transform:translateY(10px)}100%{opacity:1;transform:translateY(0)}}/* S1 · pin drops in dramatically + floating avatars circle in */ .rdlb-flow .screen.is-active .pc-pin{ animation:pinDrop .65s cubic-bezier(.34,1.56,.64,1) .15s both, pinFloat 4s ease-in-out 1s infinite; } @keyframes pinDrop{0%{transform:translateY(-40px) scale(.7) rotate(-12deg);opacity:0}60%{transform:translateY(6px) scale(1.05) rotate(4deg);opacity:1}100%{transform:translateY(0) scale(1) rotate(-4deg);opacity:1}}.rdlb-flow .screen.is-active .pc-float{opacity:0;animation:floatIn .45s cubic-bezier(.34,1.56,.64,1) both, floatA 5s ease-in-out infinite}.rdlb-flow .screen.is-active .pc-float.x1{animation-delay:.4s, 1.2s}.rdlb-flow .screen.is-active .pc-float.x2{animation-delay:.5s, 1.4s}.rdlb-flow .screen.is-active .pc-float.x3{animation-delay:.6s, 1.6s} @keyframes floatIn{0%{opacity:0;transform:scale(.5) translateY(-10px)}100%{opacity:1;transform:scale(1) translateY(0)}}/* S1 · address-list rows stagger in */ .rdlb-flow .address-option{ opacity:0;animation:addrIn .35s cubic-bezier(.32,1.10,.42,1) forwards; }.rdlb-flow .address-list.is-visible .address-option:nth-child(1){animation-delay:.05s}.rdlb-flow .address-list.is-visible .address-option:nth-child(2){animation-delay:.10s}.rdlb-flow .address-list.is-visible .address-option:nth-child(3){animation-delay:.15s}.rdlb-flow .address-list.is-visible .address-option:nth-child(4){animation-delay:.20s}.rdlb-flow .address-list.is-visible .address-option:nth-child(5){animation-delay:.25s}.rdlb-flow .address-list.is-visible .address-option:nth-child(6){animation-delay:.30s}.rdlb-flow .address-list.is-visible .address-option:nth-child(7){animation-delay:.35s}.rdlb-flow .address-list.is-visible .address-option:nth-child(8){animation-delay:.40s} @keyframes addrIn{0%{opacity:0;transform:translateX(-8px)}100%{opacity:1;transform:translateX(0)}}/* S2/S3/S4 · select pulse · lights up the chosen tile with a brief scale */ .rdlb-flow .trans-tile.is-active, .rdlb-flow .hr-row.is-active, .rdlb-flow .contact-row.is-valid{animation:selectPulse .45s cubic-bezier(.34,1.56,.64,1)} .rdlb-flow .trans-tile.is-active{transform-origin:center} @keyframes selectPulse{0%{transform:scale(1)}50%{transform:scale(1.025)}100%{transform:scale(1)}}/* S2/S3 · pick pulse · pronounced scale + outward ripple ring + shine sweep */ .rdlb-flow .trans-tile, .rdlb-flow .hr-row{position:relative}.rdlb-flow .trans-tile.just-picked, .rdlb-flow .hr-row.just-picked{ animation:pickPulse .6s cubic-bezier(.34,1.56,.64,1) !important; transform-origin:center; z-index:2; } @keyframes pickPulse{0%{transform:scale(1)}30%{transform:scale(1.09)}60%{transform:scale(.97)}100%{transform:scale(1)}}.rdlb-flow .trans-tile.just-picked::after, .rdlb-flow .hr-row.just-picked::after{ content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(120deg, transparent 0%, transparent 38%, rgba(255,255,255,.55) 50%, transparent 62%, transparent 100%); transform:translateX(-110%); animation:shineSweep .8s cubic-bezier(.22,1,.36,1) forwards; pointer-events:none; z-index:2; clip-path:inset(0 round 16px); } @keyframes shineSweep{0%{transform:translateX(-110%)}100%{transform:translateX(110%)}} /* RDLB: orphaned ::after body removed (no selector in source design, would have consumed the @keyframes pickRipple definition below) */ @keyframes pickRipple{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.12);opacity:0}}.rdlb-flow .trans-tile.just-picked .tt-glyph, .rdlb-flow .contact-row.is-valid .cr-glyph{animation:glyphPop .5s cubic-bezier(.34,1.56,.64,1)} @keyframes glyphPop{0%{transform:scale(.85) rotate(-6deg)}60%{transform:scale(1.12) rotate(3deg)}100%{transform:scale(1) rotate(0)}}/* S3 live-preview shimmer · confined to overlay so it can't block clicks */ .rdlb-flow .live-preview{position:relative;overflow:hidden;isolation:isolate}.rdlb-flow .live-preview > *{position:relative;z-index:1}.rdlb-flow .live-preview.is-updating::before{ content:"";position:absolute;inset:0; background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.18) 50%,transparent 60%); transform:translateX(-100%); animation:shimmer .8s ease-out forwards; pointer-events:none; z-index:0; } @keyframes shimmer{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}/* S3 · Most popular — simple eyebrow only, same card style as rest */ /* S4 · contact row · staggered entry on screen activate */ .rdlb-flow .screen.is-active .contact-stack .contact-row:nth-child(1){animation:stageIn .5s cubic-bezier(.32,1.10,.42,1) .24s both}.rdlb-flow .screen.is-active .contact-stack .contact-row:nth-child(2):not(.is-hidden){animation:stageIn .5s cubic-bezier(.32,1.10,.42,1) .32s both}.rdlb-flow .screen.is-active .contact-stack .contact-row:nth-child(3):not(.is-hidden){animation:stageIn .5s cubic-bezier(.32,1.10,.42,1) .40s both}.rdlb-flow .screen.is-active .contact-stack .contact-row:nth-child(4):not(.is-hidden){animation:stageIn .5s cubic-bezier(.32,1.10,.42,1) .48s both}.rdlb-flow .screen.is-active .contact-stack .contact-row:nth-child(5):not(.is-hidden){animation:stageIn .5s cubic-bezier(.32,1.10,.42,1) .56s both}.rdlb-flow .screen.is-active .contact-stack .contact-row:nth-child(6):not(.is-hidden){animation:stageIn .5s cubic-bezier(.32,1.10,.42,1) .64s both}/* S4 · valid tick pops with confetti-ish burst */ .rdlb-flow .cr-tick{position:relative}.rdlb-flow .contact-row.is-valid .cr-tick::before{ content:"";position:absolute;inset:-6px;border-radius:50%; background:var(--red-tint); animation:tickBurst .55s cubic-bezier(.34,1.56,.64,1); pointer-events:none; z-index:-1; } @keyframes tickBurst{0%{transform:scale(0);opacity:.8}100%{transform:scale(2);opacity:0}}/* S5 · trust pills cascade in */ .rdlb-flow .screen[data-idx="5"] .trust-pill:nth-child(1){animation:tpIn .5s cubic-bezier(.34,1.56,.64,1) .35s both}.rdlb-flow .screen[data-idx="5"] .trust-pill:nth-child(2){animation:tpIn .5s cubic-bezier(.34,1.56,.64,1) .42s both}.rdlb-flow .screen[data-idx="5"] .trust-pill:nth-child(3){animation:tpIn .5s cubic-bezier(.34,1.56,.64,1) .49s both}.rdlb-flow .screen[data-idx="5"] .trust-pill:nth-child(4){animation:tpIn .5s cubic-bezier(.34,1.56,.64,1) .56s both} @keyframes tpIn{0%{opacity:0;transform:translateY(8px) scale(.9)}100%{opacity:1;transform:translateY(0) scale(1)}}/* S5 · Apple Pay button · subtle continuous shimmer to draw the eye */ .rdlb-flow .apple-pay{position:relative;overflow:hidden}.rdlb-flow .apple-pay::after{ content:"";position:absolute;inset:0; background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.10) 50%,transparent 60%); transform:translateX(-100%); animation:applePayShimmer 4.5s ease-in-out infinite; pointer-events:none; } /* v2.9.72: the mobile Pay button is WHITE, so the white shimmer above is invisible on it. On the pay screen give the button a subtle DARK sweep (so the shimmer is actually seen crossing the button) plus a soft glow, in keeping with the design. Scoped to the white mobile button only; the desktop red button has its own authShimmer. */ @media(max-width:1023px){ .rdlb-flow .screen[data-idx="5"] .apple-pay{ box-shadow:0 10px 30px -8px rgba(255,255,255,.28), 0 4px 12px rgba(0,0,0,.30); } .rdlb-flow .screen[data-idx="5"] .apple-pay::after{ background:linear-gradient(110deg,transparent 38%,rgba(14,18,48,.10) 50%,transparent 62%); } } @keyframes applePayShimmer{0%, 40%{transform:translateX(-100%)}60%, 100%{transform:translateX(100%)}}/* S5 · pay-summary total value */ /* S6 · name letters cascade in */ .rdlb-flow .done-name strong{ display:inline-block; padding-bottom:.08em; } /* Reduced-motion respect */ @media(prefers-reduced-motion:reduce){*, .rdlb-flow *::before, .rdlb-flow *::after{ animation:none !important; transition:none !important; }} /* ──────────── REDUCED MOTION ──────────── */ @media(prefers-reduced-motion:reduce){*, .rdlb-flow *::before, .rdlb-flow *::after{ animation-duration:.01s !important; transition-duration:.01s !important; }}/* === Info sheet styles === */ .rdlb-flow .rd-tweaks{ position:fixed;right:14px;bottom:14px;z-index:1500; background:#fff;color:var(--ink); border-radius:14px; padding:14px 14px 12px; box-shadow:0 24px 60px -10px rgba(0,8,66,.45),0 0 0 1px rgba(0,8,66,.06); width:min(280px, calc(100vw - 28px)); font-family:'Plus Jakarta Sans',-apple-system,system-ui,sans-serif; }/* ============================================================ RDLB · Address summary card (S4 You) Shows the picked-from-S1 address as a read-only card with edit affordance. Hidden by default; JS removes is-hidden when STATE.selectedAddress exists. ============================================================ */ .rdlb-flow .rdlb-addr-summary{ display:flex !important;align-items:center !important;gap:14px !important; padding:14px 16px !important; background:var(--surface) !important; border:1px solid var(--line) !important; border-radius:14px !important; box-shadow:var(--shadow-card) !important; margin-bottom:14px !important; }.rdlb-flow .rdlb-addr-summary.is-hidden{display:none !important}.rdlb-flow .rdlb-addr-summary-glyph{ width:42px !important;height:42px !important; border-radius:12px !important; background:rgba(229,83,83,.10) !important; color:var(--red) !important; display:flex !important;align-items:center !important;justify-content:center !important; flex-shrink:0 !important; }.rdlb-flow .rdlb-addr-summary-glyph svg{width:20px !important;height:20px !important}.rdlb-flow .rdlb-addr-summary-body{flex:1 !important;min-width:0 !important}.rdlb-flow .rdlb-addr-summary-label{ font:700 11px/1 'Plus Jakarta Sans' !important; text-transform:uppercase !important;letter-spacing:.06em !important; color:var(--ink-3) !important; margin-bottom:4px !important; }.rdlb-flow .rdlb-addr-summary-text{ font:600 14px/1.35 'Plus Jakarta Sans' !important; color:var(--ink) !important; letter-spacing:-.005em !important; word-wrap:break-word !important; }.rdlb-flow .rdlb-addr-summary-edit{ flex-shrink:0 !important; padding:8px 12px !important; background:transparent !important; border:1px solid var(--line) !important; border-radius:10px !important; color:var(--ink-2) !important; font:700 12px/1 'Plus Jakarta Sans' !important; cursor:pointer !important; transition:background .15s ease, border-color .15s ease, color .15s ease !important; }.rdlb-flow .rdlb-addr-summary-edit:hover, .rdlb-flow .rdlb-addr-summary-edit:focus-visible{ background:var(--surface-2) !important; border-color:var(--ink-4) !important; color:var(--ink) !important; outline:none !important; }/* ============================================================ * Address lookup — manual entry fallback (S1) * Shown only when getaddress returns no results, or when the user * explicitly chooses to type their address manually. * ============================================================ */ .rdlb-flow .address-list-manual{ display:block !important; width:100% !important; margin-top:8px !important; padding:10px 12px !important; background:transparent !important; border:0 !important; color:var(--ink-3) !important; font:600 12px/1.2 'Plus Jakarta Sans' !important; text-decoration:underline !important; text-underline-offset:3px !important; cursor:pointer !important; transition:color .15s ease !important; }.rdlb-flow .address-list-manual:hover, .rdlb-flow .address-list-manual:focus-visible{ color:var(--red) !important; outline:none !important; }.rdlb-flow .address-manual{ display:none !important; flex-direction:column !important; gap:12px !important; width:100% !important; max-width:320px !important; margin:14px auto 0 !important; padding:16px !important; background:var(--surface) !important; border:1px solid var(--line) !important; border-radius:14px !important; box-shadow:var(--shadow-card) !important; }.rdlb-flow .address-manual.is-visible{display:flex !important}.rdlb-flow .address-manual-row{display:flex !important;flex-direction:column !important;gap:4px !important}.rdlb-flow .address-manual-label{ font:600 11px/1 'Plus Jakarta Sans' !important; text-transform:uppercase !important;letter-spacing:.06em !important; color:var(--ink-3) !important; }.rdlb-flow .address-manual-input{ width:100% !important; padding:10px 12px !important; border:1px solid var(--line) !important; border-radius:10px !important; background:var(--surface) !important; color:var(--ink) !important; font:500 16px/1.2 'Plus Jakarta Sans' !important; appearance:none !important; outline:none !important; transition:border-color .15s ease, box-shadow .15s ease !important; }.rdlb-flow .address-manual-input:focus{ border-color:var(--red) !important; box-shadow:0 0 0 3px rgba(229,83,83,.15) !important; }.rdlb-flow .address-manual-confirm{ width:100% !important; margin-top:4px !important; padding:12px 14px !important; background:var(--red) !important; border:0 !important; border-radius:12px !important; color:#fff !important; font:700 13px/1 'Plus Jakarta Sans' !important; cursor:pointer !important; transition:background .15s ease, transform .1s ease !important; }.rdlb-flow .address-manual-confirm:hover{background:var(--red-dark, #c43d3d) !important}.rdlb-flow .address-manual-confirm:active{transform:translateY(1px) !important}.rdlb-flow .address-manual-confirm:disabled{ background:var(--ink-4) !important; cursor:not-allowed !important; transform:none !important; }/* ═══════════════════════════════════════════════════════════════ Was/Now pricing display (v1.7.0) Strikethrough "was" price inline before the "now" price. ═══════════════════════════════════════════════════════════════ */ .rdlb-flow .hr-rate .hr-rate-was{ text-decoration: line-through; text-decoration-thickness: 1px; opacity: 0.55; margin-right: 4px; font-weight: 500; }/* On the dark step-2 background, the strikethrough still needs to be legible */ .rdlb-flow .screen[data-idx="2"] .hr-rate .hr-rate-was{ opacity: 0.5; }/* ═══════════════════════════════════════════════════════════════ Booking flow — promo code block on the payment step (v1.9.0) ═══════════════════════════════════════════════════════════════ */ .rdlb-flow .rdlb-promo-block{ margin: 14px 2px 4px; padding: 0; background: transparent; border: 0; border-radius: 0; }.rdlb-flow .rdlb-promo-toggle{ display:inline-flex;align-items:center;gap:7px; background: none; border: 0; padding: 2px 0; color: var(--red, #e55353); font:700 13px/1 'Plus Jakarta Sans'; cursor: pointer; text-decoration: none; letter-spacing:-.005em; }.rdlb-flow .rdlb-promo-toggle::before{ content:"";width:16px;height:16px;flex:0 0 auto; background:currentColor; -webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41 13.42 20.6a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cpath d='M7 7h.01'/%3E%3C/svg%3E"); mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41 13.42 20.6a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cpath d='M7 7h.01'/%3E%3C/svg%3E"); }.rdlb-flow .rdlb-promo-toggle:hover{ color: #c63d3d; }.rdlb-flow .rdlb-promo-form{ display: none; flex-direction: column; gap: 12px; margin: 12px 0 0; padding: 16px; background: linear-gradient(180deg, #fff 0%, #fdf6f5 100%); border: 1px solid rgba(229,83,83,.18); border-radius: 16px; box-shadow: 0 1px 2px rgba(14,18,48,.04), 0 18px 36px -22px rgba(229,83,83,.4); animation: rdlbPromoIn .22s cubic-bezier(.34,1.4,.5,1); } @keyframes rdlbPromoIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}.rdlb-flow .rdlb-promo-form-head{ display:flex;align-items:center;justify-content:space-between; }.rdlb-flow .rdlb-promo-form-title{ font:800 13px/1 'Plus Jakarta Sans';color:#0f1733;letter-spacing:-.01em; display:inline-flex;align-items:center;gap:7px; }.rdlb-flow .rdlb-promo-form-title::before{ content:"";width:15px;height:15px;flex:0 0 auto;background:var(--red,#e55353); -webkit-mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41 13.42 20.6a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cpath d='M7 7h.01'/%3E%3C/svg%3E"); mask:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41 13.42 20.6a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cpath d='M7 7h.01'/%3E%3C/svg%3E"); }.rdlb-flow .rdlb-promo-close{ width:26px;height:26px;flex:0 0 auto;border-radius:50%; display:flex;align-items:center;justify-content:center; background:rgba(14,18,48,.05);border:0;color:#6b7390;cursor:pointer; transition:background .15s ease, color .15s ease; }.rdlb-flow .rdlb-promo-close:hover{background:rgba(14,18,48,.1);color:#0f1733}.rdlb-flow .rdlb-promo-form-row{ display:flex;gap:8px;align-items:stretch;flex-wrap:wrap;width:100%; }.rdlb-flow .rdlb-promo-block.is-open .rdlb-promo-toggle{ display: none; }.rdlb-flow .rdlb-promo-block.is-open .rdlb-promo-form{ display: flex; }.rdlb-flow .rdlb-promo-input{ flex: 1 1 120px;min-width:0;max-width:100%; padding: 12px 14px; border: 1.5px solid #e3e6ef; border-radius: 12px; background: #fff; color: #0f1733; font-family: ui-monospace, SFMono-Regular, "Consolas", monospace; font-size: 16px; text-transform: uppercase; letter-spacing: 0.06em; box-sizing:border-box; box-shadow:0 1px 2px rgba(14,18,48,.04); }.rdlb-flow .rdlb-promo-input::placeholder{ color: #9aa1b5; text-transform: none; letter-spacing: 0; font-family: 'Plus Jakarta Sans'; }.rdlb-flow .rdlb-promo-input:focus{ outline: none; border-color: var(--red, #e55353); box-shadow: 0 0 0 3px rgba(229, 83, 83, 0.14); }.rdlb-flow .rdlb-promo-apply{ padding: 12px 20px; background: linear-gradient(180deg,#f0655f 0%, var(--red,#e55353) 100%); color: #fff; border: none; border-radius: 12px; font:800 14px/1 'Plus Jakarta Sans'; cursor: pointer; flex:0 0 auto; width:auto !important;min-width:0 !important;max-width:100% !important; white-space:nowrap; box-sizing:border-box; box-shadow:0 4px 12px -6px rgba(229,83,83,.45); transition: transform 150ms ease, box-shadow .2s ease, filter .2s ease; }.rdlb-flow .rdlb-promo-apply:hover{ filter:brightness(1.04); box-shadow:0 6px 14px -6px rgba(229,83,83,.5); }.rdlb-flow .rdlb-promo-apply:disabled{ opacity: 0.5; cursor: not-allowed; transform:none; box-shadow:none; }.rdlb-flow .rdlb-promo-msg{ margin: 8px 0 0; font-size: 12px; line-height: 1.5; }.rdlb-flow .rdlb-promo-msg.is-error{ color: #fca5a5; }.rdlb-flow .rdlb-promo-msg.is-success{ color: #6ee7b7; }.rdlb-flow .rdlb-promo-applied{ display: none; align-items: center; gap: 12px; margin: 10px 0 0; padding: 10px 14px; background: rgba(110, 231, 183, 0.1); border: 1px solid rgba(110, 231, 183, 0.3); border-radius: 8px; }.rdlb-flow .rdlb-promo-block.is-applied .rdlb-promo-applied{ display: flex; }.rdlb-flow .rdlb-promo-block.is-applied .rdlb-promo-form{ display: none; }.rdlb-flow .rdlb-promo-block.is-applied .rdlb-promo-toggle{ display: none; }.rdlb-flow .rdlb-promo-applied-code{ font-family: ui-monospace, SFMono-Regular, "Consolas", monospace; font-weight: 700; color: #6ee7b7; letter-spacing: 0.02em; }.rdlb-flow .rdlb-promo-applied-detail{ flex: 1; font-size: 12px; color: rgba(255,255,255,0.7); }.rdlb-flow .rdlb-promo-remove{ background: none; border: none; color: rgba(255,255,255,0.5); font-size: 11px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; font-family: inherit; }.rdlb-flow .rdlb-promo-remove:hover{ color: #fca5a5; }.rdlb-flow .rdlb-promo-row-was{ text-decoration: line-through; text-decoration-thickness: 1px; opacity: 0.55; margin-right: 6px; font-weight: 500; } /* ════════════════════════════════════════════════════════════════ v2.9.62 · MOBILE FIXES (base scope, <1024px) The desktop @media block below styles .pay-card-reassure / .pcr-* and hides .match-preview — but ONLY at >=1024px. On mobile those rules were missing, so (a) "Likely matches near" showed on mobile though it was removed on desktop, and (b) the "You're not locked in" card had NO mobile styling, so its rendered as a huge block heading and the as oversized text. These mobile-scoped rules fix both. Desktop is unchanged (its >=1024px rules come later and win there). ════════════════════════════════════════════════════════════════ */ @media(max-width:1023px){ /* (defect) Hide the likely-matches preview on mobile too, matching desktop. */ .rdlb-flow .screen[data-idx="5"] .match-preview{display:none !important} /* (defect) "You're not locked in." reassurance card · mobile styling. Compact glass row on the navy pay card: small icon tile + small text, white bold lead line, muted sub line. Mirrors the desktop intent at mobile scale so the / no longer render unstyled/oversized. */ .rdlb-flow .screen[data-idx="5"] .pay-card-reassure{ display:flex;align-items:center;gap:12px; padding:13px 18px; margin:6px 14px 12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:13px; } .rdlb-flow .screen[data-idx="5"] .pcr-icon{ width:32px;height:32px;border-radius:10px; background:rgba(229,83,83,.18); border:1px solid rgba(229,83,83,.30); color:#FFB8B8; display:flex;align-items:center;justify-content:center; flex-shrink:0; } .rdlb-flow .screen[data-idx="5"] .pcr-icon svg{width:15px !important;height:15px !important} .rdlb-flow .screen[data-idx="5"] .pcr-text{ flex:1;min-width:0; font:500 12px/1.4 'Plus Jakarta Sans',system-ui,sans-serif; color:rgba(255,255,255,.72); } .rdlb-flow .screen[data-idx="5"] .pcr-text strong{ display:block; font:800 13px/1.25 'Plus Jakarta Sans',system-ui,sans-serif; color:#fff;letter-spacing:-.005em; margin-bottom:2px; } } /* DESKTOP DESIGN (v9 confirmed, COMPLETE v2) - all 6 screens split at >=1024px, scoped, mobile untouched */ .rdlb-flow .dt-bar{ display: none; }.rdlb-flow .dt-hero{ display: none; } .rdlb-flow .pc-go{display:none} .rdlb-flow .rdlb-steprail{display:none} @media(min-width:1024px){:root{--cream:#F6F4EE;--cream-2:#EFEBE0}.rdlb-flow{background:var(--cream) !important;max-width:none !important;width:100vw !important;margin-left:calc(50% - 50vw) !important;margin-right:calc(50% - 50vw) !important;margin-top:0 !important;margin-bottom:0 !important;overflow:visible !important;min-height:auto !important}.rdlb-flow .harness{padding:0 !important;margin:0 !important;min-height:auto;height:auto !important;display:block !important;background:var(--cream) !important;padding-top:0 !important}.rdlb-flow .phone{position:relative !important;width:100vw !important;height:auto !important;min-height:auto !important;background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important;overflow:visible !important;margin:0 !important}.rdlb-flow .phone::before{display:none !important}.rdlb-flow .stack{flex:none !important;position:relative !important;background:transparent !important;width:100% !important;min-height:auto !important;max-width:none !important;margin:0 !important;overflow:visible !important}.rdlb-flow .harness{ padding:0 !important;margin:0 !important; min-height:auto !important;height:auto !important; display:block !important;background:var(--cream) !important; padding-top:0 !important; }.rdlb-flow .harness::before{display:none}.rdlb-flow .phone{ position:relative !important; width:100vw !important;height:auto !important;min-height:auto !important; background:transparent !important;border:0 !important;border-radius:0 !important;box-shadow:none !important; overflow:visible !important;margin:0 !important; }.rdlb-flow .phone::before{display:none !important}.rdlb-flow .dt-bar{ position:fixed;top:0;left:0;right:0;z-index:100; height:72px; display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:48px; padding:0 40px; background:rgba(246,244,238,.88); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid rgba(14,18,48,.06); }.rdlb-flow .dt-bar-brand{ display:flex;align-items:center;gap:11px; font:800 18px/1 'Plus Jakarta Sans';letter-spacing:-.02em; color:var(--ink);text-decoration:none; }.rdlb-flow .dt-bar-mark{ width:32px;height:32px;border-radius:10px; background:linear-gradient(135deg,var(--red),#c43d3d);color:#fff; display:flex;align-items:center;justify-content:center; box-shadow:0 8px 18px -6px rgba(229,83,83,.45); }.rdlb-flow .dt-bar-mark svg{width:16px;height:16px;stroke-width:2.4}.rdlb-flow .dt-bar-steps{ list-style:none;margin:0;padding:0; display:flex;align-items:center;justify-content:center;gap:4px; }.rdlb-flow .dt-bar-steps li{ display:flex;align-items:center;gap:9px; font:700 12.5px/1 'Plus Jakarta Sans';letter-spacing:-.005em; color:var(--ink-3);padding:9px 14px;border-radius:999px; transition:background .2s,color .2s; }.rdlb-flow .dt-bar-steps li.is-current{background:var(--ink);color:#fff}.rdlb-flow .dt-bar-steps li.is-done{color:var(--ink)}.rdlb-flow .dt-bar-num{ width:20px;height:20px;border-radius:50%; background:rgba(14,18,48,.08);color:var(--ink-3); display:flex;align-items:center;justify-content:center; font:800 11px/1 'Plus Jakarta Sans'; }.rdlb-flow .dt-bar-steps li.is-current .dt-bar-num{background:var(--red);color:#fff}.rdlb-flow .dt-bar-steps li.is-done .dt-bar-num{background:var(--red);color:#fff}.rdlb-flow .dt-bar-steps li.dt-bar-step-done .dt-bar-num svg{width:11px;height:11px;stroke-width:3.2}.rdlb-flow .dt-bar-right{display:flex;align-items:center;gap:18px}.rdlb-flow .dt-bar-stars{display:flex;gap:2px}.rdlb-flow .dt-bar-stars svg{ width:14px;height:14px; background:#00B67A;color:#fff; padding:2px;border-radius:2px; box-sizing:content-box; }.rdlb-flow .dt-bar-rating{font:600 12.5px/1 'Plus Jakarta Sans';color:var(--ink-2)}.rdlb-flow .dt-bar-rating strong{color:#00B67A;font-weight:800}.rdlb-flow .dt-bar-help{font:700 12.5px/1 'Plus Jakarta Sans';color:var(--ink-3);text-decoration:none}.rdlb-flow .dt-bar-help:hover{color:var(--ink)}.rdlb-flow .stack{ flex:1;position:relative;background:transparent; width:100%;min-height:100vh; overflow:visible !important; }.rdlb-flow .screen{ position:absolute !important;inset:0 !important; width:100% !important;height:auto !important;min-height:auto !important; padding:0 !important; background:transparent !important; transition:opacity .35s ease; transform:none !important; opacity:0 !important;visibility:hidden !important;pointer-events:none !important; overflow:visible !important; } .rdlb-flow .screen.is-active{position:relative !important;inset:auto !important;transform:none !important;opacity:1 !important;visibility:visible !important;pointer-events:auto !important} .rdlb-flow .screen.is-past{transform:none !important;opacity:0 !important;visibility:hidden !important;pointer-events:none !important}.rdlb-flow .screen .topbar, .rdlb-flow .screen .swipe-hint{display:none !important} .rdlb-flow .rdlb-steprail{display:flex !important;list-style:none;margin:0 auto 40px;padding:0;gap:5px;flex-wrap:wrap;align-items:center;width:100%;flex:0 0 auto !important;min-height:28px} .rdlb-flow .rdlb-steprail::-webkit-scrollbar{display:none} .rdlb-flow .rdlb-steprail-item{display:flex;align-items:center;gap:5px;padding:5px 10px 5px 6px;border-radius:999px;background:rgba(14,18,48,.05);color:rgba(14,18,48,.55);font:600 11px/1 'Plus Jakarta Sans',system-ui,sans-serif;white-space:nowrap;flex:0 0 auto;transition:background .25s,color .25s} .rdlb-flow .rdlb-steprail-num{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;background:rgba(14,18,48,.12);color:rgba(14,18,48,.6);font-weight:700;font-size:10px;flex:0 0 auto} .rdlb-flow .rdlb-steprail-item.is-current{background:var(--ink);color:#fff} .rdlb-flow .rdlb-steprail-item.is-current .rdlb-steprail-num{background:var(--red);color:#fff} .rdlb-flow .rdlb-steprail-item.is-done{color:var(--ink)} .rdlb-flow .rdlb-steprail-item.is-done .rdlb-steprail-num{background:var(--red);color:#fff} /* v2.9.166: pin the desktop step rail to the SAME centred column width as the screen content (.body > * is 520px on screens 0-2, 560px on 3-5). The rail is a .body > * child and should inherit that cap, but a stray max-width:none was winning and leaving the rail full-width — visibly ~20px left of, and wider than, the content. This element-level !important rule is higher specificity than that override, so the rail's left edge now lines up with the content. */ .rdlb-flow .screen[data-idx="0"] .body > ol.rdlb-steprail, .rdlb-flow .screen[data-idx="1"] .body > ol.rdlb-steprail, .rdlb-flow .screen[data-idx="2"] .body > ol.rdlb-steprail{max-width:520px !important;margin-left:auto !important;margin-right:auto !important} .rdlb-flow .screen[data-idx="3"] .body > ol.rdlb-steprail, .rdlb-flow .screen[data-idx="4"] .body > ol.rdlb-steprail, .rdlb-flow .screen[data-idx="5"] .body > ol.rdlb-steprail{max-width:560px !important;margin-left:auto !important;margin-right:auto !important}.rdlb-flow .screen[data-idx="0"]{ background:var(--cream) !important;color:var(--ink) !important; display:grid !important; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr) !important; align-items:stretch !important; }.rdlb-flow .screen[data-idx="0"]::after{display:none !important}.rdlb-flow .dt-hero{display:none}.rdlb-flow .screen[data-idx="0"] .dt-hero{ display:flex;flex-direction:column; grid-column:1; background: radial-gradient(ellipse 700px 600px at 20% 25%, rgba(229,83,83,.32) 0%, transparent 60%), radial-gradient(ellipse 500px 400px at 80% 80%, rgba(229,83,83,.18) 0%, transparent 60%), linear-gradient(135deg, var(--navy) 0%, #1a1f4a 100%); color:#fff; padding:80px 80px 64px; position:relative; overflow:hidden; }.rdlb-flow .screen[data-idx="0"] .dt-hero::before{ content:"";position:absolute;inset:0; background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px); background-size:28px 28px; mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 0%, transparent 70%); -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 0%, transparent 70%); pointer-events:none; }.rdlb-flow .dt-hero-eyebrow{ font:800 11px/1 'Plus Jakarta Sans'; color:rgba(255,255,255,.55); text-transform:uppercase;letter-spacing:.16em; margin-bottom:18px; position:relative;z-index:1; }.rdlb-flow .dt-hero-title{ font:800 56px/1.02 'Plus Jakarta Sans'; letter-spacing:-.035em; color:#fff;margin:0 0 16px; position:relative;z-index:1; max-width:14ch; }.rdlb-flow .dt-hero-title em{ font-style:normal; background:linear-gradient(135deg,#FFFFFF 0%,#FFD7D7 55%,#FFB0B0 100%); -webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent; }.rdlb-flow .dt-hero-sub{ font:500 17px/1.5 'Plus Jakarta Sans'; color:rgba(255,255,255,.70); margin:0 0 40px;letter-spacing:-.005em; max-width:42ch; position:relative;z-index:1; }.rdlb-flow .dt-hero-stage{ flex:1; position:relative; min-height:280px; display:flex;align-items:center;justify-content:center; margin-bottom:36px; }.rdlb-flow .dt-hero-pin{ width:128px;height:128px;border-radius:40px; background:linear-gradient(135deg, var(--red) 0%, #c43d3d 100%); color:#fff; display:flex;align-items:center;justify-content:center; box-shadow:0 40px 80px -20px rgba(229,83,83,.55),0 1px 0 rgba(255,255,255,.18) inset; animation:dtPinFloat 4s ease-in-out infinite; position:relative;z-index:3; }.rdlb-flow .dt-hero-pin svg{width:56px;height:56px;stroke-width:2.2} @keyframes dtPinFloat{0%, 100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}.rdlb-flow .dt-hero-rings{ position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:280px;height:280px;border-radius:50%; border:1px solid rgba(255,255,255,.10); box-shadow: 0 0 0 60px rgba(255,255,255,.04), 0 0 0 130px rgba(255,255,255,.02); z-index:1; animation:dtRingsPulse 3s ease-out infinite; } @keyframes dtRingsPulse{0%{transform:translate(-50%,-50%) scale(.9);opacity:.8}100%{transform:translate(-50%,-50%) scale(1.15);opacity:0}}.rdlb-flow .dt-hero-float{ position:absolute; width:56px;height:56px;border-radius:18px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); display:flex;align-items:center;justify-content:center; font:800 18px/1 'Plus Jakarta Sans';color:#fff; box-shadow:0 14px 28px -8px rgba(0,0,0,.30); z-index:2; }.rdlb-flow .dt-hero-float .dt-hero-meta{ position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%); background:rgba(0,0,0,.50); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); padding:5px 9px;border-radius:8px; font:700 10.5px/1 'Plus Jakarta Sans';letter-spacing:-.005em; color:#fff;white-space:nowrap; opacity:0;transform:translateY(-50%) translateX(-4px); transition:opacity .25s,transform .25s; }.rdlb-flow .dt-hero-float:hover .dt-hero-meta{opacity:1;transform:translateY(-50%) translateX(0)}.rdlb-flow .dt-hero-float-a{top:18%;left:14%;animation:dtFloatA 5s ease-in-out infinite}.rdlb-flow .dt-hero-float-b{top:22%;right:14%;animation:dtFloatA 5.5s ease-in-out .4s infinite}.rdlb-flow .dt-hero-float-c{bottom:20%;left:18%;animation:dtFloatA 6s ease-in-out .8s infinite}.rdlb-flow .dt-hero-float-d{bottom:18%;right:18%;animation:dtFloatA 4.6s ease-in-out 1.2s infinite} @keyframes dtFloatA{0%, 100%{transform:translateY(0)}50%{transform:translateY(-6px)}}.rdlb-flow .dt-hero-list{ list-style:none;margin:0;padding:0; display:flex;flex-direction:column;gap:10px; position:relative;z-index:1; }.rdlb-flow .dt-hero-list li{ display:flex;align-items:center;gap:11px; font:600 14px/1.3 'Plus Jakarta Sans'; color:rgba(255,255,255,.85);letter-spacing:-.005em; }.rdlb-flow .dt-hero-list svg{ width:18px;height:18px;flex-shrink:0; color:#FFB8B8;stroke-width:2.4; padding:3px;border-radius:50%; background:rgba(229,83,83,.20); border:1px solid rgba(229,83,83,.30); }.rdlb-flow .screen[data-idx="0"] .body{ grid-column:2; display:flex;flex-direction:column;justify-content:center;align-items:stretch; padding:80px 80px 80px 64px !important; max-width:none; background:transparent !important; overflow:visible !important; }.rdlb-flow .screen[data-idx="0"] .content, .rdlb-flow .screen[data-idx="0"] .pc-stage, .rdlb-flow .screen[data-idx="0"] .heading{overflow:visible !important}.rdlb-flow .screen[data-idx="0"] .body > *{width:100%;max-width:520px;margin:0 auto}.rdlb-flow .screen[data-idx="0"] .rdlb-steprail{margin:0 auto 40px !important}.rdlb-flow .screen[data-idx="0"] .heading{text-align:left;margin-bottom:28px}.rdlb-flow .screen[data-idx="0"] .title{ font:800 38px/1.1 'Plus Jakarta Sans' !important; letter-spacing:-.03em !important; color:var(--ink) !important; margin:0 0 8px; }.rdlb-flow .screen[data-idx="0"] .subtitle{ font:500 16px/1.5 'Plus Jakarta Sans' !important; color:var(--ink-2) !important;letter-spacing:-.005em !important; margin:0; }.rdlb-flow .screen[data-idx="0"] .pc-stage{align-items:stretch}.rdlb-flow .screen[data-idx="0"] .pc-hero{display:none !important}.rdlb-flow .screen[data-idx="0"] .pc-input-wrap{ background:#fff !important; border:1.5px solid var(--line) !important; border-radius:16px !important; padding:26px 80px 22px 24px !important; backdrop-filter:none !important;-webkit-backdrop-filter:none !important; box-shadow:0 14px 30px -10px rgba(14,18,48,.06),0 1px 0 rgba(255,255,255,.50) inset !important; position:relative !important; transition:border-color .25s,box-shadow .25s,transform .25s; }.rdlb-flow .screen[data-idx="0"] .pc-input-wrap::before{ content:"Your postcode"; position:absolute;top:-9px;left:18px; padding:3px 9px; background:var(--cream); color:var(--ink-3); font:800 10px/1 'Plus Jakarta Sans'; text-transform:uppercase;letter-spacing:.12em; display:block !important; z-index:2; }.rdlb-flow .screen[data-idx="0"] .pc-input-wrap::after{ content:"" !important; position:absolute !important; right:20px !important; left:auto !important; top:50% !important; width:42px !important;height:42px !important;border-radius:50% !important; background:var(--red) url("data:image/svg+xml;utf8,") no-repeat center/22px 22px !important; box-shadow:0 10px 22px -6px rgba(229,83,83,.50) !important; transform:translateY(-50%) !important; transition:transform .25s,box-shadow .25s !important; display:block !important; pointer-events:none !important; opacity:1 !important; } .rdlb-flow .screen[data-idx="0"] .pc-go{ display:block !important; position:absolute !important; right:20px !important;left:auto !important;top:50% !important; width:42px !important;height:42px !important; transform:translateY(-50%) !important; border-radius:50% !important; background:transparent !important;border:0 !important; cursor:pointer !important;z-index:3 !important; padding:0 !important; }.rdlb-flow .screen[data-idx="0"] .pc-input-wrap:hover{ border-color:var(--red) !important; box-shadow:0 0 0 4px var(--red-tint),0 18px 40px -10px rgba(229,83,83,.20),0 1px 0 rgba(255,255,255,.50) inset !important; }.rdlb-flow .screen[data-idx="0"] .pc-input-wrap:hover::after{ transform:translateY(-50%) scale(1.05); box-shadow:0 14px 28px -6px rgba(229,83,83,.60); }.rdlb-flow .screen[data-idx="0"] .pc-input-wrap:has(.pc-input:focus){ border-color:var(--red) !important; box-shadow:0 0 0 4px var(--red-tint),0 18px 40px -10px rgba(229,83,83,.25),0 1px 0 rgba(255,255,255,.50) inset !important; }.rdlb-flow .screen[data-idx="0"] .pc-input-wrap:has(.pc-input.is-valid)::after{ background-color:#1F8A5B; background-image:url("data:image/svg+xml;utf8,"); box-shadow:0 10px 22px -6px rgba(31,138,91,.50); }.rdlb-flow .screen[data-idx="0"] .pc-input{ padding:0 !important; }.rdlb-flow .screen[data-idx="0"] .pc-input{ color:var(--ink) !important; font:700 28px/1 'Plus Jakarta Sans' !important; } .rdlb-flow .screen[data-idx="0"] .pc-input, .rdlb-flow .screen[data-idx="0"] .pc-input:hover, .rdlb-flow .screen[data-idx="0"] .pc-input:focus, .rdlb-flow .screen[data-idx="0"] .pc-input:focus-visible, .rdlb-flow .screen[data-idx="0"] .pc-input:active{ border:0 !important; outline:0 !important; box-shadow:none !important; background:transparent !important; background-image:none !important; border-radius:0 !important; -webkit-appearance:none !important; appearance:none !important; min-height:0 !important; margin:0 !important; }.rdlb-flow .screen[data-idx="0"] .pc-input::placeholder{color:var(--ink-4) !important}.rdlb-flow .screen[data-idx="0"] .pc-helper{color:var(--ink-3) !important}.rdlb-flow .screen[data-idx="0"] .pc-helper.is-error{color:var(--red) !important}.rdlb-flow .screen[data-idx="0"] .local-proof{ background:rgba(229,83,83,.06) !important; border:1px solid rgba(229,83,83,.18) !important; color:var(--ink-2) !important; }.rdlb-flow .screen[data-idx="0"] .local-proof strong{color:var(--ink) !important}.rdlb-flow .screen[data-idx="0"] .address-list{ background:#fff !important; border:1.5px solid var(--line) !important; box-shadow:0 14px 30px -10px rgba(14,18,48,.10) !important; backdrop-filter:none !important;-webkit-backdrop-filter:none !important; }.rdlb-flow .screen[data-idx="0"] .address-option{ background:transparent !important;color:var(--ink) !important; border-bottom:1px solid var(--line) !important; }.rdlb-flow .screen[data-idx="0"] .address-option-text{color:var(--ink) !important}.rdlb-flow .screen[data-idx="0"] .address-option-text small{color:var(--ink-3) !important}.rdlb-flow .screen[data-idx="0"] .address-option-radio{border-color:var(--ink-4) !important;background:transparent !important}.rdlb-flow .screen[data-idx="0"] .address-option:hover{background:rgba(229,83,83,.04) !important}.rdlb-flow .screen[data-idx="0"] .address-option.is-active{background:var(--red-tint) !important}.rdlb-flow .screen[data-idx="0"] .address-option.is-active .address-option-radio{border-color:var(--red) !important;background:var(--red) !important}.rdlb-flow .screen[data-idx="0"] .address-option.is-suggested{background:transparent !important}.rdlb-flow .screen[data-idx="0"] .address-option.is-suggested.is-active{background:var(--red-tint) !important}.rdlb-flow .screen[data-idx="0"] .address-option.is-manual .address-option-text{color:var(--ink-2) !important}.rdlb-flow .screen[data-idx="0"] .footer{ grid-column:2 !important; grid-row:1 !important; align-self:end !important; position:relative !important; background:transparent !important; padding:0 80px 64px 64px !important; margin-top:0; width:100%;max-width:none; display:flex;flex-direction:column;align-items:stretch; }.rdlb-flow .screen[data-idx="0"] .footer > *{max-width:520px;width:100%;margin-left:auto;margin-right:auto}.rdlb-flow .screen[data-idx="0"] .body{ grid-row:1 !important; align-self:start !important; padding-bottom:0 !important; }.rdlb-flow .screen[data-idx="0"] .cta{ width:100%;padding:18px 24px !important; font:700 16px/1 'Plus Jakarta Sans' !important; }.rdlb-flow .bf-resume-banner{ top:88px !important;left:50% !important;right:auto !important; transform:translateX(-50%) translateY(-10px) !important; max-width:520px; }.rdlb-flow .bf-resume-banner.is-visible{transform:translateX(-50%) translateY(0) !important}.rdlb-flow .screen[data-idx="1"]{ background:var(--cream) !important;color:var(--ink) !important; display:grid !important; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr) !important; align-items:stretch !important; }.rdlb-flow .screen[data-idx="1"]::before, .rdlb-flow .screen[data-idx="1"]::after{display:none !important}.rdlb-flow .screen[data-idx="1"] .dt-hero{ display:flex;flex-direction:column; grid-column:1; background: radial-gradient(ellipse 600px 500px at 25% 30%, rgba(229,83,83,.30) 0%, transparent 60%), radial-gradient(ellipse 500px 400px at 75% 75%, rgba(229,83,83,.16) 0%, transparent 60%), linear-gradient(135deg, var(--navy) 0%, #1a1f4a 100%); color:#fff;padding:80px 80px 64px;position:relative;overflow:hidden; }.rdlb-flow .screen[data-idx="1"] .dt-hero::before{ content:"";position:absolute;inset:0; background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px); background-size:28px 28px; mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 0%, transparent 70%); -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 0%, transparent 70%); pointer-events:none; }.rdlb-flow .dt-hero-compare{ margin:8px 0 32px;display:flex;flex-direction:column;gap:14px; padding:22px;background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);border-radius:18px; backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); position:relative;z-index:1; }.rdlb-flow .dt-hc-row{display:flex;align-items:center;justify-content:space-between;gap:14px;font:600 13px/1.2 'Plus Jakarta Sans';letter-spacing:-.005em}.rdlb-flow .dt-hc-label{color:rgba(255,255,255,.65);flex-shrink:0;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:10.5px}.rdlb-flow .dt-hc-val{color:#fff;font-weight:700;text-align:right}.rdlb-flow .dt-hc-val-big{font:800 18px/1 'Plus Jakarta Sans';letter-spacing:-.02em}.rdlb-flow .dt-hc-val-big small{font:600 11px/1 'Plus Jakarta Sans';color:rgba(255,255,255,.55);margin-left:4px}.rdlb-flow .dt-hc-bar{flex:1;height:6px;border-radius:3px;background:rgba(255,255,255,.10);position:relative;overflow:hidden;margin:0 12px}.rdlb-flow .dt-hc-bar-man{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg, var(--red) 0%, #ff8585 100%);border-radius:3px}.rdlb-flow .dt-hc-pill{display:inline-block;padding:3px 9px;background:rgba(255,255,255,.10);color:rgba(255,255,255,.65);border-radius:999px;font:700 11px/1 'Plus Jakarta Sans';margin-left:4px}.rdlb-flow .dt-hc-pill.is-yes{background:var(--red);color:#fff}.rdlb-flow .screen[data-idx="1"] .body{ grid-column:2;grid-row:1;align-self:start; display:flex;flex-direction:column; padding:80px 80px 0 64px !important; background:transparent !important; overflow:visible !important; }.rdlb-flow .screen[data-idx="1"] .content, .rdlb-flow .screen[data-idx="1"] .trans-stack{overflow:visible !important}.rdlb-flow .screen[data-idx="1"] .body > *{width:100%;max-width:520px;margin:0 auto}.rdlb-flow .screen[data-idx="1"] .rdlb-steprail{margin:0 auto 40px !important}.rdlb-flow .screen[data-idx="1"] .heading{text-align:left;margin-bottom:28px}.rdlb-flow .screen[data-idx="1"] .title{ font:800 38px/1.1 'Plus Jakarta Sans' !important; color:var(--ink) !important;letter-spacing:-.03em !important;margin:0 0 8px; }.rdlb-flow .screen[data-idx="1"] .subtitle{ font:500 16px/1.5 'Plus Jakarta Sans' !important; color:var(--ink-2) !important;margin:0; }.rdlb-flow .screen[data-idx="1"] .trans-stack{display:flex;flex-direction:column;gap:14px}.rdlb-flow .screen[data-idx="1"] .trans-tile{ background:#fff !important;border:1.5px solid var(--line) !important; color:var(--ink) !important;padding:24px !important;border-radius:18px !important; backdrop-filter:none !important;-webkit-backdrop-filter:none !important; box-shadow:0 10px 24px -10px rgba(14,18,48,.08); }.rdlb-flow .screen[data-idx="1"] .trans-tile .tt-name{color:var(--ink) !important;font-size:20px !important}.rdlb-flow .screen[data-idx="1"] .trans-tile .tt-sub{color:var(--ink-2) !important}.rdlb-flow .screen[data-idx="1"] .trans-tile .tt-glyph{ background:var(--cream-2) !important;border:1px solid var(--line) !important;color:var(--ink) !important; width:48px !important;height:48px !important;border-radius:14px !important; }.rdlb-flow .screen[data-idx="1"] .trans-tile .tt-glyph svg{width:22px;height:22px}.rdlb-flow .screen[data-idx="1"] .trans-tile .tt-radio{border-color:var(--ink-4) !important;background:transparent !important}.rdlb-flow .screen[data-idx="1"] .trans-tile.is-active{ background:#fff !important;border-color:var(--red) !important; box-shadow:0 0 0 4px var(--red-tint),0 14px 30px -10px rgba(229,83,83,.20) !important; }.rdlb-flow .screen[data-idx="1"] .trans-tile.is-active .tt-glyph{background:var(--red-tint) !important;color:var(--red) !important;border-color:transparent !important}.rdlb-flow .screen[data-idx="1"] .trans-tile.is-active .tt-radio{border-color:var(--red) !important;background:var(--red) !important}.rdlb-flow .screen[data-idx="1"] .trans-reassure{ background:#fff !important; border-color:var(--line) !important; color:var(--ink-2) !important; box-shadow:0 4px 12px -8px rgba(14,18,48,.08); }.rdlb-flow .screen[data-idx="1"] .trans-reassure svg{color:var(--red) !important}.rdlb-flow .screen[data-idx="1"] .trans-tile{ overflow:visible !important; transform-origin:center; will-change:transform; }.rdlb-flow .screen[data-idx="1"] .trans-tile.just-picked{ animation:dtTilePick .6s cubic-bezier(.34,1.56,.64,1) !important; } @keyframes dtTilePick{0%{transform:scale(1)}35%{transform:scale(1.04)}70%{transform:scale(.985)}100%{transform:scale(1)}}.rdlb-flow .screen[data-idx="1"] .trans-tile.just-picked::after{ content:"" !important;position:absolute;inset:-6px; border-radius:24px; border:3px solid var(--red); pointer-events:none; animation:dtTilePickRing .7s cubic-bezier(.32,1.10,.42,1) forwards; z-index:3; background:transparent; } @keyframes dtTilePickRing{0%{transform:scale(.96);opacity:0}30%{transform:scale(1.02);opacity:.9}100%{transform:scale(1.12);opacity:0}}.rdlb-flow .screen[data-idx="1"] .footer{ grid-column:2 !important;grid-row:1 !important;align-self:end !important; position:relative !important;background:transparent !important; padding:0 80px 64px 64px !important; width:100%;max-width:none; display:flex;flex-direction:column;align-items:stretch; }.rdlb-flow .screen[data-idx="1"] .footer > *{max-width:520px;width:100%;margin-left:auto;margin-right:auto}.rdlb-flow .screen[data-idx="1"] .body{padding-bottom:0 !important}.rdlb-flow .screen[data-idx="1"] .cta{ width:100%;padding:18px 24px !important; font:700 16px/1 'Plus Jakarta Sans' !important; }.rdlb-flow .screen[data-idx="2"]{ background:var(--cream) !important;color:var(--ink) !important; display:grid !important; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr) !important; grid-template-rows:1fr auto !important; align-items:stretch !important; }.rdlb-flow .screen[data-idx="2"]::before, .rdlb-flow .screen[data-idx="2"]::after{display:none !important}.rdlb-flow .screen[data-idx="2"] .dt-hero{ display:flex;flex-direction:column; grid-column:1;grid-row:1 / 3; background: radial-gradient(ellipse 700px 600px at 20% 30%, rgba(229,83,83,.30) 0%, transparent 60%), radial-gradient(ellipse 500px 400px at 80% 80%, rgba(229,83,83,.18) 0%, transparent 60%), linear-gradient(135deg, var(--navy) 0%, #1a1f4a 100%); color:#fff;padding:80px 80px 64px;position:relative;overflow:hidden; }.rdlb-flow .screen[data-idx="2"] .dt-hero::before{ content:"";position:absolute;inset:0; background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px); background-size:28px 28px; mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 0%, transparent 70%); -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 0%, transparent 70%); pointer-events:none; }.rdlb-flow .dt-hours-insight{ display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px; margin:8px 0 28px;position:relative;z-index:1; }.rdlb-flow .dt-hi-card{ padding:18px 14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); border-radius:14px; backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); text-align:center; }.rdlb-flow .dt-hi-figure{ font:800 26px/1 'Plus Jakarta Sans'; color:#fff;letter-spacing:-.025em; display:flex;align-items:baseline;justify-content:center;gap:3px; }.rdlb-flow .dt-hi-figure small{ font:700 11px/1 'Plus Jakarta Sans'; color:rgba(255,255,255,.55); }.rdlb-flow .dt-hi-label{ margin-top:6px; font:600 10.5px/1.3 'Plus Jakarta Sans'; color:rgba(255,255,255,.65); letter-spacing:-.005em; }.rdlb-flow .screen[data-idx="2"] .body{ grid-column:2;grid-row:1;align-self:stretch; display:flex;flex-direction:column;min-height:0; padding:48px 80px 0 64px !important; background:transparent !important; overflow:visible !important; }.rdlb-flow .screen[data-idx="2"] .heading, .rdlb-flow .screen[data-idx="2"] .hours-list{overflow:visible !important}.rdlb-flow .screen[data-idx="2"] .content{overflow:visible !important;min-height:0 !important;flex:1 1 auto !important;padding-top:12px !important}.rdlb-flow .screen[data-idx="2"] .body > *{width:100%;max-width:520px;margin:0 auto}.rdlb-flow .screen[data-idx="2"] .rdlb-steprail{margin:0 auto 40px !important}.rdlb-flow .screen[data-idx="2"] .heading{text-align:left;margin-bottom:16px}.rdlb-flow .screen[data-idx="2"] .title{ font:800 38px/1.1 'Plus Jakarta Sans' !important; color:var(--ink) !important;letter-spacing:-.03em !important;margin:0 0 8px; }.rdlb-flow .screen[data-idx="2"] .subtitle{ font:500 16px/1.5 'Plus Jakarta Sans' !important; color:var(--ink-2) !important;margin:0; }.rdlb-flow .screen[data-idx="2"] .hours-pitch{ display:inline-flex !important;align-items:center;gap:10px; padding:10px 16px 10px 12px !important; background:linear-gradient(135deg, var(--red-tint) 0%, rgba(229,83,83,.04) 100%) !important; border:1px solid rgba(229,83,83,.20) !important; border-radius:999px !important; font:700 14.5px/1.2 'Plus Jakarta Sans' !important; color:var(--ink) !important; letter-spacing:-.005em !important; margin:0 !important; box-shadow:0 6px 16px -10px rgba(229,83,83,.30); width:auto !important;max-width:none !important; }.rdlb-flow .screen[data-idx="2"] .hours-pitch .hp-icon{ width:26px;height:26px;border-radius:50%; background:var(--red);color:#fff; display:flex;align-items:center;justify-content:center; flex-shrink:0; box-shadow:0 4px 10px -3px rgba(229,83,83,.50); }.rdlb-flow .screen[data-idx="2"] .hours-pitch .hp-icon svg{width:14px;height:14px;stroke-width:2.6}.rdlb-flow .screen[data-idx="2"] .hours-pitch .hp-text strong{ color:var(--red);font-weight:800; }.rdlb-flow .screen[data-idx="2"] .hours-list{display:flex;flex-direction:column;gap:10px;overflow:visible !important;padding:10px 0 0}.rdlb-flow .screen[data-idx="2"] .hr-row{ background:#fff !important;border:1.5px solid var(--line) !important; color:var(--ink) !important; padding:16px 18px !important;border-radius:16px !important; backdrop-filter:none !important;-webkit-backdrop-filter:none !important; box-shadow:0 8px 20px -10px rgba(14,18,48,.08); }.rdlb-flow .screen[data-idx="2"] .hr-row .hr-figure{color:var(--ink) !important}.rdlb-flow .screen[data-idx="2"] .hr-row .hr-figure small{color:var(--ink-3) !important}.rdlb-flow .screen[data-idx="2"] .hr-row .hr-price{color:var(--ink) !important}.rdlb-flow .screen[data-idx="2"] .hr-row .hr-rate{color:var(--ink-3) !important}.rdlb-flow .screen[data-idx="2"] .hr-row .hr-radio{border-color:var(--ink-4) !important;background:transparent !important}.rdlb-flow .screen[data-idx="2"] .hr-row.is-active{ background:#fff !important;border-color:var(--red) !important; background:rgba(229,83,83,.06) !important; box-shadow:0 0 0 3px rgba(229,83,83,.10),0 14px 30px -10px rgba(229,83,83,.15) !important; }.rdlb-flow .screen[data-idx="2"] .hr-row.is-active .hr-radio{border-color:var(--red) !important;background:var(--red) !important}.rdlb-flow .screen[data-idx="2"] .hr-row{overflow:visible !important;transform-origin:center;will-change:transform}.rdlb-flow .screen[data-idx="2"] .hr-row.just-picked{animation:dtTilePick .6s cubic-bezier(.34,1.56,.64,1) !important}.rdlb-flow .screen[data-idx="2"] .hr-row.just-picked::after{ content:"" !important;position:absolute;inset:-6px; border-radius:22px;border:3px solid var(--red);pointer-events:none; animation:dtTilePickRing .7s cubic-bezier(.32,1.10,.42,1) forwards; z-index:3;background:transparent;clip-path:none; }.rdlb-flow .screen[data-idx="2"] .hr-pop{ background:var(--red) !important;color:#fff !important; top:-9px !important;left:18px !important; padding:4px 10px !important;font-size:9.5px !important; }.rdlb-flow .screen[data-idx="2"] .footer{ grid-column:2 !important;grid-row:2 !important;align-self:stretch !important; position:relative !important;background:transparent !important; padding:14px 80px 40px 64px !important; width:100%;max-width:none; display:flex;flex-direction:column;align-items:stretch; }.rdlb-flow .screen[data-idx="2"] .footer > *{max-width:520px;width:100%;margin-left:auto;margin-right:auto}.rdlb-flow .screen[data-idx="2"] .body{padding-bottom:0 !important}.rdlb-flow .screen[data-idx="2"] .cta{ width:100%;padding:18px 24px !important; font:700 16px/1 'Plus Jakarta Sans' !important; }.rdlb-flow .screen[data-idx="3"]{ background:var(--cream) !important;color:var(--ink) !important; display:grid !important; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr) !important; grid-template-rows:minmax(0, 1fr) auto !important; grid-template-areas:"hero body" "hero footer" !important; align-items:start !important; height:100vh !important; min-height:100vh !important; max-height:100vh !important; overflow:hidden !important; }.rdlb-flow .screen[data-idx="3"] .dt-hero{ grid-area:hero !important; align-self:stretch !important; min-height:0 !important; height:100vh !important; max-height:100vh !important; overflow:hidden !important; }.rdlb-flow .screen[data-idx="3"] .body{ grid-area:body !important; display:flex;flex-direction:column; padding:80px 80px 48px 64px !important; background:transparent !important; overflow-y:auto !important; min-height:0 !important; max-height:100vh; min-width:0; scrollbar-width:thin; }.rdlb-flow .screen[data-idx="3"] .body > *, .rdlb-flow .screen[data-idx="3"] .contact-stack, .rdlb-flow .screen[data-idx="3"] .contact-row, .rdlb-flow .screen[data-idx="3"] .cr-field, .rdlb-flow .screen[data-idx="3"] .cr-field-split, .rdlb-flow .screen[data-idx="3"] .cr-sub{min-width:0 !important}.rdlb-flow .screen[data-idx="3"] .cr-input{ min-width:0 !important; width:100% !important; }.rdlb-flow .screen[data-idx="3"] .footer{ grid-area:footer !important; align-self:start !important; position:relative !important;background:transparent !important; padding:24px 80px 80px 64px !important; width:100%;max-width:none; display:flex;flex-direction:column;align-items:stretch; }.rdlb-flow .screen[data-idx="3"]::before, .rdlb-flow .screen[data-idx="3"]::after{display:none !important}.rdlb-flow .screen[data-idx="3"] .dt-hero{ display:flex;flex-direction:column; grid-column:1; background: radial-gradient(ellipse 700px 600px at 20% 30%, rgba(229,83,83,.30) 0%, transparent 60%), radial-gradient(ellipse 500px 400px at 80% 80%, rgba(229,83,83,.16) 0%, transparent 60%), linear-gradient(135deg, var(--navy) 0%, #1a1f4a 100%); color:#fff;padding:80px 80px 64px;position:relative;overflow:hidden; }.rdlb-flow .screen[data-idx="3"] .dt-hero::before{ content:"";position:absolute;inset:0; background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px); background-size:28px 28px; mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 0%, transparent 70%); -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 0%, transparent 70%); pointer-events:none; }.rdlb-flow .screen[data-idx="3"] .dt-hero-list-tall{ list-style:none;margin:8px 0 24px;padding:0; display:flex;flex-direction:column;gap:18px; position:relative;z-index:1; }.rdlb-flow .screen[data-idx="3"] .dt-hero-list-tall li{ display:flex;align-items:flex-start;gap:14px; color:rgba(255,255,255,.85); }.rdlb-flow .screen[data-idx="3"] .dt-hero-list-tall svg{ width:20px;height:20px;flex-shrink:0; color:#FFB8B8;stroke-width:2.2; padding:6px;border-radius:10px; background:rgba(229,83,83,.20); border:1px solid rgba(229,83,83,.30); box-sizing:content-box; }.rdlb-flow .screen[data-idx="3"] .dt-hero-list-tall li div{ display:flex;flex-direction:column;gap:3px; }.rdlb-flow .screen[data-idx="3"] .dt-hero-list-tall strong{ font:800 14px/1.2 'Plus Jakarta Sans'; color:#fff;letter-spacing:-.01em; }.rdlb-flow .screen[data-idx="3"] .dt-hero-list-tall span{ font:500 12.5px/1.45 'Plus Jakarta Sans'; color:rgba(255,255,255,.70); }.rdlb-flow .dt-hero-quote{ margin-top:auto; padding:18px 20px; background:rgba(255,255,255,.05); border-left:3px solid var(--red); border-radius:0 14px 14px 0; font:500 13.5px/1.5 'Plus Jakarta Sans'; color:rgba(255,255,255,.85);letter-spacing:-.005em; position:relative;z-index:1; }.rdlb-flow .dt-hero-quote-cite{ display:block;margin-top:8px; font:700 11px/1 'Plus Jakarta Sans'; color:rgba(255,255,255,.55);letter-spacing:.04em;text-transform:uppercase; }.rdlb-flow .screen[data-idx="3"] .body > *{width:100%;max-width:560px;margin:0 auto}.rdlb-flow .screen[data-idx="3"] .rdlb-steprail{margin:0 auto 40px !important}.rdlb-flow .screen[data-idx="3"] .heading{text-align:left;margin-bottom:28px}.rdlb-flow .screen[data-idx="3"] .title{ font:800 38px/1.1 'Plus Jakarta Sans' !important; color:var(--ink) !important;letter-spacing:-.03em !important;margin:0 0 8px; }.rdlb-flow .screen[data-idx="3"] .subtitle{ font:500 16px/1.5 'Plus Jakarta Sans' !important; color:var(--ink-2) !important;margin:0; }.rdlb-flow .screen[data-idx="3"] .contact-stack{display:flex;flex-direction:column;gap:12px;padding:4px 0}.rdlb-flow .screen[data-idx="3"] .contact-row{ background:#fff !important;border-color:var(--line) !important; box-shadow:0 6px 16px -10px rgba(14,18,48,.10); backdrop-filter:none !important;-webkit-backdrop-filter:none !important; }.rdlb-flow .screen[data-idx="3"] .cr-input, .rdlb-flow .screen[data-idx="3"] .cr-input::placeholder{color:var(--ink) !important}.rdlb-flow .screen[data-idx="3"] .cr-input::placeholder{color:var(--ink-4) !important}.rdlb-flow .screen[data-idx="3"] .cr-label{color:var(--ink-3) !important}.rdlb-flow .screen[data-idx="3"] .cr-glyph{background:var(--red-tint) !important;color:var(--red) !important;border-color:transparent !important}.rdlb-flow .screen[data-idx="3"] .cr-sub-divider{background:var(--line) !important}.rdlb-flow .screen[data-idx="3"] .notes-card{background:#fff !important;border-color:var(--line) !important;color:var(--ink) !important;box-shadow:0 6px 16px -10px rgba(14,18,48,.10)}.rdlb-flow .screen[data-idx="3"] .notes-card-icon{background:var(--red-tint) !important;color:var(--red) !important;border-color:transparent !important}.rdlb-flow .screen[data-idx="3"] .notes-card-title{color:var(--ink) !important}.rdlb-flow .screen[data-idx="3"] .notes-card-sub, .rdlb-flow .screen[data-idx="3"] .notes-optional{color:var(--ink-3) !important;background:rgba(14,18,48,.05) !important}.rdlb-flow .screen[data-idx="3"] .notes-chip{background:#fff !important;border-color:var(--line) !important;color:var(--ink-2) !important}.rdlb-flow .screen[data-idx="3"] .notes-chip:hover{background:var(--cream) !important;color:var(--ink) !important;border-color:var(--ink-4) !important}.rdlb-flow .screen[data-idx="3"] .notes-chip.is-on{background:var(--ink) !important;color:#fff !important;border-color:var(--ink) !important}.rdlb-flow .screen[data-idx="3"] .notes-field{background:var(--cream) !important;border-color:var(--line) !important}.rdlb-flow .screen[data-idx="3"] .notes-textarea{color:var(--ink) !important}.rdlb-flow .screen[data-idx="3"] .notes-textarea::placeholder{color:var(--ink-4) !important}.rdlb-flow .screen[data-idx="3"] .notes-meta{border-top-color:var(--line) !important}.rdlb-flow .screen[data-idx="3"] .notes-meta-hint, .rdlb-flow .screen[data-idx="3"] .notes-counter{color:var(--ink-3) !important}.rdlb-flow .screen[data-idx="3"] input[type="date"]::-webkit-calendar-picker-indicator, .rdlb-flow .screen[data-idx="3"] input[type="time"]::-webkit-calendar-picker-indicator{filter:none !important;opacity:.65 !important}.rdlb-flow .screen[data-idx="3"] .rdlb-consent{background:#fff !important;border-color:var(--line) !important}.rdlb-flow .screen[data-idx="3"] .rdlb-consent-text{color:var(--ink-2) !important}.rdlb-flow .screen[data-idx="3"] .rdlb-consent-text a{color:var(--red) !important}.rdlb-flow .screen[data-idx="3"] .rdlb-dtp-trigger{color:var(--ink) !important}.rdlb-flow .screen[data-idx="3"] .rdlb-dtp-trigger.is-placeholder .rdlb-dtp-trigger-text{color:var(--ink-3) !important}.rdlb-flow .screen[data-idx="3"] .footer{ position:relative !important;background:transparent !important; padding:16px 0 48px !important; width:100%;max-width:none; display:flex;flex-direction:column;align-items:stretch; }.rdlb-flow .screen[data-idx="3"] .footer > *{width:100%}.rdlb-flow .screen[data-idx="3"] .content, .rdlb-flow .screen[data-idx="3"] .heading, .rdlb-flow .screen[data-idx="3"] .contact-stack{overflow:visible !important}.rdlb-flow .screen[data-idx="3"] .body{padding-bottom:0 !important}.rdlb-flow .screen[data-idx="3"] .cta{ width:100%;padding:18px 24px !important; font:700 16px/1 'Plus Jakarta Sans' !important; } /* v2.9.121: two-column desktop layout for the When screen (mirrors idx 3) */ .rdlb-flow .screen[data-idx="4"]{ background:var(--cream) !important;color:var(--ink) !important; display:grid !important; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr) !important; grid-template-rows:minmax(0, 1fr) auto !important; grid-template-areas:"hero body" "hero footer" !important; align-items:start !important; height:100vh !important; min-height:100vh !important; max-height:100vh !important; overflow:hidden !important; }.rdlb-flow .screen[data-idx="4"] .dt-hero{ grid-area:hero !important; align-self:stretch !important; min-height:0 !important; height:100vh !important; max-height:100vh !important; overflow:hidden !important; }.rdlb-flow .screen[data-idx="4"] .body{ grid-area:body !important; display:flex;flex-direction:column; padding:80px 80px 48px 64px !important; background:transparent !important; overflow-y:auto !important; min-height:0 !important; max-height:100vh; min-width:0; scrollbar-width:thin; }.rdlb-flow .screen[data-idx="4"] .body > *, .rdlb-flow .screen[data-idx="4"] .contact-stack, .rdlb-flow .screen[data-idx="4"] .contact-row, .rdlb-flow .screen[data-idx="4"] .cr-field, .rdlb-flow .screen[data-idx="4"] .cr-field-split, .rdlb-flow .screen[data-idx="4"] .cr-sub{min-width:0 !important}.rdlb-flow .screen[data-idx="4"] .cr-input{ min-width:0 !important; width:100% !important; }.rdlb-flow .screen[data-idx="4"] .footer{ grid-area:footer !important; align-self:start !important; position:relative !important;background:transparent !important; padding:24px 80px 80px 64px !important; width:100%;max-width:none; display:flex;flex-direction:column;align-items:stretch; }.rdlb-flow .screen[data-idx="4"]::before, .rdlb-flow .screen[data-idx="4"]::after{display:none !important}.rdlb-flow .screen[data-idx="4"] .dt-hero{ display:flex;flex-direction:column; grid-column:1; background: radial-gradient(ellipse 700px 600px at 20% 30%, rgba(229,83,83,.30) 0%, transparent 60%), radial-gradient(ellipse 500px 400px at 80% 80%, rgba(229,83,83,.16) 0%, transparent 60%), linear-gradient(135deg, var(--navy) 0%, #1a1f4a 100%); color:#fff;padding:80px 80px 64px;position:relative;overflow:hidden; }.rdlb-flow .screen[data-idx="4"] .dt-hero::before{ content:"";position:absolute;inset:0; background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px); background-size:28px 28px; mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 0%, transparent 70%); -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 0%, transparent 70%); pointer-events:none; }.rdlb-flow .screen[data-idx="4"] .dt-hero-list-tall{ list-style:none;margin:8px 0 24px;padding:0; display:flex;flex-direction:column;gap:18px; position:relative;z-index:1; }.rdlb-flow .screen[data-idx="4"] .dt-hero-list-tall li{ display:flex;align-items:flex-start;gap:14px; color:rgba(255,255,255,.85); }.rdlb-flow .screen[data-idx="4"] .dt-hero-list-tall svg{ width:20px;height:20px;flex-shrink:0; color:#FFB8B8;stroke-width:2.2; padding:6px;border-radius:10px; background:rgba(229,83,83,.20); border:1px solid rgba(229,83,83,.30); box-sizing:content-box; }.rdlb-flow .screen[data-idx="4"] .dt-hero-list-tall li div{ display:flex;flex-direction:column;gap:3px; }.rdlb-flow .screen[data-idx="4"] .dt-hero-list-tall strong{ font:800 14px/1.2 'Plus Jakarta Sans'; color:#fff;letter-spacing:-.01em; }.rdlb-flow .screen[data-idx="4"] .dt-hero-list-tall span{ font:500 12.5px/1.45 'Plus Jakarta Sans'; color:rgba(255,255,255,.70); } /* v2.9.484: extend dt-hero-list-tall styling to the enquiry Confirm hero (screen 5). Presentation only; identical to the screens 3/4 rules. */ .rdlb-flow .screen[data-idx="5"] .dt-hero-list-tall{ list-style:none;margin:8px 0 24px;padding:0; display:flex;flex-direction:column;gap:18px; position:relative;z-index:1; } .rdlb-flow .screen[data-idx="5"] .dt-hero-list-tall li{ display:flex;align-items:flex-start;gap:14px; color:rgba(255,255,255,.85); } .rdlb-flow .screen[data-idx="5"] .dt-hero-list-tall svg{ width:20px;height:20px;flex-shrink:0; color:#FFB8B8;stroke-width:2.2; padding:6px;border-radius:10px; background:rgba(229,83,83,.20); border:1px solid rgba(229,83,83,.30); box-sizing:content-box; } .rdlb-flow .screen[data-idx="5"] .dt-hero-list-tall li div{ display:flex;flex-direction:column;gap:3px; } .rdlb-flow .screen[data-idx="5"] .dt-hero-list-tall strong{ font:800 14px/1.2 'Plus Jakarta Sans'; color:#fff;letter-spacing:-.01em; } .rdlb-flow .screen[data-idx="5"] .dt-hero-list-tall span{ font:500 12.5px/1.45 'Plus Jakarta Sans'; color:rgba(255,255,255,.70); }.rdlb-flow .dt-hero-quote{ margin-top:auto; padding:18px 20px; background:rgba(255,255,255,.05); border-left:3px solid var(--red); border-radius:0 14px 14px 0; font:500 13.5px/1.5 'Plus Jakarta Sans'; color:rgba(255,255,255,.85);letter-spacing:-.005em; position:relative;z-index:1; }.rdlb-flow .dt-hero-quote-cite{ display:block;margin-top:8px; font:700 11px/1 'Plus Jakarta Sans'; color:rgba(255,255,255,.55);letter-spacing:.04em;text-transform:uppercase; }.rdlb-flow .screen[data-idx="4"] .body > *{width:100%;max-width:560px;margin:0 auto}.rdlb-flow .screen[data-idx="4"] .rdlb-steprail{margin:0 auto 40px !important}.rdlb-flow .screen[data-idx="4"] .heading{text-align:left;margin-bottom:28px}.rdlb-flow .screen[data-idx="4"] .title{ font:800 38px/1.1 'Plus Jakarta Sans' !important; color:var(--ink) !important;letter-spacing:-.03em !important;margin:0 0 8px; }.rdlb-flow .screen[data-idx="4"] .subtitle{ font:500 16px/1.5 'Plus Jakarta Sans' !important; color:var(--ink-2) !important;margin:0; }.rdlb-flow .screen[data-idx="4"] .contact-stack{display:flex;flex-direction:column;gap:12px;padding:4px 0}.rdlb-flow .screen[data-idx="4"] .contact-row{ background:#fff !important;border-color:var(--line) !important; box-shadow:0 6px 16px -10px rgba(14,18,48,.10); backdrop-filter:none !important;-webkit-backdrop-filter:none !important; }.rdlb-flow .screen[data-idx="4"] .cr-input, .rdlb-flow .screen[data-idx="4"] .cr-input::placeholder{color:var(--ink) !important}.rdlb-flow .screen[data-idx="4"] .cr-input::placeholder{color:var(--ink-4) !important}.rdlb-flow .screen[data-idx="4"] .cr-label{color:var(--ink-3) !important}.rdlb-flow .screen[data-idx="4"] .cr-glyph{background:var(--red-tint) !important;color:var(--red) !important;border-color:transparent !important}.rdlb-flow .screen[data-idx="4"] .cr-sub-divider{background:var(--line) !important}.rdlb-flow .screen[data-idx="4"] .notes-card{background:#fff !important;border-color:var(--line) !important;color:var(--ink) !important;box-shadow:0 6px 16px -10px rgba(14,18,48,.10)}.rdlb-flow .screen[data-idx="4"] .notes-card-icon{background:var(--red-tint) !important;color:var(--red) !important;border-color:transparent !important}.rdlb-flow .screen[data-idx="4"] .notes-card-title{color:var(--ink) !important}.rdlb-flow .screen[data-idx="4"] .notes-card-sub, .rdlb-flow .screen[data-idx="4"] .notes-optional{color:var(--ink-3) !important;background:rgba(14,18,48,.05) !important}.rdlb-flow .screen[data-idx="4"] .notes-chip{background:#fff !important;border-color:var(--line) !important;color:var(--ink-2) !important}.rdlb-flow .screen[data-idx="4"] .notes-chip:hover{background:var(--cream) !important;color:var(--ink) !important;border-color:var(--ink-4) !important}.rdlb-flow .screen[data-idx="4"] .notes-chip.is-on{background:var(--ink) !important;color:#fff !important;border-color:var(--ink) !important}.rdlb-flow .screen[data-idx="4"] .notes-field{background:var(--cream) !important;border-color:var(--line) !important}.rdlb-flow .screen[data-idx="4"] .notes-textarea{color:var(--ink) !important}.rdlb-flow .screen[data-idx="4"] .notes-textarea::placeholder{color:var(--ink-4) !important}.rdlb-flow .screen[data-idx="4"] .notes-meta{border-top-color:var(--line) !important}.rdlb-flow .screen[data-idx="4"] .notes-meta-hint, .rdlb-flow .screen[data-idx="4"] .notes-counter{color:var(--ink-3) !important}.rdlb-flow .screen[data-idx="4"] input[type="date"]::-webkit-calendar-picker-indicator, .rdlb-flow .screen[data-idx="4"] input[type="time"]::-webkit-calendar-picker-indicator{filter:none !important;opacity:.65 !important}.rdlb-flow .screen[data-idx="4"] .rdlb-consent{background:#fff !important;border-color:var(--line) !important}.rdlb-flow .screen[data-idx="4"] .rdlb-consent-text{color:var(--ink-2) !important}.rdlb-flow .screen[data-idx="4"] .rdlb-consent-text a{color:var(--red) !important}.rdlb-flow .screen[data-idx="4"] .rdlb-dtp-trigger{color:var(--ink) !important}.rdlb-flow .screen[data-idx="4"] .rdlb-dtp-trigger.is-placeholder .rdlb-dtp-trigger-text{color:var(--ink-3) !important}.rdlb-flow .screen[data-idx="4"] .footer{ position:relative !important;background:transparent !important; padding:16px 0 48px !important; width:100%;max-width:none; display:flex;flex-direction:column;align-items:stretch; }.rdlb-flow .screen[data-idx="4"] .footer > *{width:100%}.rdlb-flow .screen[data-idx="4"] .content, .rdlb-flow .screen[data-idx="4"] .heading, .rdlb-flow .screen[data-idx="4"] .contact-stack{overflow:visible !important}.rdlb-flow .screen[data-idx="4"] .body{padding-bottom:0 !important}.rdlb-flow .screen[data-idx="4"] .cta{ width:100%;padding:18px 24px !important; font:700 16px/1 'Plus Jakarta Sans' !important; } .rdlb-flow .screen[data-idx="5"]{ background:var(--cream) !important;color:var(--ink) !important; display:grid !important; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr) !important; grid-template-rows:minmax(0, 1fr) auto !important; grid-template-areas:"hero body" "hero footer" !important; align-items:start !important; height:100vh !important; min-height:100vh !important; max-height:100vh !important; overflow:hidden !important; }.rdlb-flow .screen[data-idx="5"] .dt-hero{ grid-area:hero !important; align-self:stretch !important; min-height:0 !important; height:100vh !important; max-height:100vh !important; display:flex;flex-direction:column; background: radial-gradient(ellipse 600px 500px at 20% 25%, rgba(229,83,83,.20) 0%, transparent 60%), radial-gradient(ellipse 420px 360px at 80% 85%, rgba(229,83,83,.12) 0%, transparent 60%), linear-gradient(135deg, var(--navy) 0%, #1a1f4a 100%); color:#fff;padding:56px 56px 48px;position:relative; overflow-y:auto !important; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.20) transparent; }.rdlb-flow .screen[data-idx="5"] .dt-hero-title{margin-bottom:14px !important;font-size:40px !important}.rdlb-flow .screen[data-idx="5"] .dt-hero-sub{margin-bottom:24px !important;font-size:15px !important;max-width:42ch}.rdlb-flow .screen[data-idx="5"] .dt-hero::-webkit-scrollbar{width:8px}.rdlb-flow .screen[data-idx="5"] .dt-hero::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.18);border-radius:4px; }.rdlb-flow .screen[data-idx="5"] .dt-hero::before{ content:"";position:absolute;inset:0; background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px); background-size:28px 28px; mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 0%, transparent 70%); -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 0%, transparent 70%); pointer-events:none; }.rdlb-flow .screen[data-idx="5"] .dt-hero > *{position:relative;z-index:1}.rdlb-flow .pay-hero-stats{ display:grid;grid-template-columns:repeat(3, 1fr);gap:12px; margin-bottom:32px; }.rdlb-flow .phs-tile{ padding:18px 16px;border-radius:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); }.rdlb-flow .phs-num{ font:800 30px/1 'Plus Jakarta Sans';letter-spacing:-.025em; background:linear-gradient(135deg,#FFFFFF 0%,#FFD7D7 60%,#FFB0B0 100%); -webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent; margin-bottom:6px; }.rdlb-flow .phs-label{ font:600 11.5px/1.3 'Plus Jakarta Sans'; color:rgba(255,255,255,.65);letter-spacing:-.005em; }.rdlb-flow .pay-hero-quote{display:none}.rdlb-flow .screen[data-idx="5"] .dt-hero > *{flex-shrink:0}.rdlb-flow .pay-hero-protect{ padding:32px 34px 36px;border-radius:24px; background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.04) 100%); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); display:flex;flex-direction:column;gap:24px; margin-bottom:28px; position:relative;overflow:hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,.40), inset 0 1px 0 rgba(255,255,255,.08); }.rdlb-flow .pay-hero-protect::before{ content:"";position:absolute;inset:0; background: radial-gradient(ellipse 380px 280px at 100% 0%, rgba(229,83,83,.22) 0%, transparent 60%), radial-gradient(ellipse 280px 220px at 0% 100%, rgba(125,227,181,.10) 0%, transparent 60%); pointer-events:none; }.rdlb-flow .pay-hero-protect::after{ content:"";position:absolute;top:-30px;right:-30px; width:200px;height:200px; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2 4 5v6c0 5 3.4 9.4 8 11 4.6-1.6 8-6 8-11V5l-8-3z'/%3E%3C/svg%3E"); background-size:contain;background-repeat:no-repeat; opacity:.06; pointer-events:none; }.rdlb-flow .pay-hero-protect > *{position:relative;z-index:1}.rdlb-flow .php-eyebrow{ display:flex;align-items:center;gap:10px; font:800 11.5px/1 'Plus Jakarta Sans'; color:rgba(255,255,255,.72);letter-spacing:.16em;text-transform:uppercase; }.rdlb-flow .php-eyebrow svg{ width:24px;height:24px;flex-shrink:0; color:#FFB8B8; padding:5px; background:rgba(229,83,83,.18); border:1px solid rgba(229,83,83,.30); border-radius:10px; box-sizing:content-box; }.rdlb-flow .php-headline{ display:flex;flex-direction:column;gap:6px; padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,.12); }.rdlb-flow .php-headline strong{ font:800 32px/1.15 'Plus Jakarta Sans';letter-spacing:-.025em; background:linear-gradient(135deg,#FFFFFF 0%,#FFD7D7 60%,#FFB0B0 100%); -webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent; }.rdlb-flow .php-headline span{ font:500 15px/1.45 'Plus Jakarta Sans'; color:rgba(255,255,255,.74); text-wrap:pretty;max-width:42ch; }.rdlb-flow .php-list{ list-style:none;margin:0;padding:0; display:flex;flex-direction:column;gap:16px; }.rdlb-flow .php-list li{ display:flex;align-items:flex-start;gap:14px; font:500 14px/1.5 'Plus Jakarta Sans'; color:rgba(255,255,255,.86); text-wrap:pretty; }.rdlb-flow .php-list svg{ width:18px;height:18px;flex-shrink:0; color:#7DE3B5; margin-top:1px; padding:4px; background:rgba(125,227,181,.16); border:1px solid rgba(125,227,181,.24); border-radius:8px; box-sizing:content-box; }.rdlb-flow .pay-card-reassure{ display:flex;align-items:center;gap:14px; padding:14px 18px; margin:6px 12px 0; background:linear-gradient(135deg, rgba(229,83,83,.05) 0%, rgba(125,227,181,.06) 100%); border:1px solid rgba(229,83,83,.16); border-radius:12px; }.rdlb-flow .pcr-icon{ width:34px;height:34px;border-radius:10px; background:#fff; border:1px solid rgba(229,83,83,.18); display:flex;align-items:center;justify-content:center; color:var(--red);flex-shrink:0; box-shadow:0 4px 10px -4px rgba(229,83,83,.25); }.rdlb-flow .pcr-icon svg{width:16px !important;height:16px !important}.rdlb-flow .pcr-text{ flex:1;min-width:0; font:500 12.5px/1.45 'Plus Jakarta Sans'; color:var(--ink-2); text-wrap:pretty; }.rdlb-flow .pcr-text strong{ display:block; font:800 13.5px/1.25 'Plus Jakarta Sans'; color:var(--ink);letter-spacing:-.005em; margin-bottom:2px; }.rdlb-flow .screen.is-dark .pay-card-reassure{ background:linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(125,227,181,.06) 100%); border-color:rgba(255,255,255,.14); }.rdlb-flow .screen.is-dark .pcr-icon{ background:rgba(229,83,83,.18); border-color:rgba(229,83,83,.30); color:#FFB8B8; box-shadow:none; }.rdlb-flow .screen.is-dark .pcr-text{color:rgba(255,255,255,.78)}.rdlb-flow .screen.is-dark .pcr-text strong{color:#fff}.rdlb-flow .pay-hero-flex{ margin-bottom:24px; padding:20px 22px; border-radius:18px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); display:flex;align-items:flex-start;gap:14px; position:relative;overflow:hidden; }.rdlb-flow .pay-hero-flex::before{ content:"";position:absolute;inset:0; background:radial-gradient(ellipse 260px 180px at 0% 100%, rgba(229,83,83,.14) 0%, transparent 60%); pointer-events:none; }.rdlb-flow .pay-hero-flex > *{position:relative;z-index:1}.rdlb-flow .phf-icon{ width:42px;height:42px;border-radius:13px; background:rgba(229,83,83,.20); border:1px solid rgba(229,83,83,.30); display:flex;align-items:center;justify-content:center; color:#FFB8B8;flex-shrink:0; }.rdlb-flow .phf-icon svg{width:20px;height:20px}.rdlb-flow .phf-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}.rdlb-flow .phf-title{ font:800 14.5px/1.2 'Plus Jakarta Sans'; color:#fff;letter-spacing:-.015em; }.rdlb-flow .phf-sub{ font:500 13px/1.45 'Plus Jakarta Sans'; color:rgba(255,255,255,.74); text-wrap:pretty; }.rdlb-flow .screen[data-idx="5"] .pay-flex-reassure{display:none !important}.rdlb-flow .screen[data-idx="5"] .pay-card-reassure{ margin:8px 14px !important; background:linear-gradient(135deg, rgba(229,83,83,.06) 0%, rgba(125,227,181,.08) 100%) !important; border-color:rgba(229,83,83,.18) !important; }.rdlb-flow .screen[data-idx="5"] .pcr-icon{ background:#fff !important; border-color:rgba(229,83,83,.18) !important; color:var(--red) !important; box-shadow:0 4px 10px -4px rgba(229,83,83,.25) !important; }.rdlb-flow .screen[data-idx="5"] .pcr-text{color:var(--ink-2) !important}.rdlb-flow .screen[data-idx="5"] .pcr-text strong{color:var(--ink) !important}.rdlb-flow .pay-hero-trust{ margin-top:auto;padding-top:24px; border-top:1px solid rgba(255,255,255,.10); display:flex;flex-direction:column;gap:10px; }.rdlb-flow .pht-row{ display:flex;align-items:center;gap:10px; font:600 12.5px/1.3 'Plus Jakarta Sans'; color:rgba(255,255,255,.72);letter-spacing:-.005em; }.rdlb-flow .pht-row svg{ width:16px;height:16px;flex-shrink:0; color:#FFB8B8;stroke-width:2.2; }.rdlb-flow .screen[data-idx="5"] .body{ grid-area:body !important; display:flex;flex-direction:column; padding:36px 80px 24px 56px !important; background:#fff !important; box-shadow:-30px 0 60px -30px rgba(14,18,48,.18) inset; overflow-y:auto !important; overflow-x:hidden !important; min-height:0 !important; max-height:100vh; min-width:0; scrollbar-width:thin; scrollbar-color:rgba(14,18,48,.20) transparent; position:relative; }.rdlb-flow .screen[data-idx="5"] .body::-webkit-scrollbar{width:8px}.rdlb-flow .screen[data-idx="5"] .body::-webkit-scrollbar-thumb{ background:rgba(14,18,48,.20);border-radius:4px; }.rdlb-flow .screen[data-idx="5"] .body::-webkit-scrollbar-thumb:hover{background:rgba(14,18,48,.32)}.rdlb-flow .screen[data-idx="5"] .body > *, .rdlb-flow .screen[data-idx="5"] .content > *{min-width:0 !important}.rdlb-flow .screen[data-idx="5"] .body > *{width:100%;max-width:560px;margin:0 auto}.rdlb-flow .screen[data-idx="5"] .rdlb-steprail{margin:0 auto 30px !important}.rdlb-flow .screen[data-idx="5"] .heading{text-align:left;margin-bottom:18px;margin-top:6px}.rdlb-flow .screen[data-idx="5"] .title{ font:800 30px/1.1 'Plus Jakarta Sans' !important; color:var(--ink) !important;letter-spacing:-.025em !important;margin:0 0 6px; }.rdlb-flow .screen[data-idx="5"] .subtitle{ font:500 14.5px/1.5 'Plus Jakarta Sans' !important; color:var(--ink-2) !important;margin:0; }.rdlb-flow .screen[data-idx="5"] .subtitle strong{color:var(--ink) !important}.rdlb-flow .screen[data-idx="5"] .content{ overflow:visible !important; display:flex;flex-direction:column;gap:16px; }.rdlb-flow .screen[data-idx="5"] .pay-card-combo{ background:#fff !important; border:1px solid var(--line) !important; border-radius:22px !important; box-shadow:0 14px 40px -16px rgba(14,18,48,.14); backdrop-filter:none !important;-webkit-backdrop-filter:none !important; }.rdlb-flow .screen[data-idx="5"] .pay-card-hero{ background: radial-gradient(ellipse 400px 220px at 50% 110%, rgba(229,83,83,.14) 0%, transparent 70%), linear-gradient(180deg, #FBFAF6 0%, #F4F1E8 100%) !important; border-bottom:1px solid var(--line); padding:18px 22px 16px !important; }.rdlb-flow .screen[data-idx="5"] .pcb-eye{ color:var(--ink-3) !important; font-weight:800;letter-spacing:.12em;font-size:9.5px !important; }.rdlb-flow .screen[data-idx="5"] .pcb-price{ color:var(--ink) !important; text-shadow:none !important; font-size:44px !important; }.rdlb-flow .screen[data-idx="5"] .pcb-meta{color:var(--ink-2) !important}.rdlb-flow .screen[data-idx="5"] .pcb-meta strong{ color:var(--ink-3) !important;text-decoration:line-through; }.rdlb-flow .screen[data-idx="5"] .save-pill{ background:var(--red-tint) !important;color:var(--red) !important; border-color:transparent !important; }.rdlb-flow .screen[data-idx="5"] .pay-card-divider{ background:var(--line) !important;margin:0 !important; }.rdlb-flow .screen[data-idx="5"] .pay-card-summary{ padding:6px 8px !important;background:#fff !important; }.rdlb-flow .screen[data-idx="5"] .ps-row{ color:var(--ink) !important;background:transparent !important; border-radius:12px !important; padding:10px 14px !important; transition:background .15s ease; }.rdlb-flow .screen[data-idx="5"] .ps-row:hover{background:var(--cream) !important}.rdlb-flow .screen[data-idx="5"] .ps-label{color:var(--ink-3) !important;font-weight:700;letter-spacing:.02em;text-transform:uppercase;font-size:11px}.rdlb-flow .screen[data-idx="5"] .ps-value{color:var(--ink) !important;font-weight:700}.rdlb-flow .screen[data-idx="5"] .ps-edit-chevron, .rdlb-flow .screen[data-idx="5"] .ps-edit-chevron-inline{color:var(--ink-4) !important;opacity:.7}.rdlb-flow .screen[data-idx="5"] .ps-row:hover .ps-edit-chevron{opacity:1;color:var(--red) !important}.rdlb-flow .screen[data-idx="5"] .ps-row-add{ color:var(--red) !important; border:1.5px dashed rgba(229,83,83,.30) !important; background:transparent !important; margin:6px 8px 0 !important;border-radius:12px !important; }.rdlb-flow .screen[data-idx="5"] .ps-row-add:hover{ background:var(--red-tint) !important; border-color:var(--red) !important; }.rdlb-flow .screen[data-idx="5"] .pay-card-info{ background:var(--cream) !important;color:var(--ink-2) !important; border-top:1px solid var(--line); padding:14px 18px !important; }.rdlb-flow .screen[data-idx="5"] .pay-card-info:hover{background:var(--cream-2) !important;color:var(--ink) !important}.rdlb-flow .screen[data-idx="5"] .pay-card-info svg{color:var(--ink-3) !important}.rdlb-flow .screen[data-idx="5"] .trust-accent{ display:grid;grid-template-columns:repeat(4, 1fr);gap:8px; margin-top:0 !important; }.rdlb-flow .screen[data-idx="5"] .trust-pill{ background:#fff !important; border:1px solid var(--line) !important; color:var(--ink) !important; padding:12px 10px !important; border-radius:14px !important; flex-direction:column;align-items:flex-start;gap:8px; box-shadow:0 4px 12px -8px rgba(14,18,48,.10); }.rdlb-flow .screen[data-idx="5"] .trust-pill-icon{ background:var(--red-tint) !important;color:var(--red) !important; width:32px;height:32px;border-radius:10px; display:flex;align-items:center;justify-content:center; }.rdlb-flow .screen[data-idx="5"] .trust-pill-icon svg{width:16px;height:16px;stroke-width:2.2}.rdlb-flow .screen[data-idx="5"] .trust-pill-label{ color:var(--ink) !important; font:700 11.5px/1.25 'Plus Jakarta Sans';letter-spacing:-.005em; }.rdlb-flow .screen[data-idx="5"] .match-preview{display:none !important}.rdlb-flow .screen[data-idx="5"] .save-quote{ background:#fff !important; border:1px solid var(--line) !important; border-radius:16px !important; box-shadow:0 6px 16px -10px rgba(14,18,48,.10); }.rdlb-flow .screen[data-idx="5"] .save-quote-title{color:var(--ink) !important}.rdlb-flow .screen[data-idx="5"] .save-quote-sub{color:var(--ink-3) !important}.rdlb-flow .screen[data-idx="5"] .save-quote-icon{ background:var(--red-tint) !important;color:var(--red) !important; border-color:transparent !important; }.rdlb-flow .screen[data-idx="5"] .save-quote-trigger{ background:var(--ink) !important;color:#fff !important; border:0 !important; }.rdlb-flow .screen[data-idx="5"] .save-quote-trigger:hover{background:#1a2056 !important}.rdlb-flow .screen[data-idx="5"] .save-quote-input{ background:var(--cream) !important;color:var(--ink) !important; border:1.5px solid var(--line) !important; }.rdlb-flow .screen[data-idx="5"] .save-quote-send{ background:var(--red) !important;color:#fff !important; }.rdlb-flow .screen[data-idx="5"] .save-quote-cancel{color:var(--ink-3) !important}.rdlb-flow .screen[data-idx="5"] .tp-widget{ display:flex !important; align-items:center;justify-content:center; gap:9px; background:#fff !important; border:1px solid var(--line); border-radius:14px; padding:14px 18px; box-shadow:0 4px 12px -8px rgba(14,18,48,.10); flex-wrap:wrap; } /* Desktop confirm (v2.9.33): revert to the ORIGINAL Trustpilot widget design (green star chip + Excellent + on Trustpilot + Google rating). Only colour tweaks for the light card, plus a 4.8 partial fill on the 5th star. */ .rdlb-flow .screen[data-idx="5"] .tp-widget{ flex-direction:row !important;flex-wrap:wrap;gap:10px 14px !important; } .rdlb-flow .screen[data-idx="5"] .tp-chip{display:flex !important} .rdlb-flow .screen[data-idx="5"] .tp-google{display:flex !important} .rdlb-flow .screen[data-idx="5"] .tp-div{display:block !important;background:rgba(14,18,48,.12) !important} .rdlb-flow .screen[data-idx="5"] .tp-word{color:#00875A !important} .rdlb-flow .screen[data-idx="5"] .tp-brand{color:#0f1733 !important} .rdlb-flow .screen[data-idx="5"] .tp-brand span{color:#00875A !important} .rdlb-flow .screen[data-idx="5"] .tp-google{color:var(--ink-2,#3c4668) !important} .rdlb-flow .screen[data-idx="5"] .tp-google strong{color:#0f1733 !important} /* 4.8: the 5th Trustpilot star shows ~80% fill. A faint full star sits behind (via the box), and the white star is clipped to 80% width to read as 4/5. */ .rdlb-flow .screen[data-idx="5"] .tp-stars svg:last-child{clip-path:inset(0 20% 0 0)} .rdlb-flow .screen[data-idx="5"] .tp-stars{position:relative} .rdlb-flow .screen[data-idx="5"] .reassure{ color:var(--ink-3) !important; background:transparent;border:0;padding:0 0 24px; font:600 12.5px/1.4 'Plus Jakarta Sans'; display:flex;align-items:center;gap:8px; justify-content:center;margin-top:4px; }.rdlb-flow .screen[data-idx="5"] .reassure svg{color:var(--ink-3) !important;width:14px;height:14px;stroke-width:2.2}.rdlb-flow .screen[data-idx="5"] .content > .footer{ grid-area:auto !important; align-self:auto !important; position:sticky !important; bottom:0; background:#fff !important; padding:14px 0 4px !important; margin:0 !important; width:100%;max-width:none; display:flex;flex-direction:column;align-items:stretch; gap:10px; z-index:5; box-shadow:0 -16px 24px -12px rgba(255,255,255,1); }.rdlb-flow .screen[data-idx="5"] .content > .footer > *{max-width:none;width:100%;margin:0}.rdlb-flow .screen[data-idx="5"] .content{gap:20px}.rdlb-flow .screen[data-idx="5"] > .footer{display:none !important}.rdlb-flow .screen[data-idx="5"] .apple-pay{ background:linear-gradient(180deg,#f0655f 0%, var(--red) 48%, #d8453f 100%) !important;color:#fff !important; border:0 !important; padding:23px 24px !important; border-radius:18px !important; font:800 19px/1 'Plus Jakarta Sans' !important;letter-spacing:-.01em; box-shadow:0 18px 42px -10px rgba(229,83,83,.55),0 4px 14px -4px rgba(229,83,83,.4),0 1px 0 rgba(255,255,255,.25) inset; display:flex;align-items:center;justify-content:center;gap:10px; transition:transform .15s ease, box-shadow .2s ease, filter .2s ease; position:relative;overflow:hidden; }.rdlb-flow .screen[data-idx="5"] .apple-pay::after{ content:"";position:absolute;inset:0; background:linear-gradient(120deg, transparent 30%, rgba(255,255,255,.30) 50%, transparent 70%); transform:translateX(-100%); animation:authShimmer 3.2s ease-in-out infinite; pointer-events:none; } @keyframes authShimmer{0%, 55%{transform:translateX(-100%)}75%, 100%{transform:translateX(100%)}}.rdlb-flow .screen[data-idx="5"] .apple-pay:hover{ transform:translateY(-2px); filter:saturate(1.05); box-shadow:0 26px 54px -10px rgba(229,83,83,.62),0 6px 18px -4px rgba(229,83,83,.45),0 1px 0 rgba(255,255,255,.25) inset; }.rdlb-flow .screen[data-idx="5"] .apple-pay:active{transform:translateY(0)}.rdlb-flow .screen[data-idx="5"] .apple-pay svg{width:20px;height:20px;color:#fff !important}.rdlb-flow .screen[data-idx="5"] .pay-card-link{ color:var(--ink-2) !important; margin-top:14px; font:700 13px/1 'Plus Jakarta Sans'; background:transparent;border:0;cursor:pointer; text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--ink-4); }.rdlb-flow .screen[data-idx="5"] .pay-card-link:hover{color:var(--ink) !important;text-decoration-color:var(--ink-2)}.rdlb-flow .screen[data-idx="6"]{ background:var(--cream) !important;color:var(--ink) !important; display:grid !important; grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr) !important; grid-template-areas:"hero next" !important; align-items:stretch !important; min-height:100vh !important; overflow:hidden !important; }.rdlb-flow .screen[data-idx="6"] .topbar{display:none !important}.rdlb-flow .screen[data-idx="6"] .confetti{ grid-area:1 / 1 / 2 / 3; position:absolute !important;inset:0 !important; z-index:3;pointer-events:none; }.rdlb-flow .screen[data-idx="6"] .done-body{ grid-area:hero; align-self:stretch; display:flex !important;flex-direction:column !important; padding:72px 80px 56px !important; background: radial-gradient(ellipse 720px 600px at 20% 25%, rgba(229,83,83,.36) 0%, transparent 60%), radial-gradient(ellipse 520px 420px at 80% 85%, rgba(229,83,83,.18) 0%, transparent 60%), linear-gradient(135deg, var(--navy) 0%, #1a1f4a 100%) !important; color:#fff !important; overflow-y:auto !important; max-height:100vh; position:relative;z-index:2; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.20) transparent; }.rdlb-flow .screen[data-idx="6"] .done-body > *{flex-shrink:0}.rdlb-flow .screen[data-idx="6"] .done-body::before{ content:"";position:absolute;inset:0; background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px); background-size:28px 28px; mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 0%, transparent 70%); -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, #000 0%, transparent 70%); pointer-events:none;z-index:0; }.rdlb-flow .screen[data-idx="6"] .done-body > *{position:relative;z-index:1}.rdlb-flow .screen[data-idx="6"] .done-stamp{ display:flex;align-items:center;gap:18px; margin-bottom:28px !important; }.rdlb-flow .screen[data-idx="6"] .done-check{ width:72px !important;height:72px !important; border-radius:22px !important; background:#fff !important;color:var(--red) !important; box-shadow:0 24px 48px -12px rgba(229,83,83,.45),0 0 0 1px rgba(255,255,255,.10); }.rdlb-flow .screen[data-idx="6"] .done-check svg{width:34px !important;height:34px !important;stroke-width:3.6 !important}.rdlb-flow .screen[data-idx="6"] .done-booked{ font:800 12.5px/1 'Plus Jakarta Sans'; color:rgba(255,255,255,.78);letter-spacing:.18em;text-transform:uppercase; }.rdlb-flow .screen[data-idx="6"] .done-name{ font:800 72px/1.02 'Plus Jakarta Sans' !important; letter-spacing:-.035em !important; margin:0 0 16px !important; color:#fff !important; text-wrap:balance; }.rdlb-flow .screen[data-idx="6"] .done-name strong{ display:inline-block; background:linear-gradient(135deg,#FFFFFF 0%,#FFD7D7 55%,#FFB0B0 100%) !important; -webkit-background-clip:text !important;background-clip:text !important; color:transparent !important;-webkit-text-fill-color:transparent !important; padding-bottom:.08em; }.rdlb-flow .screen[data-idx="6"] .done-headline{ font:500 17px/1.55 'Plus Jakarta Sans' !important; color:rgba(255,255,255,.78) !important; margin:0 0 32px !important; max-width:48ch; }.rdlb-flow .screen[data-idx="6"] .done-headline strong{color:#fff;font-weight:800}.rdlb-flow .screen[data-idx="6"] .done-summary, .rdlb-flow .screen[data-idx="6"] .done-ticker, .rdlb-flow .screen[data-idx="6"] .done-anticipate{ background:rgba(255,255,255,.06) !important; border:1px solid rgba(255,255,255,.10) !important; backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px); }.rdlb-flow .screen[data-idx="6"] .done-summary{ padding:20px 24px !important; border-radius:18px !important; margin-bottom:14px !important; gap:16px !important; }.rdlb-flow .screen[data-idx="6"] .done-summary-icon{ width:44px !important;height:44px !important;border-radius:13px !important; background:rgba(229,83,83,.20) !important; border:1px solid rgba(229,83,83,.30); color:#FFB8B8 !important; }.rdlb-flow .screen[data-idx="6"] .done-summary-icon svg{width:22px !important;height:22px !important}.rdlb-flow .screen[data-idx="6"] .done-summary-title{ font:800 17px/1.2 'Plus Jakarta Sans' !important; letter-spacing:-.015em !important; }.rdlb-flow .screen[data-idx="6"] .done-summary-detail{ font:500 13px/1.4 'Plus Jakarta Sans' !important; color:rgba(255,255,255,.65) !important;margin-top:5px !important; }.rdlb-flow .screen[data-idx="6"] .done-summary-price{ font:800 22px/1 'Plus Jakarta Sans' !important;letter-spacing:-.02em !important; }.rdlb-flow .screen[data-idx="6"] .done-summary-price small{ font:700 10px/1 'Plus Jakarta Sans' !important; color:rgba(255,255,255,.55) !important;letter-spacing:.10em; margin-top:5px !important; }.rdlb-flow .screen[data-idx="6"] .done-ticker{ padding:16px 24px !important; border-radius:18px !important; margin-bottom:14px !important; }.rdlb-flow .screen[data-idx="6"] .done-ticker-head{ font:800 10.5px/1 'Plus Jakarta Sans' !important; color:rgba(255,255,255,.65) !important; letter-spacing:.16em !important; margin-bottom:12px !important; }.rdlb-flow .screen[data-idx="6"] .done-ticker-stage{min-height:42px !important}.rdlb-flow .screen[data-idx="6"] .done-ticker-avatar{width:32px !important;height:32px !important}.rdlb-flow .screen[data-idx="6"] .done-anticipate{ padding:18px 24px !important; border-radius:18px !important; margin-top:auto !important; margin-bottom:0 !important; gap:16px !important; }.rdlb-flow .screen[data-idx="6"] .done-anticipate-icon{ width:42px !important;height:42px !important;border-radius:13px !important; background:#fff !important;color:var(--red) !important; box-shadow:0 8px 18px -6px rgba(229,83,83,.40); }.rdlb-flow .screen[data-idx="6"] .done-anticipate-icon svg{width:20px !important;height:20px !important}.rdlb-flow .screen[data-idx="6"] .done-anticipate-title{ font:800 15px/1.2 'Plus Jakarta Sans' !important; letter-spacing:-.015em !important; }.rdlb-flow .screen[data-idx="6"] .done-anticipate-detail{ font:500 13px/1.45 'Plus Jakarta Sans' !important; color:rgba(255,255,255,.78) !important; margin-top:4px !important; text-wrap:pretty; } .rdlb-flow .screen[data-idx="6"] .done-cta-wrap{display:none !important}.rdlb-flow .screen[data-idx="6"] .next-steps{ display:flex !important;flex-direction:column !important; grid-area:next; padding:72px 80px 56px 64px !important; background:transparent !important; color:var(--ink) !important; overflow-y:auto !important; max-height:100vh; margin:0 !important; opacity:1 !important;transform:none !important; animation:none !important; position:relative;z-index:2; }.rdlb-flow .screen[data-idx="6"] .next-steps > *{flex-shrink:0}.rdlb-flow .screen[data-idx="6"] .next-steps-title{ font:800 12.5px/1 'Plus Jakarta Sans' !important; color:var(--ink-3) !important; letter-spacing:.18em !important; text-transform:uppercase !important; margin-bottom:24px !important; }.rdlb-flow .screen[data-idx="6"] .next-steps::before{ content:"Three steps until you're driving."; font:800 38px/1.1 'Plus Jakarta Sans'; color:var(--ink);letter-spacing:-.03em; margin-bottom:8px; text-wrap:balance; }.rdlb-flow .screen[data-idx="6"] .next-steps::after{ content:"Your enquiry releases to nearby instructors once you've downloaded the app and signed in. The whole thing takes about a minute."; font:500 16px/1.5 'Plus Jakarta Sans'; color:var(--ink-2); margin-bottom:32px; max-width:44ch; }.rdlb-flow .screen[data-idx="6"] .next-steps{align-items:stretch}.rdlb-flow .screen[data-idx="6"] .next-steps::before{order:1}.rdlb-flow .screen[data-idx="6"] .next-steps::after{order:2}.rdlb-flow .screen[data-idx="6"] .next-steps-title{order:3}.rdlb-flow .screen[data-idx="6"] .next-list{order:4}.rdlb-flow .screen[data-idx="6"] .next-app-eyebrow{order:5}.rdlb-flow .screen[data-idx="6"] .next-app-row{order:6}.rdlb-flow .screen[data-idx="6"] .next-list{ background:transparent !important; border:0 !important; border-radius:0 !important; padding:0 !important; margin-bottom:8px !important; display:flex;flex-direction:column;gap:0 !important; position:relative; }.rdlb-flow .screen[data-idx="6"] .next-list::before{ content:"";position:absolute; left:19px;top:30px;bottom:30px; width:2px; background:linear-gradient(180deg,var(--red) 0%, rgba(229,83,83,.25) 100%); z-index:0; }.rdlb-flow .screen[data-idx="6"] .next-item{ position:relative;z-index:1; background:transparent !important;border:0 !important; padding:14px 0 !important; gap:20px !important; align-items:flex-start !important; }.rdlb-flow .screen[data-idx="6"] .next-num{ width:40px !important;height:40px !important; border-radius:50% !important; background:#fff !important;color:var(--red) !important; border:2px solid var(--red); font:800 15px/1 'Plus Jakarta Sans' !important; box-shadow:0 6px 14px -4px rgba(229,83,83,.40); display:flex;align-items:center;justify-content:center; flex-shrink:0; }.rdlb-flow .screen[data-idx="6"] .next-h{ font:800 18px/1.2 'Plus Jakarta Sans' !important; color:var(--ink) !important;letter-spacing:-.02em !important; }.rdlb-flow .screen[data-idx="6"] .next-d{ font:500 14px/1.5 'Plus Jakarta Sans' !important; color:var(--ink-2) !important; margin-top:4px !important; text-wrap:pretty;max-width:44ch; }.rdlb-flow .screen[data-idx="6"] .next-app-eyebrow{ margin-top:28px !important; margin-bottom:0 !important; font:800 11px/1 'Plus Jakarta Sans' !important; color:var(--ink-3) !important; letter-spacing:.18em !important; display:flex;align-items:center;justify-content:center;gap:10px; text-transform:uppercase !important; }.rdlb-flow .screen[data-idx="6"] .next-app-eyebrow::before, .rdlb-flow .screen[data-idx="6"] .next-app-eyebrow::after{ content:"";flex:1;height:1px; background:linear-gradient(90deg,transparent,rgba(14,18,48,.18),transparent); max-width:none; }.rdlb-flow .screen[data-idx="6"] .next-app-eyebrow-dot{ width:8px;height:8px;border-radius:50%; background:var(--red) !important; box-shadow:0 0 0 5px rgba(229,83,83,.20); animation:eyebrowPulse 1.6s ease-in-out infinite; }.rdlb-flow .screen[data-idx="6"] .next-app-row{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:14px !important; margin-top:18px !important; padding-bottom:0 !important; }.rdlb-flow .screen[data-idx="6"] .next-app-row::before{display:none !important}.rdlb-flow .screen[data-idx="6"] .next-app-btn{ background:#fff !important; color:var(--ink) !important; border:1px solid var(--line) !important; padding:18px 22px !important; border-radius:18px !important; display:flex !important;align-items:center !important;gap:14px !important; transition:transform .15s ease, box-shadow .2s ease, border-color .15s ease !important; box-shadow:0 6px 18px -10px rgba(14,18,48,.18) !important; position:relative;overflow:hidden; }.rdlb-flow .screen[data-idx="6"] .next-app-btn::before{ content:"";position:absolute;inset:0; background:linear-gradient(135deg, rgba(229,83,83,.06) 0%, transparent 60%); opacity:0;transition:opacity .2s ease; pointer-events:none; }.rdlb-flow .screen[data-idx="6"] .next-app-btn:hover{ transform:translateY(-3px) !important; border-color:rgba(229,83,83,.30) !important; box-shadow:0 18px 36px -12px rgba(229,83,83,.30) !important; }.rdlb-flow .screen[data-idx="6"] .next-app-btn:hover::before{opacity:1}.rdlb-flow .screen[data-idx="6"] .next-app-btn:active{ transform:translateY(-1px) !important; }.rdlb-flow .screen[data-idx="6"] .next-app-icon{ width:44px !important;height:44px !important;border-radius:13px !important; background:var(--red-tint) !important; border:1px solid rgba(229,83,83,.20) !important; display:flex;align-items:center;justify-content:center;flex-shrink:0; transition:background .2s ease; }.rdlb-flow .screen[data-idx="6"] .next-app-btn:hover .next-app-icon{background:rgba(229,83,83,.14) !important}.rdlb-flow .screen[data-idx="6"] .next-app-icon svg{ width:22px !important;height:22px !important; color:var(--red) !important; }.rdlb-flow .screen[data-idx="6"] .next-app-btn-body{flex:1;min-width:0;text-align:left;display:flex;flex-direction:column;gap:4px}.rdlb-flow .screen[data-idx="6"] .next-app-text-eye{ font:700 10px/1 'Plus Jakarta Sans' !important; color:var(--ink-3) !important; letter-spacing:.14em !important; text-transform:uppercase; }.rdlb-flow .screen[data-idx="6"] .next-app-text-name{ font:800 17px/1 'Plus Jakarta Sans' !important; color:var(--ink) !important;letter-spacing:-.015em !important; }.rdlb-flow .screen[data-idx="6"] .next-app-arrow{ margin-left:auto; width:34px !important;height:34px !important;border-radius:50% !important; background:transparent !important;color:var(--red) !important; border:1.5px solid rgba(229,83,83,.30) !important; display:flex;align-items:center;justify-content:center;flex-shrink:0; box-shadow:none !important; transition:background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease; }.rdlb-flow .screen[data-idx="6"] .next-app-btn:hover .next-app-arrow{ background:var(--red) !important;color:#fff !important; border-color:var(--red) !important; transform:translateX(2px); }.rdlb-flow .screen[data-idx="6"] .next-app-arrow svg{width:14px !important;height:14px !important;stroke-width:3 !important}.rdlb-flow .screen[data-idx="5"] .pay-hero-protect{ padding:24px 26px 26px !important; margin-bottom:20px !important; }.rdlb-flow .screen[data-idx="5"] .php-headline strong{font-size:24px !important}.rdlb-flow .screen[data-idx="5"] .php-headline span{font-size:13.5px !important}.rdlb-flow .screen[data-idx="5"] .php-list{gap:12px !important}.rdlb-flow .screen[data-idx="5"] .php-list li{font-size:13px !important;line-height:1.45 !important}.rdlb-flow .screen[data-idx="5"] .pay-hero-trust{padding-top:18px !important;gap:8px !important}.rdlb-flow .screen[data-idx="5"] .pht-row{font-size:12px !important}} @media(max-width:1023px){.rdlb-flow .dt-bar{display:none !important}.rdlb-flow .dt-hero{display:none !important}} /* ═══════════════════════════════════════════════════════════════════ v2.9.99 · COMBINED DATE + TIME PICKER (rdlb-dtp) Replaces the two native fields (date input + time select) with one trigger that opens a calendar popover. Cohesive with the flow's design language: white card, same scrim/shadow as the edit-sheet, red accent for the chosen day, pill-style time buttons. Self-contained light theme so it reads correctly over both the dark mobile details screen and the cream desktop theme. UK conventions: Monday-first grid, DD/MM display. ═══════════════════════════════════════════════════════════════════ */ /* Trigger field (sits inside the combined contact-row) */ .rdlb-flow .rdlb-dtp-trigger{ -webkit-appearance:none;appearance:none; width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px; /* Match .cr-input's vertical rhythm so this row is the same height as the name/mobile/email rows above it (v2.9.102 — the trigger was too short). */ background:transparent;border:0;padding:4px 0 8px;margin:0; font:600 16px/1.4 'Plus Jakarta Sans',system-ui,sans-serif; color:#fff;text-align:left;cursor:pointer; } .rdlb-flow .rdlb-dtp-trigger-text{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .rdlb-flow .rdlb-dtp-trigger.is-placeholder .rdlb-dtp-trigger-text{color:rgba(255,255,255,.45);font-weight:500} .rdlb-flow .rdlb-dtp-trigger-caret{width:18px;height:18px;flex-shrink:0;opacity:.6;transition:transform .25s} .rdlb-flow .rdlb-dtp-trigger[aria-expanded="true"] .rdlb-dtp-trigger-caret{transform:rotate(180deg)} /* When the row is valid (cream pill on mobile) the trigger text reads dark */ .rdlb-flow .screen[data-idx="3"] .contact-row.is-valid .rdlb-dtp-trigger{color:var(--ink)} .rdlb-flow .screen[data-idx="3"] .contact-row.is-valid .rdlb-dtp-trigger.is-placeholder .rdlb-dtp-trigger-text{color:var(--ink-3)} /* Hidden native mirrors: kept in DOM for state/admin, never shown */ .rdlb-flow .rdlb-dtp-mirror{ position:absolute !important;width:1px !important;height:1px !important; padding:0 !important;margin:-1px !important;overflow:hidden !important; clip:rect(0,0,0,0) !important;white-space:nowrap !important;border:0 !important; opacity:0 !important;pointer-events:none !important; } /* Scrim + popover shell (mirror the edit-sheet layering) */ .rdlb-flow .rdlb-dtp-scrim{ position:fixed;inset:0;background:rgba(10,14,44,.45); backdrop-filter:blur(6px) saturate(120%);-webkit-backdrop-filter:blur(6px) saturate(120%); opacity:0;pointer-events:none;transition:opacity .2s ease;z-index:2147483200; } .rdlb-flow .rdlb-dtp-scrim.is-open{opacity:1;pointer-events:auto} .rdlb-flow .rdlb-dtp{ position:fixed;left:50%;top:50%; transform:translate(-50%,-46%) scale(.98); width:calc(100% - 32px);max-width:380px; max-height:90vh;max-height:90dvh;overflow-y:auto; background:#fff;border:1px solid rgba(15,25,50,.06);border-radius:24px; box-shadow:0 2px 8px rgba(14,18,48,.04),0 30px 70px -18px rgba(14,18,48,.28); padding:18px 18px 18px;color:#0f1733; opacity:0;pointer-events:none; transition:opacity .22s ease,transform .22s cubic-bezier(.34,1.4,.5,1); z-index:2147483201; } .rdlb-flow .rdlb-dtp.is-open{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)} .rdlb-flow .rdlb-dtp[hidden]{display:none} .rdlb-flow .rdlb-dtp-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 14px} .rdlb-flow .rdlb-dtp-title{font:800 17px/1 'Plus Jakarta Sans';letter-spacing:-.01em;color:var(--ink)} .rdlb-flow .rdlb-dtp-close{ width:32px;height:32px;border-radius:50%;border:0;cursor:pointer; background:rgba(14,18,48,.06);color:var(--ink-2); display:flex;align-items:center;justify-content:center;transition:background .18s,color .18s; } .rdlb-flow .rdlb-dtp-close:hover{background:rgba(14,18,48,.12);color:var(--ink)} /* Calendar header (month + nav) */ .rdlb-flow .rdlb-dtp-calhead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 2px 12px} .rdlb-flow .rdlb-dtp-month{font:700 15px/1 'Plus Jakarta Sans';color:var(--ink);letter-spacing:-.01em} .rdlb-flow .rdlb-dtp-nav{ width:34px;height:34px;border-radius:11px;border:1px solid var(--line);cursor:pointer; background:#fff;color:var(--ink-2);display:flex;align-items:center;justify-content:center; transition:background .18s,color .18s,border-color .18s,transform .1s; } .rdlb-flow .rdlb-dtp-nav svg{width:16px;height:16px} .rdlb-flow .rdlb-dtp-nav:hover:not(:disabled){background:var(--red-tint);color:var(--red);border-color:transparent} .rdlb-flow .rdlb-dtp-nav:active:not(:disabled){transform:scale(.94)} .rdlb-flow .rdlb-dtp-nav:disabled{opacity:.32;cursor:default} /* Weekday labels */ .rdlb-flow .rdlb-dtp-weekdays{ display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin:0 0 6px; } .rdlb-flow .rdlb-dtp-weekdays span{ text-align:center;font:700 10.5px/1 'Plus Jakarta Sans';letter-spacing:.04em; text-transform:uppercase;color:var(--ink-3);padding:4px 0; } /* Day grid */ .rdlb-flow .rdlb-dtp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px} .rdlb-flow .rdlb-dtp-day{ aspect-ratio:1/1;border:0;background:transparent;cursor:pointer; border-radius:11px; font:600 13.5px/1 'Plus Jakarta Sans';color:var(--ink); display:flex;align-items:center;justify-content:center; transition:background .15s,color .15s,transform .1s; position:relative; } .rdlb-flow .rdlb-dtp-day.is-empty{pointer-events:none} .rdlb-flow .rdlb-dtp-day:hover:not(:disabled):not(.is-selected){background:var(--red-tint);color:var(--red)} .rdlb-flow .rdlb-dtp-day:active:not(:disabled){transform:scale(.9)} .rdlb-flow .rdlb-dtp-day:disabled{color:var(--ink-3);opacity:.35;cursor:default} .rdlb-flow .rdlb-dtp-day.is-today:not(.is-selected)::after{ content:"";position:absolute;bottom:5px;left:50%;transform:translateX(-50%); width:4px;height:4px;border-radius:50%;background:var(--red); } .rdlb-flow .rdlb-dtp-day.is-selected{ background:var(--red);color:#fff;font-weight:800; box-shadow:0 8px 18px -6px rgba(229,83,83,.55); } /* Time-of-day section */ .rdlb-flow .rdlb-dtp-timehead{ font:700 10.5px/1 'Plus Jakarta Sans';letter-spacing:.08em;text-transform:uppercase; color:var(--ink-3);margin:18px 2px 9px; } /* v2.9.102: 30-minute time slots as a horizontally-scrollable row of compact pills (8:00 AM .. 8:00 PM). Replaces the old morning/afternoon/evening tiles. Scrolls sideways so it stays one tidy row on mobile; momentum-scroll on iOS. */ .rdlb-flow .rdlb-dtp-times{ display:flex;flex-wrap:nowrap;gap:8px; overflow-x:auto;-webkit-overflow-scrolling:touch; padding:2px 2px 6px;margin:0 -2px; scrollbar-width:thin; } .rdlb-flow .rdlb-dtp-times::-webkit-scrollbar{height:5px} .rdlb-flow .rdlb-dtp-times::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px} .rdlb-flow .rdlb-dtp-time{ flex:0 0 auto; display:inline-flex;align-items:center;justify-content:center; padding:10px 14px;border-radius:12px;cursor:pointer; background:#fff;border:1.5px solid var(--line); font:700 13.5px/1 'Plus Jakarta Sans';color:var(--ink);white-space:nowrap; transition:border-color .18s,background .18s,color .18s,transform .1s; } .rdlb-flow .rdlb-dtp-time:hover:not(.is-on){border-color:rgba(229,83,83,.4)} .rdlb-flow .rdlb-dtp-time:active{transform:scale(.95)} .rdlb-flow .rdlb-dtp-time.is-on{background:var(--red);border-color:var(--red);color:#fff;box-shadow:0 8px 18px -6px rgba(229,83,83,.5)} /* Confirm button */ .rdlb-flow .rdlb-dtp-done{ width:100%;margin:18px 0 0;padding:15px 18px;border:0;border-radius:15px;cursor:pointer; background:var(--red);color:#fff; font:800 15px/1 'Plus Jakarta Sans';letter-spacing:-.01em; box-shadow:0 14px 28px -10px rgba(229,83,83,.5); transition:transform .18s cubic-bezier(.32,1.1,.42,1),box-shadow .18s,opacity .18s; } .rdlb-flow .rdlb-dtp-done:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 20px 36px -10px rgba(229,83,83,.6)} .rdlb-flow .rdlb-dtp-done:active:not(:disabled){transform:translateY(0) scale(.99)} .rdlb-flow .rdlb-dtp-done:disabled{opacity:.4;cursor:default;box-shadow:none} /* Reduced-motion: honour the user's OS setting */ @media (prefers-reduced-motion: reduce){ .rdlb-flow .rdlb-dtp,.rdlb-flow .rdlb-dtp-scrim, .rdlb-flow .rdlb-dtp-day,.rdlb-flow .rdlb-dtp-time,.rdlb-flow .rdlb-dtp-done{transition:none} } /* ════════════════════════════════════════════════════════════════ Enquiry-flow stage (v2.9.109) — injected by enquiry.js onto the pay screen (data-idx 4) ONLY when flowMode === 'enquiry'. It replaces the Stripe pay UI with an enquiry confirm + OTP step. Scoped under .rdlb-flow and styled for the dark navy screen. Namespaced .rdlb-enq-* so it never affects the payment flow (which does not load enquiry.js). ════════════════════════════════════════════════════════════════ */ .rdlb-flow .rdlb-enq-stage{ display:block;width:100%;max-width:520px;margin:0 auto; color:var(--ink,#0E1230); } .rdlb-flow .rdlb-enq-head{margin-bottom:18px} .rdlb-flow .rdlb-enq-eyebrow{ font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase; color:var(--red,#e55353);margin-bottom:8px; } .rdlb-flow .rdlb-enq-title{ font-size:24px;font-weight:800;line-height:1.2;margin:0 0 8px;color:var(--ink,#0E1230); } .rdlb-flow .rdlb-enq-sub{ font-size:14px;line-height:1.55;margin:0;color:#5b6075; } .rdlb-flow .rdlb-enq-summary{ list-style:none;margin:0 0 18px;padding:0; display:flex;flex-direction:column;gap:10px; } .rdlb-flow .rdlb-enq-srow{ display:flex;align-items:center;gap:14px; padding:14px 16px; background:#fff;border:1px solid var(--line,#E8EAF1); border-radius:14px;box-shadow:0 6px 16px -12px rgba(14,18,48,.12); } .rdlb-flow .rdlb-enq-glyph{ flex-shrink:0;width:38px;height:38px;border-radius:11px; display:flex;align-items:center;justify-content:center; background:var(--red-tint,#FEF2F3);color:var(--red,#e55353); } .rdlb-flow .rdlb-enq-glyph svg{width:18px;height:18px} .rdlb-flow .rdlb-enq-srow-body{ display:flex;flex-direction:column;gap:3px;min-width:0;flex:1; } .rdlb-flow .rdlb-enq-k{ font-size:11px;color:#8a8fa3;font-weight:700; text-transform:uppercase;letter-spacing:.08em; } .rdlb-flow .rdlb-enq-v{ font-size:15px;color:var(--ink,#0E1230);font-weight:700; text-align:left;overflow:hidden;text-overflow:ellipsis; } /* v2.9.127: inline-editable summary rows (name/mobile/email) + jump-back rows (lessons/area/preferred). Generalised from the v2.9.126 email-only styles. */ .rdlb-flow .rdlb-enq-srow-edit-row .rdlb-enq-v{word-break:break-word} .rdlb-flow .rdlb-enq-srow-edit,.rdlb-flow .rdlb-enq-srow-save{ flex-shrink:0;background:transparent;border:0;cursor:pointer;padding:4px 2px; font-size:13px;font-weight:700;color:var(--red,#e55353); text-decoration:underline;text-underline-offset:2px;align-self:center; } .rdlb-flow .rdlb-enq-srow-edit:hover,.rdlb-flow .rdlb-enq-srow-save:hover{filter:brightness(.92)} .rdlb-flow .rdlb-enq-srow-edit[hidden],.rdlb-flow .rdlb-enq-srow-save[hidden],.rdlb-flow .rdlb-enq-inline-edit-wrap[hidden],.rdlb-flow .rdlb-enq-inline-err[hidden]{display:none !important} .rdlb-flow .rdlb-enq-inline-edit-wrap{display:flex;flex-direction:column;gap:4px;margin-top:4px} .rdlb-flow .rdlb-enq-inline-input{ width:100%;box-sizing:border-box;height:42px;padding:0 12px; font:600 15px/1 'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink,#0E1230) !important; background:#fff !important;border:1.5px solid var(--red,#e55353) !important;border-radius:10px; -webkit-appearance:none;appearance:none; } .rdlb-flow .rdlb-enq-inline-input:focus{outline:none;border-color:var(--red,#e55353) !important;box-shadow:0 0 0 3px var(--red-tint,rgba(229,83,83,.12))} .rdlb-flow .rdlb-enq-inline-err{font-size:12.5px;font-weight:600;color:#b3261e} .rdlb-flow .rdlb-enq-status{ font-size:14px;font-weight:600;color:var(--ink,#0E1230);margin:0 0 14px; padding:12px 14px;border-radius:10px; background:#F4F5FA;border:1px solid var(--line,#E8EAF1); } .rdlb-flow .rdlb-enq-error{ font-size:13.5px;font-weight:600;color:#b3261e;margin:0 0 14px; padding:12px 14px;border-radius:10px; background:#FDECEC;border:1px solid #F3B6B6; } .rdlb-flow .rdlb-enq-btn{ display:block;width:100%;border:0;cursor:pointer; background:var(--red,#e55353);color:#fff;font-weight:800;font-size:16px; padding:16px 20px;border-radius:12px;margin:0 0 12px; transition:filter .12s ease,opacity .12s ease; } .rdlb-flow .rdlb-enq-btn:hover{filter:brightness(1.06)} .rdlb-flow .rdlb-enq-btn:disabled{cursor:default} .rdlb-flow .rdlb-enq-fineprint{ font-size:11.5px;line-height:1.5;color:#8a8fa3;margin:12px 0 28px;text-align:center; } /* v2.9.127: segmented OTP code field. Four large digit cells in a soft card, matching the confirm summary's refinement. Selected/focused cell lifts with a red ring; filled cells read solid. */ .rdlb-flow .rdlb-enq-otp-card{ background:var(--cream,#F6F4EE);border:1px solid var(--line,#E8EAF1); border-radius:16px;padding:22px 18px;margin:0 0 16px; } .rdlb-flow .rdlb-enq-otp-cells{ display:flex;gap:12px;justify-content:center; /* v2.9.130: the cells rendered right-to-left on live (3 2 1 _ instead of 1 2 3 _). The JS always reads/writes them in DOM order, so the SUBMITTED code was correct, but a theme rule was flipping the visual order (an inherited direction:rtl or flex row-reverse). Force LTR + normal row order so the digits always display 1 2 3 4 left-to-right. */ direction:ltr !important;flex-direction:row !important; } .rdlb-flow .rdlb-enq-otp-cell{ width:62px;height:72px;box-sizing:border-box; direction:ltr !important;unicode-bidi:normal;text-align:center !important; font:800 30px/1 'Plus Jakarta Sans',system-ui,sans-serif; color:var(--ink,#0E1230) !important;background:#fff !important; border:1.5px solid var(--line,#E8EAF1) !important;border-radius:14px; -webkit-appearance:none;appearance:none; box-shadow:0 6px 16px -12px rgba(14,18,48,.18); transition:border-color .15s,box-shadow .15s,transform .1s; } .rdlb-flow .rdlb-enq-otp-cell.is-filled{border-color:var(--ink-4,#C6CAD8) !important} .rdlb-flow .rdlb-enq-otp-cell:focus{ outline:none;border-color:var(--red,#e55353) !important; box-shadow:0 0 0 3px var(--red-tint,rgba(229,83,83,.18));transform:translateY(-1px); } .rdlb-flow .rdlb-enq-otp-err{margin:14px 0 0} .rdlb-flow .rdlb-enq-otp-reassure{ display:flex;align-items:center;gap:9px;justify-content:center; margin:14px 0 0;color:var(--ink-3,#8A91AB); font:600 12.5px/1.4 'Plus Jakarta Sans',system-ui,sans-serif; } .rdlb-flow .rdlb-enq-otp-reassure svg{width:15px;height:15px;flex-shrink:0;color:var(--ink-3,#8A91AB)} @media(max-width:380px){ .rdlb-flow .rdlb-enq-otp-cells{gap:9px} .rdlb-flow .rdlb-enq-otp-cell{width:54px;height:64px;font-size:26px} } .rdlb-flow .rdlb-enq-link{ display:block;width:100%;background:transparent;border:0;cursor:pointer; color:#5b6075;font-size:14px;font-weight:600;text-decoration:underline; padding:6px; } .rdlb-flow .rdlb-enq-link:hover{color:var(--ink,#0E1230)} .rdlb-flow .rdlb-enq-link[hidden],.rdlb-flow .rdlb-enq-addr-error[hidden],.rdlb-flow .rdlb-enq-status[hidden],.rdlb-flow .rdlb-enq-error[hidden],.rdlb-flow .rdlb-enq-otp[hidden]{display:none !important} .rdlb-flow .rdlb-enq-address{margin:0 0 16px} .rdlb-flow .rdlb-enq-addr-head{ display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 6px; } .rdlb-flow .rdlb-enq-addr-edit{ flex-shrink:0;background:transparent;border:0;cursor:pointer;padding:0; font-size:13px;font-weight:700;color:var(--red,#e55353); text-decoration:underline;text-underline-offset:2px; } .rdlb-flow .rdlb-enq-addr-edit:hover{filter:brightness(.92)} .rdlb-flow .rdlb-enq-addr-label{ display:block;font-size:13px;font-weight:700;color:var(--ink,#0E1230); margin:0; } .rdlb-flow .rdlb-enq-addr-select{ display:block;width:100%;box-sizing:border-box;height:60px; font-size:16px;font-weight:600;color:var(--ink,#0E1230);line-height:1.3; background:#fff;border:1px solid var(--line,#E8EAF1);border-radius:14px; box-shadow:0 6px 16px -12px rgba(14,18,48,.12); padding:0 44px 0 18px;cursor:pointer; appearance:none;-webkit-appearance:none;-moz-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237a7f93' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center; } .rdlb-flow .rdlb-enq-addr-select:focus{outline:2px solid var(--red,#e55353);outline-offset:2px;border-color:var(--red,#e55353)} .rdlb-flow .rdlb-enq-addr-select:disabled{background-color:#F4F5FA;color:#8a8fa3;cursor:default} /* v2.9.259: manual-address fallback input (matches the address select styling) */ .rdlb-flow .rdlb-enq-addr-manual-input{ display:block;width:100%;box-sizing:border-box;height:56px;margin-top:10px; font-size:16px;font-weight:600;color:var(--ink,#0E1230);line-height:1.3; background:#fff;border:1px solid var(--line,#E8EAF1);border-radius:14px; box-shadow:0 6px 16px -12px rgba(14,18,48,.12);padding:0 18px; } .rdlb-flow .rdlb-enq-addr-manual-input::placeholder{color:#9aa1b5;font-weight:500} .rdlb-flow .rdlb-enq-addr-manual-input:focus{outline:2px solid var(--red,#e55353);outline-offset:2px;border-color:var(--red,#e55353)} .rdlb-flow .rdlb-enq-addr-manual-input[hidden]{display:none} .rdlb-flow .rdlb-enq-addr-error{ font-size:13px;font-weight:600;color:#b3261e;margin:8px 0 0; padding:10px 12px;border-radius:10px; background:#FDECEC;border:1px solid #F3B6B6; } /* v2.9.828: address step. Inputs 16px (iOS zooms on focus below 16px, so the select and manual input move up from 15px); every control in the address block is at least 44px tall; and the optional house number or name filter over the downloaded list. Mobile colours for the dark Confirm screen are set separately at the end of this sheet. */ .rdlb-flow .rdlb-enq-addr-head{align-items:center} .rdlb-flow .rdlb-enq-addr-edit{min-height:44px;display:inline-flex;align-items:center} .rdlb-flow .rdlb-enq-address .rdlb-enq-link{min-height:44px} .rdlb-flow .rdlb-enq-addr-find{margin:0 0 10px} .rdlb-flow .rdlb-enq-addr-find[hidden],.rdlb-flow .rdlb-enq-addr-count[hidden]{display:none !important} .rdlb-flow .rdlb-enq-addr-filter{ display:block;width:100%;box-sizing:border-box;height:52px;margin:0; font-size:16px;font-weight:600;color:var(--ink,#0E1230);line-height:1.3; background:#fff;border:1px solid var(--line,#E8EAF1);border-radius:14px; box-shadow:0 6px 16px -12px rgba(14,18,48,.12);padding:0 18px; } .rdlb-flow .rdlb-enq-addr-filter::placeholder{color:#5b6075;font-weight:500;opacity:1} .rdlb-flow .rdlb-enq-addr-filter:focus,.rdlb-flow .rdlb-enq-addr-filter:focus-visible{outline:2px solid var(--red,#e55353);outline-offset:2px;border-color:var(--red,#e55353)} .rdlb-flow .rdlb-enq-addr-count{ display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 0; font-size:14px;font-weight:600;line-height:1.35;color:#5b6075; } .rdlb-flow .rdlb-enq-addr-all{ flex-shrink:0;min-height:44px;padding:0 2px;background:transparent;border:0;cursor:pointer; font-size:14px;font-weight:700;color:#b3261e;text-decoration:underline;text-underline-offset:2px; } .rdlb-flow .rdlb-enq-addr-all:focus-visible,.rdlb-flow .rdlb-enq-addr-edit:focus-visible,.rdlb-flow .rdlb-enq-address .rdlb-enq-link:focus-visible{outline:2px solid var(--red,#e55353);outline-offset:2px} /* ===== Availability screen (v2.9.119; mobile redesign v2.9.123) ========== */ .rdlb-flow .av-section{margin:0 0 22px} .rdlb-flow .av-section:last-child{margin-bottom:0} .rdlb-flow .av-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 4px} .rdlb-flow .av-section-label{font:700 12px/1 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px} .rdlb-flow .av-section-head .av-section-label{margin:0} .rdlb-flow .av-quick{background:transparent;border:0;cursor:pointer;padding:0;font:700 13px/1 'Plus Jakarta Sans',system-ui,sans-serif;color:var(--red);text-decoration:underline;text-underline-offset:2px} .rdlb-flow .av-quick:hover{filter:brightness(.92)} .rdlb-flow .av-hint{font:500 13px/1.45 'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink-3);margin:0 0 12px} .rdlb-flow .av-grid{display:flex;flex-direction:column;gap:10px} .rdlb-flow .av-row-head{display:none !important} /* Mobile: one compact card per day. Day name as a quiet header strip, then the three time pills in a single row beneath, each showing the band + its hours. */ .rdlb-flow .av-row{ display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:auto; background:#fff;border:1px solid var(--line);border-radius:16px; box-shadow:0 8px 22px -16px rgba(14,18,48,.28);overflow:hidden; } .rdlb-flow .av-day{ grid-column:1 / -1; font:800 13px/1 'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink); letter-spacing:.01em;padding:12px 14px 10px; } .rdlb-flow .av-day-abbr{display:none} .rdlb-flow .av-row .av-cell{ display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px; min-width:0;cursor:pointer;position:relative; background:#fff;border:0;border-top:1px solid var(--line); padding:14px 8px 16px; font-family:'Plus Jakarta Sans',system-ui,sans-serif;text-align:center; transition:background .15s,color .15s; } .rdlb-flow .av-row .av-cell + .av-cell{border-left:1px solid var(--line)} .rdlb-flow .av-cell-text{display:flex;flex-direction:column;align-items:center;gap:3px;pointer-events:none} .rdlb-flow .av-cell-label{font:700 13px/1 'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink-2)} .rdlb-flow .av-cell-time{font:600 10.5px/1 'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink-3);white-space:nowrap} .rdlb-flow .av-cell-tick{ margin-top:7px; width:20px;height:20px;border-radius:50%; border:2px solid var(--ink-4);background:transparent; display:flex;align-items:center;justify-content:center;flex-shrink:0; transition:border-color .15s,background .15s; } .rdlb-flow .av-cell-tick svg{width:10px;height:10px;color:#fff;opacity:0;transform:scale(.5);transition:all .2s} .rdlb-flow .av-row .av-cell:active{background:var(--cream)} .rdlb-flow .av-cell.is-on{background:var(--red-tint)} .rdlb-flow .av-cell.is-on .av-cell-label{color:var(--ink)} .rdlb-flow .av-cell.is-on .av-cell-time{color:var(--red)} .rdlb-flow .av-cell.is-on .av-cell-tick{border-color:var(--red);background:var(--red)} .rdlb-flow .av-cell.is-on .av-cell-tick svg{opacity:1;transform:scale(1)} /* ========================================================================= */ /* ===== Eligibility ("About your driving") · v2.9.126 ===================== */ .rdlb-flow .elig-list{display:flex;flex-direction:column;gap:10px} .rdlb-flow .elig-row{ display:flex;align-items:center;justify-content:space-between;gap:14px; padding:13px 16px;background:#fff;border:1px solid var(--line,#E8EAF1); border-radius:14px;box-shadow:0 6px 16px -12px rgba(14,18,48,.12); } .rdlb-flow .elig-q-text{font:600 14.5px/1.3 'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink,#0E1230)} /* Segmented Yes/No control */ .rdlb-flow .elig-toggle{ display:inline-flex;flex:0 0 auto;padding:3px;gap:3px; background:var(--bg,#FAFAFB);border:1px solid var(--line,#E8EAF1);border-radius:11px; } .rdlb-flow .elig-opt{ appearance:none;border:0;cursor:pointer; min-width:52px;padding:8px 14px;border-radius:8px;background:transparent; font:700 13px/1 'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink-3,#8A91AB); transition:background .15s,color .15s,box-shadow .15s; } .rdlb-flow .elig-opt:hover{color:var(--ink-2,#4A5170)} .rdlb-flow .elig-opt.is-on{background:var(--red,#e55353);color:#fff;box-shadow:0 4px 10px -4px rgba(229,83,83,.5)} /* Three-state rows (provisional, theory): the labels are wider than a yes/no, so stack the question over a full-width 3-option segmented control. */ .rdlb-flow .elig-row-tri{flex-direction:column;align-items:stretch;gap:10px} .rdlb-flow .elig-row-tri .elig-q{margin:0} .rdlb-flow .elig-toggle-tri{display:flex;width:100%} .rdlb-flow .elig-toggle-tri .elig-opt{flex:1 1 0;min-width:0;text-align:center;padding:9px 8px;white-space:nowrap} /* Conditional practical-test details */ .rdlb-flow .elig-details{ overflow:hidden;max-height:0;opacity:0;margin-top:0; transition:max-height .3s ease,opacity .25s ease,margin-top .3s ease; } .rdlb-flow .elig-details.is-open{max-height:260px;opacity:1;margin-top:10px} .rdlb-flow .elig-details-inner{ display:flex;flex-direction:column;gap:12px; padding:16px;background:var(--cream,#F6F4EE); border:1px solid var(--line,#E8EAF1);border-radius:14px; } .rdlb-flow .elig-field{display:flex;flex-direction:column;gap:6px} .rdlb-flow .elig-label{font:700 11.5px/1 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3,#8A91AB)} .rdlb-flow .elig-input{ width:100%;box-sizing:border-box;height:48px;padding:0 14px; font:600 15px/1 'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink,#0E1230) !important; /* v2.9.127/129: the standard boxed field used across the flow. The fill/border are forced because a live theme rule on input[type=text] was leaving the box transparent; !important keeps it consistent with the other fields. The date/time trigger reuses this exact box so the two sit as a matched pair. */ background:#fff !important;border:1.5px solid var(--line,#E8EAF1) !important;border-radius:11px; -webkit-appearance:none;appearance:none;box-shadow:none; transition:border-color .15s; } .rdlb-flow .elig-input::placeholder{color:var(--ink-4,#C6CAD8) !important;font-weight:500} .rdlb-flow .elig-input:focus{outline:none;border-color:var(--red,#e55353) !important} /* The practical date/time trigger is a button styled as the boxed field above. */ .rdlb-flow .elig-dtp-trigger{ display:flex;align-items:center;justify-content:space-between;gap:10px; text-align:left;cursor:pointer; } .rdlb-flow .elig-dtp-trigger .rdlb-dtp-trigger-text{color:var(--ink,#0E1230);font-weight:600} .rdlb-flow .elig-dtp-trigger.is-placeholder .rdlb-dtp-trigger-text{color:var(--ink-4,#C6CAD8);font-weight:500} .rdlb-flow .elig-dtp-trigger .rdlb-dtp-trigger-caret{width:20px;height:20px;flex-shrink:0;color:var(--ink-3,#8A91AB)} /* Precise-time input inside the practical popover (mirrors the calendar's card). */ .rdlb-flow .rdlb-dtp-timewrap{padding:0 2px} .rdlb-flow .rdlb-dtp-timeinput{ width:100%;max-width:100%;min-width:0;box-sizing:border-box;-webkit-appearance:none;appearance:none;height:48px;padding:0 14px; font:700 16px/1 'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink,#0E1230); background:#fff;border:1.5px solid var(--line,#E8EAF1);border-radius:11px; } .rdlb-flow .rdlb-dtp-timeinput:focus{outline:none;border-color:var(--red,#e55353);box-shadow:0 0 0 3px var(--red-tint,rgba(229,83,83,.14))} /* ========================================================================= */ @media(min-width:1024px){ .rdlb-flow .screen[data-idx="4"] .av-grid{gap:8px} .rdlb-flow .screen[data-idx="4"] .av-row-head{display:grid !important;grid-template-columns:130px repeat(3,1fr);gap:10px;align-items:end;padding:0 4px 4px;background:transparent;border:0;box-shadow:none} .rdlb-flow .screen[data-idx="4"] .av-colhead{display:flex;flex-direction:column;gap:2px;align-items:center;text-align:center} .rdlb-flow .screen[data-idx="4"] .av-colhead-label{font:800 13px/1 'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink)} .rdlb-flow .screen[data-idx="4"] .av-colhead-time{font:600 11px/1 'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink-3)} .rdlb-flow .screen[data-idx="4"] .av-row{display:grid;grid-template-columns:130px repeat(3,1fr);gap:10px;align-items:center;padding:10px 12px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 6px 16px -12px rgba(14,18,48,.12);overflow:visible} .rdlb-flow .screen[data-idx="4"] .av-day{margin:0;grid-column:auto;padding:0} .rdlb-flow .screen[data-idx="4"] .av-day-full{display:none} .rdlb-flow .screen[data-idx="4"] .av-day-abbr{display:inline;font:800 14px/1 'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink)} .rdlb-flow .screen[data-idx="4"] .av-row .av-cell{justify-content:center;padding:11px 10px;border:1.5px solid var(--line);border-top:1.5px solid var(--line);border-radius:11px;background:var(--bg)} .rdlb-flow .screen[data-idx="4"] .av-row .av-cell + .av-cell{border-left:1.5px solid var(--line)} .rdlb-flow .screen[data-idx="4"] .av-row .av-cell.is-on{border-color:var(--red);background:var(--red-tint)} .rdlb-flow .screen[data-idx="4"] .av-cell-tick{position:static;margin:0} .rdlb-flow .screen[data-idx="4"] .av-row .av-cell .av-cell-text{display:none} .rdlb-flow .screen[data-idx="4"] .av-row .av-cell .av-cell-tick{width:22px;height:22px} /* show a check placeholder area even unticked so columns align cleanly */ .rdlb-flow .screen[data-idx="4"] .av-row .av-cell::before{content:attr(data-band);position:absolute;left:-9999px} } @media(min-width:1024px){ /* Availability screen (idx 4) is a light screen and reuses the contact-row + date-picker classes; apply the same light-theme colour overrides as the details screen so the date trigger and glyph are visible (v2.9.119). */ .rdlb-flow .screen[data-idx="4"] .cr-label{color:var(--ink-3) !important} .rdlb-flow .screen[data-idx="4"] .cr-glyph{background:var(--red-tint) !important;color:var(--red) !important;border-color:transparent !important} .rdlb-flow .screen[data-idx="4"] .rdlb-dtp-trigger{color:var(--ink) !important} .rdlb-flow .screen[data-idx="4"] .rdlb-dtp-trigger.is-placeholder .rdlb-dtp-trigger-text{color:var(--ink-3) !important} .rdlb-flow .screen[data-idx="4"] .contact-row{background:#fff !important;border-color:var(--line) !important} } @media(max-width:1023px){ /* v2.9.123: on MOBILE the When screen sits on the dark navy flow theme (NOT light - the earlier comment was wrong, which is why the date value rendered dark-on-dark and was unreadable). Pin the screen background to navy so the theme is deterministic (the inherited .stack bg differs sandbox vs live), then use light text. The preferred-first-lesson row mirrors the other dark screens: white label/value, light glyph; day cards stay white for contrast. */ .rdlb-flow .screen[data-idx="4"]{background:var(--navy) !important;color:#fff} .rdlb-flow .screen[data-idx="4"] .title{color:#fff !important} .rdlb-flow .screen[data-idx="4"] .subtitle{color:rgba(255,255,255,.72) !important} .rdlb-flow .screen[data-idx="4"] .cr-label{color:rgba(255,255,255,.62) !important} .rdlb-flow .screen[data-idx="4"] .contact-row{background:rgba(255,255,255,.06) !important;border-color:rgba(255,255,255,.16) !important} .rdlb-flow .screen[data-idx="4"] .cr-glyph{background:rgba(255,255,255,.10) !important;color:#fff !important;border-color:transparent !important} .rdlb-flow .screen[data-idx="4"] .rdlb-dtp-trigger{color:#fff !important} .rdlb-flow .screen[data-idx="4"] .rdlb-dtp-trigger .rdlb-dtp-trigger-text{color:#fff !important} .rdlb-flow .screen[data-idx="4"] .rdlb-dtp-trigger.is-placeholder .rdlb-dtp-trigger-text{color:rgba(255,255,255,.55) !important} .rdlb-flow .screen[data-idx="4"] .rdlb-dtp-trigger-caret{color:rgba(255,255,255,.6) !important} .rdlb-flow .screen[data-idx="4"] .av-section-label{color:rgba(255,255,255,.62) !important} .rdlb-flow .screen[data-idx="4"] .av-hint{color:rgba(255,255,255,.62) !important} .rdlb-flow .screen[data-idx="4"] .footer{background:linear-gradient(180deg,rgba(0,8,66,0) 0%, var(--navy) 32%) !important} } @media(min-width:1024px){ /* v2.9.122: align the When-screen footer/CTA with the content column. The content is capped at max-width:560px and auto-centred; the footer inherited max-width:none so the Continue button rendered wider than the fields above it and wider than the other screens' buttons. Match the content's cap and centring so the button lines up exactly. */ .rdlb-flow .screen[data-idx="4"] .footer{ max-width:560px !important; margin-left:auto !important; margin-right:auto !important; width:100% !important; align-self:center !important; } } @media(max-width:1023px){ /* v2.9.124: the enquiry takeover (#rdlbEnqStage) renders on the Confirm screen which is dark navy on mobile. Its text colours were tuned for the light desktop panel (dark grey), so the sub copy and the "Your address" label were dark-on-dark and unreadable. Lighten the on-navy text; the white summary cards and the select keep their own dark text on white. */ .rdlb-flow .screen[data-idx="5"] .rdlb-enq-sub{color:rgba(255,255,255,.72) !important} .rdlb-flow .screen[data-idx="5"] .rdlb-enq-title{color:#fff !important} .rdlb-flow .screen[data-idx="5"] .rdlb-enq-addr-label{color:rgba(255,255,255,.82) !important} .rdlb-flow .screen[data-idx="5"] .rdlb-enq-fineprint{color:rgba(255,255,255,.55) !important} .rdlb-flow .screen[data-idx="5"] .rdlb-enq-otp-sub, .rdlb-flow .screen[data-idx="5"] #rdlbEnqOtpSub{color:rgba(255,255,255,.72) !important} /* v2.9.127: the redesigned OTP card is light (cream); its reassurance line sits OUTSIDE the card on the navy bg, so lighten it there. The cells keep dark digits on white inside the card. */ .rdlb-flow .screen[data-idx="5"] .rdlb-enq-otp-reassure, .rdlb-flow .screen[data-idx="5"] .rdlb-enq-otp-reassure svg{color:rgba(255,255,255,.6) !important} } @media(min-width:1024px){ /* v2.9.166: the v2.9.125 rule that forced the rail to max-width:none + width: 100% + flex-wrap:nowrap on every screen was removed. It made the rail span the full .body box (so its left edge sat ~20px LEFT of the centred content column) AND, with nowrap, clipped the last pill ("Confirm") when six pills exceeded the column. The rail now inherits the per-screen content column width/centring (.body > * = 520px on 0-2, 560px on 3-5) and uses flex-wrap:wrap, with pills shrunk to fit all six on one line in that column; on a genuinely narrow viewport they wrap to a second row rather than clip. */ } @media(min-width:1024px) and (max-width:1366px){ /* v2.9.125: on narrower desktops the right content column is tight; shave the step-rail pills a little more so all six still fit on one line without clipping "Confirm". */ .rdlb-flow .rdlb-steprail{gap:4px} .rdlb-flow .rdlb-steprail-item{padding:5px 8px 5px 5px;font-size:11px;gap:4px} .rdlb-flow .rdlb-steprail-num{width:17px;height:17px;font-size:10px} } /* ═══════════════════════════════════════════════════════════════ v2.9.154 · Terms & Privacy consent block (rdlb-tnc-*) ─────────────────────────────────────────────────────────────── Required tickbox shown on screen 5 in BOTH flows: - Flow 2 (Stripe pay): pay screen is .is-dark (navy) — light text - Flow 3 (Enquiry): enquiry takeover swaps the screen to cream (set in the enquiry takeover block), so the same .rdlb-tnc must read on cream too. The block lives INSIDE .content, last item before the sticky footer on the pay screen. Tone: small, sober, evidence-grade. Not a "buy more" cue — it's a legal gate. Native checkbox styled with a custom box for a clean tick state, accent in red (the brand red, used elsewhere for primary CTAs). Two visual contexts: (a) .rdlb-flow .screen.is-dark .rdlb-tnc → light-on-navy (b) .rdlb-flow .screen[data-idx="5"]:not(.is-dark) .rdlb-tnc → dark-on-cream (the enquiry takeover removes is-dark) ═══════════════════════════════════════════════════════════════ */ .rdlb-flow .rdlb-tnc{ margin:18px 0 4px; padding:14px 16px; border-radius:14px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); transition:border-color .18s ease, background .18s ease; } .rdlb-flow .rdlb-tnc.is-error{ border-color:rgba(229,83,83,.85); background:rgba(229,83,83,.10); } .rdlb-flow .rdlb-tnc-row{ display:flex;align-items:flex-start;gap:12px; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; } .rdlb-flow .rdlb-tnc input[type="checkbox"]{ /* Hide the native input but keep it focusable/clickable through the label. The visible box (.rdlb-tnc-box) is what the user sees. */ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0; } .rdlb-flow .rdlb-tnc-box{ flex:0 0 22px;width:22px;height:22px;margin-top:1px; border-radius:6px; background:transparent; border:1.6px solid rgba(255,255,255,.45); display:inline-flex;align-items:center;justify-content:center; transition:background .15s ease, border-color .15s ease, transform .12s ease; } .rdlb-flow .rdlb-tnc-tick{ width:14px;height:14px;color:#fff;opacity:0;transform:scale(.6); transition:opacity .12s ease, transform .14s cubic-bezier(.32,1.10,.42,1); } .rdlb-flow .rdlb-tnc input[type="checkbox"]:checked + .rdlb-tnc-box{ background:var(--red); border-color:var(--red); } .rdlb-flow .rdlb-tnc input[type="checkbox"]:checked + .rdlb-tnc-box .rdlb-tnc-tick{ opacity:1;transform:scale(1); } .rdlb-flow .rdlb-tnc input[type="checkbox"]:focus-visible + .rdlb-tnc-box{ outline:2px solid #fff;outline-offset:2px; } .rdlb-flow .rdlb-tnc-text{ flex:1;min-width:0; font:500 13px/1.55 'Plus Jakarta Sans',-apple-system,system-ui,sans-serif; color:rgba(255,255,255,.82);letter-spacing:-.005em; } .rdlb-flow .rdlb-tnc-text a{ color:#fff;text-decoration:underline;text-underline-offset:2px; font-weight:600; } .rdlb-flow .rdlb-tnc-text a:hover{ text-decoration:none; } .rdlb-flow .rdlb-tnc-error{ margin:8px 0 0 34px; font:600 12.5px/1.4 'Plus Jakarta Sans',-apple-system,system-ui,sans-serif; color:#ffb4b4; } /* ─── Light-context (enquiry takeover removes .is-dark on screen 5) ─── */ .rdlb-flow .screen[data-idx="5"]:not(.is-dark) .rdlb-tnc{ background:#fff; border-color:var(--line); box-shadow:0 6px 16px -10px rgba(14,18,48,.10); } .rdlb-flow .screen[data-idx="5"]:not(.is-dark) .rdlb-tnc-text{ color:var(--ink-2); } .rdlb-flow .screen[data-idx="5"]:not(.is-dark) .rdlb-tnc-text a{ color:var(--red); } .rdlb-flow .screen[data-idx="5"]:not(.is-dark) .rdlb-tnc-box{ border-color:var(--ink-4); } .rdlb-flow .screen[data-idx="5"]:not(.is-dark) .rdlb-tnc input[type="checkbox"]:focus-visible + .rdlb-tnc-box{ outline-color:var(--navy); } .rdlb-flow .screen[data-idx="5"]:not(.is-dark) .rdlb-tnc.is-error{ border-color:var(--red); background:var(--red-tint); } .rdlb-flow .screen[data-idx="5"]:not(.is-dark) .rdlb-tnc-error{ color:var(--red-dark); } /* ─── Desktop pay-screen right column is a WHITE card (>=1024px) even while .is-dark is set. The .body has background:#fff !important. So on desktop we treat the consent block exactly like the light-context enquiry takeover (above), but scoped to >=1024px so mobile keeps the dark-glass look. */ @media (min-width:1024px) { .rdlb-flow .screen[data-idx="5"].is-dark .rdlb-tnc{ background:#fff; border-color:var(--line); box-shadow:0 6px 16px -10px rgba(14,18,48,.10); } .rdlb-flow .screen[data-idx="5"].is-dark .rdlb-tnc-text{ color:var(--ink-2); } .rdlb-flow .screen[data-idx="5"].is-dark .rdlb-tnc-text a{ color:var(--red); } .rdlb-flow .screen[data-idx="5"].is-dark .rdlb-tnc-box{ border-color:var(--ink-4); } .rdlb-flow .screen[data-idx="5"].is-dark .rdlb-tnc input[type="checkbox"]:focus-visible + .rdlb-tnc-box{ outline-color:var(--navy); } .rdlb-flow .screen[data-idx="5"].is-dark .rdlb-tnc.is-error{ border-color:var(--red); background:var(--red-tint); } .rdlb-flow .screen[data-idx="5"].is-dark .rdlb-tnc-error{ color:var(--red-dark); } } /* ─── Pay button disabled state (when consent not given) ─── */ .rdlb-flow .apple-pay.is-disabled, .rdlb-flow .rdlb-enq-btn.is-disabled{ opacity:.55;cursor:not-allowed; filter:saturate(.7); } /* v2.9.393: mobile-field helper hint (step 4 clarity). Brand greys/white only — NO green. Light on the dark details screen, dark grey once the row validates. */ .rdlb-flow .cr-hint{font:600 11.5px/1.4 'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink-3,#8A91AB);margin:7px 0 0;letter-spacing:0} .rdlb-flow .screen[data-idx="3"] .cr-hint{color:rgba(255,255,255,.5)} .rdlb-flow .screen[data-idx="3"] .contact-row.is-valid .cr-hint{color:var(--ink-3,#8A91AB)} /* v2.9.393: OTP resend link while the countdown is running (muted, not tappable). */ .rdlb-flow .rdlb-enq-link.is-counting{opacity:.55;text-decoration:none;cursor:default;pointer-events:none} /* ════════════════════════════════════════════════════════════════ v2.9.455 · EXISTING-ACCOUNT POPUP Shown on a successful step-4 when the API flags response.user_exist. Centred modal in the flow's pay-lightbox language (white panel, faded navy backdrop, red SVG badge). Built + mounted by enquiry.js into .rdlb-flow. Non-blocking: closing it any way still completes the enquiry. ════════════════════════════════════════════════════════════════ */ .rdlb-flow .rdlb-acct-pop{position:fixed;inset:0;z-index:2147483646;display:flex;align-items:center;justify-content:center;padding:20px} .rdlb-flow .rdlb-acct-pop-backdrop{position:absolute;inset:0;background:rgba(10,14,44,.55);backdrop-filter:blur(8px) saturate(120%);-webkit-backdrop-filter:blur(8px) saturate(120%);animation:rdlbAcctFade .2s ease} .rdlb-flow .rdlb-acct-pop-panel{position:relative;width:100%;max-width:444px;background:#fff;border:1px solid rgba(15,25,50,.05);border-radius:26px;box-shadow:0 2px 8px rgba(14,18,48,.05),0 40px 80px -20px rgba(14,18,48,.34);padding:34px 30px 26px;color:#0f1733;text-align:center;animation:rdlbAcctPop .32s cubic-bezier(.34,1.45,.5,1)} .rdlb-flow .rdlb-acct-pop-panel:focus{outline:none} .rdlb-flow .rdlb-acct-pop-close{position:absolute;top:15px;right:15px;width:34px;height:34px;border-radius:50%;background:#f3f4f8;border:1px solid rgba(15,25,50,.06);color:#5b647e;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s,color .15s} .rdlb-flow .rdlb-acct-pop-close:hover{background:#e9ebf2;color:#0f1733} .rdlb-flow .rdlb-acct-pop-close svg{width:16px;height:16px} .rdlb-flow .rdlb-acct-pop-badge{width:62px;height:62px;border-radius:18px;margin:2px auto 18px;background:linear-gradient(140deg,#fff0ef,#ffe2e0);display:flex;align-items:center;justify-content:center;color:var(--red,#e55353)} .rdlb-flow .rdlb-acct-pop-badge svg{width:30px;height:30px} .rdlb-flow .rdlb-acct-pop-title{font:800 22px/1.2 'Plus Jakarta Sans',system-ui,sans-serif;letter-spacing:-.02em;margin:0 0 10px;color:#0f1733} .rdlb-flow .rdlb-acct-pop-text{font:500 15px/1.5 'Plus Jakarta Sans',system-ui,sans-serif;color:#4A5170;margin:0 0 22px} .rdlb-flow .rdlb-acct-pop-text strong{color:#0f1733;font-weight:700} .rdlb-flow .rdlb-acct-pop-actions{display:flex;flex-direction:column;gap:10px} .rdlb-flow .rdlb-acct-pop-btn{display:flex;align-items:center;justify-content:center;gap:8px;border-radius:14px;padding:15px 20px;font:700 16px/1 'Plus Jakarta Sans',system-ui,sans-serif;cursor:pointer;transition:background .15s,transform .15s,box-shadow .15s,border-color .15s;text-decoration:none} .rdlb-flow .rdlb-acct-pop-btn svg{width:18px;height:18px} .rdlb-flow .rdlb-acct-pop-btn-primary{background:var(--red,#e55353);color:#fff;border:0} .rdlb-flow .rdlb-acct-pop-btn-primary:hover{background:var(--red-dark,#c43d3d);transform:translateY(-1px);box-shadow:0 14px 30px -10px rgba(229,83,83,.55)} .rdlb-flow .rdlb-acct-pop-btn-ghost{background:#fff;color:#0f1733;border:1.5px solid rgba(15,25,50,.14)} .rdlb-flow .rdlb-acct-pop-btn-ghost:hover{background:#f6f7fb;border-color:rgba(15,25,50,.26)} .rdlb-flow .rdlb-acct-pop-foot{font:500 12.5px/1.4 'Plus Jakarta Sans',system-ui,sans-serif;color:var(--ink-3,#8A91AB);margin:16px 0 0} @keyframes rdlbAcctFade{from{opacity:0}to{opacity:1}} @keyframes rdlbAcctPop{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}} /* ════════════════════════════════════════════════════════════════ v2.9.476 · Availability match-strength meter + quick chips (enquiry flow). Brand palette only: navy + red + neutrals, NO green. The meter charges up in red and rewards reaching "Best match"; it is sticky so feedback stays visible while the learner scrolls the grid. Injected by enquiry.js into the av-section. ════════════════════════════════════════════════════════════════ */ /* Match-strength meter — a compact summary bar docked in the footer, directly above the Continue button (always visible at the decision point; not floating). */ .rdlb-flow .rdlb-av-match{margin:0 0 12px;padding:11px 14px 12px;background:#fff;border:1px solid var(--line);border-radius:13px;box-shadow:0 6px 16px -12px rgba(14,18,48,.12);transition:box-shadow .3s} .rdlb-flow .rdlb-av-match.is-best{box-shadow:0 0 0 1px rgba(229,83,83,.30),0 10px 28px -12px rgba(229,83,83,.45)} /* Slim layout: state word + progress track sit on ONE row; the nudge is a single line below. Compact so the footer stays light on small phones. */ .rdlb-flow .rdlb-av-match-top{display:flex;align-items:center;gap:11px;margin:0} .rdlb-flow .rdlb-av-match-state{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;font:800 13px/1 'Plus Jakarta Sans';color:var(--ink-3);white-space:nowrap} .rdlb-flow .rdlb-av-match.is-on .rdlb-av-match-state{color:var(--red)} .rdlb-flow .rdlb-av-match-state svg{width:15px;height:15px} .rdlb-flow .rdlb-av-match-badge{flex:0 0 auto;display:none;align-items:center;gap:5px;padding:3px 9px 3px 7px;border-radius:999px;background:var(--red);color:#fff;font:800 12px/1 'Plus Jakarta Sans'} .rdlb-flow .rdlb-av-match-badge svg{width:13px;height:13px} .rdlb-flow .rdlb-av-match.is-best .rdlb-av-match-badge{display:inline-flex} .rdlb-flow .rdlb-av-match.is-best .rdlb-av-match-state{display:none} .rdlb-flow .rdlb-av-match-track{flex:1 1 auto;position:relative;height:10px;border-radius:999px;background:var(--line);overflow:visible} .rdlb-flow .rdlb-av-match-fillwrap{position:absolute;inset:0;border-radius:999px;overflow:hidden} .rdlb-flow .rdlb-av-match-fill{height:100%;width:0;border-radius:999px;background:linear-gradient(90deg,#ff7a7a 0%,#e55353 70%,#d83a3a 100%);box-shadow:0 0 12px rgba(229,83,83,.55);transition:width .5s cubic-bezier(.34,1.56,.64,1),box-shadow .3s} .rdlb-flow .rdlb-av-match.is-best .rdlb-av-match-fill{box-shadow:0 0 16px rgba(229,83,83,.85)} .rdlb-flow .rdlb-av-match-spark{position:absolute;top:50%;left:0;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px var(--red),0 0 10px rgba(229,83,83,.8);transform:translate(-50%,-50%) scale(0);transition:left .5s cubic-bezier(.34,1.56,.64,1),transform .3s;opacity:0} .rdlb-flow .rdlb-av-match.is-on .rdlb-av-match-spark{transform:translate(-50%,-50%) scale(1);opacity:1} .rdlb-flow .rdlb-av-match-target{position:absolute;top:-3px;left:75%;height:16px;width:2px;border-radius:2px;background:var(--ink-4)} .rdlb-flow .rdlb-av-match.is-best .rdlb-av-match-target{display:none} .rdlb-flow .rdlb-av-match-msg{margin:8px 0 0;font:600 12px/1.45 'Plus Jakarta Sans';color:var(--ink-2)} .rdlb-flow .rdlb-av-match-msg strong{font-weight:800;color:var(--ink)} @keyframes rdlbAvBump{0%{transform:scale(1)}40%{transform:scale(1.015)}100%{transform:scale(1)}} .rdlb-flow .rdlb-av-match.bump{animation:rdlbAvBump .5s cubic-bezier(.34,1.56,.64,1)} .rdlb-flow .rdlb-av-quick{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 20px} .rdlb-flow .rdlb-av-chip{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;border:1.5px solid var(--line);border-radius:999px;background:#fff;font:700 12.5px/1 'Plus Jakarta Sans';color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s,transform .12s} .rdlb-flow .rdlb-av-chip:hover{border-color:var(--ink-4)} .rdlb-flow .rdlb-av-chip:active{transform:scale(.97)} .rdlb-flow .rdlb-av-chip svg{width:15px;height:15px;color:var(--red);flex:0 0 auto} .rdlb-flow .rdlb-av-chip.is-primary{border-color:var(--red);background:var(--red-tint)} @media(max-width:1023px){ /* In the navy footer on mobile: SOLID elevated navy bar (no glass bleed), sitting above the Continue button. The footer is already pinned, so no sticky needed. */ .rdlb-flow .rdlb-av-match{padding:11px 13px 12px;background:#141c51;border-color:rgba(255,255,255,.18);box-shadow:0 -2px 14px -8px rgba(0,0,0,.5);backdrop-filter:none;-webkit-backdrop-filter:none} .rdlb-flow .rdlb-av-match-state{color:rgba(255,255,255,.7)} .rdlb-flow .rdlb-av-match.is-on .rdlb-av-match-state{color:#ff9d9d} .rdlb-flow .rdlb-av-match-track{background:rgba(255,255,255,.14)} .rdlb-flow .rdlb-av-match-target{background:rgba(255,255,255,.45)} .rdlb-flow .rdlb-av-match-msg{color:rgba(255,255,255,.85)} .rdlb-flow .rdlb-av-match-msg strong{color:#fff} .rdlb-flow .rdlb-av-chip{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff} .rdlb-flow .rdlb-av-chip svg{color:#ff9d9d} .rdlb-flow .rdlb-av-chip.is-primary{border-color:#e55353;background:rgba(229,83,83,.22)} } /* Soft-confirm sheet (body-level overlay; literal brand hex since the flow's CSS tokens are scoped to .rdlb-flow). Bottom sheet on mobile, centred card on desktop. Shown only when the learner Continues below the 6-time minimum. */ .rdlb-av-confirm{position:fixed;inset:0;z-index:2147483600;display:flex;align-items:flex-end;justify-content:center;padding:0;background:rgba(4,8,30,.55);animation:rdlbAvFade .2s ease;font-family:'Plus Jakarta Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif} @media(min-width:560px){.rdlb-av-confirm{align-items:center;padding:20px}} .rdlb-av-confirm-card{width:100%;max-width:440px;box-sizing:border-box;background:#fff;border-radius:20px 20px 0 0;padding:24px 22px calc(22px + env(safe-area-inset-bottom));box-shadow:0 -10px 40px -12px rgba(0,0,0,.4);animation:rdlbAvSheet .28s cubic-bezier(.32,1.1,.42,1)} @media(min-width:560px){.rdlb-av-confirm-card{border-radius:20px;padding:26px 24px;box-shadow:0 24px 60px -16px rgba(0,0,0,.45);animation:rdlbAvPop .28s cubic-bezier(.32,1.1,.42,1)}} .rdlb-av-confirm-title{font:800 19px/1.25 'Plus Jakarta Sans',inherit;color:#0E1230;margin:0 0 8px;letter-spacing:-.01em} .rdlb-av-confirm-sub{font:600 14px/1.5 'Plus Jakarta Sans',inherit;color:#4A5170;margin:0 0 20px} .rdlb-av-confirm-primary{display:block;width:100%;min-height:52px;border:0;border-radius:14px;background:#e55353;color:#fff;font:800 15px/1 'Plus Jakarta Sans',inherit;cursor:pointer;box-shadow:0 10px 24px -10px rgba(229,83,83,.7)} .rdlb-av-confirm-primary:hover{background:#d83a3a} .rdlb-av-confirm-secondary{display:block;width:100%;min-height:48px;margin:10px 0 0;border:0;background:transparent;color:#4A5170;font:700 14px/1 'Plus Jakarta Sans',inherit;cursor:pointer} .rdlb-av-confirm-secondary:hover{color:#0E1230} @keyframes rdlbAvFade{from{opacity:0}to{opacity:1}} @keyframes rdlbAvSheet{from{transform:translateY(100%)}to{transform:none}} @keyframes rdlbAvPop{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}} /* === 2.9.485: Recent-passes carousel (Gearbox) + money-protection wallet (Hours). Additive, scoped. === */ @keyframes rdPassScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} .rdlb-flow .rd-passtrack{animation:rdPassScroll 32s linear infinite !important} .rdlb-flow .rd-passrail:hover .rd-passtrack{animation-play-state:paused !important} .rdlb-flow .rd-passtitle{color:rgba(255,255,255,.72)} @media (min-width:1024px){.rdlb-flow .rd-passtitle{color:var(--ink-2,#4A5170)}} @media (prefers-reduced-motion:reduce){.rdlb-flow .rd-passtrack{animation:none !important}} .rdlb-flow .rd-wallet-banner{transition:opacity .15s ease} .rdlb-flow .rd-wallet-banner:hover{opacity:.82} .rdlb-flow .rd-wallet-h{color:#fff} .rdlb-flow .rd-wallet-s{color:rgba(255,255,255,.62)} @media (min-width:1024px){.rdlb-flow .rd-wallet-h{color:var(--ink,#0E1230)}.rdlb-flow .rd-wallet-s{color:var(--ink-2,#4A5170)}} .rdlb-flow .rd-wallet-lb.is-open{display:flex !important} /* === 2.9.486: Done-screen payment-protection card + app badge, Done layout polish, mobile topbar lift. Additive, scoped. === */ /* Mobile: lift the back/progress row in-line with the close X (right padding clears the X). */ @media (max-width:1023px){ .rdlb-flow .topbar{ padding:18px 80px 0 24px; } } /* 2.9.487: free vertical room on mobile (real iPhones are ~730-760px usable, not the mock's 974px stage) so the Hours 'money is protected' banner clears the Continue button instead of sitting flush/cut. Trims the topbar->heading gap, pulling content up. */ @media (max-width:1023px){ .rdlb-flow .body{ padding-top:12px !important; } } /* Done screen has no step to show — hide its top bar. */ .rdlb-flow .screen-done .topbar{ display:none !important; } /* Done: hide the confirmed stamp (mobile keeps the space; desktop removes it). */ @media (max-width:1023px){ .rdlb-flow .screen-done .done-stamp{ visibility:hidden !important; } } @media (min-width:1024px){ .rdlb-flow .screen-done .done-stamp{ display:none !important; } } /* Payment-protection card: green glassy tint + green shield icon. */ .rdlb-flow .screen-done .done-summary.done-pay{ background:rgba(16,185,129,.13) !important; border-color:rgba(16,185,129,.34) !important; } .rdlb-flow .screen-done .done-summary.done-pay .done-summary-icon{ background:rgba(16,185,129,.22) !important; border-color:rgba(16,185,129,.40) !important; color:#6EE7B7 !important; } /* Even card rhythm on ALL viewports. The base CSS bottom-pins .done-anticipate + .done-cta-wrap (margin-top:auto) for the old 3-card layout; with the 4th card that springs a gap. Cancel it for an even 14px rhythm (matches the design on mobile + desktop). */ .rdlb-flow .screen-done .done-summary{ margin-top:0 !important; margin-bottom:14px !important; } .rdlb-flow .screen[data-idx="6"] .done-anticipate{ margin-top:0 !important; margin-bottom:14px !important; } .rdlb-flow .screen-done .done-cta-wrap{ margin-top:14px !important; } /* Done (desktop): uniform card fonts. */ @media (min-width:1024px){ .rdlb-flow .screen-done .done-summary-title,.rdlb-flow .screen-done .done-anticipate-title,.rdlb-flow .screen-done .done-support-title{ font:800 16px/1.25 'Plus Jakarta Sans' !important; letter-spacing:-.015em !important; } .rdlb-flow .screen-done .done-summary-detail,.rdlb-flow .screen-done .done-anticipate-detail,.rdlb-flow .screen-done .done-support-detail{ font:500 13px/1.45 'Plus Jakarta Sans' !important; color:rgba(255,255,255,.72) !important; } } /* ═══════════════ 2.9.489 — flow visibility fixes ═══════════════ Root cause: tall content on a real iPhone clips whatever sits last (recent-passes photos, the money-protected USP, the Done CTA), and the rail used a fixed 46px top instead of the safe-area inset. Additive only. iOS scroll/clipping verified at iPhone CSS widths in Chromium; final feel pending real-device confirm (sandbox can't run WebKit). */ /* Rail — respect the notch / Dynamic Island. */ .rdlb-flow .topbar{ padding-top:max(46px, calc(env(safe-area-inset-top, 0px) + 14px)) !important; } /* Recent-passes carousel — don't crop faces; give the strip room to clear the CTA. */ .rdlb-flow .rd-passtrack img{ object-position:center 20% !important; } .rdlb-flow .rd-passrail{ padding-bottom:10px !important; } /* Every scroller gets bottom clearance so the last element never hides behind a pinned CTA. */ .rdlb-flow .screen:not([data-idx="5"]) > .body > .content{ padding-bottom:16px !important; } /* Money-protected USP — bounded, always-visible trust card pinned above the CTA. */ .rdlb-flow .rd-wallet-card{ width:100%; box-sizing:border-box; display:flex; align-items:center; gap:12px; text-align:left; margin:0 0 12px; padding:12px 13px; cursor:pointer; border:1px solid rgba(229,83,83,.34); border-radius:16px; background:linear-gradient(135deg, rgba(229,83,83,.17), rgba(229,83,83,.05)); box-shadow:0 8px 22px -12px rgba(229,83,83,.55); -webkit-tap-highlight-color:transparent; } .rdlb-flow .rd-wallet-card:active{ transform:scale(.992); } .rdlb-flow .rd-wallet-card .rwc-badge{ flex:0 0 auto; width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:rgba(229,83,83,.22); box-shadow:inset 0 0 0 1px rgba(229,83,83,.42); } .rdlb-flow .rd-wallet-card .rwc-badge svg{ width:21px; height:21px; } .rdlb-flow .rd-wallet-card .rwc-h{ display:block; font:800 14.5px/1.15 'Plus Jakarta Sans',sans-serif; letter-spacing:-.01em; color:#fff; } .rdlb-flow .rd-wallet-card .rwc-s{ display:block; margin-top:2px; font:500 12px/1.4 'Plus Jakarta Sans',sans-serif; color:rgba(255,255,255,.74); } .rdlb-flow .rd-wallet-card .rwc-chev{ flex:0 0 auto; color:rgba(255,255,255,.55); } .rdlb-flow .screen:not(.is-dark):not([data-idx="0"]) .rd-wallet-card .rwc-h{ color:var(--ink); } .rdlb-flow .screen:not(.is-dark):not([data-idx="0"]) .rd-wallet-card .rwc-s{ color:var(--ink-2); } /* Done screen — make the body a real scroller with clearance so the download CTA is always reachable. */ .rdlb-flow .screen-done .done-body{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch; padding-bottom:max(26px, env(safe-area-inset-bottom)) !important; } /* ═══════════════ end 2.9.489 ═══════════════ */ /* 2.9.490 — close (X) aligned to the topbar row. It was position:fixed top:16px, floating ABOVE the back/progress/step rail on mobile (safe-area no-op in a Safari tab). Pull it down to sit on the same row as the back button. iOS feel pending device. */ .rdlb-flow.rdlb-fullscreen .rdlb-fs-close{ top:max(43px, calc(env(safe-area-inset-top, 0px) + 11px)) !important; right:20px !important; } /* 2.9.491 — flow fixes verified live on iPhone-emulated Chrome (DOM-measured; the booking page never reaches "idle" so screenshots aren't possible — values confirmed by computed style). (1) USP "Your money is protected" rendered navy-on-navy: the 2.9.489 :not(.is-dark) fallback darkened it on the Hours screen (renders dark but isn't class-marked is-dark). Force white. (2) Rail sat too low (topbar padding-top 46px) — raised to ~14px (safe-area aware) + close-X raised + aligned to the same row (measured: topbar top 46 -> 12, close-X 43 -> 11). (3) Promo-code form title was navy-on-navy on the dark Pay screen (visible when expanded) — lighten. */ .rdlb-flow .topbar{ padding-top:max(14px, env(safe-area-inset-top, 0px)) !important; } .rdlb-flow.rdlb-fullscreen .rdlb-fs-close{ top:max(11px, env(safe-area-inset-top, 0px)) !important; right:18px !important; } /* 2.9.526 — wallet card contrast is BREAKPOINT-DEPENDENT and MUST have separate rules per device (Kevin, 30 Jun). The card's Hours screen is DARK navy on mobile (.rdlb-flow .harness{background: var(--navy)}) and LIGHT cream on desktop (@media min-width:1024px -> .rdlb-flow{background: var(--cream)}). A single rule broke it twice: 2.9.491 forced white (broke desktop light); 2.9.525 forced navy (broke mobile dark). FIX: white by default = correct on the mobile navy screen AND on the genuinely .is-dark Pay screen; navy ONLY at >=1024 on the light cream screen. Never one rule for both breakpoints. */ .rdlb-flow .rd-wallet-card .rwc-h{ color:#fff !important; } .rdlb-flow .rd-wallet-card .rwc-s{ color:rgba(255,255,255,.80) !important; } .rdlb-flow .rd-wallet-card .rwc-chev{ color:rgba(255,255,255,.6) !important; } @media(min-width:1024px){ .rdlb-flow .screen:not(.is-dark) .rd-wallet-card .rwc-h{ color:var(--ink,#0E1230) !important; } .rdlb-flow .screen:not(.is-dark) .rd-wallet-card .rwc-s{ color:var(--ink-2,#4A5170) !important; } .rdlb-flow .screen:not(.is-dark) .rd-wallet-card .rwc-chev{ color:rgba(14,18,48,.5) !important; } .rdlb-flow .screen:not(.is-dark) .rd-wallet-card .rwc-badge svg{ stroke:#e55353 !important; } } /* 2.9.526 — Kevin: the enquiry flow shows ONLY the free-type note field. Hide the quick-tag chips DECLARATIVELY whenever the enquiry takeover marks the flow (enquiry.js adds .rdlb-enq-active on .rdlb-flow once currentIsEnquiry() is confirmed). CSS so it never depends on a JS dispatch that booking.js's internal goTo can bypass (the reason the 2.9.525 onEnterScreen(3) hide never fired). Payment-routed flows never get the marker, so their Details chips are untouched. */ .rdlb-flow.rdlb-enq-active #notesChips{ display:none !important; } .rdlb-flow .screen.is-dark .rdlb-promo-form-title{ color:#fff !important; } .rdlb-flow .screen.is-dark .rdlb-promo-form-title svg{ stroke:#fff !important; } /* 2.9.492 — Done screen: top was overloaded (28px body pad + a 64px stamp badge + the 48px headline wrapping to 3 lines = 155px), pushing the download CTA below the real iPhone-Safari fold (~660px visible). Trim the TOP only (cards untouched): smaller body pad, hide the confirm stamp, headline to ~2 lines. Verified live: CTA bottom 761 -> 594. */ .rdlb-flow .screen-done .done-body{ padding-top:10px !important; } .rdlb-flow .screen-done .done-stamp{ display:none !important; } .rdlb-flow .screen-done .done-name{ font-size:32px !important; line-height:1.1 !important; margin-bottom:10px !important; } /* ═══════════════ 2.9.545 — S3 Hours: price-only rows + money-card clearance + Book-with-confidence popup ═══════════════ */ /* (1) PRICE-ONLY ROWS (Kevin, 9 Jul: "remove '£X per hour' from each package. Keep it as the price only.") The rate line is removed from the template and from rdlbPaintHours(); this display:none is the stale-cache belt-and-braces (WP Rocket/LiteSpeed can pair a cached template with fresh CSS — a surviving .hr-rate would show BAKED demo text, never a live price, so it must be hidden). */ .rdlb-flow .screen[data-idx="2"] .hr-rate{display:none !important} /* Signed-off layout for the shorter row: price centred between the hours figure and the radio. */ .rdlb-flow .screen[data-idx="2"] .hr-mid{text-align:center} .rdlb-flow .screen[data-idx="2"] .hr-price{font-size:18px} /* (2) MONEY-CARD CLEARANCE (RCA, proven by reproduction at 390x660 with this CSS + the real markup: .content children overflow:visible under the opaque footer gradient, and the footer paints over the 2hr price — walletCoversLastPrice was TRUE at first paint). Two levers, mobile only: the footer hugs the list tighter (Kevin: "reduce the padding above the 'your money is protected'"), and the list gets bottom clearance so the last package can ALWAYS scroll fully clear of the footer on viewports where the list still cannot fit. Desktop measured clear already — untouched. */ @media(max-width:1023px){ .rdlb-flow .screen[data-idx="2"] .footer{padding-top:6px !important} .rdlb-flow .screen[data-idx="2"] .rd-wallet-card{margin-bottom:10px} .rdlb-flow .screen[data-idx="2"] .heading{margin-bottom:14px} .rdlb-flow .screen[data-idx="2"] .hours-list{padding-bottom:12px} } /* (3) BOOK-WITH-CONFIDENCE POPUP — opens on a package tap (markup + wiring in booking-flow.html). Bottom sheet under 1024px, centred modal at >=1024px. Navy/red/PJS, SVG ticks, no green. */ .rdlb-flow .rdlb-reassure{position:fixed;inset:0;z-index:2147483602;display:none} .rdlb-flow .rdlb-reassure.is-open{display:block} .rdlb-flow .rdlb-reassure-scrim{position:absolute;inset:0;background:rgba(4,8,30,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)} .rdlb-flow .rdlb-reassure-panel{position:absolute;left:0;right:0;bottom:0;box-sizing:border-box;background:#fff;border-radius:26px 26px 0 0;padding:10px 20px calc(22px + env(safe-area-inset-bottom,0px));box-shadow:0 -24px 60px -20px rgba(4,8,30,.55)} .rdlb-flow .rdlb-reassure-grab{width:38px;height:5px;border-radius:999px;background:#E2E4EE;margin:2px auto 8px} .rdlb-flow .rdlb-reassure-head{display:flex;align-items:center;gap:12px} .rdlb-flow .rdlb-reassure-badge{flex:0 0 auto;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;color:var(--red,#e55353);background:linear-gradient(150deg,rgba(229,83,83,.20),rgba(229,83,83,.10));border:1.5px solid rgba(229,83,83,.45)} .rdlb-flow .rdlb-reassure-headtxt{flex:1;min-width:0} .rdlb-flow .rdlb-reassure-title{display:block;font:800 19px/1.15 'Plus Jakarta Sans',sans-serif;letter-spacing:-.02em;color:var(--ink,#0E1230)} .rdlb-flow .rdlb-reassure-sub{display:block;margin-top:2px;font:600 12.5px/1.35 'Plus Jakarta Sans',sans-serif;color:var(--ink-3,#8A91AB)} .rdlb-flow .rdlb-reassure-list{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:15px} .rdlb-flow .rdlb-reassure-list li{display:flex;gap:12px;align-items:flex-start;margin:0} .rdlb-flow .rdlb-reassure-list li::marker{content:""} .rdlb-flow .rdlb-reassure-check{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:rgba(229,83,83,.12);display:grid;place-items:center;margin-top:1px;color:var(--red,#e55353)} .rdlb-flow .rdlb-reassure-check svg{width:14px;height:14px;stroke-width:3} .rdlb-flow .rdlb-reassure-txt strong{display:block;font:800 14px/1.3 'Plus Jakarta Sans',sans-serif;letter-spacing:-.01em;color:var(--ink,#0E1230)} .rdlb-flow .rdlb-reassure-txt span{display:block;margin-top:2px;font:500 12.5px/1.42 'Plus Jakarta Sans',sans-serif;color:var(--ink-2,#4A5170)} .rdlb-flow .rdlb-reassure-got{width:100%;margin-top:22px;padding:16px;background:var(--red,#e55353);color:#fff;border:0;border-radius:15px;font:800 15.5px/1 'Plus Jakarta Sans',sans-serif;letter-spacing:-.01em;cursor:pointer;box-shadow:0 12px 32px -8px rgba(229,83,83,.40)} .rdlb-flow .rdlb-reassure-got:hover{background:var(--red-dark,#c43d3d)} .rdlb-flow .rdlb-reassure-got:active{transform:scale(.99)} @media(max-width:1023px){ @keyframes rdlbReassureUp{from{transform:translateY(26px);opacity:.5}to{transform:none;opacity:1}} .rdlb-flow .rdlb-reassure.is-open .rdlb-reassure-panel{animation:rdlbReassureUp .32s cubic-bezier(.32,1.12,.4,1)} } @media(min-width:1024px){ .rdlb-flow .rdlb-reassure.is-open{display:flex;align-items:center;justify-content:center;padding:24px} .rdlb-flow .rdlb-reassure-panel{position:relative;left:auto;right:auto;bottom:auto;width:100%;max-width:440px;border-radius:22px;padding:26px 26px 24px} .rdlb-flow .rdlb-reassure-grab{display:none} @keyframes rdlbReassureIn{from{transform:translateY(14px) scale(.97);opacity:0}to{transform:none;opacity:1}} .rdlb-flow .rdlb-reassure.is-open .rdlb-reassure-panel{animation:rdlbReassureIn .28s cubic-bezier(.32,1.12,.4,1)} } @media (prefers-reduced-motion:reduce){ .rdlb-flow .rdlb-reassure.is-open .rdlb-reassure-panel{animation:none} } /* ═══════════════ end 2.9.545 ═══════════════ */ /* v2.9.828: address filter on the mobile Confirm screen, which is dark navy below 1024px (see the v2.9.124 block). Scoped here so the desktop panel keeps its own colours. */ @media(max-width:1023px){ .rdlb-flow .screen[data-idx="5"] .rdlb-enq-addr-count{color:rgba(255,255,255,.82) !important} .rdlb-flow .screen[data-idx="5"] .rdlb-enq-addr-all{color:#fff !important} .rdlb-flow .screen[data-idx="5"] .rdlb-enq-addr-all:focus-visible{outline-color:#fff !important} /* The retry and "enter it manually" links were #5b6075 on the navy ground: 3.0:1, dark on dark. */ .rdlb-flow .screen[data-idx="5"] .rdlb-enq-address .rdlb-enq-link, .rdlb-flow .screen[data-idx="5"] .rdlb-enq-address .rdlb-enq-link:hover{color:rgba(255,255,255,.82) !important} } /* v2.9.828: desktop only. "Edit postcode" in the brand red measured 3.7:1 on the white panel at 13px; the deeper red measures 6.5:1. Mobile keeps the brand red, which measures 5.1:1 on navy. */ @media(min-width:1024px){ .rdlb-flow .screen[data-idx="5"] .rdlb-enq-addr-edit{color:#b3261e !important} }