/*
 * ChemFlo spinner overrides — loaded via <link> tag, bypasses Vite JS injection.
 * This file is served as a static asset so it works in dev AND prod
 * regardless of Content-Security-Policy 'unsafe-inline' settings.
 */

@keyframes chemflo-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes chemflo-ping {
  0%   { transform: scale(1);   opacity: 0.8; }
  75%  { transform: scale(1.8); opacity: 0; }
  100% { transform: scale(1.8); opacity: 0; }
}

@keyframes chemflo-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* Override Tailwind animate-* classes with guaranteed-working versions */
.animate-spin {
  animation: chemflo-spin 1s linear infinite !important;
}

.animate-spin-slow {
  animation: chemflo-spin 2s linear infinite !important;
}

.animate-ping {
  animation: chemflo-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite !important;
}

.animate-pulse {
  animation: chemflo-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite !important;
}

/* Custom spinner classes used across the codebase (animations.css / component CSS — Vite-injected, may be blocked) */

/* InquiryHeader Update / Update & Exit buttons */
.spinner {
  width: 12px !important;
  height: 12px !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  border-top-color: white !important;
  border-radius: 50% !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  animation: chemflo-spin 1s linear infinite !important;
}

.spin {
  animation: chemflo-spin 1s linear infinite !important;
}

.isf-spin {
  animation: chemflo-spin 0.8s linear infinite !important;
}

/* InquiryEdit spinners */
.loading-spinner {
  animation: chemflo-spin 1s linear infinite !important;
}

.loading-spinner-small {
  animation: chemflo-spin 1s linear infinite !important;
}

/* Auth / Login page spinners */
.auth-spinner {
  animation: chemflo-spin 0.8s linear infinite !important;
}

.login-auth-spinner {
  animation: chemflo-spin 0.8s linear infinite !important;
}

/* Toastify loading icon */
.Toastify__toast--loading .Toastify__toast-icon,
[data-toast-loading="true"] svg {
  animation: chemflo-spin 1s linear infinite !important;
}

/* Bounce */
.animate-bounce {
  animation: chemflo-bounce 1s infinite !important;
}

@keyframes chemflo-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}

/* Shimmer (skeleton loading — uses left position, no transform) */
@keyframes chemflo-shimmer {
  0%   { left: -100%; }
  100% { left: 100%; }
}

/* The shimmer class is applied to ::before/::after pseudo-elements via component CSS.
   Defining the keyframe here ensures it resolves even when component CSS is blocked. */

/* Customer portal login spinners */
.portal-login-btn-spinner,
.portal-login-auth-spinner {
  animation: chemflo-spin 0.8s linear infinite !important;
}

/* Skeleton / shimmer loaders (CustomerPortal dashboard, products, logistics) */
@keyframes chemflo-loading {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton,
.skeleton-content,
.product-skeleton,
.shipment-skeleton {
  animation: chemflo-loading 1.5s infinite !important;
}

/* Unsaved-dot indicator */
@keyframes chemflo-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.6; transform: scale(1.2); }
}

.unsaved-dot {
  animation: chemflo-pulse-dot 2s infinite !important;
}

/* Progress step indicators (order/inquiry flow) */
@keyframes chemflo-step-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(59,130,246,0.4); }
  50%       { transform: scale(1.05); box-shadow: 0 0 0 6px rgba(59,130,246,0); }
}

.progress-step-active-pulse,
.progress-step-pulse {
  animation: chemflo-step-pulse 2s infinite !important;
}

.progress-step-gentle-pulse {
  animation: chemflo-step-pulse 3s infinite !important;
}

.progress-step-heartbeat {
  animation: chemflo-step-pulse 1.5s infinite !important;
}