/* ========================================================= COMPLETE REPLACEMENT — Mishpatapp “Real App Shell” Requirement: - Bottom footer/nav is NOT part of content - Footer is stuck to the very bottom of the screen - ONLY content scrolls - No content is ever hidden behind footer - iOS/Android safe-area supported - Works with RTL + multilingual fonts (kept from your file) Expected DOM:

...

========================================================= */ /* ========================================================= Design Tokens + Typography System (Unified, Multilingual) ========================================================= */ :root{ /* Colors */ --border:#d8dce3; --bg:#f4f6fb; --card:#ffffff; --text:#0f172a; --muted:#64748b; --accent:#2ecc71; --pill:#16a34a; --pillText:#fff; --soft:#eef2ff; --shadow: 0 8px 24px rgba(15, 23, 42, .08); /* App layout */ --app-header-h: 64px; /* Footer/Nav layout */ --app-footer-h: 64px; /* your nav height */ --app-footer-gap: 12px; /* inset margin around floating footer */ /* Content padding */ --page-pad-x: 14px; --page-pad-y: 14px; /* Safe areas */ --safe-top: env(safe-area-inset-top); --safe-bottom: env(safe-area-inset-bottom); /* Font families */ --font-en: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-ru: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --font-he: Heebo, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --font-ar: "Noto Sans Arabic", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; /* Unified font weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --fw-xbold: 800; --fw-black: 900; /* Line heights */ --lh-tight: 1.1; --lh-normal: 1.5; --lh-relaxed: 1.7; } /* ========================================================= Global base (APP MODE: no body scroll) ========================================================= */ * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } html { font-family: var(--font-en); } html[lang="en"] { font-family: var(--font-en); } html[lang="ru"] { font-family: var(--font-ru); } html[lang="he"] { font-family: var(--font-he); } html[lang="ar"] { font-family: var(--font-ar); } body{ /* App-like viewport behavior */ min-height: 100dvh; overflow: hidden; /* IMPORTANT: body never scrolls */ display:flex; flex-direction:column; color: var(--text); background: var(--bg); font-weight: var(--fw-regular); line-height: var(--lh-normal); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overscroll-behavior: none; /* prevents “page bounce” behind the app */ } /* Slight breathing room for RTL scripts */ html[lang="he"] body, html[lang="ar"] body{ line-height: var(--lh-relaxed); } /* ========================================================= APP SHELL WRAPPER (the real layout engine) ========================================================= */ #app-shell{ height: 100dvh; display:flex; flex-direction:column; overflow:hidden; /* IMPORTANT */ } /* ========================================================= Headings (normalized across languages) ========================================================= */ h1{ font-size: clamp(26px, 4vw, 40px); font-weight: var(--fw-black); line-height: var(--lh-tight); } h2{ font-size: clamp(22px, 3.2vw, 30px); font-weight: var(--fw-xbold); line-height: var(--lh-tight); } h3{ font-size: 18px; font-weight: var(--fw-bold); line-height: var(--lh-tight); } /* Hebrew & Arabic look heavier → soften weights */ html[lang="he"] h1, html[lang="ar"] h1{ font-weight: var(--fw-xbold); } html[lang="he"] h2, html[lang="ar"] h2{ font-weight: var(--fw-bold); } html[lang="he"] h3, html[lang="ar"] h3{ font-weight: var(--fw-semibold); } /* ========================================================= App Header (NOT scrollable) — upgraded to 2-row layout ========================================================= */ #app-header{ flex: 0 0 auto; padding-top: var(--safe-top); position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); } /* Rows */ #app-header .row{ display:flex; align-items:center; justify-content: space-between; gap: 12px; padding-inline: var(--page-pad-x); } #app-header .row.top{ height: 56px; } #app-header .row.sub{ height: 52px; padding-bottom: 8px; } /* Brand */ .brand{ display:inline-flex; align-items:center; gap: 10px; font-weight: var(--fw-xbold); font-size: 22px; letter-spacing: -0.2px; } .brand .dot{ width: 18px; height: 18px; border-radius: 999px; background: var(--pill); box-shadow: 0 0 0 4px rgba(22,163,74,0.12); } /* Titles */ .titles{ flex: 1 1 auto; min-width: 0; } /* Direction-aware alignment */ html[dir="ltr"] .titles { text-align: left; } html[dir="rtl"] .titles { text-align: right; } .title, .subtitle { text-align: inherit; } .title{ font-size: 20px; font-weight: var(--fw-black); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .subtitle{ margin-top: 2px; font-size: 12px; color: var(--muted); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Actions area */ .actions{ display:flex; align-items:center; gap: 10px; } /* Back + cart fit header nicely */ #back-btn.chip, #cart-btn.chip{ height: 36px; padding-inline: 14px; display:inline-flex; align-items:center; gap: 8px; } /* RTL fine tuning */ html[dir="rtl"] #app-header .row.sub{ flex-direction: row-reverse; } html[dir="rtl"] #app-header .row.top{ flex-direction: row-reverse; } /* ========================================================= Main Content (THE ONLY SCROLL AREA) ========================================================= */ #app-content{ flex: 1 1 auto; min-height: 0; /* CRITICAL for flex scrolling */ overflow-y: auto; /* enables scrolling */ -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: var(--page-pad-y) var(--page-pad-x); /* Reserve space so content never hides behind bottom nav */ padding-bottom: calc(56px + env(safe-area-inset-bottom) + 12px); } /* ========================================================= Bottom Navigation / Footer (NOT part of content, fixed bottom) ========================================================= */ /* ========================================================= Android-style Bottom Navigation (system-native) ========================================================= */ #bottom-nav{ position: fixed; left: 0; right: 0; bottom: 0; height: calc(56px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); display: flex; justify-content: space-around; align-items: center; background: #ffffff; border-top: 1px solid #e5e7eb; z-index: 60; } #bottom-nav a{ flex: 1; height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-decoration: none; user-select: none; -webkit-user-select: none; color: #6b7280; /* light black / muted */ font-size: 12px; font-weight: 500; } #bottom-nav .nav-icon{ font-size: 22px; line-height: 1; color: inherit; } #bottom-nav .nav-label{ font-size: 11px; line-height: 1; color: inherit; } #bottom-nav a.active{ color: #16a34a; /* green */ font-weight: 600; } /* Optional: subtle press feedback like native */ #bottom-nav a:active{ background: rgba(0,0,0,0.04); } /* ========================================================= Buttons / Chips / Badges ========================================================= */ .chip{ border: 1px solid var(--border); background: #fff; border-radius: 999px; padding: 8px 12px; font-weight: var(--fw-semibold); cursor: pointer; } .badge{ display:inline-grid; place-items:center; min-width: 18px; height: 18px; padding: 0 6px; border-radius: 999px; background: #111; color: #fff; font-size: 12px; font-weight: var(--fw-bold); margin-left: 6px; } /* ✅ Badge spacing RTL fix */ html[dir="rtl"] .badge{ margin-left: 0; margin-right: 6px; } html[lang="ar"] .chip{ font-weight: var(--fw-medium); } /* ========================================================= Language switcher ========================================================= */ .segmented{ border: 1px solid var(--border); background:#fff; border-radius: 999px; overflow:hidden; display:flex; } .segmented button{ border: 0; background: transparent; padding: 8px 10px; cursor:pointer; font-weight: var(--fw-semibold); } .segmented button.active{ background: var(--soft); } /* ========================================================= Cards & Services ========================================================= */ .card{ background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 14px; box-shadow: 0 6px 20px rgba(15, 23, 42, .06); margin-bottom: 14px; } .section-title{ font-size: 34px; font-weight: var(--fw-black); margin: 10px 0 4px; } .section-subtitle{ color: var(--muted); font-size: 18px; margin: 0 0 12px; font-weight: var(--fw-medium); } .service-card{ display:flex; gap: 12px; align-items:flex-start; padding: 14px; border-radius: 22px; border: 1px solid var(--border); background:#fff; box-shadow: 0 8px 24px rgba(15,23,42,.08); margin-bottom: 14px; } .service-card.featured{ outline: 2px solid var(--accent); } .service-img{ width: 92px; height: 92px; border-radius: 18px; object-fit: cover; flex: 0 0 auto; border: 1px solid rgba(0,0,0,.06); } .service-title{ font-size: 22px; font-weight: var(--fw-black); margin: 2px 0 6px; } .service-desc{ color: var(--muted); font-size: 16px; margin: 0 0 12px; font-weight: var(--fw-regular); } .service-footer{ display:flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items:center; } .pill{ background: var(--pill); color: var(--pillText); border-radius: 999px; padding: 10px 14px; font-weight: var(--fw-bold); display:inline-flex; align-items:center; gap: 8px; } .price-btn{ border: 0; background: var(--soft); border-radius: 999px; padding: 12px 16px; font-weight: var(--fw-bold); cursor:pointer; } /* ========================================================= Icons ========================================================= */ .icon{ width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= RTL support ========================================================= */ html[dir="rtl"] body { direction: rtl; } html[dir="rtl"] .topbar { flex-direction: row-reverse; } html[dir="rtl"] .actions { flex-direction: row-reverse; } /* ========================================================= Accessibility: focus ring ========================================================= */ :focus-visible{ outline: 3px solid rgba(46, 204, 113, .45); outline-offset: 2px; border-radius: 10px; } /* ========================================================= Optional: Hide footer on specific screens Add to body: ========================================================= */ body.nav-hidden #bottom-nav{ display:none; } body.nav-hidden #app-content{ padding-bottom: calc(var(--page-pad-y) + env(safe-area-inset-bottom) + 12px); }