/**
 * PlanComparisonComponent — tabela de comparação de planos nas páginas de
 * upgrade (plano atual × oferta(s) de upgrade).
 *
 * O container nasce no HTML com data-plan-comparison-state="loading" e o
 * componente troca para "ready" ou "empty" (padrão anti layout-shift dos
 * banners premium — ver premium-escalamax-banner.css).
 */

/* ── Estados do container ─────────────────────────────────────────────── */

[data-plan-comparison-state='loading'] {
  min-height: 420px;
  border-radius: 16px;
  background: linear-gradient(
    100deg,
    var(--adsx-bg-card) 40%,
    var(--adsx-bg-detail) 50%,
    var(--adsx-bg-card) 60%
  );
  background-size: 200% 100%;
  animation: plan-comparison-skeleton-pulse 1.6s ease-in-out infinite;
}

[data-plan-comparison-state='empty'] {
  display: none;
  min-height: 0;
}

[data-plan-comparison-state='ready'] {
  min-height: 0;
}

@keyframes plan-comparison-skeleton-pulse {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-plan-comparison-state='loading'] {
    animation: none;
  }
}

/* ── Seção ────────────────────────────────────────────────────────────── */

/* Card próprio do componente — não depende do .md3-card global; tokens
   --adsx-* cobrem light/dark automaticamente */
.plan-comparison {
  display: block;
  margin-top: 2rem;
  padding: 24px;
  background: var(--adsx-bg-card);
  border: var(--adsx-border-light);
  border-radius: 16px;
  box-shadow: var(--adsx-shadow-md);
}

.plan-comparison__title {
  margin: 0 0 16px;
  font-family: 'Poppins', sans-serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--adsx-text-primary);
}

/* Wrapper de scroll: em telas estreitas a tabela rola na horizontal,
   nunca o body (primeira coluna fica sticky). */
.plan-comparison__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Tabela ───────────────────────────────────────────────────────────── */

/* Largura contida: sem o cap, a tabela estica com o card full-width e as
   colunas se afastam demais umas das outras. */
.plan-comparison__table {
  width: 100%;
  max-width: 760px;
  border-collapse: separate;
  border-spacing: 0;
  min-width: 480px;
  background: transparent;
}

/* premium-material.css tem regras globais de dark mode para table/th/td
   ([data-theme='dark'] th → fundo zinc-950, texto roxo, borda cinza) com
   especificidade (0,1,1), acima das classes BEM daqui. Sem esta neutralização
   a tabela vira um bloco mais escuro que o próprio card. Seletores com
   (0,2,1) vencem sem !important; as variações abaixo repetem a tag
   (th./td.) para não perderem para a regra genérica de th/td deste bloco. */
.plan-comparison .plan-comparison__table {
  background: transparent;
}

.plan-comparison .plan-comparison__table th,
.plan-comparison .plan-comparison__table td {
  background: transparent;
  color: inherit;
  border-bottom: var(--adsx-border-light);
}

.plan-comparison th.plan-comparison__corner,
.plan-comparison th.plan-comparison__col-header {
  border-bottom: var(--adsx-border-medium);
}

.plan-comparison th.plan-comparison__corner,
.plan-comparison th.plan-comparison__row-label {
  background: var(--adsx-bg-card);
}

.plan-comparison th.plan-comparison__row-label {
  color: var(--adsx-text-secondary);
}

.plan-comparison td.plan-comparison__cell--recommended,
.plan-comparison th.plan-comparison__col-header--recommended {
  background: rgba(139, 92, 246, 0.08);
}

/* Colunas de valor com largura fixa; a coluna de labels absorve o restante */
.plan-comparison__col-header,
.plan-comparison__cell {
  width: 170px;
}

.plan-comparison__corner,
.plan-comparison__row-label {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--adsx-bg-card);
  text-align: left;
}

/* Header "Recursos" da coluna de labels; borda mantém a linha do cabeçalho
   contínua também sob essa coluna */
.plan-comparison__corner {
  border-bottom: var(--adsx-border-medium);
  padding: 12px 16px 12px 0;
  vertical-align: bottom;
}

.plan-comparison__row-label {
  padding: 12px 16px 12px 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--adsx-text-secondary);
  border-bottom: var(--adsx-border-light);
}

/* Ícone do recurso (o mesmo usado dentro do app) + bloco de texto */
.plan-comparison__row-icon {
  font-size: 20px;
  color: var(--adsx-primary-light);
  vertical-align: top;
  margin-right: 10px;
}

.plan-comparison__row-info {
  display: inline-block;
  vertical-align: top;
}

.plan-comparison__row-label-text {
  display: block;
  white-space: nowrap;
}

/* Copy de transformação do recurso — só aparece quando o upgrade melhora algo */
.plan-comparison__row-desc {
  display: block;
  margin-top: 2px;
  max-width: 300px;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--adsx-text-tertiary);
  white-space: normal;
}

.plan-comparison__col-header {
  padding: 12px 16px;
  text-align: center;
  vertical-align: bottom;
  border-bottom: var(--adsx-border-medium);
}

.plan-comparison__col-kicker {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--adsx-text-tertiary);
  margin-bottom: 4px;
}

/* Wrapper de posicionamento — o visual vem da .pill-badge do design system */
.plan-comparison__recommended {
  display: block;
  margin-bottom: 6px;
}

.plan-comparison__col-name {
  display: block;
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--adsx-text-primary);
}

.plan-comparison__col-header--recommended .plan-comparison__col-name {
  color: var(--adsx-primary-light);
}

.plan-comparison__col-periodicity {
  display: block;
  font-size: 0.75rem;
  color: var(--adsx-text-tertiary);
}

.plan-comparison__cell {
  padding: 12px 16px;
  text-align: center;
  border-bottom: var(--adsx-border-light);
}

/* Coluna recomendada ganha um realce sutil de fundo */
.plan-comparison__cell--recommended,
.plan-comparison__col-header--recommended {
  background: rgba(139, 92, 246, 0.08);
}

.plan-comparison__value {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--adsx-text-primary);
  font-variant-numeric: tabular-nums;
}

/* ── Ícones ✓/✗ ───────────────────────────────────────────────────────── */

.plan-comparison__icon {
  font-size: 20px;
  vertical-align: middle;
}

.plan-comparison__icon--yes {
  color: var(--adsx-success);
}

/* ✗ neutro: na coluna do plano atual não é um "erro", é só ausência */
.plan-comparison__icon--no,
.plan-comparison__icon--no-current {
  color: var(--adsx-text-muted);
}

/* ── Responsivo ───────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .plan-comparison {
    padding: 16px;
  }

  [data-plan-comparison-state='loading'] {
    min-height: 460px;
  }

  .plan-comparison__col-header,
  .plan-comparison__cell {
    padding: 10px 12px;
  }
}