/* Basic styling for the suggestions container */
#asbi-suggestions-container {
    position: absolute; /* Ensure it appears below the search input */
    background: #fff; /* White background for clarity */
    border: 1px solid #ddd; /* Light border */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    max-height: 300px; /* Limit height to avoid overflow */
    overflow-y: auto; /* Enable scrolling if content overflows */
    z-index: 9999; /* Ensure it appears above other elements */
    width: 100%; /* Match the width of the search input */
}

/* Styling for individual suggestion items */
.suggestion-item {
    display: flex; /* Align image and text side-by-side */
    align-items: center; /* Vertically center content */
    padding: 10px; /* Add some padding */
    border-bottom: 1px solid #ddd; /* Separate items with a border */
    text-decoration: none; /* Remove default link styling */
    color: #333; /* Dark text color */
}

.suggestion-item:last-child {
    border-bottom: none; /* Remove border from the last item */
}

.suggestion-item img {
    max-width: 50px; /* Limit image size */
    max-height: 50px; /* Limit image height */
    margin-right: 10px; /* Space between image and text */
    border-radius: 4px; /* Rounded corners for images */
}

.suggestion-item span {
    font-size: 14px; /* Font size for titles */
    overflow: hidden; /* Prevent text overflow */
    text-overflow: ellipsis; /* Add ellipsis if text overflows */
    white-space: nowrap; /* Prevent text wrapping */
}

.suggestion-item a {
    text-decoration: none; /* Remove underline from links */
    color: inherit; /* Inherit color from parent */
    display: flex; /* Ensure link fills the suggestion item */
    width: 100%; /* Ensure link takes full width */
}

/* Add a hover effect for better user interaction */
.suggestion-item:hover {
    background-color: #f0f0f0; /* Light grey background on hover */
}