/* Theme Name: Bali Travelica Description: Mobile UI/UX fixes — prevents horizontal scroll, pinch-zoom, and any element from spilling outside the viewport. Loaded last so it can override loose widget styles. Version: 1.0.0 */ /* ============================================================ 1. GLOBAL GUARDRAILS - html/body locked to viewport width - prevents bleed from any rogue full-width section ============================================================ */ html, body { max-width: 100%; overflow-x: clip; /* clip > hidden: keeps fixed/sticky working but blocks scroll */ -webkit-text-size-adjust: 100%; } /* Modern browsers — fall back to hidden when clip is not supported */ @supports not (overflow: clip) { html, body { overflow-x: hidden; } } /* ============================================================ 2. MOBILE LOCK — disable horizontal pan + pinch-zoom ============================================================ */ @media (max-width: 991px) { html, body { /* Allow vertical scroll only — kills the "swipe-the-page-sideways" gesture */ touch-action: pan-y; overscroll-behavior-x: none; } /* Every direct child of stays inside the viewport */ body > * { max-width: 100vw; } /* Common page wrappers used across the theme */ .site, #page, .site-main, main, .bbt-container, .container, .wrap { max-width: 100vw; overflow-x: clip; } /* Block accidental horizontal-scroll from full-width hero / Tailwind utilities */ [class*="w-screen"], .premium-hero-wrapper { max-width: 100vw !important; } /* Stop pinch-to-zoom on images, videos, iframes, maps */ img, video, iframe, canvas, svg, picture, embed { max-width: 100%; height: auto; touch-action: pan-y; } /* Maps and embeds keep their own pan behaviour */ iframe[src*="google.com/maps"], iframe[src*="youtube.com"], iframe[src*="vimeo.com"] { touch-action: auto; } } /* ============================================================ 3. SLIDER / CAROUSEL CONTAINMENT The biggest culprit for horizontal scroll is Swiper with `overflow: visible` — we re-enable clipping on mobile. ============================================================ */ @media (max-width: 991px) { .bbt-tour-carousel { padding-left: 16px; padding-right: 16px; max-width: 100vw; overflow: hidden; } .bbt-tour-carousel .swiper, .bbt-testimonials-slider .swiper, .swiper-container, .swiper { overflow: hidden !important; max-width: 100%; } /* Swiper auto-arranged slides should never exceed the wrapper */ .swiper-wrapper { max-width: 100%; } .swiper-slide { max-width: 100%; height: auto; } /* Hide arrow buttons on mobile — they push content out of view */ .bbt-tour-carousel .swiper-button-prev, .bbt-tour-carousel .swiper-button-next { display: none; } .bbt-tour-carousel .swiper-pagination { margin-top: 16px; } /* Generic horizontal-scroll lists (chips, filter pills, etc.) */ .bbt-scroll-x, .scroll-x { scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .bbt-scroll-x::-webkit-scrollbar, .scroll-x::-webkit-scrollbar { display: none; } } /* ============================================================ 4. COOKIE CONSENT BANNER — keep it inside viewport ============================================================ */ .bbt-consent { box-sizing: border-box; max-width: calc(100vw - 1rem) !important; } @media (max-width: 600px) { .bbt-consent { left: 0.5rem !important; right: 0.5rem !important; bottom: 0.5rem !important; width: auto !important; max-width: calc(100vw - 1rem) !important; padding: 1rem !important; border-radius: 14px !important; font-size: 0.85rem !important; } .bbt-consent__inner { width: 100%; } .bbt-consent__copy { font-size: 0.82rem; line-height: 1.45; } .bbt-consent__actions { flex-direction: column-reverse !important; gap: 0.5rem !important; } .bbt-consent__btn { width: 100% !important; } .bbt-consent__prefs { gap: 0.5rem; } .bbt-consent__pref { font-size: 0.8rem; } } /* ============================================================ 5. TABLES & FORM ELEMENTS — common overflow sources ============================================================ */ @media (max-width: 991px) { table { display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Wide form rows wrap instead of pushing layout */ .bbt-form-row, .bbt-search-form > * { flex-wrap: wrap; } /* Inputs stay inside their parent */ input, select, textarea { max-width: 100%; width: 100%; box-sizing: border-box; } /* Mega menu / dropdowns shouldn't overflow */ .bbt-mega-menu, .bbt-dropdown, .bbt-mobile-menu { max-width: 100vw; } } /* ============================================================ 6. ELEMENTOR & EXTERNAL CONTAINERS ============================================================ */ @media (max-width: 991px) { .elementor-section, .elementor-container, .e-con, .e-con-inner { max-width: 100% !important; } .elementor-image-carousel-wrapper, .elementor-testimonial-content, .elementor-slides { overflow: hidden; } } /* ============================================================ 7. WHATSAPP FLOAT — keep above safe area, never off-screen ============================================================ */ @media (max-width: 600px) { .bbt-whatsapp-float, .whatsapp-float { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); } } /* ============================================================ 8. ANTI-ZOOM HELPERS - inputs use 16px so iOS Safari doesn't auto-zoom - all touchable controls have a pan-y action ============================================================ */ input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px; } button, a, [role="button"], .bbt-btn { touch-action: manipulation; /* removes 300ms tap-zoom delay */ }