/* =========================================================
   EMILSE MODAS - CART STYLES
   ========================================================= */

/* Breadcrumb */
.breadcrumb {
  background: var(--surface-2);
  padding: var(--space-3) 0;
  font-size: var(--fs-sm);
}

.breadcrumb a {
  color: var(--primary);
}

.breadcrumb a:hover {
  text-decoration: underline;
}

/* Cart Section */
.cart-section {
  padding: var(--space-6) 0;
  min-height: 60vh;
}

.cart-header {
  margin-bottom: var(--space-6);
}

.cart-header h1 {
  font-family: var(--ff-heading);
  font-size: var(--fs-3xl);
  color: var(--text);
}

.cart-header__subtitle {
  color: var(--muted);
  margin-top: var(--space-2);
}

.cart-header__subtitle .mode-badge {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.cart-header__subtitle .mode-badge--mayorista {
  background: linear-gradient(135deg, #1e3a5f, #0a192f);
  color: white;
}

.cart-header__subtitle .mode-badge--minorista {
  background: linear-gradient(135deg, #ec4899, #8b5cf6);
  color: white;
}

/* ==========================================
   CARRITO VACÍO
   ========================================== */

.cart-empty {
  text-align: center;
  padding: var(--space-10) var(--space-4);
  max-width: 500px;
  margin: 0 auto;
}

.cart-empty__icon {
  font-size: 5rem;
  margin-bottom: var(--space-4);
  opacity: 0.5;
}

.cart-empty h2 {
  font-family: var(--ff-heading);
  font-size: var(--fs-2xl);
  margin-bottom: var(--space-2);
}

.cart-empty p {
  color: var(--muted);
  margin-bottom: var(--space-6);
}

/* ==========================================
   LAYOUT DEL CARRITO
   ========================================== */

.cart-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-6);
  align-items: start;
}

@media (max-width: 1024px) {
  .cart-layout {
    grid-template-columns: 1fr;
  }
}

/* ==========================================
   LISTA DE ITEMS
   ========================================== */

.cart-items-container {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.cart-items-header {
  display: grid;
  grid-template-columns: 2fr 1fr 120px 1fr 50px;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--surface-2);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@media (max-width: 768px) {
  .cart-items-header {
    display: none;
  }
}

.cart-items {
  padding: var(--space-2);
}

/* ==========================================
   ITEM DEL CARRITO
   ========================================== */

.cart-item {
  display: grid;
  grid-template-columns: 2fr 1fr 120px 1fr 50px;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}

.cart-item:last-child {
  border-bottom: none;
}

.cart-item:hover {
  background: var(--surface-2);
}

@media (max-width: 768px) {
  .cart-item {
    grid-template-columns: 80px 1fr;
    grid-template-rows: auto auto auto;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3);
  }
}

/* Imagen */
.cart-item__img {
  width: 80px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius-md);
  background: var(--surface-2);
}

@media (max-width: 768px) {
  .cart-item__img {
    grid-row: span 3;
  }
}

/* Info del producto */
.cart-item__info {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.cart-item__title {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--space-1);
}

.cart-item__meta {
  font-size: var(--fs-sm);
  color: var(--muted);
}

.cart-item__details {
  font-size: var(--fs-xs);
  color: var(--secondary);
  margin-top: var(--space-1);
  font-style: italic;
}

.cart-item__badge {
  display: inline-block;
  padding: 2px 8px;
  background: linear-gradient(135deg, #1e3a5f, #0a192f);
  color: white;
  font-size: var(--fs-xs);
  border-radius: var(--radius-sm);
  margin-top: var(--space-1);
}

/* Precio */
.cart-item__price {
  font-weight: 600;
  color: var(--text);
}

@media (max-width: 768px) {
  .cart-item__price {
    display: none;
  }
}

/* Cantidad */
.cart-item__qty {
  display: flex;
  align-items: center;
  gap: 0;
  justify-self: center;
}

.qty-btn {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  background: white;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.qty-btn:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.qty-btn--minus {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.qty-btn--plus {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.qty-value {
  width: 50px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
  background: white;
}

/* Subtotal */
.cart-item__subtotal {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--secondary);
}

@media (max-width: 768px) {
  .cart-item__subtotal {
    grid-column: 2;
  }
}

/* Botón eliminar */
.cart-item__remove {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--muted);
  font-size: 1.2rem;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cart-item__remove:hover {
  background: #fee2e2;
  color: #dc2626;
}

@media (max-width: 768px) {
  .cart-item__remove {
    position: absolute;
    right: var(--space-2);
    top: var(--space-2);
  }
  
  .cart-item {
    position: relative;
  }
}

/* ==========================================
   ACCIONES DEL CARRITO
   ========================================== */

.cart-actions {
  display: flex;
  justify-content: space-between;
  padding: var(--space-4);
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  gap: var(--space-3);
  flex-wrap: wrap;
}

.btn--danger {
  color: #dc2626;
  border-color: #dc2626;
}

.btn--danger:hover {
  background: #dc2626;
  color: white;
}

/* ==========================================
   RESUMEN DEL PEDIDO
   ========================================== */

.cart-summary {
  background: white;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-5);
  position: sticky;
  top: 120px;
}

.cart-summary__title {
  font-family: var(--ff-heading);
  font-size: var(--fs-xl);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--border);
}

.cart-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  font-size: var(--fs-base);
}

