/* Notification Animation: Slide & Fade */
.update-count-wrapper {
  position: relative;
  display: inline-block;
  vertical-align: top; /* Aligns wrapper with text */
  height: 18px; /* Match height of the badge */
  min-width: 18px; /* Match min-width of the badge */
  margin-left: 4px; /* Add some spacing from the text */
  overflow: visible; /* Allow badge to be fully visible */
  z-index: 1;
}

.update-count {
  display: inline-block;
  box-sizing: border-box;
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  background-color: #B3261E; /* Material Design 3 Error Red */
  color: white;
  border-radius: 9px; /* Half of height for pill shape */
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  text-align: center;
  vertical-align: top; /* Ensures alignment with text */
  font-family: system-ui, -apple-system, sans-serif; /* Ensure consistent font */
  font-feature-settings: "kern" 1, "liga" 1; /* Enable kerning and ligatures consistently */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: 0; /* Prevent letter-spacing changes */
  width: auto; /* Allow width to adjust naturally */
}

.update-count.slide-out {
  animation: slide-out-down 0.3s forwards cubic-bezier(0.4, 0, 0.2, 1);
}

.update-count.slide-in {
  animation: slide-in-down 0.3s forwards cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes slide-out-down {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(100%); opacity: 0; }
}

@keyframes slide-in-down {
  0% { transform: translateY(-100%); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}