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

/* MEGA DISCOUNT CTA ANIMATIONS */
@keyframes shimmer {
  0% { transform: translateX(-100%) skewX(12deg); }
  100% { transform: translateX(200%) skewX(12deg); }
}

@keyframes pulse-glow {
  0%, 100% { 
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.5), 
                0 0 40px rgba(34, 197, 94, 0.3), 
                0 0 60px rgba(34, 197, 94, 0.1);
  }
  50% { 
    box-shadow: 0 0 30px rgba(34, 197, 94, 0.8), 
                0 0 60px rgba(34, 197, 94, 0.5), 
                0 0 90px rgba(34, 197, 94, 0.3);
  }
}

@keyframes pulse-text {
  0%, 100% { 
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8),
                 0 0 20px rgba(34, 197, 94, 0.6),
                 0 0 30px rgba(34, 197, 94, 0.4);
  }
  50% { 
    text-shadow: 0 0 20px rgba(255, 255, 255, 1),
                 0 0 30px rgba(34, 197, 94, 0.8),
                 0 0 40px rgba(34, 197, 94, 0.6);
  }
}

@keyframes pulse-border {
  0%, 100% { 
    border-color: rgba(147, 51, 234, 0.8);
    box-shadow: 0 0 20px rgba(147, 51, 234, 0.4);
  }
  50% { 
    border-color: rgba(147, 51, 234, 1);
    box-shadow: 0 0 30px rgba(147, 51, 234, 0.8);
  }
}

.animate-shimmer {
  animation: shimmer 2s infinite;
}

.animate-pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}

.animate-pulse-text {
  animation: pulse-text 1.5s ease-in-out infinite;
}

.animate-pulse-border {
  animation: pulse-border 1.5s ease-in-out infinite;
}

.mega-discount-banner {
  background: linear-gradient(45deg, #059669, #10b981, #34d399, #10b981, #059669);
  background-size: 300% 300%;
  animation: gradient-shift 3s ease infinite;
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.mega-cta-button {
  background: linear-gradient(45deg, #7c3aed, #a855f7, #c084fc, #a855f7, #7c3aed);
  background-size: 300% 300%;
  animation: gradient-shift 2s ease infinite;
}

.mega-cta-button:hover {
  transform: scale(1.1) rotate(1deg);
  box-shadow: 0 10px 25px rgba(147, 51, 234, 0.5);
}

/* CART QUANTITY CONTROLS */
.quantity-controls {
  transition: all 0.3s ease;
}

.quantity-controls input[type="number"] {
  /* Hide spinner buttons in WebKit browsers */
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

.quantity-controls input[type="number"]::-webkit-outer-spin-button,
.quantity-controls input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Enhanced cart button styling */
.quantity-controls .nav-link-enhanced {
  position: relative;
  min-width: 44px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Make quantity input match the theme */
.quantity-controls .gaming-input {
  background: rgba(31, 41, 55, 0.8);
  border: 1px solid rgba(156, 163, 175, 0.3);
  border-radius: 0;
  height: 48px;
}

.quantity-controls .gaming-input:focus {
  border-color: var(--gaming-red);
  box-shadow: 
    0 0 0 1px var(--gaming-red),
    var(--gaming-glow);
}

/* CHECKOUT FLOAT BUTTON */
.checkout-float-btn {
  position: relative;
  background: linear-gradient(135deg, #dc2626, #ef4444, #dc2626);
  background-size: 200% 200%;
  animation: checkout-pulse 2s ease-in-out infinite;
}

.checkout-float-btn:hover {
  animation: checkout-float 0.6s ease-in-out infinite alternate;
  box-shadow: 0 8px 25px rgba(220, 38, 38, 0.4);
}

.checkout-glow {
  display: inline-block;
  animation: subtle-glow 3s ease-in-out infinite;
}

@keyframes checkout-pulse {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes checkout-float {
  0% {
    transform: translateY(0px) scale(1.05);
  }
  100% {
    transform: translateY(-2px) scale(1.08);
  }
}

@keyframes subtle-glow {
  0%, 100% {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
  }
  50% {
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.5), 0 0 15px rgba(220, 38, 38, 0.3);
  }
}