/**
 * Safe Area Inset Helper
 * Applies proper padding for mobile status bar / notch on all pages.
 * Works with Capacitor (Android/iOS) and standard mobile browsers.
 */
(function applySafeArea() {
    function inject() {
        // ✅ حماية: لو document.head مش موجود بعد، نوقف
        if (!document.head) return;

        const style = document.createElement('style');
        style.textContent = `
            :root {
                --sat: env(safe-area-inset-top, 0px);
                --sar: env(safe-area-inset-right, 0px);
                --sab: env(safe-area-inset-bottom, 0px);
                --sal: env(safe-area-inset-left, 0px);
            }
            /* Apply safe area to all sticky/fixed headers */
            .safe-top {
                padding-top: max(16px, calc(16px + env(safe-area-inset-top, 0px))) !important;
            }
            .merchant-header.safe-top {
                padding-top: max(20px, calc(20px + env(safe-area-inset-top, 0px))) !important;
            }
            .page-header.safe-top {
                padding-top: max(12px, calc(12px + env(safe-area-inset-top, 0px))) !important;
            }
            /* Bottom nav safe area */
            .merchant-nav {
                padding-bottom: env(safe-area-inset-bottom, 0px);
            }
            body {
                padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
            }
        `;
        document.head.appendChild(style);
    }

    // تشغيل فوري إذا الـ head جاهز، وإلا ننتظر DOMContentLoaded
    if (document.head) {
        inject();
    } else {
        document.addEventListener('DOMContentLoaded', inject);
    }

    // Add .safe-top class to first sticky/fixed header found
    document.addEventListener('DOMContentLoaded', () => {
        const header = document.querySelector('.merchant-header, .page-header');
        if (header) header.classList.add('safe-top');
    });
})();
