/* 白色拟态主题 - 全站搜索结果页样式（参考拟态UI4.0风格，覆盖 search.php 内嵌样式） */

/* ========== CSS变量定义 ========== */
:root {
    --background-color: #ebecf0;
    --greyLight-1: #e4ebf5;
    --greyLight-2: #c8d0e7;
    --greyLight-3: #bec8e4;
    --greyDark: #6d85c1;
    --white: #fff;
    --text-a-color: #7a7e90;
    --text-a-hover: #8897d8;
    --text-li-color: #565e82;
    --primary: #6d5dfc;
    --primary-dark: #5b0eeb;
}

/* ========== 容器和布局 ========== */
.site-search-container {
    max-width: 1200px !important;
    margin: 40px auto 60px !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

.site-search-meta {
    margin-bottom: 24px !important;
}

.site-search-title {
    font-size: 26px !important;
    margin: 0 0 10px !important;
    font-weight: 700 !important;
    color: var(--text-li-color) !important;
}

.site-search-sub {
    margin: 0 !important;
    font-size: 14px !important;
    color: var(--text-a-color) !important;
}

.site-search-badge {
    color: var(--text-li-color) !important;
    font-weight: 600 !important;
}

/* ========== 网格布局 ========== */
.site-search-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
}

@media (max-width: 1200px) {
    .site-search-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

@media (max-width: 900px) {
    .site-search-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 520px) {
    .site-search-grid {
        grid-template-columns: repeat(1, 1fr) !important;
        gap: 16px !important;
    }
}

/* ========== 卡片样式 - 拟态风格（xf_mimic_outer，覆盖内嵌样式） ========== */
.site-search-card {
    background-color: var(--background-color) !important;
    background: var(--background-color) !important;
    border: none !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white) !important;
    transition: all .2s !important;
    -webkit-transition: all .2s !important;
    transform: none !important;
}

.site-search-card:hover {
    box-shadow: inset 0.2rem 0.2rem 0.6rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white), 0.1rem 0.1rem 0.3rem var(--greyLight-2), -0.05rem -0.05rem 0.2rem var(--white) !important;
    transform: none !important;
}

/* ========== 缩略图 ========== */
.site-search-thumb {
    width: 100% !important;
    aspect-ratio: 16/9 !important;
    background-color: var(--background-color) !important;
    background: var(--background-color) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--text-a-color) !important;
    font-size: 28px !important;
    overflow: hidden !important;
}

.site-search-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* ========== 卡片内容 ========== */
.site-search-body {
    padding: 16px 18px !important;
    background-color: var(--background-color) !important;
}

/* ========== 类型标签 - 拟态风格（xf_mimic_outer，覆盖内嵌样式） ========== */
.site-search-type {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    border-radius: 15px !important;
    padding: 6px 12px !important;
    background-color: var(--background-color) !important;
    background: var(--background-color) !important;
    color: var(--text-a-color) !important;
    box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white) !important;
    transition: all .2s !important;
    -webkit-transition: all .2s !important;
    border: none !important;
}

.site-search-type.material,
.site-search-type.purchase,
.site-search-type.teaching,
.site-search-type.audio,
.site-search-type.download,
.site-search-type.software-purchase,
.site-search-type.advertising {
    background-color: var(--background-color) !important;
    background: var(--background-color) !important;
    color: var(--text-a-color) !important;
    box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white) !important;
}

/* ========== 卡片标题和描述 ========== */
.site-search-card-title {
    margin: 12px 0 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--text-li-color) !important;
    line-height: 1.35 !important;
    max-height: 2.7em !important;
    overflow: hidden !important;
}

.site-search-card-desc {
    margin: 0 !important;
    font-size: 13px !important;
    color: var(--text-a-color) !important;
    line-height: 1.6 !important;
    max-height: 3.2em !important;
    overflow: hidden !important;
}

/* ========== 卡片底部 ========== */
.site-search-footer {
    padding: 14px 18px !important;
    border-top: none !important;
    background-color: var(--background-color) !important;
    background: var(--background-color) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 10px !important;
}

/* ========== 链接样式 - 拟态风格（参考参考样式，覆盖内嵌样式） ========== */
.site-search-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-a-color) !important;
    padding: 8px 14px !important;
    border-radius: 15px !important;
    background-color: var(--background-color) !important;
    background: var(--background-color) !important;
    box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white) !important;
    transition: all .2s !important;
    -webkit-transition: all .2s !important;
}

.site-search-link:hover {
    color: var(--text-a-hover) !important;
    text-decoration: none !important;
    box-shadow: inset 0.2rem 0.2rem 0.6rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white) !important;
}

.site-search-link:active {
    color: var(--primary) !important;
}

/* ========== 分类标题 ========== */
.site-search-section {
    margin-top: 24px !important;
    margin-bottom: 16px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--text-li-color) !important;
}

