feat(frontend): add email check and gift card support to booking flow

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

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

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

@@ -13,6 +13,7 @@
 	import { Separator } from '$lib/components/ui/separator';
 	import { Skeleton } from '$lib/components/ui/skeleton';
 	import CharCounter from '$lib/components/ui/CharCounter.svelte';
+	import { PhoneInput } from '$lib/components/ui/phone-input/index.js';
 
 	// Booking Components
 	import BookingActions from '$lib/components/booking/BookingActions.svelte';
@@ -110,7 +111,11 @@
 
 	const isOverDuration = $derived(getTotalDuration() > maxSlotDuration);
 
-	const canProceedStep1 = $derived(userType === 'member' ? !!selectedUserId : !!guestName.trim());
+	const canProceedStep1 = $derived(
+		userType === 'member'
+			? !!selectedUserId
+			: !!(guestName.trim() && guestPhone.trim() && isValidUKPhone(guestPhone))
+	);
 	const canProceedStep2 = $derived(selectedServices.length > 0 && !isOverDuration);
 
 	// =============== Effects ===============
@@ -622,26 +627,13 @@
 								</div>
 								<div class="space-y-2">
 									<Label for="guest-phone">Phone Number</Label>
-									<input
+									<PhoneInput
 										id="guest-phone"
-										type="tel"
-										class="flex h-10 w-full rounded-md border bg-background px-3 py-2 text-sm ring-offset-background focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none {guestPhoneError
-											? 'border-red-500'
-											: 'border-input'}"
+										bind:value={guestPhone}
+										bind:error={guestPhoneError}
 										placeholder="07700 900000"
-										value={guestPhone}
-										oninput={(e) => {
-											guestPhone = e.currentTarget.value;
-										}}
-										onblur={() => {
-											if (guestPhone && !isValidUKPhone(guestPhone))
-												guestPhoneError = 'Invalid UK phone number';
-											else guestPhoneError = '';
-										}}
+										required={false}
 									/>
-									{#if guestPhoneError}
-										<p class="mt-1 text-xs text-red-600">{guestPhoneError}</p>
-									{/if}
 								</div>
 								<p class="rounded-lg bg-yellow-50 p-3 text-sm text-yellow-800">
 									Booking as a guest creates a temporary record. Encourage them to sign up for