/* 使用类选择器 .support-box-top */
.support-box-top {
    display: block;              /* 设置为块级元素 */
    width: 100%;                 /* 宽度铺满浏览器 */
    height: 500px;               /* 固定高度 */

    /* 使用多背景格式，优先加载 WebP，若不支持则加载 PNG */
    background-image: url('../images/support_top_bg.webp'), 
                      url('../images/support_top_bg.png');

    background-size: cover;       /* 背景图片铺满容器 */
    background-position: top center; /* 背景图片从上部开始对齐，水平居中 */
}

/* 头部标题 */
.support-box-top-1 {
    position: absolute; /* 允许自由定位 */
    top: 240px; /* 距离顶部 */
    left: 26.5%; /* 默认居中 */
    transform: translateX(-50%); /* 保持居中 */
    
    font-size: 15px; /* 可调字体大小 */
    font-weight: bold;
    color: #ffffff; /* 默认白色 */
    text-align: center;

    background-color: #ffcc00; /* 添加黄色背景 */
    padding: 5px 15px; /* 内边距，增加可读性 */
    border-radius: 20px; /* 圆角处理 */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* 轻微阴影，增加层次感 */
}

/* 头部副标题 */
.support-box-top-2 {
    position: absolute; /* 允许自由定位 */
    top: 300px; /* 距离顶部 20px */
    left: 30%; /* 默认居中 */
    transform: translateX(-50%); /* 保持居中 */
    font-size: 40px; /* 可调字体大小 */
    font-weight: bold;
    color: #ffffff; /* 默认白色 */
    text-align: center;
}

/* 其他头部内容 */
.support-box-top-3 {
    position: absolute;
    top: 370px; /* 继续下移 */
    left: 25.5%;
    transform: translateX(-50%);
    font-size: 16px;
    color: #c4c3c1; /* 黄色 */
    text-align: center;
}

/* 搜索框容器 */
.support-box-top-search {
    position: absolute; /* 允许自由定位 */
    top: 420px; /* 距离顶部 */
    left: 37%; /* 居中 */
    transform: translateX(-50%);
    
    display: flex; /* 让输入框和按钮在同一行 */
    align-items: center;
    background-color: #ffffff; /* 白色背景 */
    padding: 5px;
    border-radius: 10px; /* 圆角 */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* 轻微阴影 */
    width: 600px; /* 搜索框宽度 */
}

/* 输入框 */
.support-box-top-search input {
    flex: 1; /* 让输入框自动填充剩余空间 */
    border: none;
    outline: none;
    padding: 10px;
    font-size: 16px;
    border-radius: 20px;
}

/* 搜索按钮 */
.support-box-top-search button {
    background-color: #ffcc00; /* 按钮背景颜色 */
    border: none;
    padding: 10px 40px;
    margin-left: 5px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.3s ease;
}

/* 按钮悬停效果 */
.support-box-top-search button:hover {
    background-color: #ffdb4d; /* 变浅的黄色 */
}

/* 主容器：用于定位 FAQ 位置 */
.support-box-top-faq-container {
    position: absolute; /* 允许自由定位 */
    top: 240px; /* 距离顶部 */
    left: 67%;
    transform: translateX(-50%);
    width: 65%; /* 默认宽度，可调 */
    max-width: 450px;
    background-color: rgba(128, 128, 128, 0.5); /* 灰色背景，透明度 0.5 可调 */
    padding: 20px;
    border-radius: 10px; /* 圆角 */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* 轻微阴影 */
}

/* 标题容器 */
.support-box-top-faq-title {
    font-size: 24px; /* 标题字体大小 */
    font-weight: bold;
    color: #ffffff; /* 默认白色，可调 */
    text-align: left; /* 默认左对齐 */
    padding-left: 5px; /* 左侧距离可调 */
    padding-bottom: 10px;
}

/* 问题容器 */
.support-box-top-faq-question {
    background-color: rgba(128, 128, 128, 0.5); /* 初始灰色背景 */
    padding: 10px 15px;
    font-size: 18px;
    color: #ffffffd7;
    margin: 5px 0;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
}

/* 鼠标悬停变黄色 */
.support-box-top-faq-question:hover {
    background-color: #d4bb54; /* 变成黄色 */
}

/* 定义一个通用的 support-box 容器 */
.support-box-container {
    display: block;
    width: 100%; /* 横向铺满浏览器 */

    /* ✅ 让高度自适应内容 */
    height: auto; 
    
    background-color: #012550; /* 设置默认背景颜色，可修改 */
    padding: 20px; /* 增加内边距，防止内容贴边 */
}


