/**
 * Comparison Results Page CSS - Cloud Gaming Compare
 * Página de resultados da comparação detalhada
 * LIMPO E ORGANIZADO - Sem conflitos!
 */

/* === CONTAINER PRINCIPAL === */
.cg-comparison-result-table {
    font-family: var(--cg-font-family);
    color: var(--cg-gray-dark);
    line-height: 1.5;
    max-width: var(--cg-container-max-width);
    margin: var(--cg-spacing-lg) auto;
    padding: var(--cg-spacing-xl);
    background: var(--cg-white);
    border-radius: var(--cg-border-radius);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* === CABEÇALHO DA PÁGINA === */
.cg-comparison-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--cg-spacing-xl);
    padding-bottom: var(--cg-spacing-md);
    border-bottom: 2px solid var(--cg-border-color);
}

.cg-comparison-header h2 {
    margin: 0;
    color: var(--cg-gray-dark);
    font-size: var(--cg-font-size-3xl);
    font-weight: var(--cg-font-weight-semibold);
    font-family: var(--cg-font-family);
}

.cg-header-buttons {
    display: flex;
    gap: var(--cg-spacing-md);
    align-items: center;
}

.cg-methodology-button, .cg-back-button {
    background: #08203C !important;
    color: #ffffff !important;
    border: none !important;
    padding: 0.7rem 1.5rem !important;
    border-radius: 20px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    font-family: var(--cg-font-family);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    text-transform: none;
    margin-right: 0 !important;
}

.cg-methodology-button:hover, .cg-back-button:hover {
    background: #0a2a4a !important;
    transform: translateY(-1px);
}

.cg-view-more-button, .cg-rate-service-button {
    background: #B5F711 !important;
    color: #08203C !important;
    border: none !important;
    padding: 0.7rem 1.5rem !important;
    border-radius: 20px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    font-family: var(--cg-font-family);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    text-transform: none;
    margin-right: 0 !important;
}

.cg-view-more-button:hover, .cg-rate-service-button:hover {
    background: #08203C !important;
    color: #B5F711 !important;
    transform: translateY(-1px);
}

.cg-view-more-button:active, .cg-rate-service-button:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(10, 42, 74, 0.2);
}

/* === SEÇÃO DE SCORES === */
.cg-scores-section {
    display: grid;
    gap: var(--cg-spacing-xl);
    margin-bottom: var(--cg-spacing-lg);
    max-width: var(--cg-container-max-width);
    margin-left: auto;
    margin-right: auto;
}

/* Layout responsivo baseado no número de serviços */
.cg-scores-section[data-services="1"] {
    grid-template-columns: 1fr;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cg-scores-section[data-services="2"] {
    grid-template-columns: 1fr 1fr;
}

.cg-scores-section[data-services="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Botões ajustados quando há 3 serviços */
.cg-scores-section[data-services="3"] .cg-view-more-button,
.cg-scores-section[data-services="3"] .cg-rate-service-button,
.cg-scores-section[data-services="3"] .cg-subscribe-button {
    flex: 1;
    min-width: 100px;
    max-width: 120px;
    padding: 0.6rem 0.8rem !important;
    font-size: 0.75rem !important;
}

.cg-scores-section[data-services="3"] .cg-service-actions {
    gap: var(--cg-spacing-xs);
}

.cg-scores-section[data-services="4"] {
    grid-template-columns: repeat(2, 1fr);
}

.cg-scores-section[data-services="5"],
.cg-scores-section[data-services="6"] {
    grid-template-columns: repeat(3, 1fr);
}

/* Fallback para quando não há data-services */
.cg-scores-section:not([data-services]) {
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}

.cg-service-score-card {
    background: var(--cg-white);
    border: 2px solid var(--cg-border-color);
    border-radius: var(--cg-border-radius);
    padding: var(--cg-spacing-md);
    box-shadow: var(--cg-shadow-sm);
    transition: var(--cg-transition-normal);
    min-width: 0;
    overflow: hidden;
}

.cg-service-score-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--cg-shadow-lg);
    border-color: var(--cg-gray-medium);
}

/* === SCORES POR CATEGORIA === */
.cg-category-scores {
    margin-top: var(--cg-spacing-md);
    padding-top: var(--cg-spacing-md);
    border-top: 1px solid var(--cg-border-color);
}

.cg-scores-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--cg-spacing-md);
}

