/* Página /integracoes/checkout (vendas do checkout, ADR 014). Cabeçalho e rodapé do legal.css, base do compare.css;
   aqui só o que é desta página: logos das plataformas, o caminho da venda e os cartões das plataformas.
   Logos de terceiros: sempre em fundo branco (também no tema escuro), sem recolorir, só a altura fixa (a largura segue
   a proporção do arquivo) e com respiro. Shopify só em texto, com link (brand/assets/integracoes/FONTES.md). */

/* Faixa de logos do topo */
.ck-logos {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.ck-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  min-width: 132px;
  padding: 0 22px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--tc-border);
}
.ck-logo img {
  display: block;
  height: 26px;
  width: auto;
}
.ck-logo img.ck-logo__kiwify {
  height: 28px;
}
.ck-logo--text,
.ck-logo--text a {
  font: 600 18px/1 var(--tc-font-sans);
  color: #0a0f2c !important;
  text-decoration: none;
  letter-spacing: -0.01em;
}
.ck-logo--any {
  background: transparent;
  border-style: dashed;
  font: 500 14.5px/1.25 var(--tc-font-sans);
  color: var(--tc-fg-muted);
  text-align: center;
}
.ck-marks {
  font-size: 12.5px !important;
  color: var(--tc-fg-subtle) !important;
  margin-top: 12px !important;
}

/* O caminho da venda: cinco paradas ligadas por um fio (vertical no celular) */
.ck-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
  counter-reset: ck;
}
.ck-flow::before {
  content: '';
  position: absolute;
  /* do centro da primeira parada ao centro da última (5 colunas, 16px de vão, círculo de 50px) */
  left: 25px;
  right: calc((100% - 64px) / 5 - 25px);
  top: 23px;
  height: 4px;
  border-radius: 2px;
  background: var(--tc-primary);
}
.ck-flow li {
  position: relative;
  counter-increment: ck;
}
.ck-flow li::before {
  content: counter(ck);
  position: relative;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--tc-surface);
  border: 4px solid var(--tc-primary);
  font: 600 18px/1 var(--tc-font-mono);
  color: var(--tc-fg);
  margin-bottom: 18px;
}
.ck-flow li.ck-flow__sale::before {
  background: var(--tc-accent);
  border-color: var(--tc-accent);
  color: #0a0f2c;
}
.sp .ck-flow h3 {
  font-size: 17px;
  margin-bottom: 6px;
}
.ck-flow p {
  font-size: 14.5px;
}

/* Dois caminhos até o checkout */
.ck-paths .sp-card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ck-paths .sp-card p + p {
  margin-top: 10px;
}
.ck-route {
  font: 500 13px/1.4 var(--tc-font-mono);
  color: var(--tc-primary-text) !important;
  margin-bottom: 12px !important;
}

/* Cartões das plataformas */
.ck-platforms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.ck-platform {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  border: 1px solid var(--tc-border);
  border-radius: var(--tc-radius-xl);
  background: var(--tc-surface);
}
.ck-platform .ck-logo {
  align-self: flex-start;
  min-width: 0;
  height: 56px;
}
.ck-platform dl {
  margin: 0;
  display: grid;
  gap: 8px;
  font-size: 14.5px;
}
.ck-platform dt {
  font: 600 12px/1.3 var(--tc-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tc-fg-subtle);
}
.ck-platform dd {
  margin: 2px 0 0;
  color: var(--tc-fg-muted);
  line-height: 1.5;
}
.ck-platform .sp-more {
  margin-top: auto;
  font-weight: 600;
}
.ck-platform--any {
  border-style: dashed;
}

@media (max-width: 900px) {
  .ck-flow {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  /* No celular, o fio vai de uma parada à seguinte (termina na última, qualquer que seja a altura do texto). */
  .ck-flow::before {
    display: none;
  }
  .ck-flow li:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 23px;
    top: 50px;
    bottom: -22px;
    width: 4px;
    background: var(--tc-primary);
  }
  .ck-flow li {
    padding-left: 70px;
    min-height: 50px;
  }
  .ck-flow li::before {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
  }
  .ck-platforms {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 480px) {
  .ck-logos {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .ck-logo {
    min-width: 0;
    padding: 0 14px;
  }
  .ck-logo img {
    height: 22px;
  }
  .ck-logo img.ck-logo__kiwify {
    height: 24px;
  }
}