<!-- ============ POPUP MODAL ============ -->
<div id="customModalOverlay" class="modal-overlay" role="dialog" aria-modal="true" aria-labelledby="modalTitle" style="display:none;">
  <div class="modal-container">

    <!-- Close Button -->
    <button id="customModalClose" class="modal-close" aria-label="Close modal">&#10005;</button>

    <div class="modal-body">

      <!-- Left Image Column -->
      <div class="modal-img-col">
        <img src="assets/images/popup-img.webp" alt="Start your publishing journey" loading="lazy">
        <div class="modal-img-overlay"></div>
        <div class="modal-img-text">
          <strong>Your Story Deserves to Be Published</strong>
          <span>Let's bring your vision to life.</span>
        </div>
      </div>

      <!-- Right Form Column -->
      <div class="modal-form-col">
        <div class="modal-plan-badge" id="modalPlanBadge">&#128218; Inquire Now</div>
        <h3 class="modal-title" id="modalTitle">Inquire Now</h3>
        <p class="modal-subtitle">Fill in your details and we'll reach out within 24 hours.</p>

        <form action="contact-handler.php" method="POST" class="modal-form" id="popupForm">
          <input type="hidden" name="leadprice" class="leadprice" value="">
          <input type="hidden" name="serviii"   class="serviii"   value="">
          <!-- Honeypot -->
          <div style="display:none!important;">
            <input type="text" name="full_name_honeypot" tabindex="-1" autocomplete="off">
          </div>

          <div id="pnlRequest">
            <div class="form-row">
              <div class="form-group">
                <input name="name"  type="text"  maxlength="25" placeholder="Full Name"     class="required form-control" required>
              </div>
              <div class="form-group">
                <input name="email" type="email" maxlength="50" placeholder="Email Address" class="required email form-control" required>
              </div>
            </div>

            <div class="form-group">
              <input name="phone" type="text" maxlength="15" placeholder="Phone Number"
                     class="required number form-control phone-number" required>
              <input type="hidden" name="country_name" class="hdnCountryName">
              <input type="hidden" name="country_code" class="hdnCountryCode">
            </div>

            <div class="form-group">
              <textarea name="message" placeholder="Tell us about your project..." class="form-control required" required></textarea>
            </div>

            <label class="modal-consent">
              <input id="customCheck2" type="checkbox" name="agree" checked required>
              I agree to receive communications by text regarding publishing services and offers from Conxeptrix.
              You may opt-out by replying STOP. Message and data rates may apply.
              <a href="PrivacyLP.php" target="_blank">Privacy Policy</a>.
            </label>

            <button type="submit" name="submit_quote" class="modal-submit-btn">
              Submit My Request &rarr;
            </button>
          </div>
        </form>
      </div>

    </div><!-- /.modal-body -->
  </div><!-- /.modal-container -->
</div><!-- /#customModalOverlay -->

<script>
(function() {
  var overlay = document.getElementById('customModalOverlay');
  var closeBtn = document.getElementById('customModalClose');
  function closeModal() {
    overlay.style.display = 'none';
    document.body.style.overflow = '';
  }
  if (closeBtn) closeBtn.onclick = closeModal;
  if (overlay) {
    overlay.onclick = function(e) {
      if (e.target === overlay) closeModal();
    };
  }
  document.addEventListener('keydown', function(e) {
    if (e.key === 'Escape' && overlay && overlay.style.display !== 'none') closeModal();
  });
})();
</script>