.cg-scores-column {
    background: rgba(249, 250, 251, 0.5);
    border-radius: var(--cg-border-radius);
    padding: var(--cg-spacing-sm);
    border: 1px solid var(--cg-border-color);
    min-width: 0;
    overflow: hidden;
}

.cg-scores-column-title {
    margin: 0 0 var(--cg-spacing-md) 0;
    font-size: var(--cg-font-size-base);
    font-weight: var(--cg-font-weight-semibold);
    color: var(--cg-gray-dark);
    text-align: center;
    padding-bottom: var(--cg-spacing-sm);
    border-bottom: 2px solid var(--cg-border-color);
}

.cg-system-scores .cg-scores-column-title {
    color: var(--cg-primary-dark);
}

.cg-community-scores .cg-scores-column-title {
    color: var(--cg-primary-dark);
}

.cg-category-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--cg-spacing-xs) 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    min-width: 0;
}

.cg-category-item:last-child {
    border-bottom: none;
}

.cg-category-name {
    font-size: var(--cg-font-size-sm);
    font-weight: var(--cg-font-weight-medium);
    color: var(--cg-gray-dark);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cg-category-value {
    font-size: var(--cg-font-size-sm);
    font-weight: var(--cg-font-weight-semibold);
    color: var(--cg-primary-dark);
    flex-shrink: 0;
    margin-left: var(--cg-spacing-sm);
}

/* === SEÇÃO DETALHADA === */
.cg-detailed-section {
    margin-top: var(--cg-spacing-lg);
}

.cg-detailed-section-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--cg-spacing-md);
    margin-bottom: var(--cg-spacing-lg);
}

.cg-detailed-section h3 {
    margin: 0;
    color: var(--cg-gray-dark);
    font-size: var(--cg-font-size-2xl);
    font-weight: var(--cg-font-weight-semibold);
    font-family: var(--cg-font-family);
}

.cg-scroll-to-table-btn {
    background: #B5F711 !important;
    color: #08203C !important;
    border: none !important;
    padding: 8px 12px !important;
    border-radius: 50% !important;
    font-size: 18px !important;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    box-shadow: 0 2px 8px rgba(181, 247, 17, 0.3);
    animation: bounce 2s infinite;
}

.cg-scroll-to-table-btn:hover {
    background: #08203C !important;
    color: #B5F711 !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(181, 247, 17, 0.4);
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-5px);
    }
    60% {
        transform: translateY(-3px);
    }
}

.cg-comparison-table-wrapper {
    overflow-x: auto;
    border-radius: var(--cg-border-radius);
    box-shadow: var(--cg-shadow-sm);
}

/* === CABEÇALHO DOS SERVIÇOS === */
.cg-service-card-header {
    display: flex;
    align-items: center;
    margin-bottom: var(--cg-spacing-lg);
    padding-bottom: var(--cg-spacing-md);
    border-bottom: var(--cg-border);
}

.cg-service-card-header h3 {
    margin: 0;
    color: var(--cg-primary-dark);
    font-size: var(--cg-font-size-xl);
    font-weight: var(--cg-font-weight-semibold);
    font-family: var(--cg-font-family);
}

/* === ÍCONES DOS SERVIÇOS (ESTILO PERFIL QUADRADO-ARREDONDADO) === */
.cg-service-card-header .cg-service-card-image, .cg-service-card-image, img.cg-service-card-image {
    width: 64px;
    height: 64px;
    min-width: 64px;
    min-height: 64px;
    max-width: 64px;
    max-height: 64px;
    border-radius: var(--cg-border-radius);
    border: 2px solid var(--cg-border-color);
    background: var(--cg-white);
    padding: 2px;
    box-shadow: var(--cg-shadow-icon);
    transition: var(--cg-transition-smooth);
    display: block;
    overflow: hidden;
    flex-shrink: 0;
    margin-right: var(--cg-spacing-md);
    object-fit: cover;
}

.cg-service-card-header .cg-service-card-image:hover, .cg-service-card-image:hover {
    border-color: var(--cg-gray-medium);
    box-shadow: 0 8px 24px rgba(107, 114, 128, 0.15), 0 3px 12px rgba(107, 114, 128, 0.1);
}

/* === CONTAINER DE PONTUAÇÕES === */
.cg-scores-container {
    display: flex;
    gap: var(--cg-spacing-md);
    margin-bottom: var(--cg-spacing-md);
    align-items: center;
}

