/* Custom styles for the favorites extension */

/* Minimal styling for navbar heart icon to ensure it inherits colors */
.navbar .bi-heart-fill {
  /* Color is inherited automatically */
  font-size: 1.1rem; /* Slightly larger icon */
  vertical-align: -2px; /* Align with text better */
}

/* Fix alignment issues with the navbar item */
.navbar .nav-link {
  display: flex;
  align-items: center;
}

/* Add tooltip to the heart icon in navbar */
.navbar-nav-scroll .nav-link[aria-label="My Favorites"] {
  position: relative;
}

.navbar-nav-scroll .nav-link[aria-label="My Favorites"]:hover::after {
  content: "My Favorites";
  position: absolute;
  bottom: -25px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #000;
  color: #fff;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
  white-space: nowrap;
  z-index: 1000;
}