/* ===== Checkout — layout de referência (Fruitfy-style) ===== */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --blue:#1596d8; --blue-d:#1180bd; --ink:#17203a; --muted:#667085;
  --ph:#9aa4b2; --line:#e3e7ee; --bg:#e9ebef; --card:#ffffff;
}
html,body{background:var(--bg)}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.45}

/* ---- barra de urgência ---- */
.ck-timer{display:flex;align-items:center;justify-content:center;gap:8px;background:#fbe9ea;color:#1a1a2e;padding:11px 14px;font-size:14px;font-weight:600;text-align:center}
.ck-timer-ico{width:16px;height:16px;fill:none;stroke:#d94a4a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.ck-timer strong{font-weight:800;font-variant-numeric:tabular-nums}

/* ---- layout ---- */
.ck-wrap{max-width:500px;margin:0 auto;padding:16px 14px 40px}
.ck-card{background:var(--card);border-radius:16px;box-shadow:0 1px 3px rgba(16,24,40,.09),0 1px 2px rgba(16,24,40,.05);padding:20px 18px;margin-bottom:14px}

/* ---- resumo do pedido ---- */
.buy-card{padding:18px}
.buy-title{color:var(--blue);font-weight:700;font-size:15px;margin-bottom:12px}
.buy-row{display:flex;align-items:center;gap:13px}
.buy-row img{width:62px;height:62px;border-radius:10px;object-fit:cover;background:#f4f6f9;border:1px solid var(--line);flex-shrink:0}
.buy-info{min-width:0}
.buy-info #sum-name{display:block;font-size:14px;font-weight:600;color:var(--ink);line-height:1.3;margin-bottom:4px}
.buy-prices{display:flex;align-items:baseline;gap:8px}
.buy-now{font-size:19px;font-weight:800;color:var(--ink)}
.buy-old,.buy-save{display:none} /* ref mostra só nome + preço */

/* ---- etapas ---- */
.step-head{display:flex;align-items:center;gap:11px;margin-bottom:18px}
.step-num{width:30px;height:30px;border-radius:50%;background:var(--blue);color:#fff;font-weight:700;font-size:15px;display:grid;place-items:center;flex-shrink:0}
.step-title{font-weight:700;font-size:15px;color:#0f1729;background:#e9f4fb;padding:5px 14px;border-radius:999px}
.step-tag{margin-left:auto;color:var(--muted);font-size:13px;font-weight:500}

/* ---- campos ---- */
.ck-label{display:block;font-size:14px;font-weight:500;color:#1a2238;margin:14px 0 6px}
.ck-input{position:relative;display:flex;align-items:center;background:#fff;border:1.5px solid var(--line);border-radius:10px;height:50px;padding:0 12px;transition:border-color .15s,box-shadow .15s}
.ck-input:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(21,150,216,.13)}
.ck-input.invalid{border-color:#e14b4b;box-shadow:0 0 0 3px rgba(225,75,75,.12)}
.ck-ico{width:18px;height:18px;flex-shrink:0;fill:none;stroke:var(--ph);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-right:10px}
.ck-input input,.ck-input select{flex:1;min-width:0;border:none;outline:none;background:transparent;font-size:15px;font-family:inherit;color:var(--ink);height:100%;appearance:none;-webkit-appearance:none}
.ck-input input::placeholder{color:var(--ph)}
.ck-select select{color:var(--ink)}
.ck-select select:invalid{color:var(--ph)}
.ck-chevron{position:absolute;right:12px;color:var(--ph);pointer-events:none;font-size:12px}
.ck-row{display:flex;gap:12px}
.ck-col{flex:1;min-width:0}
.field-err{color:#e14b4b;font-size:12.5px;margin:6px 2px 0}

/* ---- pagamento ---- */
.pay-select{margin-bottom:6px}
.pay-method{display:inline-flex;flex-direction:column;align-items:center;gap:3px;border:1.5px solid var(--blue);background:#f1faff;border-radius:11px;padding:9px 30px;cursor:default}
.pay-method .pix-logo{width:22px;height:22px;color:var(--blue)}
.pay-method span{color:var(--blue);font-weight:600;font-size:13px}
.pay-h{font-weight:700;font-size:15px;color:#0f1729;margin:16px 0 13px}
.pay-info{list-style:none}
.pay-info li{display:flex;gap:11px;align-items:flex-start;margin-bottom:13px}
.pi-ico{width:20px;height:20px;flex-shrink:0;margin-top:1px;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.pay-info strong{display:block;color:var(--blue);font-weight:700;font-size:12.5px;text-transform:uppercase;letter-spacing:.3px;margin-bottom:2px}
.pay-info small{display:block;color:var(--muted);font-size:13px;line-height:1.4}
.pay-total{margin:16px 0 14px;font-weight:700}
.pay-total span{color:var(--blue);font-size:15px}
.pay-total strong{color:var(--blue);font-size:17px;margin-left:4px}

.ck-pay-btn{display:block;width:100%;background:var(--blue);color:#fff;font-weight:700;font-size:16px;font-family:inherit;height:52px;border:none;border-radius:10px;cursor:pointer;text-align:center;line-height:52px;text-decoration:none;transition:background .15s}
.ck-pay-btn:hover{background:var(--blue-d)}
.ck-pay-btn:disabled{opacity:.65;cursor:default}
.ck-error{color:#dc2626;font-size:13px;text-align:center;margin-top:10px}
.pay-secure{text-align:center;color:#98a2b3;font-size:12px;margin-top:11px}

/* ---- rodapé ---- */
.ck-foot{text-align:center;padding:14px 10px 0}
.ck-foot-badges{display:flex;align-items:center;justify-content:center;gap:22px;color:var(--muted);font-size:13px}
.ck-foot-badges span{display:inline-flex;align-items:center;gap:6px}
.ck-foot-badges svg{width:15px;height:15px;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ck-foot-fine{font-size:11px;color:#98a2b3;margin:10px auto 0;max-width:420px;line-height:1.5}

/* ---- PIX (só copia e cola) ---- */
.pix-box{text-align:center}
.pix-box h2{font-size:19px;font-weight:800;margin-bottom:8px}
.pix-sub{color:var(--muted);font-size:14px;margin-bottom:16px}
.pix-steps{text-align:left;max-width:340px;margin:0 auto 16px;padding-left:20px;color:#344054;font-size:14px;line-height:1.7}
.pix-copy-btn{display:block;width:100%;background:var(--blue);color:#fff;font-weight:700;font-size:15px;font-family:inherit;height:50px;border:none;border-radius:10px;cursor:pointer;transition:background .15s}
.pix-copy-btn:hover{background:var(--blue-d)}
.pix-copy-btn.copied{background:#16a34a}
.pix-code{width:100%;margin-top:12px;border:1.5px solid var(--line);border-radius:10px;padding:12px;font-family:ui-monospace,Menlo,monospace;font-size:12.5px;color:#344054;resize:none;background:#f9fafb;word-break:break-all}
.pix-code-hint{font-size:12px;color:var(--muted);margin-top:8px}
.pix-waiting{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;color:#344054;font-size:14px}
.pix-waiting strong{font-variant-numeric:tabular-nums}
.spinner{width:18px;height:18px;border:3px solid #dbeafe;border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}
@keyframes spin{to{transform:rotate(360deg)}}
.pix-hint{color:#98a2b3;font-size:12px;margin-top:14px;line-height:1.5}

/* ---- sucesso ---- */
.success-box{text-align:center}
.success-check{width:64px;height:64px;border-radius:50%;background:#16a34a;color:#fff;font-size:34px;font-weight:700;display:grid;place-items:center;margin:0 auto 14px}
.success-box h2{font-size:20px;font-weight:800;margin-bottom:8px}
.success-box p{color:var(--muted);font-size:14px;margin-bottom:18px}

@media (max-width:380px){
  .ck-row{gap:8px}
  .pay-method{padding:9px 20px}
}

/* ===== PIX gerado (layout de referência) ===== */
.pixgen-h{text-align:center;font-size:21px;font-weight:800;color:var(--ink);margin:18px 0 4px}
.pixgen-sub{text-align:center;color:var(--muted);font-size:14px;margin-bottom:16px}
.pixgen-card{text-align:center}
.pixgen-title{color:var(--muted);font-weight:700;font-size:14px;margin-bottom:6px}
.pixgen-desc{color:#344054;font-size:14px;margin-bottom:16px;line-height:1.4}
.pixgen-codebox{background:#cfd6e0;color:#475569;border-radius:9px;padding:13px 14px;font-family:ui-monospace,Menlo,monospace;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:12px}
.pixgen-copy{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;height:52px;background:var(--blue);color:#fff;font-weight:700;font-size:15px;font-family:inherit;border:none;border-radius:10px;cursor:pointer;transition:background .15s}
.pixgen-copy:hover{background:var(--blue-d)}
.pixgen-copy.copied{background:#16a34a}
.pc-ico{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.pixgen-expire{border:1px solid #e6e9ef;border-radius:12px;padding:12px 14px;margin:16px 0;font-size:14px;color:#344054}
.pixgen-bar{height:7px;background:#e6e9ef;border-radius:99px;margin-top:9px;overflow:hidden}
.pixgen-bar i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#22b8e6,#1596d8);border-radius:99px;transition:width 1s linear}
.pixgen-how{text-align:left;font-weight:700;font-size:15px;color:#0f1729;margin:18px 0 12px}
.pixgen-steps{list-style:none;text-align:left}
.pixgen-steps li{display:flex;align-items:center;gap:11px;margin-bottom:11px;font-size:14px;color:#475569;line-height:1.4}
.pixgen-steps li span{flex-shrink:0;width:23px;height:23px;border-radius:50%;background:var(--blue);color:#fff;font-weight:700;font-size:12px;display:grid;place-items:center}
.pixgen-steps li p{margin:0}
.pixgen-note{text-align:left;color:var(--muted);font-size:13px;margin-top:10px;line-height:1.4}
.pixgen-email{background:#a7ecbd;color:#0f2f1a;border-radius:14px;padding:14px 16px;text-align:center;font-size:14px;line-height:1.5;margin-bottom:14px}
.pixgen-resumo-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}
.pixgen-resumo-head strong{font-size:16px;color:var(--ink)}
.pixgen-resumo-head span{color:var(--muted);font-size:13px}
.pixgen-resumo-head b{color:var(--ink)}
.pixgen-resumo-row{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding-bottom:13px;margin-bottom:12px}
.pixgen-resumo-row img{width:54px;height:54px;border-radius:9px;object-fit:cover;background:#f4f6f9;border:1px solid var(--line);flex-shrink:0}
.pixgen-resumo-info{min-width:0}
.pixgen-resumo-info p{margin:0 0 3px;font-size:13.5px;color:var(--ink);line-height:1.3}
.pixgen-resumo-info strong{font-size:16px;color:var(--ink)}
.pixgen-total{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:15px;color:var(--ink)}
.pixgen-fine{text-align:center;color:#98a2b3;font-size:11px;margin:14px auto 0;max-width:420px;line-height:1.5}
.pixgen-secure{display:flex;align-items:center;justify-content:center;gap:6px;color:#16a34a;font-weight:600;font-size:13px;margin-top:9px}
.pixgen-secure svg{width:15px;height:15px;fill:none;stroke:#16a34a;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ===== ORDER BUMP (entre Endereço e Pagamento) ===== */
.bump-card{ padding:0; overflow:hidden; border:2px dashed #16a34a; background:#f3fbf5; transition:border-color .15s, background .15s, box-shadow .15s; }
.bump-card.on{ border-style:solid; border-color:#16a34a; background:#ecfdf1; box-shadow:0 6px 20px rgba(22,163,74,.16); }
.bump-inner{ display:flex; align-items:center; gap:12px; padding:14px; cursor:pointer; }
.bump-check{ position:absolute; opacity:0; width:0; height:0; }
.bump-box{ flex:0 0 24px; width:24px; height:24px; border-radius:7px; border:2px solid #16a34a; background:#fff; display:flex; align-items:center; justify-content:center; transition:background .15s; }
.bump-box svg{ width:16px; height:16px; fill:none; stroke:#fff; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; opacity:0; transition:opacity .12s; }
.bump-check:checked ~ .bump-box{ background:#16a34a; }
.bump-check:checked ~ .bump-box svg{ opacity:1; }
.bump-img{ flex:0 0 58px; width:58px; height:58px; object-fit:contain; border-radius:10px; background:#fff; border:1px solid var(--line); padding:4px; }
.bump-info{ flex:1 1 auto; min-width:0; }
.bump-tag{ display:inline-block; font-size:10.5px; font-weight:800; letter-spacing:.3px; color:#15803d; text-transform:uppercase; margin-bottom:3px; }
.bump-name{ display:block; font-size:14px; font-weight:800; color:var(--ink); line-height:1.25; }
.bump-desc{ margin:2px 0 6px; font-size:12px; color:var(--muted); line-height:1.3; }
.bump-price{ display:flex; align-items:baseline; gap:8px; }
.bump-plus{ font-size:16px; font-weight:900; color:#15803d; }
.bump-old{ font-size:12px; color:var(--ph); text-decoration:line-through; }
@media (max-width:360px){ .bump-img{ flex-basis:48px; width:48px; height:48px; } .bump-name{ font-size:13px; } }

/* ===== Voltar à loja (link no topo do checkout) ===== */
.ck-back{ display:inline-flex; align-items:center; gap:6px; margin:0 2px 10px; padding:7px 12px 7px 8px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--muted); font-size:13px; font-weight:600; text-decoration:none; transition:background .15s, color .15s, border-color .15s; }
.ck-back:hover{ background:#f4f6fa; color:var(--ink); border-color:#d4dae4; }
.ck-back svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }