/* SmartFabX wait overlay — scoped (does not reset page styles) */

.sfx-loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(238, 243, 251, 0.94);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 200000;
  opacity: 1;
  visibility: hidden;
  pointer-events: none;
}

.sfx-loading-overlay.active {
  display: flex;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.sfx-loader-card {
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 24px;
  padding: 40px 46px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.16);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  max-width: 340px;
  width: 90%;
  animation: sfxLoaderFloat 3s ease-in-out infinite;
}

@keyframes sfxLoaderFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.sfx-loader-spinner {
  width: 90px;
  height: 90px;
  margin: 0 auto 24px;
  position: relative;
}

.sfx-loader-spinner::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 5px solid transparent;
  border-top-color: #1F3A5F;
  border-right-color: #4B5563;
  border-bottom-color: #64748B;
  border-left-color: #94A3B8;
  animation: sfxLoaderSpin 1.2s linear infinite;
  filter: drop-shadow(0 0 8px rgba(31, 58, 95, 0.35));
}

.sfx-loader-spinner::after {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: #334155;
  border-right-color: #1F3A5F;
  animation: sfxLoaderSpin 0.8s linear infinite reverse;
  filter: drop-shadow(0 0 6px rgba(31, 58, 95, 0.28));
}

@keyframes sfxLoaderSpin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.sfx-loader-title {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 1.45rem;
  font-weight: 600;
  background: linear-gradient(90deg, #1F3A5F, #4B5563, #64748B, #334155);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-size: 300% 100%;
  animation: sfxLoaderShine 3s linear infinite;
  margin: 0 0 8px;
}

@keyframes sfxLoaderShine {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

.sfx-loader-subtitle {
  font-family: 'Segoe UI', system-ui, sans-serif;
  color: rgba(15, 23, 42, 0.7);
  font-size: 0.95rem;
  margin: 0 0 24px;
  font-weight: 500;
}

.sfx-loader-progress {
  width: 100%;
  height: 6px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 50px;
  overflow: hidden;
  position: relative;
}

.sfx-loader-progress-bar {
  height: 100%;
  width: 45%;
  border-radius: 50px;
  background: linear-gradient(90deg, #1F3A5F, #4B5563, #64748B, #334155, #1F3A5F);
  background-size: 200% 100%;
  animation: sfxLoaderProgress 1.6s ease-in-out infinite, sfxLoaderGrad 2s linear infinite;
  box-shadow: 0 0 12px rgba(31, 58, 95, 0.28);
}

@keyframes sfxLoaderProgress {
  0% { transform: translateX(-120%); }
  50% { transform: translateX(180%); }
  100% { transform: translateX(-120%); }
}

@keyframes sfxLoaderGrad {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}