.cart-summary__row .discount {
  color: #16a34a;
  font-weight: 600;
}

.cart-summary__row--total {
  font-size: var(--fs-xl);
  font-weight: 700;
  padding-top: var(--space-4);
}

.cart-summary__row--total span:last-child {
  color: var(--secondary);
  font-size: var(--fs-2xl);
}

.cart-summary__divider {
  height: 2px;
  background: var(--border);
  margin: var(--space-3) 0;
}

/* Mínimo mayorista */
.cart-summary__minimum {
  margin: var(--space-4) 0;
  padding: var(--space-4);
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: var(--radius-md);
  border: 1px solid #f59e0b;
}

.cart-summary__minimum.success {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
  border-color: #10b981;
}

.minimum-progress__bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: var(--space-2);
}

.minimum-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, #f59e0b, #d97706);
  border-radius: 4px;
  transition: width 0.5s ease;
}

.cart-summary__minimum.success .minimum-progress__fill {
  background: linear-gradient(90deg, #10b981, #059669);
}

.minimum-progress__text {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: #92400e;
  text-align: center;
}

.cart-summary__minimum.success .minimum-progress__text {
  color: #065f46;
}

/* Cupón */
.cart-summary__coupon {
  display: flex;
  gap: var(--space-2);
  margin: var(--space-4) 0;
}

.cart-summary__coupon input {
  flex: 1;
  padding: var(--space-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
}

.cart-summary__coupon input:focus {
  outline: none;
  border-color: var(--primary);
}

/* Botón checkout */
#checkout-btn {
  margin-top: var(--space-4);
  font-size: var(--fs-lg);
  padding: var(--space-4);
}

#checkout-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--muted);
}

.cart-summary__secure {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-top: var(--space-4);
}

/* Medios de pago */
.cart-summary__payments {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border);
  text-align: center;
}

.cart-summary__payments p {
  font-size: var(--fs-sm);
  color: var(--muted);
  margin-bottom: var(--space-2);
}

.payment-icons {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  font-size: var(--fs-sm);
}

/* ==========================================
   RECOMENDACIONES
   ========================================== */

.cart-recommendations {
  padding: var(--space-8) 0;
  background: var(--surface-2);
}

.cart-recommendations .section__title {
  text-align: center;
  margin-bottom: var(--space-6);
}

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

@media (max-width: 768px) {
  .cart-section {
    padding: var(--space-4) 0;
  }
  
  .cart-header h1 {
    font-size: var(--fs-2xl);
  }
  
  .cart-summary {
    position: static;
  }
  
  .cart-actions {
    flex-direction: column;
  }
  
  .cart-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

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

.cart-item {
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.cart-item.removing {
  animation: slideOut 0.3s ease forwards;
}

@keyframes slideOut {
  to {
    opacity: 0;
    transform: translateX(20px);
    height: 0;
    padding: 0;
    margin: 0;
  }
}

/* ============ CUPONES ============ */

.coupon-applied {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
}

.coupon-remove {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  transition: background 0.2s;
}

.coupon-remove:hover {
  background: rgba(255, 255, 255, 0.4);
}

#applied-coupon {
  margin: 0.75rem 0;
}

.discount {
  color: #2e7d32;
  font-weight: 600;
}

/* ============ PUNTOS ============ */

.cart-summary__points {
  background: linear-gradient(135deg, #FFF8E1, #FFECB3);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  text-align: center;
}

.points-preview__text {
  font-size: 0.875rem;
  color: #5D4037;
}

.points-preview__text strong {
  color: #E65100;
}

.points-preview__text a {
  color: var(--primary);
  font-weight: 500;
}

.points-preview__text a:hover {
  text-decoration: underline;
}