/* ===================================================
   ADAPTIVE LOADER STYLES
   Spinner for authenticated, Progress bar for guests
   =================================================== */

.loader-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(
    circle at 30% 20%, 
    rgba(139, 92, 246, 0.12), 
    transparent 50%
  ),
  radial-gradient(
    circle at 70% 80%, 
    rgba(99, 102, 241, 0.1), 
    transparent 50%
  ),
  radial-gradient(
    circle at 50% 50%, 
    rgba(6, 182, 212, 0.08), 
    transparent 60%
  ),
  repeating-linear-gradient(
    45deg, 
    transparent, 
    transparent 30px, 
    rgba(139, 92, 246, 0.015) 30px, 
    rgba(139, 92, 246, 0.015) 60px
  ),
  linear-gradient(
    135deg, 
    rgba(15, 23, 42, 0.95) 0%, 
    rgba(11, 18, 32, 0.97) 50%, 
    rgba(15, 23, 42, 0.96) 100%
  );
  z-index: 111;
  border-radius: inherit;
  box-shadow: inset 0 0 60px rgba(139, 92, 246, 0.08);
  backdrop-filter: blur(8px);
}

.loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 28px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* ===================================================
   SPINNER LOADER (для зарегистрированных)
   =================================================== */

.loader-overlay--spinner .spinner-ring {
  width: 64px;
  height: 64px;
  border: 4px solid rgba(139, 92, 246, 0.15);
  border-top-color: #8b5cf6;
  border-right-color: #a78bfa;
  border-radius: 50%;
  animation: spin 1s cubic-bezier(0.68, -0.55, 0.27, 1.55) infinite;
  box-shadow: 
    0 0 20px rgba(139, 92, 246, 0.3),
    inset 0 0 10px rgba(139, 92, 246, 0.1);
}

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

.loader-overlay--spinner .spinner-text {
  font-size: 15px;
  font-weight: 700;
  color: #a78bfa;
  text-shadow: 
    0 2px 12px rgba(139, 92, 246, 0.4),
    0 0 40px rgba(139, 92, 246, 0.3);
  animation: pulse 1.5s ease-in-out infinite;
  letter-spacing: 0.02em;
}

@keyframes pulse {
  0%, 100% { 
    opacity: 1; 
    transform: scale(1);
  }
  50% { 
    opacity: 0.6; 
    transform: scale(0.98);
  }
}

/* ===================================================
   PROGRESS LOADER (для незарегистрированных)
   =================================================== */

.loader-overlay--progress .progress-ring {
  width: 64px;
  height: 64px;
  border: 4px solid rgba(139, 92, 246, 0.15);
  border-radius: 50%;
  position: relative;
  box-shadow: 
    0 0 20px rgba(139, 92, 246, 0.2),
    inset 0 0 10px rgba(139, 92, 246, 0.05);
  background: radial-gradient(
    circle, 
    rgba(139, 92, 246, 0.05), 
    transparent
  );
}

.loader-overlay--progress .progress-ring::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 4px solid transparent;
  border-top-color: #8b5cf6;
  border-right-color: #a78bfa;
  animation: progress-spin 2s linear infinite;
}

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

.loader-overlay--progress .progress-text {
  font-size: 20px;
  font-weight: 800;
  color: #f1f5f9;
  text-shadow: 
    0 2px 12px rgba(139, 92, 246, 0.4), 
    0 0 40px rgba(139, 92, 246, 0.3);
  letter-spacing: -0.02em;
  min-width: 60px;
  text-align: center;
}

/* ===================================================
   RESPONSIVE ADJUSTMENTS
   =================================================== */

@media (max-width: 640px) {
  .loader-content {
    padding: 20px;
    gap: 12px;
  }
  
  .loader-overlay--spinner .spinner-ring,
  .loader-overlay--progress .progress-ring {
    width: 52px;
    height: 52px;
    border-width: 3px;
  }
  
  .loader-overlay--progress .progress-ring::before {
    border-width: 3px;
    inset: -3px;
  }
  
  .loader-overlay--spinner .spinner-text {
    font-size: 13px;
  }
  
  .loader-overlay--progress .progress-text {
    font-size: 18px;
  }
}

@media (max-width: 380px) {
  .loader-overlay--spinner .spinner-ring,
  .loader-overlay--progress .progress-ring {
    width: 48px;
    height: 48px;
  }
  
  .loader-overlay--spinner .spinner-text {
    font-size: 12px;
  }
  
  .loader-overlay--progress .progress-text {
    font-size: 16px;
  }
}