diff --git a/resources/views/partials/payment-checkout-host.blade.php b/resources/views/partials/payment-checkout-host.blade.php
index f1f23eb..d40008d 100644
--- a/resources/views/partials/payment-checkout-host.blade.php
+++ b/resources/views/partials/payment-checkout-host.blade.php
@@ -1,25 +1,41 @@
 {{-- Global host for till-operator Card/MoMo sheets (register + open tickets). --}}
-<div x-data
-     x-init="
-        const url = @js(session('checkout_url'));
-        const code = @js(session('access_code'));
-        if (url || code) {
-            $store.paymentCheckout.open(url || '', code || '');
-        }
-     "
+<div x-data="{
+        showSheet: false,
+        checkoutUrl: '',
+        accessCode: '',
+        returnUrl: '',
+        syncFromStore() {
+            const store = $store.paymentCheckout;
+            this.showSheet = !!store.isOpen;
+            this.checkoutUrl = store.url || '';
+            this.accessCode = store.accessCode || '';
+        },
+        init() {
+            // Keep local reactive mirrors so the teleported sheet always re-renders.
+            this.$watch(() => $store.paymentCheckout.isOpen, () => this.syncFromStore());
+            this.$watch(() => $store.paymentCheckout.url, () => this.syncFromStore());
+            this.$watch(() => $store.paymentCheckout.accessCode, () => this.syncFromStore());
+            this.$watch('showSheet', (open) => {
+                if (!open && $store.paymentCheckout.isOpen) {
+                    $store.paymentCheckout.close();
+                }
+            });
+
+            const url = @js(session('checkout_url'));
+            const code = @js(session('access_code'));
+            if (url || code) {
+                $store.paymentCheckout.open(url || '', code || '');
+                this.syncFromStore();
+            }
+        },
+     }"
+     @ladill-pay-cancelled.window="showSheet = false; $store.paymentCheckout.close()"
      class="contents">
-    <div x-data="{
-            get showSheet() { return $store.paymentCheckout.isOpen },
-            set showSheet(v) { if (!v) { $store.paymentCheckout.close() } },
-            get checkoutUrl() { return $store.paymentCheckout.url },
-            get accessCode() { return $store.paymentCheckout.accessCode },
-         }">
-        @include('partials.paystack-sheet', [
-            'audience' => 'operator',
-            'sheetTitle' => 'Customer payment',
-            'sheetSubtitle' => 'Hand this screen to the customer for card or mobile money.',
-            'sheetFooter' => 'Stay on this screen until the customer finishes. Closing only hides the sheet.',
-            'iframeTitle' => 'Customer card or mobile money checkout',
-        ])
-    </div>
+    @include('partials.paystack-sheet', [
+        'audience' => 'operator',
+        'sheetTitle' => 'Customer payment',
+        'sheetSubtitle' => 'Hand this screen to the customer for card or mobile money.',
+        'sheetFooter' => 'Stay on this screen until the customer finishes. Closing only hides the sheet.',
+        'iframeTitle' => 'Customer card or mobile money checkout',
+    ])
 </div>
diff --git a/resources/views/partials/paystack-sheet.blade.php b/resources/views/partials/paystack-sheet.blade.php
index f4e6192..c269c79 100644
--- a/resources/views/partials/paystack-sheet.blade.php
+++ b/resources/views/partials/paystack-sheet.blade.php
@@ -295,124 +295,118 @@
             );
         }
      "
-     @keydown.escape.window="if (showSheet && $store.ladillPayCheckout && ($store.ladillPayCheckout.frameable || $store.ladillPayCheckout.error || $store.ladillPayCheckout.launching)) showSheet = false"
+     @keydown.escape.window="if (showSheet) showSheet = false"
      @ladill-pay-cancelled.window="showSheet = false"
-     class="fixed inset-0 z-[9999]"
-     :class="($store.ladillPayCheckout && $store.ladillPayCheckout.inline && !$store.ladillPayCheckout.launching && !$store.ladillPayCheckout.error && !$store.ladillPayCheckout.frameable) ? 'pointer-events-none' : ''"
+     class="fixed inset-0 z-[9999] flex items-end justify-center md:items-center md:p-6"
      role="dialog"
      aria-modal="true"
      :aria-hidden="(!showSheet).toString()"
      aria-label="{{ $sheetAria }}">
 
