/*
 * IDENTIDADE VISUAL DOS MARKETPLACES — selos (.mk-selo) e botões/links externos (.mk-cta).
 *
 * Fonte única do padrão. Markup em app/Views/partials/mk-selo.php e mk-cta.php; identidade em
 * App\Domain\Catalog\MarketplaceBrand. Só apresentação: nada aqui decide link, oferta ou preço.
 *
 * Os logos são os arquivos oficiais do projeto (assets/img/marketplaces/*.png), de um tom só: aqui eles são usados como
 * MÁSCARA e coloridos por marketplace (símbolo recortado do próprio arquivo, sem redesenhar). Nome da loja SEMPRE em texto
 * ao lado do símbolo: a identificação não depende só da cor.
 *
 * Cores (contraste conferido, ver docs):
 *   Mercado Livre  #FFE600 + texto #1A1A1A
 *   Shopee         #D8381A + texto #FFFFFF  (o #EE4D2D da marca dá só 3,7:1 com texto branco; este dá 4,7:1)
 *   Amazon         #232F3E + texto #FFFFFF, detalhe #FF9900 no logo
 * Fica de fora: o azul do Garimpaí, os cards brancos e o botão "Ver detalhes" (neutros, não usam estas cores).
 */

/* ---------- símbolo (logo oficial por máscara) ---------- */
.mk-sym {
  --mk-h: 1rem;
  display: inline-block;
  flex: none;
  height: var(--mk-h);
  width: calc(var(--mk-h) * var(--mk-razao, 1));
  background: currentColor;
  -webkit-mask: var(--mk-logo) left center / auto 100% no-repeat;
  mask: var(--mk-logo) left center / auto 100% no-repeat;
}
/* largura do símbolo = fração da largura do arquivo (ML: mão; Shopee: sacola; Amazon: o "a" e o início do sorriso) */
.mk-selo--mercadolivre .mk-sym, .mk-cta--mercadolivre .mk-sym { --mk-logo: url('/assets/img/marketplaces/mercadolivre.png'); --mk-razao: 1.18; }
.mk-selo--shopee .mk-sym, .mk-cta--shopee .mk-sym { --mk-logo: url('/assets/img/marketplaces/shopee.png'); --mk-razao: 0.92; }
.mk-selo--amazon .mk-sym, .mk-cta--amazon .mk-sym { --mk-logo: url('/assets/img/marketplaces/amazon.png'); --mk-razao: 2.69; }   /* Amazon: logo completo (o sorriso laranja é parte do arquivo) */

/* ---------- selo ---------- */
.mk-selo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.75rem;
  padding: 0.2rem 0.65rem 0.2rem 0.5rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.mk-selo .mk-sym { --mk-h: 1.1rem; }
