/**
 * Cart Ultra-Compact Styles
 * Refatoração agressiva para cards ultra-compactos, elegantes e modernos
 * Reduz ~50% do espaço vertical mantendo legibilidade
 * 
 * Data: 2026-01-22
 * Prioridade: Máxima (usa !important para sobrescrever tudo)
 */

/* ============================================================================
   RESET GERAL - ORDEPAGE E CARDS
   ============================================================================ */

/* Target: Todos os cards de produtos do carrinho */
#orderpage .card,
.orderpage .card,
.cart-product-card,
.hugetalk-pricing-card,
.section-product-card {
  padding: 12px !important;
  margin-bottom: 12px !important;
  min-height: auto !important;
  max-height: 180px !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
}

/* Remove altura fixa que força cards grandes */
.cart-product-card,
.hugetalk-pricing-card {
  height: auto !important;
  max-height: 180px !important;
}

/* ============================================================================
   PAGE HERO ULTRA-COMPACTO
   ============================================================================ */

.page-hero-compact-cart,
.page-hero.page-hero-compact-cart {
  padding: 16px 12px !important; /* Reduzido de 20px 16px */
  margin-bottom: 16px !important; /* Reduzido de 20px */
}

.page-hero-compact-cart .page-hero-title {
  font-size: 1.25rem !important; /* 20px - reduzido de 24px */
  font-weight: 600 !important;
  margin-bottom: 6px !important; /* Reduzido de 8px */
  line-height: 1.3 !important;
}

.page-hero-compact-cart .page-hero-title i,
.page-hero-compact-cart .page-hero-title .fas,
.page-hero-compact-cart .page-hero-title .material-icons {
  font-size: 1.125rem !important; /* 18px - reduzido de 20px */
}

.page-hero-compact-cart .page-hero-subtitle {
  font-size: 0.875rem !important; /* 14px - mantido */
  margin-top: 4px !important;
  opacity: 0.8;
  line-height: 1.4 !important;
}

/* ============================================================================
   SEÇÃO "SELECIONE O PRODUTO" ULTRA-COMPACTA
   ============================================================================ */

.cart-product-section {
  margin-bottom: 16px !important; /* Reduzido de 20px */
}

.cart-product-section .section-header {
  margin-bottom: 12px !important; /* Reduzido de 16px */
  gap: 8px !important; /* Reduzido de 12px */
}

.cart-product-section .step-number {
  width: 24px !important; /* Reduzido de 28px */
  height: 24px !important;
  font-size: 0.75rem !important; /* 12px - reduzido de 14px */
  font-weight: 600 !important;
}

.cart-product-section h3 {
  font-size: 1rem !important; /* 16px - reduzido de 18px */
  font-weight: 600 !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}

/* ============================================================================
   CARDS DE PRODUTOS ULTRA-COMPACTOS
   ============================================================================ */

