// --- FINAL SCRIPT WITH HOVER SHADOW REMOVED ---

/**
 * This function injects a <style> tag into the page to handle more
 * advanced CSS like hover effects, animations, and gradients.
 */
function injectPoppyCSS() {
    const styleId = 'instafeed-poppy-styles';
    // Prevent adding the styles more than once
    if (document.getElementById(styleId)) return;

    const css = `
        /* Keyframe animation for the widget to fade in and scale up */
        @keyframes pop-in {
            0% { opacity: 0; transform: scale(0.95); }
            100% { opacity: 1; transform: scale(1); }
        }

        /* Style for the main widget container */
        #instafeed-popupsnap-widget-placeholder {
            animation: pop-in 0.6s ease-out;
            padding: 4px; /* Gutter for the gradient border */
            background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); /* Instagram gradient */
            border-radius: 16px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
        }

        /* The inner container gets the white background, creating the border effect */
        .instafeed-widget-container {
            background-color: #ffffff;
            border-radius: 13px; /* Slightly smaller than the parent to show the border */
            padding: 24px;
        }

        /* Style the title with a gradient text effect */
        .widget-title {
            font-size: 1.3em !important;
            font-weight: bold;
            text-align: center;
            margin-bottom: 20px !important;
            background: linear-gradient(135deg, #405de6, #5851db, #833ab4, #c13584, #e1306c, #fd1d1d);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        /* Add a smooth transition and a hover effect to the highlight */
        .instafeed-highlight-item {
            transition: transform 0.3s ease;
        }
        .instafeed-highlight-item:hover {
            transform: scale(1.08); /* Grow on hover */
            cursor: pointer;
            /* The box-shadow on hover has been removed */
        }
    `;

    const style = document.createElement('style');
    style.id = styleId;
    style.innerHTML = css;
    document.head.appendChild(style);
}

/**
 * This function runs repeatedly to ensure our rules are enforced.
 */
function enforceWidgetRules() {
    const widgetContainer = document.getElementById('instafeed-popupsnap-widget-placeholder');
    if (!widgetContainer) return;

    // Filter Highlights
    const allHighlights = widgetContainer.querySelectorAll('.instafeed-highlight-item');
    if (allHighlights.length > 0) {
        const titleToKeep = 'السمك المتوفر';
        allHighlights.forEach(item => {
            const titleElement = item.querySelector('.highlight-title');
            if (titleElement && titleElement.textContent.trim().includes(titleToKeep)) {
                item.style.setProperty('display', 'inline-block', 'important');
            } else {
                item.style.setProperty('display', 'none', 'important');
            }
        });
    }

    // Modify Header Text
    const mainTitle = widgetContainer.querySelector('.widget-title');
    const subtitle = widgetContainer.querySelector('.widget-subtitle');
    const newTitleText = 'اكتشف السمك المتوافر في حسابنا على انستقرام';

    if (mainTitle && mainTitle.textContent !== newTitleText) {
        mainTitle.textContent = newTitleText;
    }
    if (subtitle) {
        subtitle.style.setProperty('display', 'none', 'important');
    }
}

/**
 * This function runs only ONCE to do the initial setup.
 */
function initialWidgetSetup() {
    const widgetContainer = document.getElementById('instafeed-popupsnap-widget-placeholder');
    const moveTarget = document.querySelector('.swiper.s-slider-container');
    const highlightsContainer = widgetContainer ? widgetContainer.querySelector('.highlights-scroll-container') : null;

    if (!widgetContainer || !moveTarget || !highlightsContainer) {
        return false;
    }

    // --- Perform one-time actions ---
    // 1. Inject our new "poppy" CSS styles into the page
    injectPoppyCSS();

    // 2. Move the widget
    moveTarget.insertAdjacentElement('afterend', widgetContainer);

    // 3. Style the highlights area to be centered
    highlightsContainer.style.setProperty('display', 'flex', 'important');
    highlightsContainer.style.setProperty('justify-content', 'center', 'important');
    widgetContainer.style.marginTop = '30px';

    // --- Start the persistent enforcement loop ---
    setInterval(enforceWidgetRules, 250);

    console.log("Final widget setup complete. Persistent rules and poppy CSS are now active.");
    return true;
}

// --- Use a MutationObserver to kick everything off ---
const widgetObserver = new MutationObserver(() => {
    // We only need to find the widget's placeholder to start the setup
    if (document.getElementById('instafeed-popupsnap-widget-placeholder')) {
        if (initialWidgetSetup()) {
            widgetObserver.disconnect();
        }
    }
});

// Start observing the page for changes
widgetObserver.observe(document.body, {
    childList: true,
    subtree: true
});