{{-- ═══════════ BUY DIALOG ═══════════ --}}
<div class="overlay" id="overlay" role="dialog" aria-modal="true" aria-labelledby="dlgTitle">
  <div class="dialog">
    <button class="d-close" id="closeBtn" aria-label="Close">&times;</button>
    <h3 id="dlgTitle">Where should the book go?</h3>
    <p class="d-sub">The PDF is emailed to you the moment payment clears.</p>

    <div class="field">
      <label for="name">Your name</label>
      <input id="name" type="text" autocomplete="name" required>
    </div>

    <div class="field">
      <label for="email">Email address</label>
      <input id="email" type="email" autocomplete="email" required>
    </div>

    <button class="buy" id="payBtn">Pay ₹{{ number_format($price/100) }}</button>
    <div class="d-err" id="err"></div>
    <p class="d-foot">Secure payment by Razorpay — UPI, cards, netbanking, wallets.</p>
  </div>
</div>