ui: боковая панель — ширина 560px, вкладка «Оплата» двухколоночная

- w-[400px] → w-[560px] для боковой панели бронирования
- Вкладка «Оплата»: расчёт + платежи слева, депозит справа (grid 2 cols)
- На мобиле — одна колонка как прежде

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/components/bookings/BookingDetailPanel.tsx

@@ -955,7 +955,7 @@ export function BookingDetailPanel({ booking, room, rooms, allBookings, slug, on
     <>
       <div className="fixed inset-0 z-40" onClick={onClose} />
 
-      <div className="fixed right-0 top-0 bottom-0 z-50 w-full sm:w-[400px] bg-white dark:bg-slate-800 border-l border-slate-200 dark:border-slate-700 shadow-2xl flex flex-col">
+      <div className="fixed right-0 top-0 bottom-0 z-50 w-full sm:w-[560px] bg-white dark:bg-slate-800 border-l border-slate-200 dark:border-slate-700 shadow-2xl flex flex-col">
 
         {/* Toast notification */}
         {toast && (
@@ -1636,6 +1636,9 @@ export function BookingDetailPanel({ booking, room, rooms, allBookings, slug, on
 
           {/* ── Оплата ───────────────────────────────────────────────────────── */}
           {tab === 'payment' && (
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 items-start">
+
+              {/* Левая колонка — расчёт и приём оплаты */}
               <div className="space-y-4">
                 {/* Discount selector */}
                 <div>
@@ -1751,10 +1754,13 @@ export function BookingDetailPanel({ booking, room, rooms, allBookings, slug, on
                     </div>
                   </div>
                 )}
+              </div>
 
-              {/* Deposit widget */}
+              {/* Правая колонка — депозит */}
               {slug && (
+                <div>
                   <DepositWidget slug={slug} bookingId={booking.id} />
+                </div>
               )}
             </div>
           )}