/*
 * Versao:    VALOR-020
 * Versao:    CN-023
 * Data:      20/08/2026
 * Autor:     Arte nas Redes - artenasredes.com.br
 * Projeto:   Sites Simples CMS - Central de Negocios (PREMIUM)
 * Arquivo:   cn_checkout.css  (MOTOR - estilo do checkout)
 * Alteracao: o micro-cadastro (codigo, nome, endereco) e o botao que so
 *            acende quando os tres estao preenchidos.
 * Versao:    VALOR-015
 * Versao:    CN-009
 * Data:      18/08/2026
 * Autor:     Arte nas Redes - artenasredes.com.br
 * Projeto:   Sites Simples CMS - Central de Negocios (PREMIUM)
 * Arquivo:   cn_checkout.css  (MOTOR - estilo do checkout publico)
 * Alteracao: aviso de primeiro cadastro, botao de endereco salvo e a tela
 *            da confirmacao de WhatsApp. Anterior: VALOR-008.
 * Versao:    VALOR-008
 * Versao:    CN-002
 * Data:      18/08/2026
 * Autor:     Arte nas Redes - artenasredes.com.br
 * Projeto:   Sites Simples CMS - Central de Negocios (PREMIUM)
 * Arquivo:   cn_checkout.css  (MOTOR - estilo do checkout, face publica)
 *
 * Mobile-first (R-05). Prefixo cn-ck-.
 *
 * ESTE ARQUIVO ENTRA NO SITE DO CLIENTE, no meio do tema dele. Duas regras
 * que valem por isso:
 *   1. Variaveis PROPRIAS (--cn-*), nunca as --ca-* da Central de
 *      Atendimento: aquelas so existem nos paineis do operador. Aqui elas
 *      resolveriam para nada e o checkout sairia sem cor.
 *   2. Nenhum seletor de elemento solto (input, button, h3). O tema do
 *      cliente e dono da pagina; tudo aqui e escopado no prefixo para o
 *      checkout nao vazar estilo para o site nem receber estilo dele.
 *
 * A cor de ACAO e o verde do WhatsApp (#25D366). E cor de SINALIZACAO, fixa
 * por decisao (5.10 da CA) - nao entra em tema, nao vira variavel de cliente:
 * o botao que abre o WhatsApp e verde em qualquer site.
 */

.cn-ck {
  --cn-bg: #ffffff;
  --cn-surface: #f5f5f3;
  --cn-border: #e2e1db;
  --cn-border-forte: #c9c7be;
  --cn-text: #2b2b28;
  --cn-text2: #6b6a63;
  --cn-muted: #93918a;
  --cn-wa: #25D366;
  --cn-wa-escuro: #1da851;
  --cn-erro-bg: #fbeae7;
  --cn-erro-tx: #993c1d;
  --cn-ok-bg: #e1f5ee;
  --cn-ok-tx: #0f6e56;
  --cn-r: 10px;

  position: fixed;
  inset: 0;
  z-index: 99000;          /* acima da sidebar do carrinho e do float */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  color: var(--cn-text);
}
/* Toda regra com display precisa da variante [hidden] - display explicito
   VENCE o atributo. Custou um bug na Central de Atendimento (bug 5). */
.cn-ck[hidden] { display: none; }

.cn-ck-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); }

.cn-ck-box {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  background: var(--cn-bg);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,.25);
}

.cn-ck-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px 10px;
  border-bottom: 1px solid var(--cn-border);
}
.cn-ck-head h3 {
  margin: 0; font-size: 18px; font-weight: 600; color: var(--cn-text);
  display: flex; align-items: center; gap: 9px;
}
.cn-ck-head h3 i { color: var(--cn-text2); font-size: 16px; }
.cn-ck-x {
  background: none; border: none; cursor: pointer; padding: 4px 6px;
  font-size: 20px; line-height: 1; color: var(--cn-text2);
}

.cn-ck-body { padding: 14px 18px 6px; overflow-y: auto; }

/* "Ola de novo, Joao!" - o reconhecimento pelo telefone. Verde suave, nao
   o verde de acao: e informacao, nao botao. */
.cn-ck-ola {
  background: var(--cn-ok-bg); color: var(--cn-ok-tx);
  border-radius: var(--cn-r); padding: 10px 12px; margin-bottom: 14px;
  font-size: 14px; font-weight: 500;
}
.cn-ck-ola[hidden] { display: none; }

/* O caso "nao conheco este numero". Ambar, nao vermelho: nao e erro, e o
   primeiro atendimento - e ao mesmo tempo o alarme de quem digitou errado,
   porque quem ja e cliente sabe que e cliente. */
.cn-ck-ola-novo {
  background: #faeeda; color: #8a5510;
  border-left: 3px solid #ba7517; font-weight: 400; line-height: 1.45;
}

/* Botao discreto do endereco salvo. So aparece depois do reconhecimento, e
   o endereco so entra depois do toque - nunca sozinho. */
.cn-ck-mini {
  font: inherit; font-size: 13px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; color: var(--cn-ok-tx);
  border: 1px dashed var(--cn-ok-tx); border-radius: var(--cn-r);
  padding: 7px 11px; margin-top: 7px; cursor: pointer; min-height: 38px;
}
.cn-ck-mini:hover { background: var(--cn-ok-bg); }
.cn-ck-mini[hidden] { display: none; }

