/* =========================================================
   ZH OUTFITS — ÍCONE DE COMPARTILHAR DO CARD
   Fica do lado do nome da peça. O espaço dele é sempre
   reservado (o nome não "pula" quando ele aparece), mas o
   ícone só fica visível quando o card está em destaque
   (classe .is-destaque, ver css/card-destaque.css).
   Lógica em js/card-compartilhar.js.
   ========================================================= */
.card__nome-linha{
  display:flex; align-items:flex-start; justify-content:space-between; gap:8px;
}
.card__nome-linha .card__name{ flex:1; min-width:0; }

.card__share{
  position:relative; flex:none;
  width:34px; height:34px; margin:-5px -4px 0 0;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:50%; border:1px solid var(--gold);
  background:var(--surface-2); color:var(--gold-hi);
  cursor:pointer;
  opacity:0; pointer-events:none; transform:scale(.7);
  transition:opacity .25s ease .15s, transform .25s ease .15s, background .2s, color .2s;
}
.card.is-destaque .card__share{ opacity:1; pointer-events:auto; transform:scale(1); }
.card__share:hover{ background:var(--gold); color:#100c02; }

/* ícone certinho no meio do círculo: sem espaçamento padrão do botão,
   svg como bloco (sem o "vão" de texto embaixo) e um ajuste ótico de 1px
   pra esquerda, porque o desenho tem 2 bolinhas na direita e 1 na esquerda */
.card__share{ padding:0; line-height:0; box-sizing:border-box; }
.card__share svg{ display:block; flex:none; }
.card__share-icone{ transform:translateX(-1px); }

/* ícone normal x ícone de "copiado" (✓) */
.card__share .card__share-ok{ display:none; }
.card__share.is-copiado{ background:var(--gold); color:#100c02; }
.card__share.is-copiado .card__share-icone{ display:none; }
.card__share.is-copiado .card__share-ok{ display:block; }

/* balãozinho com o aviso ("Link copiado!") em cima do ícone */
.card__share[data-aviso]::after{
  content:attr(data-aviso);
  line-height:1.3; /* o botão usa line-height 0 pra centralizar o ícone */
  position:absolute; bottom:calc(100% + 8px); right:0;
  padding:5px 9px; border-radius:var(--r-sm);
  background:var(--gold); color:#100c02;
  font-size:.66rem; font-weight:700; letter-spacing:.04em; white-space:nowrap;
  box-shadow:0 6px 16px rgba(0,0,0,.45);
  pointer-events:none;
}

@media (max-width:420px){
  .card__share{ width:30px; height:30px; margin:-4px -3px 0 0; }
  .card__share svg{ width:15px; height:15px; }
}