/* =====================================================================
 *  social.css — botões ❤/☆, moldura premium do perfil e abas (Fable 5).
 *  Carregado só nas páginas que usam (mod.php, conta.php). Não regride nada.
 * ===================================================================== */

/* ---------- botões sociais (curtir / favoritar) ---------- */
.bt-social{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.bt-social-btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;text-decoration:none;
  font-weight:900;font-size:13px;line-height:1;padding:11px 16px;border-radius:14px;
  border:1px solid var(--borda);background:rgba(255,255,255,.05);color:var(--texto2);
  transition:transform .12s ease,border-color .2s,color .2s,background .2s,box-shadow .2s}
.bt-social-btn:hover{transform:translateY(-2px)}
.bt-social-btn:active{transform:translateY(0) scale(.97)}
.bt-social-btn .ic{font-size:16px;line-height:1;filter:grayscale(1) opacity(.65);transition:filter .2s,transform .2s}
.bt-social-btn .n:empty{display:none}
.bt-social-btn.like.on{color:#FF6584;border-color:var(--borda-neon);background:rgba(255,23,68,.12);
  box-shadow:0 0 18px rgba(255,23,68,.18)}
.bt-social-btn.like.on .ic{filter:none;transform:scale(1.14);text-shadow:0 0 12px rgba(255,23,68,.7)}
.bt-social-btn.fav.on{color:var(--ouro);border-color:var(--borda-ouro);background:rgba(255,210,61,.12);
  box-shadow:0 0 18px rgba(255,210,61,.18)}
.bt-social-btn.fav.on .ic{filter:none;transform:scale(1.14);text-shadow:0 0 12px rgba(255,210,61,.7)}
.bt-social-btn.carregando{opacity:.55;pointer-events:none}
.bt-social-btn.erro{border-color:var(--neon);animation:bt-shake .32s}
@keyframes bt-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.bt-social-btn.pulou .ic{animation:bt-pop .4s ease}
@keyframes bt-pop{0%{transform:scale(1)}45%{transform:scale(1.5)}100%{transform:scale(1.14)}}

/* barra grande na ficha do mod */
.bt-social.grande .bt-social-btn{font-size:14.5px;padding:14px 22px;border-radius:16px}
.bt-social.grande .bt-social-btn .ic{font-size:19px}

/* ---------- moldura premium do perfil ---------- */
.bt-moldura{position:relative;width:96px;height:96px;flex:none;border-radius:50%;display:grid;place-items:center}
.bt-moldura::before{content:"";position:absolute;inset:-4px;border-radius:50%;z-index:0;
  background:conic-gradient(from 0deg,#FFD23D,#FF1744,#FF6584,#FFB300,#FFE98A,#FFD23D);
  animation:bt-gira 6s linear infinite;box-shadow:0 0 26px rgba(255,23,68,.35)}
.bt-moldura::after{content:"";position:absolute;inset:1.5px;border-radius:50%;background:var(--fundo);z-index:1}
.bt-moldura .av{position:relative;z-index:2;width:82px;height:82px;border-radius:50%;display:grid;place-items:center;
  font-size:36px;overflow:hidden;background:linear-gradient(145deg,#2A0A14,#12060A);
  box-shadow:inset 0 0 22px rgba(255,23,68,.28)}
.bt-moldura .av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.bt-moldura .coroa{position:absolute;z-index:3;bottom:-4px;right:-4px;font-size:20px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
@keyframes bt-gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.bt-moldura::before{animation:none}}

/* ---------- abas do perfil (Curtidos / Favoritos) ---------- */
.bt-abas{display:flex;gap:10px;flex-wrap:wrap;margin:2px 0 16px}
.bt-aba{cursor:pointer;font-weight:800;font-size:13.5px;padding:10px 18px;border-radius:999px;
  border:1px solid var(--borda);background:rgba(255,255,255,.04);color:var(--texto2);transition:.2s}
.bt-aba:hover{border-color:var(--borda-neon);color:var(--texto)}
.bt-aba.ativo{color:#2A1600;border-color:transparent;
  background:linear-gradient(135deg,#FFE98A,#F0B000 52%,#FFD24D);box-shadow:0 6px 18px rgba(233,161,0,.35)}
.bt-aba .qt{margin-left:6px;font-size:11px;opacity:.85}
.bt-pane{display:none}
.bt-pane.ativo{display:block}

/* item do perfil = card + barra de botões colada embaixo */
.bt-perfil-item{display:flex;flex-direction:column}
.bt-perfil-item .item.mod{border-bottom-left-radius:0;border-bottom-right-radius:0}
.bt-perfil-item .bt-social{padding:10px 12px;background:var(--card2);border:1px solid var(--borda);
  border-top:none;border-radius:0 0 var(--r) var(--r)}
.bt-perfil-item .bt-social .bt-social-btn{flex:1;justify-content:center}

/* vazio das abas */
.bt-vazio-aba{text-align:center;color:var(--texto2);padding:40px 18px;border:1px dashed var(--borda);
  border-radius:var(--r);background:rgba(255,255,255,.02)}
.bt-vazio-aba .emoji{font-size:40px;display:block;margin-bottom:10px;opacity:.8}
.bt-vazio-aba b{display:block;color:var(--texto);font-size:15px;margin-bottom:4px}