/* Shared waiting indicators. Keep the existing visibility/state classes so
   each request still owns its pending, success, error and retry transitions.
   These are audited loading elements, not the challenge-spinner game wheels. */
@keyframes sq-skeleton-pulse {
  0%, 100% { opacity: .9; }
  50% { opacity: .5; }
}

:is(.sq-loading-skeleton, .animate-spin:where(:not(.spinning):not(.spinner-demo)),
    .fa-spin, .spinner-border, .spinner, .loader, .loading-spinner,
    .sq-spinner, .sp-spinner, .btn-spinner, .actionicle-spinner,
    .actionicle-spinner-small, .admin-spinner, .alfred-spinner,
    .alfred-spinner-small, .price-loading, .inventory-spinner,
    .maintenance-spinner, .onboarding-spinner, .ob-uz-spinner,
    .psw-spin, .camera-loading-spinner, .camera-spinner, .tsd-spinner,
    .wg-spinner, .smart-selfie-loading-spinner, .spinner-ring,
    :where(.sc-loading) svg, :where(.activating) .dot),
.btn-loading::after, .preview-phone-screen.loading::after,
.spinner-loading::after, .btn.loading::after, .loading-pulse::after {
  --sq-skeleton-ink: color-mix(in srgb, currentColor 24%, transparent);
  box-sizing: border-box;
  width: 28px !important;
  height: 14px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100%;
  flex-shrink: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  background-image: linear-gradient(var(--sq-skeleton-ink), var(--sq-skeleton-ink)),
    linear-gradient(var(--sq-skeleton-ink), var(--sq-skeleton-ink)),
    linear-gradient(var(--sq-skeleton-ink), var(--sq-skeleton-ink)) !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: left top, left bottom, left center !important;
  background-size: 100% 5px, 65% 5px, 0 0 !important;
  animation: sq-skeleton-pulse 1.6s ease-in-out infinite !important;
}

/* Larger placeholders occupy the content area; inline actions stay compact. */
div:is(.sq-loading-skeleton, .animate-spin:where(:not(.spinning):not(.spinner-demo)), .spinner, .loader,
    .loading-spinner, .admin-spinner, .alfred-spinner, .inventory-spinner,
    .maintenance-spinner, .onboarding-spinner, .camera-loading-spinner,
    .camera-spinner, .smart-selfie-loading-spinner, .tsd-spinner, .wg-spinner),
svg.animate-spin:where(:not(.spinning):not(.spinner-demo)):is(.h-8, .h-10, .h-12, .w-8, .w-10, .w-12),
i.fa-spin:is(.text-3xl, .text-4xl, .text-5xl),
.sq-spinner-lg, .spinner-ring,
.preview-phone-screen.loading::after, .spinner-loading::after {
  width: 144px !important;
  height: 44px !important;
  background-position: left top, left center, left bottom !important;
  background-size: 100% 8px, 82% 8px, 60% 8px !important;
}

/* Keep compact indicators inside fixed-size controls and AI wizard artwork. */
:is(button, a, .btn, .auth-btn, .pay-btn, .relative.w-20.h-20)
  :is(.sq-loading-skeleton, .animate-spin, .fa-spin, .spinner, .loader,
      .loading-spinner, .sq-spinner, .admin-spinner, .alfred-spinner,
      .inventory-spinner, .maintenance-spinner, .tsd-spinner, .wg-spinner) {
  width: 28px !important;
  height: 14px !important;
  background-position: left top, left bottom, left center !important;
  background-size: 100% 5px, 65% 5px, 0 0 !important;
}

.sq-loading-skeleton { display: inline-block; vertical-align: middle; }
#place-order-btn .loading-spinner { display: inline-block; vertical-align: middle; }
.btn-loading::after {
  /* The legacy button makes its text transparent while waiting. */
  --sq-skeleton-ink: rgba(148, 163, 184, .5);
  margin-left: -14px;
  margin-top: -7px;
}
.preview-phone-screen.loading::after { color: #cbd5e1; }
/* Hide only obsolete icon geometry, never the surrounding status text. */
svg:is(.sq-loading-skeleton, .animate-spin:not(.spinning), .actionicle-spinner,
    .sp-spinner, .spinner, .loading-spinner, .sq-spinner, .psw-spin) > *,
.sc-loading svg > * { visibility: hidden; }
.fa-spin::before, .fa-spin::after,
.smart-selfie-loading-spinner::before,
.smart-selfie-loading-spinner::after { content: none !important; }
.smart-selfie-loading-spinner > * { display: none !important; }
.smart-selfie-loading-text { animation: none !important; }

/* Existing content skeletons share the same quiet motion. Their dimensions,
   theme colors and reveal behavior remain defined by their owning component. */
.sq-skeleton, .skeleton, .widget-skeleton, .menu-skeleton, .skeleton-wave {
  animation: sq-skeleton-pulse 1.6s ease-in-out infinite !important;
}
.skeleton-wave::after { animation: none !important; }

@media (prefers-reduced-motion: reduce) {
  :is(.sq-loading-skeleton, .animate-spin:not(.spinning):not(.spinner-demo),
      .fa-spin, .spinner-border, .spinner, .loader, .loading-spinner,
      .sq-spinner, .sp-spinner, .btn-spinner, .actionicle-spinner,
      .actionicle-spinner-small, .admin-spinner, .alfred-spinner,
      .alfred-spinner-small, .price-loading, .inventory-spinner,
      .maintenance-spinner, .onboarding-spinner, .ob-uz-spinner,
      .psw-spin, .camera-loading-spinner, .camera-spinner, .tsd-spinner,
      .wg-spinner, .smart-selfie-loading-spinner, .spinner-ring,
      .sc-loading svg, .activating .dot,
      .sq-skeleton, .skeleton, .widget-skeleton, .menu-skeleton, .skeleton-wave),
  .btn-loading::after, .preview-phone-screen.loading::after,
  .spinner-loading::after, .btn.loading::after, .loading-pulse::after {
    animation: none !important;
  }
}