/* Style for the suggestion dropdown container */
.suggestions-box {
    position: absolute; /* Position it directly below the input */
    z-index: 1000; /* Ensure it’s on top of other elements */
    width: 100%; /* Full width of the parent container */
    max-height: 200px; /* Limit the height of the dropdown */
    overflow-y: auto; /* Allow scrolling if there are many suggestions */
    background-color: #fff; /* White background for suggestions */
    border: 1px solid #ccc; /* Light gray border */
    border-radius: 4px; /* Rounded corners */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow for floating effect */
    padding: 0; /* Remove padding to make it look like a dropdown */
    display: none; /* Initially hidden */
    transition: all 0.3s ease-in-out; /* Smooth transition for box appearance */
    top: 100%;
}

/* Style for the suggestion items that look like dropdown options */
.suggestion-item {
    padding: 10px 15px; /* Padding to make the items clickable and large enough */
    cursor: pointer; /* Pointer cursor to indicate interactivity */
    font-size: 14px; /* Text size */
    color: #333; /* Dark text color */
    background-color: #fff; /* White background for each option */
    transition: background-color 0.2s ease; /* Smooth background color transition */
}

/* Highlight suggestion items on hover (like dropdown option hover) */
.suggestion-item:hover {
    background-color: #f1f1f1; /* Light gray background on hover */
    color: #007BFF; /* Blue text color on hover */
}

/* Style for the selected item (mimicking a selected option in a dropdown) */
.suggestion-item.selected {
    background-color: #007BFF; /* Blue background for the selected item */
    color: white; /* White text color */
}