Use mobile-only Paystack sheet for Mini payment QRs.

Restore the bottom-sheet iframe on mobile and redirect desktop to the hosted checkout URL, matching other Ladill apps.

Co-authored-by: Cursor <cursoragent@cursor.com>

resources/views/partials/paystack-sheet.blade.php

@@ -1,9 +1,9 @@
 {{--
-    Paystack checkout wrapper — bottom sheet on mobile, centered modal on desktop.
+    Paystack mobile bottom-sheet iframe.
     Requires Alpine.js ancestor with: showSheet (bool), checkoutUrl (string).
+    On mobile (< md) the sheet slides up; on desktop nothing renders.
 --}}
 <template x-teleport="body">
-    {{-- Mobile bottom sheet --}}
     <div x-show="showSheet"
          x-cloak
          class="fixed inset-0 z-[9999] flex flex-col justify-end md:hidden"
@@ -41,32 +41,4 @@
             @include('partials.mini-paystack-frame-footer')
         </div>
     </div>
-
-    {{-- Desktop modal --}}
-    <div x-show="showSheet"
-         x-cloak
-         class="fixed inset-0 z-[9999] hidden items-center justify-center p-6 md:flex"
-         role="dialog"
-         aria-modal="true">
-
-        <div class="absolute inset-0 bg-black/50 backdrop-blur-sm"
-             @click="showSheet = false"></div>
-
-        <div class="relative flex w-full max-w-lg flex-col overflow-hidden rounded-2xl bg-white shadow-2xl"
-             style="height: min(720px, 90vh)"
-             x-show="showSheet"
-             x-transition:enter="transition ease-out duration-200"
-             x-transition:enter-start="opacity-0 scale-95"
-             x-transition:enter-end="opacity-100 scale-100">
-
-            @include('partials.mini-paystack-frame-header')
-
-            <iframe :src="showSheet ? checkoutUrl : ''"
-                    class="min-h-0 flex-1 w-full border-0"
-                    allow="payment"
-                    title="Paystack checkout"></iframe>
-
-            @include('partials.mini-paystack-frame-footer')
-        </div>
-    </div>
 </template>