/* Container for buttons */
.hour-buttons {
  display: flex;
  flex-wrap: wrap; /* allow wrapping on smaller screens */
  gap: 12px;       /* slightly larger gap for breathing room */
  justify-content: center;
  padding: 10px 0;
}

/* Individual buttons */
.hour-btn {
  border: 2px solid #333;       /* softer black for a modern look */
  border-radius: 50px;          /* fully rounded pill style */
  background-color: #fff;        /* white background for contrast */
  color: #333;                   /* text color */
  font-weight: 600;              /* slightly bolder */
  padding: 12px 25px;            /* more spacious padding */
  cursor: pointer;
  font-size: 15px;
  white-space: nowrap;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0,0,0,0.08); /* subtle shadow for depth */
}

/* Hover effect */
.hour-btn:hover {
  background-color: #333;  /* dark background on hover */
  color: #fff;             /* white text */
  transform: translateY(-2px); /* subtle lift effect */
  box-shadow: 0 6px 12px rgba(0,0,0,0.15); /* stronger shadow on hover */
}

/* Active/selected state (optional) */
.hour-btn.active {
  background-color: #333;
  color: #fff;
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}