/* ============================================================
   LOJA — PÁGINAS (o pós-compra, a conta/blog e as páginas institucionais)
   ============================================================
   Continuação do styles/loja.css: a CentralCart só aceita arquivos de até
   64 KB, e o loja.css passou disso (12/10/2026). As regras são as mesmas e
   na mesma ordem: este arquivo carrega logo DEPOIS do loja.css
   (layouts/layout.html). As mesmas regras do loja.css valem aqui: só tokens
   --ln-*, nada se mexe no hover.
   ============================================================ */
/* ============================================================
   PÓS-COMPRA — pagamento, pedido, entrega e avaliações
   ============================================================
   As peças que mais de uma tela do pós-compra usa: pages/payment.html,
   pages/order.html, components/order-item-content.html,
   components/chat-delivery.html, components/investor-progress.html,
   components/feedback*.html e o HTML que scripts/main.js, chat.js e
   feedback.js montam. No sistema visual "peça de inventário" (12/10/2026):
   só tokens --ln-*, e nada se mexe no hover (só a borda clareia).
   (Escrito à parte e juntado aqui no mesmo dia.)
   ============================================================ */

/* O CARTÃO dentro do painel (o antigo bg-[#25262F] / bg-[#20212C] com
   borda): o mesmo desenho do .loja-carrinho-item — fundo 2, borda escura e
   a moldura por dentro. */
.loja-cartao {
  background: var(--ln-surface-2);
  border: 2px solid var(--ln-outline);
  outline: 2px solid var(--ln-frame-card);
  outline-offset: -4px;
  border-radius: var(--ln-radius-card);
}

/* O AVISO de uma linha dentro de um bloco: o alerta do sistema
   (ln-card ln-alert ln-alert-*) com o ícone e o texto lado a lado — o
   .lp-nota do formulário. O ícone leva .ln-alert-icon (pega a cor da faixa). */
.loja-aviso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px 12px 17px;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ln-text-secondary);
}
.loja-aviso .ln-alert-icon { flex-shrink: 0; margin-top: 3px; }

/* ============================================================
   COPIAR / BAIXAR (o Pix do pagamento e as chaves do pedido; o main.js
   liga o clique pelo data-action)
   ============================================================ */
/* O botão de copiar DENTRO de um campo (o main.js monta nas chaves do
   pedido): o fantasma pequeno e quadrado. */
.loja-copiar-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
}
/* Copiado ou baixado: o main.js trava o botão por 1,5–2s (disabled) e troca
   o ícone pelo ✓. Aqui o "desabilitado" não apaga o botão — apagaria
   justamente o aviso de que deu certo —, e o ✓ fica no verde de estado. */
.loja-copiar:disabled {
  filter: none;
  opacity: 1;
  cursor: default;
}
.loja-copiar[data-is-copied='true'],
.loja-copiar[data-is-downloaded='true'] { color: var(--ln-success-text); }

/* ============================================================
   ESTRELAS DA AVALIAÇÃO (components/feedback*.html, scripts/feedback.js)
   O <i data-lucide="star"> vira um <svg> com estas classes. A marcada é
   cheia, no âmbar da loja; a vazia, só o contorno bem fraco.
   ============================================================ */
.loja-estrela {
  color: var(--ln-text-quaternary);
  fill: transparent;
  transition: color 0.12s, fill 0.12s;
}
.loja-estrela.is-on,
.loja-estrela-botao.is-on .loja-estrela {
  color: var(--ln-loja-destaque-texto);
  fill: currentColor;
}
/* A estrela que se clica (avaliar o pedido): o feedback.js acende até a
   que está sob o mouse e marca a escolhida com .is-on. Não cresce no hover. */
.loja-estrela-botao {
  display: inline-flex;
  padding: 2px;
  border-radius: var(--ln-radius-sm);
  cursor: pointer;
}
.loja-estrela-botao:focus-visible { outline: 2px solid var(--ln-ring); outline-offset: 1px; }

/* ============================================================
   CHAT DE ENTREGA (components/chat-delivery.html + scripts/chat.js)
   Cada mensagem é um CARTÃO do sistema; as do comprador ficam tingidas da
   marca (a borda da marca com o miolo tingido, como a variação escolhida do
   .loja-variacao). O campo é o poço e o enviar, o botão roxo.
   ============================================================ */
