/* ============================================================
   BuyDirect Search Bar — Modernized styling
   Rounded container, red focus state, red Search button,
   clean Algolia autocomplete integration
   ============================================================ */

/* ── Search bar container ── */
.bd-search-bar {
    display: flex;
    align-items: center;
    border: 1.5px solid #ddd;
    border-radius: 10px;
    height: 46px;
    margin: 8px 0;
    padding: 0 5px 0 0;
    background: #fff;
    transition: border-color 0.15s;
    position: relative;
    width: 100%;
}
.bd-search-bar:focus-within { border-color: #C4112F; }

/* ── Red Search button ── */
.bd-search-btn {
    background: #C4112F;
    color: #fff;
    border: none;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 7px;
    cursor: pointer;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: 0.2px;
    white-space: nowrap;
    flex-shrink: 0;
}
.bd-search-btn:hover { background: #a50e27; }

/* ── Algolia autocomplete integration ──
   Search.cshtml renders:
     <div class="header_main_middle">
       <div id="autocomplete"></div>
       <div id="autocomplete-panel"></div>
     </div>
   We make header_main_middle fill the bar and strip Algolia's default chrome. */
.bd-search-bar .header_main_middle {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: unset !important;
    text-align: left !important;
    width: 100% !important;
}
.bd-search-bar #autocomplete,
.bd-search-bar #autocomplete-m { flex: 1 1 0%; min-width: 0; }
.bd-search-bar #autocomplete-panel,
.bd-search-bar #autocomplete-panel-m { position: static; }

/* Strip Algolia form default border/shadow */
.bd-search-bar .aa-Autocomplete { width: 100%; }
.bd-search-bar .aa-Form {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    height: 40px;
}
.bd-search-bar .aa-InputWrapperPrefix { padding-left: 8px; }
.bd-search-bar .aa-SubmitButton {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}
.bd-search-bar .aa-SubmitIcon {
    width: 17px;
    height: 17px;
    color: #999;
}
.bd-search-bar .aa-Input {
    font-size: 16px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #262626;
}
.bd-search-bar .aa-Input::placeholder { color: #aaa; font-size: 16px; }
.bd-search-bar .aa-InputWrapperPrefix {
    display: flex;
    align-items: center;
    height: 100%;
}
.bd-search-bar .aa-ClearButton { display: none; }

/* ── Autocomplete dropdown panel ── */
.bd-search-bar .aa-Panel {
    left: 0 !important;
    top: calc(100% + 4px) !important;
    width: 100% !important;
    margin-top: 0 !important;
    border-radius: 10px;
    background: #fff;
    border: 1px solid #e5e5e5;
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
    overflow: hidden;
}
.bd-search-bar .aa-Panel--scrollable {
    padding: 0 !important;
}
.bd-search-bar .aa-PanelSections {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.bd-search-bar .aa-PanelSection--1 {
    border-right: 1px solid #f0f0f0;
}
.bd-search-bar .sdh3 {
    font-size: 14px;
    font-weight: 500;
    color: #999;
    margin: 0 0 8px;
}
.bd-search-bar .sdtext {
    font-size: 14px;
    font-weight: 500;
    color: #262626;
}
.bd-search-bar .sdtext:hover { color: #C4112F; }
.bd-search-bar .flex-container {
    padding: 6px 0;
}
.bd-search-bar .image-container img {
    border-radius: 4px;
}
.bd-search-bar .link-container a {
    color: #262626;
    text-decoration: none;
}
.bd-search-bar .link-container a:hover { color: #C4112F; }

/* ── Mobile: Algolia detached mode ── */
.bd-search-bar .aa-Autocomplete--detached {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
}
.bd-search-bar .aa-DetachedSearchButton {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 8px !important;
    width: 100%;
    height: 46px !important;
    cursor: text;
    display: flex !important;
    align-items: center;
}
.bd-search-bar .aa-DetachedSearchButtonPlaceholder {
    font-size: 16px;
    color: #aaa;
    line-height: 1;
}
.bd-search-bar .aa-DetachedSearchButtonIcon {
    display: flex;
    align-items: center;
}
.bd-search-bar .aa-DetachedSearchButtonIcon svg {
    width: 17px;
    height: 17px;
    color: #999;
}