.cg-main-score {
    text-align: center;
    min-width: 120px;
    flex: 1;
    white-space: nowrap;
}

.cg-community-score {
    background: transparent;
    color: var(--cg-gray-dark);
    padding: var(--cg-spacing-sm);
    border-radius: var(--cg-border-radius);
    text-align: center;
    min-width: 120px;
    flex: 1;
    white-space: nowrap;
}

.cg-score-number {
    display: inline;
    font-size: var(--cg-font-size-3xl);
    font-weight: var(--cg-font-weight-bold);
    line-height: 1;
}

.cg-score-label {
    display: inline;
    font-size: var(--cg-font-size-3xl);
    font-weight: var(--cg-font-weight-bold);
    opacity: 0.9;
}

.cg-score-type {
    display: block;
    font-size: var(--cg-font-size-xs);
    font-weight: var(--cg-font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: var(--cg-spacing-xs);
    opacity: 0.8;
}

.cg-score-count {
    font-size: var(--cg-font-size-xs);
    margin-top: var(--cg-spacing-xs);
    opacity: 0.7;
}

/* === TABELA DE COMPARAÇÃO DETALHADA === */
.cg-detailed-comparison {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--cg-spacing-xl);
    background: var(--cg-white);
    border-radius: var(--cg-border-radius);
    overflow: hidden;
    box-shadow: var(--cg-shadow-sm);
}

/* Seções da tabela com destaque clean */
.cg-detailed-comparison .cg-section-header {
    background: #f1f5f9 !important;
    color: var(--cg-gray-dark) !important;
    font-weight: var(--cg-font-weight-semibold) !important;
    font-size: var(--cg-font-size-lg) !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    padding: var(--cg-spacing-md) !important;
    border-left: 4px solid #64748b !important;
}

.cg-detailed-comparison .cg-section-header td {
    background: #f1f5f9 !important;
    color: var(--cg-gray-dark) !important;
    font-weight: var(--cg-font-weight-semibold) !important;
    border-bottom: 1px solid #cbd5e1 !important;
    border-left: 4px solid #64748b !important;
}



.cg-detailed-comparison th,
.cg-detailed-comparison td {
    padding: var(--cg-spacing-md);
    text-align: left;
    border-bottom: var(--cg-border);
}

.cg-detailed-comparison th {
    background: #f8fafc;
    color: var(--cg-gray-dark);
    font-weight: var(--cg-font-weight-semibold);
    font-size: var(--cg-font-size-base);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    border-bottom: 2px solid #e2e8f0;
}

.cg-detailed-comparison td {
    font-size: var(--cg-font-size-base);
    color: var(--cg-gray-dark);
}

.cg-detailed-comparison tr:last-child td {
    border-bottom: none;
}

.cg-detailed-comparison tr:nth-child(even) {
    background: rgba(249, 250, 251, 0.5);
}

/* === MÉTRICAS INDIVIDUAIS === */
.cg-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--cg-spacing-md);
    margin-bottom: var(--cg-spacing-xl);
}

.cg-metric-card {
    background: var(--cg-white);
    border: var(--cg-border);
    border-radius: var(--cg-border-radius);
    padding: var(--cg-spacing-lg);
    text-align: center;
    transition: var(--cg-transition-normal);
}

.cg-metric-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--cg-shadow-md);
}

.cg-metric-title {
    font-size: var(--cg-font-size-sm);
    font-weight: var(--cg-font-weight-medium);
    color: var(--cg-gray-medium);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--cg-spacing-sm);
}

.cg-metric-value {
    font-size: var(--cg-font-size-2xl);
    font-weight: var(--cg-font-weight-bold);
    color: var(--cg-primary-dark);
    margin-bottom: var(--cg-spacing-xs);
}

.cg-metric-description {
    font-size: var(--cg-font-size-xs);
    color: var(--cg-gray-medium);
    line-height: 1.4;
}

/* === BOTÕES DE AÇÃO === */
/* === BOTÃO ASSINAR AGORA === */
.cg-subscribe-button {
    background: #B5F711 !important;
    color: #08203C !important;
    border: none !important;
    padding: 0.7rem 1.5rem !important;
    border-radius: 20px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    font-family: var(--cg-font-family);
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: top;
    text-transform: none;
    margin-right: 0 !important;
}

.cg-subscribe-button:hover {
    background: #08203C !important;
    color: #B5F711 !important;
    transform: translateY(-1px);
}

