/* -----------------------------------------------------------------------------
   Header search widget — styles for /s/search/template.php

   Extracted from /w/_general/js/algolia/search.css, which was the Algolia
   Autocomplete library stylesheet with our own rules appended. The library and
   the Typesense JS client are gone; the .aa-*, #autocomplete and
   .searchwp-live-search-* rules went with them (nothing renders those elements
   any more). Everything below is live markup produced by template.php.
----------------------------------------------------------------------------- */

.header-search {display: flex;align-items: center;position: relative;line-height: 1;}
.header-search .search-trigger {font-size: 24px;display: inline-block;vertical-align: top;cursor: pointer;line-height: 1;color: var(--c-main);width: 44px;height: 44px;text-align: center;line-height: 44px;}
.header-search .search-trigger.active {background: #f2f2f2; color: #000;z-index: 1002;border-radius: 0 10px 10px 0px;}

.header-search .search-panel {width: 0;overflow: hidden;margin: -7px 0;position: absolute;right: 43px;}
.header-search.active .search-panel {width: 390px;padding: 0;height: auto;transition: all 0.1s;margin: 0 -42px 0 0px;z-index: 20;}


@media (max-width: 767px) {
    .header-search .search-trigger {display: none;}
    .header-search .search-panel {position: relative;width: auto;margin: 0;right: auto;position: absolute;z-index: 1000;left: 20px;right: 20px;top: 90px;}
    .header-search {position: unset;display: none !important;}
    .menuWrap.open + .icons .header-search {display:block !important}
}
 


.header-search.v2 {}
.header-search.v2 .search-panel {/* overflow: visible; */}
.header-search.v2.active .search-panel {overflow: visible;z-index: 1001;}
.header-search.v2 .search-trigger.active {background: none;}
.header-search.v2 .search-trigger.active::before {content:"\f00d";font-family: "Font Awesome 7 Pro";font-weight: 300;}
.header-search.v2 .search-panel #search-input {width: 100%;transition: border-color 0.3s ease;background: #f2f2f2;border: none;margin: 0;border-radius: 10px;font-size: 14px;height: 44px;line-height: 44px;padding: 10px 10px;color:var(--c-secondary);}
.header-search.v2 .search-panel #search-input::placeholder {color:var(--c-secondary);}
.header-search.v2.active .search-panel #search-input {}
.header-search.v2.active .search-panel #search-results {max-height: 800px;overflow-y: auto;border: 1px solid #ddd;border-radius: 10px;padding: 10px;margin-top: 10px;position: absolute;left: 0;right: 0;top: 40px;background: #f2f2f2;z-index: 1002;border: none;border-radius: 0 0 10px 10px;padding: 0;border: none;margin: 0;box-shadow: 0 -8px 0 #f2f2f2;}

.header-search.v2 .search-panel #search-results > p { padding: 10px; margin: 0; font-weight: 400; color: var(--c-secondary); font-size: 13px; }
.header-search.v2.active .search-panel #search-results:empty {display:none}
.header-search.v2 .search-panel #search-results ul {margin: 0;list-style: none;padding: 0;}
.header-search.v2 .search-panel #search-results ul li {}
.header-search.v2 .search-panel #search-results ul li:last-child .result-item {border:none}

.header-search.v2 .search-panel #search-results ul li .result-item {display: flex;align-items: flex-start;padding: 10px;border-bottom: solid 1px #fff;}
.header-search.v2 .search-panel #search-results ul li .result-item:hover {background:var(--c-main); color:#fff}
.header-search.v2 .search-panel #search-results ul li .result-item .result-image { flex: 0 1 60px; min-width: auto; margin: 0 10px 0 0; }
.header-search.v2 .search-panel #search-results ul li .result-item .result-image .no-image {}
.header-search.v2 .search-panel #search-results ul li .result-item .result-image .no-image::before {content:"";}
.header-search.v2 .search-panel #search-results ul li .result-item .result-image img {border-radius: 5px;height: 50px;object-fit: cover;}
.header-search.v2 .search-panel #search-results ul li .result-item .result-content { flex: 1; font-size: 14px; color: inherit; }
.header-search.v2 .search-panel #search-results ul li .result-item .result-content strong { margin: 0 0 4px 0; background: var(--c-gray); color: #fff; font-size: 10px; padding: 5px; display: inline-block; border-radius: 3px; font-weight: 500; } .header-search.v2 .search-panel #search-results ul li .result-item .result-content h3 {font-size: 13px;color: inherit;color: var(--c-secondary);margin: 0 0 5px 0;}
.header-search.v2 .search-panel #search-results ul li .result-item .result-content p {color: inherit;color: var(--c-main);line-height: 1.2;font-size: 12px;margin: 0;}

.header-search.v2 .search-panel #search-results ul li .result-item:hover .result-content h3 {color:#fff;}
.header-search.v2 .search-panel #search-results ul li .result-item:hover .result-content p {color:#fff;}
.header-search.v2 .search-panel #search-results ul li .result-item:hover .result-content strong { background: var(--c-secondary); }


@media (max-width: 767px) {
    .header-search.v2 {}
    .header-search.v2.open {position: absolute;top: 58px;left: 20px;right: 60px;margin: 0;padding: 0 0;}
    .header-search.v2.open .search-panel { position: relative; left: auto; right: auto; top: auto; width: 100%; }
    .header-search.v2 .search-panel #search-results {}
    .header-search.v2 .search-trigger {display: block;position: absolute;top: 0;right: 0;z-index: 10001;pointer-events: none;}
    .header-search.v2 .search-trigger.active {pointer-events:auto;}
    .header-search.v2 .search-panel #search-input { background: #fff; }
    .header-search.v2 .search-panel #search-results {background:#fff !important;box-shadow: 0 -8px 0 #fff !important;border-radius: 0 0 10px 10px;max-height: 500px;overflow-y: auto;}
    .header-search.v2 .search-panel #search-results ul li .result-item {border-bottom:solid 1px #eee}
}