/*
 * Suburb Search — the gap between the plugin's assumptions and this design.
 *
 * The plugin appends its jQuery UI autocomplete inside the form (script.js:41), and that form sits
 * inside .page-banner, which is overflow: hidden (style.css:943). Left alone the results list is
 * clipped to the banner. The clip is not load-bearing: .bgimg is inset:0 with object-fit: cover
 * (utiliti.css:147), so the background is already exactly the size of the banner and cannot spill.
 * Scoped to a modifier class rather than .page-banner so no other banner is affected.
 *
 * Everything below is scoped under .page-banner--search so it outranks the plugin's own
 * .suburb-search-form rules on specificity. Relying on load order would mean relying on a plugin
 * and a theme stylesheet landing in a particular sequence, which nothing here guarantees.
 */

.page-banner--search {
    overflow: visible;
}

/*
 * WordPress ships jQuery UI without its theme stylesheet, so .ui-front carries no z-index and the
 * list renders behind whatever follows the banner. The plugin's CSS sets position and colours but
 * no stacking. Same fix as the product search in search.css.
 */
.page-banner--search .suburb-search-form .ui-autocomplete {
    z-index: 100;
    width: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--theme);
    border-radius: 0 0 4px 4px;
    background: var(--white);
}

.page-banner--search .suburb-search-form .ui-autocomplete li {
    padding: 10px 20px;
    border-bottom: 0;
    font-size: 16px;
    color: var(--text-color);
    cursor: pointer;
}

.page-banner--search .suburb-search-form .ui-autocomplete li:hover,
.page-banner--search .suburb-search-form .ui-autocomplete li.ui-state-focus {
    background: var(--theme);
    color: var(--white);
}

/*
 * Loading state. The script puts `search-loading` on the form and disables the button while a
 * lookup is in flight (script.js:52-59), so the chevron swaps for a spinner — the same swap the
 * header search does in search.css:8-18.
 */
.page-banner--search .suburb-search__btn .spinner-icon {
    display: none;
}

.page-banner--search .search-loading .suburb-search__btn .search-icon {
    display: none;
}

.page-banner--search .search-loading .suburb-search__btn .spinner-icon {
    display: inline-block;
}

.page-banner--search .suburb-search-form.search-loading .suburb-search__btn {
    cursor: default;
}