/* --- 响应式样式 --- */

/* 调整滚动偏移量 */
@media (max-width: 768px) {
    html { scroll-padding-top: 65px; /* 平板时导航栏高度 */ }
    .content-section:target, .info-column #help-guide:target { padding-top: 80px; margin-top: -65px; }
}
@media (max-width: 480px) {
     html { scroll-padding-top: 60px; /* 手机时导航栏高度 */ }
     .content-section:target, .info-column #help-guide:target { padding-top: 75px; margin-top: -60px; }
}

/* 大型平板和小笔记本 */
@media (max-width: 1024px) {
    .container { max-width: 960px; }
    .form-column { flex: 0 0 60%; max-width: 60%; } /* 左列变宽 */
    .info-column { flex: 0 0 calc(40% - 30px); max-width: calc(40% - 30px); }
    .logo-text { font-size: 1.2em; }
     .header-nav a { padding: 8px 12px; font-size: 0.95em;}
     .tab-button { padding: 14px 25px; font-size: 1.05em; } /* 调整Tab按钮 */
     .amount-btn { width: 85px; } /* 调整金额按钮宽度 */
     .submit-btn { font-size: 1.15em; padding: 13px 20px; }
}

/* 平板 */
@media (max-width: 768px) {
    /* 列改为垂直堆叠 */
    .main-content-wrapper { flex-direction: column; gap: 25px; }
    .form-column, .info-column { flex: 1 1 auto; max-width: 100%; }
    /* 表单列样式调整 */
    .form-column { background-color: transparent; box-shadow: none; border-radius: 0;}
    .content-section { border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* 在 section 上加回阴影圆角 */ margin-bottom: 20px; /* 移动端增加 section 间距 */ }
    .tab-nav { border-radius: 8px 8px 0 0; /* Tab 导航顶部圆角 */ }


    header { padding: 8px 0; }
    .header-container { padding: 0 15px; }
    .logo-img { height: 35px; }
    .logo-text { font-size: 1.1em; }
    .header-nav { gap: 5px; }
    .header-nav a { padding: 6px 10px; font-size: 0.9em; }

    .tab-container { justify-content: space-around; }
    .tab-button { padding: 12px 15px; font-size: 1em; margin: 0; flex-grow: 1; text-align: center;}

    .content-section { padding: 20px; }
    .content-section h2 { font-size: 1.4em; }
    .info-column .help-section { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);} /* 帮助区域加上背景阴影 */
    .info-column .help-section h2 { font-size: 1.3em; }
    .info-column h3 { font-size: 1.1em; }

    .card-type-option { padding: 8px 10px; font-size: 0.95em; }
    .card-type-icon { margin-right: 5px; }
    .amount-btn { width: 80px; font-size: 0.9em; } /* 金额按钮宽度 */

     /* 验证码组 */
     .captcha-group input[type="text"] { min-width: 80px; flex-basis: auto; } /* 允许输入框缩小 */
     .captcha-display { font-size: 1.2em; padding: 6px 8px; letter-spacing: 2px; min-width: 70px;}
     .refresh-btn { padding: 7px 10px; font-size: 0.85em; }
     .submit-btn { font-size: 1.1em; padding: 12px 20px; margin-top: 20px;}
}

/* 手机 */
@media (max-width: 480px) {
    body { font-size: 15px; }
    .container { padding: 0 10px; }

    header { padding: 6px 0; }
    .header-container { padding: 0 10px; }
    .logo-img { height: 30px; margin-right: 10px; }
    .logo-text { font-size: 0.95em; }
    .header-nav { display: none; /* 隐藏导航 */ }

    .tab-container { }
    .tab-button { padding: 10px 5px; font-size: 0.95em; } /* 缩小 Tab 内边距和字号 */
    .icon-tab { margin-right: 4px; font-size: 0.9em;} /* 缩小 Tab 图标 */


    .main-content-wrapper { gap: 15px; padding-top: 15px; padding-bottom: 15px; } /* 调整主区域边距 */
    .content-section { padding: 15px; border-radius: 5px; margin-bottom: 15px; }
    .content-section h2 { font-size: 1.2em; margin-bottom: 20px; padding-bottom: 10px;} /* 调整标题 */
    .icon-title { font-size: 1em; margin-right: 8px; } /* 调整标题图标 */

    input[type="text"], input[type="password"], input[type="tel"] { padding: 10px 12px; font-size: 0.95em; }

    /* 卡片类型选择器垂直排列 */
    .card-type-selector { flex-direction: column; gap: 8px; }
    .card-type-option { font-size: 0.9em; }

    /* 验证码组: 允许元素换行堆叠 */
    .captcha-group { flex-wrap: wrap; /* 默认允许换行 */ }
    .captcha-group label { flex-basis: 100%; margin-bottom: 5px; /* Label 占一行 */ }
    .captcha-group input[type="text"] {
        flex-grow: 1; /* 输入框占据剩余空间 */
        flex-basis: calc(100% - 150px); /* 尝试给输入框一个基础宽度，减去大致的验证码和按钮宽度 */
        min-width: 100px; /* 最小宽度 */
        margin-bottom: 8px; /* 如果换行，增加底部间距 */
    }
    .captcha-display {
        font-size: 1.1em; padding: 5px 8px; letter-spacing: 2px; min-width: 70px; /* 缩小验证码显示 */
        margin-bottom: 8px;
    }
    .refresh-btn {
        padding: 6px 10px; font-size: 0.85em; margin-bottom: 8px;
        flex-shrink: 0; /* 防止按钮被过度压缩 */
    }

    /* 金额按钮 */
    .amount-options { gap: 8px; }
    .amount-btn { width: 75px; padding: 6px 5px; font-size: 0.85em; } /* 缩小金额按钮 */

    /* 提交按钮 */
    .submit-btn { font-size: 1.05em; padding: 11px 15px; margin-top: 20px;}
    .icon-submit { font-size: 0.9em; margin-right: 5px; } /* 缩小提交按钮图标 */


    /* 补充信息块 */
    .form-extra-info { margin-top: 25px; padding-top: 20px; }
    .info-block { padding: 12px 15px; margin-bottom: 15px; }
    .info-block h3 { font-size: 1.05em; margin-bottom: 8px; }
     .info-block li, .info-block p { font-size: 0.95em; }

    /* 帮助信息栏 */
    .info-column .help-section { padding: 15px; }
    .info-column .help-section h2 { font-size: 1.2em; margin-bottom: 15px; }
    .info-column h3 { font-size: 1.1em; margin-bottom: 10px; }
    .info-column ul { margin-left: 15px; }

    /* 页脚 */
    footer { padding: 20px 0; font-size: 0.85em; }
    footer .disclaimer { font-size: 0.8em; }
}