/* ============================================================================
 * support_page in-app overrides — NHA-77
 *
 * Loaded only by /_modules/support_page.mdl.php. Every rule is scoped to
 * `body.in-app` (set by the JS injector when window.ReactNativeWebView is
 * present), so the desktop site and ordinary mobile-browser visitors are
 * untouched. Additional `@media (max-width: 768px) and (orientation: portrait)`
 * narrows the rules to the phone-portrait shape the mobile app uses.
 *
 * NOTE: most visual fixes below are placeholders — the selectors need to be
 * verified against the live DOM (Chrome DevTools / remote-debug an Android
 * webview). Items marked TODO are intentionally inert until the right
 * selectors are confirmed.
 * ========================================================================= */

@media (max-width: 768px) and (orientation: portrait) {

    /* ----------------------------------------------------------------------
     * #3 — Gray rectangle above the app's sticky bottom-nav.
     *
     * Suspect candidates (footer / fixed bottom helpers that the desktop
     * site renders but the in-app shell already covers with its own nav):
     *   - #contact_fixed    (footer.new.inc.php: floating support FAB)
     *   - .mobile_link bar  (sticky mobile bottom nav)
     *
     * TODO: confirm element with DevTools and uncomment/adjust the targeted
     *       rule. Leaving CSS broad would risk hiding something useful on
     *       the regular mobile web.
     * --------------------------------------------------------------------*/
    /* body.in-app #contact_fixed { display: none !important; } */


    /* ----------------------------------------------------------------------
     * #4 — Accessibility-button overlay.
     *
     * Hebrew sites typically embed Nagish / Userway / EquallyAI etc. We did
     * not find such a plugin in /_inc/layout — the button might be added by
     * a third-party <script> at runtime. Once located in DevTools, add the
     * rule here, e.g.:
     *
     *   body.in-app .nagish-icon,
     *   body.in-app #userway_buttons_wrapper { display: none !important; }
     * --------------------------------------------------------------------*/
    /* TODO: hide the in-page a11y widget when running inside the app. */


    /* ----------------------------------------------------------------------
     * #5 — Orders-history dropdown swallows touch-scroll on Android webview.
     *
     * The desktop component scrolls the dropdown's internal list; on mobile
     * we want the page scroll to take over once the user reaches the list
     * boundary. The exact dropdown selector inside the orders panel needs
     * to be confirmed; .obligo_list / .order_section are nearby in markup.
     * --------------------------------------------------------------------*/
    /* TODO: pin the exact scrollable container and add e.g.:
       body.in-app .order_section .scrollable_list {
           overscroll-behavior: contain;
           -webkit-overflow-scrolling: touch;
       }
    */


    /* ----------------------------------------------------------------------
     * #2 — Pro percentage progress bar renders empty.
     *
     * Markup (pro/pro.class.php:567):
     *   <div class="pro_header_bar_div" data-pro_per="…" data-pro_max="…"></div>
     *
     * The fill is presumably drawn by pro_page.css or inline JS that reads
     * the data-attrs. If the bar shows empty in-app, suspect either:
     *   (a) the JS that sets `width: NN%` runs before the element exists
     *       (webview parses faster than CMS-bundled DOMContentLoaded), or
     *   (b) the bar element has no width / parent collapse on mobile-portrait.
     *
     * No CSS fix here yet — fixing without seeing the runtime CSS variables
     * risks masking the real bug. Investigate before patching.
     * --------------------------------------------------------------------*/


    /* ----------------------------------------------------------------------
     * #8 — "Save details" success indicator.
     *
     * /_media/js/login_signin.js calls window.alert(result.msg) after the
     * register-form-update AJAX returns; Android RN WebView swallows native
     * alerts so the user gets no feedback. The JS injector in
     * support_page.mdl.php overrides window.alert with a DOM toast — these
     * rules style it. (No @media-or-.in-app override because the toast is
     * only ever created in the in-app code path; the selector itself is
     * unique enough.)
     * --------------------------------------------------------------------*/
    .in-app-toast {
        position: fixed;
        bottom: 90px;                /* above the app's native bottom nav */
        left: 50%;
        transform: translateX(-50%) translateY(20px);
        max-width: 88vw;
        padding: 12px 20px;
        background: rgba(20, 20, 20, 0.92);
        color: #fff;
        font-size: 15px;
        line-height: 1.35;
        text-align: center;
        border-radius: 10px;
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
        z-index: 2147483647;
        opacity: 0;
        transition: opacity 200ms ease, transform 200ms ease;
        pointer-events: none;
        direction: rtl;
    }

    .in-app-toast.shown {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }

}