/*-----------------------------------------------------------------------------/
/ Custom Theme CSS
/-----------------------------------------------------------------------------*/
/*---------------- Global Custom CSS -------------------*/
<body>


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Surprise Pop-up Form</title>
    <!-- Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- Google Fonts: Pacifico for the brand, and Nunito for body text -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
    <style>
        /* Custom styles for the hanging button and fonts */
        body {
            font-family: 'Nunito', sans-serif;
        }

        .font-pacifico {
            font-family: 'Pacifico', cursive;
        }

        /* Animation for the hanging button to grab attention */
        @keyframes swing {
            0%, 100% { transform: rotate(5deg); }
            50% { transform: rotate(-5deg); }
        }

        #surprise-button {
            animation: swing 2s ease-in-out infinite;
            transform-origin: top center;
        }

        /* Custom styling for radio buttons */
        .custom-radio input[type="radio"] {
            display: none;
        }

        .custom-radio label {
            cursor: pointer;
            display: inline-block;
            padding: 0.75rem 1.5rem;
            border: 2px solid #ddd;
            border-radius: 9999px;
            transition: all 0.2s ease-in-out;
            font-weight: 600;
        }

        .custom-radio input[type="radio"]:checked + label {
            background-color: #8B5CF6; /* bg-violet-500 */
            color: white;
            border-color: #8B5CF6; /* border-violet-500 */
        }
    </style>



    <!-- The hanging "Surprise" button -->
    <button id="surprise-button" class="fixed bottom-10 -right-16 bg-yellow-400 text-gray-800 font-bold text-lg py-4 px-20 transform -rotate-90 rounded-t-2xl shadow-lg hover:bg-yellow-500 transition-colors duration-300 z-40">
        <span class="font-pacifico text-2xl">Surprise!</span> 🎉
    </button>

    <!-- The Pop-up Modal -->
    <div id="popup-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4 z-50 hidden">
        <!-- Modal content -->
        <div id="modal-content" class="bg-white rounded-3xl shadow-2xl p-6 md:p-10 w-full max-w-md mx-auto relative transform transition-all duration-300 scale-95 opacity-0" style="background-image: url('https://www.transparenttextures.com/patterns/gplay.png');">
            
            <!-- Close button -->
            <button id="close-modal" class="absolute top-4 right-4 text-gray-400 hover:text-gray-600 transition-colors">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-8 w-8" fill="none" viewbox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>

            <!-- Form Header -->
            <div class="text-center mb-6">
                <h2 class="text-3xl font-bold text-gray-800">Tell us more about the little one!</h2>
                <p class="text-violet-500 font-semibold mt-2">Get a <span class="font-pacifico text-yellow-500 text-xl">Surprise Offer</span> during their Birthday month!</p>
            </div>

            <!-- Subscription Form -->
            <!-- NOTE: This uses the 'mailto' action, which will open the user's default email client. 
                 For a more robust solution, you would typically send this to a server. -->
            <form action="mailto:info@ahhaaaa.com" method="post" enctype="text/plain">
                <div class="space-y-4">
                    <!-- Child's First Name -->
                    <div>
                        <label for="child-name" class="block text-sm font-medium text-gray-700 mb-1">Child's First Name</label>
                        <input type="text" id="child-name" name="Child's Name" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-500 focus:border-violet-500 transition">
                    </div>

                    <!-- Child's Gender -->
                    <div>
                        <span class="block text-sm font-medium text-gray-700 mb-2">Child's Gender</span>
                        <div class="flex items-center justify-center space-x-4 custom-radio">
                            <input type="radio" id="gender-boy" name="Gender" value="Boy" required>
                            <label for="gender-boy">👦 Boy</label>
                            
                            <input type="radio" id="gender-girl" name="Gender" value="Girl" required>
                            <label for="gender-girl">👧 Girl</label>
                        </div>
                    </div>
                    
                    <!-- Child's Birthday -->
                    <div>
                        <label for="child-birthday" class="block text-sm font-medium text-gray-700 mb-1">Child's Birthday</label>
                        <input type="date" id="child-birthday" name="Child's Birthday" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-500 focus:border-violet-500 transition">
                    </div>

                    <!-- Parent's Email -->
                    <div>
                        <label for="email" class="block text-sm font-medium text-gray-700 mb-1">Your Email Address</label>
                        <input type="email" id="email" name="Parent's Email" required class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-violet-500 focus:border-violet-500 transition">
                    </div>

                    <!-- Submit Button -->
                    <button type="submit" class="w-full bg-violet-500 text-white font-bold py-3 px-4 rounded-lg hover:bg-violet-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-violet-500 transform hover:scale-105 transition-transform duration-200 shadow-lg">
                        Get My Surprise!
                    </button>
                </div>
            </form>

            <!-- Footer Text -->
            <p class="text-xs text-gray-500 text-center mt-6">
                By signing up, you agree to receive marketing emails. <br> <span class="font-pacifico text-gray-600">No Spam Promise!</span>
            </p>
        </div>
    </div>

    <script>
        // Get elements from the DOM
        const surpriseButton = document.getElementById('surprise-button');
        const popupModal = document.getElementById('popup-modal');
        const modalContent = document.getElementById('modal-content');
        const closeModalButton = document.getElementById('close-modal');

        // Function to open the modal with animation
        const openModal = () => {
            popupModal.classList.remove('hidden');
            // Use a short timeout to allow the display property to apply before starting the transition
            setTimeout(() => {
                modalContent.classList.remove('scale-95', 'opacity-0');
                modalContent.classList.add('scale-100', 'opacity-100');
            }, 10);
        };

        // Function to close the modal with animation
        const closeModal = () => {
            modalContent.classList.add('scale-95', 'opacity-0');
            modalContent.classList.remove('scale-100', 'opacity-100');
            // Wait for the animation to finish before hiding the modal
            setTimeout(() => {
                popupModal.classList.add('hidden');
            }, 300); // Duration should match the transition duration
        };

        // Event listeners
        surpriseButton.addEventListener('click', openModal);
        closeModalButton.addEventListener('click', closeModal);

        // Close modal if the user clicks on the background overlay
        popupModal.addEventListener('click', (event) => {
            if (event.target === popupModal) {
                closeModal();
            }
        });

        // Close modal with the 'Escape' key
        document.addEventListener('keydown', (event) => {
            if (event.key === 'Escape' && !popupModal.classList.contains('hidden')) {
                closeModal();
            }
        });
    </script>


</body>

/*---------------- Custom CSS for only desktop -------------------*/
@media (min-width: 1025px) {
  
}

/*---------------- Custom CSS for tablet, mobile -------------------*/
@media (max-width: 1024px) {
  
}

/*---------------- Custom CSS for only tablet -------------------*/
@media (min-width: 768px) and (max-width: 1024px) {
  
}

/*---------------- Custom CSS for only mobile -------------------*/
@media (max-width: 767px){
  
}