/* ========== 按钮样式 - 拟态风格（参考参考样式，覆盖内嵌样式） ========== */
.site-search-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 18px !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border: none !important;
    background-color: var(--background-color) !important;
    background: var(--background-color) !important;
    background-image: none !important;
    color: var(--text-li-color) !important;
    box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white) !important;
    transition: all .2s !important;
    -webkit-transition: all .2s !important;
    cursor: pointer !important;
}

.site-search-btn:hover {
    background-color: var(--background-color) !important;
    background: var(--background-color) !important;
    background-image: none !important;
    color: var(--text-li-color) !important;
    border: none !important;
    box-shadow: inset 0.2rem 0.2rem 0.6rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white) !important;
    transform: none !important;
}

.site-search-btn:active {
    color: var(--primary) !important;
    box-shadow: inset 0.3rem 0.3rem 0.7rem var(--greyLight-2), inset -0.3rem -0.3rem 0.7rem var(--white) !important;
}

/* ========== 分类按钮样式 - 拟态风格（参考参考样式，覆盖内嵌样式） ========== */
.btn-purchase,
.btn-teaching,
.btn-audio,
.btn-material,
.btn-download,
.btn-software-purchase,
.btn-advertising {
    background-color: var(--background-color) !important;
    background: var(--background-color) !important;
    background-image: none !important;
    color: var(--text-li-color) !important;
    border: none !important;
    border-radius: 20px !important;
    box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white) !important;
    transition: all .2s !important;
    -webkit-transition: all .2s !important;
}

.btn-purchase:hover,
.btn-teaching:hover,
.btn-audio:hover,
.btn-material:hover,
.btn-download:hover,
.btn-software-purchase:hover,
.btn-advertising:hover {
    background-color: var(--background-color) !important;
    background: var(--background-color) !important;
    background-image: none !important;
    color: var(--text-li-color) !important;
    border: none !important;
    box-shadow: inset 0.2rem 0.2rem 0.6rem var(--greyLight-2), inset -0.2rem -0.2rem 0.5rem var(--white) !important;
    transform: none !important;
}

.btn-purchase:active,
.btn-teaching:active,
.btn-audio:active,
.btn-material:active,
.btn-download:active,
.btn-software-purchase:active,
.btn-advertising:active {
    color: var(--primary) !important;
    box-shadow: inset 0.3rem 0.3rem 0.7rem var(--greyLight-2), inset -0.3rem -0.3rem 0.7rem var(--white) !important;
}

/* ========== 空状态提示 - 拟态风格（覆盖内嵌样式） ========== */
.site-search-container > div[style*="padding:40px"],
.site-search-container div[style*="padding:40px"][style*="border-radius:16px"],
.site-search-empty {
    padding: 40px 24px !important;
    border-radius: 20px !important;
    background-color: var(--background-color) !important;
    background: var(--background-color) !important;
    border: none !important;
    border-style: none !important;
    text-align: center !important;
    box-shadow: 0.3rem 0.3rem 0.6rem var(--greyLight-2), -0.2rem -0.2rem 0.5rem var(--white) !important;
    transition: all .2s !important;
    -webkit-transition: all .2s !important;
}

.site-search-container > div[style*="padding:40px"] p,
.site-search-container div[style*="padding:40px"][style*="border-radius:16px"] p,
.site-search-empty p {
    margin: 0 0 8px !important;
    font-size: 15px !important;
    color: var(--text-li-color) !important;
}

.site-search-container > div[style*="padding:40px"] p:last-child,
.site-search-container div[style*="padding:40px"][style*="border-radius:16px"] p:last-child,
.site-search-empty p:last-child {
    margin: 0 !important;
    font-size: 13px !important;
    color: var(--text-a-color) !important;
}

/* ========== 结果统计信息 - 拟态风格 ========== */
.site-search-stats,
div[style*="共找到"] {
    margin-bottom: 24px !important;
    font-size: 13px !important;
    color: var(--text-a-color) !important;
}

.site-search-stats strong,
div[style*="共找到"] strong {
    color: var(--text-li-color) !important;
    font-weight: 600 !important;
}

/* ========== 响应式优化 ========== */
@media (max-width: 768px) {
    .site-search-container {
        margin: 30px auto 50px !important;
        padding: 0 16px !important;
    }

    .site-search-title {
        font-size: 22px !important;
    }

    .site-search-card {
        border-radius: 15px !important;
    }

    .site-search-body {
        padding: 14px 16px !important;
    }

    .site-search-footer {
        padding: 12px 16px !important;
    }

    .site-search-btn,
    .btn-purchase,
    .btn-teaching,
    .btn-audio,
    .btn-material,
    .btn-download,
    .btn-software-purchase,
    .btn-advertising {
        border-radius: 15px !important;
    }

    .site-search-empty,
    div[style*="padding:40px"][style*="暂未找到"],
    div[style*="暂未找到"] {
        padding: 30px 20px !important;
        border-radius: 15px !important;
    }
}