/* Picking the business (Pages/Job/Create.cshtml): the client list, the search and its suggestions, the pick and the map. */
#search_wrapper {
    display: block;
    width: 100%;
    margin-bottom: var(--gap);
}

#search {
    padding-left: 44px;
}

#search_wrapper {
    position: relative;
}

#search_wrapper::before {
    position: absolute;
    top: 12px;
    left: 12px;
    pointer-events: none;
    content: 'search';
    font-size: 24px;
}

/* Our own list of suggestions, under the search box. */
#suggestions {
    position: absolute;
    z-index: 10;
    left: 0;
    right: 0;
    margin: 4px 0 0;
    padding: 8px 0;
    list-style: none;
    background-color: var(--color_input);
    border-radius: 8px;
    max-height: 60vh;
    overflow-y: auto;
}

#suggestions li {
    padding: 8px 16px;
    cursor: pointer;
}

#suggestions li.active {
    background-color: var(--color_border);
}

#suggestions li.none {
    cursor: default;
    color: var(--color_base_secondary);
}

#suggestions .address {
    font-size: var(--font_labels);
    color: var(--color_base_secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#business_card {
    background-color: var(--color_input);
    border-radius: 8px;
    padding: 16px;
    margin-bottom: var(--gap);
}

#business_name {
    font-weight: var(--font_bold);
}

#business_address {
    font-size: var(--font_labels);
}

/* On phones the map sits under the inputs, so it needs a height of its own. */
#map {
    position: absolute;
    inset: 0;
}

.wizard_preview:has(#map) {
    min-height: 50vh;
}