/* Product Badges CSS - Efectos visuales para cintas de producto */

/* Base badge styles */
.product-badge {
  position: absolute;
  z-index: 10;
  padding: 0.5rem 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  border-radius: 0.25rem;
  white-space: nowrap;
  pointer-events: none;
}

/* Badge positions */
.product-badge--top-left {
  top: 0.5rem;
  left: 0.5rem;
}

.product-badge--top-right {
  top: 0.5rem;
  right: 0.5rem;
}

.product-badge--bottom-left {
  bottom: 0.5rem;
  left: 0.5rem;
}

.product-badge--bottom-right {
  bottom: 0.5rem;
  right: 0.5rem;
}

.product-badge--top-center {
  top: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
}

.product-badge--bottom-center {
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
}

/* Badge Effects */

/* None - Simple solid badge */
.product-badge--effect-none {
  box-shadow: none;
}

/* Glow - Soft glow effect */
.product-badge--effect-glow {
  box-shadow: 0 0 20px currentColor, 0 0 40px currentColor;
  animation: badge-pulse-glow 2s ease-in-out infinite;
}

@keyframes badge-pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px currentColor, 0 0 40px currentColor;
  }
  50% {
    box-shadow: 0 0 30px currentColor, 0 0 60px currentColor;
  }
}

/* Sparkle - Twinkling stars effect */
.product-badge--effect-sparkle {
  position: relative;
  overflow: hidden;
}

.product-badge--effect-sparkle::before,
.product-badge--effect-sparkle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 40%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 60%
  );
  transform: translate(-50%, -50%);
  animation: badge-sparkle 3s linear infinite;
}

.product-badge--effect-sparkle::after {
  animation-delay: 1.5s;
}

@keyframes badge-sparkle {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

/* Shadow - Drop shadow effect */
.product-badge--effect-shadow {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3), 0 8px 12px rgba(0, 0, 0, 0.2);
}

/* Neon - Glowing neon effect */
.product-badge--effect-neon {
  box-shadow: 
    0 0 5px currentColor,
    0 0 10px currentColor,
    0 0 20px currentColor,
    0 0 40px currentColor;
  text-shadow: 
    0 0 5px currentColor,
    0 0 10px currentColor;
  animation: badge-neon-flicker 1.5s ease-in-out infinite alternate;
}

@keyframes badge-neon-flicker {
  0%, 100% {
    opacity: 1;
  }
  92% {
    opacity: 1;
  }
  93% {
    opacity: 0.8;
  }
  94% {
    opacity: 1;
  }
  96% {
    opacity: 0.9;
  }
  97% {
    opacity: 1;
  }
}

/* Premium Gold - Gold gradient with shine */
.product-badge--effect-premium-gold {
  background: linear-gradient(135deg, #ffd700 0%, #ffec8b 50%, #ffd700 100%);
  color: #1a1a1a;
  border: 2px solid #b8860b;
  box-shadow: 
    0 0 15px rgba(255, 215, 0, 0.5),
    0 0 30px rgba(255, 215, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  position: relative;
  overflow: hidden;
}

.product-badge--effect-premium-gold::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.6) 50%,
    transparent 70%
  );
  animation: badge-gold-shine 3s linear infinite;
}

@keyframes badge-gold-shine {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

/* Premium Silver - Silver gradient with shine */
.product-badge--effect-premium-silver {
  background: linear-gradient(135deg, #c0c0c0 0%, #e8e8e8 50%, #c0c0c0 100%);
  color: #1a1a1a;
  border: 2px solid #a8a8a8;
  box-shadow: 
    0 0 15px rgba(192, 192, 192, 0.5),
    0 0 30px rgba(192, 192, 192, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  position: relative;
  overflow: hidden;
}

.product-badge--effect-premium-silver::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.7) 50%,
    transparent 70%
  );
  animation: badge-silver-shine 3s linear infinite;
}

