feat: Complete checkout overhaul with Stripe PaymentIntent integration and abandoned cart recovery

resources/js/components/ui/Steps.tsx

@@ -8,6 +8,7 @@ interface Step {
   id: string
   title: string
   description: string
+  details?: string
 }
 
 interface StepsProps {
@@ -33,10 +34,18 @@ const Steps = React.forwardRef<HTMLDivElement, StepsProps>(
               {index + 1}
             </div>
             <div className="mt-2 text-xs font-medium text-center">
-              <p className={cn(index === currentStep ? "text-blue-600" : "text-gray-500")}>
+              <p className={cn(
+                "font-semibold",
+                index === currentStep ? "text-blue-600 dark:text-blue-400" : "text-gray-500 dark:text-gray-400"
+              )}>
                 {step.title}
               </p>
-              <p className="text-xs text-gray-400">{step.description}</p>
+              <p className="text-xs text-gray-400 dark:text-gray-500 mt-1">{step.description}</p>
+              {step.details && index === currentStep && (
+                <p className="text-xs text-blue-500 dark:text-blue-300 mt-1 font-medium">
+                  {step.details}
+                </p>
+              )}
             </div>
             {index < steps.length - 1 && (
               <div className="flex-1 h-px bg-gray-200 dark:bg-gray-700 mx-2">