/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Premium Loading Animation Styles */
.payment-loader {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 4px solid transparent;
  border-top-color: #312e81; /* indigo-900 */
  border-radius: 50%;
  animation: spin 2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}

.loader-ring:nth-child(1) {
  animation-delay: -0.45s;
}

.loader-ring:nth-child(2) {
  animation-delay: -0.3s;
}

.loader-ring:nth-child(3) {
  animation-delay: -0.15s;
}

.loader-icon {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Progress Bar indeterminate animation */
.progress-bar-fill {
  width: 100%;
  background: linear-gradient(90deg, #e0e7ff 0%, #312e81 50%, #e0e7ff 100%);
  background-size: 200% 100%;
  animation: progress-slide 1.5s infinite linear;
}

@keyframes progress-slide {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}