/* ==========================================================================
   CHECKOUT MOTIONFLEX
   Layout de checkout em 3 etapas, coluna única e centralizada.
   ========================================================================== */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* ---- Cor da marca ----------------------------------------------------
     Está no laranja da loja para o cliente não sentir troca de site ao sair
     da página do produto. Para usar o azul do modelo, troque estas duas:
       --marca: #3b82f6;  --marca-escura: #2563eb;
     ---------------------------------------------------------------------- */
  --marca: #ee4d2d;
  --marca-escura: #d73211;
  --marca-clara: #fff4f1;

  --texto: #1f2937;
  --texto-2: #6b7280;
  --texto-3: #9aa3af;
  --placeholder: #a8b3c2;
  --borda: #dfe3e8;
  --borda-forte: #cbd2da;
  --fundo: #ffffff;
  --fundo-2: #f6f7f9;
  --verde: #16a34a;
  --verde-bg: #ecfdf3;
  --vermelho: #dc2626;
  --vermelho-bg: #fef2f2;
  --amarelo-bg: #fffbeb;
  --amarelo-borda: #fde68a;
  --r: 6px;
  --r-lg: 8px;
  --largura: 520px;
}

html { font-size: 16px; -webkit-text-size-adjust: 100%; }

body.ck {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  line-height: 1.5;
  min-height: 100vh;
  padding-bottom: 82px;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.ck-container { max-width: var(--largura); margin: 0 auto; padding: 0 14px; }

/* ========== Logo ========== */

.ck-topo { display: flex; justify-content: center; padding: 14px; }

/* A arte da logo é branca com fundo transparente: em fundo branco ela some.
   Por isso o disco colorido fica no link (.ck-topo__badge) e o filtro só na
   imagem — filtro aplicado no mesmo elemento clarearia o fundo junto. */
.ck-topo__badge {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--marca);
  display: grid;
  place-items: center;
  padding: 6px;
  flex: 0 0 auto;
}