-    {{-- Brief loader only — then Paystack Inline is the sole payment UI (avoids double modal). --}}
-    <div x-show="$store.ladillPayCheckout && $store.ladillPayCheckout.launching && !$store.ladillPayCheckout.error"
-         x-cloak
-         data-ladill-pay-loading
-         class="pointer-events-auto absolute inset-0 flex items-center justify-center bg-black/40 p-6"
-         x-transition:enter="transition-opacity duration-200"
+    <div class="absolute inset-0 bg-black/60"
+         data-ladill-pay-backdrop
+         x-show="showSheet"
+         x-transition:enter="transition-opacity duration-300"
          x-transition:enter-start="opacity-0"
          x-transition:enter-end="opacity-100"
-         x-transition:leave="transition-opacity duration-150"
+         x-transition:leave="transition-opacity duration-200"
          x-transition:leave-start="opacity-100"
-         x-transition:leave-end="opacity-0">
-        <div class="flex items-center gap-3 rounded-2xl bg-white px-5 py-4 shadow-xl">
-            <svg class="h-5 w-5 animate-spin text-indigo-600" fill="none" viewBox="0 0 24 24" aria-hidden="true">
-                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
-            </svg>
-            <p class="text-sm font-semibold text-slate-800">Opening payment…</p>
-        </div>
+         x-transition:leave-end="opacity-0"
+         @click="showSheet = false; window.LadillPayCheckout?.cancel?.()">
     </div>
 
