/* =================================================================== */
/* CSS PARA O PLUGIN WP CAMPEONATOS - DESIGN V2 (MODERNO)              */
/* =================================================================== */

/* O CARD PRINCIPAL DE CADA JOGO */
.wpc-jogo-card {
    background-color: #fff;
    border: 1px solid #e9e9e9;
    border-radius: 16px; /* Bordas mais arredondadas */
    margin-bottom: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    font-family: 'Helvetica Neue', Arial, sans-serif;
    overflow: hidden; /* Importante para o design */
}

/* LINHA DE INFORMAÇÕES SUPERIOR (LOCAL, DATA) */
.wpc-linha-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: #555;
    padding: 10px 15px;
    background-color: #f7f7f7;
}
.wpc-local { font-weight: 600; }

/* CORPO PRINCIPAL DO CARD */
.wpc-jogo-body {
    padding: 20px 15px;
    position: relative; /* Necessário para a etiqueta de status */
}

/* CONTAINER DA ETIQUETA DE STATUS */
.wpc-status-wrapper {
    text-align: center;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%); /* O truque para centralizar e sobrepor */
    z-index: 2;
}

/* A ETIQUETA DE STATUS "ENCERRADO" */
.wpc-status-badge {
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
    border: 2px solid #fff;
}
/* Cores para cada status */
.wpc-status-badge.status-final { background-color: #e53935; } /* Vermelho para Encerrado */
.wpc-status-badge.status-andamento { background-color: #fb8c00; } /* Laranja para Em Andamento */
.wpc-status-badge.status-agendado { background-color: #43a047; } /* Verde para Agendado */
.wpc-status-badge.status-cancelado { background-color: #757575; } /* Cinza para Cancelado */

/* ÁREA DO CONFRONTO (TIMES E PLACAR) */
.wpc-confronto {
    display: flex;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    margin-top: 15px;
}

/* BLOCO DE CADA TIME (LOGO + NOME) */
.wpc-team {
    width: 38%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.wpc-team-logo img {
    width: 65px;
    height: 65px;
    object-fit: contain;
}
.wpc-team-name {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    line-height: 1.2;
}

/* ÁREA DO PLACAR */
.wpc-score {
    width: 24%;
    font-size: 42px;
    font-weight: 700;
    color: #1a1a1a;
    display: flex;
    justify-content: center;
    align-items: center;
}
.wpc-score .wpc-vs {
    font-weight: 300;
    font-size: 30px;
    margin: 0 10px;
}
.wpc-vs-agendado {
    font-size: 16px;
    font-weight: bold;
    color: #888;
}

/* RODAPÉ COM O NOME DO CAMPEONATO */
.wpc-categoria-footer {
    text-align: center;
    font-size: 12px;
    color: #666;
    padding: 8px 15px;
    background-color: #f7f7f7;
    border-top: 1px solid #e9e9e9;
    text-transform: uppercase;
}

/* =================================================================== */
/* CSS PARA O TEXTO DE TEMPO DE JOGO (INTERVALO, ETC)                  */
/* =================================================================== */

/* NOVO ESTILO PARA O TEXTO "TEMPO DE JOGO" */
.wpc-tempo-jogo-wrapper {
    text-align: center; /* ESTA É A MUDANÇA PRINCIPAL */
    font-size: 13px;
    font-weight: 600;
    color: #555;
    margin-top: 5px; /* Ajusta a margem superior */
    margin-bottom: 5px; /* Ajusta a margem inferior */
    text-transform: uppercase;
    padding: 2px 0; /* Adiciona um pequeno padding vertical */
    border-top: 1px solid #eee; /* Linha sutil acima */
    border-bottom: 1px solid #eee; /* Linha sutil abaixo */
    background-color: #f9f9f9; /* Um fundo suave */
}

/* =================================================================== */
/* CSS PARA O TÍTULO E SUBTÍTULO DAS SEÇÕES DE JOGOS                   */
/* =================================================================== */

.wpc-modalidade-titulo {
    font-size: 12px!important; /* Reduz um pouco o tamanho do título principal*/
    text-align: left; /* Alinha à esquerda para um visual mais de "feed" */
    margin-bottom: 15px;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 8px;
    text-transform: capitalize;
   
}

.wpc-status-subtitulo {
    text-transform: capitalize;
    font-size: 12px; /* A fonte menor que você pediu */
    font-weight: normal; /* Tira o negrito */
    color: #777; /* Uma cor mais suave */
}

/* =================================================================== */
/* CSS PARA O CARROSSEL DE PATROCINADORES (SWIPER.JS)                  */
/* =================================================================== */

.wpc-patrocinadores-slider {
    width: 100%;
    height: auto;
    padding: 20px 0 40px 0; /* Espaço para a paginação embaixo */
}

.wpc-patrocinadores-slider .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wpc-patrocinadores-slider .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 150px; /* Ajuste a altura máxima dos banners aqui */
    object-fit: contain;
}

/* Estilo das setas e bolinhas (opcional, para combinar com o seu site) */
.wpc-patrocinadores-slider .swiper-button-next,
.wpc-patrocinadores-slider .swiper-button-prev {
    color: #007aff; /* Cor das setas */
}

.wpc-patrocinadores-slider .swiper-pagination-bullet-active {
    background: #007aff; /* Cor da bolinha ativa */
}
/* =================================================================== */
/* CSS PARA TABELA DE CLASSIFICAÇÃO RESPONSIVA                         */
/* =================================================================== */

.wpc-tabela-wrapper {
    width: 100%;
    overflow-x: auto; /* Garante a rolagem em telas muito pequenas */
}

.wpc-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 14px;
}

.wpc-table th, .wpc-table td {
    padding: 10px 8px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

.wpc-table th {
    background-color: #f2f2f2;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 12px;
}

.wpc-table .wpc-td-team {
    text-align: left;
    font-weight: bold;
}

.wpc-table .wpc-logo-sm {
    width: 24px;
    height: 24px;
    margin-right: 8px;
    vertical-align: middle;
}

/* A MÁGICA PARA CELULAR ACONTECE AQUI (telas com menos de 768px de largura) */
@media screen and (max-width: 767px) {
    .wpc-table thead {
        /* 1. Esconde o cabeçalho original da tabela */
        display: none;
    }

    .wpc-table tr {
        /* 2. Cada linha vira um "card" */
        display: block;
        border: 1px solid #ddd;
        border-radius: 8px;
        margin-bottom: 15px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.05);
        background: #fff;
    }

    .wpc-table td {
        /* 3. As células se empilham e ocupam a linha toda */
        display: block;
        text-align: right; /* Alinha o valor à direita */
        border-bottom: 1px solid #f0f0f0;
        position: relative;
        padding-left: 50%; /* Deixa espaço para o título da coluna */
    }

    .wpc-table td:last-child {
        border-bottom: none;
    }

    .wpc-table td::before {
        /* 4. Adiciona o título da coluna (que pegamos do data-label) à esquerda */
        content: attr(data-label);
        position: absolute;
        left: 10px;
        width: calc(50% - 20px);
        text-align: left;
        font-weight: bold;
        text-transform: uppercase;
        font-size: 11px;
        color: #555;
    }
    
    .wpc-table .wpc-td-team {
        /* Ajuste especial para o nome do time, que fica no topo do card */
        text-align: center;
        padding: 15px 10px;
        background-color: #f8f8f8;
        border-radius: 8px 8px 0 0;
        font-size: 16px;
    }
    
    .wpc-table .wpc-td-team::before {
        display: none; /* Não precisa do label "Time" */
    }
}

@media (max-width: 767px) {

    
}