/* ============================================================================
   NETSYSTEM Internet — Tema Galaxy (redesenhado)
   brands.css  ·  Avatar (halo azul), botões glass altos, ícones e sociais
   ----------------------------------------------------------------------------
   Índice
     1. Avatar com halo azul
     2. Botões glassmorphism (altos, 80–96px)
     3. Ícones dos botões
     4. Ícones sociais
   Tokens em extra/custom-head.blade.php (:root).
   ========================================================================== */


/* 1. Avatar com halo azul
   -------------------------------------------------------------------------- */
#avatar{
  width:120px !important;
  height:120px !important;
  object-fit:cover;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.65);
  background:var(--bg-1, #071B41);
  /* Halo em camadas: anel translúcido + brilho azul difuso */
  box-shadow:
    0 0 0 8px var(--halo-ring, rgba(29,78,216,.14)),
    0 0 0 1px var(--halo-edge, rgba(96,165,250,.35)),
    0 12px 34px rgba(2,8,26,.5),
    0 0 46px var(--halo-glow, rgba(96,165,250,.55));
  animation:avatarGlow 4.5s ease-in-out infinite;
}
@media (min-width:400px){
  #avatar{ width:128px !important; height:128px !important; }
}
/* Se a logo padrão (svg) for usada, o LinkStack não aplica .rounded-avatar;
   mantemos cantos suaves em vez de círculo para não cortar a marca. */
#avatar:not(.rounded-avatar){
  border-radius:26px;
  width:auto !important;
  min-width:120px;
  padding:14px;
}

@keyframes avatarGlow{
  0%,100%{ box-shadow:
    0 0 0 8px var(--halo-ring, rgba(29,78,216,.14)),
    0 0 0 1px var(--halo-edge, rgba(96,165,250,.35)),
    0 12px 34px rgba(2,8,26,.5),
    0 0 40px var(--halo-glow, rgba(96,165,250,.55)); }
  50%    { box-shadow:
    0 0 0 10px var(--halo-ring, rgba(29,78,216,.14)),
    0 0 0 1px var(--halo-edge, rgba(96,165,250,.35)),
    0 12px 34px rgba(2,8,26,.5),
    0 0 60px var(--halo-glow, rgba(96,165,250,.55)); }
}


/* 2. Botões glassmorphism (altos)
   -------------------------------------------------------------------------- */
.button{
  position:relative;
  display:flex !important;              /* sobrepõe o display:block do Skeleton */
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
  min-height:var(--btn-h, 84px);        /* 80–96px */
  margin:0 auto 14px;
  padding:16px 22px;
  text-align:center;
  text-decoration:none;
  font-family:var(--font);
  font-weight:600;
  font-size:1.03rem;
  letter-spacing:.1px;
  line-height:1.25;
  color:var(--text, #F4F8FF);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;

  /* Vidro */
  background:var(--glass-bg, rgba(255,255,255,.055));
  border:1px solid var(--glass-border, rgba(255,255,255,.14));
  border-radius:var(--radius, 20px);
  -webkit-backdrop-filter:blur(var(--glass-blur,18px)) saturate(140%);
  backdrop-filter:blur(var(--glass-blur,18px)) saturate(140%);
  box-shadow:var(--shadow-sm, 0 2px 10px rgba(2,8,26,.35));

  transition:
    background .3s var(--ease),
    border-color .3s var(--ease),
    box-shadow .3s var(--ease),
    transform .3s var(--ease);
}

/* Brilho superior sutil (top highlight) do vidro */
.button::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  padding:1px;
  background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0) 45%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  pointer-events:none;
  opacity:.6;
  transition:opacity .3s var(--ease);
}

@media (hover:hover){
  .button:hover{
    background:var(--glass-bg-hover, rgba(255,255,255,.10));
    border-color:var(--glass-border-hover, rgba(96,165,250,.60));
    box-shadow:var(--shadow-glow, 0 10px 40px rgba(29,78,216,.42));
    color:#FFFFFF;
  }
  .button:hover::before{ opacity:1; }
}
.button:active{
  background:var(--glass-bg-hover, rgba(255,255,255,.10));
  border-color:var(--glass-border-hover, rgba(96,165,250,.60));
}
.button:focus-visible{
  outline:2px solid var(--ns-blue-light, #60A5FA);
  outline-offset:3px;
}


/* 3. Ícones dos botões
   -------------------------------------------------------------------------- */
.icon{
  flex:0 0 auto;
  vertical-align:middle;
  transition:transform .3s var(--ease);
}
/* Ícones de marca / favicons (SVG ou img).
   Normalizamos TODOS para branco sólido -> visual coeso e sempre visível no
   vidro escuro, independente da cor nativa do ícone (estilo Apple/Linear/
   Vercel). Isso também neutraliza favicons "feios" (ex.: quadrados de marca). */
img.icon{
  width:26px;
  height:26px;
  filter:brightness(0) invert(1) drop-shadow(0 2px 6px rgba(0,0,0,.35));
  opacity:.92;
  transition:transform .3s var(--ease), opacity .3s var(--ease);
}
.button:hover img.icon{ opacity:1; }

/* Exceções: ícones que devem manter a COR original (ex.: WhatsApp verde).
   Basta não aplicar o filtro de branco. */
.button-whatsapp img.icon,
img.icon.keep-color{
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.35));
  opacity:1;
}
/* Ícones custom via Font Awesome (<i class="icon fa">) */
i.icon{
  width:auto;
  height:auto;
  font-size:22px;
  line-height:1;
}
.button:hover .icon{ transform:scale(1.08); }


/* 4. Ícones sociais (linha de redes, quando usada)
   -------------------------------------------------------------------------- */
.social-icon-div{ padding-bottom:22px; }
.social-icon{
  font-size:30px;
  padding:10px;
  color:var(--text);
  transition:color .25s var(--ease), transform .25s var(--ease);
}
.social-icon:hover{ color:var(--ns-blue-light, #60A5FA); transform:translateY(-3px); }