/* ========================================================================== Tropic Booking Widget — streamlined layout Scoped entirely to form #gform_wrapper_3. Safe to load alongside the existing theme/GF styles — nothing here is a global override. ========================================================================== */ /* Also declared on :root (not just #gform_wrapper_3 below): the mobile Travelers popover (#tbw-pax-popover) gets moved to be a direct child of when it opens at ≤767px - see tropic-booking-widget.js - so it can escape the theme's own fixed header, which sits in a different part of the DOM with a z-index (99999) high enough that no z-index on an element still nested inside #gform_wrapper_3 could ever out-stack it. CSS custom properties only cascade to descendants of whichever element defines them, so once the popover is a sibling of #gform_wrapper_3 instead of a descendant, var(--tbw-ink) etc. would otherwise resolve to nothing there - confirmed live (the header bar and Continue button went invisible: white text with no fallback background is exactly what an unresolved var() produces here). */ :root, #gform_wrapper_3 { --tbw-gold: #ce9f59; --tbw-gold-deep: #b6874a; --tbw-teal: #16a4ad; --tbw-ink: #131729; --tbw-line: #e2ded2; } /* ---- row 1: Trip Type + Passengers — compact, left aligned, no labels ---- NOTE: the live theme lays these fields out as plain inline-block boxes inside a block-level #gform_fields_3 container (not flexbox) - each .gfield just flows left-to-right and wraps like text. Anything we insert between them has to be inline-block too, or being block-level forces a line break and pushes everything after it onto its own row. */ #gform_wrapper_3 #field_3_16 { flex: 0 0 auto !important; min-width: 0 !important; position: relative; } #gform_wrapper_3 #field_3_16 .gfield_label, #gform_wrapper_3 #field_3_1 .gfield_label, #gform_wrapper_3 #field_3_3 .gfield_label, #gform_wrapper_3 #field_3_5 .gfield_label, #gform_wrapper_3 #field_3_4 .gfield_label { display: none !important; } /* Kept in the DOM for submission, but visually replaced by the tbw-trigger + tbw-triptype-popover built in tropic-booking-widget.js (a native s are hidden this same way). */ #gform_wrapper_3 #field_3_16 select.gfield_select { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } /* Adults / Children / Infants selects are replaced by the Passengers widget below */ #gform_wrapper_3 #field_3_6, #gform_wrapper_3 #field_3_7, #gform_wrapper_3 #field_3_8 { display: none !important; } .tbw-passengers { position: relative; display: inline-block; vertical-align: top; margin-left: 22px; } .tbw-trigger { all: unset; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-family: "Raleway", Arial, sans-serif; font-size: 15px; color: var(--tbw-ink); white-space: nowrap; font-weight: 600; } /* A drawn chevron (not a unicode glyph) so it renders the same crisp "v" shape, weight, and color as the browser's own native