/* ========================================================================== TransferRide booking confirmation — step 3 of the checkout flow Ported from the "TransferRide Booking Confirmation" design project. The design file is `booking-confirm.css` layered on `checkout-flow.css`, and production mirrors that layering exactly: this stylesheet declares `tr-checkout` as its dependency, and public/pages/transfer-ride-confirmation-page.php puts BOTH `tr-co` and `tr-bc` on . So the --trc-* tokens, the header, the step rail, the button reset and the responsive base all come from tr-checkout.css, and only the confirmation-specific components live here. Consequences of that decision, which are the reasons not to fold this file into tr-checkout.css: - Nothing here is prefixed --trc-*; the tokens are inherited from the .tr-co.tr-co block on , including its two documented deviations from the design (brand blue #046095 in place of #1470a8, and --trc-muted #5a7383 in place of #6b8493, which fails AA at 3.93:1 and is used on every 10-12px label on this screen). - Every selector is nested under .tr-bc, which only this template emits, so nothing reaches Elementor, the portal, or the checkout page itself. - Icons are sized by their container and recoloured with `svg path`, never by a blanket `svg` rule. The theme sets a global `svg { width:100%; height:100% }` that the sized spans below depend on; overriding it would break the search widget, exactly as noted in tr-checkout.css. - The design's separate 390px frame is not a separate DOM. Its real parts — centred confirmation, reference with a Copy button, single column — are media states of this markup. Its phone chrome (status bar) is not ported. ========================================================================== */ .tr-bc { background: var(--trc-bg); } /* ---------- confirmation band ---------- */ /* Full-bleed so the tint runs edge to edge; the content inside is held to the same .tr-container width as the header above it. */ .tr-bc .tr-bc__succ { padding: 26px 24px; border-bottom: 1px solid #e2edcd; background: #f5faec; } .tr-bc .tr-bc__succ .tr-container { gap: 22px; } /* Paid, but pick-up is inside 48h so a driver is still being matched. Blue rather than green: the money is settled, the ride is not yet. */ .tr-bc .tr-bc__succ--pending { background: var(--trc-blue-050); border-bottom-color: #cfe2ef; } /* payment-pending / canceled / failed. Neutral, not alarming — most people landing here abandoned a payment rather than lost a booking. */ .tr-bc .tr-bc__succ--dead { background: #f4f6f8; border-bottom-color: var(--trc-line); } .tr-bc .tr-bc__tick { width: 50px; height: 50px; min-width: 50px; border-radius: 50%; background: var(--trc-green); color: #fff; display: grid; place-items: center; box-shadow: 0 0 0 6px rgba(140, 198, 63, .2); } .tr-bc .tr-bc__tick svg { width: 24px; height: 24px; } .tr-bc .tr-bc__succ--pending .tr-bc__tick { background: var(--trc-blue-700); box-shadow: 0 0 0 6px rgba(4, 96, 149, .16); } .tr-bc .tr-bc__succ--dead .tr-bc__tick { background: var(--trc-muted); box-shadow: 0 0 0 6px rgba(107, 132, 147, .18); } .tr-bc .tr-bc__succ-text { min-width: 0; } /* Size, weight and colour are all declared rather than inherited: the Elementor kit sets a colour on h1 directly, so inheriting from .tr-bc would never reach it. Same reasoning as the heading rules in tr-checkout.css. */ .tr-bc .tr-bc__succ-text h1 { font-size: 29px; font-weight: 800; letter-spacing: -.024em; line-height: 1.2; color: var(--trc-ink); margin: 0; padding: 0; } .tr-bc .tr-bc__succ-text p { margin: 6px 0 0; font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--trc-ink-2); max-width: 60ch; text-wrap: pretty; } .tr-bc .tr-bc__succ-text p b { font-weight: 800; color: var(--trc-ink); } .tr-bc .tr-bc__acts { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* ---------- booking reference ---------- */ /* The largest fixed-width thing on the page. Tabular figures so it cannot be misread over the phone, and user-select so it can be dragged as well as copied with the button. */ .tr-bc .tr-bc__ref { background: var(--trc-surface); border: 1px solid var(--trc-line); border-radius: var(--trc-r-md); padding: 9px 14px; display: flex; align-items: center; gap: 14px; text-align: left; } .tr-bc .tr-bc__ref-text { min-width: 0; } .tr-bc .tr-bc__ref-k { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--trc-muted); } .tr-bc .tr-bc__ref-v { font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .06em; margin-top: 4px; color: var(--trc-ink); user-select: all; } .tr-bc .tr-bc__copy { font-size: 12px; font-weight: 800; color: var(--trc-blue-700); padding: 8px 0; margin-left: auto; white-space: nowrap; } .tr-bc .tr-bc__copy:hover { color: var(--trc-blue-800); text-decoration: underline; text-underline-offset: 2px; } /* ---------- buttons ---------- */ /* .tr-button in transfer-ride-core-public.css is a 1px #222 pill with a hover that repaints the background. Two classes beat it on specificity without !important; the hover rule needs three to beat `.tr-button:hover`. */ .tr-bc .tr-bc__btn-primary, .tr-bc .tr-bc__btn-ghost { border-radius: var(--trc-r-sm); height: 44px; padding: 0 18px; font-size: 13.5px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; white-space: nowrap; transition: background var(--trc-t-micro, .16s) ease, color var(--trc-t-micro, .16s) ease, border-color var(--trc-t-micro, .16s) ease; } .tr-bc .tr-bc__btn-primary { background: var(--trc-blue-700); border: 1.5px solid var(--trc-blue-700); color: #fff; } .tr-bc .tr-bc__btn-primary:hover, .tr-bc a.tr-bc__btn-primary:hover { background: var(--trc-blue-800); border-color: var(--trc-blue-800); color: #fff; } .tr-bc .tr-bc__btn-ghost { background: var(--trc-surface); border: 1.5px solid var(--trc-line); color: var(--trc-ink-2); } .tr-bc .tr-bc__btn-ghost:hover, .tr-bc a.tr-bc__btn-ghost:hover { background: var(--trc-surface); border-color: var(--trc-blue-700); color: var(--trc-blue-800); } .tr-bc .tr-bc__btn-big { height: 48px; padding: 0 26px; font-size: 15px; border-radius: var(--trc-r-md); } /* ---------- layout ---------- */ .tr-bc .tr-bc__body { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start; padding: 30px 24px 26px; } .tr-bc .tr-bc__empty { padding: 40px 24px; max-width: 720px; } .tr-bc .tr-bc__col { display: flex; flex-direction: column; gap: 14px; min-width: 0; } /* The sidebar follows the reader down the long left column. 24px clears the sticky admin bar on a logged-in view. */ .tr-bc .tr-bc__body > aside.tr-bc__col { position: sticky; top: 24px; } /* ---------- surfaces ---------- */ .tr-bc .tr-bc__card { background: var(--trc-surface); border: 1px solid var(--trc-line); border-radius: var(--trc-r-lg); box-shadow: var(--trc-sh-1); } .tr-bc .tr-bc__pad { padding: 18px 20px; } .tr-bc .tr-bc__ct { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--trc-muted); margin: 0 0 12px; } .tr-bc .tr-bc__h1 { font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.2; color: var(--trc-ink); margin: 0; } .tr-bc .tr-bc__sub { font-size: 14px; line-height: 1.55; font-weight: 600; color: var(--trc-ink-2); margin: 8px 0 0; max-width: 62ch; text-wrap: pretty; } .tr-bc .tr-bc__sechead { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; } .tr-bc .tr-bc__sechead h2 { font-size: 16.5px; font-weight: 800; letter-spacing: -.012em; line-height: 1.2; color: var(--trc-ink); margin: 0; padding: 0; } .tr-bc .tr-bc__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; } /* The icons ship at 800x800 with #000 baked into stroke and fill, so the span sets the box and these rules take the colour from the parent. */ .tr-bc .tr-bc__no svg { width: 13px; height: 13px; } .tr-bc .tr-bc__no svg path, .tr-bc .tr-bc__no svg rect, .tr-bc .tr-bc__no svg circle, .tr-bc .tr-bc__no svg g { stroke: currentColor; } .tr-bc .tr-bc__no svg [fill]:not([fill="none"]) { fill: currentColor; } .tr-bc .tr-bc__opt { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--trc-muted); text-align: right; } /* ---------- what happens now ---------- */ /* Three columns on desktop because they are a sequence, not a list — the eye reads left to right and stops. Below 900px they stack and the divider moves from the left edge to the top. */ .tr-bc .tr-bc__nx { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .tr-bc .tr-bc__nx > div { padding: 15px 17px; display: flex; gap: 11px; align-items: flex-start; } .tr-bc .tr-bc__nx > div + div { border-left: 1px solid var(--trc-line-2); } .tr-bc .tr-bc__nxn { width: 22px; height: 22px; min-width: 22px; border-radius: 50%; background: var(--trc-blue-050); color: var(--trc-blue-800); font-size: 11px; font-weight: 800; display: grid; place-items: center; } .tr-bc .tr-bc__nxn.is-now { background: var(--trc-green); color: #1d3d02; } .tr-bc .tr-bc__nx b { display: block; font-size: 13px; font-weight: 800; color: var(--trc-ink); } .tr-bc .tr-bc__nx p { margin: 4px 0 0; font-size: 12px; font-weight: 600; color: var(--trc-muted); line-height: 1.45; text-wrap: pretty; } /* ---------- key / value grid ---------- */ /* Two columns of label-above-value, not a four-row table. .is-full spans both; .is-last drops the rule so the bottom row of the grid does not underline. */ .tr-bc .tr-bc__kv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 26px; } .tr-bc .tr-bc__i { display: flex; flex-direction: column; gap: 4px; padding: 11px 0; border-bottom: 1px solid var(--trc-line-2); min-width: 0; } .tr-bc .tr-bc__i.is-full { grid-column: 1 / -1; } .tr-bc .tr-bc__i.is-last { border-bottom: 0; } .tr-bc .tr-bc__k { font-size: 10.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--trc-muted); } /* One ink colour for every value on the page. Blue is reserved for links and actions, which is the whole point of the redesign. */ .tr-bc .tr-bc__v { font-size: 14.5px; font-weight: 700; color: var(--trc-ink); overflow-wrap: anywhere; } .tr-bc .tr-bc__v small { display: block; font-size: 11.5px; font-weight: 600; color: var(--trc-muted); margin-top: 3px; line-height: 1.4; } /* ---------- itinerary rail ---------- */ /* Time is its own right-hand column so arrival is legible without arithmetic. */ .tr-bc .tr-bc__tl { display: grid; gap: 2px; padding: 16px 0 0; margin-top: 4px; max-width: 620px; } .tr-bc .tr-bc__leg { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 7px 0; } .tr-bc .tr-bc__mk { width: 16px; display: grid; place-items: center; } .tr-bc .tr-bc__pin { width: 11px; height: 11px; border-radius: 50%; background: var(--trc-blue-700); box-shadow: 0 0 0 3px rgba(4, 96, 149, .16); display: block; } .tr-bc .tr-bc__pin--destination { background: var(--trc-blue-900); } .tr-bc .tr-bc__pin--stop { width: 9px; height: 9px; background: var(--trc-green); box-shadow: 0 0 0 3px rgba(140, 198, 63, .22); } .tr-bc .tr-bc__nm { font-size: 14.5px; font-weight: 800; color: var(--trc-ink); min-width: 0; } .tr-bc .tr-bc__nm small { display: block; font-size: 12px; font-weight: 600; color: var(--trc-muted); margin-top: 3px; line-height: 1.4; } .tr-bc .tr-bc__tm { justify-self: end; text-align: right; font-size: 15px; font-weight: 800; color: var(--trc-ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; white-space: nowrap; } .tr-bc .tr-bc__tm small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--trc-muted); margin-top: 3px; } .tr-bc .tr-bc__vline { grid-column: 1; width: 2px; height: 20px; background: var(--trc-line); margin: 0 0 0 7px; border-radius: 2px; display: block; } .tr-bc .tr-bc__note { margin-top: 14px; padding: 12px 14px; border-radius: var(--trc-r-md); background: #f7fafb; border: 1px solid var(--trc-line-2); } .tr-bc .tr-bc__note p { margin: 5px 0 0; font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--trc-ink-2); text-wrap: pretty; } /* ---------- price breakdown ---------- */ .tr-bc .tr-bc__bd { display: grid; gap: 9px; } .tr-bc .tr-bc__r { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 600; color: var(--trc-ink-2); } .tr-bc .tr-bc__r b { font-weight: 800; color: var(--trc-ink); white-space: nowrap; } .tr-bc .tr-bc__r.is-muted { color: var(--trc-muted); font-size: 12.5px; } .tr-bc .tr-bc__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--trc-line); } .tr-bc .tr-bc__total-lb { font-size: 13.5px; font-weight: 800; color: var(--trc-ink); min-width: 0; } .tr-bc .tr-bc__total-lb small { display: block; font-size: 11px; font-weight: 600; color: var(--trc-muted); margin-top: 3px; } .tr-bc .tr-bc__total-v { font-size: 23px; font-weight: 800; letter-spacing: -.02em; color: var(--trc-ink); white-space: nowrap; } /* The most actionable fact on the page when the traveller pays cash: the exact amount to hand over, and that no card was charged. */ .tr-bc .tr-bc__cashnote { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border-radius: var(--trc-r-md); background: #f5faec; border: 1px solid #e2edcd; margin-top: 14px; } .tr-bc .tr-bc__cashnote--card { background: #f7fafb; border-color: var(--trc-line-2); } .tr-bc .tr-bc__cico { width: 24px; height: 24px; min-width: 24px; border-radius: 8px; background: rgba(140, 198, 63, .3); display: grid; place-items: center; font-size: 12px; font-weight: 800; color: var(--trc-green-ink); } .tr-bc .tr-bc__cashnote--card .tr-bc__cico { background: var(--trc-blue-050); color: var(--trc-blue-800); } .tr-bc .tr-bc__cashnote b { font-size: 13.5px; font-weight: 800; color: var(--trc-green-ink); } .tr-bc .tr-bc__cashnote--card b { color: var(--trc-blue-800); } .tr-bc .tr-bc__cashnote p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--trc-ink-2); font-weight: 600; text-wrap: pretty; } /* ---------- links ---------- */ .tr-bc .tr-bc__linkrow { display: grid; gap: 0; margin-top: 2px; } .tr-bc .tr-bc__linkrow a { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--trc-line-2); font-size: 13.5px; font-weight: 700; color: var(--trc-ink); text-decoration: none; } .tr-bc .tr-bc__linkrow a:last-child { border-bottom: 0; } .tr-bc .tr-bc__linkrow a:hover { color: var(--trc-blue-800); } .tr-bc .tr-bc__arw { margin-left: auto; color: var(--trc-blue-700); font-weight: 800; font-size: 13px; white-space: nowrap; } /* ---------- sidebar: route map ---------- */ /* #route-overview is an id (1,0,0) fixed at min-height 500px in transfer-ride-core-public.css. One class in front of it wins, and this is the only place the map is a picture rather than an interface — the Leaflet controls are hidden because there is nothing here to interact with. */ .tr-bc #route-overview { height: 236px; min-height: 236px; border-radius: var(--trc-r-md); overflow: hidden; } .tr-bc #route-overview .leaflet-control-container { display: none; } .tr-bc .tr-bc__metas { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 12px; } .tr-bc .tr-bc__meta { display: 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; } .tr-bc .tr-bc__meta-ic { width: 13px; height: 13px; min-width: 13px; display: block; } .tr-bc .tr-bc__meta-ic svg path, .tr-bc .tr-bc__meta-ic svg circle { stroke: currentColor; } /* ---------- sidebar: trip summary ---------- */ .tr-bc .tr-bc__trip { border: 1.5px solid var(--trc-blue-700); border-radius: var(--trc-r-lg); background: var(--trc-surface); overflow: hidden; box-shadow: var(--trc-sh-1); } .tr-bc .tr-bc__trip-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .tr-bc .tr-bc__cell { padding: 13px 14px; display: flex; gap: 9px; min-width: 0; } .tr-bc .tr-bc__cell + .tr-bc__cell { border-left: 1px solid var(--trc-line-2); } .tr-bc .tr-bc__cell > div { min-width: 0; } .tr-bc .tr-bc__cell .tr-bc__v { font-size: 13.5px; font-weight: 800; margin-top: 4px; } .tr-bc .tr-bc__ic { width: 17px; height: 17px; min-width: 17px; display: block; color: var(--trc-blue-700); margin-top: 2px; } .tr-bc .tr-bc__ic svg path, .tr-bc .tr-bc__ic svg rect, .tr-bc .tr-bc__ic svg circle { stroke: currentColor; } .tr-bc .tr-bc__ic svg [fill]:not([fill="none"]) { fill: currentColor; } .tr-bc .tr-bc__trip-veh { display: flex; align-items: center; gap: 12px; padding: 14px; border-top: 1px solid var(--trc-line-2); } .tr-bc .tr-bc__trip-veh .tr-bc__nm { font-size: 13.5px; } .tr-bc .tr-bc__caps { display: flex; gap: 6px; margin-top: 5px; font-size: 11px; font-weight: 700; color: var(--trc-ink-2); } .tr-bc .tr-bc__pr { margin-left: auto; text-align: right; font-size: 14px; font-weight: 800; color: var(--trc-ink); white-space: nowrap; } .tr-bc .tr-bc__pr small { display: block; font-size: 10.5px; font-weight: 700; color: var(--trc-muted); margin-top: 2px; } .tr-bc .tr-bc__trip .tr-bc__metas { padding: 0 14px 14px; } /* ---------- sidebar: what's included ---------- */ .tr-bc .tr-bc__amen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 9px 14px; } .tr-bc .tr-bc__amen span { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--trc-ink-2); } .tr-bc .tr-bc__amen i { width: 5px; height: 5px; min-width: 5px; border-radius: 50%; background: var(--trc-green); display: block; } /* ---------- action bar ---------- */ .tr-bc .tr-bc__actbar { background: var(--trc-surface); border-top: 1px solid var(--trc-line); padding: 15px 24px; box-shadow: 0 -8px 24px rgba(11, 39, 51, .06); } .tr-bc .tr-bc__actbar .tr-container { gap: 18px; } .tr-bc .tr-bc__sum { display: flex; flex-direction: column; min-width: 0; } .tr-bc .tr-bc__sum b { font-size: 19px; font-weight: 800; letter-spacing: -.015em; color: var(--trc-ink); } .tr-bc .tr-bc__sum small { font-size: 11.5px; font-weight: 600; color: var(--trc-muted); margin-top: 2px; } .tr-bc .tr-bc__actbar-right { margin-left: auto; gap: 12px; flex-shrink: 0; } .tr-bc .tr-bc__actbar-note { font-size: 12px; font-weight: 600; color: var(--trc-muted); } /* ========================================================================== Responsive — one DOM, not the design's second frame ========================================================================== */ /* The sidebar stops being a sidebar before it gets narrow enough to squeeze the trip summary's two cells. */ @media (max-width: 1100px) { .tr-bc .tr-bc__body { grid-template-columns: minmax(0, 1fr); } .tr-bc .tr-bc__body > aside.tr-bc__col { position: static; } } @media (max-width: 900px) { /* The three steps are a sequence; stacking them keeps that reading order and the divider moves to the top edge. */ .tr-bc .tr-bc__nx { grid-template-columns: minmax(0, 1fr); } .tr-bc .tr-bc__nx > div + div { border-left: 0; border-top: 1px solid var(--trc-line-2); } .tr-bc .tr-bc__succ { padding: 20px 16px; } .tr-bc .tr-bc__succ .tr-container { flex-wrap: wrap; gap: 16px; } .tr-bc .tr-bc__acts { margin-left: 0; width: 100%; flex-wrap: wrap; } .tr-bc .tr-bc__body { padding: 20px 16px; } .tr-bc .tr-bc__actbar { padding: 12px 16px; } .tr-bc .tr-bc__actbar .tr-container { flex-wrap: wrap; } .tr-bc .tr-bc__actbar-right { margin-left: 0; width: 100%; } .tr-bc .tr-bc__actbar-note { display: none; } .tr-bc .tr-bc__actbar-right .tr-button { flex: 1 1 auto; } } /* Phone. The design's separate 390px frame reduces to: centred confirmation, reference row with Copy, and one column throughout. */ @media (max-width: 640px) { .tr-bc .tr-bc__succ .tr-container { flex-direction: column; text-align: center; gap: 13px; } .tr-bc .tr-bc__succ-text h1 { font-size: 22px; margin-top: 0; } .tr-bc .tr-bc__succ-text p { font-size: 12.5px; } .tr-bc .tr-bc__acts { flex-direction: column; align-items: stretch; gap: 8px; } .tr-bc .tr-bc__ref { padding: 10px 13px; } .tr-bc .tr-bc__ref-v { margin-top: 3px; font-size: 14.5px; } .tr-bc .tr-bc__kv, .tr-bc .tr-bc__amen { grid-template-columns: minmax(0, 1fr); } /* Every row is now the last one in its column, so the shared rule that hides the bottom border has to come back for all but the final item. */ .tr-bc .tr-bc__i.is-last { border-bottom: 1px solid var(--trc-line-2); } .tr-bc .tr-bc__kv .tr-bc__i:last-child { border-bottom: 0; } .tr-bc .tr-bc__pad { padding: 14px 16px; } .tr-bc .tr-bc__leg { grid-template-columns: 16px minmax(0, 1fr) auto; gap: 10px; } .tr-bc .tr-bc__tm small { display: none; } .tr-bc .tr-bc__total-v { font-size: 20px; } .tr-bc #route-overview { height: 190px; min-height: 190px; } .tr-bc .tr-bc__actbar-right { flex-direction: column; align-items: stretch; } .tr-bc .tr-bc__actbar-right .tr-button { width: 100%; } } /* The copy button is the only interaction on the page; without a pointer it is still reachable, but the hover underline is noise on touch. */ @media (hover: none) { .tr-bc .tr-bc__copy:hover { text-decoration: none; } }