/* pt-booking-sticker — mobile booking sticker for /program/ pages. Spec: docs/superpowers/specs/2026-05-09-booking-sticker-design.md --primary is defined on :root in the havezic parent theme (#FB5B32). */ /* Override the wdp-booking plugin's Poppins-on-everything calendar rule. The plugin's `wp-content/plugins/wdp-booking/inc/shortcodes/jquery-ui-datepicker.css` ships `.wdp_booking_search_page_calendar *, .wdp_booking_single_package_page_calendar * { font-family: 'Poppins'; font-weight: normal; }` which applies Poppins to every descendant of the calendar wrapper — but Poppins is not loaded anywhere on this site, the actual brand font is Inter (see havezic parent theme). The browser silently falls back to a system serif/sans for Poppins which looks wrong next to the rest of the page. We reset the calendar's font to inherit so it picks up the body's Inter, and only `font-weight` stays at normal. Loaded on every to_book single (the sticker's own enqueue), so it fixes the inline widget too, not just the sticker panel. */ .wdp_booking_single_package_page_calendar *, .wdp_booking_search_page_calendar * { font-family: inherit !important; } /* Hidden by default everywhere — the [hidden] attribute is removed by JS once the script initialises, so we don't get a flash of the sticker when JS is disabled or while assets are still loading. */ .pt-booking-sticker[hidden] { display: none !important; } /* Desktop / tablet landscape: never show the sticker. The inline booking widget on the right column is enough above 880px. */ @media (min-width: 881px) { .pt-booking-sticker { display: none !important; } } /* Idle state — vertical pill anchored to the right edge of the viewport, half-tucked. JS toggles `is-visible` on/off via the IntersectionObserver. `transform-origin: 0 0` so the open/close WAAPI animations interpolate scale relative to the top-left corner — matches the simple translate+scale math in the JS rather than having to compensate for centre-based scaling. */ @media (max-width: 880px) { .pt-booking-sticker { position: fixed; right: 0; top: 50%; z-index: 9000; transform: translate(40px, -50%); transform-origin: 0 0; opacity: 0; pointer-events: none; transition: transform 200ms cubic-bezier(.4,0,.2,1), opacity 200ms cubic-bezier(.4,0,.2,1); } .pt-booking-sticker.is-visible { transform: translate(0, -50%); opacity: 1; pointer-events: auto; } .pt-booking-sticker__tab { appearance: none; -webkit-appearance: none; border: 0; margin: 0; padding: 18px 8px; width: 38px; min-height: 200px; background: var(--primary, #FB5B32); color: #fff; border-radius: 18px 0 0 18px; box-shadow: -6px 0 18px rgba(0, 0, 0, .12); cursor: pointer; font: 700 14px/1 system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; letter-spacing: .05em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; } .pt-booking-sticker__label { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; } /* Two labels live in the tab — "Book this trip" (idle) and "Close" (open states). Visibility is swapped via data-state. The DOM contains both so the screen reader can pick up whichever is currently visible without a live-region update. */ .pt-booking-sticker__label--close { display: none; } .pt-booking-sticker[data-state="opening"] .pt-booking-sticker__label--idle, .pt-booking-sticker[data-state="open"] .pt-booking-sticker__label--idle, .pt-booking-sticker[data-state="closing"] .pt-booking-sticker__label--idle { display: none; } .pt-booking-sticker[data-state="opening"] .pt-booking-sticker__label--close, .pt-booking-sticker[data-state="open"] .pt-booking-sticker__label--close, .pt-booking-sticker[data-state="closing"] .pt-booking-sticker__label--close { display: block; } .pt-booking-sticker__panel { display: none; } .pt-booking-sticker__close { appearance: none; -webkit-appearance: none; border: 0; background: transparent; color: inherit; font: 700 28px/1 system-ui, sans-serif; cursor: pointer; padding: 8px 12px; } /* While opening / open: the root flips to fullscreen-positioned. We use `100dvh` (dynamic viewport height) for the height — on iOS Safari the layout viewport (`100vh`, `inset: 0`) is bigger than the visible area because the URL bar and bottom toolbar overlay parts of it; `dvh` updates as the browser chrome shows/hides so the panel always matches the visible viewport. Older browsers fall back to `100vh` via the cascade. The actual width/height interpolation between idle pill and fullscreen runs via WAAPI on the .pt-booking-sticker root — these rules own the open END state only. */ .pt-booking-sticker[data-state="opening"], .pt-booking-sticker[data-state="open"], .pt-booking-sticker[data-state="closing"] { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; height: 100dvh; transform: none; opacity: 1; pointer-events: auto; z-index: 9001; background: #fff; border-radius: 0; } /* Panel padding clears (1) the iOS status bar / notch (env safe-area inset) AND the Safari URL bar that hovers over the top ~50–60px of the layout viewport, and (2) the open-state pull-tab that sits at `right: 0; width: 30px`. Without the right-side buffer, narrow viewports (Samsung 360px, Xiaomi 393px) end up with the calendar's Sunday column overlapping or hidden behind the pull-tab — Chromium on iOS handles the overlap gracefully because the calendar table happens to size below the buffer, but Samsung Internet and Xiaomi Mi Browser render the table fully under the tab. The asymmetric 40px right padding gives the pull-tab (30px wide) plus a 10px gap so content always stays clear. The bottom inset accounts for iOS home-indicator on phones without a hardware home button. */ .pt-booking-sticker[data-state="opening"] .pt-booking-sticker__panel, .pt-booking-sticker[data-state="open"] .pt-booking-sticker__panel, .pt-booking-sticker[data-state="closing"] .pt-booking-sticker__panel { display: flex; flex-direction: column; height: 100%; width: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: calc(env(safe-area-inset-top, 0px) + 72px) 40px calc(env(safe-area-inset-bottom, 0px) + 24px) 16px; box-sizing: border-box; background: #fff; } /* While the panel is open the original tab is repurposed as a small pull-tab on the right edge — same element, different role. The "Close" label is shown via the label-swap rules above; this rule sizes the open-state pill and keeps the font readable rather than zeroing it. */ .pt-booking-sticker[data-state="open"] .pt-booking-sticker__tab, .pt-booking-sticker[data-state="opening"] .pt-booking-sticker__tab, .pt-booking-sticker[data-state="closing"] .pt-booking-sticker__tab { position: absolute; right: 0; top: 50%; transform: translateY(-50%); min-height: 110px; width: 30px; border-radius: 14px 0 0 14px; padding: 12px 4px; font-size: 12px; z-index: 2; } /* Close × position mirrors the panel padding so it stays clear of the iOS status bar + Safari URL bar overlay. */ .pt-booking-sticker__close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 24px); right: 8px; z-index: 3; } /* The slot is the wrapping element where the booking widget DOM moves into on open. We keep it hidden during the WAAPI panel-stretch and only fade it in once `data-state` flips to "open" (the JS onfinish callback). Plain opacity fade with no translate — an earlier version had `transform: translateX(16%)` to slide content in from the right, but during the post-scale fade-in it read as a glitchy horizontal jolt. The fade alone is enough. */ .pt-booking-sticker__slot { flex: 1 1 auto; opacity: 0; transition: opacity 200ms cubic-bezier(.4, 0, .2, 1); } .pt-booking-sticker[data-state="open"] .pt-booking-sticker__slot { opacity: 1; } /* The booking widget renders inside Elementor columns by default with extra wrapping margins. When transplanted into our slot it should just occupy the whole slot with no outer margins. */ .pt-booking-sticker__slot > .wdp_booking_booking_widget_wrapper { margin: 0 !important; max-width: none; width: 100%; } }