/* ===== 搜索区域样式文件 ===== */
/* 包含搜索框、筛选器、下拉菜单等相关样式 */

/* ===== 搜索区域主容器 ===== */

/* 搜索区域背景容器（已停用，改用内联搜索） */
.search-section {
    display: none;
    /* 隐藏原搜索区域，改用内联搜索 */
}

/* ===== 搜索框区域 ===== */

/* 搜索框和按钮的水平容器 */
.search-box-container {
    display: flex;
    /* flex布局，实现搜索框和按钮水平排列 */
    gap: 0.8rem;
    /* 子元素间距0.8rem，适中的间距 */
    margin-bottom: 1.2rem;
    /* 底部外边距1.2rem，与筛选器区域分离 */
}

/* 搜索框容器 */
.search-box {
    position: relative;
    /* 相对定位，用于图标的绝对定位参考 */
    flex: 1;
    /* 占据剩余空间，让搜索框尽可能宽 */
}

/* 搜索输入框样式 */
.search-input {
    width: 100%;
    /* 宽度100%，填满容器 */
    padding: 0.8rem 0.8rem 0.8rem 2.5rem;
    /* 内边距：上下0.8rem，右0.8rem，左2.5rem为图标留空间 */
    background: rgba(255, 255, 255, 0.05);
    /* 半透明白色背景，增加层次感 */
    border: 1px solid var(--border);
    /* 1px边框 */
    border-radius: 10px;
    /* 圆角10px，适中的圆角 */
    color: var(--text-primary);
    /* 文字颜色 */
    font-size: 0.95rem;
    /* 字体大小0.95rem，适中的阅读大小 */
    transition: all 0.3s ease;
    /* 所有属性0.3s平滑过渡 */
}

/* 搜索输入框获得焦点时的样式 */
.search-input:focus {
    outline: none;
    /* 去除默认的焦点轮廓 */
    border-color: var(--accent);
    /* 边框变为强调色 */
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 24%, transparent);
    /* 强调色外边框 */
}

/* 搜索图标样式 */
.search-icon {
    position: absolute;
    /* 绝对定位 */
    left: 0.8rem;
    /* 距离左边0.8rem */
    top: 50%;
    /* 距离顶部50% */
    transform: translateY(-50%);
    /* 向上移动自身高度的50%，实现垂直居中 */
    color: var(--text-secondary);
    /* 次要文字颜色 */
}

/* ===== 搜索按钮样式 ===== */

/* 搜索按钮 */
.search-btn {
    background: var(--accent);
    /* 纯色强调背景 */
    color: #f8fafc;
    /* 高对比度文字 */
    border: 1px solid color-mix(in srgb, var(--accent) 72%, #000000 28%);
    /* 精细边框 */
    padding: 0.8rem 1.5rem;
    /* 内边距：上下0.8rem，左右1.5rem */
    border-radius: 10px;
    /* 圆角10px，与输入框保持一致 */
    font-weight: 600;
    /* 字体粗细：半粗体 */
    cursor: pointer;
    /* 鼠标指针样式 */
    transition: all 0.3s ease;
    /* 所有属性平滑过渡 */
    white-space: nowrap;
    /* 文字不换行 */
}

/* 搜索按钮悬停效果 */
.search-btn:hover {
    transform: none;
    /* 无位移动画 */
    filter: brightness(1.03);
    /* 轻微亮度变化 */
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.14);
    /* 微妙阴影 */
}

/* ===== 筛选器区域 ===== */

/* 筛选器和清除按钮的容器 */
.filters-section {
    margin: 0;
    padding: 0;
}

/* 筛选器和清除按钮的容器 */
.filters-container {
    display: flex;
    /* flex布局 */
    gap: 0.8rem;
    /* 子元素间距0.8rem */
    align-items: center;
    /* 垂直居中对齐 */
    margin: 0;
    /* 上下外边距 */
    padding: 0rem 1rem;
    /* 内边距 */
    background: var(--card-bg);
    /* 卡片背景色 */
    border-radius: 12px;
    /* 圆角 */
    border: 1px solid var(--border);
    /* 边框 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* 轻微阴影 */
}

/* 筛选器组容器 */
.filters {
    display: flex;
    /* flex布局 */
    gap: 0.8rem;
    /* 子元素间距0.8rem */
    flex-wrap: wrap;
    /* 允许换行，适应小屏幕 */
    flex: 1;
    /* 占据剩余空间 */
}

