/* ==========================================================================
   BÔNUS — um PEDIDO, não sete cartões (23/09/2026)

   Antes: grade de sete caixas iguais (a "cara de IA" que o dono reprovou).
   Agora os bônus são o que eles são: itens de um pedido que sai de graça
   junto com a vaga — um cupom impresso, em letra mono, com a serrilha de
   papel em cima e embaixo. Conversa com o universo de loja do TikTok Shop sem
   copiar a interface dele, e lê de uma vez: sete linhas, um total.
   ========================================================================== */
.mgxpedido .mgxpedido__grade {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.mgxpedido .mgxpedido__texto { display: grid; gap: 1rem; align-content: center; }
.mgxpedido .mgxpedido__texto .mgxs__acao { margin-block-start: 0.75rem; }

.mgxpedido .mgxpedido__cupom {
  --papel: #F3F1EC;
  --tinta: #10151B;
  --apoio: #5B6570;
  position: relative;
  margin: 0;
  justify-self: center;
  inline-size: min(100%, 30rem);
  padding: 1.75rem 1.5rem 1.5rem;
  background: var(--papel);
  color: var(--tinta);
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  transform: rotate(-1.5deg);
  box-shadow: 0 30px 60px -30px rgba(0, 167, 255, 0.45), 0 18px 40px -20px rgba(0, 0, 0, 0.8);
  /* serrilha de papel em cima e embaixo (recorte, sem imagem) */
  -webkit-mask:
    radial-gradient(circle at 8px 0, transparent 6px, #000 6.5px) top / 16px 51% repeat-x,
    radial-gradient(circle at 8px 100%, transparent 6px, #000 6.5px) bottom / 16px 51% repeat-x;
          mask:
    radial-gradient(circle at 8px 0, transparent 6px, #000 6.5px) top / 16px 51% repeat-x,
    radial-gradient(circle at 8px 100%, transparent 6px, #000 6.5px) bottom / 16px 51% repeat-x;
}
.mgxpedido .mgxpedido__topo {
  font-style: normal;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.mgxpedido .mgxpedido__loja {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: 0.02em;
}
.mgxpedido .mgxpedido__status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  background: #E3F4FF;
  color: #004C82;
  font-size: 0.875rem;
  font-weight: 600;
}
.mgxpedido .mgxpedido__status i {
  inline-size: 0.875rem;
  block-size: 0.875rem;
  border-radius: 50%;
  background: var(--ihub-azul, #00A7FF) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.mgxpedido .mgxpedido__meta {
  margin: 0.5rem 0 0.75rem;
  padding-block-end: 0.75rem;
  border-block-end: 1px dashed rgba(16, 21, 27, 0.25);
  font-size: 0.875rem;
  color: var(--apoio);
}
.mgxpedido .mgxpedido__itens { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.mgxpedido .mgxpedido__itens li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.75rem;
  align-items: baseline;
  margin: 0;
  padding-block: 0.5rem;
  list-style: none;
  border-block-end: 1px dotted rgba(16, 21, 27, 0.14);
}
.mgxpedido .mgxpedido__n { font-size: 0.875rem; color: var(--apoio); }
.mgxpedido .mgxpedido__nome {
  display: grid;
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--tinta);
}
.mgxpedido .mgxpedido__nome small {
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--apoio);
}
.mgxpedido .mgxpedido__preco {
  font-size: 0.875rem;
  color: var(--apoio);
  white-space: nowrap;
}
.mgxpedido .mgxpedido__total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 0.875rem 0 0;
  padding-block-start: 0.75rem;
  border-block-start: 2px solid var(--tinta);
  font-size: 0.9375rem;
  font-weight: 600;
}
.mgxpedido .mgxpedido__total b {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  font-size: 1.5rem;
  color: #0077C8;
}
.mgxpedido .mgxpedido__rodape { margin: 0.375rem 0 0; font-size: 0.875rem; color: var(--apoio); }

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .mgxpedido .mgxpedido__cupom {
      animation: mgxpedido-imprimir linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 35%;
    }
  }
}
@keyframes mgxpedido-imprimir {
  from { opacity: 0; transform: translateY(40px) rotate(-4deg); clip-path: inset(0 0 100% 0); }
  to { opacity: 1; transform: rotate(-1.5deg); clip-path: inset(0 0 0 0); }
}

@media (max-width: 63.99rem) {
  .mgxpedido .mgxpedido__grade { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .mgxpedido .mgxpedido__texto { text-align: start; }
}
/* celular: o cupom perde a descrição de cada item (o nome já diz) e fica reto */
@media (max-width: 47.99rem) {
  .mgxpedido .mgxpedido__cupom { transform: none; padding: 1.25rem 1rem 1.125rem; inline-size: 100%; }
  .mgxpedido .mgxpedido__nome small { display: none; }
  .mgxpedido .mgxpedido__itens li { padding-block: 0.375rem; }
  .mgxpedido .mgxpedido__texto .mgxs__acao { display: none; }
  @keyframes mgxpedido-imprimir { from { opacity: 0; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
}

/* ---- caber na tela junto com a faixa (23/09/2026, 20h) -------------------- */
.mgxpedido.mgxs { padding-block: 2.5rem; }
.mgxpedido .mgxpedido__cupom { padding-block: 1.5rem 1.25rem; }
.mgxpedido .mgxpedido__itens li { padding-block: 0.4375rem; }
@media (max-width: 63.99rem) and (min-width: 48rem) {
  .mgxpedido .mgxpedido__nome small { display: none; }
}
@media (max-width: 47.99rem) {
  .mgxpedido.mgxs { padding-block: 1.25rem; }
  .mgxpedido .mgxs__sub { font-size: 0.9375rem; }
}
@media (max-width: 47.99rem) and (max-height: 50rem) {
  .mgxpedido .mgxs__sub, .mgxpedido .mgxpedido__meta, .mgxpedido .mgxpedido__rodape { display: none; }
  .mgxpedido .mgxpedido__itens li { padding-block: 0.3125rem; }
}
@media (max-width: 47.99rem) {
  .mgxpedido .mgxpedido__meta, .mgxpedido .mgxpedido__rodape { display: none; }
  .mgxpedido .mgxpedido__topo { margin-block-end: 0.5rem; padding-block-end: 0.5rem; border-block-end: 1px dashed rgba(16, 21, 27, 0.25); }
}