Shipping Info + Customer Country

                <style>
    @media only screen and (max-width: 600px) {
        .shipping-widget {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 20px;
            background: #f5f5f5;
            padding: 4px 15px;
            font-size: 10px !important;
            font-weight: 400;
            color: #333;
            max-width: 100%;
        }
    }
    .shipping-widget {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 10px;
        background: #f5f5f5;
        padding: 10px 15px;
        font-size: 14px;
        font-weight: 400;
        color: #333;
        max-width: 100%;
    
    }
    .shipping-widget .left-column {
        display: flex;
        align-items: center;
        margin-right: 8px;
        margin-left:10px;
    }
    .shipping-widget .left-column .dot {
        width: 10px;
        height: 10px;
        background-color: green;
        border-radius: 50%;
        margin-right: 8px;

    }
    .shipping-widget .right-column {
        display: flex;
        align-items: center;
margin-right:10px;
    }
    .shipping-widget .right-column img {
        width: 20px;
        height: auto;
        margin-right: 5px;
    }
</style>

<div class="shipping-widget">
    <div class="left-column">
        <span class="dot"></span>
        <span>Ships by <strong id="shipping-date"></strong></span>
    </div>
    <div class="right-column">
        <img id="country-flag" src="https://flagcdn.com/w40/us.png" alt="US Flag">
        <span id="shipping-text"><strong>FREE</strong> USA Shipping</span>
    </div>
</div>

<script>
    function formatDate(date) {
        const options = { weekday: 'short', month: 'long', day: 'numeric' };
        return date.toLocaleDateString('en-US', options);
    }

    function updateShippingDate() {
        const today = new Date();
        today.setDate(today.getDate() + 2); // Add 2 days
        document.getElementById("shipping-date").textContent = formatDate(today);
    }

    function updateFlagAndText(countryCode, countryAbbreviation) {
        const flagImg = document.getElementById("country-flag");
        const shippingText = document.getElementById("shipping-text");

        // Set flag image dynamically
        flagImg.src = `https://flagcdn.com/w40/${countryCode.toLowerCase()}.png`;
        flagImg.alt = `${countryAbbreviation} Flag`;

        // Update shipping text dynamically
        shippingText.innerHTML = `<strong>FREE</strong> ${countryAbbreviation} Shipping`;
    }

    function getUserLocation() {
        fetch("https://ipapi.co/json/")
            .then(response => response.json())
            .then(data => {
                if (data && data.country_code && data.country_code_iso3) {
                    updateFlagAndText(data.country_code, data.country_code_iso3); // Use ISO 3-letter code (e.g., LT, UAE, UK)
                } else {
                    updateFlagAndText("us", "USA"); // Default to USA if API fails
                }
            })
            .catch(error => {
                console.error("Error fetching location:", error);
                updateFlagAndText("us", "USA"); // Default to USA if API request fails
            });
    }

    updateShippingDate();
    getUserLocation();
</script>