/* static/loader.css */
:root{
  --loader-bg-dark: rgba(0, 0, 0, 1);
  --loader-bg-light: rgba(255, 255, 255, 1);
  --text-dark: #000000;
  --text-light: #000000;
}

.dx-loader{
  position: fixed; 
  inset: 0; 
  z-index: 99999;
  background: var(--loader-bg-dark);
  display: grid; 
  place-items: center;
  backdrop-filter: blur(4px);
}

.light-mode .dx-loader{ 
  background: var(--loader-bg-light); 
}

.dx-loader__wrap{
  position: relative; 
  width: min(70vw, min(70vh, 280px)); 
  aspect-ratio: 1/1;
  display: grid; 
  place-items: center;
}

/* New loader design */
.loader {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 1) 0%,
    rgb(240, 240, 240) 30%,
    rgb(200, 200, 200) 70%,
    rgb(180, 180, 180) 100%
  );
  border-radius: 50%;
  position: relative;
  box-shadow: 
    0 0 min(4vw, 60px) rgba(255, 255, 255, 0.8),
    0 0 min(8vw, 120px) rgba(255, 255, 255, 0.6),
    0 0 min(12vw, 180px) rgba(255, 255, 255, 0.4),
    inset 0 0 min(2.5vw, 40px) rgba(255, 255, 255, 0.3);
}

.light-mode .loader {
  background: linear-gradient(
    165deg,
    rgba(0, 0, 0, 1) 0%,
    rgb(30, 30, 30) 30%,
    rgb(60, 60, 60) 70%,
    rgb(80, 80, 80) 100%
  );
  box-shadow: 
    0 0 min(4vw, 60px) rgba(0, 0, 0, 0.8),
    0 0 min(8vw, 120px) rgba(0, 0, 0, 0.6),
    0 0 min(12vw, 180px) rgba(0, 0, 0, 0.4),
    inset 0 0 min(2.5vw, 40px) rgba(0, 0, 0, 0.3);
}

.loader:before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border-bottom: 0 solid #ffffff05;
  box-shadow: 
    0 -1.5vw 3vw 3vw #ffffff50 inset,
    0 -0.8vw 2vw 1.5vw #ffffff60 inset, 
    0 -0.4vw 1vw 0.8vw #ffffff80 inset,
    0 -0.2vw 0.5vw 0.4vw #ffffffbb inset, 
    0 0.3vw 0px #ffffff, 
    0 0.3vw 0.6vw #ffffff,
    0 0.8vw 0.8vw #ffffff90, 
    0 1.5vw 2vw #ffffff70, 
    0 1.5vw 3vw 3vw #ffffff50;
  filter: blur(4px);
  animation: 2s rotate linear infinite;
}

.light-mode .loader:before {
  border-bottom: 0 solid #00000005;
  box-shadow: 
    0 -1.5vw 3vw 3vw #00000050 inset,
    0 -0.8vw 2vw 1.5vw #00000060 inset, 
    0 -0.4vw 1vw 0.8vw #00000080 inset,
    0 -0.2vw 0.5vw 0.4vw #000000bb inset, 
    0 0.3vw 0px #000000, 
    0 0.3vw 0.6vw #000000,
    0 0.8vw 0.8vw #00000090, 
    0 1.5vw 2vw #00000070, 
    0 1.5vw 3vw 3vw #00000050;
}

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

/* Message sits INSIDE the circle, above all layers */
.dx-msg{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  width: 80%;
  text-align: center;
  font-family: 'Lemon Milk', sans-serif; 
  letter-spacing: 0.01em; 
  line-height: 1.0;
  color: #ffffff;
  font-size: clamp(0.8rem, 3.5vw, 1.4rem);
  font-weight: 800;
  text-shadow: 0 0 min(0.5vw, 8px) rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  overflow: visible;
  text-overflow: clip;
  padding: 2px;
  max-width: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.light-mode .dx-msg{ 
  color: #ffffff;
  text-shadow: 0 0 min(0.5vw, 8px) rgba(0, 0, 0, 0.9);
}

/* While loading, hide the theme switch */
body.dx-loading .theme-toggle{ display:none !important; }