/**
 * RecommendationVote Component Styles
 *
 * Reusable thumbs up/down voting for title-to-title recommendations.
 * ONLY for "If you like X, you'll like Y" voting.
 */

/* Container */
.recommendation-vote {
    display: inline-flex;
    gap: 4px;
    align-items: center;
}

/* Base button styles */
.rv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #6c757d;
    background: transparent;
    color: #6c757d;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.rv-btn:hover {
    background: rgba(108, 117, 125, 0.1);
}

.rv-btn:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(108, 117, 125, 0.25);
}

/* Size: Small (default) */
.rv-sm .rv-btn {
    padding: 3px 6px;
    font-size: 0.8rem;
}

.rv-sm .rv-btn i {
    font-size: 0.85rem;
}

/* Size: Medium */
.rv-md .rv-btn {
    padding: 5px 10px;
    font-size: 0.9rem;
}

.rv-md .rv-btn i {
    font-size: 1rem;
}

/* Labels */
.rv-label {
    margin-left: 4px;
    font-size: 0.75rem;
}

/* Thumbs Up - Active state (Green) */
.rv-up.rv-active {
    background-color: #198754;
    border-color: #198754;
    color: white;
}

.rv-up.rv-active:hover {
    background-color: #157347;
    border-color: #157347;
}

/* Thumbs Up - Hover (when not active) */
.rv-up:not(.rv-active):hover {
    border-color: #198754;
    color: #198754;
    background: rgba(25, 135, 84, 0.1);
}

/* Thumbs Down - Active state (Red) */
.rv-down.rv-active {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

.rv-down.rv-active:hover {
    background-color: #bb2d3b;
    border-color: #bb2d3b;
}

/* Thumbs Down - Hover (when not active) */
.rv-down:not(.rv-active):hover {
    border-color: #dc3545;
    color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
}

/* Compact variant for inline use in cards */
.recommendation-vote.rv-compact {
    gap: 2px;
}

.recommendation-vote.rv-compact .rv-btn {
    padding: 2px 4px;
    border-radius: 3px;
}

/* Position utilities for use in poster cards */
.rv-position-top-right {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 5;
}

.rv-position-bottom-right {
    position: absolute;
    bottom: 6px;
    right: 6px;
    z-index: 5;
}

/* Dark background variant (for overlay use) */
.rv-dark .rv-btn {
    border-color: rgba(255, 255, 255, 0.5);
    color: rgba(255, 255, 255, 0.8);
    background: rgba(0, 0, 0, 0.3);
}

.rv-dark .rv-btn:hover {
    background: rgba(0, 0, 0, 0.5);
}

.rv-dark .rv-up.rv-active {
    background-color: #198754;
    border-color: #198754;
    color: white;
}

.rv-dark .rv-down.rv-active {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
}

/* Disabled state */
.rv-btn:disabled,
.rv-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ========================================
   DARK MODE OVERRIDES
   ======================================== */

[data-bs-theme="dark"] .rv-btn {
    border-color: var(--mv-text-muted);
    color: var(--mv-text-muted);
}