/*
 * Reusable loading indicator.
 *
 * Usage: place a full-screen overlay anywhere and toggle `.is-active` to show it.
 *   <div id="app-loader" class="app-loader-overlay"><span class="loader"></span></div>
 *   document.getElementById('app-loader').classList.add('is-active');
 *
 * Linked standalone (not part of the Tailwind build) so it works on every page,
 * including the standalone auth pages.
 */

.loader-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  height: 160px;
  background: rgba(15, 15, 20, 0.82);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}

.loader {
  width: 100px;
  aspect-ratio: 1;
  display: grid;
  border: 7px solid transparent;
  border-radius: 50%;
  border-color: rgba(255, 255, 255, 0.25) transparent;
  animation: l16 1s infinite linear;
}

.loader::before,
.loader::after {
  content: "";
  grid-area: 1/1;
  margin: 4px;
  border: inherit;
  border-radius: 50%;
}

.loader::before {
  border-color: #f03355 transparent;
  animation: inherit;
  animation-duration: .5s;
  animation-direction: reverse;
}

.loader::after {
  margin: 16px;
}

@keyframes l16 {
  100% { transform: rotate(1turn); }
}

/* Full-screen dimmed overlay that centers the loader. Hidden until `.is-active`. */
.app-loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
}

.app-loader-overlay.is-active {
  display: flex;
}