document.addEventListener("DOMContentLoaded", function () {
    function addSocialLinks() {
        let menu = document.querySelector("#mobile-menu > ul");

        if (menu && !menu.querySelector(".social-links")) { // تجنب الإضافة المتكررة
            let socialLinks = document.createElement("div");
            socialLinks.classList.add("social-links");

            // إضافة الروابط
            socialLinks.innerHTML = `

                <a href="https://x.com/transitrips" rel="noopener" target="_blank" title="تويتر" aria-label="تويتر">
                    <i class="sicon-twitter"></i>
                </a>
                <a href="https://www.tiktok.com/@transitrips" rel="noopener" target="_blank" title="تيك توك" aria-label="تيك توك">
                    <i class="sicon-tiktok"></i>
                </a>
            `;

            // ضبط التنسيق عبر JavaScript
            socialLinks.style.display = "flex";
            socialLinks.style.justifyContent = "center"; // توسيط العناصر
            socialLinks.style.alignItems = "center";
            socialLinks.style.gap = "10px"; // مسافة صغيرة بين الروابط
            socialLinks.style.marginTop = "10px"; // إضافة مسافة علوية

            // ضبط عرض كل رابط
            let links = socialLinks.querySelectorAll("a");
            links.forEach(link => {
                link.style.width = "50px"; // العرض المطلوب
                link.style.display = "inline-block";
                link.style.textAlign = "center";
            });

            menu.appendChild(socialLinks);
        }
    }

    const observer = new MutationObserver(() => {
        let menu = document.querySelector("#mobile-menu > ul");
        if (menu) {
            addSocialLinks();
        }
    });

    observer.observe(document.body, { childList: true, subtree: true });

    window.addEventListener("resize", addSocialLinks);
});