/* Sync Status Loader Animation */
.sync-loader {
  width: 282px; /* Half size to match other images */
  height: 319px;
  background: url("/assets/sync_loader_sprite-f62d7754.png") -0 -0;
  background-size: 1410px 319px; /* Scale sprite to 50%: original 2820x638 → 1410x319 */
  background-repeat: no-repeat;
  animation: sync-frames 1.5s steps(5) infinite;
  margin: 0 auto;
  max-width: 100%;
}

/* Responsive sizing */
@media (max-width: 768px) {
  .sync-loader {
    width: 200px;
    height: 226px;
  }
}

@media (max-width: 480px) {
  .sync-loader {
    width: 150px;
    height: 170px;
  }
}

@keyframes sync-frames {
  from { background-position: 0px 0px; }
  to { background-position: -1410px 0px; }
}

/* Pause animation on hover for accessibility */
.sync-loader:hover {
  animation-play-state: paused;
}

/* Loading state specific styling */
.sync-status--loading .sync-loader {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.sync-status--completed .sync-loader,
.sync-status--failed .sync-loader {
  opacity: 0;
  transition: opacity 0.3s ease;
}