:root {
  --vote-neutral-color: var(--text-color, #111111);
  --vote-like-color: #e04848;
  --vote-dislike-color: #8f96a3;
}

:root[data-theme='light'] {
  --vote-neutral-color: #1f2937;
  --vote-like-color: #d43f3f;
  --vote-dislike-color: #6b7280;
}

:root[data-theme='dark'] {
  --vote-neutral-color: #f3f4f6;
  --vote-like-color: #ff6767;
  --vote-dislike-color: #a0a7b5;
}

.vf-vote-btn,
.post-actions .post-icon-btn,
.view-post-reactions .view-post-react-btn {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.vf-vote-btn strong,
.post-actions .post-icon-btn span,
.view-post-reactions .view-post-react-btn span {
  color: var(--text-color) !important;
}

.vf-vote-like .fa-thumbs-up,
.vf-vote-dislike .fa-thumbs-down,
.post-icon-btn.btn-success .fa-thumbs-up,
.post-icon-btn.btn-secondary .fa-thumbs-down,
.view-post-react-btn.btn-success .fa-thumbs-up,
.view-post-react-btn.btn-secondary .fa-thumbs-down {
  color: var(--vote-neutral-color) !important;
  transition: color 0.18s ease, opacity 0.18s ease;
}

.vf-vote-like.is-active .fa-thumbs-up,
.post-icon-btn.btn-success.active .fa-thumbs-up,
.view-post-react-btn.btn-success.active .fa-thumbs-up {
  color: var(--vote-like-color) !important;
}

.vf-vote-dislike.is-active .fa-thumbs-down,
.post-icon-btn.btn-secondary.active .fa-thumbs-down,
.view-post-react-btn.btn-secondary.active .fa-thumbs-down {
  color: var(--vote-dislike-color) !important;
}

.reaction-toast {
  position: fixed;
  top: 88px;
  right: 18px;
  z-index: 100002;
  max-width: min(92vw, 320px);
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
  background: rgba(32, 36, 41, 0.96);
  color: #fff;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.reaction-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.reaction-toast.is-hiding {
  opacity: 0;
  transform: translateY(-10px);
}

.reaction-toast-success {
  border-color: rgba(46, 204, 113, 0.45);
  background: rgba(17, 84, 51, 0.97);
}

.reaction-toast-warning {
  border-color: rgba(231, 76, 60, 0.4);
  background: rgba(109, 35, 35, 0.97);
}

@media (max-width: 767.98px) {
  .reaction-toast {
    top: 78px;
    right: 12px;
    left: 12px;
    max-width: none;
  }
}