/* --- Estilos do Contador com prefixo Cro_ --- */

.Cro_countdown-container {
    text-align: center;
    color: #cb0606; /* Cor do texto principal */
    padding: 2vw; /* Padding responsivo */
    background-color: transparent;
    border-radius: 10px;
    box-shadow: none;
    max-width: 90vw; /* Limita a largura máxima no PC também, mas permite encolher */
}

.Cro_countdown-all-items-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2vw; /* Espaço entre os itens responsivo */
    flex-wrap: wrap; /* Permite que os itens quebrem para a próxima linha no mobile */
}

/* Em PC, o círculo e o label ficam lado a lado */
.Cro_countdown-item-inline {
    display: flex;
    flex-direction: row; /* Círculo e label em linha no PC */
    align-items: center;
    gap: 0.5vw; /* Espaço entre o círculo e o label responsivo */
    margin: 1vw 1vw; /* Espaçamento horizontal e vertical responsivo */
    min-width: 150px; /* Largura mínima para cada item (ajustável) */
    flex-basis: auto;
}

/* Container do círculo e número */
.Cro_circle-container {
    position: relative;
    width: 6vw; /* Tamanho do círculo responsivo (6% da largura do viewport) */
    height: 6vw;
    min-width: 60px; /* Tamanho mínimo para o círculo */
    min-height: 60px; /* Tamanho mínimo para o círculo */
    max-width: 80px; /* Tamanho máximo para o círculo em telas maiores */
    max-height: 80px; /* Tamanho máximo para o círculo em telas maiores */
    display: flex;
    justify-content: center;
    align-items: center;
}

.Cro_countdown-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.Cro_circle-bg {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 4;
}

.Cro_circle-fill {
    fill: none;
    stroke: #cb0606;
    stroke-width: 5;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.5s ease-out;
    stroke-dasharray: 282.74; /* Permanece o mesmo valor do SVG */
    stroke-dashoffset: 282.74;
}


.Cro_display-number {
    position: absolute;
    font-family: 'Arial', sans-serif;
    font-size: 2.5vw; /* Tamanho da fonte responsivo */
    min-font-size: 1.8em; /* Tamanho mínimo da fonte */
    max-font-size: 2.5em; /* Tamanho máximo da fonte */
    font-weight: bold;
    color: #cb0606;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.Cro_countdown-label {
    margin-top: 0;
    font-size: 1.2vw; /* Tamanho da fonte responsivo */
    min-font-size: 0.9em; /* Tamanho mínimo da fonte */
    max-font-size: 1.2em; /* Tamanho máximo da fonte */
    color: #cb0606;
    font-weight: bold;
    text-shadow: none;
    white-space: nowrap; /* Evita que o label quebre a linha */
}

#Cro_noEventMessage {
    font-size: 1.8vw; /* Tamanho da fonte responsivo */
    min-font-size: 1em; /* Tamanho mínimo da fonte */
    color: #cb0606;
    margin-top: 20px;
    text-shadow: none;
}


/* --- Media Queries para Mobile --- */

@media (max-width: 768px) { /* Para telas menores que 768px (tablets e smartphones) */
    .Cro_countdown-container {
        padding: 4vw; /* Ajusta o padding no mobile */
    }

    .Cro_countdown-all-items-container {
        flex-direction: row; /* Mantém os itens em linha horizontal */
        justify-content: center; /* Centraliza os itens */
        gap: 3vw; /* Espaçamento entre os círculos */
        flex-wrap: nowrap; /* Impede a quebra de linha dos itens (para mantê-los em uma linha) */
        overflow-x: auto; /* Permite rolagem horizontal se necessário */
        -webkit-overflow-scrolling: touch; /* Melhor rolagem em iOS */
        padding-bottom: 5px; /* Espaço para a barra de rolagem */
    }

    .Cro_countdown-item-inline {
        flex-direction: column; /* Temporariamente para esconder o label */
        align-items: center;
        justify-content: center;
        margin: 0; /* Remove margens extras */
        min-width: 60px; /* Largura mínima para cada círculo */
        flex-shrink: 0; /* Impede que os itens encolham demais */
    }

    .Cro_countdown-label {
        display: none; /* ESCONDE O TEXTO DO LABEL NO MOBILE */
    }

    .Cro_circle-container {
        width: 15vw; /* Aumenta o tamanho do círculo no mobile */
        height: 15vw;
        min-width: 60px; /* Min/Max ajustados para controle */
        min-height: 60px;
        max-width: 80px;
        max-height: 80px;
    }

    .Cro_display-number {
        font-size: 6vw; /* Ajusta o tamanho da fonte para o círculo maior */
        min-font-size: 2em;
        max-font-size: 3em;
    }

    #Cro_noEventMessage {
        font-size: 3vw;
        min-font-size: 1em;
    }
}

/* Opcional: Media Query para telas ainda menores (smartphones pequenos) */
@media (max-width: 480px) {
    .Cro_countdown-all-items-container {
        gap: 2vw; /* Ajusta o gap para telas muito pequenas */
    }

    .Cro_circle-container {
        width: 18vw; /* Aumenta um pouco mais o círculo em telas muito pequenas */
        height: 18vw;
        min-width: 50px; /* Min/Max para garantir que não fiquem minúsculos */
        min-height: 50px;
        max-width: 70px;
        max-height: 70px;
    }

    .Cro_display-number {
        font-size: 8vw; /* Fonte maior para o círculo em telas muito pequenas */
        min-font-size: 2.2em;
    }
}