/* Professional Override for jquery-loading styles */

/* Base overlay styling - override display:table */
.loading-overlay {
  display: flex !important; /* Override display:table */
  align-items: center;
  justify-content: center;
  opacity: 0.92 !important; /* Override opacity:0.9 */
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999; /* Increased z-index to be higher than modal */
}
.loading-overlay.loading-hidden {
  display: none !important; /* Force hide regardless of other settings */
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Light theme enhancement - override background-color:#fff and color:#000 */
.loading-overlay.loading-theme-light {
  background: linear-gradient(135deg, rgba(245, 247, 250, 0.95) 0%, rgba(230, 236, 245, 0.95) 100%) !important;
  color: #1a3a6b !important;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.1) inset;
}

/* Dark theme enhancement - override background-color:#000 */
.loading-overlay.loading-theme-dark {
  background: linear-gradient(135deg, rgba(15, 33, 64, 0.95) 0%, rgba(26, 36, 64, 0.95) 100%) !important;
  color: #ffffff !important;
}

/* Content container styling - override display:table-cell and vertical-align:middle */
.loading-overlay-content {
  display: flex !important; /* Override display:table-cell */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: initial !important; /* Override vertical-align:middle */
  padding: 25px 30px;
  border-radius: 12px;
  max-width: 85%;
  position: relative;

  /* Professional typography - override uppercase, letter-spacing, etc. */
  text-transform: none !important; /* Override text-transform:uppercase */
  letter-spacing: normal !important; /* Override letter-spacing:0.4em */
  font-size: 16px !important; /* Override font-size:1.15em */
  font-weight: 500 !important; /* Override font-weight:bold with medium weight */
  line-height: 1.5;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Light theme content styling */
.loading-theme-light .loading-overlay-content {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(200, 210, 230, 0.5);
}

/* Dark theme content styling */
.loading-theme-dark .loading-overlay-content {
  background-color: rgba(30, 40, 60, 0.9);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(60, 80, 120, 0.5);
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .loading-overlay-content {
    font-size: 14px !important;
    padding: 20px;
  }

  .loading-overlay-content::before {
    width: 30px;
    height: 30px;
    margin-bottom: 15px;
  }
}

/* Animations */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes loadingDots {
  0% { content: ""; }
  25% { content: "."; }
  50% { content: ".."; }
  75% { content: "..."; }
  100% { content: ""; }
}

/* Primary spinner */
.loading-overlay-content::before {
  content: "";
  width: 40px;
  height: 40px;
  margin-bottom: 20px;
  display: block;
  position: relative;
  background-color: transparent;
  box-sizing: border-box;
  border: 3px solid transparent;
  border-top-color: #1a3a6b;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Using a pseudo-element within a class for the outer spinner */
.loading-overlay-content {
  position: relative;
}

/* Add a professional loading message style */
.loading-message {
  margin-top: 8px;
  font-size: 14px;
  opacity: 0.8;
  font-weight: normal;
}

/* For modal-specific loading - ensures loader appears on top */
.modal-open .loading-overlay {
  z-index: 999999; /* Even higher z-index when modal is open */
}

/* Optional: For button-specific loaders within modals */
.modal .btn-loading {
  position: relative;
  overflow: hidden;
}

.modal .btn-loading .button-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: inherit;
  z-index: 5; /* Local z-index for button loader */
}