/* Autocomplete Styles - Based on ITF Group Design */
.position-relative {
    position: relative !important;
}

.autocomplete-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--itf-medium-gray);
    border-radius: 0 0 12px 12px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 9999 !important; /* Ensure visibility above all elements */
    box-shadow: 0 8px 16px rgba(36, 55, 71, 0.15); /* ITF slate-colored shadow */
    margin-top: -1px;
    display: none; /* Initially hidden */
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.autocomplete-suggestions.show {
    display: block !important; /* Force display when show class is added */
    opacity: 1;
    transform: translateY(0);
}

.autocomplete-suggestion {
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-bottom: 1px solid var(--itf-light-gray);
    font-weight: normal;
    color: var(--itf-slate);
}

.autocomplete-suggestion:last-child {
    border-bottom: none;
    border-radius: 0 0 12px 12px;
}

.autocomplete-suggestion:hover,
.autocomplete-suggestion.active {
    background-color: rgba(241, 95, 34, 0.05); /* Light ITF orange background */
    color: var(--itf-orange);
    padding-left: 20px; /* Indent on hover/active */
}

.autocomplete-suggestion.active {
    font-weight: 500;
}

/* Style the input field when dropdown is open */
#nominee:focus {
    box-shadow: 0 0 0 3px rgba(241, 95, 34, 0.2); /* ITF orange glow */
    border-color: var(--itf-orange);
}

/* Force display when not empty */
#autocomplete-suggestions:not(:empty) {
    display: block !important;
}

/* Fix for dropdown visibility */
#nominee {
    z-index: 900;
}