/**
 * Voting Module Styles
 */

.nwp-vote-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0;
    padding: 15px 0;
    border-top: 1px solid #eee;
}

.nwp-vote-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid #ddd;
    background: #fff;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
}

.nwp-vote-btn:hover {
    border-color: #999;
    background: #f5f5f5;
}

.nwp-vote-btn.nwp-voted {
    border-color: #667eea;
    background: #667eea;
    color: #fff;
}

.nwp-vote-icon {
    font-size: 16px;
}

.nwp-vote-count {
    font-weight: 600;
}

/* Upvote specific */
.nwp-vote-upvote.nwp-voted {
    background: #4caf50;
    border-color: #4caf50;
}

/* Downvote specific */
.nwp-vote-downvote.nwp-voted {
    background: #f44336;
    border-color: #f44336;
}

/* Love specific */
.nwp-vote-love.nwp-voted {
    background: #e91e63;
    border-color: #e91e63;
}

/* Follow specific */
.nwp-vote-follow.nwp-voted {
    background: #ff9800;
    border-color: #ff9800;
}

/* Style: Default */
.nwp-vote-style-default .nwp-vote-btn {
    border-radius: 4px;
}

/* Style: Minimal */
.nwp-vote-style-minimal .nwp-vote-btn {
    border: none;
    background: transparent;
    padding: 8px 12px;
}

.nwp-vote-style-minimal .nwp-vote-btn:hover {
    background: #f0f0f0;
}

.nwp-vote-style-minimal .nwp-vote-btn.nwp-voted {
    background: transparent;
    color: inherit;
}

.nwp-vote-style-minimal .nwp-vote-upvote.nwp-voted .nwp-vote-icon {
    transform: scale(1.2);
}

.nwp-vote-style-minimal .nwp-vote-love.nwp-voted .nwp-vote-icon {
    animation: nwp-heart-beat 0.3s ease;
}

/* Style: Rounded */
.nwp-vote-style-rounded .nwp-vote-btn {
    border-radius: 8px;
}

/* Style: Pill */
.nwp-vote-style-pill .nwp-vote-btn {
    border-radius: 50px;
    padding: 8px 20px;
}

/* Animation */
@keyframes nwp-heart-beat {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.nwp-vote-btn.nwp-voting {
    opacity: 0.6;
    pointer-events: none;
}

/* Count only */
.nwp-vote-count-only {
    font-weight: 600;
}

/* Responsive */
@media (max-width: 480px) {
    .nwp-vote-buttons {
        justify-content: center;
    }
    
    .nwp-vote-btn {
        flex: 1;
        justify-content: center;
        min-width: 70px;
    }
}