/* Custom focus styles for the new search bar */
.search-container {
    margin-bottom:0 !important;
}
.search-container:focus-within {
    box-shadow: 0 0 0 2px #ffcc00; /* Your yellow accent color */
}

/* --- HEADER SEARCH RESULTS POPOVER STYLING --- */
#azure-results-wrapper.header-search-results {
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 56rem; /* Adjust to match max-w-2xl if needed, or wider */
    width: 95%;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 30;
}
#azure-results-wrapper.header-search-results.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}
#azure-results-wrapper.header-search-results::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid white;
    filter: drop-shadow(0 -1px 1px rgba(0,0,0,0.05));
}

/* --- HOMEPAGE SEARCH RESULTS STYLING --- */
#azure-results-wrapper.homepage-search-results {
    opacity: 0;
    pointer-events: none;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

#azure-results-wrapper.homepage-search-results.visible {
    opacity: 1;
    pointer-events: auto;
    max-height: 2000px;
}

#azure-results-container {
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    padding: 1rem;
    border: 1px solid #e5e7eb;
}

/* Homepage search specific styling */
#smart-search-section #search-form:focus-within {
    outline: 2px solid #ffcc00;
    outline-offset: 2px;
    border-radius: 1rem;
}

/* --- SHARED STYLES --- */
#loading-spinner { border: 5px solid #f3f3f3; border-top: 5px solid #003366; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 40px auto; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.pagination-btn:disabled { opacity: 0.5; cursor: not-allowed; }