/**
 * Fast Track booking form (page 16335 /book-fast-track/). Extracted from
 * post_content <style id="ktbookft-fix"> per task T82.
 */

.post-banner-content{position:static!important;top:auto!important;padding:0!important;height:auto!important}.post-banner{min-height:0!important}.post-banner-title{color:#1a1a1a!important;font-size:34px!important;line-height:1.2!important;margin:6px 0 18px!important}@media(max-width:600px){.post-banner-title{font-size:24px!important;margin:4px 0 12px!important}}.ktwachat{display:flex;align-items:center;gap:10px;background:#25D366;color:#fff!important;text-decoration:none;font-weight:600;font-size:13.5px;line-height:1.35;padding:11px 15px;border-radius:10px;margin:14px 0 2px}.ktwachat:hover{background:#1ebe57}.ktwachat .ktwachat-ic{flex:0 0 22px;display:flex}.ktwachat svg{width:22px;height:22px;fill:#fff}.ktwafab{position:fixed;left:20px;bottom:22px;z-index:9998;display:flex;align-items:center;gap:9px;background:#25D366;color:#fff!important;text-decoration:none;font-weight:700;font-size:15px;padding:13px 18px;border-radius:50px;box-shadow:0 6px 20px rgba(0,0,0,.22);transition:transform .15s}.ktwafab:hover{transform:translateY(-2px)}.ktwafab svg{width:24px;height:24px;fill:#fff}@media(max-width:600px){.ktwafab{left:14px;bottom:16px;padding:13px}.ktwafab-txt{display:none}}/* T-- left-align the form so its left edge matches the breadcrumb above it: the widget's own .ktft{margin:0 auto} rule (top of this post_content) centers the 660px card inside its 800px column (#brxe-aqunwc), pushing it ~70px right of the breadcrumb's left edge -- both #brxe-nflzww (breadcrumb) and #brxe-ceewry (form) share the same .brxe-container box model (1310px, 15px side padding), and #brxe-aqunwc/.brxe-post-content add no extra padding, so overriding margin here is enough to flush the two left edges. Wins on source order (same specificity as the original .ktft rule, this block comes later in the document) -- no !important needed. */.ktft{margin:0!important;max-width:1000px!important}#brxe-aqunwc{max-width:1040px!important}/* WhatsApp field error floated right as a 3rd flex item: showFieldError() (ft-booking-form.js) inserts #ph-error as a sibling of #cc/#ph inside their flex row -- wrap the row and force the error onto its own full-width line. */div:has(> #cc){flex-wrap:wrap}#ph-error{flex:0 0 100%!important;width:100%!important}/* T-- regression fix: flex-wrap:wrap above (needed so #ph-error drops to its own line) also let #ph wrap to a 2nd row since it had no flex-grow/shrink of its own and #cc(flex:0 0 128px) + #ph's natural width overflowed the row. Let #ph shrink to share row 1 with #cc instead -- min-width:0 allows shrinking below its content width so it doesn't force a wrap; #ph-error{flex:0 0 100%} still forces itself (and only itself) onto row 2. */div:has(> #cc) > #ph{flex:1 1 0;min-width:0}/* TEMPORARY (owner request 2026-07-16): hide the JS-built "how would you like to pay" PayPal/Reserve chooser -- only Reserve now stays for now, PayPal opt-in deferred until a sandbox E2E. Safe to hide entirely: ft-booking-form.js defaults its `paymentMethod` variable to PAYMENT_METHODS.COD ('cod'/Reserve, see DEFAULT_PAYMENT_METHOD) and only changes it when one of these buttons is clicked -- hiding them just leaves that variable at its default, submit still sends payment_method:'cod'. The "Reserve now ->" submit button + its subtext are a separate element, untouched. Delete this rule to bring PayPal back. */#ft-payment-choice{display:none}/* T-- shrink the gap between the H1 banner and the form. Root cause is two things: (1) .post-banner-excerpt -- Bricks' auto-generated post excerpt, duplicating the .ktft card's own intro text -- was never styled for this page and is still white (#fff) text on the site's white --bg-body, so it's fully invisible yet its 24px/bold/line-height:1.33 box still reserves ~2 lines of vertical space; hiding it removes that reserved space and loses nothing visible. (2) .post-banner itself carries Bricks' global hero-banner margin-bottom:36px -- tightened to a normal heading-to-content gap. Breadcrumb, H1 title, and the form stay fully visible/untouched. */.post-banner-excerpt{display:none}.post-banner.brxe-div{margin-bottom:12px!important}/* T-- owner reversed the airport-row part of the above: arrive|depart must stay side-by-side 50/50 on mobile too, not stacked -- so the explicit .row:has(> #w-arr){grid-template-columns:1fr} override is GONE, leaving that row on its default .ktft .row{grid-template-columns:1fr 1fr} at every width. Grid items default to min-width:auto (won't shrink below their content's intrinsic width -- e.g. the "Tan Son Nhat (SGN)" <select>) even though the track is only 50% wide, which overflows/squeezes one side; min-width:0 lets the actual 50% track win so both columns stay genuinely even. Truncated select text at very narrow widths is an accepted tradeoff for 50/50 (owner call). .ktft .trio{grid-template-columns:1fr} (date/flight/time stacked within each column) is unchanged from before. *//* T-- root cause found by team lead via Playwright/CSSOM at 390px: the widget's OWN base stylesheet (top of this post_content) defines .ktft .row{grid-template-columns:1fr 1fr} unconditionally, AFTER its own @media(max-width:620px){.ktft .row{grid-template-columns:1fr}} in source order -- so the unconditional rule always won the cascade and the widget's built-in mobile stacking never fired; our earlier .row:has(...) overrides (no !important, comparable specificity) lost the same way. Adding !important here is what actually wins. */@media(max-width:820px){.ktft .trio{grid-template-columns:1fr!important}.ktft .row:has(.paxrow){grid-template-columns:1fr!important;grid-auto-flow:row!important}.ktft .row:has(#nm){grid-template-columns:1fr!important;grid-auto-flow:row!important}.ktft .row:has(#w-arr){grid-template-columns:1fr 1fr!important}}/* T-- airport row: forced 50/50 above, but its <select>s refuse to shrink below their own text (min-width:auto default on grid items), leaving one column wider than the other -- min-width:0 on the row's children AND width:100% on the select/input themselves is what makes the two columns genuinely equal. Truncated text at very narrow widths is the accepted tradeoff for staying 50/50 (owner call). */.ktft .row:has(#w-arr) > *{min-width:0!important}.ktft .row:has(#w-arr) select,.ktft .row:has(#w-arr) input{width:100%!important;min-width:0!important}