/* =========================================================================
   Guidelyze · Checkout (carrinho + obrigado)
   Reusa tokens de assets/css/tokens/livro.css
   ========================================================================= */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;min-height:100dvh;
  background:radial-gradient(ellipse at 50% 0%, var(--paper-warm), var(--paper) 55%);
  color:var(--fg);
  font-family:var(--font-body);
  font-size:var(--text-md);line-height:var(--lead-relaxed);
  -webkit-font-smoothing:antialiased;
  display:flex;flex-direction:column;
}
img{max-width:100%;display:block}

.wrap{max-width:560px;margin:0 auto;padding:0 var(--pad-x);width:100%}

.eyebrow{
  font-size:var(--text-xs);letter-spacing:var(--track-widest);text-transform:uppercase;
  color:var(--accent-deep);font-weight:600;margin:0 0 var(--space-3);
}

h1,h2,h3{margin:0;font-weight:400}
h1{font-family:var(--font-display);font-size:var(--text-3xl);line-height:var(--lead-tight);letter-spacing:var(--track-tight)}
h2{font-family:var(--font-display);font-size:var(--text-2xl);line-height:var(--lead-tight)}
h3{font-family:var(--font-body);font-weight:600;font-size:var(--text-md)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  padding:15px 28px;border-radius:var(--radius-pill);
  font-family:var(--font-body);font-size:var(--text-md);font-weight:600;
  text-decoration:none;cursor:pointer;border:1.5px solid transparent;
  transition:transform var(--dur-fast) var(--ease-out), background var(--dur-fast), box-shadow var(--dur-fast);
}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn--primary{background:var(--accent);color:var(--paper);box-shadow:0 6px 20px rgba(92,143,122,0.28)}
.btn--primary:hover:not(:disabled){background:var(--accent-deep)}
.btn--ghost{background:transparent;color:var(--fg);border-color:var(--line)}
.btn--block{width:100%}

/* topo */
.top{display:flex;justify-content:center;padding:var(--space-8) 0 var(--space-4)}
.top__logo{height:26px}

/* card */
.card{
  background:var(--paper);border:1px solid var(--line-soft);
  border-radius:var(--radius-xl);padding:var(--space-8);
  box-shadow:var(--shadow-lift);
}

/* resumo do pedido */
.summary{display:grid;gap:var(--space-3);margin:var(--space-5) 0}
.summary__row{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-3)}
.summary__row--total{border-top:1px solid var(--line-soft);padding-top:var(--space-3);font-weight:700;font-size:var(--text-lg)}
.summary__name{color:var(--fg)}
.summary__desc{font-size:var(--text-sm);color:var(--fg-softer)}
.summary__price{white-space:nowrap;font-variant-numeric:tabular-nums}

/* order bump */
.bump{
  display:flex;gap:var(--space-3);align-items:flex-start;
  border:1.5px dashed var(--accent-soft);border-radius:var(--radius-lg);
  padding:var(--space-4);margin:var(--space-5) 0;cursor:pointer;
  transition:border-color var(--dur-fast), background var(--dur-fast);
}
.bump:hover{background:var(--bg-alt)}
.bump input{margin-top:3px;width:18px;height:18px;accent-color:var(--accent)}
.bump__body strong{display:block;color:var(--fg)}
.bump__body span{font-size:var(--text-sm);color:var(--fg-soft)}

/* form */
.field{margin:var(--space-4) 0}
.field label{display:block;font-size:var(--text-sm);font-weight:600;margin-bottom:var(--space-2);color:var(--fg-soft)}
.field input{
  width:100%;padding:14px 16px;border-radius:var(--radius-md);
  border:1.5px solid var(--line);background:var(--paper);
  font-family:inherit;font-size:var(--text-md);color:var(--fg);
}
.field input:focus{outline:none;border-color:var(--accent)}

.fine{font-size:var(--text-xs);color:var(--fg-softer);text-align:center;margin-top:var(--space-4);line-height:var(--lead-normal)}

.mock-badge{
  display:inline-block;font-size:var(--text-xs);font-weight:600;
  color:var(--accent-deep);background:var(--accent-soft);
  padding:3px 10px;border-radius:var(--radius-pill);margin-bottom:var(--space-4);
  letter-spacing:var(--track-wide);
}

/* footer */
.foot{margin-top:auto;padding:var(--space-8) 0;text-align:center}
.foot p{font-size:var(--text-xs);color:var(--fg-softer);margin:0}

/* =========================================================================
   Obrigado · onboarding stepper
   ========================================================================= */
.success{text-align:center;margin-bottom:var(--space-8)}
.success__check{
  width:64px;height:64px;border-radius:50%;background:var(--accent);
  color:var(--paper);display:flex;align-items:center;justify-content:center;
  font-size:30px;margin:0 auto var(--space-4);box-shadow:0 8px 24px rgba(92,143,122,0.32);
}

.onb{position:relative}
.onb__bubble{width:96px;height:96px;margin:0 auto var(--space-5);position:relative}
.onb__bubble img{width:100%;height:100%;object-fit:contain;animation:onbBreathe 5s ease-in-out infinite}
@keyframes onbBreathe{50%{transform:scale(1.04)}}

.onb__steps{position:relative;min-height:120px}
.onb__step{display:none;text-align:center;animation:onbFade var(--dur-slow) var(--ease-out)}
.onb__step.is-active{display:block}
@keyframes onbFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.onb__step h3{font-family:var(--font-display);font-size:var(--text-xl);font-weight:400;margin-bottom:var(--space-3)}
.onb__step p{color:var(--fg-soft);margin:0 auto;max-width:42ch}

.onb__dots{display:flex;justify-content:center;gap:var(--space-2);margin:var(--space-6) 0}
.onb__dot{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background var(--dur-fast),width var(--dur-fast)}
.onb__dot.is-active{background:var(--accent);width:22px;border-radius:var(--radius-pill)}

.onb__nav{display:flex;gap:var(--space-3)}