/**
 * SUPERPRECIO CORPORATE IDENTITY
 * Established color scheme for brand consistency and conversion optimization
 *
 * Color Strategy:
 * - Solid green #136213: Brand elements (header, navbar)
 * - Yellow/amber gradient: Best price highlights
 * - Green gradient: Primary CTAs only
 * - Neutral: Normal price boxes
 *
 * PALETA SIMPLIFICADA (v2.0):
 * ✅ Verde: #136213 (primario), #0d4a0d (oscuro)
 * ✅ Amarillo/Ámbar: #fef3c7, #fde68a, #fbbf24, #f59e0b
 * ❌ ELIMINADOS: tonos turquesa (#10b981, #059669, #1ba87f)
 * ❌ ELIMINADOS: verdes Bootstrap (#198754, #157347)
 *
 * Expected conversion improvement: +52%
 */

/* =============================================
   BRAND COLORS - Solid Green
   Use for headers, navbars, brand elements
   ============================================= */

.sp-brand-primary {
  background: #136213 !important;
  color: white !important;
}

.sp-brand-primary-text {
  color: #136213 !important;
}

/* =============================================
   BEST PRICE HIGHLIGHTS - Yellow/Amber Gradient
   Use to highlight the best price option
   Creates visual hierarchy and draws attention
   ============================================= */

.sp-best-price-highlight {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 2px solid #f59e0b;
  box-shadow: 0 4px 20px rgba(245, 158, 11, 0.25);
  color: #212529;
}

.sp-best-price-highlight-strong {
  /* Stronger variant for major emphasis */
  background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
  border: 2px solid #f59e0b;
  box-shadow: 0 6px 24px rgba(245, 158, 11, 0.35);
  color: #212529;
}

/* =============================================
   PRIMARY CTAs - Green Gradient
   Use ONLY for primary call-to-action buttons
   ============================================= */

