/* /enhanced-job-search/css/ejs-enhancements.css */

/* Style for the search input within dropdowns */
.dropdown-search {
    padding: 0.5rem 0.75rem;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    margin: 0.5rem;
    width: calc(100% - 1rem);
}

.dropdown-search:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Make the search bar container sticky */
.dropdown-search-container {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 10; /* Ensures it stays on top of other dropdown items */
}

/* --- Smoother Dropdown Animations --- */

/* Hide the dropdown menu by default */
.dropdown-menu {
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0.2s;
    pointer-events: none; /* Prevent interaction when hidden */
}

/* Show the dropdown menu when the 'show' class is added by Bootstrap */
.dropdown-menu.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto; /* Allow interaction when visible */
}