email validation: red highlight + 20s toast on invalid

index.html

@@ -960,6 +960,33 @@
         .pricing-config-input:focus { border-color: var(--accent); }
         .pricing-config-input::placeholder { color: var(--text-muted); opacity: 0.6; }
         #pricing-email { width: 156px; }
+        #pricing-email.invalid { border-color: #f87171; box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.2); }
+
+        .pricing-toast {
+            position: fixed;
+            bottom: 100px;
+            left: 50%;
+            transform: translateX(-50%) translateY(20px);
+            background: var(--bg-card);
+            border: 1px solid #f87171;
+            border-radius: var(--radius-card);
+            padding: 16px 24px;
+            box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+            font-size: 14px;
+            color: var(--text);
+            opacity: 0;
+            visibility: hidden;
+            transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
+            z-index: 9999;
+            max-width: 420px;
+            text-align: center;
+            pointer-events: none;
+        }
+        .pricing-toast.show {
+            opacity: 1;
+            visibility: visible;
+            transform: translateX(-50%) translateY(0);
+        }
 
         @media (max-width: 900px) {
             .pricing-grid { grid-template-columns: 1fr; max-width: 420px; }
@@ -2362,6 +2389,16 @@
         /* ── Buy Agent Webhook ───────────────────────────── */
         const ORDER_WEBHOOK = "https://n8n.derez.ai/webhook/5318a0d8-d064-42fb-95b7-aa5552cb3fa9";
 
+        function showPricingToast(msg) {
+            const el = document.getElementById('pricing-toast');
+            el.textContent = msg;
+            el.classList.add('show');
+            if (window._pricingToastTimer) clearTimeout(window._pricingToastTimer);
+            window._pricingToastTimer = setTimeout(function () {
+                el.classList.remove('show');
+            }, 20000);
+        }
+
         async function hireAgent(product) {
             const agent = document.getElementById('pricing-agent').value;
             const period = document.getElementById('pricing-period').value;
@@ -2369,6 +2406,16 @@
             const email = document.getElementById('pricing-email').value.trim();
             const coupon = document.getElementById('pricing-coupon').value.trim();
 
+            // Validate email
+            const emailInput = document.getElementById('pricing-email');
+            emailInput.classList.remove('invalid');
+            if (!email || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
+                emailInput.classList.add('invalid');
+                showPricingToast('Please configure your agent and provide a valid email address.');
+                emailInput.focus();
+                return;
+            }
+
             try {
                 await fetch(ORDER_WEBHOOK, {
                     method: 'POST',
@@ -2565,5 +2612,7 @@
 
         </script>
 
+<div class="pricing-toast" id="pricing-toast"></div>
+
 </body>
 </html>