/* voting-bar-styles.css */
.svb-container {
    display: flex;
    flex-direction: column; /* Stack voting bar and message vertically */
    align-items: center; /* Center items horizontally */
    max-width: 380px; /* Adjust as needed */
    margin: 20px auto; /* Center the whole container */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.svb-voting-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 15px 20px; /* Slightly more padding */
    background-color: #282c34; /* Darker, more neutral background */
    border-radius: 15px; /* Softer radius */
    width: 100%; /* Make bar take full width of container */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.25);
    margin-bottom: 15px; /* Space between bar and message */
    position: relative; /* For potential future absolute positioning inside */
}

.svb-vote-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #e0e0e0; /* Lighter text for contrast */
}

.svb-vote-btn {
    border: none;
    color: #ffffff;
    cursor: pointer;
    font-size: 26px; /* Icon size */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55px; /* Button width */
    height: 55px; /* Button height */
    border-radius: 50%; /* Circular buttons */
    margin-bottom: 8px; /* Space between button and count */
    transition: transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275), background-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.svb-vote-btn:hover:not(:disabled) {
    transform: translateY(-3px) scale(1.05); /* Lift and slightly enlarge */
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.svb-vote-btn:active:not(:disabled) {
    transform: translateY(1px) scale(0.95); /* Press down effect */
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Main color: #567AFC */
/* Analogous colors: #56A0FC (lighter blue), #7A56FC (purplish blue) */
/* Complementary (for accents if needed, e.g. error): #FC7A56 (orange) */

.svb-upvote-btn {
    background-color: #69C076; /* A pleasant green */
}
.svb-upvote-btn:hover:not(:disabled) {
    background-color: #79D086;
}

.svb-downvote-btn {
    background-color: #F46A6A; /* A softer red */
}
.svb-downvote-btn:hover:not(:disabled) {
    background-color: #F67F7F;
}

.svb-heart-btn {
    background-color: #788896; /* Neutral grey for heart button base */
}
.svb-heart-btn .svb-heart-icon {
    color: #BDC3C7; /* Light grey heart, less vibrant initially */
    transition: color 0.3s ease, transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Smoother transition */
}

.svb-heart-btn.svb-voted .svb-heart-icon,
.svb-heart-btn:hover:not(:disabled) .svb-heart-icon {
    color: #567AFC; /* Your primary blue for active heart */
}

/* Heartbeat animation - more pronounced and 'cute' */
.svb-heart-btn.svb-animated .svb-heart-icon {
    animation: cuteHeartbeat 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

@keyframes cuteHeartbeat {
  0% { transform: scale(1); }
  14% { transform: scale(1.3); }
  28% { transform: scale(1); }
  42% { transform: scale(1.3); }
  70% { transform: scale(1); }
}


/* Arrow pop animation */
.svb-upvote-btn.svb-animated .svb-icon,
.svb-downvote-btn.svb-animated .svb-icon {
    animation: popEffect 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}

@keyframes popEffect {
  0% { transform: scale(1) translateY(0); opacity: 1;}
  50% { transform: scale(1.4) translateY(-5px); opacity: 0.7;}
  100% { transform: scale(1) translateY(0); opacity: 1;}
}


.svb-count {
    font-size: 17px;
    font-weight: 600; /* Slightly less bold */
    color: #f0f0f0;
}

.svb-vote-btn:disabled,
.svb-vote-btn.svb-voted {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none; /* Remove shadow for disabled */
}
.svb-vote-btn.svb-voted:hover:not(:disabled) { /* Prevent hover effect if voted */
    transform: none;
}
.svb-upvote-btn.svb-voted {
    background-color: #5a9a62; /* Darker shade when voted */
}
.svb-downvote-btn.svb-voted {
    background-color: #c85a5a; /* Darker shade when voted */
}
.svb-heart-btn.svb-voted {
    background-color: #67737e;
}


.svb-message {
    text-align: center;
    width: calc(100% - 30px); /* Take width of bar minus padding */
    max-width: 350px; /* Ensure it doesn't get too wide */
    margin-top: 0; /* Message is now below the bar due to flex-direction column on container */
    padding: 10px 15px;
    border-radius: 8px;
    font-size: 0.95em;
    font-weight: 500;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.svb-message.success {
    background-color: #DFF2BF; /* Light green for success */
    color: #4F8A10; /* Dark green text */
    border: 1px solid #BDECB6;
}
.svb-message.error {
    background-color: #FFBABA; /* Light red for error */
    color: #D8000C; /* Dark red text */
    border: 1px solid #FF9C9C;
}