.ck-topo__logo {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

/* ========== Faixa de confiança ========== */

.ck-faixa {
  background: var(--marca);
  color: #fff;
  text-align: center;
  padding: 7px 14px;
}
.ck-faixa p { font-size: 0.76rem; font-weight: 600; line-height: 1.45; }

/* ========== Banner ========== */

/* Fundo grafite de propósito: a faixa acima já é laranja, e duas faixas
   laranjas coladas viram um bloco só. O escuro separa e faz a foto e o
   "GRÁTIS" saltarem. */
.ck-banner {
  background:
    radial-gradient(120% 140% at 100% 0%, #37414f 0%, transparent 55%),
    linear-gradient(135deg, #253040 0%, #171d28 100%);
  overflow: hidden;
  position: relative;
}

/* Círculos de luz no canto direito, atrás do texto */
.ck-banner::before,
.ck-banner::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
.ck-banner::before {
  width: 190px;
  height: 190px;
  right: -62px;
  top: -78px;
  background: rgba(238, 77, 45, .22);
}
.ck-banner::after {
  width: 130px;
  height: 130px;
  right: 26px;
  bottom: -76px;
  background: rgba(255, 255, 255, .045);
}

.ck-banner__inner {
  position: relative;
  z-index: 1;
  max-width: var(--largura);
  margin: 0 auto;
  padding: 15px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.ck-banner__foto {
  width: 41%;
  max-width: 178px;
  aspect-ratio: 4 / 3;
  flex: 0 0 auto;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, .28);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
}
.ck-banner__foto img { width: 100%; height: 100%; object-fit: cover; }

.ck-banner__texto { min-width: 0; color: #fff; }

.ck-banner__tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--marca);
  border-radius: 20px;
  padding: 4px 9px;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .7px;
  line-height: 1;
}
.ck-banner__tag svg { width: 11px; height: 11px; }

.ck-banner__titulo {
  font-size: clamp(1.3rem, 7vw, 1.72rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.6px;
  margin-top: 8px;
}
.ck-banner__titulo span {
  color: #ff8a5c;
  text-shadow: 0 0 22px rgba(255, 122, 71, .45);
}

.ck-banner__sub {
  font-size: .8rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .82);
  margin-top: 1px;
}

.ck-banner__nota {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 9px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 20px;
  padding: 4px 10px 4px 8px;
  font-size: .67rem;
  font-weight: 600;
  color: #fff;
}
.ck-banner__nota svg { width: 11px; height: 11px; color: #4ade80; flex: 0 0 auto; }

/* ========== Resumo retrátil ========== */

.ck-resumo-bar {
  width: 100%;
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: var(--r);
  margin-top: 14px;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-align: left;
}
.ck-resumo-bar__label { font-size: 0.83rem; font-weight: 600; color: var(--marca); }
.ck-resumo-bar__direita { display: flex; align-items: center; gap: 8px; }
.ck-resumo-bar__direita strong { font-size: 1rem; font-weight: 700; }
.ck-resumo-bar__seta { width: 18px; height: 18px; color: var(--texto-2); transition: transform .2s; }
.ck-resumo-bar[aria-expanded="true"] .ck-resumo-bar__seta { transform: rotate(180deg); }
.ck-resumo-bar[aria-expanded="true"] { border-radius: var(--r) var(--r) 0 0; border-bottom-color: transparent; }

.ck-resumo {
  border: 1px solid var(--borda);
  border-top: none;
  border-radius: 0 0 var(--r) var(--r);
  padding: 16px 14px;
}

.ck-itens { display: flex; flex-direction: column; gap: 13px; }

.ck-item { display: flex; gap: 11px; align-items: flex-start; }
.ck-item__img {
  width: 56px;
  height: 56px;
  border-radius: var(--r);
  border: 1px solid var(--borda);
  object-fit: cover;
  flex: 0 0 auto;
}
.ck-item__corpo { flex: 1; min-width: 0; }
.ck-item__nome { font-size: 0.81rem; font-weight: 600; line-height: 1.35; }
.ck-item__var { font-size: 0.72rem; color: var(--texto-2); margin-top: 2px; }
.ck-item__preco { font-size: 0.87rem; font-weight: 700; margin-top: 3px; }
.ck-item__de { font-size: 0.72rem; color: var(--texto-3); text-decoration: line-through; margin-left: 5px; font-weight: 500; }
.ck-item__remover { font-size: 0.72rem; color: var(--texto-2); text-decoration: underline; margin-top: 4px; }
.ck-item__remover:hover { color: var(--vermelho); }

.ck-qtd {
  display: flex;
  align-items: center;
  margin-top: 6px;
  width: max-content;
  border: 1px solid var(--borda);
  border-radius: var(--r);
  overflow: hidden;
}
.ck-qtd button {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--texto-2);
  background: var(--fundo-2);
}
.ck-qtd button:hover:not([disabled]) { color: var(--marca); }
.ck-qtd button[disabled] { opacity: .4; cursor: not-allowed; }
.ck-qtd span { width: 34px; text-align: center; font-size: 0.85rem; font-weight: 700; }

.ck-cupom { display: flex; gap: 8px; margin-top: 16px; }
.ck-cupom input {
  flex: 1;
  min-width: 0;
  height: 42px;
  padding: 0 12px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--r);
  font-size: 0.85rem;
  font-family: inherit;
  text-transform: uppercase;
}
.ck-cupom input:focus { outline: none; border-color: var(--marca); }
.ck-cupom button {
  height: 42px;
  padding: 0 16px;
  border-radius: var(--r);
  background: var(--fundo-2);
  border: 1px solid var(--borda-forte);
  font-size: 0.83rem;
  font-weight: 700;
}
.ck-cupom button:hover { background: #eef0f3; }

.ck-cupom-msg { display: block; font-size: 0.74rem; margin-top: 6px; min-height: 1em; }
.ck-cupom-msg--ok { color: var(--verde); font-weight: 600; }
.ck-cupom-msg--erro { color: var(--vermelho); }

.ck-totais { border-top: 1px solid var(--borda); margin-top: 14px; padding-top: 14px; }
.ck-total-linha {
  display: flex;
  justify-content: space-between;
  font-size: 0.84rem;
  color: var(--texto-2);
  margin-bottom: 7px;
}
.ck-total-linha--final {
  border-top: 1px solid var(--borda);
  margin: 11px 0 0;
  padding-top: 11px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--texto);
}
.ck-total-linha--final span:last-child { color: var(--marca); font-size: 1.15rem; }
.ck-verde { color: var(--verde); font-weight: 600; }
.ck-parcelamento { font-size: 0.74rem; color: var(--texto-2); text-align: right; margin-top: 3px; }

/* ========== Etapas ========== */

.ck-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 22px 4px 18px;
}

