.countdown-timer {
  position: relative;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, opacity 0.3s ease;
  z-index: 10;
}

.countdown-timer.hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
}

.timer-circle {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.timer-circle-bg {
  fill: white;
  stroke: none;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
}

.timer-circle-progress {
  fill: none;
  stroke: #1a3baf;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 282.743; /* 2π * 45 */
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1s linear, stroke 0.3s ease;
}

.timer-text {
  position: relative;
  font-size: 32px;
  font-weight: 700;
  color: #000;
  z-index: 1;
  transition: font-size 0.2s ease, opacity 0.15s ease, transform 0.15s ease;
}

/* Animação sutil ao mudar o número */
.countdown-timer:not(.warning):not(.danger) .timer-text {
  animation: numberChange 0.3s ease;
}

@keyframes numberChange {
  0% {
    opacity: 0.8;
    transform: scale(0.98);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Estado de aviso (10 segundos ou menos) */
.countdown-timer.warning {
  animation: warningPulse 1s ease-in-out infinite;
}

.countdown-timer.warning .timer-circle-bg {
  fill: #fff3cd;
}

.countdown-timer.warning .timer-circle-progress {
  stroke: #ff9800;
  stroke-width: 3;
}

.countdown-timer.warning .timer-text {
  color: #ff9800;
  font-size: 34px;
}

@keyframes warningPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

/* Estado de perigo (5 segundos ou menos) */
.countdown-timer.danger {
  animation: dangerShake 0.5s ease-in-out infinite;
}

.countdown-timer.danger .timer-circle-bg {
  fill: #ffebee;
}

.countdown-timer.danger .timer-circle-progress {
  stroke: #f44336;
  stroke-width: 4;
  animation: dangerPulse 0.5s ease-in-out infinite;
}

.countdown-timer.danger .timer-text {
  color: #f44336;
  font-size: 36px;
  font-weight: 900;
  animation: dangerTextPulse 0.5s ease-in-out infinite;
}

@keyframes dangerShake {
  0%, 100% {
    transform: translateX(0) scale(1);
  }
  25% {
    transform: translateX(-2px) scale(1.08);
  }
  75% {
    transform: translateX(2px) scale(1.08);
  }
}

@keyframes dangerPulse {
  0%, 100% {
    stroke-width: 4;
    opacity: 1;
  }
  50% {
    stroke-width: 5;
    opacity: 0.8;
  }
}

@keyframes dangerTextPulse {
  0%, 100% {
    transform: scale(1);
    text-shadow: 0 0 0 rgba(244, 67, 54, 0);
  }
  50% {
    transform: scale(1.1);
    text-shadow: 0 0 10px rgba(244, 67, 54, 0.5);
  }
}

/* Responsivo */
@media (max-width: 768px) {
  .countdown-timer {
    width: 70px;
    height: 70px;
  }

  .timer-text {
    font-size: 28px;
  }

  .countdown-timer.warning .timer-text {
    font-size: 30px;
  }

  .countdown-timer.danger .timer-text {
    font-size: 32px;
  }
}