style(spa): move confirm order button below form on mobile UX

apps/spa/src/pages/CheckoutPage.tsx

@@ -354,6 +354,15 @@ export default function CheckoutPage() {
                   </div>
                 </div>
                 </div>
+              </div>
+              {/* Mobile Submit Button */}
+              <button 
+                type="submit"
+                disabled={loading || loadingSettings}
+                className="w-full py-4 bg-spa-forest text-white font-bold rounded-xl tracking-widest uppercase hover:bg-spa-stone hover:shadow-lg transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed flex lg:hidden justify-center items-center gap-2 mt-4"
+              >
+                {loading ? <Loader2 className="w-5 h-5 animate-spin" /> : 'Confirm Order'}
+              </button>
             </form>
           </div>
 
@@ -512,7 +521,7 @@ export default function CheckoutPage() {
                 form="checkout-form"
                 type="submit"
                 disabled={loading || loadingSettings}
-                className="w-full mt-8 py-4 bg-spa-forest text-white font-bold rounded-lg tracking-widest uppercase hover:bg-spa-stone hover:shadow-lg transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed flex justify-center items-center gap-2"
+                className="w-full mt-8 py-4 bg-spa-forest text-white font-bold rounded-xl tracking-widest uppercase hover:bg-spa-stone hover:shadow-lg transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed hidden lg:flex justify-center items-center gap-2"
               >
                 {loading ? <Loader2 className="w-5 h-5 animate-spin" /> : 'Confirm Order'}
               </button>