/* ✅ 主容器，定位相对于上一个容器，并默认水平居中 */
.support-box-container-main {
    position: relative; /* 让主容器的定位基于父级（上一个容器） */
    width: 80%; /* 默认宽度，可调 */
    max-width: 1100px;
    height: 250px; /* 让容器足够高，确保不会出现滚动条 */
    min-height: 250px; /* 预防内容过少导致过窄 */

    background-color: rgba(128, 128, 128, 0.5); /* 灰色背景，透明度可调 */
    padding: 20px;
    border-radius: 12px; /* 圆角 */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* 轻微阴影 */
    overflow: hidden; /* **禁止滚动条出现** */

    /* ✅ 让容器水平居中 */
    margin: 20px auto 20px; /* 上边距 0，左右自动居中，下边距 40px（可调） */
}


/* ✅ 第一子容器：标题 */
.support-box-container-title {
    font-size: 24px; /* 标题字体大小，可调 */
    font-weight: bold;
    color: #ffffff; /* 默认白色，可调 */
    text-align: left; /* 文字左对齐 */
    padding-left: 20px; /* 靠左距离，可调 */
    margin-top: 15px; /* 上方间距可调 */
}

/* ✅ 第二子容器：小标题 */
.support-box-container-subtitle {
    font-size: 16px; /* 小标题文字大小可调 */
    color: #dddddd; /* 小标题颜色可调 */
    padding-left: 20px; /* 靠左距离可调 */
    margin-top: 15px; /* 上方间距可调 */
}

/* ✅ 第三子容器：提交请求按钮 */
.support-box-container-button {
    display: inline-block;
    background-color: #d4a017; /* 默认暗黄色 */
    color: #ffffff;
    font-size: 16px;
    padding: 10px 20px;
    border: none;
    border-radius: 8px; /* 圆角 */
    cursor: pointer;
    transition: background 0.3s ease;
    margin-left: 20px; /* 靠左距离可调 */
    margin-top: 40px; /* 上方间距可调 */
}

/* 按钮悬停变亮 */
.support-box-container-button:hover {
    background-color: #ffcc00; /* 变成亮黄色 */
}

/* ✅ 第四子容器：图片容器 */
.support-box-container-image {
    position: absolute; /* 相对主容器定位 */
    top: 40px; /* 上方距离可调，相对于主容器 */
    left: 620px; /* 左侧距离可调，相对于主容器 */
    
    width: 380px; /* 容器宽度可调 */
    height: 130px; /* 容器高度可调 */

}

/* ✅ 常见问题容器 */
.support-box-container-faq {
    width: 80%; /* 相对于主容器 80% */
    max-width: 1100px;
    height: auto; /* 高度可随内容自适应 */
    min-height: 150px; /* 设置最小高度，防止内容过少导致太窄 */
    
    margin-top: 0px; /* 相对于父容器的上边距，可调 */
    margin-bottom: 20px; /* 相对于父容器的下边距，可调 */
    
    padding: 0px; /* 内边距，防止内容紧贴边缘 */
    border-radius: 10px; /* 圆角 */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
    
    /* 水平居中 */
    margin-left: auto;
    margin-right: auto;
}

/* 控制图片不超过容器宽度 */
.support-box-container-faq img {
    max-width: 100%; /* 图片最大宽度与容器一致 */
    height: auto; /* 保持图片宽高比 */
    display: block; /* 避免图片下方出现多余间距 */
}

.support-box-container-faq ul {
    list-style-type: none; /* 去除默认的列表符号 */
    padding: 0;
}

.support-box-container-faq li {
    font-size: 18px; /* 问题文字大小 */
    color: #ece9e9; /* 字体颜色 */
    margin-bottom: 10px; /* 问题间距 */
    cursor: pointer; /* 改变鼠标样式为手形 */
    font-weight: bold;
    padding: 15px;
    background-color: rgba(54, 53, 53, 0.5); /* 问题背景 */
    border-radius: 5px;
    transition: background 0.3s ease;
}

.support-box-container-faq li:hover {
    background-color: rgba(136, 133, 133, 0.8); /* 鼠标悬停时变色 */
}

/* 修改后的隐藏答案样式 */
.support-box-container-faq .answer {
    display: none;
    font-size: 16px;
    line-height: 1.6; /* 设置行高，提高可读性 */
    color: #333; /* 调整字体颜色为更深的灰色 */
    margin-top: 8px; /* 稍微增加与问题之间的距离 */
    padding: 12px; /* 增加内边距 */
    background: rgba(245, 245, 245, 0.9); /* 调整背景色为更亮的灰白 */
    border-left: 4px solid #0055aa; /* 调整左侧边框颜色为更深的蓝色 */
    border-radius: 6px; /* 稍微增大圆角 */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05); /* 添加轻微阴影 */
}

