/* Cakes a Laser - checkout. Depende de tokens.css. */

.cko-card {
  background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:16px;
  padding:1rem 1.1rem; margin-bottom:1rem;
}
.cko-titulo { font-size:1rem; font-weight:800; color:var(--cal-azul); margin-bottom:.85rem; }

/* Itens do resumo */
.cko-item { display:flex; gap:.6rem; padding:.55rem 0; border-bottom:1px dashed rgba(0,0,0,.08); }
.cko-item:last-child { border-bottom:none; }
/* Stepper de quantidade do item (−  qtd  +) */
.cko-qtd {
  flex:none; display:inline-flex; align-items:center;
  border:1px solid rgba(0,0,0,.12); border-radius:10px; overflow:hidden; height:32px;
}
.cko-qtd-btn {
  width:28px; height:100%; border:none; background:rgba(242,107,33,.10);
  color:var(--cal-laranja); font-weight:800; font-size:1rem; line-height:1;
}
.cko-qtd-btn:hover { background:rgba(242,107,33,.2); }
.cko-qtd-input {
  width:2.9rem; height:100%; border:none; text-align:center; font-weight:800;
  color:var(--cal-azul); -moz-appearance:textfield; appearance:textfield;
}
.cko-qtd-input:focus { outline:none; background:var(--cal-creme); }
.cko-qtd-input::-webkit-outer-spin-button,
.cko-qtd-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.cko-item-info { flex-grow:1; min-width:0; }
.cko-item-nome { font-weight:700; color:var(--cal-azul); }
.cko-item-opc { font-size:.82rem; color:var(--cal-cinza); }
.cko-item-preco { font-weight:700; color:var(--cal-azul); white-space:nowrap; }
.cko-item-remover {
  border:none; background:transparent; color:var(--cal-erro); font-size:.8rem; padding:.15rem .3rem;
}

/* Tipo de serviço */
.cko-opcoes-servico { display:flex; gap:.6rem; flex-wrap:wrap; }
.cko-servico {
  flex:1 1 0; min-width:130px; display:flex; align-items:center; gap:.5rem; cursor:pointer;
  border:2px solid rgba(0,0,0,.1); border-radius:12px; padding:.7rem .9rem; font-weight:700; margin:0;
  color:var(--cal-azul); transition:border-color .12s, background .12s;
}
.cko-servico .cko-servico-ico { color:var(--cal-laranja); font-size:1.2rem; }
.cko-servico input { accent-color:var(--cal-laranja); }
.cko-servico:has(input:checked) { border-color:var(--cal-laranja); background:rgba(242,107,33,.06); }

/* Pagamentos */
.cko-pagamentos { display:flex; flex-direction:column; gap:.5rem; }
.cko-pagamento {
  display:flex; align-items:center; gap:.6rem; cursor:pointer; margin:0;
  border:1px solid rgba(0,0,0,.1); border-radius:12px; padding:.65rem .9rem; font-weight:600;
}
.cko-pagamento input { accent-color:var(--cal-laranja); }
.cko-pagamento:has(input:checked) { border-color:var(--cal-laranja); background:rgba(242,107,33,.06); }
.cko-pix { background:rgba(61,169,224,.08); border-radius:10px; padding:.65rem .8rem; }

/* Bloco PIX no modal de sucesso (QR + copia e cola) */
.cko-pix-pagar {
  background:rgba(61,169,224,.06); border:1px solid rgba(61,169,224,.25);
  border-radius:12px; padding:.9rem; margin:.75rem 0;
}
.cko-pix-qr {
  width:200px; max-width:100%; height:auto; border-radius:8px;
  background:#fff; padding:6px; border:1px solid rgba(0,0,0,.08);
}
.cko-pix-pagar #sucPixCopia { font-size:.75rem; }

/* Largura: estreito no mobile, largo o suficiente para 2 colunas no desktop */
.cko-container { max-width: 680px; }
@media (min-width: 992px) { .cko-container { max-width: 980px; } }

/* Mobile: 1 coluna. Ordem: itens → formulário → total+botão */
.cko-grid { display: flex; flex-direction: column; }
.cko-bloco-itens { order: 1; }
.cko-bloco-form  { order: 2; }
.cko-bloco-total { order: 3; }

/* Desktop: 2 colunas. Formulário à esquerda (ocupa as 2 linhas);
   itens e total empilhados na sidebar direita (sticky). */
@media (min-width: 992px) {
  .cko-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    /* linhas dimensionadas pelo conteúdo → itens e total ficam colados no topo */
    grid-template-rows: min-content 1fr;
    grid-template-areas:
      "form itens"
      "form total";
    align-items: start;
    column-gap: 1.5rem;
  }
  .cko-bloco-form  { grid-area: form; }
  .cko-bloco-itens { grid-area: itens; align-self: start; }
  .cko-bloco-total { grid-area: total; align-self: start; }
  /* os cards internos do formulário mantêm o espaçamento vertical */
  .cko-bloco-form .cko-card:last-child { margin-bottom: 0; }
}

.cko-confirmar { font-weight:700; }
.cko-confirmar i { margin-right:.4rem; }
.cko-sucesso-ico {
  width:72px; height:72px; margin:0 auto; border-radius:50%;
  background:rgba(46,158,91,.12); color:var(--cal-sucesso); font-size:2rem;
  display:flex; align-items:center; justify-content:center;
}

.form-control.is-invalid, .form-select.is-invalid { border-color:var(--cal-erro); }

/* ── Promoções no resumo do checkout ── */
.cko-desconto { color: var(--cal-sucesso); font-weight: 600; }
.cko-taxa-antiga { text-decoration: line-through; color: var(--cal-cinza); font-size: .85rem; margin-right: .35rem; }
.cko-frete-gratis { color: var(--cal-sucesso); font-weight: 800; }
.cko-frete-aviso {
  margin-top: .5rem; padding: .55rem .7rem;
  background: rgba(229,164,0,.12); border: 1px solid rgba(229,164,0,.3);
  border-radius: 10px; color: #8a6400; font-size: .85rem; text-align: center;
}