/* ads.css */

/* Transição suave para o anúncio lateral */
#ad-lateral-left {
  transition: all 0.3s ease-in-out;
}

/* Estilos para imagens dentro dos anúncios */
.ad-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 
   Bloco de anúncio pequeno e quadrado.
   Use .small-ad-block no container do anúncio
   para limitar o tamanho e manter o nome “ANUNCIE AQUI” centralizado.
*/
.small-ad-block {
  width: 180px;   /* Ajuste conforme desejar */
  height: 180px;  /* Ajuste conforme desejar */
  position: relative;
  margin: 0 auto; /* Centraliza horizontalmente se for um bloco separado */
  border: 2px solid #ccc;
  border-radius: 8px;
  overflow: hidden;   /* Evita que texto/animação “vaze” */
  text-align: center; 
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffffcc; /* Fundo semi-transparente; mude se quiser */
}

/* 
   Fallback: exibe “ANUNCIE AQUI” se o anúncio não for carregado.
   Agora sem text-fill-color. Apenas background-clip: text (sem prefixo).
*/
.ad-fallback-text {
  display: block !important;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 1em;
  margin: 0;
  padding: 0;
  text-align: center;

  /* Fallback color se background-clip: text não funcionar */
  color: #00d9ff;

  /* Gradiente animado */
  background: linear-gradient(
    to left,
    #ff0000,
    #ffdd00,
    #00ff00,
    #00ffff,
    #0000ff,
    #ff00ff,
    #ff0000
  );
  background-size: 300% 100%;

  /* Sem prefixo. Alguns navegadores podem ignorar. */
  background-clip: text;

  /* Efeito de brilho */
  text-shadow:
    0 0 5px rgba(255, 255, 255, 0.8),
    0 0 10px rgba(255, 255, 255, 0.5);

  /* Animação do gradiente da direita para a esquerda */
  animation: movingColors 3s linear infinite;
}

/* Keyframes para mover o gradiente */
@keyframes movingColors {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 100% 0%;
  }
}