/* ============================================================
   Checkout de produto único (pack-supremo, pack-digital, skill avulsa).
   Namespace: skb-checkout (registrado em docs/css-namespaces.md).
   Usa os tokens globais de site.css (--bg, --accent, --ink, --muted,
   --surface, --line, --font-body, --font-display); as variáveis abaixo
   são só os tons derivados do laranja/verde/vermelho que este componente
   precisa, escopados em .skb-checkout pra não virarem token global.
   ============================================================ */

/* O atributo `hidden` precisa vencer os display:flex/grid dos componentes
   abaixo (mesma pegadinha resolvida no checkout-page.css original): sem
   isso, hideFormUI()/renderPaymentResult() do checkout.js escondem o
   elemento via `el.hidden = true`, mas o CSS de layout continua mostrando. */
.skb-checkout [hidden] { display: none !important; }

.skb-checkout {
  --skb-checkout-accent-line: rgba(255,122,54,.4);
  --skb-checkout-accent-soft: rgba(255,122,54,.13);
  --skb-checkout-accent-soft-2: rgba(255,122,54,.08);
  --skb-checkout-green: #2fd581;
  --skb-checkout-green-line: rgba(0,175,85,.32);
  --skb-checkout-green-soft: rgba(0,175,85,.09);
  --skb-checkout-red: #f26d6d;
  --skb-checkout-red-line: rgba(242,109,109,.35);
  --skb-checkout-red-soft: rgba(242,109,109,.1);
  padding-block: clamp(32px,5vw,56px) 80px;
}

.skb-checkout-grid {
  display: grid;
  grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr);
  gap: 20px 56px;
  align-items: start;
}
.skb-checkout-summary, .skb-checkout-pay { min-width: 0; }

