/* ==========================================================================
   VERCARO — Checkout • COMPONENTES EXTRAS (conversão)
   Cronômetro, prova social, selos de confiança.
   Funciona nos dois temas (atual e premium). Só aparece se o elemento
   for renderizado pelo index.php (controlado pelo config-checkout.json).
   Nada aqui altera o ck.css/ck.js originais.
   ========================================================================== */

/* ---------- Cronômetro regressivo (escassez) ---------- */
.ck-cronometro{
  display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  background:var(--ck-crono-bg,#DC2626);color:#fff;
  padding:10px 16px;font-size:14px;font-weight:700;text-align:center;line-height:1.3;
}
.ck-cronometro__texto{opacity:.95}
.ck-cronometro__relogio{
  display:inline-flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums;
}
.ck-cronometro__bloco{
  background:rgba(0,0,0,.22);border-radius:6px;padding:4px 8px;min-width:34px;
  font-size:16px;font-weight:800;letter-spacing:.5px;
}
.ck-cronometro__sep{font-size:16px;font-weight:800;opacity:.7}
@media (max-width:520px){
  .ck-cronometro{font-size:13px;padding:9px 12px}
  .ck-cronometro__bloco{font-size:15px;min-width:30px;padding:3px 6px}
}

/* ---------- Selos de confiança ---------- */
.ck-selos{
  display:flex;align-items:stretch;justify-content:center;gap:12px;flex-wrap:wrap;
  padding:18px 20px;max-width:1200px;margin:0 auto;
}
.ck-selo{
  display:flex;align-items:center;gap:10px;
  background:#fff;border:1px solid var(--borda,#E2E8F0);border-radius:12px;
  padding:12px 16px;flex:1 1 200px;max-width:280px;
}
.ck-selo__icone{
  width:38px;height:38px;flex:none;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--cor-botao,#0D87EE) 12%, #fff);
  color:var(--cor-botao,#0D87EE);
}
.ck-selo__icone svg{width:22px;height:22px}
.ck-selo__txt b{display:block;font-size:13px;color:var(--texto,#030712);line-height:1.25}
.ck-selo__txt span{display:block;font-size:11px;color:var(--apagado,#6B7280);line-height:1.3;margin-top:2px}
@media (max-width:640px){
  .ck-selos{gap:8px;padding:14px}
  .ck-selo{flex:1 1 100%;max-width:none}
}

/* ---------- Prova social (notificação flutuante) ---------- */
.ck-prova{
  position:fixed;left:16px;bottom:16px;z-index:60;
  display:flex;align-items:center;gap:12px;
  background:#fff;border:1px solid var(--borda,#E2E8F0);border-radius:14px;
  box-shadow:0 12px 34px -14px rgba(13,18,39,.4);
  padding:12px 16px 12px 12px;max-width:330px;
  transform:translateY(140%);opacity:0;transition:transform .45s cubic-bezier(.2,.8,.2,1),opacity .45s;
  pointer-events:none;
}
.ck-prova.is-visivel{transform:translateY(0);opacity:1}
.ck-prova__avatar{
  width:42px;height:42px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:20px;
  background:color-mix(in srgb, var(--cor-botao,#0D87EE) 14%, #fff);
}
.ck-prova__txt b{display:block;font-size:13px;color:var(--texto,#030712);line-height:1.3}
.ck-prova__txt span{display:block;font-size:11px;color:var(--apagado,#6B7280);margin-top:2px}
.ck-prova__selo{
  display:inline-flex;align-items:center;gap:3px;font-size:10px;color:#13BF8C;font-weight:700;margin-top:3px;
}
@media (max-width:520px){
  .ck-prova{left:10px;right:10px;bottom:10px;max-width:none}
}

/* ---------- Toques premium nos extras ---------- */
body.tema-premium .ck-selo{
  border-color:rgba(13,18,39,.06);
  box-shadow:0 1px 2px rgba(13,18,39,.04),0 10px 24px -18px rgba(13,18,39,.28);
  transition:transform .2s ease,box-shadow .2s ease;
}
body.tema-premium .ck-selo:hover{transform:translateY(-2px)}
body.tema-premium .ck-cronometro{
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.12);
}

@media (prefers-reduced-motion: reduce){
  .ck-prova{transition:none}
}

/* ==========================================================================
   RESUMO RECOLHÍVEL (fechar/abrir a sacola)
   ========================================================================== */
.ck-resumo__titulo{display:flex;align-items:center;gap:8px}
.ck-resumo__label{flex:1}
.ck-resumo__total-header{font-weight:800;color:var(--texto,#111);font-size:16px;white-space:nowrap}
.ck-resumo__toggle{
  background:none;border:none;color:var(--apagado,#6B7280);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:8px;flex:none;transition:background .15s,transform .2s;
}
.ck-resumo__toggle:hover{background:rgba(0,0,0,.05)}
.ck-resumo__toggle svg{transition:transform .2s}
.ck-resumo__toggle.is-fechado svg{transform:rotate(-90deg)}

/* ==========================================================================
   ORDER BUMP (oferta extra na etapa de pagamento)
   ========================================================================== */
.ck-bump{margin-top:20px;display:flex;flex-direction:column;align-items:center;font-family:'Rubik',sans-serif}
/* etiqueta em cápsula branca, centralizada sobre o card */
.ck-bump__etiqueta{
  position:relative;z-index:1;margin-bottom:-11px;
  background:#fff;border:1px solid #f0e2c0;border-radius:999px;
  padding:5px 14px;font-size:12px;font-weight:800;color:#8a6d1a;
  box-shadow:0 4px 12px -6px rgba(0,0,0,.15);white-space:nowrap;
}
/* card creme com borda tracejada laranja */
.ck-bump__card{
  box-sizing:border-box;width:100%;background:#FFF8E1;border:1px dashed #F19100;border-radius:12px;
  padding:20px;font-size:13px;color:var(--texto,#2d2d2d);
}
@media (max-width:520px){ .ck-bump__card{padding:16px} }
/* produto: 2 colunas */
.ck-bump__produto{display:flex;align-items:center;gap:12px}
.ck-bump__foto{width:54px;height:54px;flex:none;object-fit:contain;border-radius:8px;background:#fff;border:1px solid #efe6c8}
.ck-bump__foto--vazia{display:flex;align-items:center;justify-content:center;font-size:24px}
.ck-bump__info{flex:1;min-width:0}
.ck-bump__nome{font-size:13px;font-weight:700;color:#2d2d2d;line-height:1.3;margin:0}
.ck-bump__precos{margin:5px 0 0;display:flex;align-items:baseline;gap:8px}
.ck-bump__de{font-size:12px;color:#9a8f70;text-decoration:line-through}
.ck-bump__por{font-size:17px;font-weight:800;color:#00AA00}
/* separador + oferta exclusiva + descrição */
.ck-bump__sep{border:none;border-top:1px solid #efe1bd;margin:14px 0}
.ck-bump__exclusiva{font-size:12px;font-weight:800;color:#2d2d2d;margin:0 0 4px}
.ck-bump__desc{font-size:12px;color:#6b6252;line-height:1.4;margin:0 0 14px;text-align:left}
/* faixa rosa (checkbox) */
.ck-bump__control{
  display:flex;align-items:center;gap:10px;width:100%;min-height:40px;box-sizing:border-box;
  padding:0 14px;background:#EC407A;border-radius:999px;cursor:pointer;
  color:#fff;font-size:13px;font-weight:700;user-select:none;transition:filter .15s;
}
.ck-bump__control:hover{filter:brightness(.97)}
.ck-bump__check{position:absolute;opacity:0;width:0;height:0}
.ck-bump__control-box{
  width:18px;height:18px;flex:none;border-radius:4px;background:#fff;border:2px solid #fff;
  position:relative;display:inline-block;
}
.ck-bump__check:checked + .ck-bump__control-box::after{
  content:"";position:absolute;left:4px;top:0;width:6px;height:11px;
  border:solid #EC407A;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);
}
.ck-bump__control-txt{flex:1}
/* rodapé */
.ck-bump__porque{margin:12px 0 0;font-size:11px;line-height:1.45;color:#6b6252}
.ck-bump__porque b{color:#2d2d2d;font-size:11px}
/* estado adicionado */
.ck-bump.is-adicionado .ck-bump__card{border-style:solid;background:#FFF3CD}

/* ==========================================================================
   SELOS DE CONFIANÇA (Pagamento seguro / Garantia / Parcelamento)
   ========================================================================== */
.ck-selos-conf{background:#f7f8fa;border-top:1px solid var(--borda,#E2E8F0);padding:26px 0}
.ck-selos-conf__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ck-selo-conf{display:flex;align-items:flex-start;gap:12px}
.ck-selo-conf__icone{
  width:44px;height:44px;flex:none;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb, var(--cor-botao,#0D87EE) 12%, #fff);color:var(--cor-botao,#0D87EE);
}
.ck-selo-conf__txt b{display:block;font-size:14px;color:var(--texto,#111);margin-bottom:3px}
.ck-selo-conf__txt span{display:block;font-size:12px;color:var(--apagado,#6B7280);line-height:1.45}
@media (max-width:1023px){
  .ck-selos-conf__grid{grid-template-columns:1fr;gap:16px}
  .ck-selos-conf{padding:20px 0}
}

/* ==========================================================================
   FRETE — logos das transportadoras (badges) e opções
   ========================================================================== */
.ck-frete{display:flex;flex-direction:column;gap:10px}
.ck-frete-logo{
  display:inline-block;vertical-align:middle;margin-left:6px;
  font-size:10px;font-weight:800;letter-spacing:.4px;padding:2px 6px;border-radius:4px;line-height:1.4;
}
.ck-frete-logo--correios{background:#003399;color:#FFD200}
.ck-frete-logo--sedex{background:#FFD200;color:#003399}
.ck-frete-logo--full{background:#00A650;color:#fff}
.ck-frete__preco--pago{color:var(--texto,#111) !important;font-weight:700}

/* ==========================================================================
   INDICADOR DE ETAPAS 1-2-3
   Escondido por padrão (Mercado Pago). Aparece nos modelos Produtgy/Belevita.
   ========================================================================== */
.ck-passos{display:none}
body.modelo-produtgy .ck-passos,
body.modelo-belevita .ck-passos{
  display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:nowrap;
  max-width:760px;margin:0 auto 8px;padding:18px 12px 4px;
}
.ck-passo{display:flex;align-items:center;gap:8px;flex:none}
.ck-passo__num{
  width:30px;height:30px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;background:#e5e9f0;color:#8a95a5;
  border:2px solid #e5e9f0;transition:.2s;
}
.ck-passo__nome{font-size:13px;font-weight:700;color:#8a95a5;white-space:nowrap;transition:.2s}
.ck-passo__linha{flex:1 1 auto;height:2px;background:#e5e9f0;min-width:16px;max-width:60px}
/* Etapa ativa */
.ck-passo.is-ativo .ck-passo__num{background:var(--cor-botao,#0D87EE);color:#fff;border-color:var(--cor-botao,#0D87EE)}
.ck-passo.is-ativo .ck-passo__nome{color:var(--texto,#111)}
/* Etapa concluída */
.ck-passo.is-concluido .ck-passo__num{background:#fff;color:var(--cor-botao,#0D87EE);border-color:var(--cor-botao,#0D87EE)}
.ck-passo.is-concluido .ck-passo__nome{color:var(--cor-botao,#0D87EE)}
/* Passos clicáveis (navegação entre etapas já alcançadas) */
.ck-passo.is-clicavel{cursor:pointer}
.ck-passo.is-clicavel:hover .ck-passo__num{filter:brightness(.95);transform:scale(1.04)}
/* Mobile: mantém os nomes das 3 etapas, só menores */
@media (max-width:640px){
  body.modelo-produtgy .ck-passos,
  body.modelo-belevita .ck-passos{gap:4px;padding:14px 6px 2px}
  .ck-passo{gap:5px}
  .ck-passo__num{width:26px;height:26px;font-size:13px}
  .ck-passo__nome{font-size:11px}
  .ck-passo__linha{min-width:10px;max-width:24px}
}
@media (max-width:400px){
  .ck-passo__nome{font-size:10px}
  .ck-passo__linha{min-width:6px}
}

/* Logos de frete como imagem (Correios/SEDEX reais) */
.ck-frete-img{height:16px;width:auto;vertical-align:middle;margin-left:6px;display:inline-block}
.ck-frete-img--full{height:20px}

/* Logos de frete MAIORES e em linha própria (override) */
.ck-frete-img{display:block !important;height:30px !important;width:auto;margin:7px 0 3px !important;vertical-align:middle}
.ck-frete-img--full{height:34px !important}
@media (max-width:640px){
  .ck-frete-img{height:26px !important}
  .ck-frete-img--full{height:30px !important}
}

/* ==========================================================================
   STEP: ícones FontAwesome no tema Produtgy (troca os números 1/2/3)
   ========================================================================== */
/* só ícone + nome (sem número) nas etapas */
.ck-passo__n{display:none}
.ck-passo__ic{display:inline-block;font-size:14px;line-height:1}

/* ==========================================================================
   PEDIDO DA LOJA: stepper + lixeira por item (no resumo do checkout)
   ========================================================================== */
.ck-produto--pedido{align-items:flex-start}
.ck-pedido-acoes{display:flex;align-items:center;gap:18px;margin-top:8px}
.ck-stepper--pedido{display:inline-flex;align-items:center;gap:2px}
.ck-stepper--pedido button{
  width:28px;height:28px;border:1px solid var(--borda,#E2E8F0);background:#fff;border-radius:6px;
  font-size:16px;line-height:1;color:var(--texto,#111);cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.ck-stepper--pedido button:hover{background:#f4f6fa}
.ck-stepper--pedido span{min-width:26px;text-align:center;font-size:13px;font-weight:700}
.ck-pedido-lixeira{
  background:none;border:none;cursor:pointer;color:#c0392b;padding:4px;border-radius:6px;
  display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;
}
.ck-pedido-lixeira:hover{background:rgba(220,53,45,.1)}
.ck-pedido-vazio{color:var(--apagado,#6B7280);font-size:14px;text-align:center;padding:16px 0}

/* ==========================================================================
   CHECK VERDE na etapa concluída (temas Produtgy/Belevita/Evolution)
   ========================================================================== */
body:not(.modelo-mercado_pago) .ck-etapa.is-concluida .ck-etapa__contador{display:none}
body:not(.modelo-mercado_pago) .ck-etapa.is-concluida .ck-etapa__topo::after{
  content:"\2714";margin-left:auto;flex:none;
  width:22px;height:22px;border-radius:50%;background:#12BF8C;color:#fff;
  font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;
}

/* ==========================================================================
   STEP vertical: ícone em cima, nome embaixo (Informações pessoais/Entrega/Pagamento)
   ========================================================================== */
.ck-passos{align-items:flex-start !important}
.ck-passo{flex-direction:column;align-items:center;text-align:center;gap:7px;width:96px}
.ck-passo__nome{font-size:12px;line-height:1.25;display:block !important}
.ck-passo__linha{margin-top:16px;min-width:12px;max-width:48px}
@media (max-width:640px){
  .ck-passo{width:78px;gap:5px}
  .ck-passo__nome{font-size:10.5px}
  .ck-passo__linha{margin-top:13px;min-width:8px;max-width:30px}
}

/* ==========================================================================
   BARRA DE TOPO (promoções) — azul com destaques amarelos
   ========================================================================== */
.ck-topbar{background:#1877E8;line-height:0;text-align:center}
/* imagem limitada a um container central (~54px no desktop); azul preenche as laterais */
.ck-topbar img{display:inline-block;width:100%;max-width:1050px;height:auto;vertical-align:top;object-fit:contain}

/* ==========================================================================
   RESUMO DO PEDIDO — redesign (produtos em cima, quadro de valores embaixo)
   ========================================================================== */
/* FECHADO = cápsula compacta (~48px); ABERTO = card normal
   (!important só nas props de layout, para vencer o border-radius/padding dos temas) */
.ck-resumo{box-sizing:border-box;background:#fff;border:1px solid #eef0f3;border-radius:999px !important;box-shadow:none !important;padding:8px 16px !important}
.ck-resumo.is-aberto{border-radius:16px !important;box-shadow:0 1px 2px rgba(16,24,40,.04),0 10px 26px -20px rgba(16,24,40,.18) !important;padding:16px !important}
.ck-resumo__titulo{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:800;color:var(--texto,#111)}
.ck-resumo__label{flex:1}
.ck-resumo__label [data-resumo-count]{color:var(--apagado,#6B7280);font-weight:600}
.ck-resumo__corpo{margin-top:14px}

/* itens */
.ck-resumo__itens{display:flex;flex-direction:column;gap:14px}
.ck-item{display:flex;gap:12px;align-items:flex-start}
.ck-item__foto{width:58px;height:58px;flex:none;object-fit:contain;border:1px solid #eee;border-radius:12px;background:#fff}
.ck-item__info{flex:1;min-width:0}
.ck-item__nome{margin:0;font-size:13.5px;font-weight:600;color:var(--texto,#1a1a1a);line-height:1.35}
.ck-item__variante{margin:2px 0 0;font-size:12px;color:var(--apagado,#6B7280)}
.ck-item__preco{margin:4px 0 0;font-size:14px;font-weight:700;color:var(--texto,#1a1a1a)}
.ck-item__controls{display:flex;align-items:center;gap:12px;margin-top:8px}

/* cápsula de quantidade − / n / + */
.ck-qtd{display:inline-flex;align-items:center;height:38px;width:132px;border:1px solid #e2e6ec;border-radius:999px;background:#fff;overflow:hidden}
.ck-qtd__btn{flex:1;height:100%;border:none;background:none;cursor:pointer;font-size:18px;line-height:1;color:var(--texto,#333);display:flex;align-items:center;justify-content:center;transition:background .15s}
.ck-qtd__btn:hover:not(:disabled){background:#f4f6fa}
.ck-qtd__btn:disabled{opacity:.35;cursor:not-allowed}
.ck-qtd__btn:focus-visible{outline:2px solid var(--cor-botao,#0D87EE);outline-offset:-2px}
.ck-qtd__n{flex:1.2;text-align:center;font-size:14px;font-weight:700;color:var(--texto,#1a1a1a)}
/* lixeira separada */
.ck-lixo{width:38px;height:38px;flex:none;border:1px solid #f0d8d8;background:#fff;border-radius:10px;color:#d1352b;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}
.ck-lixo:hover{background:#fdeeee;border-color:#e6b7b3}
.ck-lixo:focus-visible{outline:2px solid #d1352b;outline-offset:1px}
.ck-resumo__vazio{color:var(--apagado,#6B7280);text-align:center;padding:18px 0;font-size:14px}

/* quadro inferior de valores */
.ck-resumo__valores{background:#F8F8F8;border:1px solid #EAEAEA;border-radius:12px;padding:15px;margin-top:16px}
.ck-resumo__valores .ck-resumo__linha{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:14px;color:#333}
.ck-resumo__valores .ck-resumo__linha span,
.ck-resumo__valores .ck-resumo__linha b{color:#333}
.ck-resumo__valores .ck-resumo__total{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding-top:10px;border-top:1px solid #EAEAEA}
.ck-resumo__valores .ck-resumo__total span{font-size:15px;font-weight:800;color:#03a13d}
.ck-resumo__valores .ck-resumo__total b{font-size:21px;font-weight:800;color:#03a13d}
.ck-resumo__valores .ck-resumo__parcela{margin:6px 0 0;text-align:right;font-size:12px;color:var(--apagado,#6B7280)}

/* Desconto PIX em preto (não verde/azul) no quadro de valores */
.ck-resumo__valores .ck-resumo__linha--desconto span,
.ck-resumo__valores .ck-resumo__linha--desconto b{color:#333 !important}

/* Títulos das etapas: Rubik 17px/700, #2d2d2d, line-height 20px + bolinha numerada */
.ck-etapa__titulo{
  font-family:'Rubik',-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif !important;
  font-size:17px !important;
  line-height:20px !important;
  font-weight:700 !important;
  color:#2d2d2d !important;
  display:flex;align-items:center;gap:6px;
}
.ck-etapa__num{
  width:21px;height:21px;flex:none;border-radius:50%;
  background:var(--cor-botao,#0D87EE);color:#fff;
  font-family:'Rubik',sans-serif;font-size:12px;font-weight:700;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
/* Etapas ainda não alcançadas ficam totalmente ocultas (sem espaço vazio) */
.ck-etapa--oculta{display:none !important}

/* ==========================================================================
   BOTÕES DE AVANÇO (Ir para entrega / Ir para pagamento)
   ========================================================================== */
.ck-btn[data-avancar]{
  font-family:'Rubik',-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  font-size:16px;font-weight:700;color:#fff;text-transform:uppercase;
  width:100%;min-height:52px;height:52px;
}

/* ==========================================================================
   FRETE — layout compacto (print 1): radio | nome/prazo+logo | preço
   ========================================================================== */
.ck-frete__rotulo{font-family:'Rubik',sans-serif;font-size:16px;font-weight:700;color:#2d2d2d;margin:20px 0 12px}
.ck-frete{display:flex;flex-direction:column;gap:20px}
.ck-frete__opcao{
  display:grid !important;
  grid-template-columns:19px minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  min-height:72px;
  padding:0 16px !important;
  border:1px solid #e2e6ec !important;
  border-radius:8px !important;
  background:#fff !important;
  box-shadow:none !important;
  font-family:'Rubik',sans-serif;
  cursor:pointer;
}
.ck-frete__opcao.is-ativa{border-color:var(--cor-botao,#0D87EE) !important;background:#F4F5F7 !important}
/* radio azul (contorno mesmo desmarcado, bolinha quando marcado) */
.ck-frete__opcao .ck-radio{
  width:19px;height:19px;flex:none;border-radius:50%;background:#fff;
  border:2px solid var(--cor-botao,#0D87EE);position:relative;box-shadow:none;
}
.ck-frete__opcao.is-ativa .ck-radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--cor-botao,#0D87EE)}
/* centro */
.ck-frete__txt{min-width:0;display:flex;flex-direction:column;gap:3px}
.ck-frete__nome{font-size:14px;font-weight:700;color:#2d2d2d;line-height:1.2}
.ck-frete__linha{display:flex;align-items:center;gap:6px;min-width:0}
.ck-frete__prazo{font-size:12px;color:#6B7280;line-height:1.2}
/* preço */
.ck-frete__preco{font-size:14px !important;font-weight:700 !important;color:#2d2d2d !important;white-space:nowrap;text-align:right}
.ck-frete__preco--pago{color:#2d2d2d !important}
/* logos compactas na mesma linha do prazo */
.ck-frete__linha .ck-frete-img{display:inline-block !important;width:auto !important;margin:0 !important;object-fit:contain !important;vertical-align:middle;flex-shrink:0}
.ck-frete__linha .ck-frete-img--correios{width:56px !important;height:auto !important}
.ck-frete__linha .ck-frete-img--sedex{width:60px !important;height:auto !important}
.ck-frete__linha .ck-frete-img--full{width:42px !important;height:14px !important}

/* ==========================================================================
   CABEÇALHO COMPACTO DO RESUMO (print 1): total verde + chevron simples
   ========================================================================== */
.ck-resumo__titulo{display:flex !important;align-items:center;gap:10px;min-height:0;margin:0 !important}
.ck-resumo__label{flex:1;display:flex;flex-direction:column;gap:1px}
.ck-resumo__label-top{font-family:'Rubik',sans-serif;font-size:12px;font-weight:700;color:#2d2d2d;line-height:1.25}
.ck-resumo__label-top [data-resumo-count]{color:#6B7280;font-weight:600}
.ck-resumo__sub2{font-size:10px;color:#9aa1ab;line-height:1.25}
.ck-resumo__total-header{
  display:inline !important;font-family:'Rubik',sans-serif !important;
  font-size:14px !important;font-weight:700 !important;color:#00B84A !important;white-space:nowrap;
}
.ck-resumo__toggle{
  background:none !important;border:none !important;width:auto !important;height:auto !important;
  padding:0 !important;border-radius:0 !important;color:#6B7280;display:inline-flex;align-items:center;
}
.ck-resumo__toggle:hover{background:none !important}
.ck-resumo__toggle svg{width:14px !important;height:14px !important;transition:transform .2s}
.ck-resumo__toggle:not(.is-fechado) svg{transform:rotate(180deg)}
/* total do quadro de valores também no verde #00B84A */
.ck-resumo__valores .ck-resumo__total span,
.ck-resumo__valores .ck-resumo__total b{color:#00B84A !important}

/* ==========================================================================
   ERROS DE VALIDAÇÃO (mensagem abaixo + campo inválido)
   ========================================================================== */
.ck-input--erro{background:rgba(220,38,38,.05) !important}
.ck-erro{font-size:12px !important;margin-top:5px !important;color:var(--vermelho,#DC2626)}
/* grupo do celular (DDI + número) em estado de erro */
.ck-telefone:has(.ck-input--erro){border-color:var(--vermelho,#DC2626);background:rgba(220,38,38,.05)}

/* ==========================================================================
   TOTAL NO CABEÇALHO: aparece só com o resumo FECHADO (evita duplicar)
   ========================================================================== */
.ck-resumo.is-aberto .ck-resumo__total-header{display:none !important}
.ck-resumo.is-aberto .ck-resumo__sub2{display:none !important}

/* ==========================================================================
   ÍCONE PIX (marca recortada no símbolo)
   ========================================================================== */
.ck-forma__icone--pix{width:24px;height:24px;flex:none;position:relative;overflow:hidden;border-radius:4px;background:#fff}
.ck-pix-marca{position:absolute;width:86px;height:auto;left:-11px;top:-12px;max-width:none}

/* ==========================================================================
   TEMA 1 (ATUAL) do Mercado Pago = visual enxuto / original.
   Só vale para body.tema-atual (modelo Mercado Pago). O Tema 2 (Premium)
   mantém a faixa de topo, selos, bolinhas numeradas e sombras.
   ========================================================================== */
body.tema-atual .ck-topbar{display:none}
body.tema-atual .ck-selos-conf{display:none}
body.tema-atual .ck-etapa__num{display:none}
body.tema-atual .ck-etapa__titulo{gap:0}
body.tema-atual .ck-etapa,
body.tema-atual .ck-resumo.is-aberto{box-shadow:none}