/*
  Loader canônico do projeto.
  Fonte visual: /loader.html (raiz do projeto) — mantenha os dois em sincronia.
  Qualquer troca de design do loader deve ser feita SOMENTE aqui; todas as
  telas referenciam este arquivo em vez de duplicar o CSS do loader.
*/

.loader {
  width: 50px;
  aspect-ratio: 1;
  display: grid;
  border: 4px solid #0000;
  border-radius: 50%;
  border-right-color: #25b09b;
  animation: nxLoaderSpin 1s infinite linear;
}

.loader::before,
.loader::after {
  content: "";
  grid-area: 1/1;
  margin: 2px;
  border: inherit;
  border-radius: 50%;
  animation: nxLoaderSpin 2s infinite;
}

.loader::after {
  margin: 8px;
  animation-duration: 3s;
}

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

/* variante reduzida, para uso inline em botões/campos */
.loader-sm {
  width: 18px;
  border-width: 2px;
}

.loader-sm::before {
  margin: 1px;
}

.loader-sm::after {
  margin: 3px;
}

/* variante clara, para uso sobre fundos escuros/coloridos (ex.: botões primary) */
.loader-invert {
  border-right-color: #fff;
}

/*
  Padrão de botão com loader: qualquer botão que precise de estado de
  carregamento usa <span class="btn-loader"> (preenchido via JS com
  Loader.markup(...)) + a classe "loading" no próprio botão.
*/
.btn-loader { display: none; }
.btn.loading .btn-loader { display: inline-flex; }
.btn.loading .btn-label { opacity: .85; }
.btn.loading { pointer-events: none; }

/* overlay de carregamento de página inteira (transições de navegação) */
.loader-overlay {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(244, 246, 249, .82);
  backdrop-filter: blur(1px);
}

.loader-overlay.show {
  display: flex;
}

@media (prefers-reduced-motion: reduce) {
  .loader, .loader::before, .loader::after {
    animation-duration: 2.4s;
  }
}