feat: Mobile improvements + simplify payment categories

Mobile Improvements:
1. Modal footer buttons now stack vertically on mobile
   - Order: Save Settings (primary) -> View in WooCommerce -> Cancel
   - Full width buttons on mobile for easier tapping
   - Responsive padding: px-4 on mobile, px-6 on desktop

2. Refresh button moved inline with title
   - Added action prop to SettingsLayout
   - Refresh button now appears next to Payments title
   - Cleaner, more compact layout

Payment Categories Simplified:
3. Removed Payment Providers section
   - PayPal, Stripe are also 3rd party, not different
   - Confusing to separate providers from other gateways
   - All non-manual gateways now in single category

4. Renamed to Online Payment Methods
   - Was: Manual + Payment Providers + 3rd Party
   - Now: Manual + Online Payment Methods
   - Clearer distinction: offline vs online payments

5. Unified styling for all online gateways
   - Same card style as manual methods
   - Status badges (Enabled/Disabled)
   - Requirements alerts
   - Manage button always visible

Mobile UX:
- Footer buttons: flex-col on mobile, flex-row on desktop
- Proper button ordering with CSS order utilities
- Responsive spacing and padding
- Touch-friendly button sizes

Files Modified:
- Payments.tsx: Mobile footer + simplified categories
- SettingsLayout.tsx: Added action prop for header actions

Result:
✅ Better mobile experience
✅ Clearer payment method organization
✅ Consistent styling across all gateways

admin-spa/src/routes/Settings/components/SettingsLayout.tsx

@@ -9,6 +9,7 @@ interface SettingsLayoutProps {
   onSave?: () => Promise<void>;
   saveLabel?: string;
   isLoading?: boolean;
+  action?: React.ReactNode;
 }
 
 export function SettingsLayout({
@@ -18,6 +19,7 @@ export function SettingsLayout({
   onSave,
   saveLabel = 'Save changes',
   isLoading = false,
+  action,
 }: SettingsLayoutProps) {
   const [isSaving, setIsSaving] = useState(false);
 
@@ -62,10 +64,15 @@ export function SettingsLayout({
       <div className="container max-w-5xl mx-auto px-4 py-8">
         {!onSave && (
           <div className="mb-8">
-            <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
-            {description && (
-              <p className="text-muted-foreground mt-2">{description}</p>
-            )}
+            <div className="flex items-start justify-between gap-4">
+              <div>
+                <h1 className="text-2xl font-bold tracking-tight">{title}</h1>
+                {description && (
+                  <p className="text-muted-foreground mt-2">{description}</p>
+                )}
+              </div>
+              {action && <div className="shrink-0">{action}</div>}
+            </div>
           </div>
         )}