/* search-styles.css */
.search-container {position: relative;/* max-width: 600px; */display: inline-flex;align-items: center;margin: 0 0 0 15px;}
.search-container.active {}
.search-container .search { display: none; }
.search-container.active .search {display:flex;position: absolute;right: 0;min-width: 530px;}
.search-container .search-trigger {display: flex;align-items: center;font-size: 13px;cursor: pointer;min-height: 40px;line-height: 1;width: 40px;height: 40px;line-height: 40px;background: #ddd;text-align: center;justify-content: center;border-radius: 50%;padding: 0;font-size: 19px;border: none;z-index: 13;}
.search-container.active .search-trigger {border-radius: 20px;box-shadow: none !important;background: none;}
.search-container .search-trigger:hover {box-shadow: 0 0 0 2px var(--c-textcolor) inset }
.search-container .search-trigger i {}
.search-container.active .search-trigger i::before {content:"\f00d"}
.search-container #search-input {width: 100%;padding: 0 50px 0 20px;font-size: 15px;background: #fff;border-radius: 20px;border: none;height: 40px;font-weight: 300;z-index: 11;position: relative;box-shadow: 0 0 20px rgb(0 0 0 / 15%);}
.search-container #search-input:focus {outline: none;}
.search-container #search-results {position: absolute;top: 100%;left: 0;right: 0;background: #fff;border-radius: 0 0 20px 20px;max-height: 400px;overflow-y: auto;box-shadow: 0 14px 20px rgba(0, 0, 0, 0.15), 0 -11px 0 #fff;display: none;z-index: 11;text-align: left;padding: 0 10px 10px 0px;overflow: hidden;}
.search-container #search-results.active { display: block; }

.search-container #search-results .search-results-wrapper {overflow-y: auto;max-height: 400px;}
.search-container #search-results .search-results-wrapper::-webkit-scrollbar {-webkit-appearance: none; width: 5px; }
.search-container #search-results .search-results-wrapper::-webkit-scrollbar-thumb {border-radius: 4px; background-color: rgba(0, 0, 0, .2); -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .3); }

.search-container .search-result-item {display: flex;padding: 12px 20px;text-decoration: none;color: inherit;gap: 20px;align-items: flex-start;border-bottom: solid 3px #f2f2f2;}
.search-container .search-result-item:hover {background: #f2f2f2;}
.search-container .search-result-item > img { max-width: 130px; flex: 0 1 130%; height: auto; border-radius: 10px; }
.search-container .search-result-item .search-result-content {}
.search-container .search-result-item h4 {margin: 0 0 4px 0;font-size: 15px;color: var(--c-textcolor);font-weight: 400;}
.search-container .search-result-item:hover h4 {color:var(--c-main);}
.search-container .search-result-item p {margin: 0 0 4px 0;font-size: 14px;color: #777;}
.search-container .search-result-item:hover p {color: #000; }
.search-container .result-type {font-size: 12px;background: rgb(0 0 0 / 20%);padding: 5px 10px;display: inline-block;border-radius: 5px;line-height: 1;color: #fff;}
.search-container .search-loading,
.search-container .search-error,
.search-container .no-results {padding: 20px;/* text-align: center; */color: var(--c-textcolor);font-size: 13px;}
.search-container mark {background: var(--c-main);padding: 2px 2px;color: #fff;}

@media (max-width: 767px) {
    .search-container {}
    .search-container.active { position: absolute; z-index: 100000; right: 15px; left: 15px; margin: 0; justify-content: flex-end; }
    .search-container.active .search { min-width: 100%; }
    .search-container .search-result-item > img {display:none}
}