.ck-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  width: 92px;
  flex: 0 0 auto;
}

.ck-step__icone {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #eef0f3;
  color: var(--texto-3);
  display: grid;
  place-items: center;
  transition: background .2s, color .2s;
}
.ck-step__icone svg { width: 21px; height: 21px; }

.ck-step__label {
  font-size: 0.73rem;
  font-weight: 500;
  color: var(--texto-3);
  text-align: center;
  line-height: 1.25;
}

.ck-step--ativo .ck-step__icone,
.ck-step--feito .ck-step__icone { background: var(--marca); color: #fff; }
.ck-step--ativo .ck-step__label,
.ck-step--feito .ck-step__label { color: var(--texto); font-weight: 700; }
.ck-step--feito { cursor: pointer; }

.ck-step__linha {
  flex: 1;
  height: 3px;
  border-radius: 3px;
  background: #eef0f3;
  margin-top: 20px;
  max-width: 74px;
  transition: background .2s;
}
.ck-step__linha--feita { background: var(--marca); }

/* ========== Card ========== */

.ck-card {
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--r);
  padding: 16px 15px 18px;
}

.ck-card__topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.ck-card__titulo { font-size: 0.98rem; font-weight: 800; letter-spacing: .3px; }
.ck-card__contador { font-size: 0.72rem; font-weight: 700; color: var(--texto-2); white-space: nowrap; }
.ck-card__sub { font-size: 0.79rem; color: var(--marca); font-weight: 500; margin-top: 4px; margin-bottom: 18px; }

.ck-subtitulo { font-size: 0.85rem; font-weight: 700; margin: 20px 0 10px; }

/* ========== Campos ========== */

.ck-campo { margin-bottom: 15px; display: flex; flex-direction: column; }
.ck-campo--metade { max-width: 340px; }

.ck-campo label {
  font-size: 0.79rem;
  font-weight: 600;
  color: var(--texto);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.ck-opcional { color: var(--texto-3); font-weight: 500; }

.ck-info { width: 15px; height: 15px; color: var(--texto-3); flex: 0 0 auto; }
.ck-info svg { width: 100%; height: 100%; }
.ck-info:hover { color: var(--marca); }

.ck-campo input[type="text"],
.ck-campo input[type="email"],
.ck-campo input[type="tel"],
.ck-campo select {
  width: 100%;
  height: 46px;
  padding: 0 13px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--r);
  background: #fff;
  font-size: 0.92rem;
  font-family: inherit;
  color: var(--texto);
  transition: border-color .15s, box-shadow .15s;
}
.ck-campo select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
}
.ck-campo input::placeholder { color: var(--placeholder); }
.ck-campo input:focus,
.ck-campo select:focus {
  outline: none;
  border-color: var(--marca);
  box-shadow: 0 0 0 3px rgba(238, 77, 45, .12);
}

.ck-campo--invalido input,
.ck-campo--invalido select,
.ck-campo--invalido .ck-prefixo { border-color: var(--vermelho); }
.ck-campo--valido input { border-color: #b7e2c5; }

.ck-erro { font-size: 0.73rem; color: var(--vermelho); margin-top: 5px; display: none; }
.ck-campo--invalido .ck-erro { display: block; }

.ck-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ck-linha--cidade { grid-template-columns: 1fr 96px; }

/* Prefixo +55 */
.ck-prefixo {
  display: flex;
  align-items: center;
  border: 1px solid var(--borda-forte);
  border-radius: var(--r);
  background: #fff;
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.ck-prefixo:focus-within {
  border-color: var(--marca);
  box-shadow: 0 0 0 3px rgba(238, 77, 45, .12);
}
.ck-prefixo__ddi {
  padding: 0 11px;
  height: 44px;
  display: grid;
  place-items: center;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--texto-2);
  border-right: 1px solid var(--borda);
  background: var(--fundo-2);
  flex: 0 0 auto;
}
.ck-prefixo input[type="tel"] {
  border: none !important;
  border-radius: 0;
  height: 44px;
  box-shadow: none !important;
}

.ck-cep-status { font-size: 0.75rem; font-weight: 600; color: var(--texto-2); margin-top: 6px; }
.ck-cep-status--erro { color: var(--vermelho); }
.ck-cep-status--ok { color: var(--verde); }


/* Checkbox */
.ck-link { color: var(--marca); font-weight: 600; text-decoration: underline; }

/* ========== Opções (frete e pagamento) ========== */

.ck-opcoes { display: flex; flex-direction: column; gap: 9px; }

.ck-opcao, .ck-metodo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 13px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--r);
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ck-opcao--ativa, .ck-metodo--ativo { border-color: var(--marca); background: var(--marca-clara); }
.ck-opcao input, .ck-metodo input { width: 17px; height: 17px; accent-color: var(--marca); flex: 0 0 auto; cursor: pointer; }

