<style>
    .image-modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.8);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        padding: 20px;
        box-sizing: border-box;
    }

    .image-modal-overlay.show {
        opacity: 1;
        visibility: visible;
    }

    .image-modal-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 90%;
        max-height: 90%;
        width: auto;
        height: auto;
        transform: scale(0.7);
        opacity: 0;
        transition: all 0.3s ease;
    }

    .image-modal-overlay.show .image-modal-content {
        transform: scale(1);
        opacity: 1;
    }

    .image-modal-content img {
        max-width: 70vw;
        max-height: 70vh;
        object-fit: contain;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        margin-bottom: 20px;
    }

    .image-modal-close {
        background-color: white;
        color: #333;
        border: none;
        padding: 8px 16px;
        border-radius: 8px;
        cursor: pointer;
        font-size: 14px;
        transition: background-color 0.3s ease, transform 0.2s ease;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .image-modal-close:hover {
        background-color: #f0f0f0;
        transform: scale(1.05);
    }

    @media screen and (min-width: 769px) {
        .image-modal-content {
            max-width: 70%;
        }
    }

    @media screen and (max-width: 768px) {
        .image-modal-content {
            max-width: 95%;
            max-height: 95%;
        }

        .image-modal-close {
            font-size: 14px;
            padding: 8px 16px;
        }
    }
</style>
<script>
    function showImageModal() {
        const modal = document.getElementById('imageModal');
        modal.classList.add('show');
    }

    function closeImageModal() {
        const modal = document.getElementById('imageModal');
        modal.classList.remove('show');

        // Optional: Set a cookie to prevent showing again
        // setCookie('holiday_modal_shown', 'true', 1);
    }

    // Cookie functions
    function setCookie(name, value, days) {
        const date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        const expires = "expires=" + date.toUTCString();
        document.cookie = name + "=" + value + ";" + expires + ";path=/";
    }

    function getCookie(name) {
        const cname = name + "=";
        const decodedCookie = decodeURIComponent(document.cookie);
        const ca = decodedCookie.split(';');
        for (let i = 0; i < ca.length; i++) {
            let c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(cname) == 0) {
                return c.substring(cname.length, c.length);
            }
        }
        return "";
    }

    function checkImageModal() {
        // const modalShown = getCookie('holiday_modal_shown');
        // if (!modalShown) {
        showImageModal();
        // }
    }

    // Show modal when page loads
    window.onload = checkImageModal;
</script>
<div id="imageModal" class="image-modal-overlay">
    <div class="image-modal-content">
        <a href="https://www.laciasmara.com/shop/product/the-smooth-operator-snazzy-rechargeable-clitoral-vibrator?utm_source=popup" rel="noopener">
            <img src="https://storage.googleapis.com/laciasmara-photos/laciaasmara_assets/laciasmara_announcement/snazzy-announcement.png" alt="Informasi Libur Penjualan">
        </a>
        <button class="image-modal-close" onclick="closeImageModal()">Tutup</button>
    </div>

</div>