/**
 * titleRating.css - Styles for Title Rating Component
 */

/* Container */
.title-rating {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.title-rating-label {
    font-size: 0.75rem;
    color: #6c757d;
    text-align: center;
    min-height: 1.2em;
}

/* ============================================
   THUMBS UI (Simple Mode)
   ============================================ */

.title-rating-thumbs {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.title-rating-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 16px;
    border: 2px solid var(--mv-border-color);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
    min-width: 70px;
}

.title-rating-thumb:hover {
    border-color: #adb5bd;
    background: #f8f9fa;
}

.title-rating-thumb .thumb-emoji {
    font-size: 1.5rem;
    line-height: 1;
}

.title-rating-thumb .thumb-label {
    font-size: 0.7rem;
    color: #6c757d;
    font-weight: 500;
}

/* Thumb Down - Red when active */
.title-rating-thumb.thumb-down.active,
.title-rating-thumb.thumb-down:hover {
    border-color: #dc3545;
    background: #fff5f5;
}
.title-rating-thumb.thumb-down.active .thumb-emoji,
.title-rating-thumb.thumb-down:hover .thumb-emoji {
    transform: scale(1.1);
}
.title-rating-thumb.thumb-down.active {
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.2);
}

/* Thumb Neutral - Yellow/Orange when active */
.title-rating-thumb.thumb-neutral.active,
.title-rating-thumb.thumb-neutral:hover {
    border-color: #fd7e14;
    background: #fff8f0;
}
.title-rating-thumb.thumb-neutral.active .thumb-emoji,
.title-rating-thumb.thumb-neutral:hover .thumb-emoji {
    transform: scale(1.1);
}
.title-rating-thumb.thumb-neutral.active {
    box-shadow: 0 0 0 3px rgba(253, 126, 20, 0.2);
}

/* Thumb Up - Green when active */
.title-rating-thumb.thumb-up.active,
.title-rating-thumb.thumb-up:hover {
    border-color: #198754;
    background: #f0fff4;
}
.title-rating-thumb.thumb-up.active .thumb-emoji,
.title-rating-thumb.thumb-up:hover .thumb-emoji {
    transform: scale(1.1);
}
.title-rating-thumb.thumb-up.active {
    box-shadow: 0 0 0 3px rgba(25, 135, 84, 0.2);
}

/* Thumb Love (Double thumbs up) - Bright green/teal when active */
.title-rating-thumb.thumb-love.active,
.title-rating-thumb.thumb-love:hover {
    border-color: #0d6efd;
    background: #f0f8ff;
}
.title-rating-thumb.thumb-love.active .thumb-emoji,
.title-rating-thumb.thumb-love:hover .thumb-emoji {
    transform: scale(1.1);
}
.title-rating-thumb.thumb-love.active {
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.2);
}

/* Netflix mode specific styling */
.title-rating-netflix .title-rating-thumb {
    min-width: 65px;
}

/* ============================================
   STARS UI (Standard/Advanced Mode)
   ============================================ */

.title-rating-stars {
    display: flex;
    gap: 2px;
    justify-content: center;
}

.title-rating-star {
    font-size: 1.5rem;
    color: #ffc107;
    cursor: pointer;
    transition: transform 0.1s ease;
}

.title-rating-star:hover {
    transform: scale(1.15);
}

.title-rating-star.bi-star {
    color: var(--mv-border-color);
}

.title-rating-star.filled {
    color: #ffc107;
}

/* Half-filled star styling */
.title-rating-star.half-filled {
    color: #ffc107;
}

/* Smaller stars for 10-star mode */
.title-rating-star.star-small {
    font-size: 1rem;
    gap: 1px;
}

/* ============================================
   SIZE VARIATIONS
   ============================================ */

/* Small size */
.title-rating[data-size="small"] .title-rating-thumb {
    padding: 4px 10px;
    min-width: 50px;
}
.title-rating[data-size="small"] .thumb-emoji {
    font-size: 1.1rem;
}
.title-rating[data-size="small"] .thumb-label {
    display: none;
}
.title-rating[data-size="small"] .title-rating-star {
    font-size: 1.35rem;
}
.title-rating[data-size="small"] .title-rating-star.star-small {
    font-size: 1rem;
}
.title-rating[data-size="small"] .title-rating-label {
    font-size: 0.65rem;
}

/* Compact size - smaller for card grids on mobile */
.title-rating[data-size="compact"] .title-rating-thumbs {
    gap: 3px;
}
.title-rating[data-size="compact"] .title-rating-thumb {
    padding: 2px 5px;
    min-width: 28px;
    border-width: 1px;
    border-radius: 5px;
}
.title-rating[data-size="compact"] .thumb-emoji {
    font-size: 0.8rem;
}
.title-rating[data-size="compact"] .thumb-label {
    display: none;
}
.title-rating[data-size="compact"] .title-rating-star {
    font-size: 1.25rem;
}
.title-rating[data-size="compact"] .title-rating-star.star-small {
    font-size: 0.8rem;
}
.title-rating[data-size="compact"] .title-rating-label {
    display: none;
}
.title-rating[data-size="compact"] .title-rating-thumb.active {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15);
}

/* ============================================
   BINARY MODE (Welcome Wizard)
   Only 2 buttons (dislike/like), larger size
   ============================================ */

.title-rating-binary {
    gap: 12px;
}

.title-rating-binary .title-rating-thumb {
    padding: 6px 14px;
    min-width: 50px;
    border-radius: 8px;
}

