/* Style for the input field */
.typeahead {
    width: 468px; /* Ensure the input field takes up full width of its container */
    padding: 8px 12px; /* Add some padding for better text alignment */
    border-radius: 4px; /* Rounded corners for a more modern look */
    border: 1px solid #ccc; /* Light border to separate from the background */
    font-size: 14px; /* Set a readable font size */
}

/* Style for the dropdown list */
.tt-menu {
    width: 100%; /* Ensure the dropdown matches the width of the input */
    max-height: 200px; /* Limit the height for scrolling */
    overflow-y: auto; /* Add scroll for large lists */
    background-color: #fff; /* White background for the dropdown */
    border-radius: 4px; /* Rounded corners for the dropdown */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow to lift the dropdown */
    margin-top: 5px; /* Space between the input field and the dropdown */
    z-index: 1000; /* Ensure the dropdown appears above other elements */
}

/* Style for each item in the dropdown */
.tt-suggestion {
    padding: 8px 12px; /* Padding around each suggestion for better touch targets */
    font-size: 14px; /* Ensure the font size is readable */
    cursor: pointer; /* Change cursor to pointer on hover */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for hover effects */
}

/* Hover effect: Change background color and text color when hovering over an item */
.tt-suggestion:hover {
    background-color: #007bff; /* Blue background when hovered */
    color: #fff; /* White text when hovered */
}

/* Highlight suggestion when selected (active state) */
.tt-suggestion.tt-cursor {
    background-color: #0056b3; /* Darker blue when selected */
    color: #fff; /* White text when selected */
}

/* Style for empty results message */
.tt-empty {
    padding: 8px 12px;
    color: #999; /* Grey color for no results message */
    font-style: italic;
}

/* Style for the typeahead input wrapper */
#paket {
    position: relative; /* Required for positioning dropdown */
}

/* Optional: Add a border to indicate active focus */
.typeahead:focus {
    border-color: #007bff; /* Blue border on focus for a clean look */
    outline: none; /* Remove default outline */
}