/* ===========================================================
   LOJA, CHECKOUT, RETORNO DO PAGAMENTO E PEDIDOS
   Depende do style.css (botões, campos, mensagens, cards).
   =========================================================== */

.header .link-topo { color: #fff; font-size: 12px; text-decoration: none; opacity: 0.85; }
.titulo-pagina { margin: 4px 0 16px; font-size: 20px; }
.subtitulo { margin: -8px 0 16px; font-size: 13px; color: rgba(13, 27, 47, 0.65); }
.mensagem-aviso { background: rgba(230, 180, 60, 0.15); color: #7a5c0e; line-height: 1.5; }
.vazio-pagina { padding: 32px 8px; text-align: center; font-size: 14px; color: rgba(13, 27, 47, 0.65); }
.vazio-pagina .btn { margin-top: 12px; }
.nota-pagamento { margin: 14px 4px 0; font-size: 12px; line-height: 1.5; text-align: center; color: rgba(13, 27, 47, 0.6); }

/* ---------- Cards de produto ---------- */
.produto { position: relative; margin-bottom: 16px; padding: 22px 20px; text-align: center; background: var(--bege, #f0eee9); color: var(--azul-escuro, #0d1b2f); border-radius: 16px; }
.produto h2 { margin: 0 0 12px; font-size: 17px; }
.produto-icone { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%; background: rgba(13, 27, 47, 0.08); }
.produto-descricao { margin: 0 0 14px; font-size: 13px; line-height: 1.55; opacity: 0.8; }
.produto-preco { margin: 0 0 14px; font-size: 24px; font-weight: 700; }
.produto-destaque { background: var(--azul-escuro, #0d1b2f); color: #fff; }
.produto-destaque .produto-icone { background: rgba(255, 255, 255, 0.1); color: var(--verde-destaque, #5DCAA5); }
.selo { position: absolute; top: 12px; right: 12px; padding: 3px 9px; border-radius: 20px; background: var(--verde-destaque, #5DCAA5); color: var(--azul-escuro, #0d1b2f); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; }

/* ---------- Checkout ---------- */
.resumo { margin-bottom: 16px; padding: 16px 18px; background: var(--bege, #f0eee9); border-radius: 16px; }
.resumo-rotulo { margin: 0 0 2px; font-size: 12px; color: rgba(13, 27, 47, 0.6); }
.resumo-nome { margin: 0; font-size: 16px; font-weight: 700; }
.resumo-detalhe { margin: 4px 0 0; font-size: 13px; color: rgba(13, 27, 47, 0.7); }
.resumo-preco { margin: 10px 0 0; font-size: 24px; font-weight: 700; }
.form-checkout .card { margin-bottom: 16px; }
.form-checkout .card h2 { margin: 0 0 14px; font-size: 15px; }
.linha-campos { display: flex; gap: 10px; }
.campo-grande { flex: 1 1 70%; }
.campo-pequeno { flex: 0 0 90px; }
.aceite { display: flex; align-items: flex-start; gap: 10px; margin: 4px 0 18px; font-size: 13px; line-height: 1.5; }
.aceite input { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Retorno do pagamento ---------- */
.aviso-pedido-pagina { max-width: 480px; margin: 0 auto; padding: 48px 24px 56px; text-align: center; }
.aviso-pedido-pagina h1 { margin: 0 0 8px; font-size: 20px; }
.aviso-pedido-pagina p { margin: 0 0 14px; font-size: 14px; line-height: 1.6; color: rgba(13, 27, 47, 0.8); }
.aviso-pedido-pagina .detalhe { font-size: 13px; color: rgba(13, 27, 47, 0.6); }
.aviso-pedido-pagina .btn { margin-top: 8px; }
.aviso-icone { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; }
.aviso-ok     { background: rgba(93, 202, 165, 0.2); color: #1a8a5f; }
.aviso-espera { background: rgba(230, 180, 60, 0.18); color: #a17d1a; }
.aviso-erro   { background: rgba(220, 38, 38, 0.1);  color: #dc2626; }
.link-discreto { display: inline-block; margin-top: 14px; font-size: 13px; color: rgba(13, 27, 47, 0.7); }

/* ---------- Meus pedidos ---------- */
.pedido-item { margin-bottom: 12px; padding: 16px 18px; border: 1px solid rgba(13, 27, 47, 0.12); border-radius: 14px; }
.pedido-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pedido-nome { margin: 0 0 3px; font-size: 15px; font-weight: 700; }
.pedido-info { margin: 0; font-size: 12px; color: rgba(13, 27, 47, 0.6); overflow-wrap: anywhere; }
.pedido-nota { margin: 10px 0 0; font-size: 12px; color: rgba(13, 27, 47, 0.65); }
.pedido-acoes { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.pedido-acoes form { margin: 0; }
.btn-pedido { margin-top: 12px; padding: 11px; font-size: 13px; }
.pedido-acoes .btn-pedido { margin-top: 0; }
.status { flex-shrink: 0; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.status-pago        { background: rgba(93, 202, 165, 0.18); color: #1a8a5f; }
.status-pendente    { background: rgba(230, 180, 60, 0.18); color: #8a6a14; }
.status-recusado, .status-cancelado { background: rgba(220, 38, 38, 0.1); color: #c42323; }
.status-reembolsado { background: rgba(13, 27, 47, 0.08); color: #0d1b2f; }