/* ── Home page hero search box and autocomplete dropdown.
   Used on: HomePage only.
   ──────────────────────────────────────────────────────────────────────── */

/* ── Allow autocomplete dropdown to overflow the hero section ── */
.bd-page-hero,
.bd-page-hero--solid { overflow: visible !important; }
.bd-page-hero .container,
.bd-page-hero--solid .container { overflow: visible !important; }

/* ── Hero stat group (under the headline) ─────────────────────── */
.hp-stats { display: flex; gap: 2rem; flex-wrap: wrap; }
.hp-stats .hp-stat-num { font-size: 1.6rem; font-weight: 700; line-height: 1; }
.hp-stats .hp-stat-lbl { font-size: 0.78rem; opacity: 0.85; margin-top: 0.15rem; }

/* ── Search container ─────────────────────────────────────────── */
.hp-search-outer {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 540px;
}
.hp-search-wrap {
    position: relative;
    display: flex;
    border-radius: 50px;
    overflow: visible; /* allow dropdown to overflow */
    box-shadow: 0 4px 24px rgba(0,0,0,0.28);
    background: #fff;
}
.hp-search-wrap input[type="search"] {
    flex: 1;
    border: none;
    outline: none;
    border-radius: 50px;
    padding: 0.85rem 1rem 0.85rem 1.4rem;
    font-size: 1rem;
    background: transparent;
    color: #1a1a2e;
    min-width: 0;
}
.hp-search-wrap input[type="search"]::placeholder { color: #9aacb8; }
.hp-search-wrap .hp-clear-btn {
    flex-shrink: 0;
    border: none;
    background: transparent;
    color: #9aacb8;
    padding: 0 0.9rem;
    font-size: 1.1rem;
    cursor: pointer;
    display: none;
    align-items: center;
}
.hp-search-wrap .hp-clear-btn:hover { color: #555; }

/* ── Autocomplete dropdown ────────────────────────────────────── */
.hp-ac-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0; right: 0;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.22);
    z-index: 99999;
    overflow: hidden;
    display: none;
}
.hp-ac-dropdown.open { display: block; }
.hp-ac-item {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.65rem 1.2rem;
    cursor: pointer;
    text-decoration: none !important;
    color: #1a1a2e;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    transition: background .12s;
}
.hp-ac-item:last-child { border-bottom: none; }
.hp-ac-item:hover, .hp-ac-item.active { background: rgba(31,79,120,0.07); }
.hp-ac-item img {
    width: 42px; height: 42px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: #e9ecef;
}
.hp-ac-item .hp-ac-icon {
    width: 42px; height: 42px;
    border-radius: 8px;
    background: rgba(31,79,120,0.1);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    color: var(--bd-primary, #1f4f78);
    font-size: 1.2rem;
}
.hp-ac-item .hp-ac-text { flex: 1; min-width: 0; }
.hp-ac-item .hp-ac-name { font-weight: 600; font-size: 0.95rem; line-height: 1.2; }
.hp-ac-item .hp-ac-sub  { font-size: 0.78rem; color: #6c757d; margin-top: 0.1rem; }
.hp-ac-item .hp-ac-type {
    font-size: 0.7rem;
    background: rgba(31,79,120,0.1);
    color: var(--bd-primary, #1f4f78);
    border-radius: 99px;
    padding: 0.15rem 0.55rem;
    flex-shrink: 0;
    font-weight: 500;
}

/* ── Explore all button ───────────────────────────────────────── */
.hp-explore-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1.5px solid rgba(255,255,255,0.55);
    color: #fff;
    border-radius: 50px;
    padding: 0.65rem 1.6rem;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: background .18s, border-color .18s;
}
.hp-explore-btn:hover {
    background: rgba(255,255,255,0.28);
    border-color: #fff;
    color: #fff;
}