/* ==========================================================================
   site-compare.css: tabela compare de planos (/precos).
   Parte do site.css (tokens, base e o que toda pagina usa vivem la). Este
   arquivo so entra na pagina que tem esta peca: quem decide e o SiteCss, a
   partir das secoes e mockups que a pagina desenhou. Carrega DEPOIS do
   site.css, na ordem fixa do SiteCss::ORDER (a mesma ordem em que as regras
   estavam no arquivo unico, para a cascata nao mudar).
   ========================================================================== */

/* 10.15 Tabela compare */
/* position: relative OBRIGATORIO. Os <span class="st-sr"> das celulas sao
   'absolute'; sem um ancestral posicionado aqui, o bloco de contencao deles
   passava a ser o .st-container (fora da rolagem) e o overflow do wrapper nao
   os recortava: eles iam parar em x=473 e o Chrome do celular alargava a
   viewport de layout de 390 para 434px (a pagina inteira saia "zoomada pra
   fora"). */
.st-compare-wrap { position: relative; overflow-x: auto; }

.st-compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  /* "Incluido" NAO usa a cor da marca: ela pinta botao e selo, e num
     white-label de marca vermelha o check de "tem" virava sinal de erro. Verde
     e a unica cor que se le como "tem" em qualquer instalacao. */
  --ok: #15803d;
}

.st-compare th,
.st-compare td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}

.st-compare thead th {
  background: var(--bg-page);
  border-bottom: 1px solid var(--line);
  font-weight: 500;
  color: var(--text-1);
  white-space: nowrap;
}

.st-compare tbody th { font-weight: 400; color: var(--text-1-soft); }

/* Sub-linha (a loja dentro da coleta, o MCP dentro da conexao, o dominio
   dentro da pagina publica): o recuo diz que ela depende da linha de cima. */
.st-compare__sub { padding-left: 30px; color: var(--text-muted); }

.st-compare td { color: var(--text-muted); text-align: center; }

.st-compare td:first-child { text-align: left; }

.st-compare__yes { color: var(--ok); display: inline-flex; }

.st-compare__yes svg { width: 15px; height: 15px; }

.st-compare__no { color: var(--text-ghost); }

@media (max-width: 768px) {
  /* No celular a tabela nao pode propagar a largura minima dela para o
     documento: com table-layout automatico o navegador usa a largura
     PREFERIDA do conteudo mesmo dentro de um container com overflow, e o
     Chrome alargava a viewport de layout de 390 para 434px (a PAGINA INTEIRA
     saia "zoomada pra fora", cards de preco inclusive). Fixa, com o respiro de
     padding e a primeira coluna em 32%, os quatro planos cabem em 390 sem
     rolagem; o wrapper continua rolando se um dia forem mais colunas. */
  .st-compare { table-layout: fixed; font-size: 13px; }

  .st-compare th,
  .st-compare td { padding: 10px 4px; }

  /* Com 32% na primeira coluna sobravam ~58px por plano e o cabecalho
     "Business" saia cortado em "Busines". Em 28%, com o nome menor e livre
     para quebrar, os quatro planos cabem inteiros em 390px. */
  .st-compare thead th { white-space: normal; overflow-wrap: anywhere; font-size: 12px; }

  .st-compare th:first-child { width: 28%; }

  /* O recuo da sub-linha come a coluna de 28%: no celular ele vira um risco
     de 12px, que ainda diferencia sem quebrar "Envio automático da vitrine"
     em cinco linhas. */
  .st-compare__sub { padding-left: 12px; }
}