/* ============================================================
   Tema de checkout "CLARO 1a"
   Importado do Claude Design — projeto "High conversion mobile
   checkout", tela "Checkout 1a". Card branco minimalista, barra
   de reserva preta com timer, bump verde, resumo com ancoragem
   de preço. Uma coluna no celular; duas no computador.

   Autocontido: NÃO depende do style.css do painel (DESIGN.md).
   ============================================================ */

.co-oneA {
  --bg: #ffffff;
  --card: #ffffff;
  --line: #e3e3df;
  --line-soft: #ececea;
  --field-line: #d6d6d1;
  --ink: #1a1a18;
  --body-c: #3d3d39;
  --muted: #6b6b66;
  --hint: #8a8a84;
  --placeholder: #9a9a94;
  --orange: oklch(0.72 0.17 45);
  --green-soft: oklch(0.55 0.14 150 / 0.08);
  --green-line: oklch(0.55 0.14 150 / 0.35);
  --green-ink: oklch(0.45 0.14 150);
  --green-free: #0dad21;
  --red: oklch(0.55 0.18 25);
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
/* `hidden` precisa vencer qualquer display do tema (erros, seções de método). */
.co-oneA [hidden] { display: none !important; }
body.co-oneA {
  background: var(--bg);
  font-family: var(--sans);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
.co-oneA h1, .co-oneA h2, .co-oneA p { margin: 0; }
.co-oneA input::placeholder { color: var(--placeholder); }

/* -------- Moldura: página branca direta (a borda/fundo bege do design
   eram só o canvas do Claude Design) -------- */
.oa-wrap { padding: 0; }
.oa-card {
  background: var(--card);
  display: flex; flex-direction: column;
}

/* -------- Header + barra de reserva -------- */
.oa-head {
  order: 1;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--line-soft);
}
.oa-title { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.oa-lock { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.oa-reserve {
  order: 2;
  background: var(--ink); color: #fff; text-align: center;
  padding: 10px 16px; font-size: 15px;
}
.oa-reserve strong { color: var(--orange); font-variant-numeric: tabular-nums; }
.oa-cols { order: 3; }
.oa-foot-legal-holder { order: 4; }
.co-oneA .co-foot-legal { order: 4; }

/* -------- Colunas / seções -------- */
.oa-main { padding: 20px; display: flex; flex-direction: column; gap: 20px; max-width: 520px; margin: 0 auto; width: 100%; }
.oa-section { display: flex; flex-direction: column; gap: 8px; }
.oa-sec-title { font-size: 15px; font-weight: 800; }
.oa-flash {
  background: #fdecec; border: 1px solid #f5c2c0; color: #8a1f1b;
  border-radius: 10px; padding: 10px 14px; font-size: 14px;
}
#checkout-form { display: flex; flex-direction: column; gap: 20px; }

/* -------- Campos: rótulo FLUTUANTE (vive dentro do campo como placeholder;
   com foco ou valor, sobe para o topo do campo sem sumir) -------- */
.oa-field { display: flex; flex-direction: column; gap: 4px; }
.oa-float { position: relative; }
.oa-float .oa-clabel {
  position: absolute; left: 15px; top: 24px; transform: translateY(-50%);
  font-size: 16px; font-weight: 400; color: var(--placeholder);
  pointer-events: none; transition: all 0.12s ease; max-width: calc(100% - 28px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.oa-field.oa-float input { padding-top: 16px; }
.oa-float input:focus + .oa-clabel,
.oa-float input:not(:placeholder-shown) + .oa-clabel {
  top: 7px; transform: none; font-size: 10.5px; font-weight: 600; color: var(--hint);
}
.oa-field input, .oa-field select {
  height: 48px; border: 1px solid var(--field-line); border-radius: 10px;
  padding: 0 14px; font-size: 16px; font-family: inherit; color: var(--ink);
  width: 100%; background: #fff; appearance: auto;
}
.oa-field select { color: var(--ink); }
.oa-field select:invalid { color: var(--placeholder); }
.oa-hint { font-size: 11px; color: var(--hint); margin-top: -2px; }
.oa-row { display: flex; gap: 8px; }
.oa-grow { flex: 1; min-width: 0; }
.oa-zip { width: 100%; }
.oa-state { flex: 1; min-width: 0; }

.co-oneA .field-error { color: #c0181c; font-size: 12px; margin-top: 4px; }
.co-oneA input.invalid, .co-oneA select.invalid { border-color: #c0181c; }

/* -------- Order bump (verde, texto personalizável) -------- */
.oa-bump {
  position: relative;
  display: flex; align-items: flex-start; gap: 8px;
  background: var(--green-soft); border: 1px solid var(--green-line);
  border-radius: 10px; padding: 12px; cursor: pointer;
}
.oa-bump input { position: absolute; opacity: 0; pointer-events: none; }
.oa-bump-check {
  width: 16px; height: 16px; border: 1.5px solid #b9b9b3; border-radius: 4px;
  background: #fff; flex-shrink: 0; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; line-height: 1; color: #fff;
}
.oa-bump input:checked ~ .oa-bump-check { background: var(--green-ink); border-color: var(--green-ink); }
.oa-bump input:checked ~ .oa-bump-check::after { content: "✓"; }
.oa-bump-text { font-size: 12px; color: var(--body-c); line-height: 1.45; }
.oa-bump-text strong { color: var(--green-ink); }
.co-oneA .bump-arrow {
  position: absolute; bottom: -14px;
  color: var(--green-ink); pointer-events: none;
  animation: oaArrowBob 1.1s ease-in-out infinite;
  transition: opacity 0.2s;
}
.oa-bump input:checked ~ .bump-arrow { opacity: 0; }
@keyframes oaArrowBob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* -------- Pagamento -------- */
.oa-paynote { font-size: 12px; color: var(--muted); }
.oa-paybox { border: 1px solid var(--field-line); border-radius: 10px; overflow: hidden; margin-top: 4px; }
.oa-pm {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 14px; cursor: pointer;
}
.oa-pm input { position: absolute; opacity: 0; pointer-events: none; }
.oa-pm-title { font-size: 14px; font-weight: 700; flex: 1; }
.oa-pm.oa-pm-alt { border-top: 1px solid var(--field-line); }
.oa-pm.oa-pm-alt .oa-pm-title { font-weight: 600; color: var(--body-c); }
.oa-pm.selected { background: rgba(26, 26, 24, 0.04); }
.oa-radio {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid #b9b9b3; background: #fff; flex-shrink: 0;
}
.oa-pm.selected .oa-radio { border: 5px solid var(--ink); }
.oa-brands { display: flex; gap: 5px; align-items: center; }
.oa-brand {
  width: 32px; height: 20px; border: 1px solid #e0e0dc; border-radius: 4px;
  background: #fff; display: inline-flex; align-items: center; justify-content: center;
}
.oa-visa { font-size: 9px; font-weight: 800; font-style: italic; color: #1A1F71; letter-spacing: -0.02em; }
.oa-mc .mc-a, .oa-mc .mc-b { width: 11px; height: 11px; border-radius: 50%; display: inline-block; }
.oa-mc .mc-a { background: #EB001B; }
.oa-mc .mc-b { background: #F79E1B; margin-left: -5px; mix-blend-mode: multiply; }
#card-section { border-top: 1px solid var(--field-line); }
.oa-cardfields { padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.oa-cfield { display: flex; flex-direction: column; gap: 4px; }
.oa-clabel { font-size: 12px; font-weight: 600; color: var(--body-c); }
.oa-cfield input, .oa-cfield select {
  height: 46px; border: 1px solid var(--field-line); border-radius: 8px;
  padding: 0 12px; font-size: 16px; font-family: inherit; color: var(--ink);
  width: 100%; background: #fff;
}
.oa-brandwrap { position: relative; display: block; }
.oa-brandtag {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 11px; font-weight: 700; color: var(--hint);
}
/* Campo hospedado (Stripe Elements / dLocal SmartFields) */
.co-oneA .sf-input {
  min-height: 46px; border: 1px solid var(--field-line); border-radius: 8px;
  padding: 13px 12px; background: #fff;
}
.co-oneA .sf-input iframe { vertical-align: middle; }
.oa-pixinfo { border-top: 1px solid var(--field-line); padding: 12px 14px; }
.oa-pixinfo p { font-size: 13px; color: var(--muted); line-height: 1.5; }

/* -------- Lado (CTA + resumo) -------- */
.oa-side { padding: 0 20px 20px; display: flex; flex-direction: column; gap: 12px; max-width: 520px; margin: 0 auto; width: 100%; }
.oa-cta {
  order: 1;
  height: 54px; background: var(--ink); color: #fff; border: none; border-radius: 12px;
  font-size: 17px; font-weight: 700; font-family: inherit; width: 100%; cursor: pointer;
}
.oa-cta:hover { filter: brightness(1.15); }
.oa-cta:disabled { opacity: 0.65; cursor: default; }
.oa-ssl { order: 2; text-align: center; font-size: 11px; color: var(--hint); }
.oa-badges { order: 3; max-width: 100%; height: auto; display: block; margin: 0 auto 10px; }
.oa-summary {
  order: 4;
  border: 1px solid #e8e8e4; border-radius: 14px; padding: 16px;
  display: flex; flex-direction: column; gap: 12px; background: #fafaf8;
}
.oa-guarantee { order: 5; text-align: center; font-size: 12px; color: var(--muted); }
.oa-sum-title { font-size: 15px; font-weight: 800; }
.oa-sum-prod { display: flex; align-items: center; gap: 12px; }
.oa-sum-img {
  width: 56px; height: 56px; border-radius: 8px; border: 1px solid var(--line);
  object-fit: cover; flex: none; display: block;
}
.oa-sum-ph { background: repeating-linear-gradient(45deg, #f2f2ef, #f2f2ef 6px, #e9e9e5 6px, #e9e9e5 12px); }
.oa-sum-info { flex: 1; min-width: 0; }
.oa-sum-name { font-size: 14px; font-weight: 700; }
.oa-sum-rating { font-size: 12px; color: var(--muted); }
.oa-sum-block {
  display: flex; flex-direction: column; gap: 6px;
  border-top: 1px solid var(--line-soft); padding-top: 12px;
}
.oa-sum-line { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.oa-strike { text-decoration: line-through; }
.oa-sum-coupon { font-weight: 700; color: var(--red); }
.oa-sum-today { font-size: 14px; font-weight: 800; color: var(--ink); }
.oa-sum-total { font-size: 16px; font-weight: 800; color: var(--ink); }
.oa-free { color: var(--green-free); font-weight: 700; }

/* -------- Desktop (>=1000px): 2 colunas, resumo sticky -------- */
@media (min-width: 1000px) {
  .oa-wrap { padding: 0; }
  /* No PC a barra de reserva fica ACIMA do header (como no design). */
  .oa-reserve { order: 1; }
  .oa-head { order: 2; padding: 20px max(40px, calc((100vw - 1200px) / 2)); }
  .oa-title { font-size: 22px; }
  .oa-lock { font-size: 13px; }
  .oa-cols {
    display: flex; gap: 40px; padding: 32px 40px 48px; align-items: flex-start;
    max-width: 1280px; margin: 0 auto; width: 100%;
  }
  .oa-main { flex: 1; min-width: 0; padding: 0; gap: 24px; max-width: none; }
  #checkout-form { gap: 24px; }
  .oa-sec-title { font-size: 16px; }
  .oa-side {
    width: 400px; flex-shrink: 0; padding: 0; max-width: none; margin: 0;
    position: sticky; top: 24px;
  }
  /* Resumo sobe para o topo da coluna no PC. */
  .oa-summary { order: 1; padding: 20px; }
  .oa-cta { order: 2; }
  .oa-ssl { order: 3; }
  .oa-badges { order: 4; }
  .oa-guarantee { order: 5; }
  .oa-sum-title { font-size: 16px; }
  .oa-row { gap: 12px; }

  .oa-bump-text { font-size: 13px; }
  .oa-paynote { font-size: 13px; }
}

/* ============ Páginas pós-checkout (obrigado / análise / pix / upsell) ============ */
.oa-result {
  order: 3;
  max-width: 520px; margin: 0 auto; width: 100%;
  padding: 28px 20px 40px; text-align: center;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.oa-result-icon {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--green-soft); color: var(--green-ink);
  border: 1px solid var(--green-line);
  display: flex; align-items: center; justify-content: center;
}
.oa-result-icon.is-analysis { background: rgba(26, 26, 24, 0.05); color: var(--muted); border-color: var(--line); }
.oa-result-title { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.oa-result-text { font-size: 14px; color: var(--muted); }
.oa-result-text strong { color: var(--ink); }
.oa-result-note { font-size: 12px; color: var(--hint); }
.oa-receipt { width: 100%; text-align: left; }
.oa-pill {
  display: inline-block; background: rgba(26, 26, 24, 0.06); color: var(--body-c);
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px;
}

/* Oferta pós-compra */
.oa-upsell {
  width: 100%; border: 1px solid #e8e8e4; border-radius: 14px; background: #fafaf8;
  padding: 20px 16px; display: flex; flex-direction: column; gap: 10px; align-items: center;
  text-align: center;
}
.oa-upsell-badge {
  display: inline-block; background: var(--green-soft); color: var(--green-ink);
  border: 1px solid var(--green-line);
  font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px;
}
.oa-upsell-img {
  width: 160px; height: 160px; object-fit: cover; border-radius: 10px;
  border: 1px solid var(--line); display: block;
}
.oa-upsell-name { font-size: 17px; font-weight: 700; }
.oa-upsell-text { font-size: 13px; color: var(--muted); }
.oa-upsell-price { display: flex; align-items: baseline; gap: 8px; justify-content: center; }
.oa-upsell-price s { color: var(--hint); font-size: 14px; }
.oa-upsell-promo { font-size: 24px; font-weight: 800; color: var(--green-ink); font-variant-numeric: tabular-nums; }
.oa-upsell-off {
  align-self: center; padding: 2px 8px; border-radius: 999px;
  background: var(--green-soft); color: var(--green-ink);
  font-size: 12px; font-weight: 700;
}
.oa-upsell-cta { background: #0dad21; order: 0; margin-top: 8px; }
.oa-upsell-cta:hover { filter: brightness(1.06); }
.oa-upsell-decline {
  border: none; background: none; cursor: pointer; font-family: inherit;
  font-size: 13px; color: var(--muted); text-decoration: underline; margin-top: -4px;
}
.oa-upsell-error { font-size: 12px; color: #c0181c; }

/* Pix */
.oa-qr img { display: block; border: 1px solid var(--line); border-radius: 12px; padding: 8px; background: #fff; }
.oa-pixcopy { display: flex; gap: 8px; width: 100%; }
.oa-pixcopy input {
  flex: 1; min-width: 0; height: 46px; border: 1px solid var(--field-line); border-radius: 10px;
  padding: 0 12px; font-size: 13px; font-family: inherit; color: var(--muted); background: #fff;
}
.oa-copybtn { width: auto; height: 46px; font-size: 14px; padding: 0 18px; order: 0; }
.oa-expiry {
  font-size: 14px; font-weight: 700; color: var(--ink);
  background: #fff7e6; border: 1px solid #f2dcae; border-radius: 999px;
  padding: 6px 14px; display: inline-block;
}
.oa-pixstatus {
  display: flex; align-items: center; gap: 8px; justify-content: center;
  font-size: 13px; color: var(--muted); margin-top: 4px;
}
.oa-spinner {
  width: 14px; height: 14px; border-radius: 50%;
  border: 2px solid var(--line); border-top-color: var(--ink);
  animation: oaSpin 0.9s linear infinite;
}
@keyframes oaSpin { to { transform: rotate(360deg); } }