.ck-opcao__corpo, .ck-metodo__corpo { flex: 1; min-width: 0; }
.ck-opcao__nome, .ck-metodo__nome { font-size: 0.87rem; font-weight: 700; display: block; }
.ck-opcao__desc, .ck-metodo__desc { font-size: 0.74rem; color: var(--texto-2); display: block; }
.ck-opcao__data { font-size: 0.74rem; color: var(--verde); font-weight: 600; display: block; }
.ck-opcao__preco { font-size: 0.87rem; font-weight: 700; white-space: nowrap; }
.ck-opcao__preco--gratis { color: var(--verde); text-transform: uppercase; font-size: 0.76rem; }

.ck-metodos { display: flex; flex-direction: column; gap: 9px; margin-bottom: 16px; }
.ck-metodo__icone { width: 24px; height: 24px; flex: 0 0 auto; color: var(--marca); }
.ck-metodo__icone svg { width: 100%; height: 100%; }
.ck-metodo__tag {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  background: var(--verde-bg);
  color: var(--verde);
  padding: 3px 7px;
  border-radius: 20px;
  white-space: nowrap;
}

.ck-metodo-painel {
  border: 1px solid var(--borda);
  border-radius: var(--r);
  padding: 15px 13px 1px;
  margin-bottom: 16px;
  animation: ck-fade .2s ease;
}
.ck-metodo-painel[data-painel="pix"],
.ck-metodo-painel[data-painel="boleto"] { padding-bottom: 15px; }

@keyframes ck-fade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.ck-pix-aviso {
  display: flex;
  gap: 10px;
  background: var(--verde-bg);
  border-radius: var(--r);
  padding: 12px;
  font-size: 0.81rem;
  color: #14532d;
}
.ck-pix-aviso svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--verde); margin-top: 2px; }


/* ========== Order bump ========== */

.ck-bump {
  border: 1px dashed var(--marca);
  background: var(--marca-clara);
  border-radius: var(--r);
  padding: 12px;
  margin-bottom: 12px;
  display: flex;
  gap: 11px;
  align-items: center;
  cursor: pointer;
}
.ck-bump--ativo { background: #ffe8e2; }
.ck-bump input { width: 18px; height: 18px; accent-color: var(--marca); flex: 0 0 auto; }
.ck-bump__img { width: 50px; height: 50px; border-radius: var(--r); object-fit: cover; flex: 0 0 auto; }
.ck-bump__corpo { flex: 1; min-width: 0; }
.ck-bump__nome { font-size: 0.82rem; font-weight: 700; display: block; line-height: 1.3; }
.ck-bump__desc { font-size: 0.72rem; color: var(--texto-2); display: block; }
.ck-bump__precos { display: flex; align-items: baseline; gap: 6px; margin-top: 3px; }
.ck-bump__de { font-size: 0.71rem; color: var(--texto-3); text-decoration: line-through; }
.ck-bump__por { font-size: 0.85rem; font-weight: 800; color: var(--marca); }

/* ========== Botões ========== */

.ck-btn {
  width: 100%;
  height: 52px;
  border-radius: var(--r);
  font-size: 0.97rem;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  transition: filter .15s, transform .08s;
}
.ck-btn:active { transform: scale(.995); }

.ck-btn--principal { background: var(--marca); color: #fff; margin-top: 4px; }
.ck-btn--principal:hover { background: var(--marca-escura); }

.ck-btn--finalizar {
  background: var(--verde);
  color: #fff;
  height: 56px;
}
.ck-btn--finalizar:hover { filter: brightness(1.07); }
.ck-btn__valor { font-size: 0.75rem; font-weight: 600; opacity: .92; }
.ck-btn__valor:empty { display: none; }

.ck-btn--texto {
  background: none;
  color: var(--texto-2);
  height: 42px;
  font-size: 0.82rem;
  font-weight: 600;
  margin-top: 6px;
}
.ck-btn--texto:hover { color: var(--texto); }

.ck-btn[disabled] { opacity: .6; cursor: not-allowed; filter: none; }

.ck-btn--carregando { pointer-events: none; }
.ck-btn--carregando .ck-btn__texto::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 9px;
  vertical-align: -2px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ck-girar .7s linear infinite;
}
@keyframes ck-girar { to { transform: rotate(360deg); } }

/* ========== Alerta e selos ========== */

.ck-alerta {
  background: var(--vermelho-bg);
  border: 1px solid #fbcfcf;
  color: #991b1b;
  border-radius: var(--r);
  padding: 11px 13px;
  font-size: 0.81rem;
  margin-bottom: 12px;
}

.ck-selo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.71rem;
  color: var(--texto-2);
  margin-top: 11px;
  text-align: center;
}
.ck-selo svg { width: 14px; height: 14px; flex: 0 0 auto; }

