/*
 * Address autocomplete suggestion dropdown, shared by any form using
 * webroot/js/address-autocomplete.js (self-contained - no dependency on
 * another page's CSS variables, so it can be loaded on its own).
 */

.address-autocomplete-wrap {
    position: relative;
    display: block;
}

.address-suggestions {
    position: absolute;
    /*
     * Leaflet's internal map panes top out at z-index 700 (popups), but
     * its zoom/attribution controls (.leaflet-top/.leaflet-bottom) use
     * z-index 1000 - tying with a dropdown also at 1000 leaves the winner
     * down to DOM-order luck, which lost here. Clear both by a wide
     * margin so it's never ambiguous.
     */
    z-index: 2000;
    top: 100%;
    left: 0;
    right: 0;
    margin: 4px 0 0;
    padding: 6px;
    list-style: none;
    background: #ffffff;
    border: 1px solid #d9e4f0;
    border-radius: 10px;
    box-shadow: 0 12px 24px rgba(16, 37, 68, 0.12);
    max-height: 240px;
    overflow-y: auto;
}

.address-suggestions__option {
    padding: 9px 10px;
    border-radius: 7px;
    color: #102544;
    font-size: 0.85rem;
    cursor: pointer;
}

.address-suggestions__option:hover,
.address-suggestions__option--active {
    background: #eaf3ff;
}

input[data-address-autocomplete] {
    padding-right: 34px;
}

.address-suggestions-spinner {
    position: absolute;
    z-index: 2000;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    width: 15px;
    height: 15px;
    border: 2px solid #d9e4f0;
    border-top-color: #2f86df;
    border-radius: 50%;
    pointer-events: none;
    animation: address-suggestions-spin 0.6s linear infinite;
}

@keyframes address-suggestions-spin {
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}