.title-rating-binary .thumb-emoji {
    font-size: 1.3rem;
}

/* Binary mode in compact size - still larger than regular compact */
.title-rating.binary-mode[data-size="compact"] .title-rating-thumbs {
    gap: 8px;
}

.title-rating.binary-mode[data-size="compact"] .title-rating-thumb {
    padding: 5px 12px;
    min-width: 44px;
    border-radius: 7px;
}

.title-rating.binary-mode[data-size="compact"] .thumb-emoji {
    font-size: 1.1rem;
}

/* Large size */
.title-rating[data-size="large"] .title-rating-thumb {
    padding: 12px 24px;
    min-width: 90px;
}
.title-rating[data-size="large"] .thumb-emoji {
    font-size: 2rem;
}
.title-rating[data-size="large"] .thumb-label {
    font-size: 0.85rem;
}
.title-rating[data-size="large"] .title-rating-star {
    font-size: 2rem;
}
.title-rating[data-size="large"] .title-rating-star.star-small {
    font-size: 1.75rem;
}
.title-rating[data-size="large"] .title-rating-label {
    font-size: 0.9rem;
}

/* ============================================
   POPUP SPECIFIC STYLES
   ============================================ */

.star-rating-popup .title-rating {
    padding: 8px;
}

.star-rating-popup .title-rating-thumbs {
    gap: 12px;
}

/* ============================================
   INLINE (PAGE) SPECIFIC STYLES
   ============================================ */

.faceoff-rating .title-rating,
.ranked-rating .title-rating {
    width: 100%;
}

.faceoff-rating .title-rating-thumbs,
.ranked-rating .title-rating-thumbs {
    width: 100%;
    justify-content: space-between;
}

.faceoff-rating .title-rating-thumb,
.ranked-rating .title-rating-thumb {
    flex: 1;
}

/* ============================================
   BADGE DISPLAY STYLES (for ui-helpers)
   ============================================ */

.personal-score.score-type-simple {
    background: linear-gradient(135deg, #198754, #20c997);
}

.personal-score.score-type-simple .thumb-icon {
    font-size: 0.9em;
}

.personal-score.score-type-standard {
    background: linear-gradient(135deg, #ffc107, #fd7e14);
    color: #212529;
}

.personal-score.score-type-netflix {
    background: linear-gradient(135deg, #198754, #0d6efd);
}

.personal-score.score-type-netflix .thumb-icon {
    font-size: 0.9em;
}

/* ============================================
   MOBILE RESPONSIVE - Auto-compact on small screens
   ============================================ */

@media (max-width: 575.98px) {
    /* Shrink regular thumbs: emoji only, no labels, tighter */
    .title-rating-thumb {
        padding: 5px 10px;
        min-width: 40px;
        border-radius: 6px;
    }

    .title-rating-thumb .thumb-label {
        display: none;
    }

    .title-rating-thumbs {
        gap: 6px;
    }

    /* Tighten the rating container gap */
    .title-rating {
        gap: 2px;
    }

    .title-rating-label {
        font-size: 0.65rem;
    }

    /* Stars — bigger for 5-star, smaller for 10-star */
    .title-rating-star {
        font-size: 1.4rem;
    }
    .title-rating-star.star-small {
        font-size: 1.05rem;
    }

    /* FaceOff/Ranked inline: keep flex but tighter */
    .faceoff-rating .title-rating-thumb,
    .ranked-rating .title-rating-thumb {
        padding: 5px 6px;
        min-width: 0;
    }

    /* Active box-shadow thinner on mobile */
    .title-rating-thumb.thumb-down.active {
        box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.2);
    }
    .title-rating-thumb.thumb-neutral.active {
        box-shadow: 0 0 0 2px rgba(253, 126, 20, 0.2);
    }
    .title-rating-thumb.thumb-up.active {
        box-shadow: 0 0 0 2px rgba(25, 135, 84, 0.2);
    }
    .title-rating-thumb.thumb-love.active {
        box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.2);
    }
}

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

[data-bs-theme="dark"] .title-rating-label {
    color: var(--mv-text-muted);
}
[data-bs-theme="dark"] .title-rating-thumb {
    border-color: var(--mv-border-color);
    background: var(--mv-bg-card);
}
[data-bs-theme="dark"] .title-rating-thumb:hover {
    border-color: #6c757d;
    background: var(--mv-bg-surface);
}
[data-bs-theme="dark"] .title-rating-thumb .thumb-label {
    color: var(--mv-text-muted);
}
[data-bs-theme="dark"] .title-rating-thumb.thumb-down.active,
[data-bs-theme="dark"] .title-rating-thumb.thumb-down:hover {
    background: rgba(220, 53, 69, 0.15);
}
[data-bs-theme="dark"] .title-rating-thumb.thumb-neutral.active,
[data-bs-theme="dark"] .title-rating-thumb.thumb-neutral:hover {
    background: rgba(253, 126, 20, 0.15);
}
[data-bs-theme="dark"] .title-rating-thumb.thumb-up.active,
[data-bs-theme="dark"] .title-rating-thumb.thumb-up:hover {
    background: rgba(25, 135, 84, 0.15);
}
[data-bs-theme="dark"] .title-rating-thumb.thumb-love.active,
[data-bs-theme="dark"] .title-rating-thumb.thumb-love:hover {
    background: rgba(13, 110, 253, 0.15);
}
[data-bs-theme="dark"] .title-rating-star.bi-star {
    color: #8a939c;
}