/*
 * 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.
 */

/* Fix mux-player control bar - ensure horizontal layout */
mux-player {
  --media-control-display: flex;
  --media-control-bar-display: flex;
  --bottom-bar-display: flex;
}

/* Animated gradient border effect */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.price-badge-gradient {
  background: linear-gradient(120deg, #2563eb, #f59e0b, #ef4444, #2563eb);
  background-size: 220% 220%;
  animation: gradient-shift 6s ease infinite;
  color: #ffffff;
}

.animated-gradient-border {
  background: linear-gradient(90deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3, #ff6b6b);
  background-size: 300% 100%;
  animation: gradient-shift 3.5s ease infinite;
}