#search-icon {
    font-size: 1.2rem; /* 放大图标 */
}

/* --- 核心：搜索遮罩层样式 --- */

#search-overlay {
    /* 1. 默认隐藏 */
    display: none; 
    
    /* 2. 定位：固定在屏幕上，覆盖所有内容 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* 100% 视口宽度 */
    height: 100vh; /* 100% 视口高度 */
    
    /* 3. 背景：半透明黑色 */
    background-color: rgba(0, 0, 0, 0.85);
    
    /* 4. Z-index：确保在最顶层 */
    z-index: 9998;
    
    /* 5. 使用 Flexbox 将搜索框垂直和水平居中 */
    display: flex;
    justify-content: center;
    align-items: center;

    /* 默认隐藏 (将由 JS 切换) */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* 当遮罩层被激活时 (JS 3中3免费资料网站添加这个 .visible 类) */
#search-overlay.visible {
    opacity: 1;
    visibility: visible;
}

/* 搜索表单容器 */
.search-form-container {
    width: 90%;
    max-width: 600px; /* 限制最大宽度 */
}

.search-form-container form {
    display: flex; /* 让输入框和按钮在同一行 */
    width: 100%;
}

/* 搜索输入框 */
.search-form-container input[type="text"] {
    flex-grow: 1; /* 占据剩余空间 */
    padding: 18px 25px;
    font-size: 1.2rem;
    border: none;
    border-radius: 5px 0 0 5px; /* 左侧圆角 */
    outline: none; /* 移除点击时的轮廓 */
}

/* 搜索按钮 */
.search-form-container button[type="submit"] {
    padding: 0 25px;
    font-size: 1.2rem;
    background-color: #007bff; /* 搜索按钮颜色 */
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 0 5px 5px 0; /* 右侧圆角 */
    transition: background-color 0.2s;
}

.search-form-container button[type="submit"]:hover {
    background-color: #0056b3;
}

/* 关闭按钮 (X) */
#close-search {
    position: absolute;
    top: 30px;
    right: 40px;
    font-size: 3rem; /* 增大 "X" */
    color: white;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 9999;
    opacity: 0.8;
}
#close-search:hover {
    opacity: 1;
}

/* * 1. 明确指定 #search-icon (<a> 标签) 的大小
 */
#search-icon {
    /* * 将 <a> 标签变为 "块级" 元素，这样它才能接受 width 和 height 
     */
    display: inline-block; 
    
    /* * 设置一个明确的宽度和高度
     * (这个尺寸应该和您 search.png 图片的期望显示尺寸一致)
     */
    width: 16px;   /* 示例宽度，您可以修改 */
    height: 16px;  /* 示例高度，您可以修改 */

    /* (可选) 帮助在导航栏中垂直对齐 */
    vertical-align: middle; 
}

/* * 2. 确保 <a> 标签内的图片 <img> 填充满 <a> 标签
 */
#search-icon img {
    width: 100%;  /* 填充 <a> 的 24px 宽度 */
    height: 100%; /* 填充 <a> 的 24px 高度 */
    
    /* (可选) 确保图片显示为块级，防止底部有奇怪的空隙 */
    display: block; 
}