/* Custom autocomplete dropdown container */
.ac-dropdown {
    background-color: #FFF;
    z-index: 1000;
    border-radius: var(--bs-border-radius-2xl) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    overflow: hidden;
}

/* Styles for each item in the autocomplete list */
.ac-item {
    padding: 10px;
    font-size: 18px;
    color: var(--bs-secondary);
    font-family: 'Montserrat', sans-serif;
    position: relative;
    margin-bottom: 3px;
    cursor: pointer;
}

/* Styles for each item when hovered */
.ac-item:hover,
.ac-item.ac-item-selected {
    background-color: var(--kt-gray-200) !important;
    border: 3px solid #fff;
    border-radius: var(--bs-border-radius-2xl) !important;
    position: relative;
}

.ac-item.ac-item-selected {
    background-color: var(--kt-gray-300) !important;
}

/* Add white space above the first item when hovered */
.ac-dropdown .ac-item:first-child:hover,
.ac-dropdown .ac-item:first-child.ac-item-selected {
    margin-top: 2px;
}

/* Add an icon to the right of each item */
.ac-item::after {
    content: '\f105';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

/* Styles for the query part inside each item */
.ac-item .ac-item-query {
    display: block;
    font-size: 16px;
    font-weight: bold;
}

/* Styles for the subtext inside each item */
.ac-item .ac-item-subtext {
    display: block;
    font-size: 14px;
    color: #999;
}

/* Highlight effect for input groups on hover and focus */
.search-form .input-group:hover,
.search-form .input-group:focus-within {
    background-color: var(--kt-gray-300);
    border-radius: var(--bs-border-radius-2xl) !important;
    border: 3px solid #fff;
}

.search-form .input-group:hover .input-group-text,
.search-form .input-group:focus-within .input-group-text,
.search-form .input-group:hover .form-control,
.search-form .input-group:focus-within .form-control {
    background-color: var(--kt-gray-300);
    color: #6c757d;
    border-radius: var(--bs-border-radius-2xl) !important;
    border: 3px solid #fff;
}

/* Enlarge the icon on hover */
#swapLocations i:hover {
    transform: scale(1.2);
    transition: transform 0.2s ease-in-out;
}

/* Styles for the custom no results message */
.no-results-message {
    background-color: #FFF;
    color: var(--bs-secondary);
    border: 1px solid #FFF;
    border-radius: var(--bs-border-radius-2xl) !important;
    padding: 10px;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    text-align: left;
    margin-top: 5px;
    box-sizing: border-box;
    position: relative;
    z-index: 1000;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}