/**
 * Estilos para mostrar puntos en productos
 * WC Rewards Plugin
 */

/* ============================
   PRODUCTO INDIVIDUAL - BASE
   ============================ */

.wc-rewards-product-points.wc-rewards-single-product {
  margin: 15px 0;
  padding: 15px;
  transition: all 0.3s ease;
}

.wc-rewards-single-product .wc-rewards-points-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 500;
}

.wc-rewards-single-product .wc-rewards-icon {
  line-height: 1;
}

.wc-rewards-single-product .wc-rewards-message {
  flex: 1;
}

.wc-rewards-single-product .wc-rewards-message strong {
  font-size: 18px;
  font-weight: 700;
}

.wc-rewards-single-product .wc-rewards-points-value {
  margin-top: 8px;
  opacity: 0.9;
}

.wc-rewards-single-product .wc-rewards-points-value small {
  font-size: 13px;
}

/* ============================
   ESTILOS DE FONDO - GRADIENTES
   ============================ */

.wc-rewards-single-product.bg-gradient-purple {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.wc-rewards-single-product.bg-gradient-blue {
  background: linear-gradient(135deg, #2196f3 0%, #1565c0 100%);
}

.wc-rewards-single-product.bg-gradient-green {
  background: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%);
}

.wc-rewards-single-product.bg-gradient-orange {
  background: linear-gradient(135deg, #f2994a 0%, #f2c94c 100%);
}

.wc-rewards-single-product.bg-gradient-red {
  background: linear-gradient(135deg, #f44336 0%, #e91e63 100%);
}

/* ============================
   ESTILOS DE FONDO - SÓLIDOS
   ============================ */

.wc-rewards-single-product.bg-solid-purple {
  background: #667eea;
}

.wc-rewards-single-product.bg-solid-blue {
  background: #2196f3;
}

.wc-rewards-single-product.bg-solid-green {
  background: #4caf50;
}

.wc-rewards-single-product.bg-solid-orange {
  background: #ff9800;
}

.wc-rewards-single-product.bg-solid-white {
  background: #ffffff;
  border: 2px solid #e0e0e0;
}

.wc-rewards-single-product.bg-solid-light {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
}

/* ============================
   COLORES DE TEXTO
   ============================ */

.wc-rewards-single-product.text-white {
  color: #ffffff;
}

.wc-rewards-single-product.text-dark {
  color: #333333;
}

.wc-rewards-single-product.text-purple {
  color: #667eea;
}

.wc-rewards-single-product.text-blue {
  color: #2196f3;
}

.wc-rewards-single-product.text-green {
  color: #4caf50;
}

/* ============================
   TAMAÑOS DE ICONO
   ============================ */

.wc-rewards-single-product .wc-rewards-icon.icon-small {
  font-size: 20px;
}

.wc-rewards-single-product .wc-rewards-icon.icon-medium {
  font-size: 24px;
}

.wc-rewards-single-product .wc-rewards-icon.icon-large {
  font-size: 32px;
}

.wc-rewards-single-product .wc-rewards-icon.icon-xlarge {
  font-size: 40px;
}

/* ============================
   RADIO DEL BORDE
   ============================ */

.wc-rewards-single-product.border-none {
  border-radius: 0;
}

.wc-rewards-single-product.border-small {
  border-radius: 4px;
}

.wc-rewards-single-product.border-medium {
  border-radius: 3px;
}

.wc-rewards-single-product.border-large {
  border-radius: 12px;
}

.wc-rewards-single-product.border-xlarge {
  border-radius: 20px;
}

/* ============================
   LOOP DE PRODUCTOS
   ============================ */

.wc-rewards-product-points.wc-rewards-loop-product {
  margin: 8px 0;
  padding: 8px 12px;
  background: #f8f9fa;
  border-left: 3px solid #667eea;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}

.wc-rewards-loop-product .wc-rewards-icon {
  font-size: 16px;
  line-height: 1;
}

.wc-rewards-loop-product .wc-rewards-points-text {
  color: #495057;
}

.wc-rewards-loop-product .wc-rewards-points-text strong {
  color: #667eea;
  font-weight: 600;
}

/* ============================
   BADGE SOBRE IMAGEN
   ============================ */

.wc-rewards-points-badge-overlay {
  position: absolute;
  z-index: 10;
}

/* Posiciones del badge */
.wc-rewards-points-badge-overlay.position-top-right {
  top: 10px;
  right: 10px;
}

.wc-rewards-points-badge-overlay.position-top-left {
  top: 10px;
  left: 10px;
}

.wc-rewards-points-badge-overlay.position-bottom-right {
  bottom: 10px;
  right: 10px;
}

.wc-rewards-points-badge-overlay.position-bottom-left {
  bottom: 10px;
  left: 10px;
}

.wc-rewards-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  color: #fff;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(4px);
}

.wc-rewards-badge strong {
  font-size: 14px;
}

/* Colores del badge */
.wc-rewards-badge.color-purple {
  background: rgba(102, 126, 234, 0.95);
}

.wc-rewards-badge.color-blue {
  background: rgba(33, 150, 243, 0.95);
}

.wc-rewards-badge.color-green {
  background: rgba(76, 175, 80, 0.95);
}

.wc-rewards-badge.color-orange {
  background: rgba(255, 152, 0, 0.95);
}

.wc-rewards-badge.color-red {
  background: rgba(244, 67, 54, 0.95);
}

.wc-rewards-badge.color-pink {
  background: rgba(233, 30, 99, 0.95);
}

.wc-rewards-badge.color-yellow {
  background: rgba(255, 193, 7, 0.95);
  color: #333;
}

.wc-rewards-badge.color-white {
  background: rgba(255, 255, 255, 0.95);
  color: #333;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.wc-rewards-badge.color-black {
  background: rgba(33, 33, 33, 0.95);
}

/* ============================
   RESPONSIVE
   ============================ */

@media (max-width: 768px) {
  .wc-rewards-product-points.wc-rewards-single-product {
    padding: 12px;
    margin: 12px 0;
  }

  .wc-rewards-single-product .wc-rewards-points-badge {
    font-size: 14px;
  }

  .wc-rewards-single-product .wc-rewards-icon.icon-small {
    font-size: 18px;
  }

  .wc-rewards-single-product .wc-rewards-icon.icon-medium {
    font-size: 20px;
  }

  .wc-rewards-single-product .wc-rewards-icon.icon-large {
    font-size: 26px;
  }

  .wc-rewards-single-product .wc-rewards-icon.icon-xlarge {
    font-size: 32px;
  }

  .wc-rewards-single-product .wc-rewards-message strong {
    font-size: 16px;
  }

  .wc-rewards-loop-product {
    font-size: 13px;
  }

  .wc-rewards-badge {
    font-size: 12px;
    padding: 5px 10px;
  }

  .wc-rewards-points-badge-overlay.position-top-right {
    top: 8px;
    right: 8px;
  }

  .wc-rewards-points-badge-overlay.position-top-left {
    top: 8px;
    left: 8px;
  }

  .wc-rewards-points-badge-overlay.position-bottom-right {
    bottom: 8px;
    right: 8px;
  }

  .wc-rewards-points-badge-overlay.position-bottom-left {
    bottom: 8px;
    left: 8px;
  }
}

/* ============================
   VARIACIONES DE COLOR
   ============================ */

/* Verde (Alternativa) */
.wc-rewards-product-points.wc-rewards-green {
  background: linear-gradient(135deg, #56ab2f 0%, #a8e063 100%);
}

.wc-rewards-loop-product.wc-rewards-green {
  border-left-color: #56ab2f;
}

.wc-rewards-loop-product.wc-rewards-green .wc-rewards-points-text strong {
  color: #56ab2f;
}

/* Naranja (Alternativa) */
.wc-rewards-product-points.wc-rewards-orange {
  background: linear-gradient(135deg, #f2994a 0%, #f2c94c 100%);
}

.wc-rewards-loop-product.wc-rewards-orange {
  border-left-color: #f2994a;
}

.wc-rewards-loop-product.wc-rewards-orange .wc-rewards-points-text strong {
  color: #f2994a;
}

/* ============================
   ANIMACIONES
   ============================ */

.wc-rewards-product-points {
  animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wc-rewards-badge {
  transition: transform 0.2s ease;
}

.wc-rewards-badge:hover {
  transform: scale(1.05);
}

/* ============================
   COMPATIBILIDAD CON TEMAS
   ============================ */

/* Asegurar que el badge se posicione correctamente */
.woocommerce ul.products li.product .wc-rewards-points-badge-overlay {
  position: absolute;
}

/* Ajustar posicionamiento si el contenedor del producto no tiene position relative */
.woocommerce ul.products li.product {
  position: relative;
}