/* Header do card - padding mínimo */
.cart-product-card .card-header,
.hugetalk-pricing-card .card-header {
  padding: 8px 12px !important; /* Reduzido de 12px 16px */
  border-bottom: 1px solid var(--border-color, #EBECF0) !important;
  background: rgba(var(--card-head-bg-rgb, 251, 251, 252), 0.6) !important;
  border-radius: 8px 8px 0 0 !important;
}

/* Título do produto - drasticamente reduzido */
.cart-product-card .card-title,
.hugetalk-pricing-card-title {
  font-size: 0.875rem !important; /* 14px - reduzido de 18px */
  font-weight: 600 !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  margin-bottom: 6px !important;
  color: var(--brand-secondary, #00C26D) !important;
  word-wrap: break-word !important;
}

/* Body do card - padding mínimo */
.cart-product-card .card-body,
.hugetalk-pricing-card .card-body {
  padding: 12px !important; /* Reduzido de 16px */
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

/* Descrição - compacta */
.cart-product-card .card-description,
.hugetalk-pricing-features,
.hugetalk-pricing-card .card-description {
  font-size: 0.8125rem !important; /* 13px */
  line-height: 1.4 !important;
  margin-bottom: 8px !important;
  color: var(--text-muted, #6B7280) !important;
  flex-grow: 1 !important;
}

/* Lista de features - compacta */
.hugetalk-pricing-features li,
.hugetalk-pricing-card ul li {
  padding: 4px 0 !important; /* Reduzido de 12px */
  font-size: 0.8125rem !important; /* 13px */
  line-height: 1.4 !important;
}

.hugetalk-pricing-features li:before,
.hugetalk-pricing-card ul li:before {
  font-size: 1rem !important; /* Reduzido de 1.2rem */
  margin-right: 6px !important; /* Reduzido de 12px */
}

/* ============================================================================
   PREÇOS ULTRA-COMPACTOS
   ============================================================================ */

/* Seção de preço - padding mínimo */
.cart-product-card .card-price-section,
.hugetalk-pricing-price-section {
  margin-top: auto !important;
  padding-top: 8px !important; /* Reduzido de 12px */
  border-top: 1px solid var(--border-color, #EBECF0) !important;
}

/* Label do preço - muito pequeno */
.cart-product-card .card-price-label,
.hugetalk-pricing-cycle-label {
  font-size: 0.6875rem !important; /* 11px - reduzido de 12px */
  color: var(--text-muted, #6B7280) !important;
  margin-bottom: 4px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

/* Preço - reduzido mas ainda destacado */
.cart-product-card .card-price,
.hugetalk-pricing-price {
  font-size: 1.25rem !important; /* 20px - reduzido de 32px */
  font-weight: 700 !important;
  color: var(--brand-secondary, #00C26D) !important;
  margin-bottom: 8px !important;
  line-height: 1.2 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
}

/* Period text - muito pequeno */
.cart-product-card .card-price .period,
.hugetalk-pricing-price .period {
  font-size: 0.75rem !important; /* 12px */
  font-weight: 400 !important;
  color: var(--text-muted, #6B7280) !important;
}

/* ============================================================================
   BOTÕES E CONTROLES ULTRA-COMPACTOS
   ============================================================================ */

/* Botões - mais finos */
.cart-product-card .btn,
.hugetalk-btn-continue {
  padding: 6px 12px !important; /* Reduzido de 8px 16px */
  font-size: 0.8125rem !important; /* 13px - reduzido de 14px */
  font-weight: 500 !important;
  border-radius: 6px !important;
  width: 100% !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
  margin-top: 8px !important;
}

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

/* Selects - compactos */
.cart-product-card .form-control,
.hugetalk-cycle-display {
  font-size: 0.8125rem !important; /* 13px */
  padding: 6px 10px !important; /* Reduzido de 8px 12px */
  line-height: 1.4 !important;
  border-radius: 6px !important;
  margin-bottom: 8px !important;
}

/* ============================================================================
   GRID ULTRA-COMPACTO
   ============================================================================ */

/* Grid com espaçamento mínimo */
.cart-products-grid,
.hugetalk-pricing-cards {
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 12px !important; /* Reduzido de 16px */
  margin-top: 0 !important;
}

/* 5 cards por linha em desktop grande */
@media (min-width: 1400px) {
  .cart-products-grid,
  .hugetalk-pricing-cards {
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 12px !important;
  }
}

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

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

/* 2 cards por linha em tablet */
@media (min-width: 768px) and (max-width: 991px) {
  .cart-products-grid,
  .hugetalk-pricing-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

/* 1 card por linha em mobile */
@media (max-width: 767px) {
  .cart-products-grid,
  .hugetalk-pricing-cards {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  
  .cart-product-card,
  .hugetalk-pricing-card {
    max-height: none !important; /* Remover limite em mobile */
  }
}

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

#orderpage .cart-product,
#orderpage .mb-5,
.orderpage .mb-5 {
  margin-bottom: 16px !important; /* Reduzido de 20px */
}

#orderpage .mb-4,
.orderpage .mb-4 {
  margin-bottom: 12px !important; /* Reduzido de 16px */
}

#orderpage .mb-3,
.orderpage .mb-3 {
  margin-bottom: 8px !important; /* Reduzido de 12px */
}

#orderpage .mt-5,
.orderpage .mt-5 {
  margin-top: 16px !important;
}

#orderpage .mt-4,
.orderpage .mt-4 {
  margin-top: 12px !important;
}

#orderpage .mt-3,
.orderpage .mt-3 {
  margin-top: 8px !important;
}

/* ============================================================================
   HOVER STATES ELEGANTES
   ============================================================================ */

.cart-product-card:hover,
.hugetalk-pricing-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
  border-color: var(--brand-primary, #2305F1) !important;
}

.cart-product-card.selected,
.hugetalk-pricing-card.selected {
  border-color: var(--brand-primary, #2305F1) !important;
  border-width: 2px !important;
  box-shadow: 0 0 0 3px rgba(35, 5, 241, 0.1) !important;
}

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

@media (max-width: 768px) {
  .page-hero-compact-cart {
    padding: 12px !important;
    margin-bottom: 12px !important;
  }
  
  .page-hero-compact-cart .page-hero-title {
    font-size: 1.125rem !important; /* 18px */
  }
  
  .page-hero-compact-cart .page-hero-subtitle {
    font-size: 0.8125rem !important; /* 13px */
  }
  
  .cart-product-section .section-header {
    margin-bottom: 10px !important;
  }
  
  .cart-product-section h3 {
    font-size: 0.9375rem !important; /* 15px */
  }
  
  .cart-product-card .card-header,
  .hugetalk-pricing-card .card-header {
    padding: 6px 10px !important;
  }
  
  .cart-product-card .card-body,
  .hugetalk-pricing-card .card-body {
    padding: 10px !important;
  }
  
  .cart-product-card .card-title,
  .hugetalk-pricing-card-title {
    font-size: 0.8125rem !important; /* 13px */
  }
  
  .cart-product-card .card-price,
  .hugetalk-pricing-price {
    font-size: 1.125rem !important; /* 18px */
  }
}

/* ============================================================================
   SOBRESCREVER ESTILOS DO HOSTBILL ORDERPAGE
   ============================================================================ */

/* Reset de estilos inline que podem estar nos templates */
#orderpage [style*="padding"],
#orderpage [style*="font-size"],
.orderpage [style*="padding"],
.orderpage [style*="font-size"] {
  /* Não podemos sobrescrever inline styles diretamente,
     mas podemos usar !important nos seletores específicos */
}

/* Target específico para cards com estilos inline */
#orderpage .card[style],
.orderpage .card[style] {
  padding: 12px !important;
  max-height: 180px !important;
}

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

.hugetalk-products-header {
  margin-bottom: 16px !important; /* Reduzido de 2.5rem (40px) */
}

.hugetalk-products-header h1 {
  font-size: 1.25rem !important; /* 20px - reduzido de 2rem (32px) */
  font-weight: 600 !important;
  margin-bottom: 6px !important;
  line-height: 1.3 !important;
}

.hugetalk-products-header h1 .shopping-icon {
  font-size: 1.125rem !important; /* 18px - reduzido de 2rem */
}

.hugetalk-products-header .subtitle {
  font-size: 0.875rem !important; /* 14px - reduzido de 1rem */
  margin-top: 4px !important;
}

.hugetalk-section-title {
  font-size: 1rem !important; /* 16px - reduzido de 1.5rem */
  margin-bottom: 12px !important; /* Reduzido de 2rem */
  margin-top: 8px !important; /* Reduzido de 1rem */
}

.hugetalk-pricing-cards {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
  gap: 12px !important; /* Reduzido de 2rem (32px) */
}

.hugetalk-pricing-card {
  padding: 12px !important; /* Reduzido de 2rem (32px) */
  border-radius: 8px !important; /* Reduzido de 12px */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
  max-height: 180px !important;
}

.hugetalk-pricing-card:hover {
  transform: translateY(-2px) !important; /* Reduzido de -4px */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.hugetalk-pricing-card-title {
  font-size: 0.875rem !important; /* 14px - reduzido de 1.5rem (24px) */
  font-weight: 600 !important; /* Reduzido de 700 */
  margin-bottom: 8px !important; /* Reduzido de 1.5rem */
  line-height: 1.3 !important;
}

.hugetalk-pricing-features {
  margin: 0 0 8px 0 !important; /* Reduzido de 2rem */
}

.hugetalk-pricing-price-section {
  padding-top: 8px !important; /* Reduzido de 1.5rem */
}

.hugetalk-pricing-price {
  font-size: 1.25rem !important; /* 20px - reduzido de 2rem (32px) */
  font-weight: 700 !important;
  margin-bottom: 8px !important; /* Reduzido de 1rem */
  line-height: 1.2 !important;
}

.hugetalk-pricing-price .period {
  font-size: 0.75rem !important; /* 12px - reduzido de 1rem */
  font-weight: 400 !important;
}

/* ============================================================================
   AJUSTES PARA SECTION PRODUCT CARDS (products.tpl)
   ============================================================================ */

.section-product-cards .card,
.section-product-card {
  padding: 12px !important;
  max-height: 180px !important;
}

.section-product-card .card-title {
  font-size: 0.875rem !important; /* 14px */
  font-weight: 600 !important;
  margin-bottom: 6px !important;
}

.section-product-card .card-body {
  padding: 12px !important;
}

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

/* Nunca reduzir abaixo destes valores para manter legibilidade */
.cart-product-card .card-title,
.hugetalk-pricing-card-title {
  min-font-size: 13px !important;
}

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

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