:root {
    --popup-bottom: 130px;
    --popup-right: 20px;
}
/* Estilo padrão para desktop */
.popup {
    display: none; /* Escondido por padrão */
    position: fixed;
    bottom: var(--popup-bottom); /* Usando variáveis CSS para controle de posição */
    right: var(--popup-right); /* Usando variáveis CSS para controle de posição */
    width: 300px;
    height: auto;
    background-color: rgba(255, 190, 0, 1);
    border-radius: 5%; /* Fundo circular no desktop */
    color: white;
    text-align: center;
    padding: 10px;
    box-shadow: 0 0 10px rgba(255, 190, 0, 0.5);
    z-index: 1000;
    transition: bottom 0.3s ease, right 0.3s ease; /* Animação suave ao mudar a posição */
}

/* Ação fechar */
.close {
    position: absolute;
    top: -20px;
    right: 10px;
    color: black;
    font-size: 0.8em;
    cursor: pointer;
    background-color: transparent; /* Garante que o fundo seja transparente */
    border: none; /* Remove qualquer borda */
    padding: 5px 10px; /* Ajusta o padding para acomodar o texto */
    border-radius: 5px; /* Opcional: bordas arredondadas */
}

.close:hover {
    background-color: rgba(255, 190, 0, 0.2); /* Efeito de hover para o botão fechar */
}

.popup-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.popup h2 {
    margin: 0;
    font-size: 2em;
    color: #fff;

}

.popup h3 {
    margin: 12px 0;
    font-size: 1.5em;
}
.popup h4 {
    margin: 12px 0;
    font-size: 1.6em;
}



/* Estilos para dispositivos móveis (celulares e tablets) */
@media (max-width: 768px) {
    .popup {
        width: 250px; /* Aumenta a largura para criar o fundo retangular */
        height: auto; /* Permite que a altura se ajuste ao conteúdo */
        border-radius: 15px; /* Bordas arredondadas para o fundo retangular */
        padding: 15px; /* Ajusta o padding */
    }
}

/* Adicione este CSS ao seu arquivo de estilos ou dentro de uma tag <style> em seu HTML */

/* Estilos básicos para o contador */
.countdown {
    font-size: 1.4em; /* Aumenta o tamanho da fonte */
    font-weight: bold; /* Deixa o texto em negrito */
    color: #FF4500; /* Cor de destaque */
    text-shadow: 0 0 5px rgba(255, 77, 0, 0.5); /* Sombra para dar profundidade */
    /* Adiciona uma borda opcional */
    border: 1px solid #FF4500;
    padding: 5px 10px; /* Espaçamento interno */
    background-color: rgba(255, 255, 255, 0.8); /* Cor de fundo com transparência */
    border-radius: 5px; /* Cantos arredondados */
}

.codcupom {
    font-size: 1.4em; /* Aumenta o tamanho da fonte */
    font-weight: bold; /* Deixa o texto em negrito */
    color: #000; /* Cor de destaque */
    text-shadow: 0 0 5px rgba(255, 77, 0, 0.5); /* Sombra para dar profundidade */
    /* Adiciona uma borda opcional */
    border: 1px solid #FF4500;
    padding: 5px 10px; /* Espaçamento interno */
    background-color: rgba(255, 255, 255, 0.8); /* Cor de fundo com transparência */
    border-radius: 5px; /* Cantos arredondados */
}



/* Animação opcional para piscar o contador */
@keyframes blink {
    0%   { opacity: 1; }
    50%  { opacity: 0.5; }
    100% { opacity: 1; }
}

/* Aplica a animação */
.countdown {
    animation: blink 1s infinite ease-in-out; /* Ajuste o tempo conforme necessário */
}