/* Style the autocomplete suggestions dropdown */
.ui-autocomplete {
    max-height: 250px; /* Maximum height for dropdown */
    overflow-y: auto; /* Enable vertical scrolling */
    overflow-x: hidden; /* Hide horizontal scroll */
    background-color: #ffffff; /* Pure white background */
    border: none; /* Remove border */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
    z-index: 1000; /* Ensure it appears above other elements */
    padding: 10px 0; /* Padding inside the container */
    width: auto; /* Auto width to fit content */
    min-width: 200px; /* Minimum width for consistency */
    max-width: 100%; /* Maximum width to avoid overflow */
    white-space: nowrap; /* Prevent text from wrapping */
    -ms-overflow-style: none; /* Hide scrollbar in Internet Explorer */
    scrollbar-width: none; /* Hide scrollbar in Firefox */
    pointer-events: all; /* Enable pointer events to prevent scrolling jumps */
    position: relative; /* Allow positioning of pseudo-elements */
}

/* Hide scrollbar for Chrome, Safari, and Opera */
.ui-autocomplete::-webkit-scrollbar {
    display: none;
}

/* Add top and bottom buffer zones to prevent unwanted scrolling */
.ui-autocomplete::before, .ui-autocomplete::after {
    content: "";
    display: block;
    height: 10px; /* Adjust height as needed */
    position: absolute;
    left: 0;
    right: 0;
    background: transparent;
    pointer-events: none; /* Prevent mouse interactions */
}

.ui-autocomplete::before {
    top: 0; /* Buffer zone at the top */
}

.ui-autocomplete::after {
    bottom: 0; /* Buffer zone at the bottom */
}

/* Style each suggestion item */
.ui-menu-item-wrapper {
    padding: 8px 16px; /* Padding for each item */
    font-size: 16px; /* Slightly larger font size */
    color: #333; /* Darker text color */
    cursor: pointer; /* Pointer cursor on hover */
    transition: background-color 0.2s ease, color 0.2s ease; /* Smooth transition */
    border-radius: 8px; /* Rounded corners for each item */
    white-space: normal; /* Allow text to wrap within the box */
    display: block; /* Ensure each item displays in block format */
    overflow: hidden; /* Hide any overflow */
    text-overflow: ellipsis; /* Add ellipsis for overflowing text */
}

/* Hover effect for suggestion items */
.ui-menu-item-wrapper:hover {
    background-color: #f5f7fa; /* Light grey background on hover */
    color: #0073aa; /* Primary color text on hover */
}

/* Highlighting the selected item */
.ui-state-focus {
    background-color: #e1f5fe; /* Light blue background for active state */
    color: #0073aa; /* Blue text for active state */
    font-weight: bold; /* Bold text for active state */
}

/* Extra styling for input field (optional for cleaner design) */
.ginput_container input[type="text"].autocomplete-resort {
    border: 2px solid #e0e0e0; /* Light grey border */
    padding: 10px 16px; /* Padding inside the input */
    border-radius: 50px; /* Rounded input field */
    font-size: 16px; /* Font size */
    width: 100%; /* Full width */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    transition: border-color 0.2s ease; /* Smooth border transition */
}

/* Change border color on focus */
.ginput_container input[type="text"].autocomplete-resort:focus {
    border-color: #0073aa; /* Blue border on focus */
    outline: none; /* Remove default outline */
}

/* Style for matching text within the suggestion */
.ui-menu-item-wrapper strong {
    color: #007bff; /* Blue color for matching text */
    font-weight: bold; /* Bold font for emphasis */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .ui-autocomplete {
        width: 90%; /* Adjust width for smaller screens */
        max-width: 90%; /* Make sure it fits within the viewport */
        left: 5%; /* Center align on mobile */
        right: auto; /* Reset right positioning */
    }
}