/*
 * Search box suggestions (Views/Shared/_SearchBox.cshtml, Content/search/search.js) and the notes above the search
 * results (Views/ProductList/_SearchNotice.cshtml). Shipped on its own, outside the grunt bundles.
 */
.osvs { position: relative; }
.osvs .osvs-input::-webkit-search-cancel-button,
.osvs .osvs-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.osvs .osvs-input { padding-right: 84px; color: #222; }
.osvs .osvs-clear {
    position: absolute; top: 50%; right: 52px; z-index: 6; transform: translateY(-50%);
    border: 0; background: transparent; padding: 4px; line-height: 1; font-size: 22px; color: #aaa; cursor: pointer;
}
.osvs .osvs-clear:hover, .osvs .osvs-clear:focus-visible { color: #333; }
.osvs .osvs-clear[hidden] { display: none; }
.osvs.osvs-empty .osvs-input { border-color: #dc3545; box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .2); }

.osvs-pop {
    position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 1040;
    background: #fff; border-radius: 0 0 .75rem .75rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .16);
    max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain; padding: .25rem 0 .5rem;
    text-align: left;
}
.osvs-pop[hidden] { display: none; }
.osvs-list { list-style: none; margin: 0; padding: 0; }
.osvs-head {
    padding: .6rem 1rem .25rem; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: #8e8e8f;
}
.osvs-opt > a {
    display: flex; align-items: center; gap: .75rem; padding: .45rem 1rem; color: #222; text-decoration: none;
    font-size: 15px; line-height: 1.3;
}
.osvs-opt.is-active > a, .osvs-opt > a:hover { background: #f3f6f4; }
.osvs-opt mark { background: none; color: inherit; font-weight: 700; padding: 0; }
.osvs-img { width: 44px; height: 48px; flex: 0 0 44px; object-fit: cover; border-radius: .4rem; background: #f4f4f4; }
.osvs-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.osvs-price { flex: 0 0 auto; text-align: right; font-weight: 700; white-space: nowrap; }
.osvs-price s { display: block; font-weight: 400; font-size: 12px; color: #8e8e8f; }
.osvs-cat-icon {
    width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: #eef6f0; color: #28a745;
    display: inline-flex; align-items: center; justify-content: center; font-size: 15px;
}
.osvs-count { flex: 0 0 auto; color: #8e8e8f; font-size: 13px; }
.osvs-fix > a { color: #444; }
.osvs-fix b { color: #28a745; }
.osvs-all > a { justify-content: center; margin: .35rem 1rem 0; border-radius: 2rem; background: #28a745; color: #fff; font-weight: 600; }
.osvs-opt.osvs-all.is-active > a, .osvs-all > a:hover { background: #218838; color: #fff; }
.osvs-none { padding: .75rem 1rem; color: #666; font-size: 14px; }
.osvs-note { padding: .6rem 1rem .2rem; color: #555; font-size: 14px; }
.osvs-go > a { justify-content: space-between; font-weight: 600; color: #1e6b32; }
.osvs-ask { margin: 0 0 .5rem; border: 1px solid #28a745; background: #fff; color: #1e6b32; border-radius: 2rem; padding: .3rem .9rem; font-size: 14px; }
.osvs-ask:hover { background: #f3faf5; }
.osvs-ask[hidden] { display: none; }

@media (max-width: 991.98px) {
    .osvs .osvs-input { font-size: 16px; }
    .osvs-mobile .osvs-clear { right: 44px; }
    .osvs-mobile .osvs-pop { left: -12px; right: -12px; max-height: 65vh; }
}

/* Notes above the search results */
.osvs-notice { margin: .25rem 0 1rem; font-size: 15px; }
.osvs-notice p { margin: 0 0 .5rem; }
.osvs-notice a { color: #28a745; }
.osvs-chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin: 0 0 .5rem; }
.osvs-chip {
    display: inline-block; padding: .2rem .7rem; border-radius: 2rem; border: 1px solid #d7e9db; background: #f3faf5;
    color: #1e6b32; font-size: 13px; text-decoration: none;
}
a.osvs-chip:hover { background: #e3f3e7; color: #1e6b32; }
.osvs-band {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1rem;
    border: 1px solid #d7e9db; border-radius: .75rem; background: #f3faf5; color: #1e6b32; text-decoration: none;
}
.osvs-band:hover { background: #e3f3e7; color: #1e6b32; }