/* Styles for SG SEO Likes Module */
.sg-seo-likes-wrapper {
  display: inline-flex;
  gap: 10px;
  align-items: center;
}
.sg-seo-likes-wrapper button {
  position: relative; /* Needed for loader positioning */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid #ccd0d4;
  border-radius: 4px;
  background-color: #f6f7f7;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.sg-seo-likes-wrapper button:hover:not(:disabled) {
  background-color: #f0f0f1;
  border-color: #a7aaaf;
}
.sg-seo-likes-wrapper button:disabled {
  cursor: not-allowed;
}
.sg-seo-likes-wrapper button img {
  width: 20px;
  height: 20px;
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sg-seo-likes-wrapper .sg-seo-like-count-only {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 6px 12px;
  border: 1px solid #ccd0d4;
  border-radius: 4px;
  background-color: #f6f7f7;
  line-height: 1.2;
}

.sg-seo-likes-wrapper .sg-seo-like-count-only span.count {
  font-size: 13px;
  color: #3c434a;
  font-weight: 600;
}

.sg-seo-likes-wrapper .sg-seo-like-count-only img {
  width: 20px;
  height: 20px;
}
.sg-seo-likes-wrapper button span.count {
  font-size: 13px;
  color: #3c434a;
  font-weight: 600;
}

/* -- Color Coding -- */
.sg-seo-like-button.selected {
  border-color: #008a20;
  background-color: #f0f8f2;
}
.sg-seo-dislike-button.selected {
  border-color: #d63638;
  background-color: #fbeaea;
}

/* -- Loading State -- */
.sg-seo-likes-wrapper button.processing .count,
.sg-seo-likes-wrapper button.processing img {
  opacity: 0.2; /* Fade out content when loading */
}
.sg-seo-likes-wrapper button .sg-seo-likes-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none; /* Hidden by default */
  width: 16px;
  height: 16px;
  border: 2px solid rgba(0, 0, 0, 0.1);
  border-top-color: #333;
  border-radius: 50%;
  animation: sg-seo-rating-spin 0.8s ease-in-out infinite;
}
.sg-seo-likes-wrapper button.processing .sg-seo-likes-loader {
  display: block; /* Show loader when processing */
}

/* -- Animations -- */
.sg-seo-like-button.sg-seo-likes--animate img {
  animation: sg-seo-like-pop 0.4s 1;
}
.sg-seo-dislike-button.sg-seo-likes--animate img {
  animation: sg-seo-dislike-pop 0.4s 1;
}
@keyframes sg-seo-like-pop {
  0% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.4) rotate(-20deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}
@keyframes sg-seo-dislike-pop {
  0% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.4) rotate(20deg);
  }
  100% {
    transform: scale(1) rotate(0deg);
  }
}

/* Keyframe for loader spin */
@keyframes sg-seo-rating-spin {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}