/* ===== Checkout PIX — PRIMÃO Joias ===== */

.ck-overlay{
  position:fixed; inset:0; z-index:9999;
  background:rgba(15,23,42,.6);
  display:flex; align-items:flex-end; justify-content:center;
  padding:0;
  overflow-y:auto;
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.ck-overlay[hidden]{display:none}

.ck-modal{
  width:100%; max-width:28rem;
  background:#fff;
  border-radius:20px 20px 0 0;
  box-shadow:0 -8px 40px rgba(0,0,0,.3);
  display:flex; flex-direction:column;
  max-height:96vh;
  animation:ck-up .22s ease-out;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@keyframes ck-up{from{transform:translateY(24px);opacity:.6}to{transform:translateY(0);opacity:1}}
@media (min-width:640px){
  .ck-overlay{align-items:center; padding:16px}
  .ck-modal{border-radius:20px; max-height:92vh}
}

/* cabeçalho */
.ck-head{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 16px;
  background:#000; color:#facc15;
  border-bottom:2px solid #eab308;
  border-radius:20px 20px 0 0;
  flex-shrink:0;
}
@media (max-width:639px){ .ck-head{border-radius:20px 20px 0 0} }
.ck-head-brand{display:flex; align-items:center; gap:10px}
.ck-head-logo{height:34px; width:34px; object-fit:contain}
.ck-head-title{font-weight:800; font-size:15px; letter-spacing:.02em; color:#facc15}
.ck-head-sub{font-size:11px; color:rgba(254,249,195,.75)}
.ck-close{
  background:transparent; border:0; color:#facc15;
  font-size:18px; line-height:1; cursor:pointer; padding:6px 8px; border-radius:8px;
}
.ck-close:hover{background:rgba(250,204,21,.12)}

.ck-body{padding:16px; overflow-y:auto; -webkit-overflow-scrolling:touch}

/* resumo do produto */
.ck-produto{
  display:flex; gap:12px; align-items:center;
  padding:10px; border:1px solid #e2e8f0; border-radius:14px; background:#f8fafc;
}
.ck-produto-img{height:56px; width:56px; border-radius:10px; object-fit:cover; flex-shrink:0}
.ck-produto-nome{font-size:12.5px; font-weight:700; color:#0f172a; line-height:1.3}
.ck-produto-preco{margin-top:3px; font-size:13px; color:#0f172a}
.ck-produto-preco strong{font-size:16px}
.ck-de{color:#94a3b8; text-decoration:line-through; font-size:12px; margin-right:4px}

/* formulário */
.ck-secao{
  margin:18px 0 8px; font-size:12px; font-weight:800; text-transform:uppercase;
  letter-spacing:.06em; color:#64748b;
}
.ck-linha{display:flex; gap:10px}
.ck-linha .ck-campo{flex:1; min-width:0}
.ck-flex2{flex:2 !important}
.ck-flex1{flex:1 !important}
.ck-campo{margin-bottom:10px; display:flex; flex-direction:column}
.ck-campo label{font-size:12px; font-weight:600; color:#334155; margin-bottom:4px}
.ck-opcional{font-weight:400; color:#94a3b8}
.ck-campo input{
  width:100%; border:1.5px solid #e2e8f0; border-radius:11px;
  padding:11px 12px; font-size:15px; color:#0f172a; background:#fff;
  outline:none; transition:border-color .15s, box-shadow .15s;
}
.ck-campo input:focus{border-color:#16a34a; box-shadow:0 0 0 3px rgba(22,163,74,.12)}
.ck-campo input.ck-invalido{border-color:#ef4444}
.ck-campo input:disabled{background:#f1f5f9; color:#94a3b8}
.ck-erro{font-size:11.5px; color:#dc2626; margin-top:4px; display:none}
.ck-erro.ck-on{display:block}
.ck-hint{font-size:11.5px; color:#64748b; margin-top:4px; min-height:0}

/* fretes */
.ck-fretes{display:flex; flex-direction:column; gap:8px}
.ck-frete-vazio,.ck-frete-erro{
  font-size:13px; color:#64748b; background:#f8fafc;
  border:1px dashed #cbd5e1; border-radius:12px; padding:12px; text-align:center;
}
.ck-frete-erro{color:#b91c1c; background:#fef2f2; border-color:#fecaca}
.ck-frete-load{display:flex; align-items:center; justify-content:center; gap:8px}
.ck-frete{
  display:flex; align-items:center; gap:10px;
  border:1.5px solid #e2e8f0; border-radius:12px; padding:11px 12px;
  cursor:pointer; background:#fff; transition:border-color .15s, background .15s;
}
.ck-frete:hover{border-color:#cbd5e1}
.ck-frete input{accent-color:#16a34a; width:18px; height:18px; flex-shrink:0}
.ck-frete.ck-sel{border-color:#16a34a; background:#f0fdf4}
.ck-frete-info{min-width:0}
.ck-frete-titulo{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.ck-frete-logo{height:18px; width:auto; max-width:86px; object-fit:contain; flex-shrink:0; display:block}
.ck-frete-nome{font-size:13.5px; font-weight:700; color:#0f172a}
.ck-frete-prazo{font-size:11.5px; color:#64748b; margin-top:2px}
.ck-frete-preco{margin-left:auto; padding-left:8px; font-size:14px; font-weight:800; color:#0f172a; white-space:nowrap}
.ck-frete-preco.ck-gratis{color:#16a34a}

/* resumo de valores */
.ck-resumo{
  margin-top:16px; border-top:1px dashed #e2e8f0; padding-top:12px;
  display:flex; flex-direction:column; gap:6px;
}
.ck-resumo-linha{display:flex; justify-content:space-between; font-size:13.5px; color:#475569}
.ck-resumo-total{
  display:flex; justify-content:space-between;
  font-size:17px; font-weight:800; color:#0f172a;
  border-top:1px solid #e2e8f0; padding-top:10px; margin-top:4px;
}

/* botão */
.ck-btn{
  width:100%; margin-top:14px; border:0; border-radius:16px;
  background:#16a34a; color:#fff; font-size:16px; font-weight:800;
  padding:15px; cursor:pointer; box-shadow:0 6px 16px rgba(22,163,74,.28);
  transition:background .15s, transform .1s;
}
.ck-btn:hover:not(:disabled){background:#15803d}
.ck-btn:active:not(:disabled){transform:scale(.99)}
.ck-btn:disabled{background:#cbd5e1; box-shadow:none; cursor:not-allowed}
.ck-legal{margin-top:10px; font-size:11px; color:#94a3b8; text-align:center}

.ck-erro-geral{
  margin-top:12px; background:#fef2f2; border:1px solid #fecaca; color:#b91c1c;
  border-radius:12px; padding:11px 12px; font-size:13px; line-height:1.4;
}
.ck-erro-geral[hidden]{display:none}

/* PIX */
.ck-step[hidden]{display:none}
.ck-pix-topo{text-align:center; margin-top:16px}
.ck-pix-badge{
  display:inline-block; background:#fef9c3; color:#854d0e; border:1px solid #fde047;
  border-radius:999px; padding:5px 12px; font-size:11.5px; font-weight:800;
  text-transform:uppercase; letter-spacing:.04em;
}
.ck-pix-valor{font-size:30px; font-weight:800; color:#0f172a; margin-top:8px}
.ck-pix-timer{font-size:12.5px; color:#64748b; margin-top:2px}
.ck-pix-timer[hidden]{display:none}
.ck-pix-aviso{
  margin-top:12px; background:#fffbeb; border:1px solid #fcd34d; color:#92400e;
  border-radius:12px; padding:11px 12px; font-size:13px; line-height:1.45;
}
.ck-pix-aviso[hidden]{display:none}
.ck-pix-qr{display:flex; justify-content:center; margin:14px 0}
.ck-pix-qr img{width:210px; height:210px; border:1px solid #e2e8f0; border-radius:14px; padding:8px; background:#fff}
.ck-pix-qr img[hidden]{display:none}
.ck-pix-instr{font-size:13px; color:#475569; text-align:center; line-height:1.45}
.ck-pix-code{
  width:100%; margin-top:10px; border:1.5px solid #e2e8f0; border-radius:12px;
  padding:10px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px; color:#334155; background:#f8fafc; resize:none; word-break:break-all;
}
.ck-pix-status{
  margin-top:14px; display:flex; align-items:center; justify-content:center; gap:8px;
  font-size:13px; color:#475569; background:#f8fafc; border-radius:12px; padding:11px;
}
.ck-spin{
  width:14px; height:14px; border-radius:50%; flex-shrink:0;
  border:2px solid #cbd5e1; border-top-color:#16a34a;
  animation:ck-rot .8s linear infinite;
}
@keyframes ck-rot{to{transform:rotate(360deg)}}

/* sucesso / encerrado */
.ck-sucesso,.ck-encerrado{text-align:center; padding:22px 4px 6px}
.ck-ok-icon,.ck-fim-icon{
  width:64px; height:64px; margin:0 auto 14px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:32px; font-weight:800; color:#fff;
}
.ck-ok-icon{background:#16a34a}
.ck-fim-icon{background:#f59e0b}
.ck-sucesso h3,.ck-encerrado h3{font-size:19px; font-weight:800; color:#0f172a}
.ck-sucesso p,.ck-encerrado p{margin-top:8px; font-size:13.5px; color:#475569; line-height:1.5}
.ck-ok-pedido{
  margin-top:12px; font-size:11.5px; color:#64748b;
  background:#f8fafc; border-radius:10px; padding:8px; word-break:break-all;
}