-    {{-- Full Ladill shell only for same-origin iframe (e.g. MoMo waiting) or recovery errors. --}}
-    <div x-show="$store.ladillPayCheckout && ($store.ladillPayCheckout.frameable || $store.ladillPayCheckout.error)"
-         x-cloak
-         class="pointer-events-auto absolute inset-0 flex items-end justify-center md:items-center md:p-6"
-         data-ladill-pay-shell>
-        <div class="absolute inset-0 bg-black/60"
-             data-ladill-pay-backdrop
-             x-show="$store.ladillPayCheckout && ($store.ladillPayCheckout.frameable || $store.ladillPayCheckout.error)"
-             x-transition:enter="transition-opacity duration-300"
-             x-transition:enter-start="opacity-0"
-             x-transition:enter-end="opacity-100"
-             x-transition:leave="transition-opacity duration-200"
-             x-transition:leave-start="opacity-100"
-             x-transition:leave-end="opacity-0"
-             @click="showSheet = false; window.LadillPayCheckout?.cancel?.()">
-        </div>
-
-        <div data-ladill-pay-panel
-             class="relative flex w-full flex-col overflow-hidden rounded-t-2xl bg-white shadow-2xl md:max-w-lg md:rounded-2xl"
-             style="height: min(90dvh, 720px); max-height: 90dvh; padding-bottom: env(safe-area-inset-bottom, 0px)"
-             x-show="$store.ladillPayCheckout && ($store.ladillPayCheckout.frameable || $store.ladillPayCheckout.error)"
-             x-transition:enter="transition duration-300 ease-out md:duration-200"
-             x-transition:enter-start="translate-y-full opacity-0 md:translate-y-0 md:scale-95"
-             x-transition:enter-end="translate-y-0 opacity-100 md:scale-100"
-             x-transition:leave="transition duration-200 ease-in md:duration-150"
-             x-transition:leave-start="translate-y-0 opacity-100 md:scale-100"
-             x-transition:leave-end="translate-y-full opacity-0 md:translate-y-0 md:scale-95"
-             @click.stop>
-            <div class="relative flex shrink-0 flex-col gap-0.5 border-b border-slate-100 px-4 pb-3 pt-5 md:px-5 md:pt-3"
-                 style="padding-top: max(1.25rem, env(safe-area-inset-top, 0px))">
-                <div class="absolute left-1/2 top-2 h-1 w-10 -translate-x-1/2 rounded-full bg-slate-200 md:hidden" data-ladill-pay-handle aria-hidden="true"></div>
-                <div class="flex items-start justify-between gap-3">
-                    <div class="min-w-0">
-                        <p class="text-sm font-semibold text-slate-800">{{ $sheetTitle }}</p>
-                        @if (! empty($sheetSubtitle))
-                            <p class="mt-0.5 text-xs leading-snug text-slate-500">{{ $sheetSubtitle }}</p>
-                        @endif
-                    </div>
-                    <button type="button"
-                            x-ref="checkoutClose"
-                            x-init="$watch('showSheet', value => { if (value) { $nextTick(() => $refs.checkoutClose?.focus()) } })"
-                            @click="showSheet = false; window.LadillPayCheckout?.cancel?.()"
-                            class="shrink-0 rounded-full p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700"
-                            aria-label="Close">
-                        <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
-                        </svg>
-                    </button>
+    {{-- Always wrap payment: bottom sheet on mobile, centered modal on desktop. --}}
+    <div data-ladill-pay-panel
+         class="relative flex w-full flex-col overflow-hidden rounded-t-2xl bg-white shadow-2xl md:max-w-lg md:rounded-2xl"
+         style="height: min(90dvh, 720px); max-height: 90dvh; padding-bottom: env(safe-area-inset-bottom, 0px)"
+         x-show="showSheet"
+         x-transition:enter="transition duration-300 ease-out md:duration-200"
+         x-transition:enter-start="translate-y-full opacity-0 md:translate-y-0 md:scale-95"
+         x-transition:enter-end="translate-y-0 opacity-100 md:scale-100"
+         x-transition:leave="transition duration-200 ease-in md:duration-150"
+         x-transition:leave-start="translate-y-0 opacity-100 md:scale-100"
+         x-transition:leave-end="translate-y-full opacity-0 md:translate-y-0 md:scale-95"
+         @click.stop>
+        <div class="relative flex shrink-0 flex-col gap-0.5 border-b border-slate-100 px-4 pb-3 pt-5 md:px-5 md:pt-3"
+             style="padding-top: max(1.25rem, env(safe-area-inset-top, 0px))">
+            <div class="absolute left-1/2 top-2 h-1 w-10 -translate-x-1/2 rounded-full bg-slate-200 md:hidden" data-ladill-pay-handle aria-hidden="true"></div>
+            <div class="flex items-start justify-between gap-3">
+                <div class="min-w-0">
+                    <p class="text-sm font-semibold text-slate-800">{{ $sheetTitle }}</p>
+                    @if (! empty($sheetSubtitle))
+                        <p class="mt-0.5 text-xs leading-snug text-slate-500">{{ $sheetSubtitle }}</p>
+                    @endif
                 </div>
+                <button type="button"
+                        x-ref="checkoutClose"
+                        x-init="$watch('showSheet', value => { if (value) { $nextTick(() => $refs.checkoutClose?.focus()) } })"
+                        @click="showSheet = false; window.LadillPayCheckout?.cancel?.()"
+                        class="shrink-0 rounded-full p-1.5 text-slate-400 transition hover:bg-slate-100 hover:text-slate-700"
+                        aria-label="Close">
+                    <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12"/>
+                    </svg>
+                </button>
             </div>
