/* Full-screen overlay to cover the page and center the content */
//.custom-spinner-overlay {
//    position: fixed;
//    top: 0;
//    left: 0;
//    width: 100%;
//    height: 100%;
//    /* Dimmed-out background: very light gray with high transparency */
//    background-color: rgba(240, 240, 240, 0.6); 
//    display: flex;
//    justify-content: center;
//    align-items: center;
//    z-index: 9999;
//}
//
///* Content container, removed the black background entirely */
//.custom-spinner-content {
//    text-align: center;
//    color: #333; /* Dark gray text color to contrast with the light dim overlay */
//    padding: 20px;
//    border-radius: 10px;
//    /* Removed: background: #1a1a1a; */
//    /* Removed: box-shadow: ... */
//}
//
///* Make the text larger and very easy to read */
//.spinner-message {
//    font-size: 28px; 
//    font-weight: bold;
//    display: block; 
//    margin-top: 25px; 
//    /* Add a subtle text shadow so it's readable over various page contents */
//    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.7); 
//}
//
///* The 3D-effect Raindrop/Bouncing Spinner */
//.raindrop-3d {
//  width: 30px;
//  height: 30px;
//  margin: 0 10px; 
//  display: inline-block;
//  position: relative;
//  /* Gradient for 3D sphere look */
//  background: radial-gradient(circle at 30% 30%, #4da6ff, #005fB3); 
//  border-radius: 50%;
//  animation: bounce-3d 1.4s infinite ease-in-out both;
//  /* Inner and outer shadow for depth */
//  box-shadow: inset -5px -5px 10px rgba(0,0,0,0.5), 0 5px 15px rgba(0,0,0,0.3); 
//}
//
///* Stagger the animation timing for the "falling" effect */
//.raindrop-3d:nth-child(1) { animation-delay: -0.3s; }
//.raindrop-3d:nth-child(2) { animation-delay: -0.6s; }
//.raindrop-3d:nth-child(3) { animation-delay: -0.9s; }
//
//
//@keyframes bounce-3d {
//  0%, 100% {
//    transform: translateY(0) scale(1);
//    opacity: 1;
//  }
//  50% {
//    transform: translateY(-30px) scale(1.1);
//    opacity: 0.9;
//  }
//}


/* Full-screen overlay to cover the page and center the content */
.custom-spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Blurred and dimmed background */
    background-color: rgba(240, 240, 240, 0.4);
    backdrop-filter: blur(8px); /* <-- adds blur */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Content container */
.custom-spinner-content {
    text-align: center;
    color: #333;
    padding: 20px;
    border-radius: 10px;
}

/* Spinner message text */
.spinner-message {
    font-size: 28px; 
    font-weight: bold;
    display: block; 
    margin-top: 25px; 
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.7);
}

/* The 3D-effect Raindrop/Bouncing Spinner */
.raindrop-3d {
  width: 30px;
  height: 30px;
  margin: 0 10px;
  display: inline-block;
  position: relative;
  background: radial-gradient(circle at 30% 30%, #4da6ff, #005fb3);
  border-radius: 50%;
  animation: bounce-3d 1.4s infinite ease-in-out both;
  box-shadow: inset -5px -5px 10px rgba(0,0,0,0.5), 0 5px 15px rgba(0,0,0,0.3);
}

/* Stagger animation for all 5 raindrops */
.raindrop-3d:nth-child(1) { animation-delay: -0.3s; }
.raindrop-3d:nth-child(2) { animation-delay: -0.6s; }
.raindrop-3d:nth-child(3) { animation-delay: -0.9s; }
.raindrop-3d:nth-child(4) { animation-delay: -1.2s; }
.raindrop-3d:nth-child(5) { animation-delay: -1.5s; }

@keyframes bounce-3d {
  0%, 100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  50% {
    transform: translateY(-30px) scale(1.1);
    opacity: 0.9;
  }
}