refactor: subdivide monolithic order wizard into clean modular step components

shop/components/wizard/toast-notification.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import { motion, AnimatePresence } from 'framer-motion'
+import { AlertCircle } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+
+interface ToastProps {
+  toast: { message: string; type: 'error' | 'success' } | null
+  onClose: () => void
+}
+
+export function ToastNotification({ toast, onClose }: ToastProps) {
+  return (
+    <AnimatePresence>
+      {toast && (
+        <motion.div
+          initial={{ opacity: 0, y: 50, scale: 0.95 }}
+          animate={{ opacity: 1, y: 0, scale: 1 }}
+          exit={{ opacity: 0, y: 20, scale: 0.95 }}
+          className={`fixed bottom-5 right-5 z-50 flex items-center gap-3 px-4 py-3 rounded-xl border shadow-lg backdrop-blur-md transition-all duration-300 max-w-md ${
+            toast.type === 'error'
+              ? 'bg-red-500/20 border-red-500/40 text-red-200'
+              : 'bg-green-500/20 border-green-500/40 text-green-200'
+          }`}
+        >
+          <AlertCircle className={`w-5 h-5 shrink-0 ${toast.type === 'error' ? 'text-red-400' : 'text-green-400'}`} />
+          <p className="text-sm font-medium">{toast.message}</p>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="w-5 h-5 ml-auto text-slate-400 hover:text-white"
+            onClick={onClose}
+          >
+            ✕
+          </Button>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  )
+}