-            <div class="min-h-0 flex-1 overflow-y-auto overscroll-contain">
-                <iframe x-show="$store.ladillPayCheckout && $store.ladillPayCheckout.frameable"
-                        :src="showSheet && $store.ladillPayCheckout && $store.ladillPayCheckout.frameable ? checkoutUrl : ''"
-                        class="h-full min-h-[60dvh] w-full border-0 md:min-h-0"
-                        style="min-height: 28rem"
-                        allow="payment *"
-                        title="{{ $iframeTitle }}"></iframe>
-
-                <div x-show="$store.ladillPayCheckout && $store.ladillPayCheckout.error"
-                     class="flex min-h-[40dvh] flex-col items-center justify-center gap-4 px-6 py-10 text-center md:min-h-[20rem] md:px-8 md:py-12"
-                     data-ladill-pay-inline-status>
-                    <div class="flex h-12 w-12 items-center justify-center rounded-full bg-red-50 text-red-500" aria-hidden="true">
-                        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"/>
-                        </svg>
-                    </div>
-                    <div class="max-w-xs space-y-1 md:max-w-sm">
-                        <p class="text-sm font-semibold text-slate-800" data-ladill-pay-status-title>Checkout unavailable</p>
-                        <p class="text-xs leading-snug text-slate-500" x-text="$store.ladillPayCheckout.error"></p>
-                    </div>
-                    <button type="button"
-                            data-ladill-pay-retry
-                            @click="$store.ladillPayCheckout.sync(true, typeof checkoutUrl !== 'undefined' ? checkoutUrl : '', typeof accessCode !== 'undefined' ? accessCode : '', typeof returnUrl !== 'undefined' ? returnUrl : '')"
-                            class="inline-flex w-full max-w-xs items-center justify-center rounded-xl bg-indigo-600 px-4 py-3 text-sm font-semibold text-white hover:bg-indigo-700">
-                        Try again
-                    </button>
-                    <button type="button"
-                            @click="showSheet = false; window.LadillPayCheckout?.cancel?.()"
-                            class="text-xs font-medium text-slate-500 hover:text-slate-700">
-                        Cancel
-                    </button>
-                </div>
-            </div>
-            @if (! empty($sheetFooter))
-                <p class="shrink-0 border-t border-slate-100 bg-slate-50 px-4 py-2 text-center text-[11px] text-slate-500 md:px-5">
-                    {{ $sheetFooter }}
-                </p>
-            @endif
         </div>
+        <div class="min-h-0 flex-1 overflow-y-auto overscroll-contain">
+            <iframe x-show="$store.ladillPayCheckout && $store.ladillPayCheckout.frameable"
+                    :src="showSheet && $store.ladillPayCheckout && $store.ladillPayCheckout.frameable ? checkoutUrl : ''"
+                    class="h-full min-h-[60dvh] w-full border-0 md:min-h-0"
+                    style="min-height: 28rem"
+                    allow="payment *"
+                    title="{{ $iframeTitle }}"></iframe>
+
+            <div x-show="!$store.ladillPayCheckout || !$store.ladillPayCheckout.frameable"
+                 class="flex min-h-[60dvh] flex-col items-center justify-center gap-4 px-6 py-10 text-center md:min-h-[28rem] md:px-8 md:py-12"
+                 data-ladill-pay-inline-status>
+                <div class="flex h-12 w-12 items-center justify-center rounded-full bg-indigo-50 text-indigo-600" aria-hidden="true">
+                    <svg x-show="!$store.ladillPayCheckout || $store.ladillPayCheckout.launching || $store.ladillPayCheckout && !$store.ladillPayCheckout.error && !$store.ladillPayCheckout.inline"
+                         class="h-6 w-6 animate-spin" fill="none" viewBox="0 0 24 24">
+                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"></path>
+                    </svg>
+                    <svg x-show="$store.ladillPayCheckout && $store.ladillPayCheckout.inline && !$store.ladillPayCheckout.launching && !$store.ladillPayCheckout.error"
+                         class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"/>
+                    </svg>
+                    <svg x-show="$store.ladillPayCheckout && $store.ladillPayCheckout.error"
+                         class="h-6 w-6 text-red-500" fill="none" viewBox="0 0 24 24" stroke-width="1.75" stroke="currentColor">
+                        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 3.75h.008v.008H12v-.008Z"/>
+                    </svg>
+                </div>
+                <div class="max-w-xs space-y-1 md:max-w-sm">
+                    <p class="text-sm font-semibold text-slate-800"
+                       data-ladill-pay-status-title
+                       x-text="$store.ladillPayCheckout && $store.ladillPayCheckout.error
+                          ? 'Checkout unavailable'
+                          : ($store.ladillPayCheckout && $store.ladillPayCheckout.inline && !$store.ladillPayCheckout.launching
+                              ? 'Complete payment on this screen'
+                              : 'Starting secure checkout…')"></p>
+                    <p class="text-xs leading-snug text-slate-500"
+                       x-text="$store.ladillPayCheckout && $store.ladillPayCheckout.error
+                          ? $store.ladillPayCheckout.error
+                          : 'Secure card and mobile money checkout opens on this page — not in a separate browser.'"></p>
+                </div>
+                <button type="button"
+                        data-ladill-pay-retry
+                        x-show="$store.ladillPayCheckout && $store.ladillPayCheckout.error"
+                        @click="$store.ladillPayCheckout.sync(true, typeof checkoutUrl !== 'undefined' ? checkoutUrl : '', typeof accessCode !== 'undefined' ? accessCode : '', typeof returnUrl !== 'undefined' ? returnUrl : '')"
+                        class="inline-flex w-full max-w-xs items-center justify-center rounded-xl bg-indigo-600 px-4 py-3 text-sm font-semibold text-white hover:bg-indigo-700">
+                    Try again
+                </button>
+                <button type="button"
+                        @click="showSheet = false; window.LadillPayCheckout?.cancel?.()"
+                        class="text-xs font-medium text-slate-500 hover:text-slate-700">
+                    Cancel
+                </button>
+            </div>
+        </div>
+        @if (! empty($sheetFooter))
+            <p class="shrink-0 border-t border-slate-100 bg-slate-50 px-4 py-2 text-center text-[11px] text-slate-500 md:px-5">
+                {{ $sheetFooter }}
+            </p>
+        @endif
     </div>
 </div>
 </template>