.loja-chat-msg {
  background: var(--ln-surface-2);
  border: 2px solid var(--ln-outline);
  outline: 2px solid var(--ln-frame-card);
  outline-offset: -4px;
  border-radius: var(--ln-radius-card);
  color: var(--ln-text-fg);
}
.loja-chat-msg--minha {
  border-color: var(--ln-brand-400);
  outline-color: color-mix(in srgb, var(--ln-brand-400) 40%, transparent);
  background: color-mix(in srgb, var(--ln-brand-500) 14%, var(--ln-surface-2));
}
.loja-chat-hora { font-size: 10px; line-height: 1; color: var(--ln-text-muted); }
/* A imagem anexada (num slot): no hover só a borda clareia. */
.loja-chat-anexo { transition: border-color 0.12s; }
.loja-chat-anexo:hover { border-color: var(--ln-selection); }
/* A prévia da imagem antes de enviar: o X vermelho (a peça de perigo,
   pequena) aparece no hover — e sempre, em tela de toque. */
.loja-chat-previa { position: relative; }
.loja-chat-tirar {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  opacity: 0;
  transition: opacity 0.12s, filter 0.15s;
}
.loja-chat-previa:hover .loja-chat-tirar,
.loja-chat-tirar:focus-visible { opacity: 1; }
@media (hover: none) {
  .loja-chat-tirar { opacity: 1; }
}
/* O fundo de "solte as imagens aqui" e da imagem ampliada: escurece, não
   desfoca. */
.loja-chat-fundo { background: var(--ln-overlay); }

/* Caixa com ROLAGEM dentro (o chat e o chat ampliado): a moldura vem por
   cima (.ln-moldura-cima das peças). No .loja-dialogo o outline dele carrega
   depois e dobraria a moldura — sai aqui. */
.loja-dialogo.ln-moldura-cima { outline: none; }
/* No celular o chat ampliado ocupa a tela inteira: sem o raio (a moldura
   por cima acompanha). */
@media (max-width: 639px) {
  .loja-dialogo.loja-chat-dialogo {
    border-radius: 0;
    --ln-moldura-raio: 2px;
  }
}

/* ============================================================
   CONTA, LOGIN, PRODUTO, BUSCA E BLOG — o que só esta área tem
   ============================================================
   No sistema visual "peça de inventário" desde 12/10/2026 (escrito à
   parte e juntado aqui no mesmo dia).
   Só tokens --ln-*; nada se mexe no hover.
   ============================================================ */

/* ============================================================
   MENU DA CONTA (components/account-sidebar.html)
   Os botões de antes (roxos), com as peças. O "Sair da conta" é o
   destrutivo discreto: o botão fantasma com o texto no vermelho dos
   estados e o véu no hover — sem botão vermelho.
   ============================================================ */
.loja-sair,
.loja-sair:hover { color: var(--ln-danger-text); }

/* ============================================================
   TEXTO LONGO: o post do blog (pages/post.html e pages/blog.html) e os
   termos (pages/terms.html). O conteúdo vem do painel da CentralCart como
   HTML cru (p, h2, ul, tabela...), e o preflight do Tailwind zera tudo
   isso: aqui ele volta legível, com as cores do sistema (o tema claro
   acompanha sozinho pelos tokens).
   ============================================================ */
/* O cabeçalho do post (voltar, selo, título, autor e data). */
.post-cabeca {
  padding: 1.75rem 1.25rem 1.5rem;
  border-bottom: 1px solid var(--ln-edge-1);
}
.post-conteudo { padding: 1.5rem 1.25rem; }
@media (min-width: 640px) {
  .post-cabeca { padding: 2.25rem 2.5rem 2rem; }
  .post-conteudo { padding: 2.5rem; }
}
.post-back {
  display: flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-bottom: 1rem;
  border-radius: var(--ln-radius-sm);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--ln-text-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.post-back:hover { color: var(--ln-text-fg); }
.post-back:focus-visible { outline: 2px solid var(--ln-ring); outline-offset: 2px; }
.post-title {
  margin: 0.75rem 0 0;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 900;
  line-height: 1.2;
  color: var(--ln-text-fg);
}
.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 0.875rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--ln-edge-1);
  font-size: 0.75rem;
  color: var(--ln-text-muted);
}
.post-meta > span { display: flex; align-items: center; gap: 5px; }
.post-meta > .post-author { gap: 8px; }
.post-author-avatar {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: var(--ln-radius-sm);
  image-rendering: pixelated;
}
.post-author-name { font-size: 0.8rem; font-weight: 600; color: var(--ln-text-secondary); }
/* O pontinho entre o autor e a data (ponto pode ser redondo). */
.post-meta-dot {
  width: 3px;
  height: 3px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ln-text-quaternary);
}

/* O CORPO: o texto no tom de leitura, os títulos no branco do sistema, os
   links e marcadores no roxo claro (a marca nunca é texto sobre o escuro). */