.mk-selo--mercadolivre { background: #FFF6B8; color: #1A1A1A; }
.mk-selo--mercadolivre .mk-sym { background: #2D3277; }
.mk-selo--shopee { background: #FDEBE5; color: #7A2311; }
.mk-selo--shopee .mk-sym { background: #EE4D2D; }
.mk-selo--amazon { background: #EDEFF2; color: #232F3E; }
.mk-selo--amazon .mk-sym { --mk-h: 1rem; background: linear-gradient(#232F3E 0 66%, #FF9900 66% 100%); }
/* o logo da Amazon já escreve o nome: o texto fica só para leitores de tela (sem repetir "amazon Amazon") */
.mk-selo--amazon .mk-selo__nome { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mk-selo--amazon { position: relative; padding-left: 0.65rem; }
.mk-selo--neutro { background: hsl(var(--muted, 210 20% 96%)); color: hsl(var(--muted-foreground, 215 16% 35%)); border: 1px solid hsl(var(--border, 214 20% 88%)); padding-left: 0.65rem; }

/* ---------- botão / link externo ---------- */
.mk-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-sizing: border-box;
  min-height: 46px;   /* altura fixa por tamanho: igual nos três marketplaces, qualquer que seja o símbolo */
  padding: 0.4rem 1rem;
  border: 1px solid transparent;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.mk-cta--bloco { display: flex; width: 100%; }
.mk-cta .mk-sym { --mk-h: 1.5rem; }
.mk-cta .mk-cta__ext { width: 1rem; height: 1rem; flex: none; }
.mk-cta__txt { min-width: 0; white-space: nowrap; }
.mk-cta:active { transform: scale(0.99); }
.mk-cta:focus-visible { outline: 3px solid hsl(var(--primary, 215 72% 18%)); outline-offset: 2px; }

.mk-cta--lg { min-height: 54px; padding: 0.4rem 1.5rem; font-size: 1rem; box-shadow: 0 2px 6px rgb(0 0 0 / 0.12); }
.mk-cta--lg .mk-sym { --mk-h: 1.75rem; }
.mk-cta--sm { min-height: 40px; padding: 0.3rem 0.85rem; font-size: 0.8125rem; border-radius: 0.6rem; }
.mk-cta--sm .mk-sym { --mk-h: 1.25rem; }

.mk-cta--mercadolivre { background: #FFE600; color: #1A1A1A; border-color: #E6CF00; }
.mk-cta--mercadolivre:hover { background: #F5DA00; border-color: #CDB800; }
.mk-cta--shopee { background: #D8381A; color: #FFFFFF; border-color: #C23015; }
.mk-cta--shopee:hover { background: #BF2F12; border-color: #A92810; }
.mk-cta--amazon { background: #232F3E; color: #FFFFFF; border-color: #232F3E; }
.mk-cta--amazon:hover { background: #37475A; border-color: #37475A; }
.mk-cta--amazon .mk-sym { --mk-h: 1.2rem; background: linear-gradient(#FFFFFF 0 66%, #FF9900 66% 100%); }
.mk-cta--lg.mk-cta--amazon .mk-sym { --mk-h: 1.4rem; }
/* marketplace sem identidade própria: botão neutro, com o nome no texto */
.mk-cta--neutro { background: hsl(var(--card, 0 0% 100%)); color: hsl(var(--foreground, 215 30% 15%)); border-color: hsl(var(--border, 214 20% 80%)); }
.mk-cta--neutro:hover { background: hsl(var(--muted, 210 20% 96%)); }

@media (max-width: 480px) {
  .mk-cta__txt { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-cta { transition: none; }
  .mk-cta:active { transform: none; }
}

/* ---------- ajustes nos cards da home ---------- */
.gp-card__foot .mk-selo { align-self: flex-start; }
.gp-card .mk-cta { font-size: 0.8125rem; padding-inline: 0.6rem; }
.gp-card .mk-cta .mk-sym { --mk-h: 1.3rem; }
.gp-card .mk-cta--amazon .mk-sym { --mk-h: 1.05rem; }
/* "A partir de" (faixa de preço) discreto, acima/ao lado do valor — não do tamanho do preço */
.gp-card__price > span:not(.gp-card__desconto) { font-size: 0.72rem; font-weight: 600; color: hsl(var(--muted-foreground)); }

/* ---------- Mercado Livre: emblema (anel azul, miolo amarelo, mãos brancas, contornos azul-marinho) ----------
   Três camadas alinhadas (contorno, miolo e mãos), recortadas do arquivo fornecido pelo cliente em resolução nativa
   (tests/tools/make_mercadolivre_emblema.ps1): o contorno/aperto de mão (alfa = tinta) e o miolo calculado do próprio anel.
   Substitui o recorte do logo inteiro, que era pequeno demais e deixava o miolo desalinhado. */
.mk-selo--mercadolivre .mk-sym,
.mk-cta--mercadolivre .mk-sym {
  --mk-razao: 1.42;           /* 537 × 378 px */
  position: relative;
  background: none;
  -webkit-mask: none;
  mask: none;
}
.mk-selo--mercadolivre .mk-sym::before,
.mk-cta--mercadolivre .mk-sym::before,
.mk-selo--mercadolivre .mk-sym::after,
.mk-cta--mercadolivre .mk-sym::after {
  content: "";
  position: absolute;
  inset: 0;
}
.mk-selo--mercadolivre .mk-sym::before,
.mk-cta--mercadolivre .mk-sym::before {
  /* miolo amarelo do emblema, com SÓ as mãos (e os punhos) em branco por cima */
  background: url('/assets/img/marketplaces/mercadolivre-emblema-maos.png') center / 100% 100% no-repeat, #FFE600;
  -webkit-mask: url(/assets/img/marketplaces/mercadolivre-emblema-miolo.png) center / 100% 100% no-repeat;
  mask: url(/assets/img/marketplaces/mercadolivre-emblema-miolo.png) center / 100% 100% no-repeat;
}
.mk-selo--mercadolivre .mk-sym::after,
.mk-cta--mercadolivre .mk-sym::after {
  background: #2D3277;
  -webkit-mask: url(/assets/img/marketplaces/mercadolivre-emblema.png) center / 100% 100% no-repeat;
  mask: url(/assets/img/marketplaces/mercadolivre-emblema.png) center / 100% 100% no-repeat;
}
.mk-selo--mercadolivre .mk-sym { --mk-h: 1.3rem; }
.mk-cta--mercadolivre .mk-sym { --mk-h: 1.9rem; margin-block: -0.5rem; }   /* maior, sem aumentar a altura do botão (igual à da Shopee) */
.mk-cta--lg.mk-cta--mercadolivre .mk-sym { --mk-h: 2.1rem; margin-block: -0.5rem; }
.mk-cta--sm.mk-cta--mercadolivre .mk-sym { --mk-h: 1.5rem; margin-block: -0.35rem; }
.gp-card .mk-cta--mercadolivre .mk-sym { --mk-h: 1.6rem; margin-block: -0.5rem; }