/**
 * Embassy Priority — "Refer a Friend" CTA popup styles (child-theme add-on)
 * -----------------------------------------------------------------------------
 * Everything is scoped to #ep-refer-modal, so the existing card popup
 * (#cip-lead-modal) is never affected. The popup reuses the plugin's cip-*
 * classes for an identical look; these rules only:
 *   1. force the Poppins font (the plugin uses Neulisans !important),
 *   2. style the new Project Interested <select> as a matching pill dropdown,
 *   3. keep the Submit button fully visible (no clipping),
 *   4. match the Submit button to the site's CTA buttons (black -> orange hover).
 */

/* 1) Poppins font — overrides the plugin's Neulisans !important (ID > class). */
#ep-refer-modal,
#ep-refer-modal * {
  font-family: 'Poppins', Helvetica, Arial, sans-serif !important;
}

/* Same box width as the existing modal.
   FIX (button clipping): let the whole popup grow and scroll from the overlay
   instead of scrolling the inner body (which was cutting off the button). */
#ep-refer-modal .cip-modal-content {
  max-width: 600px;
  width: 90%;
  max-height: none;
}
#ep-refer-modal .cip-modal-body {
  overflow: visible;
}

/* 4) Submit button — semi-transparent black at rest, solid black on hover. */
#ep-refer-modal #ep-refer-submit {
  background: rgba(0, 0, 0, 0.6) !important;
  color: #ffffff !important;
  border: 1px solid #000000 !important;
}
#ep-refer-modal #ep-refer-submit:hover:not(:disabled) {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #000000 !important;
}

/* 2) Project Interested dropdown — match the pill inputs + custom arrow. */
#ep-refer-modal select.ep-refer-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center;
  padding-right: 44px;
  cursor: pointer;
}

#ep-refer-modal select.ep-refer-select option {
  color: #1a1a1a;
}

@media (max-width: 768px) {
  #ep-refer-modal .cip-modal-content {
    width: 95%;
    max-width: none;
  }
}