.cg-service-actions {
    display: flex !important;
    gap: var(--cg-spacing-md) !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: var(--cg-spacing-lg) !important;
    padding: var(--cg-spacing-md) 0 !important;
    flex-wrap: wrap !important;
    min-height: 44px !important;
    width: 100% !important;
    text-align: center !important;
}

/* BOTÕES COM TAMANHO UNIFORME - FORÇA CENTRALIZAÇÃO E LARGURA PADRÃO */
.cg-comparison-result-table .cg-service-actions .cg-view-more-button,
.cg-comparison-result-table .cg-service-actions .cg-rate-service-button,
.cg-comparison-result-table .cg-service-actions .cg-subscribe-button,
.cg-service-actions .cg-view-more-button,
.cg-service-actions .cg-rate-service-button,
.cg-service-actions .cg-subscribe-button {
    /* FORÇA as mesmas dimensões dos botões do header */
    padding: 0.7rem 1.5rem !important;
    border-radius: 20px !important;
    font-size: 0.875rem !important;
    font-weight: 600 !important;
    font-family: var(--cg-font-family) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: top !important;
    text-transform: none !important;
    white-space: nowrap !important;
    border: none !important;
    
    /* FORÇA largura consistente e centralizada */
    min-width: 140px !important;
    max-width: 180px !important;
    width: auto !important;
    flex: 0 0 auto !important; /* Não cresce nem encolhe */
    text-align: center !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* REGRA EXTRA ESPECÍFICA PARA GARANTIR CENTRALIZAÇÃO */
.cg-comparison-result-table .cg-service-actions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    gap: 12px !important;
}

/* === SEÇÃO INFERIOR - COMENTÁRIOS + VOTAÇÃO === */
.cg-bottom-section-wrapper {
    margin-top: var(--cg-spacing-xxl);
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--cg-spacing-xl);
    align-items: start;
    max-width: var(--cg-container-max-width);
    margin-left: auto;
    margin-right: auto;
}

/* === SEÇÃO DE COMENTÁRIOS (2/3) === */
.cg-comments-section {
    padding: var(--cg-spacing-xl);
    background: var(--cg-white);
    border-radius: var(--cg-border-radius);
    box-shadow: var(--cg-shadow-sm);
    border: 1px solid var(--cg-border-color);
}

/* === SEÇÃO DE VOTAÇÃO (1/3) === */
.cg-voting-section {
    padding: var(--cg-spacing-lg);
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
    border-radius: var(--cg-border-radius);
    box-shadow: var(--cg-shadow-md);
    border: 1px solid #cbd5e1;
    position: sticky;
    top: 20px;
}

/* === CABEÇALHO DA VOTAÇÃO === */
.cg-voting-header {
    text-align: center;
    margin-bottom: var(--cg-spacing-lg);
    padding-bottom: var(--cg-spacing-md);
    border-bottom: 1px solid #cbd5e1;
}

.cg-voting-header h3 {
    font-family: var(--cg-font-family);
    font-size: var(--cg-font-size-lg);
    font-weight: var(--cg-font-weight-semibold);
    color: #1e293b;
    margin: 0 0 var(--cg-spacing-xs) 0;
}

.cg-voting-subtitle {
    font-size: var(--cg-font-size-sm);
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

/* === FORMULÁRIO DE VOTAÇÃO === */
.cg-voting-options {
    margin-bottom: var(--cg-spacing-md);
}

.cg-vote-option {
    display: block;
    margin-bottom: var(--cg-spacing-sm);
    cursor: pointer;
    transition: all 0.2s ease;
}

.cg-vote-option input[type="radio"] {
    display: none;
}

.cg-vote-label {
    display: flex;
    align-items: center;
    gap: var(--cg-spacing-sm);
    padding: var(--cg-spacing-sm);
    background: #ffffff;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.cg-vote-option:hover .cg-vote-label {
    border-color: #3b82f6;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
}

.cg-vote-option input[type="radio"]:checked + .cg-vote-label {
    border-color: #3b82f6;
    background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.2);
}

.cg-vote-logo {
    width: 24px;
    height: 24px;
    object-fit: contain;
    border-radius: 4px;
}

.cg-vote-name {
    font-size: var(--cg-font-size-sm);
    font-weight: 500;
    color: #374151;
}

.cg-vote-option input[type="radio"]:checked + .cg-vote-label .cg-vote-name {
    color: #1e40af;
    font-weight: 600;
}

