/* Overlay background */
.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 15, 20, 0.85);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.25s ease;
}

.loader-overlay.hidden {
  display: none;
}

/* The animated square badge */
.spinner-badge {
  width: 64px;
  height: 64px;
  background: #1a1a24;
  border: 2px solid #e74c3c;
  border-radius: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: #ffffff;
  box-shadow: 0 0 25px rgba(231, 76, 60, 0.35);
  animation: badgeFlip 1.2s infinite ease-in-out;
}

/* Flip animation */
@keyframes badgeFlip {
  0% {
    transform: perspective(400px) rotateY(0deg) scale(1);
  }
  50% {
    transform: perspective(400px) rotateY(180deg) scale(1.1);
  }
  100% {
    transform: perspective(400px) rotateY(360deg) scale(1);
  }
}

#loader-text {
  margin-top: 18px;
  color: #a0a0b0;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/*
/* NEW LOADER 
/*
/*
/*
*/
/* Overlay background */

.loader2-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(15, 15, 20, 0.85);
  backdrop-filter: blur(6px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  transition: opacity 0.25s ease;
}

.loader2-overlay.hidden {
  display: none;
}

/* The animated square badge */
.spinner-badge {
  width: 88px;
  height: 88px;
  background: #1a1a24;
  border: 2px solid #e74c3c;
  border-radius: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: 800;
  font-size: 22px;
  color: #ffffff;
  box-shadow: 0 0 25px rgba(231, 76, 60, 0.35);
  animation: badgeFlip 1.2s infinite ease-in-out;
}

/* Flip animation */
@keyframes badgeFlip {
  0% {
    transform: perspective(400px) rotateY(0deg) scale(1);
  }
  50% {
    transform: perspective(400px) rotateY(180deg) scale(1.1);
  }
  100% {
    transform: perspective(400px) rotateY(360deg) scale(1);
  }
}

#loader2-text {
  margin-top: 18px;
  color: #a0a0b0;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
}