/* ===== 标签筛选器样式 ===== */

/* 标签筛选器容器 */
.tag-filters {
    display: flex;
    /* flex布局 */
    gap: 0.8rem;
    /* 标签间距0.8rem */
    flex-wrap: wrap;
    /* 允许换行，适应小屏幕 */
    flex: 1;
    /* 占据剩余空间 */
    align-items: center;
    /* 垂直居中 */
}

/* 标签按钮通用样式 */
.tag-btn {
    background: rgba(255, 255, 255, 0.08);
    /* 半透明白色背景 */
    border: 1px solid var(--border);
    /* 1px边框 */
    color: var(--text-primary);
    /* 主文字颜色 */
    padding: 0.6rem 1rem;
    /* 内边距：上下0.6rem，左右1rem */
    border-radius: 8px;
    /* 圆角8px */
    cursor: pointer;
    /* 鼠标指针样式 */
    transition: all 0.3s ease;
    /* 所有属性平滑过渡 */
    font-size: 0.85rem;
    /* 字体大小0.85rem */
    white-space: nowrap;
    /* 文字不换行 */
    position: relative;
    /* 相对定位，用于语言切换 */
    overflow: hidden;
    /* 隐藏溢出内容 */
}

/* 标签按钮悬停效果 */
.tag-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    /* 悬停时背景更亮 */
    border-color: var(--accent);
    /* 边框变为强调色 */
    transform: none;
    /* 无位移动画 */
}

/* 标签按钮激活状态 */
.tag-btn.active {
    background: var(--accent);
    /* 强调色背景 */
    color: #f8fafc;
    /* 高对比度文字 */
    border-color: var(--accent);
    /* 边框与背景一致 */
}

