/*==================================================================================
  NEXA SMS — page loader (nexa-loader.css)

  Standalone. Nothing but the navigation progress bar and the spinner overlay:
  a thin bar along the top of the window and a centred spinner while the next
  page is on its way, both fading out once it arrives.

  Deliberately self-contained — every value is literal and every rule is scoped
  to #nx-progress / #nx-overlay, so this file cannot restyle any panel. Drop the
  two <link>/<script> tags and the panels are exactly as they were.
==================================================================================*/

@keyframes nxSpin { to { transform: rotate(360deg); } }

/*------------------------------------------------- thin top progress bar ----*/
#nx-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  z-index: 100000;
  background: linear-gradient(90deg, #0b6fc4, #0a7ada, #e8b53f);
  box-shadow: 0 0 8px rgba(11, 111, 196, .5);
  opacity: 0;
  transition: width 220ms cubic-bezier(.4, 0, .2, 1),
              opacity 220ms cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
#nx-progress.is-on   { opacity: 1; }
#nx-progress.is-done { opacity: 0; }

/*----------------------------------------------- centred spinner overlay ----*/
/* A dark scrim with a light spinner reads correctly over the light admin shell
   and the dark test panel alike, so one rule covers all four panels. */
#nx-overlay {
  position: fixed;
  inset: 0;
  z-index: 99990;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 20, 28, .38);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 220ms cubic-bezier(.4, 0, .2, 1),
              visibility 220ms cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
#nx-overlay.is-on {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
#nx-overlay .nx-spinner {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .28);
  border-top-color: #ffffff;
  animation: nxSpin 700ms linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  #nx-overlay .nx-spinner { animation-duration: 1.6s; }
  #nx-progress { transition: opacity 220ms linear; }
}