/* Checkout da loja de teste (fora do React). Usa as cores e botões do loja.css. */
.ck-topo { background: #fff; border-bottom: 1px solid #dfe5e0; }
.ck-topo .wrap { display: flex; align-items: center; gap: 16px; min-height: 72px; flex-wrap: wrap; }
.ck-logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; font-weight: 800; }
.ck-etapas { list-style: none; display: flex; gap: 6px; margin: 0; padding: 0; flex-wrap: wrap; }
.ck-etapas li { padding: 6px 12px; border-radius: 999px; background: #eef2ef; font-weight: 600; font-size: .95rem; }
.ck-etapas li[aria-current="step"], .ck-etapas li.ativa { background: var(--verde, #1f6b3a); color: #fff; }
.ck-corpo { padding: 24px 0 48px; }
.ck-corpo h2:focus { outline: none; }
.ck-itens { width: 100%; }
.ck-subst { margin-top: 6px; }
.ck-subst select { min-height: 40px; }
.ck-resumo { margin-top: 16px; font-size: 1.1rem; }
.ck-acoes { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.ck-janela-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 8px 0 16px; }
.ck-janela-grade label, .ck-janela-grade .ck-slot { display: block; border: 2px solid #c9d1cb; border-radius: 8px; padding: 10px; cursor: pointer; }
.ck-janela-grade input:checked + span { font-weight: 700; }
.ck-janela-grade .ck-slot.sel { border-color: #1f6b3a; background: #e8f3ec; }
.ck-janela-grade .ck-slot.off { color: #bbb; background: #f6f6f6; cursor: default; }
.ck-aviso-tel { border-left: 4px solid #b26a00; background: #fff6e5; padding: 10px 12px; margin: 12px 0; }
.ck-ruim .erro { color: #ff7a7a; }
.ck-ruim input.inv { border-color: #ff7a7a; }
.ck-corpo h1:focus { outline: none; }
.ck-ilha fieldset { border: 1px solid #dfe5e0; border-radius: 8px; margin: 12px 0; padding: 10px 14px; }
.ck-ilha .opcoes { display: grid; gap: 8px; }
.ck-dia { display: grid; gap: 6px; align-content: start; }
.ck-dia-nome { font-weight: 700; margin: 0; }
.ck-janela-grade label input { margin-right: 6px; }
.ck-janela-grade label.off { color: #555; background: #f3f3f3; cursor: not-allowed; }
.ck-janela-grade label.sel { border-color: #1f6b3a; background: #e8f3ec; }
/* versão "como no site": abas e cartões em div clicável */
.ck-modos { display: flex; gap: 8px; margin: 12px 0; }
.ck-modo, .ck-cartao { border: 2px solid #ddd; border-radius: 8px; padding: 10px 14px; cursor: pointer; }
.ck-modo.sel, .ck-cartao.sel { border-color: #1f6b3a; }
.ck-modalidades { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; margin-bottom: 12px; }