.post-body {
  color: var(--ln-text-body);
  font-size: 0.9375rem;
  line-height: 1.8;
}
.post-body > :first-child { margin-top: 0; }
.post-body p { margin: 0 0 1rem; line-height: 1.8; }
/* COLADO (os termos): o texto vem do editor da CentralCart com um
   parágrafo vazio (<p><br></p>) entre um parágrafo e outro. Com a margem do
   .post-body, cada vão virava margem + linha vazia + margem (~86px; o dono
   viu, 12/10/2026). Aqui é como no original: parágrafo sem margem, letra de
   16px e linha de 1.5 — o espaço é só a linha vazia que o texto já traz. */
.post-body--colado { font-size: 1rem; line-height: 1.5; }
.post-body--colado p { margin: 0; line-height: 1.5; }
.post-body h1,
.post-body h2,
.post-body h3 { color: var(--ln-text-fg); letter-spacing: -0.01em; }
.post-body h1 {
  margin: 2rem 0 0.875rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--ln-edge-1);
  font-size: 1.75rem;
  font-weight: 800;
}
.post-body h2 { margin: 1.75rem 0 0.5rem; font-size: 1.2rem; font-weight: 700; }
.post-body h3 { margin: 1.5rem 0 0.5rem; font-size: 1.05rem; font-weight: 700; }
.post-body strong { color: var(--ln-text-fg); font-weight: 700; }
.post-body em { font-style: italic; }
.post-body ul,
.post-body ol { margin: 0.25rem 0 1rem 1.5rem; }
.post-body ul { list-style: disc; }
.post-body ol { list-style: decimal; }
.post-body li { display: list-item; margin-bottom: 0.3rem; line-height: 1.7; }
.post-body li::marker { color: var(--ln-brand-text); }
.post-body ol li::marker { font-weight: 700; }
.post-body hr { margin: 1.25rem 0; border: 0; border-top: 1px solid var(--ln-edge-1); }
.post-body a { color: var(--ln-brand-text); text-decoration: underline; text-underline-offset: 3px; }
.post-body a:hover { color: var(--ln-text-fg); }
/* A citação: a faixa de 3px do alerta do sistema, sobre o cartão. */
.post-body blockquote {
  margin: 1.25rem 0;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--ln-info);
  border-radius: 0 var(--ln-radius-slot) var(--ln-radius-slot) 0;
  background: var(--ln-surface-2);
  color: var(--ln-text-muted);
  font-style: italic;
}
.post-body blockquote p { margin: 0; }
.post-body code {
  padding: 2px 6px;
  border-radius: var(--ln-radius-sm);
  background: var(--ln-surface-3);
  color: var(--ln-text-fg);
  font-family: monospace; /* a família genérica, como já era (sem nome de fonte) */
  font-size: 0.85rem;
}
/* O bloco de código é um POÇO (o conteúdo afunda). */
.post-body pre {
  margin-bottom: 1.25rem;
  padding: 1rem;
  overflow-x: auto;
  background: var(--ln-well-floor);
  border: 2px solid var(--ln-outline);
  border-radius: var(--ln-radius-slot);
  box-shadow: inset 0 4px 0 0 var(--ln-well-depth), inset 0 -1px 0 0 var(--ln-well-lip);
}
.post-body pre code { padding: 0; background: none; }
.post-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-bottom: 1.25rem;
  border-radius: var(--ln-radius-card);
}
/* A tabela: a borda escura das peças por fora; `separate` (e não
   `collapse`) é o que deixa o canto arredondado aparecer. */
.post-body table {
  width: 100%;
  margin-bottom: 1.25rem;
  overflow: hidden;
  border: 2px solid var(--ln-outline);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--ln-radius-card);
  font-size: 0.875rem;
}
.post-body th {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--ln-edge-1);
  background: var(--ln-surface-2);
  color: var(--ln-text-fg);
  font-weight: 600;
  text-align: left;
}
.post-body td {
  padding: 0.625rem 0.75rem;
  border-bottom: 1px solid var(--ln-edge-1);
  color: var(--ln-text-secondary);
}
.post-body tbody tr:last-child td { border-bottom: 0; }

/* ============================================================
   PÁGINAS INSTITUCIONAIS — Equipe, Jogar, Investidor, RankUP e
   Privacidade, e as duas peças delas que aparecem em outras páginas
   (components/vip-table.html na categoria de VIPs e
   components/investor-grid.html em Meus Pedidos).
   ============================================================
   No sistema visual "peça de inventário" desde 12/10/2026 (escrito à
   parte e juntado aqui no mesmo dia). Só tokens --ln-*; nada se mexe no
   hover.
   O resto dessas páginas usa as peças que já existem (ln-panel,
   ln-card-raised, ln-slot, loja-slot-icone, ln-badge, loja-faq-*...) e o
   que é de uma página só fica no <style> dela. Aqui fica só o que mais de
   uma usa.
   ============================================================ */