@keyframes badge-silver-shine {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

/* Pulse - Pulsing animation */
.product-badge--effect-pulse {
  animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* Bounce - Bouncing animation */
.product-badge--effect-bounce {
  animation: badge-bounce 1s ease-in-out infinite;
}

@keyframes badge-bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

/* Rotate - Slow rotation */
.product-badge--effect-rotate {
  animation: badge-rotate 10s linear infinite;
}

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

/* Gradient Shine - Moving gradient */
.product-badge--effect-gradient-shine {
  position: relative;
  overflow: hidden;
}

.product-badge--effect-gradient-shine::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: badge-gradient-shine 2s linear infinite;
}

@keyframes badge-gradient-shine {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Border Pulse - Pulsing border */
.product-badge--effect-border-pulse {
  animation: badge-border-pulse 2s ease-in-out infinite;
}

@keyframes badge-border-pulse {
  0%, 100% {
    border-color: currentColor;
  }
  50% {
    border-color: transparent;
  }
}

/* Text Glow - Text only glow */
.product-badge--effect-text-glow {
  text-shadow: 0 0 10px currentColor, 0 0 20px currentColor, 0 0 30px currentColor;
}

/* 3D Effect - 3D appearance */
.product-badge--effect-3d {
  box-shadow: 
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 -1px 0 rgba(0, 0, 0, 0.1) inset,
    0 4px 6px rgba(0, 0, 0, 0.3),
    0 8px 12px rgba(0, 0, 0, 0.2);
  transform: perspective(500px) rotateX(5deg);
}

/* Ribbon - Ribbon style */
.product-badge--effect-ribbon {
  position: relative;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.product-badge--effect-ribbon::before,
.product-badge--effect-ribbon::after {
  content: '';
  position: absolute;
  bottom: -8px;
  width: 0;
  height: 0;
  border-style: solid;
}

.product-badge--effect-ribbon::before {
  left: 0;
  border-width: 0 8px 8px 0;
  border-color: transparent currentColor transparent transparent;
}

.product-badge--effect-ribbon::after {
  right: 0;
  border-width: 8px 0 0 8px;
  border-color: transparent transparent transparent currentColor;
}

/* Crossed - Diagonal stripe pattern (modo cruzadas) */
.product-badge--effect-crossed {
  position: relative;
  overflow: hidden;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 10px,
    rgba(255, 255, 255, 0.15) 10px,
    rgba(255, 255, 255, 0.15) 20px
  );
  box-shadow: 
    0 0 20px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.product-badge--effect-crossed::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent 10px,
    rgba(0, 0, 0, 0.1) 10px,
    rgba(0, 0, 0, 0.1) 20px
  );
  animation: badge-crossed-shift 3s ease-in-out infinite;
}

@keyframes badge-crossed-shift {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
  }
}

/* Premium Diamond - Diamond pattern with shine */
.product-badge--effect-premium-diamond {
  position: relative;
  overflow: hidden;
  background-image: 
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 8px,
      rgba(255, 255, 255, 0.1) 8px,
      rgba(255, 255, 255, 0.1) 16px
    ),
    linear-gradient(135deg, currentColor 0%, transparent 50%, currentColor 100%);
  background-size: 20px 20px, 100% 100%;
  box-shadow: 
    0 0 25px currentColor,
    0 0 50px currentColor,
    inset 0 2px 0 rgba(255, 255, 255, 0.4);
}

.product-badge--effect-premium-diamond::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 70%
  );
  animation: badge-diamond-shine 2.5s linear infinite;
}

@keyframes badge-diamond-shine {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

/* Premium Gradient - Animated gradient background */
.product-badge--effect-premium-gradient {
  position: relative;
  overflow: hidden;
  background-size: 200% 200%;
  animation: badge-gradient-flow 4s ease infinite;
  box-shadow: 
    0 0 20px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.product-badge--effect-premium-gradient::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent
  );
  animation: badge-gradient-sweep 3s linear infinite;
}

@keyframes badge-gradient-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes badge-gradient-sweep {
  0% {
    left: -100%;
  }
  100% {
    left: 200%;
  }
}

/* Premium Animated - Multiple internal animations */
.product-badge--effect-premium-animated {
  position: relative;
  overflow: hidden;
  box-shadow: 
    0 0 30px currentColor,
    0 0 60px currentColor,
    inset 0 2px 0 rgba(255, 255, 255, 0.5);
}

.product-badge--effect-premium-animated::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 255, 255, 0.2) 90deg,
    transparent 180deg,
    rgba(255, 255, 255, 0.2) 270deg,
    transparent 360deg
  );
  animation: badge-premium-rotate 4s linear infinite;
}

.product-badge--effect-premium-animated::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.3) 0%,
    transparent 70%
  );
  animation: badge-premium-pulse 2s ease-in-out infinite;
}

@keyframes badge-premium-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes badge-premium-pulse {
  0%, 100% {
    opacity: 0.5;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* Holographic - Rainbow gradient effect */
.product-badge--effect-holographic {
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    45deg,
    #ff0000,
    #ff7f00,
    #ffff00,
    #00ff00,
    #0000ff,
    #4b0082,
    #9400d3
  );
  background-size: 400% 400%;
  animation: badge-holographic 5s ease infinite;
  color: white;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
}

.product-badge--effect-holographic::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.6) 50%,
    transparent 70%
  );
  animation: badge-holographic-shine 3s linear infinite;
}

@keyframes badge-holographic {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes badge-holographic-shine {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(100%) translateY(100%) rotate(45deg);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .product-badge {
    padding: 0.35rem 0.7rem;
    font-size: 0.65rem;
  }
}