/* --- 基本重置和全局样式 --- */
* {
    box-sizing: border-box; /* 让 padding 和 border 不会增加元素总宽度 */
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth; /* 页面内锚点平滑滚动 */
    scroll-padding-top: 75px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; /* 优先使用系统默认字体 */
    line-height: 1.7; /* 行高 */
    color: #333; /* 默认文字颜色 */
    background-color: #f4f7f6; /* 页面背景色 */
    font-size: 16px; /* 基础字号 */
    display: flex;
    flex-direction: column; /* 让页脚可以固定在底部 */
    min-height: 100vh; /* 最小高度为视口高度 */
}

/* 内容容器，限制最大宽度并居中 */
.container {
    width: 100%;
    max-width: 1200px; /* 页面最大宽度 */
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px; /* 左右内边距 */
}

/* 链接默认样式 */
a {
    color: #1a73e8; /* 链接颜色 */
    text-decoration: none; /* 去掉下划线 */
}
a:hover {
    text-decoration: underline; /* 悬停时显示下划线 */
}

/* 图片默认样式 */
img {
    max-width: 100%; /* 图片最大宽度不超过父元素 */
    height: auto; /* 高度自适应 */
    display: block; /* 避免图片下方出现额外空隙 */
}

/* --- 顶部固定导航栏 --- */
header {
    background-color: #fff; /* 白色背景 */
    color: #333;
    padding: 10px 0; /* 上下内边距 */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* 底部阴影 */
    border-bottom: 1px solid #eee; /* 底部边框 */
    position: sticky; /* 吸顶效果 */
    top: 0; /* 固定在顶部 */
    width: 100%;
    z-index: 1001; /* 确保在最上层 */
}
.header-container {
    display: flex; /* Flex 布局 */
    align-items: center; /* 垂直居中 */
    justify-content: space-between; /* Logo 居左，导航居右 */
}
.logo-link { display: flex; align-items: center; text-decoration: none; color: inherit; }
.logo-img { height: 40px; width: auto; margin-right: 15px; }
.logo-text { font-size: 1.4em; font-weight: 600; color: #c81623; /* 京东红 */ }

/* 头部右侧导航链接 */
.header-nav { display: flex; gap: 10px; }
.header-nav a {
    color: #333; padding: 8px 15px; text-decoration: none;
    font-weight: 500; font-size: 1em; border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.header-nav a:hover,
.header-nav a:focus {
    background-color: #f0f0f0; color: #c81623; text-decoration: none;
}

/* --- 表单切换 Tab 导航 (位于表单列顶部) --- */
.tab-nav {
    background-color: #f8f8f8; /* 背景色 */
    border-bottom: 1px solid #ddd; /* 底部分隔线 */
    margin-bottom: 0; /* 移到表单列后，不再需要底部外边距 */
    border-top-left-radius: 8px; /* 匹配表单区域的圆角 */
    border-top-right-radius: 8px;
}
.tab-container {
    display: flex; /* 让按钮水平排列 */
    /* justify-content: flex-start; */ /* 默认从左开始排列 */
}
.tab-button {
    flex-grow: 1; /* 让按钮平分宽度 */
    text-align: center; /* 文本居中 */
    padding: 15px 20px; /* 增加垂直内边距 */
    font-size: 1.1em; /* 调整字号 */
    font-weight: 600;
    background-color: transparent;
    border: none;
    border-bottom: 4px solid transparent; /* 用于激活状态的下边框 */
    color: #555; /* 非激活状态颜色 */
    cursor: pointer;
    transition: color 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
    border-radius: 0; /* Tab 不需要圆角 */
     /* 为第一个和最后一个按钮应用顶部圆角 */
    /* &:first-child { border-top-left-radius: 8px; } */
    /* &:last-child { border-top-right-radius: 8px; } */
}
/* 单独设置圆角避免 flex 平分宽度问题 */
#tab-query { border-top-left-radius: 8px; }
#tab-recharge { border-top-right-radius: 8px; }

.tab-button:hover {
    color: #c81623;
    background-color: #eee; /* 悬停背景 */
}
.tab-button.active {
    color: #c81623; /* 激活颜色 */
    border-bottom-color: #c81623; /* 激活下边框 */
    background-color: #fff; /* 激活时确保背景为白色，与表单区域融合 */
}
.icon-tab { /* Tab 内图标样式 */
    margin-right: 6px;
}


/* --- 主内容区布局 --- */
.main-content-wrapper { display: flex; gap: 30px; flex-grow: 1; padding-top: 30px; padding-bottom: 30px;} /* 增加上下 padding */
.form-column { flex: 0 0 55%; max-width: 55%; background-color: #fff; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); overflow: hidden;} /* 表单列加背景和圆角 */
.info-column { flex: 0 0 calc(45% - 30px); max-width: calc(45% - 30px); }

/* --- 内容区域通用样式 --- */
/* .content-section 的背景和阴影移到 .form-column */
.content-section { display: none; padding: 30px; }
/* 锚点跳转目标区域的偏移量 */
.content-section:target { padding-top: 90px; margin-top: -75px; }
.content-section.active { display: block; } /* 显示激活区域 */
.content-section h2 {
    display: flex; /* 图标和文字对齐 */
    align-items: center;
    text-align: left; margin-bottom: 30px; /* 加大标题下间距 */
    color: #c81623; font-size: 1.5em; /* 调整标题字号 */
    font-weight: 600; border-bottom: 1px solid #eee; padding-bottom: 15px; /* 加大分割线间距 */
}
.icon-title { /* 标题图标样式 */
    margin-right: 10px;
    font-size: 1.1em; /* 图标相对标题的大小 */
    color: inherit; /* 继承标题颜色 */
}

/* --- 表单通用样式 --- */
form { max-width: 100%; margin: 0; }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 8px; font-weight: 500; color: #444; }
input[type="text"], input[type="password"], input[type="tel"] { width: 100%; padding: 12px 15px; border: 1px solid #ccc; border-radius: 5px; font-size: 1em; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
input[type="text"]:focus, input[type="password"]:focus, input[type="tel"]:focus { border-color: #c81623; outline: none; box-shadow: 0 0 0 2px rgba(200, 22, 35, 0.2); }
input.invalid { border-color: #e74c3c !important; }
input.invalid:focus { box-shadow: 0 0 0 2px rgba(231, 76, 60, 0.2); }
.error-message { color: #e74c3c; font-size: 0.85em; margin-top: 5px; min-height: 1.2em; }

/* --- E卡类型选择器样式 --- */
.card-type-selector { display: flex; gap: 15px; margin-top: 5px; }
.card-type-option {
    flex: 1; display: flex; align-items: center; justify-content: center;
    padding: 10px 15px; border: 2px solid #ccc; border-radius: 6px;
    background-color: #f9f9f9; cursor: pointer; transition: all 0.3s ease;
    text-align: center; font-size: 1em; color: #555;
}
.card-type-option:hover { border-color: #aaa; background-color: #f0f0f0; }
.card-type-option.selected {
    border-color: #c81623; background-color: #fff; color: #c81623;
    box-shadow: 0 0 5px rgba(200, 22, 35, 0.3); font-weight: 600;
}
.card-type-icon {
    margin-right: 8px; font-size: 1.1em; /* 图标大小 */
    width: 1.2em; /* 固定宽度防止抖动 */
    text-align: center; /* 图标居中 */
}
/* .card-type-text { } */


/* --- 验证码组样式 --- */
.captcha-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.captcha-group input[type="text"] { flex-grow: 1; min-width: 100px; }

/* 验证码显示区域样式 (含干扰线背景) */
.captcha-display {
    display: inline-block; padding: 5px 10px;
    font-family: 'Courier New', Courier, monospace; font-size: 1.4em; font-weight: bold;
    color: #c81623; letter-spacing: 4px; user-select: none; vertical-align: middle;
    cursor: pointer; min-width: 90px; text-align: center; border-radius: 4px;
    background-color: #f0f0f0; /* 背景色 */
    /* 干扰线背景 */
    background-image:
        linear-gradient(135deg, rgba(180, 180, 180, 0.4) 1px, transparent 1px),
        linear-gradient(-135deg, rgba(180, 180, 180, 0.4) 1px, transparent 1px),
        linear-gradient(45deg, rgba(150, 150, 150, 0.3) 1px, transparent 1px),
        linear-gradient(-45deg, rgba(150, 150, 150, 0.3) 1px, transparent 1px);
    background-size: 6px 6px, 6px 6px, 4px 4px, 4px 4px;
    background-position: 0 0, 3px 3px, 0 0, 2px 2px;
    border: 1px solid #ccc; /* 边框 */
    position: relative; /* 用于可能的伪元素 */
    overflow: hidden; /* 隐藏超出边界的干扰点 */
}
/* 可选：添加干扰点 (伪元素) */
/* .captcha-display::before, .captcha-display::after { ... } */


/* 刷新按钮 */
.refresh-btn {
    padding: 8px 10px; /* 调整 padding */
    background-color: #e9e9e9; border: 1px solid #ccc; border-radius: 5px;
    cursor: pointer; font-size: 1em; /* 增大图标字号 */
    color: #555; transition: background-color 0.3s ease;
    white-space: nowrap; vertical-align: middle;
    line-height: 1; /* 确保图标垂直居中 */
}
.refresh-btn:hover { background-color: #dcdcdc; }
.refresh-btn i { /* 如果按钮内嵌图标 */
   margin: 0; /* 图标按钮不需要额外 margin */
}

/* --- 面额选择按钮 (圆角矩形，固定宽度) --- */
.amount-options { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.amount-btn {
    padding: 8px 5px; /* 内边距调整 */
    width: 90px; /* 固定宽度 */
    text-align: center; /* 文本居中 */
    background-color: #fff; border: 1px solid #ccc;
    border-radius: 6px; /* 圆角大小 */
    cursor: pointer; font-size: 0.95em; color: #555;
    transition: all 0.3s ease;
    white-space: nowrap; /* 防止文字换行 */
}
.amount-btn:hover { border-color: #c81623; color: #c81623; }
.amount-btn.selected { background-color: #c81623; color: #fff; border-color: #c81623; font-weight: 600; }

/* --- 提交按钮 (增强) --- */
.submit-btn {
    display: flex; /* 使用 Flexbox 对齐图标和文字 */
    align-items: center;
    justify-content: center;
    width: 100%; padding: 14px 20px;
    background-color: #c81623; color: #fff; border: none; border-radius: 5px;
    font-size: 1.2em; font-weight: 600; cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, transform 0.1s ease;
    margin-top: 25px; box-shadow: 0 3px 6px rgba(0,0,0,0.15); letter-spacing: 1px;
}
.icon-submit { /* 提交按钮图标 */
    margin-right: 8px;
}
.submit-btn:hover { background-color: #a7000e; box-shadow: 0 5px 10px rgba(0,0,0,0.2); }
.submit-btn:active { transform: translateY(1px); box-shadow: 0 2px 4px rgba(0,0,0,0.15); }
.submit-btn:disabled { background-color: #f8b4bc; cursor: not-allowed; opacity: 0.7; box-shadow: none; transform: none;}

/* 结果占位符 */
.result-placeholder { min-height: 20px; margin-top: 15px; }

/* --- 查询表单下方补充信息 --- */
.form-extra-info { margin-top: 35px; padding-top: 25px; border-top: 1px dashed #eee; }
.info-block { background-color: #f9f9f9; border: 1px solid #eee; border-radius: 5px; padding: 15px 20px; margin-bottom: 20px; }
.info-block:last-child { margin-bottom: 0; }
.info-block h3 { font-size: 1.1em; color: #555; margin-bottom: 10px; font-weight: 600; display: flex; align-items: center; }
.info-icon { /* 信息块标题图标 */
    margin-right: 8px; color: #c81623; /* 图标颜色 */
    font-size: 1.1em; /* 图标大小 */
    width: 1.3em; /* 固定宽度 */
    text-align: center;
}
.info-block.warning .info-icon { color: #e65100; } /* 警告信息图标颜色 */

.info-block ol { margin-left: 5px; padding-left: 20px; margin-bottom: 10px; }
.info-block li { margin-bottom: 5px; color: #444; }
.info-block p { color: #444; line-height: 1.6; }
.info-block p a { font-weight: 500; }
.info-block.warning { background-color: #fff8e1; border-color: #ffe57f; }
.info-block.warning h3 { color: #e65100; }
.info-block.warning p { color: #616161; }

/* --- 右侧帮助信息栏 --- */
.info-column .help-section { background-color: #fff; padding: 25px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); height: fit-content; }
.info-column #help-guide:target { padding-top: 90px; margin-top: -75px; } /* 锚点跳转偏移 */
.info-column .help-section h2 { display: flex; align-items: center; text-align: left; margin-bottom: 20px; color: #333; font-size: 1.4em; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.info-column article { margin-bottom: 25px; }
.info-column article:last-child { margin-bottom: 0; }
.info-column h3 { margin-bottom: 10px; color: #c81623; font-size: 1.2em; padding-bottom: 5px; display: flex; align-items: center; }
.info-column h3 .info-icon { /* 帮助栏标题图标 */
   margin-right: 8px; color: inherit; /* 继承标题颜色 */ font-size: 1em; width: 1.2em; text-align: center;
}
.info-column ul { list-style: disc; margin-left: 20px; padding-left: 5px; }
.info-column li { margin-bottom: 8px; }
.info-column strong { font-weight: 600; color: #444; }

/* --- 页脚 --- */
footer { margin-top: 40px; padding: 25px 0; text-align: center; background-color: #e9e9e9; color: #666; font-size: 0.9em; border-top: 1px solid #ddd; width: 100%; }
footer p { margin-bottom: 8px; }
footer .disclaimer { font-size: 0.85em; color: #888; max-width: 700px; margin-left: auto; margin-right: auto; padding: 0 15px; }
footer a { color: #555; }
footer a:hover { color: #c81623; }

/* 通用图标基础样式 (如果使用 Font Awesome 等库) */
i[class^="fa"] { /* 示例：针对 Font Awesome */
   line-height: inherit; /* 继承行高 */
   vertical-align: middle; /* 尝试垂直对齐 */
}