/* Loader component styles (standalone, loads early) */

.global-loader { position: fixed; inset: 0; z-index: 2000; display: block; }
.global-loader-backdrop { position: absolute; inset: 0; background: rgba(var(--color-canvas), .85); backdrop-filter: blur(2px); }
.global-loader-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; }
/* Freeze app while loader is visible */
.no-scroll { overflow: hidden !important; touch-action: none; }
.global-loader { pointer-events: all; }

/* Ultra-modern big spinner */
.spinner-ultra { width: clamp(72px, 12vw, 144px); height: clamp(72px, 12vw, 144px); border-radius: 50%;
  --c1: rgb(var(--color-primary));
  --c2: rgb(var(--color-primary-hover));
  background:
    conic-gradient(from 0deg, var(--c1) 0 25%, transparent 25% 100%),
    conic-gradient(from 180deg, var(--c2) 0 25%, transparent 25% 100%);
  -webkit-mask: radial-gradient(farthest-side, #0000 58%, rgb(var(--color-text)) 59%);
  mask: radial-gradient(farthest-side, #0000 58%, rgb(var(--color-text)) 59%);
  animation: spin 1.2s linear infinite;
  filter: drop-shadow(0 10px 30px rgba(var(--color-text), .12));
}

/* Dark mode spinner colors */
[data-theme="dark"] .spinner-ultra {
  --c1: rgb(var(--color-primary-hover));
  --c2: rgb(var(--color-primary-active-gr1));
  filter: drop-shadow(0 10px 30px rgba(var(--color-text), .4));
}
.spinner-ultra__label { display: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .spinner-ultra { animation-duration: 1.8s; }
}

/* Floating Needle Spinner */
.spinner-floating-needle {
  width: clamp(200px, 30vw, 400px);
  height: clamp(200px, 30vw, 400px);
  position: relative;
}

/* Increase spinner size on mobile devices by 60% (30% + 30%) */
@media (max-width: 768px) {
  .spinner-floating-needle {
    width: clamp(338px, 51vw, 676px);
    height: clamp(338px, 51vw, 676px);
  }
}

.spinner-floating-needle__svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 10px 30px rgba(var(--color-text), .12));
}

/* Dark mode floating needle shadow */
[data-theme="dark"] .spinner-floating-needle__svg {
  filter: drop-shadow(0 10px 30px rgba(var(--color-text), .4));
}

.spinner-floating-needle__background {
  opacity: 0.9;
}

.spinner-floating-needle__group {
  transform-origin: 0 0;
  will-change: transform;
}

.spinner-floating-needle__arrow {
  fill: rgb(var(--color-primary-active));
  transition: fill 0.2s ease;
}

.spinner-floating-needle__center {
  fill: rgb(var(--grey-800));
}

/* Dark mode floating needle colors */
[data-theme="dark"] .spinner-floating-needle__arrow {
  fill: rgb(var(--color-primary-hover));
}
[data-theme="dark"] .spinner-floating-needle__center {
  fill: rgb(var(--grey-200));
}

@media (prefers-reduced-motion: reduce) {
  .spinner-floating-needle__group {
    animation-duration: 3s;
  }
}
.loader-progress{
  margin-top: -2.5em;
  font-weight: 600;
  color: rgb(var(--grey-500));
}

/* Dark mode loader progress */
[data-theme="dark"] .loader-progress {
  color: rgb(var(--grey-400));
}

/* Hide progress percentage number */
.loader-progress-number {
  display: none !important;
}

/* Light mode floating needle SVG background and strokes */
.spinner-floating-needle__background path {
  fill: rgb(var(--grey-100));
}
.spinner-floating-needle__background line,
.spinner-floating-needle__background circle {
  stroke: rgb(var(--grey-900));
  fill: rgb(var(--grey-900));
}

/* Dark mode floating needle SVG background and strokes */
[data-theme="dark"] .spinner-floating-needle__background path {
  fill: rgb(var(--grey-900)) !important;
}
[data-theme="dark"] .spinner-floating-needle__background line,
[data-theme="dark"] .spinner-floating-needle__background circle {
  stroke: rgb(var(--grey-200)) !important;
  fill: rgb(var(--grey-200)) !important;
}