/* Mobile accessibility floors: tap targets >=44px + readable labels. Loaded LAST in (after page.css and per-page inline styles), so these class-level rules win by source order without needing !important. */ @media (max-width: 640px) { /* Slider dots — expand the invisible TAP area (visual dot unchanged). */ .hero__dot, .offer__dot, .room-hero__dot { position: relative; } .hero__dot::after, .offer__dot::after, .room-hero__dot::after { content: ""; position: absolute; top: 50%; left: 50%; width: 40px; height: 44px; transform: translate(-50%, -50%); } /* Key CTAs and controls — minimum tap height. */ .sticky-book__btn { min-height: 48px; } .sticky-book__call { min-height: 44px !important; min-width: 44px !important; } .sticky-book__btn, .room__btn { display: inline-flex; align-items: center; justify-content: center; } .room__btn { min-height: 44px; } .arrow-link, .hero-rating, .room-hero__zoom, .header__lang, .lang-switch__cur, .skip-link { min-height: 44px !important; display: inline-flex; align-items: center; } #cookie-accept { min-height: 44px !important; } /* Language-menu option links. */ .header__lang-menu a, .lang-switch__menu a { min-height: 44px !important; display: flex; align-items: center; } /* Font floors — lift the smallest labels/controls to the 12px readability minimum. !important: page + Astro-scoped component styles are more specific (e.g. .room--featured .room__tag, footer [data-astro-cid]), so a plain class rule loses the cascade without it. */ .sticky-book__price-from, .room-benefits__k, .room__tag, .room-hero__tag, .footer-brand__sub, .up2__ck, .eyebrow, .hero__eyebrow, .eyebrow--on-dark, .usp__label, .awards__label, .awards__caption, .guide-card__tag, .guide-card__meta, .footer__col-h, .price-off, .price-was, .room__price-from, .room__price-sub, .gy-price__from, .gy-price__sub, .room__btn, .sticky-book__btn, .btn--gold, .btn--primary, .header__cta, .header__lang-menu a, .lang-switch__menu a, small { font-size: 12px !important; } } /* Persistent tap-to-call FAB — mobile only, bottom-left (bottom-right is the TravelLine price pill). Phone drives ~36% of revenue but the header phone is hidden on mobile, so give guests a one-tap call from anywhere. */ .call-fab { display: none; } @media (max-width: 640px) { .call-fab { display: flex; align-items: center; justify-content: center; position: fixed; left: 14px; bottom: 16px; z-index: 90; width: 54px; height: 54px; border-radius: 50%; background: var(--c-gold, #B8893C); color: #1F1B14; box-shadow: 0 6px 20px rgba(31, 27, 20, 0.30); -webkit-tap-highlight-color: transparent; } .call-fab svg { width: 25px; height: 25px; } .call-fab:active { transform: scale(0.94); } /* Bottom booking bars slide in over the FAB (the homepage price bar, the guide and geo-landing CTAs). None of them carries a call button, so the FAB lifts above the bar rather than hiding — phone is a major booking channel. Measured heights: .sticky-cta 79px, .gcta-sticky/.gsell-sticky 115px; the values below clear each with a ~12px gap. (.gy-sticky and .of-sticky sit at top:0 and never reach the FAB.) */ .call-fab { transition: bottom 220ms ease; } :root:has(.sticky-cta.is-visible) .call-fab { bottom: 92px; } :root:has(.gcta-sticky.is-on) .call-fab, :root:has(.gsell-sticky.is-on) .call-fab { bottom: 128px; } /* The cookie bar (bottom, one-time) briefly overlaps the FAB; once the guest accepts it, the FAB sits clear at bottom-left for the rest of the session. */ /* Room pages have a call button in the sticky-book bar; /book has the payment card. */ :root:has(.sticky-book) .call-fab, :root:has(.bk-payhelp) .call-fab { display: none; } }