/* =====================================================================
   PEDIDO.CSS — Acompanhamento de pedido (pedido.html / conta-pedido.html)
   ===================================================================== */
.order-wrap{padding:32px 0 64px; max-width:560px; margin:0 auto;}
.order-card{background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-l); padding:28px 24px;}
.order-id{font-size:12.5px; color:var(--color-text-faint); font-weight:500; margin-bottom:6px; font-variant-numeric:tabular-nums;}
.order-total{font-family:var(--font-display); font-size:34px; font-weight:600; letter-spacing:-0.05em; margin-bottom:18px;}

.status-stepper{display:flex; flex-direction:column; margin:22px 0;}
.step{display:flex; gap:12px; position:relative; padding-bottom:26px;}
.step:last-child{padding-bottom:0;}
.step::before{content:''; position:absolute; left:11px; top:26px; bottom:0; width:2px; background:var(--color-border);}
.step:last-child::before{display:none;}
.step-dot{
  width:24px; height:24px; border-radius:50%; background:var(--color-surface-alt); border:2px solid var(--color-border-strong);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; z-index:1;
  color:var(--color-text-faint); font-size:14px;
}
.step.done .step-dot{background:var(--color-success); border-color:var(--color-success); color:#0A0A0B;}
.step.done::before{background:var(--color-success);}
.step.current .step-dot{border-color:var(--color-primary); color:var(--color-primary); animation:pulseDot 1.6s infinite;}
@keyframes pulseDot{ 0%,100%{box-shadow:0 0 0 0 var(--color-accent-soft);} 50%{box-shadow:0 0 0 7px transparent;} }
.step-body h4{font-size:14.5px; font-weight:600; margin-bottom:2px;}
.step-body p{font-size:13px; color:var(--color-text-faint);}

.pix-box{background:var(--color-surface-alt); border:1px solid var(--color-border); border-radius:var(--radius-m); padding:22px; text-align:center; margin:18px 0;}
.pix-box img{width:180px; height:180px; margin:0 auto 14px; border-radius:12px; background:#fff; padding:8px;}
.pix-copy-row{display:flex; gap:8px; margin-top:12px;}
.pix-copy-row input{flex:1; min-width:0; font-size:12px; padding:10px 14px; border-radius:var(--radius-pill); border:1px solid var(--color-border-strong); background:var(--color-surface); color:var(--color-text-dim);}

.key-box{background:var(--color-accent-soft); border:1px dashed var(--color-accent-line); border-radius:var(--radius-m); padding:18px; margin-top:18px;}
.key-box h4{font-size:14px; font-weight:600; color:var(--color-primary); margin-bottom:10px; display:flex; align-items:center; gap:6px;}
.key-value{
  display:flex; align-items:center; justify-content:space-between; gap:8px; background:var(--color-surface);
  border:1px solid var(--color-border); border-radius:10px; padding:11px 13px; font-family:ui-monospace, 'SFMono-Regular', Consolas, monospace; font-size:13.5px;
  margin-bottom:8px; word-break:break-all;
}

.countdown{font-size:13px; color:var(--color-text-faint); text-align:center; margin-top:10px;}