/* FanWorx Ratings Panel Styles */
/* Part of unified theme system - Contains ratings and detailed scores */

/* Main ratings layout */
.ratings-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    background: var(--color-card-bg);
    border: 1px solid var(--color-accent-divider);
    border-radius: 8px;
    padding: 1rem;
}

/* Left side container */
.ratings-left-side {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Top two sections (General Rating + Compared to Original) */
.ratings-top-sections {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.rating-section {
    background: var(--color-bg);
    border: 1px solid var(--color-accent-divider);
    border-radius: 6px;
    padding: 1rem;
}

    .rating-section h3 {
        margin: 0 0 1rem 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--color-text);
    }

/* General Rating Section */
.general-rating-display {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.rating-number {
    font-size: 3.5rem;
    font-weight: bold;
    color: var(--color-accent);
    line-height: 1;
}

.rating-stars-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.stars-large {
    display: flex;
    gap: 0.25rem;
    font-size: 2rem;
    color: var(--color-accent);
}

    .stars-large .star {
        color: var(--color-accent);
    }

.rating-label {
    font-size: 0.75rem;
    opacity: 0.8;
    color: var(--color-text);
}

/* Your Rating subsection */
.your-rating-section {
    padding-top: 1rem;
    border-top: 1px solid var(--color-accent-divider);
    text-align: center;
}

.your-rating-label {
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
    color: var(--color-text);
}

.stars {
    display: flex;
    gap: 0.25rem;
    font-size: 1.75rem;
    cursor: pointer;
    user-select: none;
    justify-content: center;
}

    .stars .star {
        color: var(--color-text-muted, #666);
        transition: transform 0.2s;
    }

        .stars .star:hover {
            transform: scale(1.1);
        }

        .stars .star.filled {
            color: var(--color-accent) !important;
            opacity: 1;
        }

.click-to-rate {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-top: 0.5rem;
}

.user-rating-section {
    padding: 0rem;
    background: var(--color-bg);
    opacity: 0.5;
    border-radius: 4px;
    text-align: center;
}

/* Compared to Original Section */
.comparative-rating {
    text-align: center;
}

.comparative-status,
.comparative-result {
    font-size: 1.5rem !important;
    font-weight: bold;
    margin: 1rem 0;
    padding: 0.5rem;
    border-radius: 4px;
    color: var(--color-text-muted);
}

    .comparative-status.comp-much-better,
    .comparative-result.comp-much-better {
        color: #22c55e;
    }

    .comparative-status.comp-better,
    .comparative-result.comp-better {
        color: #86efac;
    }

    .comparative-status.comp-same,
    .comparative-result.comp-same {
        color: var(--color-text);
    }

    .comparative-status.comp-worse,
    .comparative-result.comp-worse {
        color: #fca5a5;
    }

    .comparative-status.comp-much-worse,
    .comparative-result.comp-much-worse {
        color: #ef4444;
    }

.comparative-options {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    flex-wrap: wrap;
}

.comparative-option {
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
    background: var(--color-structural);
    opacity: 0.5;
    border: 1px solid var(--color-accent-divider);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

    .comparative-option:hover {
        background: var(--color-accent-divider);
    }

    .comparative-option.active {
        background: var(--color-accent);
        color: var(--color-button-text);
        border-color: var(--color-accent);
        font-weight: bold;
        opacity: 1;
    }

.comp-much-better {
    color: #22c55e;
}

.comp-better {
    color: #86efac;
}

.comp-same {
    color: var(--color-text);
}

.comp-worse {
    color: #fca5a5;
}

.comp-much-worse {
    color: #ef4444;
}

/* Review Section */
.review-section {
    background: var(--color-bg);
    border: 1px solid var(--color-accent-divider);
    border-radius: 6px;
    padding: 1rem;
}

    .review-section h3 {
        margin: 0 0 1rem 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--color-text);
    }

/* Detailed Ratings Section (Right Side) */
.detailed-ratings-section {
    background: var(--color-bg);
    border: 1px solid var(--color-accent-divider);
    border-radius: 6px;
    padding: 1rem;
}

    .detailed-ratings-section h3 {
        margin: 0 0 1rem 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--color-text);
    }

.detailed-ratings-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.detailed-headers {
    display: grid;
    grid-template-columns: 1fr auto auto;
    padding: 0.5rem 0;
    gap: 1rem;
    font-size: 0.85rem;
    font-weight: bold;
    opacity: 0.7;
    border-bottom: 1px solid var(--color-accent-divider);
    align-items: center;
}

    .detailed-headers > span:nth-child(2),
    .detailed-headers > span:nth-child(3) {
        min-width: 120px;
        text-align: center;
    }

.detailed-scores {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.detailed-rating-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 1rem;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--color-accent-divider);
}

    .detailed-rating-row:last-of-type {
        border-bottom: none;
    }

.detailed-label {
    font-size: 0.9rem;
    color: var(--color-text);
}

.detailed-avg-stars {
    display: flex;
    gap: 0.125rem;
    font-size: 1.5rem;
    color: var(--color-accent);
    min-width: 120px;
    justify-content: center;
}

    .detailed-avg-stars .star {
        color: var(--color-accent);
    }

.star-radios {
    display: flex;
    gap: 0.25rem;
    min-width: 120px;
    justify-content: center;
}

.star-radio-label {
    cursor: pointer;
    margin: 0;
}

.star-radio-input {
    display: none;
}

.star-radio-display {
    font-size: 1.125rem;
    color: var(--color-text-muted);
    opacity: 0.3;
    transition: all 0.2s;
}

.star-radio-input:checked + .star-radio-display {
    color: var(--color-accent);
    opacity: 1;
}

.star-radio-label:hover .star-radio-display {
    transform: scale(1.1);
    opacity: 0.5;
}

/* Responsive */
@media (max-width: 1024px) {
    .ratings-grid {
        grid-template-columns: 1fr;
    }

    .ratings-top-sections {
        grid-template-columns: 1fr;
    }

    .detailed-headers,
    .detailed-rating-row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .detailed-avg-stars,
    .star-radios {
        justify-content: flex-start;
    }
}