Change deposit to $45, add balance-due-at-pickup calculations

- DEPOSIT_AMOUNT changed from $100 to $45
- Balance (package price minus $45) shown dynamically in booking form when package selected
- Customer confirmation email shows breakdown: deposit hold + balance at pickup
- Admin email table includes deposit hold and balance columns
- Admin booking flow step 5 shows deposit held + balance at pickup
- Reminder email deposit detail updated to reflect held deposit and balance
- Live status field shows $45 during card authorization flow

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

index.html

@@ -814,8 +814,11 @@
 
             <!-- Square deposit card -->
             <div style="background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:8px;padding:1rem;margin-top:0.25rem">
-              <p style="font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:rgba(249,115,22,0.8);margin-bottom:0.5rem">Refundable Deposit — $100</p>
-              <p style="font-size:0.8rem;color:rgba(255,255,255,0.5);margin-bottom:0.85rem;line-height:1.5">A $100 hold will be placed on your card — <strong style="color:rgba(255,255,255,0.75)">not charged</strong> until your booking is confirmed. Released in full if declined or at return.</p>
+              <div style="display:flex;justify-content:space-between;align-items:baseline;margin-bottom:0.5rem">
+                <p style="font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:rgba(249,115,22,0.8);margin:0">Deposit — $45 today</p>
+                <p id="balance-due-label" style="font-size:0.78rem;color:rgba(255,255,255,0.45);margin:0;display:none">Balance at pickup: <strong id="balance-due-amount" style="color:rgba(255,255,255,0.75)"></strong></p>
+              </div>
+              <p style="font-size:0.8rem;color:rgba(255,255,255,0.5);margin-bottom:0.85rem;line-height:1.5">A $45 hold is placed on your card to secure your date — <strong style="color:rgba(255,255,255,0.75)">not charged</strong> until confirmed. Remaining balance is due at pickup.</p>
               <div id="card-container" style="min-height:44px"></div>
               <p id="card-errors" style="color:#f87171;font-size:0.78rem;margin-top:0.4rem;display:none"></p>
               <div id="deposit-status" style="display:none;margin-top:0.6rem;font-size:0.82rem;border-radius:6px;padding:0.5rem 0.75rem;line-height:1.5"></div>
@@ -984,6 +987,24 @@
       });
     }
 
+    // ── Balance-due display ───────────────────────────────────────────────────────
+    const PACKAGE_PRICES = { 'half-day': 99, 'full-day': 169, 'weekend': 299 };
+    const DEPOSIT = 45;
+    const pkgSelect = document.querySelector('select[name="package"]');
+    const balLabel  = document.getElementById('balance-due-label');
+    const balAmt    = document.getElementById('balance-due-amount');
+    if (pkgSelect) {
+      pkgSelect.addEventListener('change', function() {
+        const price = PACKAGE_PRICES[this.value];
+        if (price && balLabel && balAmt) {
+          balAmt.textContent = '$' + (price - DEPOSIT).toFixed(2).replace(/\.00$/, '');
+          balLabel.style.display = '';
+        } else if (balLabel) {
+          balLabel.style.display = 'none';
+        }
+      });
+    }
+
     // ── Square Web Payments ───────────────────────────────────────────────────────
     let squareCard = null;
     async function initSquare() {
@@ -1050,7 +1071,7 @@
             return;
           }
           squareToken = result.token;
-          setDepStatus('Card verified — authorizing $100 deposit hold…', 'processing');
+          setDepStatus('Card verified — authorizing $45 deposit hold…', 'processing');
         }
 
         const data = {
@@ -1069,7 +1090,7 @@
         if (json.success) {
           if (json.deposit_held) {
             const holdSuffix = json.square_payment_id ? '  ·  Confirmation: …' + json.square_payment_id.slice(-10).toUpperCase() : '';
-            setDepStatus('✓ $100 deposit hold authorized' + holdSuffix, 'success');
+            setDepStatus('✓ $45 deposit hold authorized' + holdSuffix, 'success');
             const cardEl = document.getElementById('card-container');
             if (cardEl) cardEl.style.display = 'none';
           } else {