/* CSS Loaders - Spinner Collection */

/* Loader 1: For login/logout operations */
.loader {
  width: 80px;
  aspect-ratio: 1;
  color: #000000; /* Indigo to match app theme */
  position: relative;
  z-index: 1000000;
}
.loader::before,
.loader::after {
  content: "";
  position: absolute;
  inset:0;
  background:
    linear-gradient(currentColor 0 0) 0 calc(var(--s,0)*-100%)/100% calc(100%/3),
    repeating-linear-gradient(90deg,currentColor 0 25%,#0000 0 50%) calc(var(--s,0)*100%) 50%/calc(4*100%/3) calc(100%/3);
  background-repeat: no-repeat;
  animation: l26 2s infinite;
}
.loader::after {
  --s:-1;
}
@keyframes l26 {
    0%,
    10%  {transform:translateY(calc(var(--s,1)*0));   background-position: 0 calc(var(--s,0)*-100%),calc(var(--s,0)*100%) 50%}
    33%  {transform:translateY(calc(var(--s,1)*-20%));background-position: 0 calc(var(--s,0)*-100%),calc(var(--s,0)*100%) 50%}
    66%  {transform:translateY(calc(var(--s,1)*-20%));background-position: 0 calc(var(--s,0)*-100%),calc(var(--s,0)*100% + 100%) 50%}
    90%,
    100%  {transform:translateY(calc(var(--s,1)*0));  background-position: 0 calc(var(--s,0)*-100%),calc(var(--s,0)*100% + 100%) 50%}
}

/* Loader 2: For form submissions (artwork creation, etc.) */
.loader-form {
  width: 80px;
  aspect-ratio: 1;
  --c:no-repeat linear-gradient(#f97316 0 0); /* Orange */
  background:
    var(--c) left   20px top    0,
    var(--c) top    20px right  0,
    var(--c) right  20px bottom 0,
    var(--c) bottom 20px left   0;
  background-size:calc(100%/3) calc(100%/3);
  animation: 
    l29-1 .75s infinite alternate linear,
    l29-2 1.5s infinite;
  position: relative;
  z-index: 1000000;
}
@keyframes l29-1 {
 90%,100% {background-size:calc(2*100%/3) calc(100%/3),calc(100%/3) calc(2*100%/3)}
}
@keyframes l29-2 {
 0%,49.99% {transform:scaleX(1)}
 50%,100%  {transform:scaleX(-1)}
}

/* Loading overlay for full-page loading - no backdrop, just spinner */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none; /* Hidden by default */
  justify-content: center;
  align-items: center;
  z-index: 9999999;
  pointer-events: none; /* Allow clicks to pass through */
  background: transparent; /* No backdrop */
}

/* Loading overlay for inline loading (within forms) */
.loading-inline {
  display: none;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  min-height: 200px;
}

/* When overlay is shown, make it visible and show the loader inside */
.loading-overlay.show {
  display: flex !important;
}

/* Loaders inside visible overlays should be visible */
.loading-overlay.show .loader,
.loading-overlay.show .loader-form {
  display: block !important;
}

.loading-inline.show {
  display: flex !important;
}