/* Backdrop */
.fpt-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0,0,0,0.6);
  overflow-y: auto;
  padding: 30px 15px;
}

/* Dialog */
.fpt-modal-content {
  position: relative;
  background: #fff;
  margin: auto;
  max-width: 640px;
  width: 100%;
  border-radius: 10px;
  padding: 24px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.2);
  animation: fptFadeInUp .25s ease;
  /* Important: Allow the datepicker to render outside the dialog */
  overflow: visible;
  z-index: 10000;

}

/* Close button (z-index is high to ensure it's clickable) */
.fpt-close {
  position: absolute;
  top: 10px;
  right: 10px;
  /* ... other styles ... */
  z-index: 10000;
}

/* The datepicker itself */
#ui-datepicker-div {
  /*     The JS will set the z-index to 10001, but we keep this rule 
    as a fallback and for basic styling.
  */
  background: #fff;
 z-index: 10001 !important;
  position: absolute;  !important;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
  /* Ensure it's not hidden by other rules */
  display: none; 
}