/* ========================================================================== TransferRide checkout Ported from the "TransferRide Checkout - Stops & Payment" design project. Production adaptations vs. the design file: - Every selector is nested under .tr-co (put on by public/pages/transfer-ride-checkout-page.php) so nothing leaks into Elementor or the admin portal. The vehicle row is the exception: it is scoped to .tr-vehicle instead, because the day-trip booking box renders the same component outside the checkout. - Tokens are prefixed --trc-* and remapped onto the site brand blue (#046095) instead of the design's #1470a8, matching the earlier tr-search.css port. - The Manrope declaration is dropped; the page inherits the site font and keeps only the design's size / weight / tracking scale. - --trc-muted is #5a7383, not the design's #6b8493. The design value is 3.93:1 on white and fails AA, and it is used for 11-12px labels throughout. #5a7383 is 4.98:1 in the same blue-grey family. - The button reset uses real specificity (a doubled root class) so it beats the Elementor kit without !important. Icons are sized by their container rather than by a blanket svg rule, which would outrank tr-search.css. - Inputs need `!important` on border/outline because transfer-ride-core-public.css:184 sets them that way; specificity alone cannot win against !important. - Motion is the design's motion-lab, retimed onto the same six tokens and collapsed to a cut under prefers-reduced-motion. ========================================================================== */ .tr-co.tr-co { /* brand-remapped from the design's blue ramp, same ladder as tr-search */ --trc-blue-900: #072131; --trc-blue-800: #0b5179; --trc-blue-700: #046095; --trc-blue-600: #0879ba; --trc-blue-050: #eaf3f9; /* the confirmation accent stays the design's green - it is not brand blue and reads as "added" rather than "selected" */ --trc-green: #8cc63f; --trc-green-ink: #4a7510; --trc-green-on: #173a02; --trc-green-soft: rgba(140, 198, 63, .16); --trc-ink: #0f2733; --trc-ink-2: #3a5464; --trc-muted: #5a7383; --trc-line: #dde5ea; --trc-line-2: #eef2f5; --trc-surface: #fff; --trc-bg: #f2f5f7; --trc-error: #c92a2a; --trc-r-lg: 16px; --trc-r-md: 12px; --trc-r-sm: 10px; --trc-sh-1: 0 1px 2px rgba(11, 39, 51, .05), 0 8px 22px rgba(11, 39, 51, .06); --trc-sh-2: 0 10px 30px rgba(11, 39, 51, .1); /* the six motion tokens - a seventh means the interaction needs rethinking */ --trc-e: cubic-bezier(.2, .7, .25, 1); --trc-e-in: cubic-bezier(.5, 0, .9, .4); --trc-e-spring: cubic-bezier(.34, 1.56, .64, 1); --trc-t-micro: .16s; --trc-t-el: .3s; background: var(--trc-bg); color: var(--trc-ink); -webkit-font-smoothing: antialiased; } .tr-co, .tr-co *, .tr-co *::before, .tr-co *::after { box-sizing: border-box; } /* ---------- element resets ---------- The Elementor kit styles every button (0,1,1) with its own padding, radius and background. `.tr-co.tr-co :where(button)` scores (0,2,0), which beats it while keeping the element part weightless so the component rules below (also (0,2,0), declared later) still win. Do not collapse the doubled class - the kit would take over every button on the page. Deliberately NOT reset here: `svg`. The theme's global `svg { width:100%; height:100% }` makes an icon fill its container, which is what the sized .icon spans below want. A blanket override would also outrank tr-search.css's own svg rules (this file loads after it) and break the embedded search widget, so icons are sized by their container instead. The embedded search widget is excluded for that same reason. tr-search.css carries its own identical `.tr-search.tr-search :where(button)` reset and then styles each control at (0,2,0), relying on being declared later in that file to win the tie. This rule is (0,2,0) too but lives in a stylesheet that loads after tr-search.css, so without the exclusion it wins every one of those ties and flattens the widget's buttons — .ac-i loses its padding and radius (visible as the recent-search rows collapsing on checkout), and the calendar days, time options, pax steppers and close buttons go with it. The :not() argument is wrapped in :where() so it stays weightless: :not() otherwise takes the specificity of its most specific argument, and a bare `:not(.tr-search *)` would push this to (0,3,0) and start outranking the checkout's own component rules below. */ .tr-co.tr-co :where(button):not(:where(.tr-search *)) { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; margin: 0; padding: 0; border-radius: 0; box-shadow: none; line-height: normal; letter-spacing: normal; text-transform: none; appearance: none; -webkit-appearance: none; } .tr-co.tr-co :where(h1, h2, h3, p) { margin: 0; } .tr-co :focus-visible { outline: 2px solid var(--trc-blue-600); outline-offset: 2px; border-radius: 4px; } /* ---------- header ---------- */ .tr-co .checkout-header { background: var(--trc-surface); border-bottom: 1px solid var(--trc-line); padding: 0 24px; position: relative; z-index: 5; } .tr-co .checkout-header .tr-container { min-height: 74px; gap: 28px; } .tr-co .logo-wrap { flex: 0 0 auto; } .tr-co .logo-wrap img { display: block; height: 38px; width: auto; } /* Grows so the rail between the steps has space to fill; capped and auto-centred so it does not sprawl on a wide container. */ .tr-co .step-wrap { gap: 14px; margin: 0 auto; padding: 0; flex: 1 1 auto; max-width: 620px; } .tr-co .step-wrap .step { flex-direction: row; gap: 9px; font-size: 13.5px; font-weight: 700; color: var(--trc-muted); transition: color var(--trc-t-micro) var(--trc-e); } .tr-co .step-wrap .step-number { width: 25px; height: 25px; min-width: 25px; border-radius: 50%; border: 1.5px solid var(--trc-line); background: var(--trc-surface); color: inherit; display: grid; place-items: center; font-size: 12px; font-weight: 800; margin: 0; transition: background var(--trc-t-micro) var(--trc-e), border-color var(--trc-t-micro) var(--trc-e), color var(--trc-t-micro) var(--trc-e); } .tr-co .step-wrap .step-text { font-size: inherit; font-weight: inherit; white-space: nowrap; } /* changeStep() sets is-current / is-done; `active` is kept for the legacy rule in transfer-ride-core-public.css and is harmless here. */ .tr-co .step-wrap .step.is-current { color: var(--trc-blue-800); } .tr-co .step-wrap .step.is-current .step-number { background: var(--trc-blue-700); border-color: var(--trc-blue-700); color: #fff; } .tr-co .step-wrap .step.is-done { color: var(--trc-green-ink); } .tr-co .step-wrap .step.is-done .step-number { background: var(--trc-green); border-color: var(--trc-green); color: #fff; font-size: 0; } .tr-co .step-wrap .step.is-done .step-number::after { content: ""; width: 11px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translate(1px, -1px); } /* Fills the gap between the two steps rather than sitting at the design's fixed 64px - the steps stay their natural width and the rail takes the rest. */ .tr-co .tr-co__rail { width: auto; min-width: 40px; height: 2px; border-radius: 2px; background: var(--trc-line); position: relative; overflow: hidden; flex: 1 1 auto; } .tr-co .tr-co__rail::after { content: ""; position: absolute; inset: 0; background: var(--trc-green); transform: scaleX(0); transform-origin: left; transition: transform .38s var(--trc-e); } .tr-co .step-wrap .step.is-done + .tr-co__rail::after { transform: scaleX(1); } /* ---------- layout ---------- */ .tr-co .tr-checkout-wrap { padding: 30px 24px 140px; } .tr-co .checkout-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; } .tr-co .checkout-wrap > div, .tr-co .checkout-wrap > div.trip-details { width: auto; min-width: 0; } .tr-co .checkout-wrap > .step-data { display: flex; flex-direction: column; gap: 14px; } .tr-co .trip-details { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 20px; } .tr-co .trip-details > div { width: auto; margin: 0; } /* ---------- shared type + surfaces ---------- */ /* Colour is declared, not inherited: the Elementor kit sets one on h1 directly (`.elementor-kit-N h1 { color: var(--e-global-color-primary) }`), so inheriting from .tr-co would never reach it. Same reason every heading rule in this file states its own size, weight and line-height rather than assuming the cascade. font-family is deliberately left to the kit — that is the site font, which is what this port inherits by design. */ .tr-co .tr-co__h1 { font-size: 27px; font-weight: 800; letter-spacing: -.022em; line-height: 1.2; color: var(--trc-ink); } .tr-co .tr-co__sub { font-size: 14px; line-height: 1.5; color: var(--trc-muted); margin-top: 7px; max-width: 62ch; } .tr-co .tr-co__listhead { margin-bottom: 4px; } .tr-co .tr-co__ct { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--trc-muted); margin-bottom: 12px; } /* ---------- stop cards ---------- `.stop-data .single-stop-wrap` (0,2,0) and `.checkout-wrap .stop-data .single-stop-wrap` (0,3,0) in transfer-ride-core-public.css fix the old card at 350px, so these rules carry matching weight rather than relying on load order. */ /* .stop-data is a plain block and the card rule below zeroes the 10px margin transfer-ride-core-public.css:1158 gives each card, so the list needs a gap of its own — it is a single flex item of .step-data, not a participant in that column's gap. 14px between cards, and 4px + 14px under .tr-co__listhead, which is the design's 18px. */ .tr-co .checkout-wrap .stop-data { display: flex; flex-direction: column; gap: 14px; } .tr-co .checkout-wrap .stop-data .single-stop-wrap { display: grid; grid-template-columns: 236px minmax(0, 1fr); height: auto; min-height: 0; margin: 0; background: var(--trc-surface); border: 1px solid var(--trc-line); border-radius: var(--trc-r-lg); overflow: hidden; box-shadow: var(--trc-sh-1); position: relative; transition: border-color var(--trc-t-el) var(--trc-e), box-shadow var(--trc-t-el) var(--trc-e); } .tr-co .checkout-wrap .stop-data .single-stop-wrap.is-added { border-color: var(--trc-green); box-shadow: 0 0 0 2px rgba(140, 198, 63, .3), var(--trc-sh-1); } .tr-co .tr-co__stop-ph { position: relative; min-height: 190px; background: var(--trc-line-2); overflow: hidden; margin: 0; height: 100%; } .tr-co .stop-data .single-stop-wrap .tr-co__stop-ph img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; } /* The photo no longer carries body copy, which is the point of the redesign - the only thing over it is the added badge. */ .tr-co .tr-co__stop-tag { position: absolute; left: 11px; top: 11px; display: inline-flex; align-items: center; gap: 6px; background: rgba(9, 34, 48, .78); color: #fff; font-size: 11px; font-weight: 800; padding: 5px 9px; border-radius: 7px; opacity: 0; transform: scale(.9); pointer-events: none; transition: opacity var(--trc-t-micro) var(--trc-e), transform var(--trc-t-micro) var(--trc-e); } .tr-co .tr-co__stop.is-added .tr-co__stop-tag { opacity: 1; transform: none; transition-timing-function: var(--trc-e-spring); transition-duration: .34s; } /* CSS ticks rather than an inline SVG: the source icon carries hardcoded ids, which would repeat once per stop card. */ .tr-co .tr-co__tick, .tr-co .remove-stop .icon::after { content: ""; display: block; width: 9px; height: 5px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); } .tr-co .tr-co__stop-tag .tr-co__tick { margin-top: -2px; } .tr-co .tr-co__stop-c { padding: 16px 18px; display: flex; flex-direction: column; min-width: 0; } .tr-co .tr-co__stop-r1 { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; } .tr-co .tr-co__stop-copy .tr-co__stop-r1 h3 { font-size: 17.5px; font-weight: 800; letter-spacing: -.015em; color: var(--trc-ink); margin: 0; } .tr-co .tr-co__stop-region { font-size: 12px; font-weight: 700; color: var(--trc-muted); } .tr-co .tr-co__stop-desc p { font-size: 13.5px; line-height: 1.5; color: var(--trc-ink-2); margin-top: 7px; max-width: 56ch; } .tr-co .tr-co__more { font-size: 13px; font-weight: 700; color: var(--trc-blue-700); margin-top: 7px; display: inline-block; text-decoration: none; } .tr-co .tr-co__more:hover { color: var(--trc-blue-800); text-decoration: underline; } .tr-co .tr-co__stop-foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--trc-line-2); } /* duration stepper */ .tr-co .tr-co__dur { display: flex; align-items: center; border: 1px solid var(--trc-line); border-radius: var(--trc-r-sm); overflow: hidden; background: var(--trc-surface); flex: 0 0 auto; } /* the legacy stepper is a blue pill with white round buttons (transfer-ride-core-public.css:1162-1199); these carry the weight to undo it */ .tr-co .tr-co__dur .sub-time, .tr-co .tr-co__dur .add-time { width: 34px; height: 38px; padding: 0; border-radius: 0; display: grid; place-items: center; background: var(--trc-surface); color: var(--trc-blue-700); transition: background var(--trc-t-micro) var(--trc-e); } .tr-co .tr-co__dur .sub-time:hover, .tr-co .tr-co__dur .add-time:hover { background: var(--trc-blue-050); } .tr-co .tr-co__dur .sub-time svg, .tr-co .tr-co__dur .add-time svg { width: 13px; height: 13px; } .tr-co .tr-co__dur .sub-time svg path, .tr-co .tr-co__dur .add-time svg path { stroke: currentColor; fill: currentColor; } .tr-co .tr-co__dur .selected-time { min-width: 84px; text-align: center; font-size: 13px; font-weight: 800; color: var(--trc-ink); border-left: 1px solid var(--trc-line); border-right: 1px solid var(--trc-line); height: 38px; line-height: 38px; padding: 0 6px; user-select: none; } /* The line that used to be missing: what the stop costs in time, next to what it costs in money. */ .tr-co .tr-co__adds { font-size: 12px; font-weight: 600; color: var(--trc-muted); } .tr-co .tr-co__adds b { font-weight: 800; color: var(--trc-ink-2); } /* price + action cluster; .add-stop is the hook the routes JS toggles. It no longer carries .tr-button - it is a container now, not a button. */ .tr-co .tr-co__pricewrap { margin-left: auto; display: flex; align-items: center; gap: 14px; background: none; border: 0; border-radius: 0; padding: 0; height: auto; width: auto; color: inherit; overflow: visible; text-align: right; } .tr-co .tr-co__price { display: block; text-align: right; } .tr-co .add-stop.tr-co__pricewrap .price { display: block; font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--trc-ink); background: none; padding: 0; margin: 0; } .tr-co .tr-co__price-l { display: block; font-size: 11px; font-weight: 700; color: var(--trc-muted); letter-spacing: .02em; margin-top: 2px; } .tr-co .add-trip-stop { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border-radius: var(--trc-r-sm); background: var(--trc-green); color: var(--trc-green-on); font-size: 13.5px; font-weight: 800; white-space: nowrap; transition: background var(--trc-t-micro) var(--trc-e), transform var(--trc-t-micro) var(--trc-e); } .tr-co .add-trip-stop:hover { background: #7db72f; } .tr-co .add-trip-stop:active { transform: scale(.98); } /* the legacy .remove-stop is a full-cover absolutely positioned overlay held at opacity:0/visibility:hidden (transfer-ride-core-public.css:1272-1289); every one of those properties has to be undone, not just display */ .tr-co .remove-stop { display: none; align-items: center; gap: 10px; position: static; top: auto; left: auto; width: auto; height: auto; opacity: 1; visibility: visible; background: none; padding: 0; border-radius: 0; } .tr-co .add-stop.added .add-trip-stop { display: none; } .tr-co .add-stop.added .remove-stop { display: flex; opacity: 1; visibility: visible; } .tr-co .remove-stop .icon { width: 17px; height: 17px; min-width: 17px; border-radius: 50%; background: var(--trc-green); display: grid; place-items: center; flex: 0 0 17px; } .tr-co .add-stop.added .remove-stop .icon { animation: trc-pop .42s var(--trc-e-spring) .06s both; } .tr-co .tr-co__inc-l { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 800; color: var(--trc-green-ink); } .tr-co .remove-stop .time { display: none; } .tr-co .tr-co__rm { font-size: 12.5px; font-weight: 700; color: var(--trc-muted); text-decoration: underline; text-underline-offset: 2px; } .tr-co .tr-co__rm:hover { color: var(--trc-ink-2); } /* the whole added cluster reads as one chip */ .tr-co .add-stop.added .remove-stop { background: var(--trc-green-soft); padding: 7px 11px; border-radius: 9px; } /* ---------- sidebar: trip summary ---------- */ /* No overflow:hidden here. The date and passenger cells are the tr-search `edit` variant, and its calendar/passenger popovers are absolutely positioned children - clipping the card clips them. Nothing inside paints a background of its own, so the rounded corners read correctly without it. */ .tr-co .trip-details-content { border: 1.5px solid var(--trc-blue-700); border-radius: var(--trc-r-lg); background: var(--trc-surface); overflow: visible; box-shadow: var(--trc-sh-1); padding: 0; margin: 0; transition: box-shadow var(--trc-t-el) var(--trc-e), transform var(--trc-t-el) var(--trc-e); } .tr-co .basic-trip-data { padding: 0; margin: 0; border-bottom: 1px solid var(--trc-line-2); } /* the tr-search `edit` variant supplies the date + passenger cells; these rules only make it read as the design's two-cell grid. (0,3,0) so they beat tr-search.css's own (0,2,0) component rules. */ .tr-co .tr-search.tr-search[data-variant="edit"] .tr-fields { gap: 0; } .tr-co .tr-search.tr-search[data-variant="edit"] .tr-field { padding: 13px 14px; border-radius: 0; } .tr-co .tr-search.tr-search[data-variant="edit"] .tr-field + .tr-field { border-left: 1px solid var(--trc-line-2); } .tr-co .tr-search.tr-search[data-variant="edit"] .tr-lab { font-size: 10.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--trc-muted); } .tr-co .tr-search.tr-search[data-variant="edit"] .tr-val { font-size: 13.5px; font-weight: 800; color: var(--trc-ink); } /* ---------- sidebar: itinerary rail ---------- */ .tr-co .destinations { padding: 14px 16px; display: grid; gap: 2px; } .tr-co .destination-origin, .tr-co .destination-end, .tr-co .single-destination-stop { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 5px 0; position: relative; } /* the marker image the routes JS injects is redundant next to the rail dot */ .tr-co .destinations .icon { width: 16px; height: 16px; min-width: 16px; display: grid; place-items: center; padding-top: 3px; position: relative; } .tr-co .destinations .icon img, .tr-co .destinations .icon svg { display: none; } .tr-co .destinations .icon::after { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--trc-blue-700); box-shadow: 0 0 0 3px rgba(4, 96, 149, .16); } .tr-co .destination-end .icon::after { background: var(--trc-blue-900); box-shadow: 0 0 0 3px rgba(7, 33, 49, .14); } .tr-co .single-destination-stop .icon::after { width: 9px; height: 9px; background: var(--trc-green); box-shadow: 0 0 0 3px rgba(140, 198, 63, .22); } .tr-co .destinations .name { font-size: 13.5px; font-weight: 700; color: var(--trc-ink); line-height: 1.35; min-width: 0; } .tr-co .destinations .time { font-size: 12.5px; font-weight: 800; color: var(--trc-ink-2); white-space: nowrap; padding-top: 1px; margin: 0; background: none; } /* connector between legs */ .tr-co .destination-origin::after, .tr-co .single-destination-stop::after { content: ""; position: absolute; left: 7px; bottom: -3px; width: 2px; height: 10px; border-radius: 2px; background: var(--trc-line); } .tr-co .destination-stops { gap: 0; } .tr-co .destination-stops:empty { display: none; } /* ---------- sidebar: meta chips ---------- */ .tr-co .other-trip-details { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 0 0; margin-top: 10px; border-top: 1px solid var(--trc-line-2); } .tr-co .other-trip-details > span { display: inline-flex; align-items: center; gap: 6px; background: var(--trc-blue-050); color: var(--trc-blue-800); border-radius: 8px; padding: 6px 9px; font-size: 11.5px; font-weight: 800; border: 0; margin: 0; } .tr-co .other-trip-details .icon { width: 13px; height: 13px; min-width: 13px; display: grid; place-items: center; } .tr-co .other-trip-details .icon svg { width: 13px; height: 13px; fill: currentColor; } .tr-co .other-trip-details .name { font-weight: 700; } .tr-co .other-trip-details .value { font-weight: 800; } .tr-co .other-trip-details .value:empty::after { content: "—"; opacity: .5; } /* ---------- sidebar cards ---------- */ .tr-co .ride-selection, .tr-co .additional-checkout-info { background: var(--trc-surface); border: 1px solid var(--trc-line); border-radius: var(--trc-r-lg); box-shadow: var(--trc-sh-1); padding: 18px 20px; } .tr-co .ride-selection h2 { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--trc-muted); margin: 0 0 12px; } .tr-co .car-selection-wrap { padding: 0; margin: 0; } .tr-co .ride-features { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .tr-co .ride-features .single-feature { background: var(--trc-blue-050); color: var(--trc-blue-800); border-radius: 8px; padding: 6px 9px; font-size: 11.5px; font-weight: 800; margin: 0; } .tr-co #map-trip-data { height: 190px; border-radius: var(--trc-r-lg); border: 1px solid var(--trc-line); box-shadow: var(--trc-sh-1); overflow: hidden; /* transfer-ride-core-public.css:905 puts z-index:997 on this container. Once .trip-details is display:contents (guided) or position:static (the <=900 fallback) nothing between here and the root holds that in, and Leaflet makes the container positioned - so the map painted over the sticky top bar (z 6) and the page header (z 5). It only ever needs to sit below both; Leaflet's own panes stack inside this box either way. */ z-index: 0; } /* ---------- vehicle rows (shared with the day-trip booking box) ---------- Not scoped to .tr-co: the day-trip booking box renders the same component outside the checkout. Selectors are doubled (.tr-vehicle.tr-vehicle) and descendants written long, because the legacy rules at transfer-ride-core-public.css:923-974 reach (0,3,0) — load order alone is not enough to beat them. Tokens are literal here; --trc-* is declared on .tr-co, which day-trip pages do not have. */ .tr-vehicle.tr-vehicle { display: grid; grid-template-columns: 18px 62px minmax(0, 1fr) auto; gap: 11px; align-items: center; border: 1px solid #dde5ea; border-radius: 12px; padding: 11px 13px; margin: 0; background: #fff; cursor: pointer; transition: border-color .16s cubic-bezier(.2, .7, .25, 1), background .16s cubic-bezier(.2, .7, .25, 1), box-shadow .16s cubic-bezier(.2, .7, .25, 1); } .tr-vehicle.tr-vehicle + .tr-vehicle.tr-vehicle { margin-top: 8px; } .tr-vehicle.tr-vehicle:hover { border-color: #b9cddb; /* the legacy hover paints #efefef across the row */ background: #f7fafb; } .tr-vehicle.tr-vehicle.selected { border-color: #046095; border-width: 1px; background: #eaf3f9; box-shadow: 0 0 0 1.5px #046095; } /* radio and photo span both rows so they stay centred against the whole card */ .tr-vehicle.tr-vehicle .tr-vehicle__radio { grid-row: 1 / -1; align-self: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #bccbd4; background: #fff; transition: border-width .16s cubic-bezier(.2, .7, .25, 1), border-color .16s cubic-bezier(.2, .7, .25, 1); } .tr-vehicle.tr-vehicle.selected .tr-vehicle__radio { border-color: #046095; border-width: 5px; } .tr-vehicle.tr-vehicle .single-car-image { grid-row: 1 / -1; align-self: center; width: 62px; max-width: 62px; height: 38px; border-radius: 8px; overflow: hidden; background: #eef2f5; margin: 0; } .tr-vehicle.tr-vehicle .car-image, .tr-vehicle.tr-vehicle .car-image img { display: block; width: 100%; height: 100%; object-fit: contain; } /* the four grid children are radio, photo, name and price - .single-car-data is a pass-through so name and price sit in the row rather than nesting */ .tr-vehicle.tr-vehicle .single-car-data { display: contents; } .tr-vehicle.tr-vehicle .single-car-data .name { grid-column: 3; display: block; min-width: 0; font-size: 13.5px; font-weight: 800; color: #0f2733; } .tr-vehicle.tr-vehicle .baisc-car-data { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .tr-vehicle.tr-vehicle .car-name { font-size: 13.5px; font-weight: 800; color: #0f2733; min-width: 0; } .tr-vehicle.tr-vehicle .car-class-desc { display: block; font-size: 11px; font-weight: 600; font-style: normal; color: #5a7383; margin-top: 2px; padding-bottom: 0; } /* The "Selected" badge is gone — the radio, tint and ring say it already. Kept as a hide rule rather than deleted because a cached page or a third-party render could still emit one. */ .tr-vehicle.tr-vehicle .single-car-data .selected-car { display: none; } /* Capacity as words, not three ambiguous glyphs. Own full-width row under the name and price - three items never fit beside a price in a 400px sidebar, and wrapping them inside the name column left a dangling separator. */ .tr-vehicle.tr-vehicle .tr-vehicle__caps { grid-column: 3 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 14px; margin: 2px 0 0; } .tr-vehicle.tr-vehicle .tr-vehicle__caps > span { font-size: 11px; font-weight: 700; color: #3a5464; display: inline-flex; align-items: center; gap: 3px; position: relative; } /* separator belongs to the item that follows it, so it wraps with that item instead of being left behind at the end of the previous line */ .tr-vehicle.tr-vehicle .tr-vehicle__caps > span + span::before { content: "\00b7"; position: absolute; left: -8px; color: #b9cddb; } .tr-vehicle.tr-vehicle .tr-vehicle__caps .icon { display: none; } .tr-vehicle.tr-vehicle .single-car-data .price { grid-column: 4; align-self: start; text-align: right; font-size: 14px; font-weight: 800; color: #0f2733; white-space: nowrap; background: none; padding: 0; margin: 0; } .tr-vehicle.tr-vehicle .tr-vehicle__delta { display: block; font-size: 10.5px; font-weight: 700; color: #5a7383; margin-top: 2px; } .tr-vehicle__delta:empty { display: none; } /* ---------- step 2: cards + sections ---------- */ .tr-co .checkout-payment { display: flex; flex-direction: column; gap: 14px; } /* No overflow:hidden — these cards host the phone picker menu and the pick-up/drop-off tr-search widget, whose panels are absolutely positioned children and get clipped by it. Same reason as .trip-details-content above. Rule of thumb for this file: only clip a box whose children are decoration (a photo, a shimmer, a progress fill), never one that hosts a widget. */ .tr-co .checkout-payment .tr-card { background: var(--trc-surface); border: 1px solid var(--trc-line); border-radius: var(--trc-r-lg); box-shadow: var(--trc-sh-1); margin: 0; overflow: visible; } .tr-co .tr-card .tr-content { padding: 18px 20px; } .tr-co .tr-card .tr-header, .tr-co .tr-card .tr-body, .tr-co .tr-card .tr-footer { border: 0; padding: 0; } .tr-co .tr-co__sechead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .tr-co .tr-co__no { width: 24px; height: 24px; min-width: 24px; border-radius: 50%; background: var(--trc-blue-050); color: var(--trc-blue-800); font-size: 12px; font-weight: 800; display: grid; place-items: center; } .tr-co .tr-card .tr-header h3 { font-size: 16.5px; font-weight: 800; letter-spacing: -.012em; color: var(--trc-ink); margin: 0; padding: 0; } .tr-co .tr-co__opt { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--trc-muted); text-align: right; } .tr-co .tr-co__cardfoot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--trc-line-2); } /* ---------- step 2: fields ---------- */ .tr-co .grid.grid-1-1 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .tr-co .tr-input { margin: 0; display: flex; flex-direction: column; gap: 6px; position: relative; } /* persistent labels - the design's core form fix. The floating-label geometry from transfer-ride-core-public.css:1302 is undone here; the `active` class the routes JS still toggles simply has nothing left to move. */ .tr-co .tr-input label, .tr-co .tr-input.inline-input label, .tr-co .tr-input.inline-input.active label { position: static; transform: none; top: auto; left: auto; pointer-events: auto; display: block; margin: 0; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--trc-ink-2); transition: none; } .tr-co .tr-input label em { font-style: normal; color: var(--trc-muted); letter-spacing: 0; text-transform: none; font-weight: 600; } /* !important is unavoidable: transfer-ride-core-public.css:184 sets `.tr-input input { border: ... !important; outline: 0 !important }`. */ .tr-co .tr-input input[type="text"]:not(.pp-search-input), .tr-co .tr-input input[type="email"], .tr-co .tr-input input[type="tel"], .tr-co .tr-input textarea { height: 44px; width: 100%; border: 1.5px solid var(--trc-line) !important; border-radius: var(--trc-r-sm); background: var(--trc-surface); padding: 0 13px; /* 16px, not the design's 14px: iOS Safari zooms the viewport on focus for any control under 16px and does not zoom back out on blur, which on the guided flow leaves every screen after the first one scaled and scrolling sideways. The one place a phone gets to overrule the type scale. */ font-size: 16px; font-weight: 600; color: var(--trc-ink); transition: border-color var(--trc-t-micro) var(--trc-e), box-shadow var(--trc-t-micro) var(--trc-e); } @media (min-width: 901px) { .tr-co .tr-input input[type="text"]:not(.pp-search-input), .tr-co .tr-input input[type="email"], .tr-co .tr-input input[type="tel"], .tr-co .tr-input textarea { font-size: 14px; } } .tr-co .tr-input textarea { height: 96px; padding: 12px 13px; font-weight: 500; line-height: 1.45; resize: vertical; font-family: inherit; } .tr-co .tr-input input:focus, .tr-co .tr-input textarea:focus { border-color: var(--trc-blue-600) !important; box-shadow: 0 0 0 3px rgba(8, 121, 186, .16); outline: 0 !important; } .tr-co .tr-co__hint { font-size: 11.5px; color: var(--trc-muted); font-weight: 600; line-height: 1.4; } .tr-co .tr-input .error { display: block; font-size: 11.5px; font-weight: 700; color: var(--trc-error); } .tr-co .tr-input.has-error input, .tr-co .tr-input:has(.error) input { border-color: var(--trc-error) !important; } /* phone: the country selector and the number share one baseline */ .tr-co .tr-input.phone-picker .pp-joined { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; align-items: center; border: 0; background: none; padding: 0; height: auto; } .tr-co .tr-input.phone-picker .pp-country { height: 44px; border: 1.5px solid var(--trc-line); border-radius: var(--trc-r-sm); background: var(--trc-surface); display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 11px; font-size: 14px; font-weight: 600; color: var(--trc-ink); transition: border-color var(--trc-t-micro) var(--trc-e); } .tr-co .tr-input.phone-picker .pp-country:hover { border-color: #b9cddb; } .tr-co .tr-input.phone-picker .pp-joined-sep { display: none; } .tr-co .tr-input.phone-picker .pp-caret { width: 10px; height: 6px; flex: 0 0 10px; } /* checkbox as the design's .check row */ .tr-co .tr-input.radio-input.tr-co__check { flex-direction: row; align-items: center; gap: 10px; margin: 0; } .tr-co .tr-input.radio-input.tr-co__check input { width: 19px; height: 19px; min-width: 19px; margin: 0; accent-color: var(--trc-blue-700); cursor: pointer; } .tr-co .tr-input.radio-input.tr-co__check label { font-size: 13px; font-weight: 600; color: var(--trc-ink-2); line-height: 1.45; text-transform: none; letter-spacing: 0; cursor: pointer; } .tr-co .other-passanger-actions { margin: 0 0 0 auto; padding: 0; border: 0; } .tr-co .add-other-contact, .tr-co .remove-other-contact { width: fit-content; height: 38px; padding: 0 15px; border: 1.5px solid var(--trc-line); border-radius: var(--trc-r-sm); background: var(--trc-surface); color: var(--trc-ink-2); font-size: 13px; font-weight: 800; line-height: 35px; text-align: center; transition: border-color var(--trc-t-micro) var(--trc-e), color var(--trc-t-micro) var(--trc-e); } .tr-co .add-other-contact:hover, .tr-co .remove-other-contact:hover { border-color: var(--trc-blue-700); color: var(--trc-blue-800); } /* ---------- step 2: special requirements switch ---------- */ .tr-co .tr-co__togrow { display: flex; align-items: center; gap: 14px; } /* `.special-informations p` (0,1,1) sets 24px/52px line-height for the old orange heading; matched here at (0,3,1) rather than relying on load order */ .tr-co .special-informations .tr-co__togrow p { font-size: 12.5px; color: var(--trc-muted); font-weight: 600; line-height: 1.45; margin: 0; max-width: 62ch; } /* out-specifies `.special-informations .icon` (0,2,0), which sizes the old plus glyph at 24px and adds a right margin */ .tr-co .special-informations .tr-co__sw { width: 44px; height: 26px; min-width: 44px; border-radius: 14px; background: #cdd9e0; position: relative; margin: 0 0 0 auto; flex: 0 0 44px; stroke: none; transition: background var(--trc-t-micro) var(--trc-e); } .tr-co .special-informations .tr-co__sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(11, 39, 51, .28); transition: transform .22s var(--trc-e); } .tr-co .special-informations .tr-co__sw[aria-checked="true"] { background: var(--trc-blue-700); } .tr-co .special-informations .tr-co__sw[aria-checked="true"]::after { transform: translateX(18px); } .tr-co .special-informations .animate-height.active { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--trc-line-2); } /* ---------- step 2: payment ---------- */ .tr-co .tr-card.payment .tr-body { display: grid; gap: 10px; } /* grid rather than a flex row so the reassurance note can take a full-width row inside the option it belongs to; the radio input itself is positioned out of flow, so it is not one of the tracks */ .tr-co .tr-input.radio-input.tr-co__payopt { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 11px; border: 1.5px solid var(--trc-line); border-radius: var(--trc-r-md); padding: 13px 15px; margin: 0; background: var(--trc-surface); cursor: pointer; transition: border-color var(--trc-t-micro) var(--trc-e), box-shadow var(--trc-t-micro) var(--trc-e); } .tr-co .tr-co__payopt:has(input:checked) { border-color: var(--trc-blue-700); box-shadow: 0 0 0 1.5px var(--trc-blue-700); } /* the native input stays in the accessibility tree and keeps carrying the value getPaymentData() reads; the ring below is what is actually seen */ .tr-co .tr-co__payopt input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; } .tr-co .tr-co__radio { width: 18px; height: 18px; min-width: 18px; border-radius: 50%; border: 1.5px solid #bccbd4; background: #fff; transition: border-width var(--trc-t-micro) var(--trc-e), border-color var(--trc-t-micro) var(--trc-e); } .tr-co .tr-co__payopt:has(input:checked) .tr-co__radio { border-color: var(--trc-blue-700); border-width: 5px; } .tr-co .tr-co__payopt:focus-within { border-color: var(--trc-blue-600); box-shadow: 0 0 0 3px rgba(8, 121, 186, .16); } .tr-co .tr-co__payopt-nm { font-size: 13.5px; font-weight: 800; color: var(--trc-ink); text-transform: none; letter-spacing: 0; } .tr-co .tr-co__payopt-nm small { display: block; font-size: 11.5px; font-weight: 600; color: var(--trc-muted); margin-top: 3px; line-height: 1.4; } .tr-co .tr-co__brands { margin-left: auto; display: flex; gap: 6px; } .tr-co .tr-co__brands b { font-size: 9.5px; font-weight: 800; letter-spacing: .04em; color: var(--trc-ink-2); border: 1px solid var(--trc-line); border-radius: 5px; padding: 4px 6px; background: #fbfcfd; } .tr-co .tr-co__paynote { grid-column: 1 / -1; margin-top: 2px; padding: 12px 14px; border-radius: var(--trc-r-md); background: #f7fafb; border: 1px solid var(--trc-line-2); font-size: 12.5px; line-height: 1.45; color: var(--trc-ink-2); display: flex; gap: 10px; align-items: flex-start; } .tr-co .tr-co__lock { width: 22px; height: 22px; min-width: 22px; border-radius: 7px; background: var(--trc-blue-050); display: grid; place-items: center; font-size: 11px; color: var(--trc-blue-800); font-weight: 800; } .tr-co .tr-co__terms { font-size: 12px; font-weight: 600; color: var(--trc-muted); line-height: 1.45; } .tr-co .tr-co__terms a { color: var(--trc-blue-700); font-weight: 700; } /* ---------- overlays vs. the action bar ---------- The bar is fixed at z-index 998 (transfer-ride-core-public.css:1064). Two things open over it and both sat underneath: - The tr-search popovers. `.tr-search.is-open` sets z-index 60 on a position:relative root, which is a stacking context — so raising the panel alone does nothing, the root has to come up. On mobile the panel is a fixed bottom sheet landing exactly where the bar is, and its veil is a child, so lifting the root carries both. - The phone picker menu (z-index 50), which drops below its field and can reach the bar on a short viewport. */ .tr-co .tr-search.tr-search.is-open { z-index: 1000; } /* `position: sticky` on the sidebar creates a stacking context, so the rule above is trapped inside it and the bar still wins on desktop. Lift the whole column, but only while a panel is actually open. */ .tr-co .trip-details:has(.tr-search.is-open) { z-index: 1000; } .tr-co .tr-input.phone-picker .pp-menu { z-index: 1000; } /* ---------- action bar ---------- */ .tr-co .checkout-footer-wrap { background: var(--trc-surface); border-top: 1px solid var(--trc-line); box-shadow: 0 -8px 24px rgba(11, 39, 51, .06); /* The bar is position:fixed; bottom:0 (transfer-ride-core-public.css:1065), so on a notched iPhone the lower third of a 48px CTA sits inside the home-indicator swipe area. env() resolves to 0 everywhere else. */ padding: 0 0 env(safe-area-inset-bottom, 0px); } .tr-co .checkout-footer-prewrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; } .tr-co .checkout-footer-wrap .checkout-footer { width: 100%; gap: 18px; padding: 15px 0; align-items: center; /* transfer-ride-core-public.css:1073 still paints a white box with rounded top corners inside the wrap's own surface. Invisible only while both are white; it becomes a seam the moment --trc-surface moves. */ background: none; border-radius: 0; } .tr-co .tr-co__sum { display: flex; flex-direction: column; min-width: 0; } .tr-co .tr-co__sum-total { font-size: 19px; font-weight: 800; letter-spacing: -.015em; color: var(--trc-ink); display: block; transform-origin: left center; } .tr-co .tr-co__sum-total:empty::after { content: "—"; opacity: .4; } .tr-co .tr-co__sum-note { font-size: 11.5px; font-weight: 600; color: var(--trc-muted); margin-top: 2px; } .tr-co .tr-co__actions { margin-left: auto; gap: 12px; } .tr-co .tr-co__note { font-size: 12px; font-weight: 600; color: var(--trc-muted); } .tr-co .checkout-footer-wrap .tr-button { height: 48px; padding: 0 26px; border-radius: var(--trc-r-md); font-size: 15px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: auto; margin: 0; border: 0; transition: background var(--trc-t-micro) var(--trc-e), border-color var(--trc-t-micro) var(--trc-e), transform var(--trc-t-micro) var(--trc-e); } .tr-co .checkout-footer-wrap .next-step { background: var(--trc-blue-700); color: #fff; } .tr-co .checkout-footer-wrap .next-step:hover { background: var(--trc-blue-800); } .tr-co .checkout-footer-wrap .next-step:active { transform: scale(.99); } .tr-co .checkout-footer-wrap .next-step .price { color: inherit; font-weight: 800; background: none; padding: 0; margin: 0; } .tr-co .checkout-footer-wrap .prev-step { background: var(--trc-surface); border: 1.5px solid var(--trc-line); color: var(--trc-ink-2); } .tr-co .checkout-footer-wrap .prev-step:hover { border-color: #b9cddb; } .tr-co .checkout-footer-wrap .prev-step .icon { width: 14px; height: 14px; min-width: 14px; display: grid; place-items: center; } .tr-co .checkout-footer-wrap .prev-step .icon svg { width: 14px; height: 14px; fill: currentColor; } /* ---------- short-notice dialog ---------- The 48-hour warning, the only thing that comes between Book and the payment gateway. Built by $.fn.createModal like the change sheets further down, so the markup is the site's own modal and everything here re-dresses it. It has to be re-dressed: the base .tr-modal (transfer-ride-core-public.css: 1371) is the full-height 1200px box the map picker needs, and around two sentences that reads as a page takeover rather than a question. This is a 460px card in the same surface / radius / shadow as the checkout's own cards, and below the guided flow's breakpoint it becomes the same bottom sheet the change sheets use — a phone then only ever learns one dialog shape. Specificity note: the .tr-co root resets every button to nothing (see "element resets"), which is why the CTA below restates its own box. A bare .tr-button, which is what this dialog used to render, loses that cascade and arrives as unstyled text. */ .tr-co .short-notice-modal.tr-modal-wrap { padding: 24px 16px; } .tr-co .short-notice-modal .tr-modal-overlay { background: rgba(7, 33, 49, .55); } .tr-co .short-notice-modal .tr-modal { width: 100%; max-width: 460px; /* Content-sized, but never taller than the viewport: the copy is localized and a long translation has to scroll inside the card, not off it. */ height: auto; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); margin: auto; background: var(--trc-surface); border-radius: var(--trc-r-lg); box-shadow: var(--trc-sh-2); overflow: hidden; animation: trc-dialog-in .26s var(--trc-e); } @keyframes trc-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } } /* The dialog takes focus on open so its title is announced; it is a container, not a control, and the trap keeps focus inside, so it draws no ring. */ .tr-co .short-notice-modal .tr-modal:focus-visible { outline: none; } .tr-co .short-notice-modal .tr-modal-header { flex: 0 0 auto; align-items: flex-start; border-bottom: 0; padding: 18px 6px 0 20px; } .tr-co .short-notice-modal .tr-modal-header .title { padding: 0; font-size: 18px; font-weight: 800; letter-spacing: -.015em; line-height: 1.3; color: var(--trc-ink); } .tr-co .short-notice-modal .tr-modal-header .close-modal { width: 40px; height: 40px; min-width: 40px; /* Pulled up so the glyph centres on the title's cap height, not on the box below it. 40px is the tap target; the icon inside is 15px. */ margin: -9px 0 0; display: grid; place-items: center; border-radius: var(--trc-r-sm); color: var(--trc-ink-2); transition: background var(--trc-t-micro) var(--trc-e); } .tr-co .short-notice-modal .tr-modal-header .close-modal:hover { background: var(--trc-line-2); } .tr-co .short-notice-modal .tr-modal-header .close-modal svg { width: 15px; height: 15px; } /* close_icon.svg hard-codes fill="#0F0F0F", so the colour above only reaches it through currentColor. */ .tr-co .short-notice-modal .tr-modal-header .close-modal svg path { fill: currentColor; } .tr-co .short-notice-modal .tr-modal-content { flex: 1 1 auto; min-height: 0; /* the base rule sizes this to fill the map modal */ width: auto; height: auto; overflow-y: auto; overscroll-behavior: contain; padding: 14px 20px 2px; } /* The lead sentence — the fact that changes the booking — in the same tinted callout the confirmation page uses for its payment note. */ .tr-co .short-notice-modal .sn-hero { display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px; border-radius: var(--trc-r-md); background: var(--trc-blue-050); border: 1px solid #d7e7f2; } .tr-co .short-notice-modal .sn-ico { width: 28px; height: 28px; min-width: 28px; border-radius: 9px; background: var(--trc-surface); color: var(--trc-blue-700); display: grid; place-items: center; box-shadow: 0 1px 2px rgba(11, 39, 51, .06); } .tr-co .short-notice-modal .sn-ico svg { width: 16px; height: 16px; } .tr-co .short-notice-modal .sn-hero p { font-size: 13.5px; font-weight: 700; line-height: 1.5; color: var(--trc-blue-900); text-wrap: pretty; } /* Flush with the hero box, so the card reads as one column of text. */ .tr-co .short-notice-modal .sn-body { padding: 14px 1px 0; } .tr-co .short-notice-modal .sn-body p { font-size: 13px; font-weight: 600; line-height: 1.55; color: var(--trc-ink-2); text-wrap: pretty; } .tr-co .short-notice-modal .sn-body p + p { margin-top: 10px; } .tr-co .short-notice-modal .tr-modal-footer { flex: 0 0 auto; padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px)); } .tr-co .short-notice-modal .modal-actions { display: flex; flex-direction: column; gap: 6px; } .tr-co .short-notice-modal .modal-actions .tr-button { width: 100%; min-height: 48px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: var(--trc-r-md); font-size: 15px; font-weight: 800; line-height: 1.25; transition: background var(--trc-t-micro) var(--trc-e), transform var(--trc-t-micro) var(--trc-e); } /* Same weight and geometry as the action bar's Book button, because it is the same commitment — the traveller is finishing the press they already made. */ .tr-co .short-notice-modal .sn-go { background: var(--trc-blue-700); color: #fff; } .tr-co .short-notice-modal .sn-go:hover { background: var(--trc-blue-800); } .tr-co .short-notice-modal .sn-go:active { transform: scale(.99); } .tr-co .short-notice-modal .sn-back { min-height: 42px; background: none; color: var(--trc-ink-2); font-size: 14px; font-weight: 700; } .tr-co .short-notice-modal .sn-back:hover { background: var(--trc-line-2); } .tr-co .short-notice-modal .modal-actions .tr-button[disabled] { cursor: default; } .tr-co .short-notice-modal .sn-back[disabled] { opacity: .45; } /* Below the guided flow's breakpoint (tr-checkout-mobile.js BREAKPOINT), where every other overlay on this page is a bottom sheet. */ @media (max-width: 900px) { .tr-co .short-notice-modal.tr-modal-wrap { padding: 0; align-items: flex-end; } .tr-co .short-notice-modal .tr-modal { max-width: none; margin: 0; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); border-radius: var(--trc-r-lg) var(--trc-r-lg) 0 0; animation: trc-sheet-in .28s var(--trc-e); } .tr-co .short-notice-modal .tr-modal-footer { border-top: 1px solid var(--trc-line); } } /* ---------- skeletons ---------- Sized to the box that is arriving, so the reveal is a crossfade rather than a reflow. */ .tr-co .skeleton-loading { position: relative; overflow: hidden; background: var(--trc-surface); border: 1px solid var(--trc-line); border-radius: var(--trc-r-lg); box-shadow: var(--trc-sh-1); } .tr-co .skeleton-loading::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #e9eef2 0%, #f4f7f9 40%, #e9eef2 80%); background-size: 220% 100%; animation: trc-shim 1.25s linear infinite; } .tr-co .single-stop-wrap.skeleton-loading { min-height: 190px; } .tr-co .tr-card.skeleton-loading { min-height: 178px; } .tr-co .single-car-selection.skeleton-loading { min-height: 62px; border-radius: var(--trc-r-md); } @keyframes trc-shim { 0% { background-position: 120% 0; } 100% { background-position: -120% 0; } } /* ---------- motion ---------- Driven by public/js/tr-checkout-motion.js. Money animates, layout does not; the only height change is the itinerary leg, which grows below the tapped element rather than under the cursor. */ @keyframes trc-pop { 0% { transform: scale(0); opacity: 0; } 60% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes trc-bump { 0% { transform: scale(1); } 40% { transform: scale(1.09); } 100% { transform: scale(1); } } @keyframes trc-flash { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; } } .tr-co .trc-bump { animation: trc-bump .44s var(--trc-e-spring); } .tr-co .trc-flash::before { content: ""; position: absolute; inset: 0; background: rgba(140, 198, 63, .22); pointer-events: none; z-index: 2; animation: trc-flash .62s var(--trc-e) forwards; } /* itinerary leg dropping in */ .tr-co .trc-leg { overflow: hidden; max-height: 0; opacity: 0; transform: translateX(-10px); transition: max-height .36s var(--trc-e), opacity .24s .07s var(--trc-e), transform .32s .07s var(--trc-e); } .tr-co .trc-leg.trc-leg-in { max-height: 72px; opacity: 1; transform: none; } /* step change: the sidebar is a shared element and stays put */ .tr-co .trc-page-out { animation: trc-page-out .2s var(--trc-e-in) forwards; } .tr-co .trc-page-in { animation: trc-page-in .3s var(--trc-e) forwards; } @keyframes trc-page-out { to { opacity: 0; transform: translateY(-10px); } } @keyframes trc-page-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } .tr-co .trc-lift { box-shadow: 0 10px 26px rgba(11, 39, 51, .13); transform: translateY(-2px); } /* staggered reveal of freshly loaded cards */ .tr-co .trc-enter { opacity: 0; transform: translateY(8px); } .tr-co .trc-enter.trc-in { opacity: 1; transform: none; transition: opacity var(--trc-t-el) var(--trc-e), transform .34s var(--trc-e); } /* toast */ .trc-toast { position: fixed; left: 50%; bottom: 104px; transform: translate(-50%, 14px); background: #0f2733; color: #fff; font-size: 12.5px; font-weight: 700; padding: 10px 15px; border-radius: var(--trc-r-sm, 10px); opacity: 0; transition: opacity .22s cubic-bezier(.2, .7, .25, 1), transform .28s cubic-bezier(.2, .7, .25, 1); pointer-events: none; white-space: nowrap; z-index: 1000; } .trc-toast.is-on { opacity: 1; transform: translate(-50%, 0); } /* ---------- mobile ---------- */ @media (max-width: 1080px) { .tr-co .checkout-wrap { grid-template-columns: minmax(0, 1fr) 340px; } } @media (max-width: 900px) { .tr-co .checkout-wrap { grid-template-columns: minmax(0, 1fr); } /* reorderCheckoutLayout() used to move these nodes with JS; grid order does it without touching the DOM. Ordering the two wrappers was not the same thing, though. The JS moved .step-data, #map-trip-data and .additional-checkout-info to the end, which left the summary on top and pushed the map and the marketing block below the step's own cards. Ordering .trip-details as one block put all three back above them. Collapse it instead, so its children can be sequenced individually the way the JS used to place them. */ .tr-co .trip-details { position: static; } .tr-co .checkout-wrap > .trip-details { display: contents; } .tr-co .checkout-wrap > .trip-details > .trip-details-content { order: 1; } .tr-co .checkout-wrap > .step-data { order: 2; } .tr-co .checkout-wrap > .trip-details > .ride-selection { order: 3; } .tr-co .checkout-wrap > .trip-details > #map-trip-data { order: 4; } .tr-co .checkout-wrap > .trip-details > .additional-checkout-info { order: 5; } /* (0,4,0) to clear .tr-co .checkout-wrap .stop-data .single-stop-wrap, which sets a 236px photo track. As `.tr-co .tr-co__stop` this rule was (0,2,0) and never fired, so with the guided flow off - JS error, or a phone that never ran it - a 360px viewport left the card's text column at ~96px. */ .tr-co .checkout-wrap .stop-data .single-stop-wrap { grid-template-columns: minmax(0, 1fr); } .tr-co .tr-co__stop-ph { min-height: 150px; max-height: 170px; } } /* 900, not 768: tr-checkout-mobile.js turns the guided flow on at 900 (BREAKPOINT), so between 769 and 900 the flow used to run with desktop-scale card internals, a 74px header and the full two-step header rail - the last of which sat directly above the guided flow's own progress rail and counter. The three definitions of "mobile" in this checkout (900 here, 768 in the legacy sheet, Elementor's 767/1024 behind $.fn.getDeviceType) are now two. */ @media (max-width: 900px) { .tr-co .checkout-header { padding: 0 14px; } .tr-co .checkout-header .tr-container { min-height: 62px; gap: 14px; } .tr-co .logo-wrap img { height: 28px; } .tr-co .step-wrap { gap: 8px; max-width: none; } .tr-co .step-wrap .step-text { display: none; } .tr-co .tr-co__rail { min-width: 20px; } .tr-co .tr-checkout-wrap { padding: 16px 14px 150px; } .tr-co .tr-co__h1 { font-size: 21px; } .tr-co .grid.grid-1-1 { grid-template-columns: 1fr; } /* the legacy mobile block hides this heading (transfer-ride-core-public.css:2984); the sidebar needs it now that the vehicle picker always lives there */ .tr-co .checkout-wrap .ride-selection h2 { display: block; } .tr-co .tr-card .tr-content { padding: 14px; } .tr-co .tr-co__stop-c { padding: 12px 14px; } .tr-co .tr-co__stop-foot { gap: 10px; } .tr-co .tr-co__pricewrap { margin-left: 0; width: 100%; justify-content: space-between; } .tr-co .add-trip-stop { flex: 1; max-width: 200px; } .tr-co .tr-co__adds { width: 100%; order: 3; } .tr-vehicle { grid-template-columns: 18px 52px minmax(0, 1fr) auto; gap: 9px; } .tr-co .checkout-footer-prewrap { padding: 0 14px; } .tr-co .checkout-footer-wrap .checkout-footer { flex-wrap: wrap; gap: 10px; padding: 11px 0 14px; } .tr-co .tr-co__note { display: none; } .tr-co .tr-co__actions { width: 100%; gap: 8px; } .tr-co .checkout-footer-wrap .tr-button { height: 46px; padding: 0 18px; font-size: 14px; } .tr-co .checkout-footer-wrap .next-step { flex: 1; } .trc-toast { bottom: 130px; max-width: calc(100vw - 28px); white-space: normal; text-align: center; } } /* ========================================================================== mobile: the guided flow Design note 9: "Mobile is a guided 4-step flow, not one long page. Each screen fits a phone with no scrolling and asks one thing ... a segment rail and an n/N counter say where you are; the live total rides in the bottom bar the whole way." The block above this one is the fallback the note calls the problem — the desktop page narrowed — and it is kept deliberately: it is what renders if tr-checkout-mobile.js never runs. Everything below is behind .tr-co--guided, which that controller puts on only while the breakpoint matches, so a phone with JS disabled still gets a working (if long) checkout rather than a blank one. Two attributes on drive the whole section: data-trc-panel the screen being shown (stops|ride|who|where|review) data-trc-step the app step underneath it (0|1) and every node the flow places carries data-trc-panel naming its screen. ========================================================================== */ /* Inert until the controller turns the flow on. Grouped so the .tr-co--guided rules below, at equal weight and later in the file, win by source order. */ .tr-co .tr-co__mtop, .tr-co .tr-co__mhead, .tr-co .tr-co__mdots, .tr-co .tr-co__mctx, .tr-co .tr-co__mwho, .tr-co .tr-co__mchange, .tr-co .tr-co__mbd { display: none; } /* ---------- guided: one column, one screen ---------- The routes JS owns .step-data and re-renders it wholesale, so no node is ever moved out of it. display:contents collapses the four wrappers instead, which puts every card in one flex column that `order` can sequence. */ .tr-co--guided .checkout-wrap { display: flex; flex-direction: column; gap: 12px; /* The desktop rule (line 267) sets align-items:start, where it aligns the two grid columns to the top of the row. Inherited into this flex column it means the cross axis - the horizontal one here - and every card was sized to its content instead of the viewport. Cards with wide content (the vehicle list, a long address line) hit the container and looked right, while short ones - .tr-card.pickup-dropoff-address-search most visibly, whose inputs are width:100% of an auto-width parent - shrank to a fraction of the screen. Restated rather than left to the initial value, because the grid rule is what this one is overriding. */ align-items: stretch; /* transfer-ride-core-public.css:2890 adds `padding: 0 5px` below 768. The carousel bleeds -14px against the wrapper's gutter, so those 5px made the full-bleed 5px short on each side and put scroll-padding-inline out of step with the real gutter - below 768 only, so the carousel's geometry changed across a line the guided flow does not otherwise notice. */ padding: 0; } /* The guided flow states where the traveller is with a segment rail and an n/N counter in its own bar. The page header's two-step rail says the same thing on a different scale, one line above it. */ .tr-co--guided .checkout-header .step-wrap { display: none; } /* Same argument for the server-rendered section numbers: the cards are numbered 1-4 for a single long page, and the guided flow spreads them over screens 3/5, 4/5 and 5/5. Two counters disagreeing on one screen. */ .tr-co--guided .tr-co__no { display: none; } .tr-co--guided .checkout-wrap > .step-data, .tr-co--guided .checkout-wrap > .trip-details, .tr-co--guided .checkout-data, .tr-co--guided .checkout-payment { display: contents; } .tr-co--guided .tr-checkout-wrap { padding: 14px 14px calc(112px + env(safe-area-inset-bottom, 0px)); } .tr-co--guided [data-trc-panel] { display: none; } /* The one panel node with a `display` of its own loud enough to ignore the rule above: .tr-co .checkout-wrap .stop-data (line 341) is (0,3,0) against its (0,2,0), so the stops list was never actually hidden. It sat on the ride screen — the whole of app step 0, in fact — and then the next screen asked about stops as though they had not just been shown. Matched at (0,3,0) here and later in the file, so this wins; the carousel rule that turns it back on for its own screen is (0,4,0) and still beats both. */ .tr-co--guided .checkout-wrap .stop-data { display: none; } .tr-co--guided[data-trc-panel="stops"] [data-trc-panel="stops"], .tr-co--guided[data-trc-panel="ride"] [data-trc-panel="ride"], .tr-co--guided[data-trc-panel="who"] [data-trc-panel="who"], .tr-co--guided[data-trc-panel="where"] [data-trc-panel="where"], .tr-co--guided[data-trc-panel="review"] [data-trc-panel="review"] { display: block; } /* The step's own headings are replaced by the screen's question, which is the point of the flow: one thing asked per screen. */ .tr-co--guided .tr-co__listhead { display: none; } /* .stop-data is normally sticky (transfer-ride-core-public.css:2478); inside a horizontal carousel that pins the cards to the viewport edge. makeStickyStopData() adds that class at any width, so this reset has to hold - doubled to (0,3,0) because .admin-bar .sticky-stop-data (public:2483) ties at (0,2,0) and would otherwise win on nothing more durable than enqueue order. */ .tr-co--guided.tr-co--guided .sticky-stop-data { position: static; top: auto; } /* ---------- guided: top chrome ---------- */ .tr-co--guided .tr-co__mtop { display: block; position: sticky; top: 0; z-index: 6; background: var(--trc-surface); border-bottom: 1px solid var(--trc-line); padding: 8px 14px 12px; } /* #wpadminbar is fixed above 600px, so top:0 parks this bar underneath it for every logged-in user. Mirrors what public:2483 already does for .sticky-stop-data; below 600 the admin bar scrolls away and top:0 is right. */ .tr-co--guided.admin-bar .tr-co__mtop { top: 32px; } @media screen and (max-width: 782px) { .tr-co--guided.admin-bar .tr-co__mtop { top: 46px; } } @media screen and (max-width: 600px) { .tr-co--guided.admin-bar .tr-co__mtop { top: 0; } } .tr-co--guided .tr-co__mtoprow { display: flex; align-items: center; gap: 10px; min-width: 0; } /* 40px: this is the back affordance for the whole flow, and 34 was only just over the WCAG 2.5.8 floor. */ .tr-co--guided .tr-co__mback { width: 40px; height: 40px; min-width: 40px; border-radius: var(--trc-r-sm); border: 1px solid var(--trc-line); background: var(--trc-surface); color: var(--trc-ink-2); display: grid; place-items: center; transition: border-color var(--trc-t-micro) var(--trc-e); } .tr-co--guided .tr-co__mback[hidden] { display: none; } .tr-co--guided .tr-co__mback:hover { border-color: #b9cddb; } .tr-co--guided .tr-co__mback svg { width: 9px; height: 14px; } .tr-co--guided .tr-co__mtitle { min-width: 0; flex: 1; } .tr-co--guided .tr-co__mtitle-t { display: block; font-size: 14.5px; font-weight: 800; letter-spacing: -.012em; color: var(--trc-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tr-co--guided .tr-co__mtitle-s { display: block; font-size: 11.5px; font-weight: 700; color: var(--trc-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tr-co--guided .tr-co__mcount { font-size: 12px; font-weight: 800; color: var(--trc-muted); flex: 0 0 auto; font-variant-numeric: tabular-nums; } .tr-co--guided .tr-co__mprog { display: flex; gap: 6px; margin-top: 11px; } .tr-co--guided .tr-co__mprog i { flex: 1; height: 4px; border-radius: 3px; background: var(--trc-line); transition: background var(--trc-t-el) var(--trc-e); } .tr-co--guided .tr-co__mprog i.is-on { background: var(--trc-blue-700); } .tr-co--guided .tr-co__mprog i.is-done { background: var(--trc-green); } /* ---------- guided: the screen's question ---------- */ .tr-co--guided .tr-co__mhead { display: block; } .tr-co--guided .tr-co__mq { font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.22; color: var(--trc-ink); } .tr-co--guided .tr-co__mqs { font-size: 13px; line-height: 1.45; color: var(--trc-muted); margin-top: 6px; } /* ---------- guided: stops as a carousel ---------- Native scroll-snap rather than a script: the cards are already the right shape, they only need to sit in a row that stops on each one. Gated on the screen being current, and not only on .tr-co--guided: this rule outweighs the blanket [data-trc-panel] hide above it, so an ungated version would leave the carousel on screen through the whole flow. */ .tr-co--guided[data-trc-panel="stops"] .checkout-wrap .stop-data { display: flex; flex-direction: row; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: 14px; /* full-bleed so the next card peeks past the page gutter */ margin-inline: -14px; padding: 2px 14px 10px; scrollbar-width: none; } .tr-co--guided .checkout-wrap .stop-data::-webkit-scrollbar { display: none; } .tr-co--guided .checkout-wrap .stop-data .single-stop-wrap { grid-template-columns: minmax(0, 1fr); flex: 0 0 87%; scroll-snap-align: center; } .tr-co--guided .checkout-wrap .stop-data .tr-co__stop-ph { min-height: 0; height: 132px; } /* The skeleton has to reserve the height the settled card takes, or the reveal is a reflow rather than the crossfade it is written as. Stacked, that is the 132px photo above ~146px of text, stepper and price - not the 190px the two-column desktop card needs (line 1794). */ .tr-co--guided .checkout-wrap .stop-data .single-stop-wrap.skeleton-loading { min-height: 278px; } .tr-co--guided .tr-co__mdots { justify-content: center; gap: 0; padding: 2px 0 0; } .tr-co--guided[data-trc-panel="stops"] .tr-co__mdots { display: flex; } /* The dot is 7px; the button around it is 24, the smallest target WCAG 2.5.8 accepts. They used to be the same 7px element, which is not hittable with a thumb. The mark moves to ::after so the box can grow without it. */ .tr-co--guided .tr-co__mdots button { width: 24px; height: 24px; min-width: 24px; padding: 0; border: 0; background: none; display: grid; place-items: center; } .tr-co--guided .tr-co__mdots button::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--trc-line); transition: background var(--trc-t-micro) var(--trc-e), transform var(--trc-t-micro) var(--trc-e); } .tr-co--guided .tr-co__mdots button.is-on::after { background: var(--trc-blue-700); transform: scale(1.15); } /* ---------- guided: context strip ---------- Written to state what had been picked while choosing, on the argument that the itinerary only appears on the review screen. It never earned the row: "No stops yet" is noise on the screen that is about to offer them, and the distance and duration it repeats are the two numbers the traveller is least deciding on. The base rule at the top of this section keeps it hidden; the box below is left intact so bringing it back is one `display: flex` on .tr-co--guided[data-trc-step="0"] .tr-co__mctx and nothing else. */ .tr-co--guided .tr-co__mctx { align-items: center; gap: 8px; background: var(--trc-surface); border: 1px solid var(--trc-line); border-radius: var(--trc-r-md); padding: 10px 13px; font-size: 12.5px; font-weight: 700; color: var(--trc-ink-2); box-shadow: var(--trc-sh-1); } .tr-co--guided .tr-co__mctx-dot { width: 7px; height: 7px; min-width: 7px; border-radius: 50%; background: var(--trc-line); } .tr-co--guided .tr-co__mctx-dot.is-on { background: var(--trc-green); } /* ---------- guided: ride screen ---------- */ /* The card's own eyebrow repeats the question above it. It stays on the review screen, where it labels the collapsed row instead. */ .tr-co--guided[data-trc-panel="ride"] .checkout-wrap .ride-selection h2 { display: none; } .tr-co--guided .ride-selection, .tr-co--guided .additional-checkout-info { padding: 14px; } /* ---------- guided: review screen ---------- The vehicle list collapses to the chosen row; changing it is an explicit button that walks back to the ride screen rather than four live options sitting under a pay button. */ .tr-co--guided[data-trc-panel="review"] .ride-selection .ride-features, .tr-co--guided[data-trc-panel="review"] .car-selection .single-car-selection:not(.selected) { display: none; } .tr-co--guided[data-trc-panel="review"] .car-selection .single-car-selection.selected { pointer-events: none; } .tr-co--guided[data-trc-panel="review"] .car-selection .single-car-selection.selected .tr-vehicle__radio { display: none; } /* The lead passenger, restated where the booking is confirmed. Shown by the generic panel rule above, so this only needs the box. */ .tr-co--guided[data-trc-panel="review"] .tr-co__mwho { display: flex; align-items: center; gap: 12px; background: var(--trc-surface); border: 1px solid var(--trc-line); border-radius: var(--trc-r-md); padding: 11px 13px; box-shadow: var(--trc-sh-1); } .tr-co--guided .tr-co__mwho-t { font-size: 12.5px; font-weight: 700; color: var(--trc-ink-2); min-width: 0; flex: 1; line-height: 1.4; overflow-wrap: anywhere; } .tr-co--guided .tr-co__mwho-e { font-size: 11.5px; font-weight: 800; color: var(--trc-blue-700); flex: 0 0 auto; align-self: flex-start; /* was bare text with no box to aim at */ min-height: 24px; padding: 4px 6px; margin: -4px -6px 0 0; } /* The change list. One row per thing the review screen lets you edit; each opens a sheet over the screen rather than walking the booking backwards. */ .tr-co--guided .tr-co__mchange { border: 1px solid var(--trc-line); border-radius: var(--trc-r-md); background: var(--trc-surface); box-shadow: var(--trc-sh-1); overflow: hidden; } .tr-co--guided .tr-co__mchange-r { width: 100%; /* min-height, not height: a button wraps its label, and the longer translations of "Change your car" go to two lines - which overflowed the fixed 40px box this used to be, with no padding to give. */ min-height: 48px; padding: 11px 13px; display: flex; align-items: center; gap: 10px; background: none; border: 0; text-align: left; color: var(--trc-blue-700); font-size: 13px; font-weight: 800; line-height: 1.3; } .tr-co--guided .tr-co__mchange-r + .tr-co__mchange-r { border-top: 1px solid var(--trc-line); } .tr-co--guided .tr-co__mchange-l { flex: 0 0 auto; } .tr-co--guided .tr-co__mchange-v { flex: 1; min-width: 0; text-align: right; color: var(--trc-muted); font-size: 12.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tr-co--guided .tr-co__mchange-i { flex: 0 0 auto; display: grid; place-items: center; color: var(--trc-muted); } /* ---------- change sheets ---------- Built by $.fn.createModal, so the markup is the site's own modal; everything below only re-dresses it as a bottom sheet in the checkout's tokens. The cards inside are the live ones, moved in and moved back on close. */ .trc-sheet.tr-modal-wrap { padding: 0; z-index: 999999; } /* Same reason the search sheets are tall (tr-search.css, "mobile sheets"): a content-sized sheet leaves its first input near the bottom edge, under the keyboard that opens the moment it is tapped. The floor is well inside the ceiling below, so a short sheet grows and a long one is unaffected. */ .trc-sheet .tr-modal { width: 100%; max-width: 640px; height: auto; min-height: 80vh; min-height: 80dvh; max-height: 92vh; max-height: calc(100dvh - 24px); margin: auto auto 0; border-radius: var(--trc-r-lg) var(--trc-r-lg) 0 0; background: var(--trc-bg, #fff); display: flex; flex-direction: column; animation: trc-sheet-in .28s var(--trc-e); } @keyframes trc-sheet-in { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } } .trc-sheet .tr-modal-header { flex: 0 0 auto; align-items: center; border-bottom: 1px solid var(--trc-line); background: var(--trc-surface); } .trc-sheet .tr-modal-header .title { padding: 14px 16px; font-size: 15px; font-weight: 800; letter-spacing: -.012em; color: var(--trc-ink); } .trc-sheet .tr-modal-header .close-modal { width: 44px; height: 44px; margin-right: 4px; display: grid; place-items: center; border-radius: var(--trc-r-sm); color: var(--trc-ink-2); } .trc-sheet .tr-modal-header .close-modal svg { width: 15px; height: 15px; } .trc-sheet .tr-modal-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; /* Scrolling past the end of a sheet must not start scrolling the page underneath it, which `overflow: hidden` on alone does not stop once a touch scroll is already in flight. */ overscroll-behavior: contain; padding: 14px; background: var(--trc-bg, #f2f5f7); } .trc-sheet .trc-sheet__body { display: flex; flex-direction: column; gap: 12px; } .trc-sheet .tr-modal-footer { flex: 0 0 auto; padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--trc-line); background: var(--trc-surface); } .trc-sheet .trc-sheet__done { width: 100%; height: 48px; border: 0; border-radius: var(--trc-r-sm); background: var(--trc-blue-700); color: #fff; font-size: 14.5px; font-weight: 800; } /* The borrowed cards carry the data-trc-panel they had on the page, and the blanket rule at the top of this section hides anything tagged. (0,3,0) to clear it. */ .tr-co--guided .trc-sheet [data-trc-panel] { display: block; } /* While a sheet is open the body's panel attribute is parked on "_sheet", so the review screen's collapse rules stop matching and the vehicle list is whole again - every option, its radio, and the feature chips. */ .trc-sheet .ride-selection, .trc-sheet .tr-card { box-shadow: none; } .trc-sheet .ride-selection h2 { display: none; } /* Nothing behind the sheet should scroll under it. */ .tr-co--sheet { overflow: hidden; } .tr-co--guided .tr-co__mbd { background: var(--trc-surface); border: 1px solid var(--trc-line); border-radius: var(--trc-r-lg); box-shadow: var(--trc-sh-1); padding: 14px; } .tr-co--guided .tr-co__mbd-r { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 600; color: var(--trc-ink-2); } .tr-co--guided .tr-co__mbd-r + .tr-co__mbd-r { margin-top: 9px; } .tr-co--guided .tr-co__mbd-r b { font-weight: 800; color: var(--trc-ink); white-space: nowrap; } .tr-co--guided .tr-co__mbd-r.is-muted, .tr-co--guided .tr-co__mbd-r.is-muted b { color: var(--trc-muted); font-size: 12.5px; font-weight: 600; } .tr-co--guided .tr-co__mbd-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--trc-line); font-size: 13.5px; font-weight: 800; color: var(--trc-ink); } .tr-co--guided .tr-co__mbd-total b { font-size: 21px; font-weight: 800; letter-spacing: -.02em; } /* ---------- guided: action bar ---------- The total rides here the whole way, so the CTA carries a label only — a price is written once per screen. */ .tr-co--guided .checkout-footer-prewrap { padding: 0 14px; } .tr-co--guided .checkout-footer-wrap .checkout-footer { flex-wrap: nowrap; gap: 12px; padding: 10px 0 14px; } .tr-co--guided .tr-co__note, .tr-co--guided .checkout-footer-wrap .next-step .price { display: none; } /* changeStep() writes display:inline-flex straight onto this element (transfer-ride-routes-public.js:813), so specificity alone cannot hide it. Back lives in the top bar in this flow, and two back buttons on one screen is one too many. */ .tr-co--guided .checkout-footer-wrap .prev-step { display: none !important; } .tr-co--guided .tr-co__actions { flex: 1; justify-content: flex-end; } .tr-co--guided .checkout-footer-wrap .next-step { flex: 1; max-width: 220px; height: 48px; padding: 0 18px; font-size: 14.5px; } .tr-co--guided .tr-co__sum-total { font-size: 17px; } /* ---------- guided: screen change ---------- Page token: the outgoing screen is replaced, the incoming one rises 10px. The top bar and the action bar never move, which is what makes it read as advancing rather than reloading. No fill mode, so once the 300ms is up the transform is gone and this is an ordinary block again. It is not inert for those 300ms, though - a used transform is a containing block for fixed-position descendants, which is what the search widget's mobile sheet and the calendar overlay are. That is survivable only because the animation runs on entry, before there is anything open to re-anchor; do not extend it, and do not add a fill mode. */ @keyframes trc-mswap { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .tr-co--guided .tr-checkout-wrap.tr-co__mswap { animation: trc-mswap .3s var(--trc-e); } .tr-co--guided .trc-toast { bottom: 96px; max-width: calc(100vw - 28px); white-space: normal; text-align: center; } /* ---------- reduced motion ---------- Everything above collapses to a cut. States still change, they just do not travel. */ @media (prefers-reduced-motion: reduce) { .tr-co *, .tr-co *::before, .tr-co *::after, .tr-vehicle, .tr-vehicle *, .trc-toast { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .tr-co .trc-leg { max-height: 72px; opacity: 1; transform: none; } }