/**
 * 站内搜索样式（搜索结果页 + 搜索框卡片 + 头部弹窗热词区）
 *
 * 作用域：.knn-search-page（搜索结果页主体）、.knn-search-box（搜索框卡片，
 * 亦嵌入头部搜索弹窗/移动端搜索对话框），颜色变量复用主题 --knn-* 并跟随暗色模式
 */

/* ============================================================
 * 1. 变量
 * ============================================================ */
.knn-search-page,
.knn-search-box {
    --main-color: var(--knn-text-color, #333);
    --main-bg-color: var(--knn-bg-color-card, #ffffff);
    --main-border-color: #efefef;
    --muted-color: #999999;
    --focus-color: var(--knn-color-primary, #007aff);
    --focus-color-opacity1: rgba(0, 122, 255, 0.1);
    --main-radius: 8px;
    --main-shadow: rgba(0, 0, 0, 0.04);
}

body.dark-mode .knn-search-page,
body.dark-mode .knn-search-box {
    --main-color: #d7d7d7;
    --main-bg-color: #1e1e1e;
    --main-border-color: #2c2c2c;
    --muted-color: #8a8a8a;
    --main-shadow: rgba(0, 0, 0, 0.3);
}

.knn-search-page .focus-color,
.knn-search-box .focus-color {
    color: var(--focus-color);
}

.knn-search-page .muted-color,
.knn-search-box .muted-color {
    color: var(--muted-color);
}

.knn-search-page .opacity5 {
    opacity: 0.5;
}

/* ============================================================
 * 2. 搜索框卡片
 * ============================================================ */
.knn-search-box {
    color: var(--main-color);
}

.knn-search-page-box {
    background: var(--main-bg-color);
    border-radius: var(--main-radius);
    box-shadow: 0 0 10px var(--main-shadow);
    padding: 20px;
    margin-bottom: 16px;
}

.knn-search-form .knn-search-type {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 14px;
}

.knn-search-form .knn-search-type label {
    cursor: pointer;
}

.knn-search-form .knn-search-type input {
    display: none;
}

.knn-search-form .knn-search-type span {
    display: inline-block;
    padding: 5px 18px;
    font-size: 13px;
    border-radius: 20px;
    background: var(--knn-bg-color-grey, #f1f1f1);
    color: var(--muted-color);
    transition: 0.2s;
}

body.dark-mode .knn-search-form .knn-search-type span {
    background: #2a2a2a;
}

.knn-search-form .knn-search-type input:checked + span {
    background: var(--focus-color);
    color: #fff;
}

.knn-search-input-row {
    display: flex;
    align-items: center;
    border: 1px solid var(--main-border-color);
    border-radius: 20px;
    overflow: hidden;
    transition: 0.2s;
}

.knn-search-input-row:focus-within {
    border-color: var(--focus-color);
}

.knn-search-input-row .knn-search-input {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 0 18px;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--main-color);
    font-size: 14px;
}

.knn-search-input-row .knn-search-submit {
    flex: 0 0 auto;
    width: 64px;
    height: 40px;
    border: 0;
    cursor: pointer;
    background: var(--focus-color);
    color: #fff;
    font-size: 15px;
    transition: 0.2s;
}

.knn-search-input-row .knn-search-submit:hover {
    opacity: 0.85;
}

/* ============================================================
 * 3. 热词 / 历史
 * ============================================================ */
.knn-search-keywords {
    margin-top: 14px;
}

.knn-search-keywords > p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 8px;
    font-size: 13px;
}

.knn-search-keywords .knn-trash-history {
    color: var(--muted-color);
    font-size: 12px;
}

.knn-search-keywords .knn-trash-history:hover {
    color: var(--focus-color);
}

.knn-search-keyword {
    display: inline-block;
    padding: 3px 12px;
    margin: 0 6px 6px 0;
    font-size: 12px;
    border-radius: 14px;
    background: var(--knn-bg-color-grey, #f1f1f1);
    color: var(--muted-color);
    transition: 0.2s;
}

body.dark-mode .knn-search-keyword {
    background: #2a2a2a;
}

.knn-search-keyword:hover {
    background: var(--focus-color-opacity1);
    color: var(--focus-color);
}

/* ============================================================
 * 4. 结果页：统计文案 / 类型 tab / 排序条
 * ============================================================ */
.knn-search-desc {
    margin: 4px 2px 12px;
    font-size: 13px;
}

.knn-search-desc a {
    color: inherit;
}

.knn-search-tab-header {
    background: var(--main-bg-color);
    border-radius: var(--main-radius);
    box-shadow: 0 0 10px var(--main-shadow);
    padding: 6px 16px;
    margin-bottom: 16px;
}

.knn-search-tab-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    border-bottom: 1px solid var(--main-border-color);
}

.knn-search-tab-nav li {
    list-style: none;
    flex: 0 0 auto;
}

.knn-search-tab-nav li a,
.knn-search-tab-nav li span {
    display: block;
    padding: 10px 2px;
    font-size: 15px;
    color: var(--main-color);
    border-bottom: 2px solid transparent;
}

.knn-search-tab-nav li.active span {
    font-weight: bold;
    border-bottom-color: var(--focus-color);
}

.knn-search-tab-nav li a:hover {
    color: var(--focus-color);
}

.knn-search-orderby {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 2px;
    font-size: 13px;
    overflow-x: auto;
    white-space: nowrap;
}

.knn-search-orderby a {
    color: var(--muted-color);
}

.knn-search-orderby a:hover {
    color: var(--focus-color);
}

/* ============================================================
 * 5. 用户结果列表
 * ============================================================ */
.knn-search-user-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.knn-search-user-list .author-minicard {
    background: var(--main-bg-color);
    box-shadow: 0 0 10px var(--main-shadow);
    padding: 14px 16px;
    margin: 0;
}

@media (max-width: 767px) {
    .knn-search-user-list {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
 * 6. 商品结果网格（补齐 #shop 之外的整行元素）
 * ============================================================ */
.knn-search-products .product-lists-row > .shop-paginate,
.knn-search-products .product-lists-row > .shop-null-box {
    width: 100%;
}

.knn-search-products .product-lists-row > .product-item.card {
    width: calc(33.333% - 16px);
}

@media (max-width: 991px) {
    .knn-search-products .product-lists-row > .product-item.card {
        width: calc(50% - 16px);
    }
}

/* ============================================================
 * 7. 头部搜索弹窗 / 移动端搜索对话框内的搜索框
 * ============================================================ */
/* 悬浮卡片本体：白卡 + 弹性浮现动画 */
.search-widget .knn-search-box {
    position: relative;
    width: 640px;
    max-width: 100%;
    margin: 0 auto;
    padding: 28px 28px 20px;
    background: var(--main-bg-color);
    border-radius: 20px;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    animation: knn-search-card-pop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* 弹窗内输入行加大：浅灰底无边框，聚焦时白底 + 主题蓝光晕 */
.search-widget .knn-search-input-row {
    height: 48px;
    border: 2px solid transparent;
    border-radius: 14px;
    background: var(--knn-bg-color-grey, #f1f1f1);
}

body.dark-mode .search-widget .knn-search-input-row {
    background: #2a2a2a;
}

.search-widget .knn-search-input-row:focus-within {
    background: var(--main-bg-color);
    border-color: var(--focus-color);
    box-shadow: 0 0 0 4px var(--focus-color-opacity1);
}

.search-widget .knn-search-input-row .knn-search-input {
    height: 44px;
    font-size: 15px;
}

.search-widget .knn-search-input-row .knn-search-submit {
    width: 58px;
    height: 36px;
    margin-right: 6px;
    border-radius: 10px;
}

.search-widget .knn-search-form .knn-search-type {
    justify-content: center;
    margin-bottom: 16px;
}

.search-widget .knn-search-keywords {
    margin-top: 16px;
}

.header.mobile .mobile-search-modal .knn-search-box {
    margin-top: 14px;
}

/* ============================================================
 * 8. 商城归档页搜索入口（放大镜图标，点击唤起顶部搜索弹窗）
 * 定位到筛选卡片右上角（第一行分类 tab 右侧）
 * ============================================================ */
.shop-cat-filter .knn-shop-search-toggle {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: var(--muted-color, #999);
    transition: 0.2s;
}

.shop-cat-filter .knn-shop-search-toggle:hover {
    background: var(--focus-color-opacity1, rgba(0, 122, 255, 0.1));
    color: var(--focus-color, #007aff);
}

.shop-cat-filter .knn-shop-search-toggle i {
    font-size: 15px;
}