/* Wrapper principal que controla o posicionamento */
.sle-like-button-wrapper {
  /* Por padrão, não interfere em nada. Será modificado pelo Elementor */
  position: static; 
  /* TRUQUE: Permite que cliques passem através do wrapper */
  pointer-events: none; 
}

/* O botão em si */
.sle-like-button {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid #ddd;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.3s ease;
  /* TRUQUE: Faz o botão ser clicável novamente */
  pointer-events: auto; 
}

.sle-like-button:hover {
  background-color: #f5f5f5;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Ícone e Texto */
.sle-like-button__icon-svg,
.sle-like-button__text {
  margin-right: 8px;
}

.sle-like-button__icon-svg {
  width: 1.2em;
  height: 1.2em;
  fill: #888; /* Cor padrão do ícone */
  transition: fill 0.3s ease, transform 0.3s ease;
}

.sle-like-button__count {
  font-weight: bold;
  font-size: 1.1em;
  color: #555;
}

/* --- Estado Curtido --- */
.sle-like-button.sle-liked {
  border-color: #ff5858;
  background-color: #ffeded;
}

.sle-like-button.sle-liked .sle-like-button__icon-svg {
  fill: #ff5858; /* Cor do ícone quando curtido */
  animation: sle-liked-animation 0.5s ease;
}

.sle-like-button.sle-liked .sle-like-button__count {
  color: #ff5858;
}

@keyframes sle-liked-animation {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1); }
}