/* Global page-loading indicator: top progress bar + branded favicon spinner.
   --page-loader-color must be set by the including base template (maps to
   that layout's own brand color variable, e.g. --primary-color or --primary). */

#pl-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: var(--page-loader-color, #2563eb);
  z-index: 99999;
  transition: width 0.2s ease-out, opacity 0.3s ease-in;
  pointer-events: none;
}

#pl-bar.pl-done {
  opacity: 0;
}

#pl-spinner {
  position: fixed;
  top: 14px;
  right: 14px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  pointer-events: none;
}

#pl-spinner.pl-visible {
  display: flex;
}

/* Rotating ring around the logo */
#pl-spinner::before {
  content: "";
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--page-loader-color, #2563eb);
  border-right-color: var(--page-loader-color, #2563eb);
  animation: pl-spin 0.8s linear infinite;
}

#pl-spinner img {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  animation: pl-pulse 1.2s ease-in-out infinite;
}

@keyframes pl-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes pl-pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.65;
    transform: scale(0.88);
  }
}

@media (prefers-reduced-motion: reduce) {
  #pl-spinner::before,
  #pl-spinner img {
    animation: none;
  }
}