/* === BOTÕES === */
.cg-submit-vote-btn,
.cg-change-vote-btn,
.cg-login-btn {
    width: 100%;
    padding: 0.7rem 1.5rem;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: var(--cg-font-size-sm);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--cg-spacing-sm);
}

.cg-submit-vote-btn:hover,
.cg-change-vote-btn:hover,
.cg-login-btn:hover {
    background: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

/* === AÇÕES DE VOTO (BOTÕES DISCRETOS) === */
.cg-vote-actions {
    display: flex;
    gap: var(--cg-spacing-xs);
    justify-content: center;
    margin-top: var(--cg-spacing-sm);
}

/* FORÇA BOTÕES CLEAN - SOBRESCREVE QUALQUER OUTRO ESTILO */
.cg-voting-section .cg-change-vote-btn,
.cg-voting-section .cg-remove-vote-btn,
.cg-vote-actions .cg-change-vote-btn,
.cg-vote-actions .cg-remove-vote-btn,
button.cg-change-vote-btn,
button.cg-remove-vote-btn {
    background: #f8f9fa !important;
    color: #6c757d !important;
    border: none !important;
    font-size: var(--cg-font-size-xs) !important;
    padding: 0.5rem 1rem !important;
    margin-top: 0 !important;
    width: auto !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.cg-voting-section .cg-change-vote-btn:hover,
.cg-vote-actions .cg-change-vote-btn:hover,
button.cg-change-vote-btn:hover {
    background: #e9ecef !important;
    color: #495057 !important;
    transform: none !important;
    box-shadow: none !important;
}

.cg-voting-section .cg-remove-vote-btn:hover,
.cg-vote-actions .cg-remove-vote-btn:hover,
button.cg-remove-vote-btn:hover {
    background: #f8d7da !important;
    color: #721c24 !important;
    transform: none !important;
    box-shadow: none !important;
}

/* REGRA EXTRA ESPECÍFICA PARA GARANTIR CLEAN BUTTONS */
.cg-comparison-result-table .cg-voting-section button[class*="vote-btn"] {
    background: #f8f9fa !important;
    color: #6c757d !important;
    border: none !important;
}

.cg-comparison-result-table .cg-voting-section button[class*="vote-btn"]:hover {
    background: #e9ecef !important;
    color: #495057 !important;
}

.cg-comparison-result-table .cg-voting-section button.cg-remove-vote-btn:hover {
    background: #f8d7da !important;
    color: #721c24 !important;
}

/* === ESTADO DO VOTO === */
.cg-user-voted {
    text-align: center;
    margin-bottom: var(--cg-spacing-md);
    padding: var(--cg-spacing-md);
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-radius: 8px;
    border: 1px solid #10b981;
}

.cg-vote-status {
    margin: 0 0 var(--cg-spacing-sm) 0;
    font-size: var(--cg-font-size-sm);
    color: #065f46;
}

/* === LOGIN REQUERIDO === */
.cg-login-required {
    text-align: center;
    padding: var(--cg-spacing-xl);
}

.cg-login-required p {
    margin: 0 0 var(--cg-spacing-md) 0;
    color: #6b7280;
    font-size: var(--cg-font-size-sm);
}

/* === RESULTADOS DA VOTAÇÃO === */
.cg-voting-results {
    margin-top: var(--cg-spacing-lg);
    padding-top: var(--cg-spacing-lg);
    border-top: 1px solid #cbd5e1;
}

.cg-voting-results h4 {
    font-family: var(--cg-font-family);
    font-size: var(--cg-font-size-base);
    font-weight: var(--cg-font-weight-semibold);
    color: #1e293b;
    margin: 0 0 var(--cg-spacing-md) 0;
    text-align: center;
}

/* === GRÁFICO DE RANKING === */
.cg-ranking-chart {
    margin-top: var(--cg-spacing-sm);
}

.cg-ranking-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--cg-spacing-sm);
    margin-bottom: var(--cg-spacing-xs);
    background: #ffffff;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
}

.cg-ranking-service {
    display: flex;
    align-items: center;
    gap: var(--cg-spacing-sm);
}

.cg-ranking-logo {
    width: 20px;
    height: 20px;
    object-fit: contain;
    border-radius: 3px;
}

.cg-ranking-name {
    font-size: var(--cg-font-size-xs);
    font-weight: 500;
    color: #374151;
}

.cg-ranking-percentage {
    font-size: var(--cg-font-size-xs);
    font-weight: 600;
    color: #3b82f6;
}

