Fix OrderDetailBottomSheet backdrop to not overlap panel

Restructured z-index layering:
- Parent container: fixed inset-0 z-40 with pointer-events-none
- Backdrop: only covers map area (lg:left-96 on desktop)
- Sheet content: z-50, positioned above backdrop

app/components/catalog/OrderDetailBottomSheet.vue

@@ -2,17 +2,19 @@
   <Transition name="order-slide">
     <div
       v-if="isOpen && orderUuid"
-      class="fixed left-0 right-0 lg:left-96 bottom-0 z-50 flex flex-col"
-      style="height: 70vh"
+      class="fixed inset-0 z-40 pointer-events-none"
     >
-      <!-- Backdrop (clickable to close) - only covers map area, not panel -->
+      <!-- Backdrop (clickable to close) - only covers map area on desktop -->
       <div
-        class="absolute inset-0 -top-[30vh] bg-black/30"
+        class="absolute inset-0 lg:left-96 bg-black/30 pointer-events-auto"
         @click="emit('close')"
       />
 
-      <!-- Sheet content -->
-      <div class="relative flex-1 bg-black/40 backdrop-blur-xl rounded-t-2xl border-t border-white/20 shadow-2xl overflow-hidden">
+      <!-- Sheet content - positioned at bottom, above backdrop -->
+      <div
+        class="absolute left-0 right-0 lg:left-96 bottom-0 z-50 flex flex-col bg-black/40 backdrop-blur-xl rounded-t-2xl border-t border-white/20 shadow-2xl overflow-hidden pointer-events-auto"
+        style="height: 70vh"
+      >
         <!-- Header with drag handle and close -->
         <div class="sticky top-0 z-10 bg-black/30 backdrop-blur-md border-b border-white/10">
           <div class="flex justify-center py-2">