/* Basic styling for the notification message */
.dw-notification {
    display: none;
    position: absolute;
    top: -30px; /* Adjusted to ensure visibility above button */
    right: 50%;
    transform: translateX(50%);
    background: #4CAF50; /* Green background for 'Added' */
    color: white;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 1000; /* Increased z-index to ensure visibility */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

/* Styling for 'Removed' notification */
.dw-notification.removed {
    background: #f44336; /* Red background for 'Removed' */
}

/* Ensure the notification is relative to the product container */
.card {
    position: relative;
}

/* Tooltip styling for hover effect */
.circle-icon[data-tooltip] {
    position: relative;
}

.circle-icon[data-tooltip]:hover:after {
    content: attr(data-tooltip);
    position: absolute;
    top: -30px; /* Position above the button */
    right: 50%;
    transform: translateX(50%);
    background: #333;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    white-space: nowrap;
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}