/*
 * CSS Final - Design "Dark Mode" com Coluna Única (v5.0)
 */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');

/* --- MUDANÇA PRINCIPAL AQUI --- */
/* Wrapper agora controla apenas a largura e o centramento da coluna */
.cotacoes-grid-wrapper {
    max-width: 500px; /* Largura máxima da coluna */
    margin: 0 auto;   /* Centraliza a coluna na página */
    padding: 10px;
}

/* Contêiner Geral de cada cotação */
.cotacao-container {
    font-family: 'Roboto', sans-serif;
    background-color: #2a2a2e;
    border: 1px solid #444444;
    border-radius: 8px;
    padding: 20px 25px;
    margin-bottom: 25px;
    color: #f0f0f0;
    text-align: center;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.cotacao-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
}

/* Título */
.cotacao-container h2 {
    font-size: 1.4em;
    margin-top: 0;
    margin-bottom: 5px;
    color: #ffffff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Data de atualização */
.cotacao-container .atualizado {
    font-size: 0.8em;
    color: #999999;
    margin-bottom: 20px;
    font-weight: 300;
}

/* Linha peso/preço */
.cotacao-container .linha {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    border-top: 1px solid #3a3a3a;
}

.cotacao-container .caixa.peso {
    font-size: 1.2em;
    color: #f0f0f0;
    font-weight: 400;
}

.cotacao-container .caixa.preco {
    font-size: 2.0em;
    font-weight: 700;
    color: #FFFFFF;
}

/* Estilo para os outros shortcodes de texto */
.cotacao-variacao-paragrafo,
.cotacao-info-paragrafo {
    background-color: #2a2a2e;
    border: 1px solid #444444;
    color: #f0f0f0;
    padding: 20px;
    border-radius: 8px;
    max-width: 600px;
    margin: 25px auto;
    text-align: center;
    line-height: 1.6;
}

/* Centraliza o parágrafo do shortcode _info */
.cotacao-info-paragrafo {
    text-align: center;
}

/* Classes para a variação de preço (verde/vermelho) */
.cotacao-positiva {
    color: #28a745;
    font-weight: bold;
}

.cotacao-negativa {
    color: #dc3545;
    font-weight: bold;
}

/* A Media Query para celulares não é mais estritamente necessária 
   para o layout de coluna, mas ajusta o padding e as fontes 
   em telas menores para uma melhor leitura. 
*/
@media (max-width: 768px) {
    .cotacoes-grid-wrapper {
        padding: 0;
    }

    .cotacao-container {
        padding: 15px;
    }

    .cotacao-container h2 {
        font-size: 1.3em;
    }

    .cotacao-container .caixa.preco {
        font-size: 1.5em;
    }
}