Limited stock

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .top-selling-badge {
            display: flex;
            align-items: center;
            padding: 5px 10px;
            border-radius: 8px;
            font-family: Arial, sans-serif;
            font-size: 12px;
            color: #333;
            background-color: #f3e5ff; /* Default background color */
            height: 30px; /* Adjust height to fit content */
        }

        .top-selling-badge .badge-content {
            display: none;
            align-items: center;
        }

        .top-selling-badge .badge-content.active {
            display: flex;
        }

        .badge-content svg {
            margin-right: 8px;
            width: 16px; /* Set icon size */
            height: 16px; /* Set icon size */
        }

        .badge-content#text2 {
            background-color: #ffe6e6; /* Very light red background for urgency */
            color: #b30000; /* Darker red text color */
        }
    </style>
    <title>Top Selling Product</title>
</head>
<body>
    <div class="top-selling-badge">
        <div id="text1" class="badge-content active">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path d="M12 2l3.09 6.26L22 9.27l-5 4.87L18.18 22 12 18.89 5.82 22 7 14.14 2 9.27l6.91-1.01L12 2z"/>
            </svg>
            <span>Top selling product in Kitchen Gadgets category</span>
        </div>
        <div id="text2" class="badge-content">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
                <path d="M1 12a11 11 0 1 0 22 0 11 11 0 1 0-22 0zm11-8a1 1 0 0 1 1 1v6.586l4.293 4.293a1 1 0 0 1-1.414 1.414l-5.293-5.293a1 1 0 0 1-.293-.707V5a1 1 0 0 1 1-1z"/>
            </svg>
            <span>Limited stock available, order now!</span>
        </div>
    </div>

    <script>
        let currentText = 1;
        setInterval(() => {
            const text1 = document.getElementById('text1');
            const text2 = document.getElementById('text2');

            if (currentText === 1) {
                text1.classList.remove('active');
                text2.classList.add('active');
                document.querySelector('.top-selling-badge').style.backgroundColor = '#ffe6e6'; // Change background color
            } else {
                text2.classList.remove('active');
                text1.classList.add('active');
                document.querySelector('.top-selling-badge').style.backgroundColor = '#f3e5ff'; // Reset background color
            }

            currentText = currentText === 1 ? 2 : 1;
        }, 3000); // Change every 3 seconds
    </script>
</body>
</html>