/* =============================================================
   header-overrides.css
   Freelancer-project-specific overrides for top-generic-header.
   Loaded AFTER top-generic-header.css so these rules win.
   ============================================================= */


/* ─────────────────────────────────────────────────────────────
   Live-search results dropdown
   ───────────────────────────────────────────────────────────── */
.tf-header .hero-search-wrapper .display_search_result {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 9999;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.14), 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.07);
    max-height: 440px;
    overflow-y: auto;
    min-width: 320px;
    scrollbar-width: thin;
    scrollbar-color: #ddd #f5f5f5;
}

.tf-header .hero-search-wrapper .display_search_result::-webkit-scrollbar {
    width: 5px;
}
.tf-header .hero-search-wrapper .display_search_result::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: #ddd;
}


/* ─────────────────────────────────────────────────────────────
   Live-search spinner
   Replaces the plain FA spinner while an AJAX search is in
   flight. Injected by footer.blade.php JS as:
       <span class="live-search-spinner"></span>
   ───────────────────────────────────────────────────────────── */
@keyframes live-search-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.live-search-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    /* outer track */
    border: 2.5px solid rgba(43, 38, 99, 0.18);
    /* spinning arc — header purple */
    border-top-color: #2B2663;
    animation: live-search-spin 0.6s linear infinite;
    vertical-align: middle;
    flex-shrink: 0;
}