/* ════════════════════════════════════════════════════════════════════════
   AMIRA — meus pedidos e comprovante  (tokens em base.css)
   O comprovante é um documento: lê-se como um recibo de boutique (papel
   claro, fios, valores alinhados em Bodoni) e imprime limpo (@media print).
   ════════════════════════════════════════════════════════════════════════ */

.cp-main, .mp-main {
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
  padding: var(--s-7) var(--margem) var(--secao);
}

/* ── Selo de status (pedidos e comprovante) ────────────────────────────── */
.cp-selo, .mp-selo {
  flex: none;
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: 4px var(--s-3);
  border: 1px solid currentColor;
  border-radius: var(--raio-pilula);
  font-size: var(--t-micro); font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  white-space: nowrap;
}
.cp-selo::before, .mp-selo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.cp-selo--pago, .mp-selo--pago { color: var(--sucesso); }
.cp-selo--pendente, .mp-selo--pendente { color: var(--aviso); }
.cp-selo--recusado, .cp-selo--cancelado, .mp-selo--recusado, .mp-selo--cancelado { color: var(--perigo); }

/* ── Meus pedidos ──────────────────────────────────────────────────────── */
.mp-cabecalho {
  display: flex; flex-direction: column; gap: var(--s-2);
  margin-bottom: var(--s-7);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--linha);
}
.mp-cabecalho p { font-size: var(--t-pp); color: var(--tinta-3); }
#mp-lista { display: flex; flex-direction: column; }
.mp-lista { display: flex; flex-direction: column; }

.mp-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "topo topo" "fotos fotos" "rodape rodape";
  gap: var(--s-3);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--linha);
  color: var(--tinta);
}
.mp-card::after {
  content: "→";
  position: absolute; right: 0; top: 50%;
  translate: 0 -50%;
  font-size: 1.2rem; color: var(--tinta-3);
  transition: transform var(--t-ui) var(--ease), color var(--t-rapido);
}
@media (hover: hover) {
  .mp-card:hover::after { transform: translateX(4px); color: var(--tinta); }
  .mp-card:hover .mp-card__codigo { color: var(--marca); }
}
.mp-card__topo { grid-area: topo; display: flex; align-items: center; gap: var(--s-4); padding-right: var(--s-7); }
.mp-card__codigo {
  font-family: var(--f-display);
  font-size: var(--t-3);
  letter-spacing: 0.06em;
  transition: color var(--t-rapido);
}
.mp-card__miniaturas { grid-area: fotos; display: flex; gap: var(--s-2); }
.mp-card__miniaturas img {
  width: 56px; aspect-ratio: 4 / 5;
  object-fit: contain; padding: 4px;   /* fixo: % de padding mede a largura do CONTÊINER (a fila toda) */
  background: var(--pedestal);
  mix-blend-mode: multiply;
}
body[data-theme="dark"] .mp-card__miniaturas img { mix-blend-mode: normal; }
.mp-card__mais {
  width: 56px; aspect-ratio: 4 / 5;
  display: grid; place-items: center;
  border: 1px solid var(--linha);
  font-size: var(--t-pp); color: var(--tinta-3);
}
.mp-card__rodape {
  grid-area: rodape;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4);
  padding-right: var(--s-7);
  font-size: var(--t-pp); color: var(--tinta-2);
}
.mp-card__total { font-family: var(--f-display); font-size: 1.25rem; color: var(--tinta); font-variant-numeric: lining-nums tabular-nums; }

/* ── Comprovante ───────────────────────────────────────────────────────── */
.cp {
  position: relative;
  padding: clamp(var(--s-6), 4vw, var(--s-8));
  background: var(--porcelana);
  border: 1px solid var(--linha);
  border-top: 1px solid var(--ouro);
}
body[data-theme="light"] .cp { background: #FFFFFF; }
.cp-topo {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--linha);
}
.cp-eyebrow { font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--tinta-3); margin-bottom: var(--s-2); }
.cp-titulo { font-size: var(--t-2); }
.cp-muted { font-size: var(--t-pp); line-height: 1.6; color: var(--tinta-2); }