/* 控制答案中的图片不超过容器宽度 */
.support-box-container-faq .answer img {
    max-width: 100%; /* 图片最大宽度与答案容器一致 */
    height: auto; /* 保持图片宽高比 */
    display: block; /* 避免图片下方出现多余间距 */
}

/* ✅ 新增问题样式 */
.support-box-container-faq-q {
    font-size: 18px; /* 问题文字大小 */
    color: #ece9e9; /* 字体颜色 */
    margin-bottom: 10px; /* 问题间距 */
    cursor: pointer; /* 改变鼠标样式为手形 */
    font-weight: bold;
    padding: 15px;
    background-color: rgba(54, 53, 53, 0.5); /* 问题背景 */
    border-radius: 5px;
    transition: background 0.3s ease; /* 背景颜色渐变过渡 */
}

/* 修改后的新增答案样式 */
.support-box-container-faq-a {
    font-size: 16px;
    line-height: 1.6; /* 设置行高，提高可读性 */
    color: #333; /* 调整字体颜色为更深的灰色 */
    margin-top: 8px; /* 稍微增加与问题之间的距离 */
    padding: 12px; /* 增加内边距 */
    background: rgba(245, 245, 245, 0.9); /* 调整背景色为更亮的灰白 */
    border-left: 4px solid #0055aa; /* 调整左侧边框颜色为更深的蓝色 */
    border-radius: 6px; /* 稍微增大圆角 */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05); /* 添加轻微阴影 */
}

/* 控制新增答案中的图片不超过容器宽度 */
.support-box-container-faq-a img {
    max-width: 100%; /* 图片最大宽度与答案容器一致 */
    height: auto; /* 保持图片宽高比 */
    display: block; /* 避免图片下方出现多余间距 */
}


/* 提交问题容器样式 */
.requests-support-box-submit-container {
    background-color: rgba(240, 240, 240, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    max-width: 1100px;
    margin: 20px auto;
}

.requests-support-box-submit-container h2 {
    text-align: center;
    margin-bottom: 20px;
    font-size: 22px;
    color: #333;
}

/* 表单标签 */
.requests-support-box-submit-container label {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: bold;
    color: #444;
}

/* 输入框 & 文本域 & 下拉框 */
.requests-support-box-submit-container input,
.requests-support-box-submit-container textarea,
.requests-support-box-submit-container select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
    transition: all 0.3s ease;
}

/* 聚焦时高亮 */
.requests-support-box-submit-container input:focus,
.requests-support-box-submit-container textarea:focus,
.requests-support-box-submit-container select:focus {
    border-color: #0077cc;
    outline: none;
    box-shadow: 0 0 5px rgba(0, 119, 204, 0.3);
}

/* 下拉框样式 */
.requests-support-box-submit-container select {
    appearance: none;
    background: white url('../images/down-arrow.png') no-repeat right 10px center;
    background-size: 14px;
    cursor: pointer;
}

/* 文本域优化 */
.requests-support-box-submit-container textarea {
    min-height: 120px;
    resize: vertical;
}

/* 提交按钮 */
.requests-support-box-submit-container button {
    width: 100%;
    padding: 12px;
    background-color: #0077cc;
    color: white;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s, transform 0.2s;
}

/* 按钮悬停效果 */
.requests-support-box-submit-container button:hover {
    background-color: #005fa3;
    transform: scale(1.02);
}

/* 响应式优化 */
@media (max-width: 768px) {
    .requests-support-box-submit-container {
        padding: 15px;
        max-width: 95%;
    }

    .requests-support-box-submit-container h2 {
        font-size: 20px;
    }

    .requests-support-box-submit-container button {
        font-size: 14px;
    }
}

/* 验证码容器，使输入框和验证码图片横向排列并上边对齐 */
.captcha-container {
    display: flex;
    align-items: flex-start;  /* 上边对齐 */
    gap: 10px;                /* 输入框和图片之间的间距 */
    width: 100%;
}

/* 验证码输入框 */
.captcha-container input {
    flex-grow: 1;             /* 让输入框占满剩余空间 */
    padding: 10px;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
    min-width: 150px;         /* 设置输入框的最小宽度 */
}

/* 验证码图片 */
.captcha-container img {
    height: 40px;             /* 图片高度 */
    cursor: pointer;         /* 鼠标悬停时显示为手形 */
    border-radius: 5px;
    border: 1px solid #ccc;
}

.message-box {
    padding: 10px;
    margin: 10px 0;
    border-radius: 5px;
    text-align: center;
}
.error-message {
    background-color: #ffebee;
    color: #c62828;
    border: 1px solid #c62828;
}
.success-message {
    background-color: #e8f5e9;
    color: #2e7d32;
    border: 1px solid #2e7d32;
}