/**
 * GrandScreen UI Redesign - October 2025
 *
 * Стили для редизайна интерфейса:
 * 1. Pros & Cons (2-колонки, новые иконки)
 * 2. Editor's Opinion (автор справа, цитата)
 * 3. Metacritic-style Ratings (вертикальные карточки, цветные бейджи)
 * 4. Rating Distribution (минималистичный график)
 *
 * @package GrandScreen
 * @since 1.0.0
 */



.app-pros-cons {
    margin: 40px 0;
    padding: 0;
}

.pros-cons__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

@media (max-width: 768px) {
    .pros-cons__grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

.pros-cons__column {
    background: transparent;
}

.pros-cons__subtitle {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #1F2937;
}

.pros-cons__column--pros .pros-cons__subtitle {
    color: #059669; 
}

.pros-cons__column--cons .pros-cons__subtitle {
    color: #DC2626; 
}

.pros-cons__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pros-cons__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    font-size: 15px;
    line-height: 1.6;
    color: #374151;
    border-bottom: 1px solid #F3F4F6;
}

.pros-cons__item:last-child {
    border-bottom: none;
}

.pros-cons__item svg {
    flex-shrink: 0;
    margin-top: 4px;
}



.app-editor-opinion {
    margin: 40px 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.editor-opinion__container {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding: 28px 32px;
    background: #FEF3C7;
    border-radius: 12px;
    border-left: 4px solid #F59E0B;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
    .editor-opinion__container {
        flex-direction: column;
        align-items: center;
        padding: 20px 16px;
    }

    .editor-opinion__author {
        width: 100%;
        align-items: center;
    }

    .app-editor-opinion {
        margin-left: 0;
        margin-right: 0;
    }
}

.editor-opinion__content {
    flex: 1;
    min-width: 0; 
}

.editor-opinion__text {
    font-size: 15px;
    line-height: 1.7;
    color: #1F2937;
}

.editor-opinion__text p {
    margin: 0 0 12px 0;
}

.editor-opinion__text p:last-child {
    margin-bottom: 0;
}

.editor-opinion__author {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.author-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.author-info {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.author-label {
    font-size: 11px;
    color: #92400E;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.author-name {
    font-size: 14px;
    font-weight: 700;
    color: #92400E;
}

.author-role {
    font-size: 12px;
    color: #92400E;
    opacity: 0.8;
}



.grandscreen-rating-widget.metacritic-style {
    margin: 40px 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

.metacritic-scores {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

.metacritic-score-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.metacritic-score-item:hover {
    border-color: #D1D5DB;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.score-info {
    flex: 1;
}

.score-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #6B7280;
    margin-bottom: 8px;
}

.score-rating {
    font-size: 28px;
    font-weight: 700;
    color: #1F2937;
    margin-bottom: 4px;
}

.score-rating .score-max {
    font-size: 18px;
    color: #9CA3AF;
    font-weight: 400;
}

.score-subtitle {
    font-size: 13px;
    color: #6B7280;
    margin-bottom: 8px;
}

.score-verdict {
    display: inline-block;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 4px;
    margin-top: 8px;
}

.score-verdict--favorable {
    background: #D1FAE5;
    color: #065F46;
}

.score-verdict--mixed {
    background: #FEF3C7;
    color: #92400E;
}

.score-verdict--unfavorable {
    background: #FEE2E2;
    color: #991B1B;
}


.score-badge {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 700;
    flex-shrink: 0;
    margin-left: 24px;
}

.score-badge--favorable {
    background: #10B981;
    color: #fff;
}

.score-badge--mixed {
    background: #F59E0B;
    color: #fff;
}

.score-badge--unfavorable {
    background: #EF4444;
    color: #fff;
}

.score-badge--empty {
    background: #F3F4F6;
    color: #9CA3AF;
    border: 2px dashed #D1D5DB;
    cursor: pointer;
    transition: all 0.2s ease;
}

.score-badge--empty:hover {
    background: #E5E7EB;
    border-color: #9CA3AF;
}


.my-score-badge[data-has-voted="true"] {
    cursor: not-allowed;
}


.my-score-verdict-text {
    font-size: 14px;
    color: #6B7280;
    margin-bottom: 12px;
    min-height: 20px;
    transition: all 0.2s ease;
}


.my-score-thermometer {
    display: flex;
    gap: 4px;
    margin-top: 12px;
}

.thermometer-bar {
    flex: 1;
    height: 32px;
    background: #E5E7EB; 
    border-radius: 4px;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}


.my-score[data-has-voted="true"] .thermometer-bar {
    cursor: default;
}


.my-score[data-has-voted="false"] .thermometer-bar:hover {
    transform: translateY(-2px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}


.thermometer-bar.hover-red {
    background: #EF4444;
}

.thermometer-bar.hover-yellow {
    background: #F59E0B;
}

.thermometer-bar.hover-green {
    background: #10B981;
}


.thermometer-bar.active-red {
    background: #EF4444;
}

.thermometer-bar.active-yellow {
    background: #F59E0B;
}

.thermometer-bar.active-green {
    background: #10B981;
}


@media (max-width: 640px) {
    .my-score-thermometer {
        gap: 3px;
    }

    .thermometer-bar {
        height: 28px;
    }
}


.rating-popup {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 12px;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: 20px;
    z-index: 1000;
    min-width: 320px;
}

@media (max-width: 640px) {
    .rating-popup {
        position: fixed;
        top: 50%;
        left: 50%;
        right: auto;
        transform: translate(-50%, -50%);
        margin: 0;
        width: 90%;
        max-width: 360px;
    }
}

.rating-popup__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.rating-popup__title {
    font-size: 16px;
    font-weight: 600;
    color: #1F2937;
}

.rating-popup__close {
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    font-size: 24px;
    color: #9CA3AF;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color 0.2s ease;
}

.rating-popup__close:hover {
    color: #374151;
}

.rating-popup__stars {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.rating-popup__star {
    width: 100%;
    aspect-ratio: 1;
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 16px;
    font-weight: 600;
    color: #6B7280;
}

.rating-popup__star:hover,
.rating-popup__star.hover {
    border-color: #3B82F6;
    background: #EFF6FF;
    color: #3B82F6;
    transform: scale(1.05);
}

.rating-popup__star.selected {
    border-color: #3B82F6;
    background: #3B82F6;
    color: #fff;
}

.rating-popup__actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.rating-popup__actions .btn-cancel,
.rating-popup__actions .btn-submit-score {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rating-popup__actions .btn-cancel {
    background: #F3F4F6;
    color: #374151;
}

.rating-popup__actions .btn-cancel:hover {
    background: #E5E7EB;
}

.rating-popup__actions .btn-submit-score {
    background: #3B82F6;
    color: #fff;
}

.rating-popup__actions .btn-submit-score:hover:not(:disabled) {
    background: #2563EB;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.rating-popup__actions .btn-submit-score:disabled {
    background: #D1D5DB;
    cursor: not-allowed;
}

.rating-popup__message {
    margin-top: 12px;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    text-align: center;
}

.rating-popup__message.success {
    background: #D1FAE5;
    color: #065F46;
}

.rating-popup__message.error {
    background: #FEE2E2;
    color: #991B1B;
}



.rating-distribution-minimal {
    margin: 40px 0;
    padding: 0;
}

.distribution-title {
    font-size: 20px;
    font-weight: 600;
    color: #1F2937;
    margin-bottom: 20px;
}


.distribution-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    width: 100%;
    text-align: left;
}

.distribution-toggle:hover {
    background: #F3F4F6;
    border-color: #D1D5DB;
}

.distribution-toggle-icon {
    transition: transform 0.3s ease;
    font-size: 16px;
    color: #6B7280;
}

.distribution-toggle.is-expanded .distribution-toggle-icon {
    transform: rotate(180deg);
}


.distribution-chart-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    opacity: 0;
}

.distribution-chart-wrapper.is-expanded {
    max-height: 600px;
    opacity: 1;
    margin-top: 16px;
}


.distribution-header {
    display: grid;
    grid-template-columns: 30px 1fr 50px;
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid #E5E7EB;
}

.distribution-header-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6B7280;
    white-space: nowrap;
}

.distribution-header-label.rating {
    text-align: right;
}

.distribution-header-label.votes {
    text-align: right;
}

.distribution-chart-minimal {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.distribution-row-minimal {
    display: grid;
    grid-template-columns: 30px 1fr 50px;
    gap: 12px;
    align-items: center;
}

.distribution-label {
    font-size: 14px;
    font-weight: 600;
    color: #6B7280;
    text-align: right;
}

.distribution-bar {
    height: 24px;
    background: #F3F4F6;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.distribution-fill {
    height: 100%;
    transition: width 0.3s ease;
    position: relative;
}


.distribution-fill.bar-positive {
    background: linear-gradient(90deg, #10B981 0%, #059669 100%);
}

.distribution-fill.bar-mixed {
    background: linear-gradient(90deg, #F59E0B 0%, #D97706 100%);
}

.distribution-fill.bar-negative {
    background: linear-gradient(90deg, #EF4444 0%, #DC2626 100%);
}

.distribution-fill.bar-neutral {
    background: linear-gradient(90deg, #9CA3AF 0%, #6B7280 100%);
}

.distribution-count {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    text-align: right;
}


.distribution-fill:hover::after {
    content: attr(data-percentage) '%';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}




.rating-form {
    display: none !important;
}

.rating-voted {
    display: none !important;
}


.rating-form-legacy {
    margin-top: 40px;
    padding: 24px;
    background: #F9FAFB;
    border-radius: 8px;
    border: 1px solid #E5E7EB;
}

.rating-form-title {
    font-size: 18px;
    font-weight: 600;
    color: #1F2937;
    margin-bottom: 16px;
}

.rating-stars {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-bottom: 20px;
}

.rating-star {
    width: 44px;
    height: 44px;
    border: 2px solid #E5E7EB;
    border-radius: 8px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 16px;
    font-weight: 600;
    color: #6B7280;
}

.rating-star:hover {
    border-color: #3B82F6;
    background: #EFF6FF;
    color: #3B82F6;
    transform: translateY(-2px);
}

.rating-star.selected {
    border-color: #3B82F6;
    background: #3B82F6;
    color: #fff;
}

.rating-actions {
    text-align: center;
}

.btn-submit-rating {
    padding: 12px 32px;
    background: #3B82F6;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-submit-rating:hover:not(:disabled) {
    background: #2563EB;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.btn-submit-rating:disabled {
    background: #D1D5DB;
    cursor: not-allowed;
}

.rating-voted {
    text-align: center;
    padding: 20px;
    background: #D1FAE5;
    border-radius: 8px;
    color: #065F46;
}



@media (max-width: 640px) {
    .score-rating {
        font-size: 24px;
    }

    .score-badge {
        width: 50px;
        height: 50px;
        font-size: 20px;
        margin-left: 16px;
    }

    .metacritic-score-item {
        padding: 20px;
    }

    .app-editor-opinion {
        margin-left: 0;
        margin-right: 0;
        padding: 0;
    }

    .rating-stars {
        flex-wrap: wrap;
        gap: 6px;
    }

    .rating-star {
        width: 40px;
        height: 40px;
        font-size: 14px;
    }
}