refactor(frontend): migrate email fields to EmailInput component

Replace raw <Input type="email"> with <EmailInput> in login (register + login), account (gift card recipient), BookingFlow (guest email), and GiftCardsManagement (admin gift card email).

Removes 30-line validateEmail() function from login page (now handled by EmailInput internally).

Removes validateEmailFormat() from BookingFlow (EmailInput handles format validation; debounced backend email check preserved via onvaluechange/onblur).

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>

frontend/src/lib/components/admin/GiftCardsManagement.svelte

@@ -4,6 +4,7 @@
 	import { Button } from '$lib/components/ui/button';
 	import * as Card from '$lib/components/ui/card';
 	import { Input } from '$lib/components/ui/input';
+	import { EmailInput } from '$lib/components/ui/email-input';
 	import * as Modal from '$lib/components/ui/dialog';
 	import { Skeleton } from '$lib/components/ui/skeleton';
 
@@ -1765,11 +1766,10 @@
 									Recipient Email Address (Optional)
 								{/if}
 							</label>
-							<Input
+							<EmailInput
 								id="generate-email"
-								type="email"
-								placeholder="e.g. customer@example.com"
 								bind:value={generateEmail}
+								placeholder="e.g. customer@example.com"
 							/>
 							{#if selectedCustomer?.email && !generateEmail.trim()}
 								<p class="text-xs text-gray-500 italic">Defaults to: {selectedCustomer.email}</p>

frontend/src/lib/components/booking/BookingFlow.svelte

@@ -2,6 +2,7 @@
 	import { Button } from '$lib/components/ui/button/index.js';
 	import * as Card from '$lib/components/ui/card/index.js';
 	import { Input } from '$lib/components/ui/input/index.js';
+	import { EmailInput } from '$lib/components/ui/email-input/index.js';
 	import { Label } from '$lib/components/ui/label/index.js';
 	import { Textarea } from '$lib/components/ui/textarea/index.js';
 	import CharCounter from '$lib/components/ui/CharCounter.svelte';
@@ -106,18 +107,6 @@
 			isValidUKPhone(customerInfo.phone)
 	);
 
-	function validateEmailFormat(email: string) {
-		if (!email) {
-			emailError = '';
-			return;
-		}
-		if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email)) {
-			emailError = 'Please enter a valid email address';
-		} else {
-			emailError = '';
-		}
-	}
-
 	async function checkEmailExists(email: string) {
 		if (!email || !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(email)) {
 			emailSuggestion = null;
@@ -1713,18 +1702,17 @@
 						</div>
 						<div class="space-y-2">
 							<Label for="email">Email *</Label>
-							<Input
+							<EmailInput
 								id="email"
-								type="email"
 								bind:value={customerInfo.email}
 								placeholder="Enter your email"
-								onblur={() => {
-									validateEmailFormat(customerInfo.email);
+								required
+								onvaluechange={() => {
+									emailSuggestion = null;
 									debouncedEmailCheck();
 								}}
-								oninput={() => {
-									emailSuggestion = null;
-									emailError = '';
+								onerrorchange={(err) => { emailError = err; }}
+								onblur={() => {
 									debouncedEmailCheck();
 								}}
 							/>