.ck-selos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 20px 0 14px;
}
.ck-selo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  font-size: 0.66rem;
  color: var(--texto-2);
  line-height: 1.3;
}
.ck-selo-item svg { width: 24px; height: 24px; color: var(--texto-3); }
.ck-selo-item strong { color: var(--texto); font-weight: 700; }


/* Dica do ícone de informação */
.ck-dica {
  position: fixed;
  z-index: 90;
  max-width: 250px;
  background: #111827;
  color: #fff;
  font-size: 0.73rem;
  line-height: 1.4;
  padding: 9px 11px;
  border-radius: var(--r);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}

/* ========== Barra fixa ========== */

.ck-barra-fixa {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  background: #fff;
  border-top: 1px solid var(--borda);
  box-shadow: 0 -2px 12px rgba(16, 24, 40, .07);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: var(--largura);
  margin: 0 auto;
}
.ck-barra-fixa__info { display: flex; flex-direction: column; line-height: 1.2; }
.ck-barra-fixa__info span { font-size: 0.67rem; color: var(--texto-2); }
.ck-barra-fixa__info strong { font-size: 1.02rem; color: var(--marca); }
.ck-barra-fixa__btn {
  flex: 1;
  height: 46px;
  border-radius: var(--r);
  background: var(--marca);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
}
.ck-barra-fixa__btn:hover { background: var(--marca-escura); }
.ck-barra-fixa__btn--finalizar { background: var(--verde); }
.ck-barra-fixa__btn--finalizar:hover { filter: brightness(1.07); }

/* ========== Rodapé ========== */

.ck-rodape {
  text-align: center;
  padding: 20px 14px 12px;
  font-size: 0.72rem;
  color: var(--texto-3);
  line-height: 1.7;
}
.ck-rodape a { color: var(--texto-2); text-decoration: underline; }

/* ==========================================================================
   PÁGINA DE CONFIRMAÇÃO
   ========================================================================== */

.ck-sucesso { max-width: var(--largura); margin: 0 auto; padding: 14px; }

.ck-sucesso__topo {
  border: 1px solid var(--borda);
  border-radius: var(--r);
  padding: 26px 18px;
  text-align: center;
  margin-bottom: 14px;
}
.ck-sucesso__icone {
  width: 60px;
  height: 60px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--verde-bg);
  color: var(--verde);
  display: grid;
  place-items: center;
}
.ck-sucesso__icone svg { width: 30px; height: 30px; }
.ck-sucesso__icone--pix { background: var(--marca-clara); color: var(--marca); }
.ck-sucesso__titulo { font-size: 1.2rem; font-weight: 800; margin-bottom: 6px; }
.ck-sucesso__texto { font-size: 0.86rem; color: var(--texto-2); }
.ck-sucesso__pedido {
  display: inline-block;
  margin-top: 14px;
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.79rem;
  font-weight: 700;
  letter-spacing: .4px;
}