/* 激活状态悬停效果 */
.tag-btn.active:hover {
    background: color-mix(in srgb, var(--accent) 92%, #ffffff 8%);
    /* 悬停时轻微亮度变化 */
    border-color: color-mix(in srgb, var(--accent) 80%, #000000 20%);
    /* 维持边框清晰 */
}

/* 中英文文本切换 */
.tag-text-en,
.tag-text-cn,
.clear-text-en,
.clear-text-cn {
    display: none;
    /* 默认隐藏 */
}

/* 英文模式显示英文 */
html[lang="en"] .tag-text-en,
body[data-lang="en"] .tag-text-en,
html[lang="en"] .clear-text-en,
body[data-lang="en"] .clear-text-en {
    display: inline;
    /* 显示英文 */
}

/* 中文模式显示中文 */
html[lang="cn"] .tag-text-cn,
body[data-lang="cn"] .tag-text-cn,
html[lang="cn"] .clear-text-cn,
body[data-lang="cn"] .clear-text-cn {
    display: inline;
    /* 显示中文 */
}

/* 如果没有设置语言，默认显示英文 */
.tag-text-en,
.clear-text-en {
    display: inline;
    /* 默认显示英文 */
}

/* 中文模式时隐藏英文 */
body[data-lang="cn"] .tag-text-en,
body[data-lang="cn"] .clear-text-en {
    display: none;
}

/* ===== 清除筛选按钮 ===== */

/* 清除筛选按钮样式 */
.clear-filters-btn {
    background: rgba(255, 255, 255, 0.08);
    /* 半透明白色背景 */
    border: 1px solid var(--border);
    /* 1px边框 */
    color: var(--text-primary);
    /* 主文字颜色 */
    padding: 0.6rem 1rem;
    /* 内边距：上下0.6rem，左右1rem */
    border-radius: 8px;
    /* 圆角8px */
    cursor: pointer;
    /* 鼠标指针样式 */
    transition: all 0.3s ease;
    /* 所有属性平滑过渡 */
    font-size: 0.85rem;
    /* 字体大小0.85rem */
    white-space: nowrap;
    /* 文字不换行 */
    display: flex;
    /* flex布局 */
    align-items: center;
    /* 垂直居中 */
    gap: 0.4rem;
    /* 子元素间距0.4rem */
}

/* 清除筛选按钮悬停效果 */
.clear-filters-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    /* 悬停时背景更亮 */
    border-color: var(--accent);
    /* 边框变为强调色 */
}

/* 中英文文本切换 - 清除按钮 */
.clear-text-en,
.clear-text-cn {
    display: none;
    /* 默认隐藏 */
}

/* 英文模式显示英文 */
html[lang="en"] .clear-text-en,
body[data-lang="en"] .clear-text-en {
    display: inline;
    /* 显示英文 */
}

/* 中文模式显示中文 */
html[lang="cn"] .clear-text-cn,
body[data-lang="cn"] .clear-text-cn {
    display: inline;
    /* 显示中文 */
}

/* 如果没有设置语言，默认显示英文 */
.clear-text-en {
    display: inline;
    /* 默认显示英文 */
}

/* 中文模式时隐藏英文 */
body[data-lang="cn"] .clear-text-en {
    display: none;
}

/* ===== 内联搜索区域样式（放在职位列表上方） ===== */

/* 内联搜索区域容器 */
.search-section-inline {
    padding: 1.5rem 1.5rem 0.5rem 1.5rem !important;
    margin-bottom: 0 !important;
    /* 强制增加内边距，绝对避免紧贴容器顶部和左侧边缘 */
}

/* 内联搜索框容器 */
.search-section-inline .search-box-container {
    display: flex;
    /* flex布局 */
    gap: 0.5rem;
    /* 更紧凑的间距 */
    margin-bottom: 0;
    /* 移除底部外边距 */
    width: 100%;
    /* 占满容器宽度 */
}

/* 内联搜索框 */
.search-section-inline .search-box {
    flex: 1;
    /* 占据大部分空间 */
}

/* 内联搜索输入框 */
.search-section-inline .search-input {
    padding: 0.7rem 0.7rem 0.7rem 2.2rem;
    /* 稍微减少内边距 */
    font-size: 0.9rem;
    /* 稍微减小字体 */
}

/* 内联搜索图标 */
.search-section-inline .search-icon {
    left: 0.7rem;
    /* 调整位置 */
}

/* 紧凑搜索按钮 */
.search-btn-compact {
    padding: 0.7rem 1rem !important;
    /* 更紧凑的内边距 */
    font-size: 0.9rem;
    /* 较小的字体 */
    min-width: auto;
    /* 移除最小宽度限制 */
}

/* 紧凑搜索按钮只显示图标 */
.search-btn-compact .fas {
    margin: 0;
    /* 移除图标边距 */
}

/* 隐藏紧凑按钮中的文字 */
.search-btn-compact span {
    display: none;
    /* 隐藏文字，只显示图标 */
}

.jobs-page .filters-container {
    margin: 1rem 0 1.2rem;
    padding: 0.9rem 1rem;
    border-radius: 14px;
    background: color-mix(in srgb, var(--card-bg) 84%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.12);
}

.jobs-page .search-input {
    min-height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--card-bg) 90%, transparent);
    border-color: color-mix(in srgb, var(--border) 80%, transparent);
    font-size: 0.95rem;
}

.jobs-page .search-input::placeholder {
    color: color-mix(in srgb, var(--text-secondary) 90%, transparent);
}

.jobs-page .search-btn {
    min-height: 44px;
    border-radius: 12px;
    background: var(--accent);
    color: #f8fafc;
    border: 1px solid color-mix(in srgb, var(--accent) 72%, #000000 28%);
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.14);
}

.jobs-page .search-btn:hover {
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.18);
}

.jobs-page .tag-filters {
    gap: 0.6rem;
}

.jobs-page .tag-btn {
    min-height: 36px;
    border-radius: 999px;
    padding: 0.42rem 0.9rem;
    background: color-mix(in srgb, var(--card-bg) 70%, transparent);
    border-color: color-mix(in srgb, var(--border) 75%, transparent);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
}

.jobs-page .tag-btn:hover {
    color: var(--text-primary);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border) 55%);
    background: color-mix(in srgb, var(--accent) 10%, var(--card-bg) 90%);
}

.jobs-page .tag-btn.active {
    color: #f8fafc;
    border-color: transparent;
    background: var(--accent);
}

.jobs-page .clear-filters-btn {
    min-height: 36px;
    border-radius: 999px;
    font-weight: 600;
    border-color: color-mix(in srgb, var(--border) 78%, transparent);
    background: color-mix(in srgb, var(--card-bg) 72%, transparent);
}

.jobs-page .clear-filters-btn:hover {
    border-color: color-mix(in srgb, #ef4444 50%, var(--border) 50%);
    color: #fca5a5;
}