/* Modern Professional Loader Styles */

#loading {
  /* Legacy loader support if needed elsewhere */
  position: fixed;
  z-index: 9999999999999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #00000057;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  pointer-events: none !important;
}

/* Main Modal Container */
.maindiv {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.54);
  z-index: 9999999999999;
}

/* Loader Wrapper */
.maindiv .loadericon {
  position: relative;
  width: 140px;
  /* Larger base size */
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* The Spinner Ring */
.maindiv .loadericon .outerCircle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.1);
  /* Subtle track */
  border-top-color: #3b82f6;
  /* Primary Blue highlight */
  border-left-color: #60a5fa;
  /* Lighter Blue highlight */
  box-shadow: 0 0 25px rgba(59, 130, 246, 0.25);
  /* Glow effect */
  animation: smoothSpin 1.5s cubic-bezier(0.4, 0.1, 0.4, 1) infinite;
}

/* Inner Content Container (Glass Card) */
.maindiv .loadericon .icon {
  position: relative;
  width: 75%;
  /* Relative to loadericon */
  height: 75%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  /* Bright background for logo clarity */
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.2),
    inset 0 2px 4px rgba(255, 255, 255, 1);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px;
  /* Spacing for the image */
  overflow: hidden;
  /* Clips corner of non-round images */
  z-index: 2;
}

/* Dark mode adjustment for the Inner Card if the user provided image needs dark bg? 
   Usually logos are dark on light or light on dark. 
   Assuming the loader icon provided is suitable for a light background (standard practice) 
   or is self-contained (like a GIF).
   Let's make it neutral.
*/

/* The Image/GIF */
.maindiv .loadericon .icon img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Ensures aspect ratio is preserved */
  display: block;
  /* Optional: subtle pulse for the image itself */
  animation: imagePulse 2s ease-in-out infinite;
}

/* Animations */
@keyframes smoothSpin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes imagePulse {
  0% {
    transform: scale(1);
    opacity: 0.95;
  }

  50% {
    transform: scale(1.05);
    opacity: 1;
  }

  100% {
    transform: scale(1);
    opacity: 0.95;
  }
}

/* Responsive adjustments */
@media (max-width: 576px) {
  .maindiv .loadericon {
    width: 110px;
    height: 110px;
  }
}