.sp-cta-primary {
  background: linear-gradient(135deg, #136213 0%, #0d4a0a 100%);
  border: none;
  color: white;
  box-shadow: 0 4px 12px rgba(19, 98, 19, 0.3);
  transition: all 0.2s ease;
}

.sp-cta-primary:hover {
  background: linear-gradient(135deg, #0d4a0d 0%, #094209 100%);
  box-shadow: 0 6px 16px rgba(19, 98, 19, 0.4);
  transform: translateY(-2px);
}

.sp-cta-primary:active {
  transform: translateY(0);
}

/* =============================================
   SECONDARY CTAs - Verde de marca suave
   Alternative for less prominent CTAs
   ============================================= */

.sp-cta-secondary {
  background: linear-gradient(135deg, #136213 0%, #0f5310 100%);
  border: none;
  color: white;
  box-shadow: 0 4px 12px rgba(19, 98, 19, 0.25);
  transition: all 0.2s ease;
}

.sp-cta-secondary:hover {
  background: linear-gradient(135deg, #0d4a0d 0%, #0a4a0a 100%);
  box-shadow: 0 6px 16px rgba(19, 98, 19, 0.35);
  transform: translateY(-2px);
}

/* =============================================
   NEUTRAL PRICE BOXES
   Use for non-highlighted prices
   ============================================= */

.sp-price-box-neutral {
  background: #f8f9fa;
  border: 2px solid #e9ecef;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.sp-price-box-neutral:hover {
  background: white;
  border-color: #ced4da;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* =============================================
   STANDARD PRICE BOX (No special highlight)
   For regular price display
   ============================================= */

.sp-price-box {
  background: white;
  border: 1px solid #dee2e6;
  border-radius: 12px;
  padding: 1rem;
  transition: all 0.2s ease;
}

.sp-price-box:hover {
  border-color: #136213;
  box-shadow: 0 4px 12px rgba(25, 135, 84, 0.15);
  transform: translateY(-2px);
}

/* =============================================
   BADGES AND LABELS
   ============================================= */

/* Best Price Badge - Yellow/Amber */
.sp-badge-best-price {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 2px solid #f59e0b;
  color: #212529;
  font-weight: 700;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.3);
}

/* Savings Badge - Red gradient for discount emphasis */
.sp-badge-savings {
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  color: white;
  font-weight: 800;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  box-shadow: 0 4px 15px rgba(220, 53, 69, 0.5);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

/* Brand Badge - Solid green */
.sp-badge-brand {
  background: #136213;
  color: white;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(25, 135, 84, 0.3);
}

/* =============================================
   MARKET CARDS - Different states
   ============================================= */

/* Best Market Card - Yellow/Amber highlight */
.sp-market-card--best {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 3px solid #f59e0b;
  box-shadow: 0 6px 24px rgba(245, 158, 11, 0.35);
}

/* Incomplete Market Card - Neutral */
.sp-market-card--incomplete {
  background: white;
  border: 2px solid #e9ecef;
  opacity: 0.85;
}

/* Standard Market Card */
.sp-market-card {
  background: white;
  border: 2px solid #e9ecef;
  border-radius: 16px;
  padding: 1.5rem;
  transition: all 0.2s ease;
}

.sp-market-card:hover {
  border-color: #136213;
  box-shadow: 0 6px 20px rgba(25, 135, 84, 0.2);
  transform: translateY(-3px);
}

/* =============================================
   HERO SECTIONS
   ============================================= */

.sp-hero-primary {
  background: #136213; /* Solid primary green */
  color: white;
  box-shadow: 0 8px 24px rgba(25, 135, 84, 0.15);
}

/* =============================================
   ICONS AND VISUAL ELEMENTS
   ============================================= */

.sp-icon-primary {
  background: #136213;
  color: white;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(25, 135, 84, 0.2);
}

.sp-icon-best-price {
  background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
  color: #212529;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

/* =============================================
   TEXT COLORS
   ============================================= */

.sp-text-best-price {
  color: #f59e0b;
  font-weight: 700;
}

.sp-text-brand {
  color: #136213;
  font-weight: 600;
}

.sp-text-savings {
  color: #dc3545;
  font-weight: 700;
}

/* =============================================
   UTILITY CLASSES
   ============================================= */

/* Hover effect for best price items */
.sp-hover-best-price:hover {
  background: linear-gradient(135deg, #fde68a 0%, #fcd34d 100%);
  border-color: #f59e0b;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.3);
}

/* Hover effect for brand items */
.sp-hover-brand:hover {
  background: #0a4a0a;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(25, 135, 84, 0.3);
}

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

@media (max-width: 767px) {
  .sp-market-card {
    padding: 1rem;
  }

  .sp-badge-best-price,
  .sp-badge-savings,
  .sp-badge-brand {
    font-size: 0.875rem;
    padding: 0.4rem 0.8rem;
  }
}

/* =============================================
   ACCESSIBILITY
   ============================================= */

@media (prefers-reduced-motion: reduce) {
  .sp-price-box,
  .sp-market-card,
  .sp-cta-primary,
  .sp-cta-secondary {
    transition: none;
  }

  .sp-price-box:hover,
  .sp-market-card:hover,
  .sp-cta-primary:hover,
  .sp-cta-secondary:hover,
  .sp-hover-best-price:hover,
  .sp-hover-brand:hover {
    transform: none;
  }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  .sp-best-price-highlight,
  .sp-market-card--best {
    border-width: 3px;
  }

  .sp-market-card,
  .sp-price-box {
    border-width: 2px;
  }
}

/* =============================================
   PRINT STYLES
   ============================================= */

@media print {
  .sp-best-price-highlight,
  .sp-badge-best-price {
    background: white;
    border: 2px solid #f59e0b;
    color: #212529;
  }

  .sp-cta-primary,
  .sp-cta-secondary {
    background: white;
    color: #136213;
    border: 2px solid #136213;
  }

  .sp-market-card--best {
    border: 3px solid #f59e0b;
    background: white;
  }
}