/**
 * Cart Modern Styles - Design Refinado 2026
 * Cards modernos com proporções harmoniosas e espaçamento consistente
 * Baseado em escala 8px e princípios de design moderno
 * 
 * Data: 2026-01-22
 * Versão: Moderna e Elegante
 */

/* ============================================================================
   SISTEMA DE ESPAÇAMENTO - ESCALA 8PX
   ============================================================================ */

:root {
  --spacing-xs: 4px;    /* 0.5 * 8px */
  --spacing-sm: 8px;    /* 1 * 8px */
  --spacing-md: 16px;  /* 2 * 8px */
  --spacing-lg: 24px;  /* 3 * 8px */
  --spacing-xl: 32px;  /* 4 * 8px */
}

/* ============================================================================
   RESET E BASE DOS CARDS - DESIGN MODERNO
   ============================================================================ */

/* Cards principais - proporções harmoniosas */
#orderpage .card,
.orderpage .card,
.cart-product-card,
.hugetalk-pricing-card,
.section-product-card {
  padding: 0 !important; /* Reset - padding será aplicado internamente */
  margin-bottom: var(--spacing-md) !important; /* 16px */
  min-height: auto !important;
  max-height: none !important; /* Remove limitação - deixa fluir naturalmente */
  border-radius: 12px !important; /* Mais moderno que 8px */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; /* Easing suave */
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.08)) !important;
  background: var(--card-bg, #ffffff) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Hover state elegante */
.cart-product-card:hover,
.hugetalk-pricing-card:hover,
#orderpage .card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.08) !important;
  border-color: var(--brand-primary, #2305F1) !important;
}

/* Selected state */
.cart-product-card.selected,
.hugetalk-pricing-card.selected,
#orderpage .card.selected {
  border-color: var(--brand-primary, #2305F1) !important;
  border-width: 2px !important;
  box-shadow: 0 0 0 4px rgba(35, 5, 241, 0.08) !important;
}

/* ============================================================================
   HEADER DO CARD - MODERNO E LIMPO
   ============================================================================ */

.cart-product-card .card-header,
.hugetalk-pricing-card .card-header,
#orderpage .card .card-header {
  padding: var(--spacing-md) var(--spacing-md) var(--spacing-sm) !important; /* 16px 16px 8px */
  border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.08)) !important;
  background: transparent !important; /* Sem background - mais limpo */
  border-radius: 0 !important;
}

.cart-product-card .card-title,
.hugetalk-pricing-card-title,
#orderpage .card .card-title {
  font-size: 1rem !important; /* 16px - tamanho ideal para legibilidade */
  font-weight: 600 !important;
  line-height: 1.4 !important; /* Espaçamento confortável */
  margin: 0 !important;
  margin-bottom: var(--spacing-xs) !important; /* 4px */
  color: var(--text-primary, #1a1f3a) !important;
  word-wrap: break-word !important;
  letter-spacing: -0.01em !important; /* Tracking sutil para modernidade */
}

/* ============================================================================
   BODY DO CARD - ESPAÇAMENTO HARMONIOSO
   ============================================================================ */

.cart-product-card .card-body,
.hugetalk-pricing-card .card-body,
#orderpage .card .card-body {
  padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md) !important; /* 8px 16px 16px */
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  gap: var(--spacing-sm) !important; /* 8px entre elementos */
}

