/* Favorites List Styles */

.favorite-item:hover .edit-button {
  opacity: 1 !important;
}

.favorite-item .edit-button {
  transition: opacity 0.2s ease;
}

.favorite-item .edit-button:hover {
  color: rgba(255, 255, 255, 0.9) !important;
  background-color: rgba(255, 255, 255, 0.1);
}

/* Delete Icon Styles */
.favorite-item .delete-icon {
  opacity: 0.7;
  transition: opacity 0.2s ease;
  color: white;
}

.favorite-item .delete-icon:hover {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
}

/* Editable Favorite Title Styles */
.editable-favorite-title {
  position: relative;
}

.editable-favorite-title:hover .edit-icon {
  opacity: 1;
}

.edit-icon {
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Favorite Button Styles */
.favorite-button-filled {
  color: var(--mantine-color-yellow-6) !important;
  fill: currentColor;
}

.favorite-button-outline {
  color: var(--mantine-color-gray-6);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

/* Popover Styles for Favorites */
.favorite-popover .mantine-Popover-dropdown {
  background: white;
  border: 1px solid var(--mantine-color-gray-3);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Navigation Favorites Section */
.favorites-navigation-section {
  margin-top: 8px;
  padding-top: 8px;
}

.favorites-navigation-section .favorites-header {
  color: white;
  font-weight: 500;
}

.favorites-navigation-section .favorite-item {
  color: white;
  text-decoration: none;
}

.favorites-navigation-section .favorite-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  text-decoration: none;
}

.favorites-navigation-section .favorite-item.active {
  background-color: var(--mantine-color-blue-light);
  color: var(--mantine-color-blue-7);
  border-color: var(--mantine-color-blue-3);
}

/* Responsive Favorites */
@media (max-width: 768px) {
  .favorite-item .edit-button {
    opacity: 1; /* Always show on mobile */
  }
  
  .favorites-navigation-section {
    padding: 4px 0;
  }
  
  .favorite-item {
    padding: 8px 12px;
  }
}

/* Loading States */
.favorite-button-loading {
  opacity: 0.6;
  pointer-events: none;
}

.favorites-list-loading {
  opacity: 0.6;
}

.favorites-list-loading .favorite-item {
  pointer-events: none;
}

/* Animation for adding/removing favorites */
@keyframes favoriteAdded {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.favorite-button-added {
  animation: favoriteAdded 0.3s ease-in-out;
}

@keyframes favoriteRemoved {
  0% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}

.favorite-item-removed {
  animation: favoriteRemoved 0.2s ease-in-out forwards;
}

/* Favorite Management Modal */
.favorites-management-modal .favorite-item {
  background: white;
  color: var(--mantine-color-gray-8);
  border: 1px solid var(--mantine-color-gray-3);
  margin-bottom: 8px;
  padding: 12px;
  border-radius: 8px;
}

.favorites-management-modal .favorite-item:hover {
  background: var(--mantine-color-gray-0);
}

.favorites-management-modal .favorite-item.selected {
  background: var(--mantine-color-blue-0);
  border-color: var(--mantine-color-blue-3);
}

/* Accessibility */
.favorite-button:focus-visible {
  outline: 2px solid var(--mantine-color-blue-5);
  outline-offset: 2px;
}

.favorite-item:focus-visible {
  outline: 2px solid var(--mantine-color-blue-5);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .favorites-navigation-section .favorite-item {
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
  
  .favorite-button-outline {
    stroke-width: 2;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .favorite-button,
  .favorite-item,
  .edit-button {
    transition: none;
  }
  
  .favorite-button-added,
  .favorite-item-removed {
    animation: none;
  }
}