.ck-pix-box {
  border: 1px solid var(--borda);
  border-radius: var(--r);
  padding: 20px 16px;
  margin-bottom: 14px;
  text-align: center;
}
.ck-pix-box__valor { font-size: 1.55rem; font-weight: 800; color: var(--marca); }
.ck-pix-box__prazo { font-size: 0.79rem; color: var(--texto-2); margin-bottom: 16px; }
.ck-pix-box__prazo strong { color: var(--vermelho); font-variant-numeric: tabular-nums; }
.ck-pix-box__qr {
  width: 214px;
  height: 214px;
  margin: 0 auto 16px;
  border: 1px solid var(--borda);
  border-radius: var(--r);
  padding: 8px;
  background: #fff;
  display: grid;
  place-items: center;
}
.ck-pix-box__qr img { width: 100%; height: 100%; object-fit: contain; }
.ck-pix-box__qr-erro { font-size: 0.76rem; color: var(--texto-2); padding: 12px; }

.ck-pix-codigo {
  width: 100%;
  font-family: 'SFMono-Regular', Consolas, monospace;
  font-size: 0.67rem;
  color: var(--texto-2);
  background: var(--fundo-2);
  border: 1px solid var(--borda);
  border-radius: var(--r);
  padding: 10px;
  resize: none;
  height: 74px;
  word-break: break-all;
  margin-bottom: 10px;
}

.ck-btn--copiar { background: var(--marca); color: #fff; }
.ck-btn--copiar:hover { background: var(--marca-escura); }
.ck-btn--copiado { background: var(--verde) !important; }

.ck-passos-pix {
  list-style: none;
  counter-reset: passo;
  text-align: left;
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ck-passos-pix li { counter-increment: passo; display: flex; gap: 10px; font-size: 0.81rem; color: var(--texto-2); }
.ck-passos-pix li::before {
  content: counter(passo);
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--marca-clara);
  color: var(--marca);
  font-size: .7rem;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.ck-detalhes {
  border: 1px solid var(--borda);
  border-radius: var(--r);
  padding: 18px 16px;
  margin-bottom: 14px;
}
.ck-detalhes h2 { font-size: 0.93rem; font-weight: 800; margin-bottom: 12px; letter-spacing: .3px; }
.ck-detalhes__linha {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 0.81rem;
  padding: 7px 0;
  border-bottom: 1px dashed var(--borda);
}
.ck-detalhes__linha:last-child { border-bottom: none; }
.ck-detalhes__linha span:first-child { color: var(--texto-2); flex: 0 0 auto; }
.ck-detalhes__linha span:last-child { text-align: right; font-weight: 600; }

.ck-acoes { display: flex; flex-direction: column; gap: 9px; }
.ck-btn--whatsapp { background: #25d366; color: #fff; }
.ck-btn--secundario { background: var(--fundo-2); border: 1px solid var(--borda-forte); color: var(--texto); }

/* ========== Telas maiores ========== */

@media (min-width: 760px) {
  body.ck { background: var(--fundo-2); padding-bottom: 0; }

  .ck-topo { background: #fff; }

  .ck-container {
    background: #fff;
    padding: 0 26px 26px;
    border-radius: 0 0 10px 10px;
  }
  .ck-banner__inner { padding: 20px 26px; }
  .ck-banner__foto { max-width: 200px; }
  .ck-card { padding: 20px 20px 22px; }
  .ck-barra-fixa { display: none; }
  .ck-rodape { padding-bottom: 30px; }
}

@media (max-width: 360px) {
  .ck-step { width: 76px; }
  .ck-step__label { font-size: .68rem; }
  .ck-selos { grid-template-columns: repeat(2, 1fr); gap: 14px 8px; }
}

/* Aviso de aceite dos termos (substituiu a caixinha de marcar) */
.ck-aceite {
  font-size: 0.71rem;
  color: var(--texto-2);
  text-align: center;
  margin-top: 6px;
  line-height: 1.5;
}
.ck-aceite .ck-link { color: var(--texto-2); }
.ck-aceite .ck-link:hover { color: var(--marca); }

/* ========== Selo Pix ==========
   Ocupou o lugar das bandeiras de cartao. Anunciar Visa/Mastercard num
   checkout que so aceita Pix faz o cliente chegar no fim esperando uma
   opcao que nao existe. */




/* O atributo hidden precisa vencer qualquer display definido depois dele.
   Sem isto, `.ck-total-linha { display: flex }` fazia a linha "Desconto
   - R$ 0,00" aparecer em todo pedido, mesmo sem cupom. */
[hidden] { display: none !important; }