.cn-ck-lb {
  display: block; font-size: 13px; color: var(--cn-text2);
  margin: 12px 0 5px; font-weight: 500;
}
.cn-ck-req { color: var(--cn-erro-tx); }
.cn-ck-op  { color: var(--cn-muted); font-weight: 400; }

.cn-ck-inp {
  width: 100%; box-sizing: border-box;
  padding: 12px 13px;
  border: 1px solid var(--cn-border-forte);
  border-radius: var(--cn-r);
  background: #fff; color: var(--cn-text);
  /* 16px nao e capricho: abaixo disso o Safari do iPhone da zoom sozinho ao
     focar o campo, e o cliente perde a tela no meio da compra. */
  font-size: 16px;
  font-family: inherit;
}
.cn-ck-inp:focus { outline: 2px solid var(--cn-wa); outline-offset: 1px; }
select.cn-ck-inp { appearance: none; -webkit-appearance: none; background-image: none; }

.cn-ck-nota { font-size: 12px; color: var(--cn-muted); margin-top: 5px; }

#cn-ck-end-wrap[hidden] { display: none; }

.cn-ck-total {
  display: flex; align-items: center; justify-content: space-between;
  margin: 18px 0 4px; padding: 12px 14px;
  background: var(--cn-surface); border-radius: var(--cn-r);
  font-size: 14px; color: var(--cn-text2);
}
.cn-ck-total strong { font-size: 20px; font-weight: 700; color: var(--cn-text); }

.cn-ck-erro {
  margin-top: 12px; padding: 10px 12px;
  background: var(--cn-erro-bg); color: var(--cn-erro-tx);
  border-radius: var(--cn-r); font-size: 14px;
}
.cn-ck-erro[hidden] { display: none; }

.cn-ck-foot {
  padding: 12px 18px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--cn-border);
}
.cn-ck-foot[hidden] { display: none; }

.cn-ck-btn {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; box-sizing: border-box;
  padding: 14px 18px; margin-bottom: 8px;
  border: none; border-radius: var(--cn-r);
  background: var(--cn-wa); color: #fff;
  font-family: inherit; font-size: 16px; font-weight: 600;
  text-decoration: none; cursor: pointer;
}
.cn-ck-btn:active { background: var(--cn-wa-escuro); }
.cn-ck-btn:disabled { opacity: .6; cursor: default; }
.cn-ck-btn.cn-ck-ghost {
  background: transparent; color: var(--cn-text);
  border: 1px solid var(--cn-border-forte);
}

/* ---- tela de sucesso (substitui o corpo, nao abre outro modal) ---- */
.cn-ck-ok {
  padding: 26px 18px calc(20px + env(safe-area-inset-bottom));
  text-align: center;
}
.cn-ck-ok[hidden] { display: none; }
.cn-ck-ok-ic {
  width: 58px; height: 58px; margin: 0 auto 14px;
  border-radius: 50%; background: var(--cn-ok-bg); color: var(--cn-ok-tx);
  display: flex; align-items: center; justify-content: center; font-size: 25px;
}
.cn-ck-ok-h { font-size: 19px; font-weight: 600; margin-bottom: 6px; }
.cn-ck-ok-p { font-size: 14px; color: var(--cn-text2); margin: 0 0 18px; }
.cn-ck-ok-nota { font-size: 12px; color: var(--cn-muted); margin: 10px 0 0; }

/* ---- tela da confirmacao de WhatsApp (primeiro pedido) ---- */
.cn-ck-ok-wa { background: #dff7e6; color: #128c3e; }
.cn-ck-cod {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  margin: 0 0 16px;
}
.cn-ck-cod span {
  font-size: 11px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--cn-muted);
}
.cn-ck-cod strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 27px; font-weight: 700; letter-spacing: .16em;
  color: var(--cn-text);
}

/* ---- balcao / PC: vira caixa centrada, nao folha colada embaixo ---- */
@media (min-width: 820px) {
  .cn-ck { align-items: center; }
  .cn-ck-box { border-radius: 16px; max-height: 88vh; }
  .cn-ck-foot { padding-bottom: 16px; }
  .cn-ck-ok   { padding-bottom: 26px; }
}

/* ==================================================================
   O MICRO-CADASTRO
   ==================================================================
   Tres campos dentro da tela de confirmacao. Alinhado a esquerda porque e
   formulario - o resto da tela e centralizado, e formulario centralizado
   custa uma leitura a mais em cada campo.
   ================================================================== */
.cn-ck-mc { text-align: left; margin: 4px 0 14px; }
.cn-ck-mc .cn-ck-lb:first-child { margin-top: 0; }

/* O campo do codigo imita o codigo grande logo acima: monoespacado,
   espacado e em caixa alta. A pessoa esta COPIANDO o que ve - quanto mais
   parecidos os dois, menos erro de leitura. */
.cn-ck-inp-cod {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 1.25rem; font-weight: 700; letter-spacing: .35em;
  text-align: center; text-transform: uppercase;
}

/* Botao apagado: continua legivel e continua clicavel (o clique leva o foco
   ao campo que falta). Um botao invisivel ou removido faria a pessoa achar
   que a tela travou. */
.cn-ck-btn-off {
  background: var(--cn-border-forte) !important;
  cursor: default;
}
.cn-ck-falta {
  margin: 6px 0 0; font-size: .82rem; color: var(--cn-erro-tx);
  text-align: center;
}
.cn-ck-falta[hidden] { display: none; }