/* ---------- resumo do produto ---------- */
.skb-checkout-eyebrow { margin-bottom: 16px; color: var(--accent); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.skb-checkout-name { font-size: clamp(24px,2.6vw,32px); margin-bottom: 10px; text-wrap: balance; }
.skb-checkout-desc { max-width: 460px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.skb-checkout-back { margin-top: 8px; font-size: 13px; }
.skb-checkout-back a { color: var(--accent); text-decoration: none; }
.skb-checkout-back a:hover { text-decoration: underline; }

.skb-checkout-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-top: 24px; padding: 18px 20px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.skb-checkout-price-label { width: 100%; font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.skb-checkout-price-amount { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em; font-size: 38px; line-height: 1; color: var(--ink); }
.skb-checkout-price-amount small { font-size: 20px; font-weight: 700; margin-right: 4px; }
.skb-checkout-price-note { font-size: 13.5px; color: var(--muted); }
.skb-checkout-price-currency { width: 100%; margin-top: 4px; font-size: 12px; color: var(--muted); }

/* ---------- avisos: garantia, liberação gradual, avulsa sem garantia ---------- */
.skb-checkout-notice { margin-top: 18px; padding: 18px 20px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.skb-checkout-notice h2 { font-size: 15px; margin-bottom: 6px; }
.skb-checkout-notice p { font-size: 13.5px; line-height: 1.6; color: var(--muted); margin: 0; }
.skb-checkout-notice p a { color: var(--accent); }
.skb-checkout-notice.is-guarantee { background: var(--skb-checkout-green-soft); border-color: var(--skb-checkout-green-line); }
.skb-checkout-notice.is-guarantee h2 { color: var(--skb-checkout-green); }
.skb-checkout-notice.is-warning { background: var(--skb-checkout-accent-soft-2); border-color: var(--skb-checkout-accent-line); }
.skb-checkout-notice.is-warning h2 { color: var(--accent); }

/* ---------- processador e confiança ---------- */
.skb-checkout-processor { margin-top: 18px; padding: 18px 20px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); }
.skb-checkout-processor-label { font-family: var(--font-display); font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.skb-checkout-processor p { font-size: 13px; line-height: 1.6; color: var(--muted); margin: 0; }
.skb-checkout-processor p strong { color: var(--ink); }

.skb-checkout-trust { margin-top: 18px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.skb-checkout-trust li { font-size: 13px; line-height: 1.6; color: var(--muted); }
.skb-checkout-trust li strong { color: var(--ink); }

/* ============================================================
   PAINEL DE PAGAMENTO
   ============================================================ */
.skb-checkout-card { position: relative; border-radius: 20px; padding: 28px 26px 24px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 24px 70px -30px rgba(0,0,0,.6); }
.skb-checkout-card-head { margin-bottom: 20px; }
.skb-checkout-card-head h2 { font-size: 21px; margin-bottom: 6px; }
.skb-checkout-card-head p { font-size: 13.5px; color: var(--muted); margin: 0; }

.skb-checkout-form { display: flex; flex-direction: column; gap: 16px; }

/* ---------- oferta de saída (só no pack-supremo) ---------- */
.skb-checkout-offer { position: relative; padding: 16px 40px 16px 16px; border-radius: 12px; border: 1px solid var(--skb-checkout-accent-line); background: var(--skb-checkout-accent-soft-2); }
.skb-checkout-offer-title { font-family: var(--font-display); font-weight: 800; font-size: 14px; margin-bottom: 4px; }
.skb-checkout-offer p { font-size: 13px; color: var(--muted); margin: 0 0 8px; }
.skb-checkout-offer p strong { color: var(--ink); }
.skb-checkout-offer-link { color: var(--accent); font-weight: 700; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.skb-checkout-offer-close { position: absolute; top: 8px; right: 10px; width: 28px; height: 28px; border-radius: 50%; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; border: none; }
.skb-checkout-offer-close:hover { color: var(--ink); }

/* ---------- método: Pix / Cartão ---------- */
.skb-checkout-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.skb-checkout-seg label { position: relative; }
.skb-checkout-seg input { position: absolute; opacity: 0; pointer-events: none; }
.skb-checkout-seg-card { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 13px 10px; border-radius: 12px; cursor: pointer; text-align: center; background: var(--surface-2); border: 1px solid var(--line); transition: border-color .2s, background-color .2s; }
.skb-checkout-seg label:hover .skb-checkout-seg-card { border-color: rgba(255,255,255,.24); }
.skb-checkout-seg input:checked + .skb-checkout-seg-card { border-color: var(--skb-checkout-accent-line); background: var(--skb-checkout-accent-soft); }
.skb-checkout-seg input:focus-visible + .skb-checkout-seg-card { outline: 3px solid var(--accent); outline-offset: 2px; }
.skb-checkout-seg-name { font-family: var(--font-display); font-size: 14.5px; font-weight: 800; color: var(--ink); }
.skb-checkout-seg-note { font-size: 11.5px; color: var(--muted); }

.skb-checkout-metodo-nota { margin-top: -8px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }

/* ---------- campos ---------- */
.skb-checkout-fields { display: flex; flex-direction: column; gap: 14px; }
.skb-checkout-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.skb-checkout-row.is-name-doc { grid-template-columns: 1.3fr 1fr; }
.skb-checkout-row.is-card-id { grid-template-columns: 1.3fr 1fr; }
.skb-checkout-row.is-expiry { grid-template-columns: 1fr 1fr; }
.skb-checkout-row.is-cep-addr { grid-template-columns: .8fr 1.2fr; }
.skb-checkout-row.is-address { grid-template-columns: 1.4fr .6fr; }

.skb-checkout-form label { display: flex; flex-direction: column; gap: 6px; font-family: var(--font-display); font-size: 12.5px; font-weight: 700; letter-spacing: .01em; color: var(--muted); }
.skb-checkout-form input[type=text],
.skb-checkout-form input[type=email],
.skb-checkout-form input[type=tel],
.skb-checkout-form select {
  width: 100%; padding: 12px 14px; border-radius: 10px; font-family: var(--font-body); font-size: 15px; color: var(--ink);
  background: rgba(255,255,255,.04); border: 1px solid var(--line); outline: none; appearance: none;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
.skb-checkout-form input::placeholder { color: var(--muted); opacity: .75; }
.skb-checkout-form input:focus, .skb-checkout-form select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--skb-checkout-accent-soft); background: rgba(255,255,255,.06); }
.skb-checkout-form select { cursor: pointer; padding-right: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b0b1b6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; }
.skb-checkout-form select option { background: var(--surface-2); color: var(--ink); }

.skb-checkout-card-fields { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: 14px; background: rgba(255,255,255,.02); border: 1px solid var(--line); }
.skb-checkout-card-secure { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.5; color: var(--muted); margin: 0; }
.skb-checkout-card-secure strong { color: var(--ink); }

.skb-checkout-installments select { width: 100%; }

/* ---------- checkbox de termos (só skill avulsa) ---------- */
.skb-checkout-terms { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; border-radius: 12px; background: var(--skb-checkout-accent-soft-2); border: 1px solid var(--skb-checkout-accent-line); font-family: var(--font-body); font-weight: 400; }
.skb-checkout-terms input { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; accent-color: var(--accent); cursor: pointer; }
.skb-checkout-terms span { font-size: 13px; line-height: 1.5; color: var(--ink); }

/* ---------- honeypot, turnstile, erro ---------- */
.skb-checkout-hp { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }
.skb-checkout-turnstile:empty { display: none; }
.skb-checkout-turnstile { display: flex; justify-content: flex-start; }
.skb-checkout-error { padding: 12px 15px; border-radius: 10px; font-size: 13.5px; line-height: 1.5; background: var(--skb-checkout-red-soft); border: 1px solid var(--skb-checkout-red-line); color: var(--skb-checkout-red); }
.skb-checkout-error a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- botão e selo de segurança ---------- */
.skb-checkout-form .skb-button.is-full { width: 100%; }
.skb-checkout-submit-trust { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 12px; color: var(--muted); margin-top: -6px; text-align: center; }

/* ---------- resultado: Pix / aprovado ---------- */
.skb-checkout-result { display: flex; flex-direction: column; gap: 14px; }
.skb-checkout-pix { display: flex; flex-direction: column; gap: 14px; text-align: center; }
.skb-checkout-pix h4 { font-size: 18px; }
.skb-checkout-pix p { font-size: 13.5px; line-height: 1.55; color: var(--muted); margin: 0; }
.skb-checkout-pix-qr-card { align-self: center; padding: 14px; border-radius: 16px; background: #fff; box-shadow: 0 18px 50px -18px rgba(0,0,0,.7); }
.skb-checkout-pix-qr { width: 200px; height: 200px; }
.skb-checkout-pix-code { max-height: 88px; overflow-y: auto; padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.skb-checkout-pix-code code { font-size: 11.5px; line-height: 1.5; word-break: break-all; color: var(--muted); }
.skb-checkout-copy { display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; padding: 14px 24px; border-radius: 12px; font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--ink); background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.skb-checkout-copy:hover { background: rgba(255,255,255,.08); }
.skb-checkout-pix-waiting { display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 13px; color: var(--muted); }
.skb-checkout-spinner { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255,255,255,.15); border-top-color: var(--accent); animation: skb-checkout-spin .8s linear infinite; }
@keyframes skb-checkout-spin { to { transform: rotate(360deg); } }

.skb-checkout-done { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 10px 0; }
.skb-checkout-done-icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--skb-checkout-green-soft); border: 1px solid var(--skb-checkout-green-line); color: var(--skb-checkout-green); font-size: 24px; }
.skb-checkout-done h4 { font-size: 19px; }
.skb-checkout-done p { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0; }

/* ---------- ajuda ---------- */
.skb-checkout-help { margin-top: 16px; text-align: center; font-size: 13px; color: var(--muted); }
.skb-checkout-help a { color: var(--accent); font-weight: 700; }
.skb-checkout-help a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 900px) {
  .skb-checkout-grid { grid-template-columns: 1fr; gap: 24px; }
  .skb-checkout-desc { max-width: none; }
  .skb-checkout-card { padding: 22px 18px 20px; }
  .skb-checkout-row,
  .skb-checkout-row.is-name-doc,
  .skb-checkout-row.is-card-id,
  .skb-checkout-row.is-cep-addr,
  .skb-checkout-row.is-address { grid-template-columns: 1fr; }
  .skb-checkout-price-amount { font-size: 32px; }
}

@media (max-width: 600px) {
  .skb-checkout { padding-block: 24px 64px; }
  .skb-checkout-seg { grid-template-columns: 1fr; }
  .skb-checkout-offer { padding-right: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .skb-checkout-spinner { animation: none; }
}