/* --------------------------------------------------------------------------- WhatsApp help bubble — /book/ only. Mounted on , outside .nara-v, so none of the SPA's element resets reach it. The design tokens it uses are declared on :root in colors_and_type.css, which is enqueued as a dependency. --nara-v-wa-bottom is written by whatsapp-bubble.js from the measured height of the fixed mobile action bar. The value here is the no-bar resting state (desktop, and step 5 on mobile). --------------------------------------------------------------------------- */ .nara-v-wa { position: fixed; right: 20px; bottom: var(--nara-v-wa-bottom, 24px); z-index: 70; display: inline-flex; align-items: center; height: 56px; max-width: 56px; padding: 0; overflow: hidden; background: var(--nara-terracotta, #AE6C4A); color: #fff; border: 0; border-radius: var(--radius-pill, 999px); box-shadow: var(--shadow-md, 0 8px 24px rgba(42, 36, 32, 0.08)); font-family: var(--font-sans, sans-serif); font-size: var(--fs-body-s, 0.9375rem); line-height: 1; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: max-width var(--dur-base, 280ms) var(--ease-standard, ease), bottom var(--dur-base, 280ms) var(--ease-standard, ease), background-color var(--dur-base, 280ms) var(--ease-standard, ease), box-shadow var(--dur-base, 280ms) var(--ease-standard, ease); } .nara-v-wa:visited { color: #fff; } .nara-v-wa-icon { flex: 0 0 56px; width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; } .nara-v-wa-icon svg { width: 26px; height: 26px; display: block; fill: currentColor; } /* Present for screen readers and for the hover reveal, but it must not force the collapsed pill wider than its 56px circle. */ .nara-v-wa-label { white-space: nowrap; padding-right: 22px; letter-spacing: var(--ls-button, 0.08em); } /* Reveal the label only where a pointer can actually hover. On touch the bubble stays a circle: a tap opens WhatsApp, so an expand state would be a frame the guest never sees. */ @media (hover: hover) and (pointer: fine) { .nara-v-wa:hover, .nara-v-wa:focus-visible { max-width: 260px; background: var(--nara-bronze-deep, #8A5436); box-shadow: var(--shadow-lg, 0 20px 48px rgba(42, 36, 32, 0.12)); } } /* Keyboard users get the same reveal on every input type, hover or not. */ .nara-v-wa:focus-visible { max-width: 260px; outline: 2px solid var(--nara-ink, #4A3227); outline-offset: 3px; } .nara-v-wa:active { transform: translateY(1px); } @media (prefers-reduced-motion: reduce) { .nara-v-wa { transition: none; } } /* Steps 1-4 carry a fixed action bar and booking.css already reserves 140px for it, which the JS measures and clears. Step 5's action row is inline instead, so it scrolls to rest at the bottom of the viewport, exactly where the bubble sits: a tap on the right edge of "Continue to secure checkout" opened WhatsApp instead of submitting the booking. Reserve enough room below it that the row can never come to rest under the bubble (56px circle + 24px resting gap, plus margin). Matches NARA_MOBILE_BREAKPOINT (780). */ @media (max-width: 780px) { .nara-v-step5 { padding-bottom: 96px; } }