/* Estilos para cards de preço */

/* Cards base */
div[data-plan="basic"],
div[data-plan="premium"] {
  position: relative !important;
  padding-top: 2.5rem !important;
}

/* Premium com destaque */
div[data-plan="premium"] {
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%) !important;
  border: 2px solid #22c55e !important;
  box-shadow: 0 10px 30px rgba(34, 197, 94, 0.25) !important;
  transform: scale(1.02) !important;
  z-index: 10 !important;
}

/* Básico normal */
div[data-plan="basic"] {
  background: #ffffff !important;
  border: 2px solid #e5e7eb !important;
}

/* Esconder badge "MAIS POPULAR" se estiver no card Básico */
div[data-plan="basic"] [data-badge="popular"] {
  display: none !important;
}

/* Esconder badge "INÍCIO PERFEITO" se estiver no card Premium */
div[data-plan="premium"] [data-badge="inicio"] {
  display: none !important;
}

/* Mostrar e estilizar badge "INÍCIO PERFEITO" no card Básico */
div[data-plan="basic"] [data-badge="inicio"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: -12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background-color: #22c55e !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  padding: 0.5rem 1rem !important;
  border-radius: 9999px !important;
  text-align: center !important;
  white-space: nowrap !important;
  z-index: 20 !important;
  line-height: 1 !important;
}

/* Mostrar e estilizar badge "MAIS POPULAR" no card Premium */
div[data-plan="premium"] [data-badge="popular"] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  top: -12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background-color: #fbbf24 !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.75rem !important;
  padding: 0.5rem 1rem !important;
  border-radius: 9999px !important;
  text-align: center !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 6px rgba(251, 191, 36, 0.3) !important;
  z-index: 20 !important;
  line-height: 1 !important;
}

/* Centralizar ícones dentro dos badges */
[data-badge] svg {
  margin-right: 0.25rem !important;
  vertical-align: middle !important;
}

/* Ordem em mobile */
@media (max-width: 640px) {
  div[data-plan="basic"] {
    order: 1 !important;
    margin-bottom: 2rem !important;
  }
  
  div[data-plan="premium"] {
    order: 2 !important;
  }
}

/* Desktop */
@media (min-width: 768px) {
  section:has(div[data-plan]) {
    display: flex !important;
    flex-direction: row !important;
    gap: 2rem !important;
    align-items: stretch !important;
  }
  
  div[data-plan="basic"],
  div[data-plan="premium"] {
    flex: 1 !important;
  }
  
  div[data-plan="basic"] {
    order: 1 !important;
  }
  
  div[data-plan="premium"] {
    order: 2 !important;
  }
}

/* Garantir que o conteúdo não seja cortado */
div[data-plan] h2,
div[data-plan] h3,
div[data-plan] p {
  position: relative !important;
  z-index: 1 !important;
}