.cg-ranking-bar {
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 4px;
}

.cg-ranking-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6 0%, #1d4ed8 100%);
    transition: width 0.8s ease;
}

.cg-comments-header {
    text-align: center;
    margin-bottom: var(--cg-spacing-xl);
    padding-bottom: var(--cg-spacing-lg);
    border-bottom: 1px solid var(--cg-border-color);
}

.cg-comments-header h3 {
    font-family: var(--cg-font-family);
    font-size: var(--cg-font-size-2xl);
    font-weight: var(--cg-font-weight-semibold);
    color: var(--cg-gray-dark);
    margin: 0 0 var(--cg-spacing-sm) 0;
}

.cg-comments-subtitle {
    font-size: var(--cg-font-size-base);
    color: var(--cg-gray-medium);
    margin: 0;
    line-height: 1.6;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Garante visibilidade dos elementos do sistema de comentários */
.cg-comments-section-wrapper .cg-comment-form,
.cg-comments-section-wrapper .cg-comment-form .cg-btn,
.cg-comments-section-wrapper .cg-comment-form .cg-btn-primary,
.cg-comments-section-wrapper .cg-comment-form button {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

.cg-comments-section-wrapper .cg-comment-form .cg-btn,
.cg-comments-section-wrapper .cg-comment-form .cg-btn-primary,
.cg-comments-section-wrapper .cg-comment-form button {
    display: inline-flex !important;
    background: var(--cg-primary-light) !important;
    color: var(--cg-white) !important;
    border: none !important;
    padding: 0.6rem 1.3rem !important;
    border-radius: 8px !important;
    font-weight: var(--cg-font-weight-semibold) !important;
    font-family: var(--cg-font-family) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    margin-top: var(--cg-spacing-sm) !important;
}

.cg-comments-section-wrapper .cg-comment-form .cg-btn:hover,
.cg-comments-section-wrapper .cg-comment-form .cg-btn-primary:hover,
.cg-comments-section-wrapper .cg-comment-form button:hover {
    background: var(--cg-accent-green) !important;
    color: var(--cg-primary-dark) !important;
}

/* === PRICING PLANS IN COMPARISON TABLE === */
/* Refined pricing plans styling (cleaner approach) */
.cg-pricing-plan {
    padding: var(--cg-spacing-sm) !important;
}

.cg-plan-name {
    font-weight: var(--cg-font-weight-semibold);
    color: var(--cg-primary-dark);
    margin-bottom: var(--cg-spacing-xs);
    font-size: var(--cg-font-size-sm);
}

.cg-plan-name.cg-plan-featured {
    color: var(--cg-primary-light);
    font-weight: var(--cg-font-weight-bold);
}

.cg-plan-prices {
    color: var(--cg-gray-dark);
    font-size: var(--cg-font-size-base);
    line-height: 1.4;
    background: var(--cg-gray-light);
    padding: var(--cg-spacing-sm);
    border-radius: var(--cg-border-radius);
    border-left: 4px solid var(--cg-accent-green);
    margin-bottom: var(--cg-spacing-sm);
    font-weight: var(--cg-font-weight-bold);
}

.cg-plan-features {
    color: var(--cg-gray-dark);
    font-size: var(--cg-font-size-xs);
    line-height: 1.4;
}

/* === BADGES DE ÍNDICE DE VALOR === */
.cg-value-index {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: var(--cg-spacing-xs) var(--cg-spacing-sm);
    font-weight: var(--cg-font-weight-semibold);
    font-size: var(--cg-font-size-base);
    min-width: 60px;
    justify-content: center;
    background: transparent;
    color: var(--cg-text-color);
}

.cg-value-score {
    font-size: 1em;
}

.cg-value-label {
    font-size: 0.9em;
    opacity: 0.8;
}

/* Informação discreta do plano */
.cg-value-plan-info {
    font-size: var(--cg-font-size-xs);
    color: var(--cg-gray-medium);
    margin-top: 2px;
    font-style: italic;
}

/* Nota discreta nos planos */
.cg-plan-value-score {
    font-size: 0.85em;
    color: var(--cg-gray-medium);
    font-weight: var(--cg-font-weight-normal);
    opacity: 0.7;
}

/* === RESPONSIVIDADE === */
@media (max-width: 1200px) {
    /* Em telas menores, forçar 3 serviços para 2 colunas */
    .cg-scores-section[data-services="3"] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .cg-scores-section[data-services="3"] .cg-service-score-card:nth-child(3) {
        grid-column: 1 / -1;
        max-width: 50%;
        margin: 0 auto;
    }
}

/* === RESPONSIVIDADE PARA VOTAÇÃO === */
@media (max-width: 1024px) {
    .cg-bottom-section-wrapper {
        grid-template-columns: 1fr;
        gap: var(--cg-spacing-lg);
    }
    
    .cg-voting-section {
        position: static;
        order: -1; /* Votação aparece primeiro no mobile */
    }
}

@media (max-width: 768px) {
    /* Container principal com padding */
    .cg-comparison-result-table {
        margin: var(--cg-spacing-md);
        padding: var(--cg-spacing-lg);
    }
    
    /* Cabeçalho responsivo */
    .cg-comparison-header {
        flex-direction: column;
        gap: var(--cg-spacing-md);
        text-align: center;
    }
    
    .cg-comparison-header h2 {
        font-size: var(--cg-font-size-3xl);
    }
    
    /* Botões do cabeçalho */
    .cg-header-buttons {
        flex-direction: column;
        width: 100%;
        gap: var(--cg-spacing-sm);
    }
    
    .cg-methodology-button, 
    .cg-back-button {
        width: 100%;
        max-width: 280px;
        padding: 0.6rem 1rem !important;
        font-size: 0.8rem !important;
    }
    
    /* Em mobile, sempre 1 coluna */
    .cg-scores-section[data-services="1"],
    .cg-scores-section[data-services="2"],
    .cg-scores-section[data-services="3"],
    .cg-scores-section[data-services="4"],
    .cg-scores-section[data-services="5"],
    .cg-scores-section[data-services="6"] {
        grid-template-columns: 1fr;
    }
    
    .cg-scores-section[data-services="3"] .cg-service-score-card:nth-child(3) {
        grid-column: auto;
        max-width: none;
        margin: 0;
    }
    .cg-service-card-header {
        flex-direction: column;
        text-align: center;
        gap: var(--cg-spacing-md);
    }
    
    .cg-scores-container {
        grid-template-columns: 1fr;
    }
    
    .cg-scores-columns {
        grid-template-columns: 1fr;
        gap: var(--cg-spacing-lg);
    }
    
    .cg-metrics-grid {
        grid-template-columns: 1fr;
    }
    
    .cg-detailed-comparison {
        font-size: var(--cg-font-size-sm);
    }
    
    .cg-detailed-comparison th,
    .cg-detailed-comparison td {
        padding: var(--cg-spacing-sm);
    }
    
    .cg-service-actions {
        flex-direction: column;
        gap: var(--cg-spacing-sm);
        width: 100%;
    }
    
    /* Botões em coluna no mobile - mantém largura dos botões do topo */
    .cg-service-actions .cg-view-more-button,
    .cg-service-actions .cg-rate-service-button,
    .cg-service-actions .cg-subscribe-button {
        width: 100%;
        max-width: 280px;
        margin: 0 auto;
        /* Mantém o mesmo padding dos botões do header */
        padding: 0.7rem 1.5rem !important;
        font-size: 0.875rem !important;
        flex: none;
    }
}

@media (max-width: 480px) {
    /* Container ainda mais compacto */
    .cg-comparison-result-table {
        margin: var(--cg-spacing-sm);
        padding: var(--cg-spacing-md);
    }
    
    /* Título menor mas ainda legível */
    .cg-comparison-header h2 {
        font-size: var(--cg-font-size-2xl);
    }
    
    /* Botões ainda menores no mobile */
    .cg-methodology-button, 
    .cg-back-button {
        max-width: 250px;
        padding: 0.5rem 0.8rem !important;
        font-size: 0.75rem !important;
        border-radius: 15px !important;
    }
    
    .cg-service-card-header h3 {
        font-size: var(--cg-font-size-lg);
    }
    
    .cg-score-number {
        font-size: var(--cg-font-size-2xl);
    }
    
    .cg-metric-value {
        font-size: var(--cg-font-size-xl);
    }
    
    /* Botões ainda mais compactos no mobile pequeno - mantém consistência */
    .cg-service-actions .cg-view-more-button,
    .cg-service-actions .cg-rate-service-button,
    .cg-service-actions .cg-subscribe-button {
        max-width: 250px;
        padding: 0.6rem 1.2rem !important;
        font-size: 0.8rem !important;
    }
}