/* Optimized voting animations for instant feedback */

/* Processing states */
.spide_fn_votes.vote_processing {
	opacity: 0.9;
	transition: opacity 0.2s ease;
}

.spide_fn_votes.vote_processing .result_vote {
	transform: scale(1.05);
	transition: transform 0.2s ease;
}

.spide_fn_reaction_btn.reaction_processing {
	opacity: 0.8;
	transform: scale(0.95);
	transition: all 0.2s ease;
}

/* Error states */
.spide_fn_votes.vote_error {
	animation: shake 0.5s ease-in-out;
	border-color: #ff4444 !important;
}

.spide_fn_reaction_btn.reaction_error {
	animation: shake 0.5s ease-in-out;
	background-color: rgba(255, 68, 68, 0.1) !important;
}

/* Shake animation for errors */
@keyframes shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-5px); }
	75% { transform: translateX(5px); }
}

/* Enhanced hover states for better feedback */
.spide_fn_vote_up:hover,
.spide_fn_vote_down:hover {
	transform: scale(1.02);
	transition: transform 0.1s ease;
}

.spide_fn_reaction_btn:hover {
	transform: scale(1.05);
	transition: transform 0.1s ease;
}

/* Active state improvements */
.spide_fn_reaction_btn.active {
	animation: reaction_bounce 0.3s ease;
}

@keyframes reaction_bounce {
	0% { transform: scale(1); }
	50% { transform: scale(1.1); }
	100% { transform: scale(1); }
}

/* Vote count change animation */
.spide_fn_votes .result_vote .count {
	transition: all 0.3s ease;
}

.spide_fn_votes.up_action .result_vote .count {
	color: #4CAF50;
}

.spide_fn_votes.down_action .result_vote .count {
	color: #f44336;
}

/* Loading state improvements */
.spide_fn_votes.loading .result_vote {
	position: relative;
}

.spide_fn_votes.loading .result_vote::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2px solid #ccc;
	border-top: 2px solid #333;
	border-radius: 50%;
	animation: spin 1s linear infinite;
	display: none; /* Hidden since we're using instant feedback */
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}