/**
 * Cart Quantity Throttle - Estilos de feedback visual
 * 
 * ✅ OPTIMIZADO v2: Feedback visual sutil + animaciones de precios
 * 
 * @package flyntwp-child
 * @version 2.0.0
 */

/* ============================================
   ANIMACIONES DE PRECIOS (OPTIMISTIC UPDATE)
   ============================================ */

/* Animación sutil cuando un precio se actualiza */
.price-updating {
  animation: price-pulse 0.2s ease;
  transition: color 0.2s ease;
}

@keyframes price-pulse {
  0% { 
    transform: scale(1);
  }
  40% { 
    transform: scale(1.03);
    color: #f59e0b !important;
  }
  100% { 
    transform: scale(1);
  }
}

/* Highlight sutil en el subtotal cuando se actualiza */
#cartSubtotal.price-updating {
  font-weight: 700;
  color: #1f2937 !important;
  transform: scale(1.02);
  transition: transform 0.2s ease;
}

/* ============================================
   ESTADO OPTIMISTA - Usuario está haciendo cambios
   ============================================ */
.cart-item-optimistic {
  position: relative;
}

/* Indicador MUY sutil - solo un pequeño punto que indica "cambios pendientes" */
.cart-item-optimistic::before {
  content: '●';
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 8px;
  color: #f59e0b;
  opacity: 0.6;
  animation: pulse-dot 1.5s ease-in-out infinite;
  z-index: 1;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

/* ============================================
   ESTADO SYNCING - Guardando en servidor
   ============================================ */
.cart-item-syncing {
  position: relative;
}

/* Indicador discreto que se está guardando */
.cart-item-syncing::before {
  content: '↻';
  position: absolute;
  top: 8px;
  right: 8px;
  font-size: 12px;
  color: #3b82f6;
  opacity: 0.5;
  animation: rotate-sync 1s linear infinite;
  z-index: 1;
}

@keyframes rotate-sync {
  to { transform: rotate(360deg); }
}

/* ============================================
   ESTADO SUCCESS - Guardado exitoso
   ============================================ */
.cart-item-success {
  animation: flash-success 0.3s ease;
}

@keyframes flash-success {
  0%, 100% { background-color: transparent; }
  50% { background-color: rgba(16, 185, 129, 0.08); }
}

/* ============================================
   ESTADO ERROR - Error al guardar
   ============================================ */
.cart-item-error {
  animation: flash-error 0.4s ease;
}

@keyframes flash-error {
  0%, 100% { background-color: transparent; }
  50% { background-color: rgba(239, 68, 68, 0.1); }
}

/* ============================================
   MENSAJE DE ERROR
   ============================================ */
.cart-item-error-msg {
  position: absolute;
  bottom: -22px;
  left: 0;
  right: 0;
  background: #fee2e2;
  color: #991b1b;
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 3px;
  text-align: center;
  z-index: 10;
  display: none;
  animation: slideDown 0.2s ease;
  font-weight: 500;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================
   REMOVER LOADING BLOQUEANTE
   ============================================ */
/* ❌ ELIMINADO: .cart-item-loading con overlay bloqueante */
/* ❌ ELIMINADO: .cart-item-pending con overlay */

/* ============================================
   MEJORAS GENERALES
   ============================================ */

/* Transiciones suaves en items del carrito */
.cart-item {
  position: relative;
  transition: background-color 0.2s ease;
}

/* Prevenir doble-click en botones */
.qty-btn {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Feedback táctil en mobile - MUY sutil */
@media (hover: none) and (pointer: coarse) {
  .qty-btn:active {
    transform: scale(0.97);
    transition: transform 0.08s ease;
  }
}

/* ============================================
   INDICADOR DE CANTIDAD CAMBIANDO
   ============================================ */
/* Highlight MUY sutil en el input cuando está cambiando */
.cart-item-optimistic .qty-input,
.cart-item-syncing .qty-input {
  box-shadow: 0 0 0 1px rgba(245, 158, 11, 0.2);
  transition: box-shadow 0.2s ease;
}

/* ============================================
   ACCESIBILIDAD
   ============================================ */
/* Mantener contraste y legibilidad en todos los estados */
.cart-item-optimistic .item-price,
.cart-item-syncing .item-price,
.cart-item-optimistic .qty-input,
.cart-item-syncing .qty-input {
  /* NO cambiar color del texto, mantener legibilidad */
  color: inherit;
}

/* ============================================
   REDUCIR MOTION para accesibilidad
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  .cart-item-optimistic::before,
  .cart-item-syncing::before,
  .cart-item-success,
  .cart-item-error,
  .qty-btn:active,
  .price-updating {
    animation: none !important;
    transition: none !important;
  }
}