/* Descrição - tipografia refinada */
.cart-product-card .card-description,
.hugetalk-pricing-features,
.hugetalk-pricing-card .card-description {
  font-size: 0.875rem !important; /* 14px - legível e compacto */
  line-height: 1.5 !important; /* Espaçamento confortável para leitura */
  color: var(--text-muted, #6B7280) !important;
  margin: 0 !important;
  flex-grow: 1 !important;
}

/* Lista de features - espaçamento consistente */
.hugetalk-pricing-features li,
.hugetalk-pricing-card ul li {
  padding: var(--spacing-xs) 0 !important; /* 4px vertical */
  font-size: 0.875rem !important; /* 14px */
  line-height: 1.5 !important;
  color: var(--text-muted, #6B7280) !important;
}

.hugetalk-pricing-features li:before,
.hugetalk-pricing-card ul li:before {
  font-size: 1rem !important;
  margin-right: var(--spacing-sm) !important; /* 8px */
  color: var(--brand-secondary, #00C26D) !important;
}

/* ============================================================================
   SEÇÃO DE PREÇO - DESTAQUE ELEGANTE
   ============================================================================ */

.cart-product-card .card-price-section,
.hugetalk-pricing-price-section {
  margin-top: auto !important;
  padding-top: var(--spacing-md) !important; /* 16px */
  border-top: 1px solid var(--border-color, rgba(0, 0, 0, 0.08)) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--spacing-xs) !important; /* 4px entre label e preço */
}

/* Label do preço - discreto mas legível */
.cart-product-card .card-price-label,
.hugetalk-pricing-cycle-label {
  font-size: 0.75rem !important; /* 12px */
  color: var(--text-muted, #6B7280) !important;
  margin: 0 !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important; /* Tracking para labels */
}

/* Preço - destaque mas não dominante */
.cart-product-card .card-price,
.hugetalk-pricing-price {
  font-size: 1.5rem !important; /* 24px - proporção harmoniosa */
  font-weight: 700 !important;
  color: var(--brand-secondary, #00C26D) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: var(--spacing-xs) !important; /* 4px */
  letter-spacing: -0.02em !important; /* Tracking para números grandes */
}

/* Period text - complemento discreto */
.cart-product-card .card-price .period,
.hugetalk-pricing-price .period {
  font-size: 0.875rem !important; /* 14px */
  font-weight: 400 !important;
  color: var(--text-muted, #6B7280) !important;
  margin-left: var(--spacing-xs) !important;
}

/* ============================================================================
   BOTÕES E CONTROLES - MODERNOS E ACESSÍVEIS
   ============================================================================ */

.cart-product-card .btn,
.hugetalk-btn-continue,
#orderpage .card .btn {
  padding: var(--spacing-sm) var(--spacing-md) !important; /* 8px 16px */
  font-size: 0.875rem !important; /* 14px */
  font-weight: 600 !important; /* Mais destaque */
  border-radius: 8px !important;
  width: 100% !important;
  white-space: nowrap !important;
  line-height: 1.5 !important;
  margin-top: var(--spacing-md) !important; /* 16px */
  transition: all 0.2s ease !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.cart-product-card .btn:hover,
.hugetalk-btn-continue:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Selects - modernos e compactos */
.cart-product-card .form-control,
.hugetalk-cycle-display,
#orderpage .card .form-control {
  font-size: 0.875rem !important; /* 14px */
  padding: var(--spacing-sm) var(--spacing-md) !important; /* 8px 16px */
  line-height: 1.5 !important;
  border-radius: 8px !important;
  margin: 0 !important;
  border: 1px solid var(--border-color, rgba(0, 0, 0, 0.15)) !important;
  transition: all 0.2s ease !important;
}

.cart-product-card .form-control:focus,
.hugetalk-cycle-display:focus {
  border-color: var(--brand-primary, #2305F1) !important;
  box-shadow: 0 0 0 3px rgba(35, 5, 241, 0.1) !important;
  outline: none !important;
}

/* ============================================================================
   PAGE HERO - MODERNO E COMPACTO
   ============================================================================ */

.page-hero-compact-cart,
.page-hero.page-hero-compact-cart {
  padding: var(--spacing-lg) var(--spacing-md) !important; /* 24px 16px */
  margin-bottom: var(--spacing-lg) !important; /* 24px */
  border-radius: 12px !important;
}

.page-hero-compact-cart .page-hero-title {
  font-size: 1.5rem !important; /* 24px - proporção moderna */
  font-weight: 700 !important;
  margin-bottom: var(--spacing-sm) !important; /* 8px */
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
}

.page-hero-compact-cart .page-hero-title i,
.page-hero-compact-cart .page-hero-title .fas {
  font-size: 1.375rem !important; /* 22px */
  margin-right: var(--spacing-sm) !important;
}

.page-hero-compact-cart .page-hero-subtitle {
  font-size: 0.9375rem !important; /* 15px */
  margin-top: var(--spacing-xs) !important; /* 4px */
  opacity: 0.75;
  line-height: 1.5 !important;
}

/* ============================================================================
   SEÇÃO "SELECIONE O PRODUTO" - MODERNA
   ============================================================================ */

.cart-product-section {
  margin-bottom: var(--spacing-lg) !important; /* 24px */
}

.cart-product-section .section-header {
  margin-bottom: var(--spacing-md) !important; /* 16px */
  gap: var(--spacing-sm) !important; /* 8px */
  display: flex !important;
  align-items: center !important;
}

.cart-product-section .step-number {
  width: 32px !important; /* Proporção melhor */
  height: 32px !important;
  font-size: 0.875rem !important; /* 14px */
  font-weight: 700 !important;
  border-radius: 8px !important; /* Mais moderno que círculo */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--brand-primary, #2305F1) !important;
  color: white !important;
  flex-shrink: 0 !important;
}

.cart-product-section h3 {
  font-size: 1.125rem !important; /* 18px */
  font-weight: 600 !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.01em !important;
}

/* ============================================================================
   GRID MODERNO E RESPONSIVO
   ============================================================================ */

.cart-products-grid,
.hugetalk-pricing-cards {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: var(--spacing-md) !important; /* 16px - espaçamento harmonioso */
  margin-top: 0 !important;
}

/* Desktop grande - 4-5 cards por linha */
@media (min-width: 1400px) {
  .cart-products-grid,
  .hugetalk-pricing-cards {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: var(--spacing-md) !important; /* 16px */
  }
}

/* Desktop médio - 4 cards */
@media (min-width: 1200px) and (max-width: 1399px) {
  .cart-products-grid,
  .hugetalk-pricing-cards {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

/* Desktop pequeno - 3 cards */
@media (min-width: 992px) and (max-width: 1199px) {
  .cart-products-grid,
  .hugetalk-pricing-cards {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Tablet - 2 cards */
@media (min-width: 768px) and (max-width: 991px) {
  .cart-products-grid,
  .hugetalk-pricing-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--spacing-sm) !important; /* 12px */
  }
}

/* Mobile - 1 card */
@media (max-width: 767px) {
  .cart-products-grid,
  .hugetalk-pricing-cards {
    grid-template-columns: 1fr !important;
    gap: var(--spacing-sm) !important; /* 12px */
  }
  
  .cart-product-card,
  .hugetalk-pricing-card {
    max-height: none !important; /* Sem limitação em mobile */
  }
}

/* ============================================================================
   REDUZIR ESPAÇAMENTOS GERAIS DO ORDEPAGE
   ============================================================================ */

#orderpage .cart-product,
#orderpage .mb-5,
.orderpage .mb-5 {
  margin-bottom: var(--spacing-lg) !important; /* 24px */
}

#orderpage .mb-4,
.orderpage .mb-4 {
  margin-bottom: var(--spacing-md) !important; /* 16px */
}

#orderpage .mb-3,
.orderpage .mb-3 {
  margin-bottom: var(--spacing-sm) !important; /* 8px */
}

#orderpage .mt-5,
.orderpage .mt-5 {
  margin-top: var(--spacing-lg) !important; /* 24px */
}

#orderpage .mt-4,
.orderpage .mt-4 {
  margin-top: var(--spacing-md) !important; /* 16px */
}

#orderpage .mt-3,
.orderpage .mt-3 {
  margin-top: var(--spacing-sm) !important; /* 8px */
}

/* ============================================================================
   AJUSTES ESPECÍFICOS PARA HUGETALK
   ============================================================================ */

.hugetalk-products-header {
  margin-bottom: var(--spacing-lg) !important; /* 24px */
}

.hugetalk-products-header h1 {
  font-size: 1.5rem !important; /* 24px */
  font-weight: 700 !important;
  margin-bottom: var(--spacing-sm) !important; /* 8px */
  line-height: 1.3 !important;
  letter-spacing: -0.02em !important;
}

.hugetalk-products-header h1 .shopping-icon {
  font-size: 1.375rem !important; /* 22px */
}

.hugetalk-products-header .subtitle {
  font-size: 0.9375rem !important; /* 15px */
  margin-top: var(--spacing-xs) !important; /* 4px */
}

.hugetalk-section-title {
  font-size: 1.125rem !important; /* 18px */
  margin-bottom: var(--spacing-md) !important; /* 16px */
  margin-top: var(--spacing-sm) !important; /* 8px */
  font-weight: 600 !important;
}

/* ============================================================================
   RESPONSIVIDADE ADICIONAL
   ============================================================================ */

@media (max-width: 768px) {
  .page-hero-compact-cart {
    padding: var(--spacing-md) !important; /* 16px */
    margin-bottom: var(--spacing-md) !important; /* 16px */
  }
  
  .page-hero-compact-cart .page-hero-title {
    font-size: 1.25rem !important; /* 20px */
  }
  
  .page-hero-compact-cart .page-hero-subtitle {
    font-size: 0.875rem !important; /* 14px */
  }
  
  .cart-product-section .section-header {
    margin-bottom: var(--spacing-sm) !important; /* 8px */
  }
  
  .cart-product-section h3 {
    font-size: 1rem !important; /* 16px */
  }
  
  .cart-product-card .card-header,
  .hugetalk-pricing-card .card-header {
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-xs) !important; /* 8px 16px 4px */
  }
  
  .cart-product-card .card-body,
  .hugetalk-pricing-card .card-body {
    padding: var(--spacing-xs) var(--spacing-md) var(--spacing-md) !important; /* 4px 16px 16px */
  }
  
  .cart-product-card .card-title,
  .hugetalk-pricing-card-title {
    font-size: 0.9375rem !important; /* 15px */
  }
  
  .cart-product-card .card-price,
  .hugetalk-pricing-price {
    font-size: 1.25rem !important; /* 20px */
  }
  
  .cart-product-card .btn {
    padding: var(--spacing-sm) var(--spacing-md) !important; /* 8px 16px */
    font-size: 0.875rem !important; /* 14px */
    min-height: 40px !important; /* Área de toque adequada */
  }
}

/* ============================================================================
   GARANTIR LEGIBILIDADE MÍNIMA
   ============================================================================ */

/* Tamanhos mínimos para acessibilidade */
.cart-product-card .card-title,
.hugetalk-pricing-card-title {
  min-font-size: 14px !important;
}

.cart-product-card .card-price,
.hugetalk-pricing-price {
  min-font-size: 20px !important;
}

.cart-product-card .btn {
  min-font-size: 14px !important;
  min-height: 40px !important; /* Área de toque mínima para mobile */
}

/* ============================================================================
   ANIMAÇÕES E TRANSIÇÕES SUAVES
   ============================================================================ */

.cart-product-card,
.hugetalk-pricing-card {
  animation: fadeIn 0.3s ease-out !important;
}

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

/* Stagger animation para grid */
.cart-products-grid > *:nth-child(1) { animation-delay: 0.05s; }
.cart-products-grid > *:nth-child(2) { animation-delay: 0.1s; }
.cart-products-grid > *:nth-child(3) { animation-delay: 0.15s; }
.cart-products-grid > *:nth-child(4) { animation-delay: 0.2s; }
.cart-products-grid > *:nth-child(5) { animation-delay: 0.25s; }