/* Estilos para o Box de Índices Financeiros */
.wpmi-financial-box {
    background-color: transparent; /* Fundo transparente para se integrar ao site */
    border: none; /* Sem borda */
    border-radius: 0; /* Sem borda arredondada */
    padding: 0; /* Sem padding externo */
    margin-top: 40px; /* Separação do conteúdo do post */
    margin-bottom: 20px; /* Margem inferior */
    box-shadow: none; /* Sem sombra */
    font-family: 'Inter', sans-serif; /* Fonte Inter */
    color: #333; /* Cor de texto padrão */
    text-align: left; /* Alinhamento à esquerda */
    width: 100%; /* Ocupa a largura total disponível */
    overflow: hidden; /* Garante que o conteúdo não vaze */
}

/* Título do Box */
.wpmi-box-title {
    background-color: #3f51b5; /* Azul escuro, similar ao da imagem */
    color: #ffffff; /* Texto branco */
    font-size: 1.2em; /* Tamanho da fonte ajustado */
    padding: 8px 15px; /* Padding interno */
    margin-bottom: 15px; /* Margem abaixo do título */
    font-weight: bold;
    display: inline-block; /* Para que o background não ocupe a largura total */
    border-radius: 4px; /* Levemente arredondado */
}

/* Container dos Índices */
.wpmi-indices-container {
    display: flex;
    flex-wrap: wrap; /* Permite que os itens quebrem linha se não houver espaço */
    gap: 10px; /* Espaçamento menor entre os itens */
    justify-content: flex-start; /* Alinha os itens à esquerda */
    align-items: flex-start; /* Alinha os itens ao topo */
}

/* Item Individual do Índice (Dólar, Euro, Bitcoin) */
.wpmi-index-item {
    display: flex; /* Torna o item um flex container */
    align-items: stretch; /* Garante que as partes tenham a mesma altura */
    border-radius: 4px; /* Levemente arredondado */
    overflow: hidden; /* Garante que o conteúdo respeite o border-radius */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* Sombra mais sutil */
    flex-shrink: 0; /* Impede que os itens encolham demais */
    min-width: fit-content; /* Largura mínima baseada no conteúdo */
}

/* Nome da Moeda (Dólar, Euro, Bitcoin) */
.wpmi-currency-name {
    background-color: #3f51b5; /* Azul escuro */
    color: #ffffff; /* Texto branco */
    padding: 8px 12px;
    font-size: 0.9em;
    font-weight: 600;
    white-space: nowrap; /* Evita quebras de linha no nome */
    display: flex;
    align-items: center;
}

/* Valor da Moeda (6,00) */
.wpmi-value {
    background-color: #ef5350; /* Vermelho vibrante */
    color: #ffffff; /* Texto branco */
    padding: 8px 12px;
    font-size: 0.9em;
    font-weight: bold;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

/* Variação da Moeda (-1,2) */
.wpmi-change {
    background-color: #212121; /* Preto */
    color: #ffffff; /* Texto branco */
    padding: 8px 12px;
    font-size: 0.9em;
    font-weight: 500;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

/* Cores para Variação (opcional, se quiser ícones ou cores diferentes para alta/baixa) */
.wpmi-trend-up {
    /* color: #4CAF50; */ /* Verde, se quiser mudar a cor do texto */
}

.wpmi-trend-down {
    /* color: #F44336; */ /* Vermelho, se quiser mudar a cor do texto */
}

/* Última atualização (mantido, mas pode ser estilizado para ser mais discreto) */
.wpmi-last-updated {
    font-size: 0.75em;
    color: #757575; /* Cinza mais neutro */
    margin-top: 15px;
    text-align: left;
}

/* Responsividade: Empilhar apenas em último caso e com alinhamento à esquerda */
@media screen and (max-width: 600px) { /* Ajuste este breakpoint conforme necessário */
    .wpmi-indices-container {
        flex-direction: column; /* Empilha os itens verticalmente */
        align-items: flex-start; /* Alinha os itens empilhados à esquerda */
    }

    .wpmi-index-item {
        width: 100%; /* Ocupa a largura total em mobile */
        margin-bottom: 10px; /* Espaçamento entre os itens empilhados */
    }
}

/* Estilos específicos para o Widget (ajustes finos se necessário) */
/* Geralmente, o box já se adapta bem, mas pode precisar de margens menores, etc. */
.widget .wpmi-financial-box {
    margin-top: 0; /* Remove margem superior extra no widget */
    margin-bottom: 0; /* Remove margem inferior extra no widget */
    padding: 10px 0; /* Ajusta o padding para o contexto do widget */
}

.widget .wpmi-box-title {
    font-size: 1.1em; /* Título um pouco menor no widget */
    padding: 6px 10px;
    margin-bottom: 10px;
}

.widget .wpmi-currency-name,
.widget .wpmi-value,
.widget .wpmi-change {
    font-size: 0.85em; /* Fontes um pouco menores no widget */
    padding: 6px 10px;
}

.widget .wpmi-last-updated {
    font-size: 0.7em; /* Fonte menor para a atualização no widget */
}

.widget .wpmi-indices-container {
    gap: 8px; /* Espaçamento menor no widget */
}