/* Quote Vote Buttons Styling */
.quote-vote-container {
    display: inline-flex;
    gap: 10px;
    align-items: center;
}

.vote-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--qc-border-medium, #ced4da);
    border-radius: var(--qc-border-radius, 10px);
    background-color: var(--qc-white, #fff);
    color: var(--qc-text-light, #495057);
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    -webkit-tap-highlight-color: transparent; /* For mobile */
}

.vote-btn:hover:not(.voted) {
    transform: translateY(-2px);
    box-shadow: var(--qc-shadow-soft, 0 4px 12px rgba(0,0,0,.06));
    border-color: var(--qc-text-muted, #6c757d);
}

.vote-btn:focus-visible {
    outline: 2px solid var(--qc-primary, #0056b3);
    outline-offset: 2px;
}

.vote-btn .vote-icon {
    font-size: 1.2em;
    line-height: 1;
}

.vote-btn .vote-count {
    font-variant-numeric: tabular-nums;
}

/* Voted State */
.vote-btn.voted {
    color: var(--qc-primary, #0056b3);
    border-color: var(--qc-primary, #0056b3);
    background-color: color-mix(in srgb, var(--qc-primary, #0056b3) 10%, white);
}

.vote-btn.downvote-btn.voted {
    color: var(--qc-accent, #d9534f);
    border-color: var(--qc-accent, #d9534f);
    background-color: color-mix(in srgb, var(--qc-accent, #d9534f) 10%, white);
}

/* Loading state - added via JS */
.vote-btn.loading {
    cursor: wait;
    opacity: 0.7;
}

/* For smaller action containers like in quote-item-small */
.qabs .quote-vote-container {
    gap: 6px;
}
.qabs .vote-btn {
    padding: 5px 10px;
    font-size: 0.85em;
}
.qabs .vote-btn .vote-icon {
    font-size: 1.1em;
}

/* RTL Support */
[dir="rtl"] .vote-btn {
    /* Flexbox handles gap correctly, no changes needed for basic layout */
}