.cp-codigo-bloco {
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  margin-top: var(--s-6);
  padding: var(--s-6) var(--s-4);
  background: var(--pedestal);
  text-align: center;
}
.cp-codigo-rotulo { font-size: var(--t-micro); font-weight: 500; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--tinta-3); }
.cp-codigo { font-family: var(--f-display); font-size: clamp(2.2rem, 1.6rem + 3vw, 3.4rem); letter-spacing: 0.12em; font-variant-numeric: lining-nums; }
.cp-qr svg, .cp-qr img { width: 168px; height: auto; margin-inline: auto; background: #fff; padding: var(--s-2); }

.cp-meta {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-4);
  margin-top: var(--s-6);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--linha);
}
.cp-meta div { display: flex; flex-direction: column; gap: var(--s-1); }
.cp-meta span { font-size: var(--t-micro); letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-3); }
.cp-meta strong { font-size: var(--t-p); font-weight: 500; }

.cp-itens { margin-top: var(--s-5); overflow-x: auto; }
.cp-tabela { width: 100%; border-collapse: collapse; font-size: var(--t-p); font-variant-numeric: tabular-nums; }
.cp-col-qtd { width: 4.5rem; }
.cp-col-valor { width: 7.5rem; }
.cp-tabela th {
  padding: 0 0 var(--s-3);
  border-bottom: 1px solid var(--linha);
  text-align: left;
  font-size: var(--t-micro); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tinta-3);
}
.cp-tabela th:not(:first-child), .cp-tabela td:not(:first-child) { text-align: right; white-space: nowrap; }
.cp-tabela td { padding: var(--s-3) 0; border-bottom: 1px dashed var(--linha); }
.cp-tag {
  display: inline-block; margin-left: var(--s-2); padding: 1px var(--s-2);
  border: 1px solid var(--linha-forte); border-radius: var(--raio-pilula);
  font-size: 10px; letter-spacing: 0.1em; color: var(--tinta-2);
}
.cp-total-linha td { padding: var(--s-1) 0; border-bottom: 0; color: var(--tinta-2); }
.cp-tabela tfoot tr:first-child td { padding-top: var(--s-4); }
.cp-total-linha--final td { padding-top: var(--s-3); border-top: 1px solid var(--ouro); color: var(--tinta); font-size: var(--t-4); }
.cp-total-linha--final td:last-child { font-family: var(--f-display); font-size: var(--t-3); }

.cp-endereco { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--linha); font-size: var(--t-p); line-height: 1.6; }
.cp-secao-titulo { margin-bottom: var(--s-2); font-size: var(--t-micro); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tinta-3); }
.cp-rodape { margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--linha); font-size: var(--t-pp); }

.cp-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-6); }
.cp-btn__ic { display: inline-flex; width: 16px; height: 16px; }
.cp-btn__ic svg { width: 100%; height: 100%; }
.cp-link {
  margin-left: auto;
  font-size: var(--t-micro); letter-spacing: var(--track-micro); text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px;
  color: var(--tinta-2);
}
@media (hover: hover) { .cp-link:hover { color: var(--tinta); } }

/* ── Responsivo ────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .cp { padding: var(--s-5); margin-inline: calc(var(--margem) * -1); border-inline: 0; }
  .cp-topo { flex-direction: column; }
  .cp-meta { grid-template-columns: 1fr 1fr; }
  .cp-col-qtd { width: 2.6rem; }
  .cp-col-valor { width: 5.8rem; }
  .cp-tabela { font-size: var(--t-pp); }
  .cp-link { margin-left: 0; }
  .cp-acoes .btn, .cp-acoes .btn-primary, .cp-acoes .btn-outline { width: 100%; }
  .mp-card__codigo { font-size: 1.25rem; }
  .mp-card__topo { flex-wrap: wrap; gap: var(--s-2); }
}

/* ── Impressão: só o comprovante, em papel branco ──────────────────────── */
@media print {
  .faixa-aviso, .topo, .busca-folha, .veu, .mobile-menu-panel, .mobile-menu-overlay,
  .rodape, .whatsapp-btn, .cp-acoes, .amira-toasts, .amira-cookie-banner, .cortina, .pular {
    display: none !important;
  }
  body, body[data-theme="dark"] { background: #fff !important; color: #000 !important; }
  .cp-main { padding: 0; max-width: none; }
  .cp { border: 0; padding: 0; background: #fff !important; color: #000; margin: 0; }
  .cp-codigo-bloco { break-inside: avoid; background: #f5f5f5; }
  .cp-muted, .cp-meta span, .cp-tabela th { color: #444 !important; }
}