/* Countdown Timer - Custom Styles */

/* Countdown Cards */
.countdown-card {
  transition: all 0.3s ease;
}

.countdown-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px -2px rgba(0, 0, 0, 0.15);
}

/* Countdown Value Animation */
#countdownYears,
#countdownMonths,
#countdownDays,
#countdownHours,
#countdownMinutes,
#countdownSeconds {
  transition: transform 0.2s ease;
  display: inline-block;
}

/* Finished Message Animation */
.animate-pulse {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* Button Hover Effects */
#startCountdown,
#stopCountdown {
  transition: all 0.3s ease;
}

#startCountdown:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px -2px rgba(20, 184, 166, 0.4);
}

#stopCountdown:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px -2px rgba(220, 38, 38, 0.4);
}

/* Input Focus States */
input[type="number"]:focus,
select:focus {
  outline: none;
  border-color: #14b8a6;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}

/* Responsive Improvements */
@media (max-width: 768px) {
  .countdown-card {
    padding: 1rem;
  }

  #countdownYears,
  #countdownMonths,
  #countdownDays,
  #countdownHours,
  #countdownMinutes,
  #countdownSeconds {
    font-size: 2rem;
  }
}

/* Container Animation */
#countdownContainer {
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}