/* * ios_ionic_override_2024.css — iOS safe-area fixes (body.ios / html.ios only) */ /* ── 1. RED NOTCH BACKGROUND ──────────────────────────────── */ html.ios { background-color: #AE2326 !important; } body.ios { padding-top: 0 !important; padding-bottom: 0 !important; } /* ── 2. FIXED NAV BAR ─────────────────────────────────────── */ body.ios nav { background: linear-gradient(#AE2326 40%, #ae2325cc) !important; top: env(safe-area-inset-top) !important; height: 48px !important; line-height: 48px !important; position: fixed !important; width: 100% !important; box-sizing: border-box !important; z-index: 100 !important; } /* ── 3. CONTENT CONTAINER — start below status bar + nav ───── position:absolute top:0 is relative to viewport edge, so we move the container itself rather than using body padding. */ body.ios #content_container { top: calc(env(safe-area-inset-top) + 48px) !important; /* Do NOT set bottom: safe-area-inset-bottom — it exposes the red html.ios background behind the home indicator bar. */ } /* ── 4. CONTENT LOADERS — no extra padding needed now ────── */ body.ios .content_loader_normal { padding-top: 0 !important; } body.ios .content_loader_iscroll { padding-top: 0 !important; } body.ios #content_loader { padding-top: 0 !important; } /* ── 5. OVERLAY BAR (in-flow inside overlays) ───────────── */ /* Keep #overlay_bar in-flow (not fixed). The overlay's padding-top pushes it below the notch. Use position:relative (NOT static) so that its position:absolute children (close btn, info btn, back btn) use IT as their containing block — not #overlay which starts at top:0. */ body.ios #overlay_bar { position: relative !important; top: auto !important; width: 100% !important; height: 48px !important; padding-top: 0 !important; box-sizing: border-box !important; } /* ── 6. FULL-SCREEN OVERLAYS appended to ──────────── Keep top:0 so the overlay covers the FULL viewport. Use padding-top to push content below the notch. The gradient makes the safe-area zone red (matching the nav/overlay-bar) instead of plain white. */ body.ios #overlay, body.ios #action_layer, body.ios .afri_overlay, body.ios .afri_overlay_terms, body.ios .afri_overlay_privacy { top: 0 !important; height: 100% !important; padding-top: env(safe-area-inset-top) !important; box-sizing: border-box !important; background: linear-gradient( to bottom, #AE2326 calc(env(safe-area-inset-top) + 48px), #ffffff calc(env(safe-area-inset-top) + 48px) ) !important; } /* Push action_layer_content below the fixed nav bar (48px) so it is not overlapped — mirrors what #content_container does for the main screen. */ body.ios #action_layer_content { padding-top: 48px !important; } /* ── 7. MATERIALIZE SIDE-NAV DRAWER ──────────────────────── */ /* Do NOT add padding-top to .side-nav itself — it disrupts Materialize's stacking context. Instead, push down only the userView profile header. Also suppress pointer-events on the drag-target and sidenav-overlay so they don't intercept taps on menu items. */ body.ios .side-nav { z-index: 1000 !important; } /* Disable the swipe-to-open drag target on iOS native — it intercepts taps within the side-nav area and closes the menu instead of following links */ body.ios .drag-target { pointer-events: none !important; } /* sidenav-overlay should only close the nav when tapping OUTSIDE the nav. Its z-index(997) < side-nav(1000) so the nav items should win, but belt-and-suspenders: ensure nav items area isn't blocked. */ body.ios #sidenav-overlay { width: calc(100% - 300px) !important; left: 300px !important; } /* Push the profile/avatar header down so it clears the notch */ body.ios .side-nav .userView { padding-top: calc(env(safe-area-inset-top) + 16px) !important; padding-bottom: 20px !important; margin-top: 0 !important; } /* ── 8. SERVICES OVERLAY (full-screen red menu) ───────────── */ body.ios #services_menu_2024_overlay { top: 0 !important; padding-top: env(safe-area-inset-top) !important; box-sizing: border-box !important; } body.ios #services_menu_2024_close { padding-top: 0 !important; margin-top: 0 !important; } /* ── 9. NAV TITLE & ACTION ELEMENTS ──────────────────────── */ body.ios #action_current_view, body.ios #current_view { margin-top: 0 !important; } body.ios .two_lines { padding-top: 0 !important; line-height: 20px !important; } body.ios .two_lines > div { display: block !important; font-size: 11px !important; opacity: 0.85 !important; margin-left: 0 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } /* position:absolute inside fixed

— containing block is the

which is already at env(safe-area-inset-top). So top:0 = top of nav = correct. */ body.ios #notifications, body.ios .menu_additional_share, body.ios .menu_additional_chat, body.ios .menu_additional_search { top: 0 !important; } /* position:fixed, viewport-relative — needs explicit safe-area offset to sit in the nav bar rather than behind the Dynamic Island. */ body.ios .btn_action_info, body.ios #btn_back_to_order, body.ios #btn_order_screen_chat, body.ios #btn_order_screen_reload { top: env(safe-area-inset-top) !important; } /* ── 9b. CHAT OVERLAY ICONS ──────────────────────────────── */ /* These are position:fixed;top:0 in afri_chat.css — on iOS that puts them behind the Dynamic Island. Move them down to nav height. */ body.ios #chat_location_btn, body.ios #chat_settings_btn { top: env(safe-area-inset-top) !important; } /* Chat messages area: base CSS uses margin-top:48px + height:calc(100vh-102px). Its static position is already pushed down by #action_layer padding, so we must use 'top' explicitly and reset 'margin-top' to avoid a double-gap. */ body.ios #chat_messages { top: calc(env(safe-area-inset-top) + 48px) !important; margin-top: 0 !important; height: calc(100vh - env(safe-area-inset-top) - 102px) !important; } /* ── 10. MISC ────────────────────────────────────────────── */ body.ios .pizza_nav { text-shadow: none !important; min-height: auto !important; background-color: #ae2326 !important; clip-path: polygon(0 0, 100% 0, 100% 80%, 0% 100%) !important; } body.ios .pizza { height: auto !important; } body.ios #user_photo, body.ios #user_photo_not_signed_in { margin-top: 0 !important; } body.ios #office_closed_notice_text, body.ios .ol_search { margin-top: 0 !important; } /* customer_care_lady sits inside #action_layer_content whose padding-top now clears the nav — no extra margin needed. */ body.ios #customer_care_lady { margin-top: 0 !important; } /* ── 12. SIDE-NAV NAME & EMAIL CONTRAST ───────────────────── Background image removed — solid #AE2326 header is used instead. Ensure name/email are fully opaque white with a subtle shadow so they read clearly regardless of the photo avatar next to them. */ body.ios #nav_name_display, body.ios #nav_email_display, #nav_name_display, #nav_email_display { color: #ffffff !important; opacity: 1 !important; text-shadow: 0 1px 3px rgba(0,0,0,0.4) !important; } /* ── 11. FLOATING CART — clear home-indicator bar ─────────── */ body.ios #shopping_cart_new, body.ios #shopping_cart { bottom: calc(env(safe-area-inset-bottom) + 16px) !important; }