/* countdown.css
   Estilo do widget "Countdown" (ver js/media/countdown-widget.js) — usado
   tanto no preview do editor como no export publicado (export-html.js tem
   uma cópia gémea deste bloco, sem pointer-events:none, ver EXPORT_CSS).

   Custom properties (--cd-*) definidas inline pelo JS a partir de
   media.countdown (ver countdown-widget.js: buildBaseElement) — o CSS aqui
   só lê essas variáveis, nunca fixa cores/tamanhos por si.
*/
.countdown-widget {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--cd-gap, 10px);
    /* Sem fonte escolhida ("herdar do template"), cair em Arial em vez do
       serif por defeito do browser (ex. Times New Roman). */
    font-family: var(--cd-font-family, Arial, Helvetica, sans-serif);
    pointer-events: none;
    /* SEM width:100% (divergência de uma versão anterior): o widget deve
       ter tamanho NATURAL (o dos próprios números/labels), tal como uma
       imagem — nunca depender de "100% do pai" para existir. O pai
       (.media-item, dentro de .block-content-scale, ver preview-panel.js)
       não tem necessariamente uma largura própria definida — exigir 100%
       dele cria uma referência circular (pai mede o filho, filho pede 100%
       do pai) que os browsers resolvem colapsando tudo para 0×0, e o
       countdown desaparecia do preview em vez de aparecer ao seu tamanho
       natural. max-width:100% continua a fazer sentido (nunca ultrapassa o
       espaço do bloco), só o width:100% forçado é que estava errado. */
    max-width: 100%;
    box-sizing: border-box;
}

.countdown-widget.countdown-boxes {
    align-items: stretch;
}

.countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
}

.countdown-boxes .countdown-unit {
    background: var(--cd-box-bg, transparent);
    border-radius: var(--cd-box-radius, 0);
    padding: var(--cd-box-padding, 0);
}

.countdown-number {
    font-size: var(--cd-number-size, 32px);
    font-weight: var(--cd-font-weight, 700);
    color: var(--cd-number-color, #ffffff);
    line-height: 1;
    white-space: nowrap;
}

.countdown-label {
    font-size: var(--cd-label-size, 12px);
    color: var(--cd-label-color, #ffffff);
    line-height: 1.4;
    white-space: nowrap;
    margin-top: 2px;
}

.countdown-sep {
    font-size: var(--cd-number-size, 32px);
    font-weight: var(--cd-font-weight, 700);
    color: var(--cd-number-color, #ffffff);
    line-height: 1;
    align-self: flex-start;
}

/* ::after invisível do mesmo tamanho do label, para o separador (que não
   tem label por baixo) ficar alinhado ao NÚMERO dos vizinhos, não ao topo
   do conjunto — sem isto, o separador "flutuava" mais alto que os números
   sempre que os labels estavam visíveis (label ocupa espaço vertical que o
   separador sozinho não tinha). */
.countdown-sep::after {
    content: '';
    display: block;
    font-size: var(--cd-label-size, 12px);
    visibility: hidden;
    height: 1.4em;
}

.countdown-ended-text {
    font-size: var(--cd-number-size, 32px);
    font-weight: var(--cd-font-weight, 700);
    color: var(--cd-number-color, #ffffff);
    font-family: var(--cd-font-family, Arial, Helvetica, sans-serif);
}