/* bn-safe-area.css — keep sheets, modals and panels out from under the phone's * status bar and home indicator. * =========================================================================== * THE BUG (Urban Dogs, 2026-08-03): "the collapse X is where the battery is for * the phone so you cant close them." * * It is arithmetic, and it is not waiver-specific. Every page here sets * `viewport-fit=cover`, which means 100vh spans the WHOLE screen including the * status bar. A sheet that is `max-height: 95vh` and anchored to the bottom * therefore puts its top edge 5vh down — about 42px on a 844px iPhone — while * the iOS status bar is 47-59px tall on a notched device. The sheet header, and * the close button living in it, sit UNDERNEATH the clock and battery. The user * cannot tap what the operating system is drawing over. * * The same is true of every `90vh` modal in the app, and of footers that run to * the bottom edge underneath the home indicator. Roughly 25 live pages each * carry their own copy of these modal styles, so this is fixed once here rather * than 25 times. * * WHY IT DEGRADES SAFELY: env() resolves to 0px anywhere there is no inset — * desktop, Android without a cutout, older browsers. On those the sheet simply * loses --bn-sheet-gap (12px) of height and nothing else changes. There is no * branch that can misfire. * * The values are routed through CSS variables rather than calling env() inline * so the behaviour can be exercised in a desktop browser (override * --bn-safe-top to simulate a notch) instead of being unverifiable until it * reaches a real phone. */ /* ── TWO CHANNELS, because Android does not use env() ──────────────────────── * On iOS the inset arrives through env(safe-area-inset-*). On Android it does * NOT: Capacitor 8 injects `--safe-area-inset-*` as inline custom properties on * (see SystemBars.injectSafeAreaCSS), precisely because env() is not * dependable in Android WebView. This app read env() everywhere and that * variable nowhere, so on Android the inset was always 0 — which is why the * system navigation bar sat over the bottom tab bar. * * It only bites on Android 15+: targetSdk is 36, where Google removed the * edge-to-edge opt-out, so the WebView is drawn under the nav bar with no * native way to decline. * * max() of the two is correct everywhere and a NO-OP wherever the inset is 0 — * desktop and iOS render byte-identically. Capacitor writes its variable as an * INLINE style on , so it always beats this stylesheet default. * * A 3-button nav bar is 48dp against a gesture bar's ~24dp, which is why this * surfaced now: the older hand-tuned +28px workarounds were sized for gestures. */ :root { --bn-safe-top: max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px)); --bn-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px)); --bn-safe-left: max(env(safe-area-inset-left, 0px), var(--safe-area-inset-left, 0px)); --bn-safe-right: max(env(safe-area-inset-right, 0px), var(--safe-area-inset-right, 0px)); /* Breathing room between the status bar and the top of a sheet, so the close * button is not merely clear of the bar but comfortably tappable. */ --bn-sheet-gap: 12px; } /* ── Headers that carry the close button — THE ACTUAL FIX ──────────────────── * Padding, not margin, and not a max-height clamp on the sheet. * * The tempting fix is to shrink the sheet (`max-height: calc(95vh - inset)`) so * it never reaches under the status bar. That was tried and removed: forcing one * height across ~34 pages that variously use 90vh and 95vh changes modal sizes * on DESKTOP, where there is no inset and nothing was wrong — a visible change * nobody asked for, on every booking page at once, to fix a phone-only bug. * * Padding the header does the whole job and is inert without an inset: * `max(16px, inset + 8px)` is exactly 16px when the inset is 0, so desktop * renders byte-identically to before. On a notched phone the close button moves * below the clock and battery, which is the reported complaint. And because this * is padding, the sheet's own background fills the strip behind the status bar * rather than leaving a transparent gap — so it also looks deliberate. */ .waiver-header, .stripe-modal-header, .map-modal-header, .day-modal-header, .pricing-panel-header { padding-top: max(16px, calc(var(--bn-safe-top) + 8px)); } /* ── Footers and action rows ───────────────────────────────────────────────── * The home indicator sits over the bottom ~34px. A footer button flush to the * bottom edge is half-covered and swipes the app away instead of submitting. */ .stripe-modal-footer, .waiver-footer, .map-modal-footer, .modal-footer { padding-bottom: max(16px, calc(var(--bn-safe-bottom) + 8px)); } /* ── Full-screen overlays ──────────────────────────────────────────────────── * Overlays themselves stay edge-to-edge — the dimmed backdrop SHOULD cover the * whole screen. Only their content is inset, which the rules above handle. The * exception is a top-anchored overlay, where content starts at the very top. */ .mobile-menu-overlay, .lightbox-overlay { padding-top: var(--bn-safe-top); padding-bottom: var(--bn-safe-bottom); } /* ── Close buttons ─────────────────────────────────────────────────────────── * 44x44 is the documented minimum touch target on iOS and the practical floor * on Android. Several of these render as a bare 24px icon, which is hard to hit * even when it is not under the status bar. Sizing only — no colour, no border, * so each page keeps its own styling. */ .waiver-close-btn, .stripe-modal-close, .map-modal-close, .day-modal-close { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } /* Landscape / foldables: a cutout can be on the side instead of the top. */ @media (orientation: landscape) { .waiver-modal, .stripe-modal, .map-modal, .day-modal, .modal-content { margin-left: var(--bn-safe-left); margin-right: var(--bn-safe-right); } } /* ── BOTTOM BARS — the system navigation bar overlap ───────────────────────── * The rule above this only ever covered modal FOOTERS (.modal-footer and * friends). It matched no tab bar anywhere in the app — zero elements on * customer.html, the single most affected page. These are the real ones. * * PADDING, never a height clamp — same reasoning as the sheet headers above. * The max(literal, inset) idiom keeps desktop and iOS exactly as they are: * where the inset is 0 the literal wins and nothing moves. * * NOTE this cannot reach the booking wizards. They run inside an