/* =====================================================================
   Aurelle - Pagina do pedido (JohannWeb)
   ===================================================================== */

.ped{max-width:760px;margin:0 auto;padding:26px 20px 64px}
@media (min-width:960px){.ped{padding:40px 32px 80px}}

.ped-caixa{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}

.ped-topo{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;
  padding:26px 22px 22px;border-bottom:1px solid var(--line);
}
@media (min-width:720px){.ped-topo{padding:30px 30px 26px}}
.ped-topo h1{font-family:var(--serif);font-size:clamp(26px,4vw,34px);font-weight:600;line-height:1.1;letter-spacing:.01em}
.ped-quando{font-size:13px;color:var(--muted);margin-top:6px}

.ped-status{
  flex-shrink:0;font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:7px 14px;border-radius:999px;background:var(--taupe-soft);color:var(--taupe-dark);
}
.ped-status.ped-confirmado{background:#E4EFE6;color:#2C6B3A}
.ped-status.ped-enviado{background:#E3ECF5;color:#2B5580}
.ped-status.ped-cancelado{background:#F5E4E2;color:#8C3A30}

/* --- Itens --- */
.ped-itens{padding:6px 22px}
@media (min-width:720px){.ped-itens{padding:6px 30px}}
.ped-item{display:flex;align-items:center;gap:14px;padding:16px 0;border-bottom:1px solid var(--line)}
.ped-item:last-child{border-bottom:none}
.ped-foto{width:66px;height:88px;flex-shrink:0;border-radius:var(--r-sm);overflow:hidden;background:var(--cream-deep)}
.ped-foto img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.ped-foto:hover img{transform:scale(1.06)}
.ped-info{flex:1;min-width:0}
.ped-nome{display:block;font-weight:600;font-size:14.5px;line-height:1.3;margin-bottom:4px}
.ped-nome:hover{color:var(--taupe-dark)}
.ped-det{font-size:12.5px;color:var(--muted)}
.ped-valor{flex-shrink:0;font-weight:700;font-size:15px}

/* --- Contas --- */
.ped-contas{padding:20px 22px;background:var(--cream);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
@media (min-width:720px){.ped-contas{padding:22px 30px}}
.ped-contas .srow{display:flex;justify-content:space-between;gap:16px;font-size:14px;color:var(--muted);padding:5px 0}
.ped-contas .srow.total{
  margin-top:10px;padding-top:14px;border-top:1px solid var(--line-deep);
  font-size:17px;font-weight:700;color:var(--ink);
}

/* --- Aviso de seguranca --- */
.ped-aviso{display:flex;gap:12px;align-items:flex-start;padding:20px 22px}
@media (min-width:720px){.ped-aviso{padding:22px 30px}}
.ped-aviso svg{width:22px;height:22px;flex-shrink:0;color:var(--taupe);margin-top:1px}
.ped-aviso b{display:block;font-size:13.5px;margin-bottom:4px}
.ped-aviso span{display:block;font-size:13px;line-height:1.6;color:var(--muted)}

/* --- Acoes --- */
.ped-acoes{display:grid;gap:10px;padding:0 22px 22px}
@media (min-width:560px){.ped-acoes{grid-template-columns:1.4fr 1fr;padding:0 30px 26px}}
.ped-acoes .btn{width:100%}

.ped-guardar{text-align:center;font-size:12.5px;color:var(--muted);padding:0 22px 24px}

/* --- Confirmacao que aparece antes de ir para o WhatsApp --- */
.ped-feito{text-align:center;padding:8px 4px 4px}
.ped-feito .marca{
  width:54px;height:54px;margin:0 auto 16px;border-radius:999px;
  background:var(--taupe-soft);color:var(--taupe-dark);
  display:flex;align-items:center;justify-content:center;
}
.ped-feito .marca svg{width:26px;height:26px}
.ped-feito b{display:block;font-family:var(--serif);font-size:21px;font-weight:600;margin-bottom:6px}
.ped-feito .cod{
  display:inline-block;margin:2px 0 12px;padding:6px 14px;border-radius:999px;
  background:var(--cream-deep);font-size:13px;font-weight:700;letter-spacing:.06em;
}
.ped-feito p{font-size:13.5px;color:var(--muted);line-height:1.6;margin-bottom:18px;max-width:330px;margin-left:auto;margin-right:auto}