/* /static/css/autocomplete.css
 * Shared autocomplete styling for Health and Hobby/Lifestyle interest inputs.
 * Loaded by: free_trial.html, signup.html, update.html, proxy1.html, proxy2.html, proxy3.html
 */

.autocomplete-wrapper { position: relative; width: 100%; }
.autocomplete-wrapper input { width: 100%; }
.ac-dropdown {
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border: 1px solid #cbd5e0;
    border-top: none; border-radius: 0 0 6px 6px;
    max-height: 220px; overflow-y: auto;
    z-index: 9999; display: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.ac-dropdown .ac-item {
    padding: 8px 12px; cursor: pointer;
    font-size: 0.875rem; color: #2d3748;
    border-bottom: 1px solid #f0f0f0;
}
.ac-dropdown .ac-item:hover,
.ac-dropdown .ac-item.ac-active { background: #ebf8ff; color: #1a5276; }
.ac-dropdown .ac-item:last-child { border-bottom: none; }

/* NEW 2026-05-09: chevron + padding for click-to-open inputs.
 * Scoped to health/hobby inputs so travel-location and other
 * .ac-input usages are unaffected. Add more selectors here if
 * those should also show the chevron.
 */
.health-ac-input,
.hobby-ac-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23718096' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 28px;
}