/* Estilos para o container do cronômetro */
#adapta-countdown {
    display: flex; /* Organiza os spans em uma linha */
    justify-content: center; /* Centraliza o cronômetro horizontalmente */
    align-items: baseline; /* Alinha 'd' 'h' 'm' 's' com a base dos números */
    font-size: 1.8em; /* Tamanho geral dos números */
    font-weight: bold;
    margin: 15px 0; /* Espaço acima e abaixo do cronômetro */
    gap: 10px; /* Espaço entre cada par número-unidade */
    flex-wrap: wrap; /* Permite quebra de linha em telas menores */
}

/* Estilo para cada container de número (span) */
#adapta-countdown span {
    display: flex; /* Transforma cada span em um container flex para alinhar número e unidade */
    flex-direction: row; /* Mantém número e unidade lado a lado */
    align-items: center; /* Centraliza verticalmente número e unidade */
    justify-content: center; /* Centraliza o conteúdo dentro da caixa de fundo */

    min-width: 60px; /* Largura mínima para o box (ajuste conforme necessário) */
    height: 40px; /* Altura fixa para consistência */
    padding: 5px 10px; /* Preenchimento interno do box */
    background-color: #2a2a2a; /* Fundo escuro */
    color: #fff; /* Texto branco para os números */
    border-radius: 5px; /* Cantos arredondados */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* Sombra sutil para profundidade */
}

/* Estilo para os rótulos de unidade (d, h, m, s) usando pseudo-elementos */
#adapta-countdown span::after {
    font-size: 0.5em; /* Tamanho menor para a unidade (ex: 'd') */
    color: #ff0000; /* Cor vermelha para as unidades */
    font-weight: normal; /* Unidades não precisam ser bold */
    margin-left: 5px; /* Espaço entre o número e a unidade */
    line-height: 1; /* Ajuda no alinhamento vertical */
}

/* Conteúdo específico para cada unidade */
#adapta-days::after { content: 'd'; }
#adapta-hours::after { content: 'h'; }
#adapta-minutes::after { content: 'm'; }
#adapta-seconds::after { content: 's'; }

/* Estilos para o texto ao redor do cronômetro */
.vagas-timer {
    text-align: center; /* Garante que o texto ao redor esteja centralizado */
    margin-top: 20px;
    margin-bottom: 20px;
}
.vagas-timer p {
    font-size: 1.1rem;
    color: #fff;
    margin: 5px 0;
}
.vagas-timer span { /* Para "Restam Apenas:" */
    color: #fff; /* Garante que este texto seja branco */
}