/* style.css */

/* Base styles handled by Tailwind */

/* Styling for the countdown card */
.countdown-card {
  /* Base styles are set inline via JS className */
  /* Add transition for hover effects */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

/* Enhanced hover effect */
.countdown-card:hover {
  transform: translateY(-5px) scale(1.03); /* Lift and slightly enlarge */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); /* Deeper shadow */
}

/* Styling for the timer display area */
.timer-display {
  /* Centering the large number and label */
  display: flex;
  flex-direction: column; /* Stack number and label vertically */
  align-items: center;
  justify-content: center;
  line-height: 1; /* Adjust line height for large fonts */
  margin-top: 1rem; /* Add some space above the number */
  color: #1e3a8a; /* Darker blue color */
}

/* Styling for the large day number */
.timer-display .days-number {
  font-size: 5rem; /* Significantly larger font size for days */
  font-weight: 700; /* Bold */
  display: block; /* Ensure it takes its own line */
}

/* Styling for the "days left" label */
.timer-display .days-label {
  font-size: 1.5rem; /* Larger label */
  font-weight: 500; /* Medium weight */
  margin-top: 0.5rem; /* Space between number and label */
  color: #4b5563; /* Gray color for the label */
  display: block; /* Ensure it takes its own line */
}

/* Style for expired timers */
.expired-timer .timer-display {
  color: #ef4444; /* Red color for expired text */
  font-size: 2rem; /* Adjust size for expired message */
  font-weight: 600;
  line-height: 1.2;
}

/* Responsive adjustments for very large font */
@media (max-width: 640px) {
  .timer-display .days-number {
    font-size: 4rem; /* Slightly smaller on small screens */
  }
  .timer-display .days-label {
    font-size: 1.25rem;
  }
  .expired-timer .timer-display {
    font-size: 1.75rem;
  }
}