/* Submit screen — integration layer. * * This file exists because of load order: quote-submit.css is linked AFTER * quote-results-integration.css, so `.qb-*` overrides written there lost to the * design file at equal specificity and never applied. Everything the Submit * screen needs is here, and this file is linked last of the pair. * * quote-submit.css itself stays byte-identical to the design team's build. */ /* ========================================================================== THE DURATION PILL -------------------------------------------------------------------------- The design centres it with `width: max-content; margin: 2.5rem auto 0`, which only works on a block box. The markup renders a , so both were ignored and the pill sat at the start of the line instead of under the tabs. ========================================================================== */ .qb-dur { display: block; } /* The design absolutely positions the screenshot inside; the real content is a normal document flow. */ .qb-card > * { position: static; } /* `relative`, deliberately. The design declares no `position` on .qb-tbf or .qb-price — they get it from `.qb-pkg > * { position: absolute }` — and each lays its own children out absolutely inside itself. Making them `static` removed that anchor, so their contents resolved against the rail instead and piled up at the top of it. `relative` takes them out of the coordinate system while keeping them as the containing block for their own children. */ /* The aerial keeps its authored band and fills it. -------------------------------------------------------------------------- The design crops ONE large photo by pushing it out of the frame: `position: absolute; left: -22.9375rem; top: -10.375rem` on a 1160x478 image inside a 356x156 window. The image here is a Google static map requested at exactly the window's aspect, so it needs no crop — but overriding only its width and height left those offsets in place, which parked it off the top-left corner where `overflow: hidden` clipped it away completely. The band rendered white and the map looked broken while it was in fact loading fine. The position is therefore reset alongside the size. */ .qb-pkg > .qb-map { height: 9.75rem; } /* The design's vertical rhythm, as margins: 176, 276, 324 and 444 become the gaps between the blocks that precede them. */ .qb-prod { margin: 1.25rem 1.25rem 0; align-items: flex-start; } .qb-inc { margin: 1.25rem 1.25rem 0; } .qb-tbf { margin: 1rem 1.25rem 0; } .qb-price { margin: 1.5rem 0 0; } /* A real product name wraps rather than overflowing its 316 column. The price figures and the "To be finalised" note keep the design's fixed boxes: their content is fixed-format and their internals are placed by coordinate. */ .qb-prod-lines { min-width: 0; } .qb-prod-t, .qb-prod-sub { overflow-wrap: anywhere; } /* The booking cannot be made until a slot and the required details exist, so the control reads as unavailable rather than merely unresponsive. */ .qb-submit:disabled { opacity: 0.45; cursor: not-allowed; } .qb-submit:disabled:hover .qb-submit-chip img { transform: none; } /* The design right-aligns the bar's label against its chip, which reads as intended for the single word "Submit". This label is a full sentence naming the booking, so it is centred in the bar instead. */ .qb-submit-inline .qb-submit-t { text-align: center; } /* ========================================================================== DESKTOP GEOMETRY ONLY -------------------------------------------------------------------------- Everything below re-places or re-sizes something on the design's 1920 canvas. The design ships no separate mobile stylesheet: its own `@media (max-width: 767.98px)` blocks live inside quote-*.css and restate these same boxes for the 428 canvas. Unscoped, these rules outranked those blocks at every width and the phone layout inherited desktop coordinates. Scoped to >=768 they apply exactly as before on desktop — which is unchanged — and below it the design's own mobile rules govern, as they were written to. Rules that are not geometry (colour, type, wrapping, hover and disabled states, the brand wordmark) stay global above: they are correct at any width. ========================================================================== */ /* ========================================================================== AT EVERY WIDTH — elements the design does not style -------------------------------------------------------------------------- The design has no rules for these at any breakpoint: the EPC address list, the tariffs fields, the roof designer's opt-out, the Next row, the brand wordmark and the fitted logo slots are all ours. There is no mobile fallback for them to inherit, so scoping them to desktop left them positioned by the design's `> *` canvas rules on a phone. The roof designer matters most: it is an interactive map with its own controls and cannot live on a coordinate canvas at ANY width. ========================================================================== */ /* ========================================================================== THE SUBMIT BAR, INSIDE THE CARD -------------------------------------------------------------------------- The design draws its submit bar below the card at a fixed 620 wide. Here it is the contact form's own submit control, so it spans the form instead of a fixed width and takes the form's spacing. Everything else — the ink bar, the lime chip, the right-aligned label, the hover sheen — is the design's. ========================================================================== */ .qb-submit-inline { width: 100%; margin: 0; } /* ========================================================================== THE BOOKING CARD — AT EVERY WIDTH -------------------------------------------------------------------------- The design's card is a fixed box holding a SCREENSHOT of a calendar — 620x463 on the 1920 canvas, 388x488 on the 428 one — so a fixed height with `overflow: hidden` is exactly right for a picture. The real card holds the platform's country/city/date/time picker and the contact form, whose height depends on the tenant's settings and on which phase is showing. `.qb-shot` is never rendered here, so there is no picture to clip. That is a statement about the CONTENT, not about the viewport, so it has to hold at every width. It was scoped to `min-width: 768px`, which left the phone on the design's fixed 30.5rem with the 1920 sheet's `overflow: hidden` still applying — the reported bug. Measured at 390x844 on the "times" phase: card 445px · content 573px · 128px clipped away and the clip is silent, so the last time slots and the phone-number field were simply gone. The reverse case is visible in the same screenshots: the "dates" phase is SHORTER than 488, so that phase rendered a card with a slab of empty white below the day pills. An auto height fixes both directions. Only the height and the clip move here. The mobile rule's `width: auto` and `margin: 3.25rem 1.25rem 0` are real 428-canvas geometry and are left alone, and the padding below stays desktop-only on purpose: the phone card's inner panel is meant to sit flush inside it, which is how it renders today. ========================================================================== */ .qb-card { height: auto; min-height: 0; overflow: visible; } @media (min-width: 768px) { .qb-card { padding: 2rem; box-sizing: border-box; } /* ========================================================================== THE RAIL'S PACKAGE CARD -------------------------------------------------------------------------- `.qb-pkg > *` pins each block to a coordinate inside a fixed 356x564 box, authored around the design's one-word tier name. The real title is a full catalogue product name that wraps to four lines, so it ran through the "What's included" chip beneath it. The blocks now stack in flow and the card grows. The design's own gaps are preserved as margins, and with a two-line title the total is unchanged: 156 + 20 + 80 + 20 + 32 + 16 + 96 + 24 + 120 = 564. `overflow: hidden` is deliberately KEPT — it is what rounds the map's top corners to the card's radius, and with an auto height it no longer clips. ========================================================================== */ /* Lifted out of this desktop block — see THE RAIL'S PACKAGE CARD, AT EVERY WIDTH at the end of this file. */ .qb-submit:disabled:hover { transform: none; box-shadow: none; } } /* ========================================================================== THE RAIL'S PACKAGE CARD, AT EVERY WIDTH -------------------------------------------------------------------------- Same story as the booking card above and as `.qc-pkg` on the customise screen: the reasoning was about the CONTENT — "the real title is a full catalogue product name that wraps to four lines, so it ran through the 'What's included' chip beneath it" — and it was then scoped to >=768, so the phone kept the canvas coordinates and the overlap the block exists to fix. The design's own mobile block moves only the CARD (`position: relative`, `margin: 0 1.25rem`, `width: auto`) and says as much: "every y inside the card is already Figma's 428 value on the 1920 sheet". Those y values are exactly what a real name overruns, so the blocks flow at every width and the card grows. The gaps that replace the coordinates — the `.qb-prod` / `.qb-inc` / `.qb-tbf` / `.qb-price` margins — are already declared at the top level of this file, so they were correct at both breakpoints all along; only the flow was missing. ========================================================================== */ .qb-pkg { height: auto; min-height: 35.25rem; display: flex; flex-direction: column; align-items: stretch; } .qb-pkg > * { position: relative; /* NOT static — each stays the containing block for its own absolutely-placed children */ left: auto; top: auto; width: auto; flex: none; /* nothing is squeezed to fit the min-height */ } .qb-pkg > .qb-map img { position: static; left: auto; top: auto; width: 100%; height: 100%; object-fit: cover; display: block; } /* The chip's own label, for the same reason as `.qc-pkg-inc-t`. */ .qb-inc { flex-wrap: wrap; } .qb-inc-t { white-space: normal; } /* ========================================================================== THE BOOKING FORM'S FIELDS — step 1's own control -------------------------------------------------------------------------- These five carried the platform's generic input look — a 1px neutral border and an emerald focus ring — while every other field in the journey wears the design's: step 1's address card (`.qz-search` in quote-wizard.css) and, since the tariffs step was brought into line, `.qz-field input` too. So the booking form was the last one reading as a different product. Every value below is `.qz-search`'s own, copied rather than reinvented: the white fill on Figma's one real shadow, the 2px lift and deeper shadow on hover, and the 2px lime inset ring on focus, all on the same 220ms premium easing. The resting shadow is the design's `0 0 2.5rem rgba(0,0,0,0.08)`. `:focus` rather than `:focus-within`, for the same reason the tariffs fields use it: there the card is a