/* ============================================================
   COR DE DADO COMO TEXTO (o nome do cargo na Equipe, a tag do investidor,
   SUPER / LEGEND / SUPREME)
   A cor pura do jogo (as do chat do Minecraft) chega pelo HTML em --tc. Como
   TEXTO ela precisa ler nos dois temas: no escuro, os tons escuros (o
   vermelho do Gerente, o roxo da Diretora) clareiam até ler no fundo; no
   CLARO, os tons neon (amarelo, verde, ciano) escurecem — sem isso o
   amarelo some no branco. Só a luminosidade muda: o matiz e a saturação
   continuam os do jogo, e as cores claras ficam como estão no escuro.
   O tema claro aqui é inevitável: a cor vem de dado, não de token.
   Navegador sem `oklch(from ...)` (ou que não aceita o max() ali): a cor
   pura — o teste do @supports é a mesma conta, de propósito.
   ============================================================ */
.loja-cor-dado { color: var(--tc, var(--ln-text-fg)); }
@supports (color: oklch(from red max(l, 0.6) c h)) {
  .loja-cor-dado { color: oklch(from var(--tc, var(--ln-text-fg)) max(l, 0.6) c h); }
  :root[data-theme="light"] .loja-cor-dado { color: oklch(from var(--tc, var(--ln-text-fg)) min(l, 0.55) c h); }
}

/* ============================================================
   PASSOS NUMERADOS (Jogar e RankUP)
   O número num slot pequeno — o .loja-passo-num do modal do Discord —, aqui
   tingido da marca (antes era a bolinha azul).
   ============================================================ */
.loja-passo-num.loja-passo-num--marca { --c: var(--ln-brand-text); }

/* ============================================================
   COMANDO / ENDEREÇO (Jogar e RankUP): o texto no verde dos estados (antes
   o verde escrito na mão). A fonte de máquina vem do utilitário font-mono
   no HTML, como já era — nenhum nome de fonte escrito aqui.
   ============================================================ */
.loja-comando {
  font-weight: 700;
  color: var(--ln-success-text);
}

/* O CAMPO DE COPIAR (o IP, a porta, o /registrar): um POÇO clicável, com o
   texto e o ícone de copiar. No hover a borda clareia; copiado, o script da
   página troca o ícone pelo ✓ (.is-ok). Os nomes não são .loja-copiar* de
   propósito: esses já são do pós-compra (bloco PÓS-COMPRA, mais acima). */
.loja-copiavel {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 2.5rem;
  padding: 0 12px;
  text-align: left;
  background: var(--ln-well-floor);
  border: 2px solid var(--ln-outline);
  border-radius: var(--ln-radius-slot);
  box-shadow:
    inset 0 0 0 2px var(--ln-frame-panel),
    inset 0 4px 0 0 var(--ln-well-depth),
    inset 0 -1px 0 0 var(--ln-well-lip);
  cursor: pointer;
  transition: border-color 0.12s;
}
.loja-copiavel:hover { border-color: var(--ln-selection); }
.loja-copiavel:focus-visible { outline: 2px solid var(--ln-ring); outline-offset: 2px; }
.loja-copiavel-texto {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.loja-copiavel-icone {
  flex-shrink: 0;
  font-size: 0.75rem;
  color: var(--ln-text-muted);
  transition: color 0.12s;
}
.loja-copiavel:hover .loja-copiavel-icone { color: var(--ln-brand-text); }
.loja-copiavel .loja-copiavel-icone.is-ok { color: var(--ln-success-text); }

/* ============================================================
   TABELA (Investidor: a comparação dos níveis; RankUP: os eventos)
   A caixa é uma peça (borda escura, raio de slot) com a moldura POR CIMA
   (.ln-moldura-cima no HTML): a tabela rola de lado no celular e passaria
   por cima de um outline. A rolagem fica num filho (.loja-tabela-rolagem),
   então a moldura não anda junto. O cabeçalho é a faixa do tom mais alto;
   as linhas se separam pelo traço forte. As cores do texto ficam nos
   utilitários do HTML (text-foreground, text-muted-foreground, a cor do
   VIP...).
   ============================================================ */
.loja-tabela {
  overflow: hidden;
  background: var(--ln-slot-fill);
  border: 2px solid var(--ln-outline);
  border-radius: var(--ln-radius-slot);
}
.loja-tabela.ln-moldura-cima {
  --ln-moldura-cor: var(--ln-frame-card);
  --ln-moldura-raio: var(--ln-radius-slot);
}
.loja-tabela-rolagem { overflow-x: auto; }
.loja-tabela table { width: 100%; border-collapse: collapse; }
.loja-tabela thead th { background: var(--ln-surface-3); }
.loja-tabela tbody tr { border-top: 1px solid var(--ln-edge-2); }