/* Modal Visibility Fix - Ensure Bootstrap modals appear above other elements */

/* Increase Bootstrap modal z-index to be above custom elements */
.modal {
  z-index: 15000 !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  /* Single scrollbar: overlay scrolls, body is locked */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  outline: 0 !important;
}

.modal-backdrop {
  z-index: 14999 !important;
  background-color: #000 !important; /* darken background behind modal */
}

/* Ensure visible dark overlay intensity */
.modal-backdrop.show,
.modal-backdrop.fade.in {
  opacity: 0.45 !important;
}

/* Ensure modal is displayed properly */
.modal.fade.in {
  display: block !important;
  opacity: 1 !important;
}

.modal.show {
  display: block !important;
  opacity: 1 !important;
}

/* Fix for modal-open body class */
body.modal-open {
  /* Lock body to avoid double scrollbars; overlay handles the scroll */
  overflow: hidden !important;
  padding-right: 0 !important; /* prevent width jump */
}

.modal .close {
  position: absolute !important;
  top: -16px !important;
  right: -16px !important;
  z-index: 10 !important;
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background-color: #933a4e !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.25) !important;
}

/* Ensure modal dialog is positioned correctly and centered */
.modal-dialog {
  position: relative !important;
  width: auto !important;
  margin: 1.75rem auto !important;
  max-width: 500px !important;
  pointer-events: auto !important;
  transform: none !important;
}

/* Center the modal dialog vertically */
.modal-dialog-centered {
  display: flex !important;
  align-items: center !important;
  min-height: calc(100% - (1.75rem * 2)) !important;
}

/* Ensure modal content is properly styled */
.modal-content {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  pointer-events: auto !important;
  background-color: #fff !important;
  background-clip: padding-box !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  border-radius: 22px !important;
  outline: 0 !important;
}

/* Custom Modal Close Button - Circular Red Button with White X */
.modal .close {
  position: absolute !important;
  top: 15px !important;
  right: 15px !important;
  z-index: 10 !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  background-color: #933a4e !important; /* Dark red/maroon background */
  border: 2px solid #ffffff !important; /* White border */
  color: #ffffff !important; /* White X icon */
  font-size: 16px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  padding: 0 !important;
  margin: 0 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important; /* Subtle shadow */
  transition: all 0.3s ease !important;
  opacity: 1 !important;
  text-shadow: none !important;
}

.modal .close:hover,
.modal .close:focus {
  background-color: #852131 !important; /* Darker red on hover */
  color: #ffffff !important;
  text-decoration: none !important;
  transform: scale(1.1) !important; /* Slight scale on hover */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3) !important; /* Enhanced shadow on hover */
}

.modal .close:active {
  transform: scale(0.95) !important; /* Slight press effect */
}

/* Style the FontAwesome icon inside the close button */
.modal .close i {
  font-size: 14px !important;
  line-height: 1 !important;
  margin: 0 !important;
}

/* Ensure the close button is visible and not cropped */
.modal-content {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  pointer-events: auto !important;
  background-color: #fff !important;
  background-clip: padding-box !important;
  border: 1px solid rgba(0, 0, 0, 0.2) !important;
  border-radius: 1rem !important;
  outline: 0 !important;
  overflow: visible !important; /* Allow close button to extend outside */
}

/* Push modal body content down to make room for close button */
.modal-body {
  position: relative !important;
  flex: 1 1 auto !important;
  padding: 30px 15px 15px 15px !important; /* Extra top padding for close button space */
  margin-top: 0 !important;
}

/* Debug styles - remove after testing */
.modal-debug {
  border: 3px solid red !important;
  background: rgba(255, 0, 0, 0.1) !important;
}

.modal-backdrop-debug {
  background: rgba(0, 255, 0, 0.3) !important;
}

/* ---------- Login card input styles (match live card) ---------- */
#lapidarisModal .login-form .form-group { margin-bottom: 16px !important; }

#lapidarisModal .login-form .form-control,
#lapidarisModal .login-form input[type="text"],
#lapidarisModal .login-form input[type="email"],
#lapidarisModal .login-form input[type="password"] {
  height: 62px !important;
  border-radius: 16px !important;
  font-size: 17px !important;
  padding: 16px 20px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06), 0 2px 10px rgba(0,0,0,.05) !important;
  transition: box-shadow .2s ease, border-color .2s ease !important;
}

#lapidarisModal .login-form .form-control:focus {
  outline: none !important;
  border-color: rgba(152,44,83,.4) !important; /* theme tone */
  box-shadow: 0 0 0 3px rgba(152,44,83,.15), inset 0 1px 2px rgba(0,0,0,.06) !important;
}

#lapidarisModal .login-form .form-control::placeholder { color: rgba(40,37,52,.5) !important; }

/* ---------- Registration card spacing to match screenshot ---------- */
#lapidarisModal #registration-modal-form .form-group { margin-bottom: 14px !important; }
#lapidarisModal #registration-modal-form .form-row,
#lapidarisModal #registration-modal-form .row { margin-left: 0 !important; margin-right: 0 !important; }
#lapidarisModal #registration-modal-form .col-6,
#lapidarisModal #registration-modal-form .col-sm-12 { padding-left: 0 !important; padding-right: 0 !important; }

/* Inputs in registration same look as login */
#lapidarisModal #registration-modal-form input.form-control {
  height: 62px !important;
  border-radius: 16px !important;
  font-size: 17px !important;
  padding: 16px 20px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0,0,0,.08) !important;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06), 0 2px 10px rgba(0,0,0,.05) !important;
}
#lapidarisModal #registration-modal-form input.form-control:focus {
  outline: none !important;
  border-color: rgba(152,44,83,.4) !important;
  box-shadow: 0 0 0 3px rgba(152,44,83,.15), inset 0 1px 2px rgba(0,0,0,.06) !important;
}

/* Checkbox rows spacing */
#lapidarisModal #registration-modal-form .formrow-m { margin: 12px 0 !important; }

/* Submit button width and placement */
#lapidarisModal #registration-modal-form .lrsb-reg { width: 85% !important; height: 56px !important; border-radius: 16px !important; }

/* Bigger “Forgotten password? Click here” row */
#lapidarisModal .loginrecoveryrow {
  font-size: 16px !important;
  line-height: 1.5 !important;
  margin: 6px 0 16px 0 !important;
}
#lapidarisModal .loginrecoveryrow img[alt="info"] {
  width: 20px !important;
  height: 20px !important;
  margin-right: 6px !important;
  position: relative !important;
  top: 3px !important;
}
#lapidarisModal .loginrecoveryrow a { font-weight: 600 !important; }

/* Forgotten password row – make slightly bigger */
#lapidarisModal .loginrecoveryrow {
  font-size: 18px !important;
  line-height: 1.6 !important;
}

#lapidarisModal .loginrecoveryrow img {
  width: 26px !important;
  height: 26px !important;
  margin-right: 8px !important;
  vertical-align: middle !important;
}