diff --git a/tests/Feature/ResponsivePaystackSheetTest.php b/tests/Feature/ResponsivePaystackSheetTest.php
index edf49fd..397090d 100644
--- a/tests/Feature/ResponsivePaystackSheetTest.php
+++ b/tests/Feature/ResponsivePaystackSheetTest.php
@@ -18,8 +18,6 @@ class ResponsivePaystackSheetTest extends TestCase
         $this->assertStringContainsString('data-ladill-pay-panel', $html);
         $this->assertStringContainsString('data-ladill-pay-backdrop', $html);
         $this->assertStringContainsString('data-ladill-pay-handle', $html);
-        $this->assertStringContainsString('data-ladill-pay-loading', $html);
-        $this->assertStringContainsString('data-ladill-pay-shell', $html);
         $this->assertStringContainsString('data-ladill-pay-inline-status', $html);
         $this->assertStringContainsString('md:items-center', $html);
         $this->assertStringContainsString('rounded-t-2xl', $html);
@@ -30,13 +28,13 @@ class ResponsivePaystackSheetTest extends TestCase
         $this->assertStringContainsString('LadillPayCheckout', $html);
         $this->assertStringContainsString('resumeTransaction', $html);
         $this->assertStringContainsString('js.paystack.co/v2/inline.js', $html);
-        $this->assertStringContainsString('Opening payment', $html);
-        $this->assertStringContainsString('pointer-events-none', $html);
+        $this->assertStringContainsString('Starting secure checkout', $html);
+        $this->assertStringContainsString('Complete payment on this screen', $html);
+        $this->assertStringContainsString('not in a separate browser', $html);
+        $this->assertStringContainsString('items-end justify-center md:items-center', $html);
         // Must not push Paystack to a separate browser as the primary path.
         $this->assertStringNotContainsString('Continue to Paystack', $html);
         $this->assertStringNotContainsString('window.open(', $html);
-        // Must not stack Ladill chrome under Paystack Inline (double interface).
-        $this->assertStringNotContainsString('Complete payment in the Paystack window', $html);
         // Must not use Tailwind `hidden` + x-show on the panel (desktop stays invisible).
         $this->assertStringNotContainsString('hidden w-full max-w-lg', $html);
         $this->assertStringNotContainsString('Paystack checkout', $html);
@@ -70,6 +68,7 @@ class ResponsivePaystackSheetTest extends TestCase
         $this->assertStringContainsString('access_code', $html);
         $this->assertStringContainsString('accessCode', $html);
         $this->assertStringContainsString('paymentCheckout.open', $html);
+        $this->assertStringContainsString('syncFromStore', $html);
         $this->assertStringContainsString('partials.paystack-sheet', $html);
     }
 }