/* =========================================================================================
   HPFY site search - medicalsupplies.club colours and layout tweaks.
   Loaded after sitesearch.css (dropdown, every page) and sitesearch-results.css (results page).
   Only this file differs between the store websites.
   ========================================================================================= */

/* brand colour for links in the dropdown */
.hpfy-ac-head a, .hpfy-ac-viewall a, .hpfy-ac-host .hpfy-ac button.hpfy-ac-clear { color: #1c6380; }
.hpfy-ac-host button.hpfy-voice:hover svg { fill: #1c6380; }

/* medicalsupplies.club's styles.css draws the box 38px high with !important rules; keep the dropdown flush under it */
.header-search .input-group.hpfy-ac-host .hpfy-ac { font-family: inherit; }

/* the store search box is a Bootstrap .input-group: the search button sits outside the input,
   so the microphone only needs room inside the input itself */
.input-group.hpfy-ac-host input[name="searchterms"].hpfy-has-voice { padding-right: 34px; }
.input-group.hpfy-ac-host button.hpfy-voice { right: 44px; }
.input-group.hpfy-ac-host .hpfy-ac { top: 100%; }

/* results page: same sizes the store's Klevu page used */
.hpfy-search-page .kuGridView ul li .kuName a { font-size: 16px; }
.hpfy-search-page .kuSalePrice, .hpfy-search-page .kuGridView ul li .kuSalePrice { color: #f90500; }
.hpfy-price-fill { background: #1c6380; }
.hpfy-price input[type=range]::-webkit-slider-thumb { border-color: #1c6380; }
.hpfy-price input[type=range]::-moz-range-thumb { border-color: #1c6380; }

/* grid / list buttons: hide their text label (this site's Bootstrap has no d-none class) */
.kuView .kuGridviewBtn span, .kuView .kuListviewBtn span {
    display: none;
}

/* filter checkboxes: box and tick placed the same way whatever the font (the tick no longer slips outside the box) */
.kuMulticheck .kuFilterNames ul li a span.kuFilterLabel {
    position: relative;
    padding-left: 23px;
    box-sizing: border-box;
}
.kuMulticheck .kuFilterNames ul li a span.kuFilterLabel:before {
    position: absolute;
    left: 0;
    top: 3px;
    margin: 0;
}
.kuMulticheck .kuFilterNames ul li a:hover span.kuFilterLabel:after,
.kuMulticheck .kuFilterNames ul li.kuSelected span.kuFilterLabel:after {
    left: 5px;
    top: 4px;
}