/*
 * === Master Core Stylesheet for 006w.com Member Center ===
 * Designer: Yecha (Original Styles)
 * Re-architect & Responsive Integration: Gemini AI
 * Date: 2025-08-29
*/

/* === Part 1: Foundation & Variables === */
:root {
    --brand-color-blue: #0285BD;
    --brand-color-blue-dark: #005B93;
    --brand-color-footer: #259ACD;
    --brand-color-green: #79be1e;
    --brand-color-green-dark: #345903;
    --brand-color-gray: #a9adb1;
    --brand-color-link-hover: #0E4470;
    --font-family-main: Verdana, 'Microsoft Yahei', '宋体', sans-serif;
    --font-family-yh: "微软雅黑";
}

body, html { margin: 0; padding: 0; font-family: var(--font-family-main); font-size: 13px; color: #333; }
a { color: #7f7f7f; text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--brand-color-link-hover); }
ul { list-style-type: none; margin:0; padding:0; }
.yh { font-family: var(--font-family-yh); }

/* === Part 2: Layout & Structure === */
.container { max-width: 1100px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; }
.card { background-color: rgba(255, 255, 255, 0.95); border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); margin-bottom: 20px; }
.member-container { display: flex; align-items: flex-start; padding-top: 20px; gap: 20px; }
.member-sidebar { width: 270px; flex-shrink: 0; }
.member-content { flex-grow: 1; min-width: 0; padding: 25px; }
#mobile-menu-toggle { display: none; font-size: 24px; cursor: pointer; color: #fff; }

/* === Part 3: Components & Details (The "Jingzhuangxiu") === */

/* --- Header --- */
.member-header { background-color: var(--brand-color-blue); padding: 10px 0; border-bottom: 1px solid #6CB8D9; box-shadow: 0 1px 1px rgba(0,0,0,0.1); }
.member-header .container { display: flex; justify-content: space-between; align-items: center; }
.member-header .logo { font-size: 22px; font-weight: bold; color: #fff; text-decoration: none; text-shadow: var(--brand-color-blue-dark) 0 1px 0; }
.member-header .user-menu a { color: #fff; text-decoration: none; margin-left: 20px; text-shadow: var(--brand-color-blue-dark) 0 1px 0; }

/* --- Dynamic Background --- */
body { background-color: #b7e3c1; /* Fallback color */ }

/* --- Sidebar: User Profile --- */
.user-profile { padding: 18px; text-align: center; }
.user-profile .profile-header-link { text-decoration: none; color: inherit; }
.user-profile .avatar { width: 80px; height: 80px; padding: 2px; border: 1px solid #93CF20; border-radius: 50%; }
.user-profile .username { margin: 10px 0 5px; font-size: 18px; font-family: var(--font-family-yh); }
.user-stats { display: flex; justify-content: space-around; padding-top: 15px; border-top: 1px solid #f0f0f0; margin-top: 15px; }
.user-stats .stat-item a { color: #7f7f7f; }
.user-stats strong { display: block; font-size: 14px; color: #669900; font-weight: normal; }
.user-stats span { font-size: 12px; }
.profile-actions { display: flex; justify-content: space-between; margin-top: 15px; gap: 10px; }

/* --- Sidebar: Navigation Menu --- */
.member-nav { padding: 10px; }
.member-nav li a { font-size: 14px; display: block; text-decoration: none; color: #333; height: 40px; line-height: 40px; border-radius: 4px; background: url(/yecha/menubg.jpg) 0 -40px no-repeat; transition: all 0.2s; }
.member-nav li a:hover, .member-nav li a.active { background-position: 0 0; color: #fff; }
.member-nav .icon-nav { display: inline-block; width: 30px; height: 40px; float: left; margin-left: 30px; background-image: url(/yecha/hyico.png); background-repeat: no-repeat; vertical-align: middle; }
.icon-zx { background-position: -24px 0; }
.icon-xx { background-position: -28px -40px; }
.icon-tg { background-position: -26px -80px; }
.icon-kj { background-position: -26px -120px; }
.icon-jf { background-position: -25px -160px; }
.icon-sc { background-position: -26px -200px; }
.icon-out { background-position: -26px -240px; }
.icon-fav { background-position: -25px -280px; }
.icon-fri { background-position: -26px -320px; }

/* --- Main Content Area --- */
.hy_nav { width: 100%; height: 35px; line-height: 35px; border-bottom: 1px solid #D9D9D9; margin-bottom: 25px; }
.hy_nav li { float: left; }
.hy_nav li a { display: block; padding: 0 20px; }
.hy_nav li a.selected { background: var(--brand-color-footer); color: #fff; border-radius: 8px 8px 0 0; }

.setting { padding-top: 20px; }
.setting li { margin-bottom: 20px; line-height: 22px; display: flex; align-items: center; }
.setting li label { color: #666; font-size: 14px; text-align: right; width: 100px; padding-right: 12px; flex-shrink: 0; }
.setting li input[type='text'], .setting li textarea { flex-grow: 1; }

/* --- Buttons (from button.css) --- */
.button { font-size:15px; text-shadow:1px 1px 0 rgba(255, 255, 255, 0.4); text-decoration:none !important; display:inline-block; vertical-align:baseline; position:relative; cursor:pointer; padding:8px 25px; background-repeat:no-repeat; border-radius:4px; box-shadow:0 0 1px #fff inset; transition: all 0.2s; border:1px solid; }
.button:active { transform: translateY(1px); }
.blue.button { color:#0f4b6d !important; border-color:#84acc3 !important; background-color: #48b5f2; }
.blue.button:hover { background-color:#63c7fe; }
.green.button { color:#345903 !important; border-color:#96a37b !important; background-color: #79be1e; }
.green.button:hover { background-color:#89d228; }
.gray.button { color:#525252 !important; border-color:#a5a5a5 !important; background-color: #a9adb1; }
.gray.button:hover { background-color:#b6bbc0; }
.button.small { font-size:13px; padding: 6px 15px; }

/* --- Input Fields (from Common.css) --- */
input[type="text"], input[type="password"], textarea {
    padding: 8px 10px; font-size: 14px; line-height: 1.5; border: 1px solid #C1C1C1; background-color: white; color: #333; border-radius: 3px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1); transition: all .2s ease; box-sizing: border-box; width: 100%;
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus { background-color: #FDFBF0; border-color: var(--brand-color-blue); outline: none; }

/* --- Footer --- */
.member-footer { text-align: center; padding: 20px 0; color: #A5D5EA; font-size: 13px; margin-top: 20px; background: var(--brand-color-footer); border-top: 5px solid #fff; text-shadow: #4e7f96 0 1px 0; }
.member-footer a { color: #A5D5EA; }
.member-footer a:hover { color: #fff; }

/* === Part 4: Responsive Adaptation === */
@media (max-width: 992px) {
    .member-container { flex-direction: column; }
    .member-sidebar { width: 100%; }
}
@media (max-width: 768px) {
    .member-header .user-menu { display: none; }
    #mobile-menu-toggle { display: block; }
    .member-sidebar { display: none; /* 默认隐藏，通过点击按钮显示 */ }
    .member-sidebar.open { display: block; }
    .setting li { flex-direction: column; align-items: flex-start; }
    .setting li label { text-align: left; margin-bottom: 5px; width: auto; }
}
/* === Part 5: Additional Components for Inner Pages === */

/* --- 内页顶部导航 (hy_nav) --- */
.hy_nav {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1px solid #e9eef3;
    margin-bottom: 25px;
    padding-bottom: 10px;
}
.hy_nav li a {
    display: block;
    padding: 8px 15px;
    margin-right: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    font-size: 14px;
    color: #555;
    text-decoration: none;
    background-color: #f5f7fa;
}
.hy_nav li a:hover {
    background-color: #e9eef3;
    color: #333;
}
.hy_nav li a.selected {
    background-color: var(--brand-color-blue);
    color: #fff;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* --- 绑定信息卡片样式 --- */
.bind-card {
    border: 1px solid #e9eef3;
    border-radius: 6px;
    margin-bottom: 20px;
    overflow: hidden; /* 配合内部圆角 */
}
.bind-card-header {
    background-color: #f8f9fa;
    padding: 12px 20px;
    font-size: 16px;
    font-weight: bold;
    font-family: var(--font-family-yh);
    border-bottom: 1px solid #e9eef3;
}
.bind-card-body {
    padding: 20px;
}
.bind-card-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.bind-card-body li {
    display: flex;
    padding: 10px 0;
    border-bottom: 1px dashed #f0f0f0;
}
.bind-card-body li:last-child {
    border-bottom: none;
}
.bind-card-body li label {
    width: 80px;
    color: #888;
    flex-shrink: 0;
}
.bind-card-body li span {
    color: #333;
}
/* === Part 6: Dashboard & Info Components for Member CP === */

/* --- 数据卡片网格布局 --- */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); /* 响应式网格 */
    gap: 20px;
    margin-bottom: 25px;
}
.stat-card {
    background-color: #f8f9fa;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    border: 1px solid #e9eef3;
    transition: all 0.2s ease-in-out;
}
.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.stat-card .stat-label {
    font-size: 14px;
    color: #888;
    margin-bottom: 10px;
}
.stat-card .stat-value {
    font-size: 28px;
    font-weight: bold;
    color: var(--brand-color-blue);
    margin-bottom: 15px;
    font-family: var(--font-family-yh);
}
.stat-card .stat-action a {
    font-size: 13px;
    color: var(--brand-color-blue);
    text-decoration: none;
}
.stat-card .stat-action a:hover {
    text-decoration: underline;
}

/* --- 签到按钮 --- */
.qiandao-btn {
    display: inline-block;
    padding: 10px 30px;
    border-radius: 5px;
    text-align: center;
    color: white !important;
    font-size: 16px;
    text-decoration: none;
    margin: 20px auto;
    font-family: var(--font-family-yh);
}
.qiandao-btn.can-qiandao {
    background-color: var(--brand-color-green);
    cursor: pointer;
}
.qiandao-btn.has-qiandao {
    background-color: var(--brand-color-gray);
    cursor: not-allowed;
}

/* --- 优化一下信息列表 --- */
.setting.info-list li label {
    width: 100px; /* 稍微加宽，更协调 */
}
/* === Part 7: Modern Login Panel Components === */

/* --- 登录面板 --- */
.login-panel {
    max-width: 550px; /* <<< 增加面板最大宽度，提供更多空间 */
    margin: 30px auto;
    padding: 30px 40px;
    text-align: center;
}
.login-panel h2 {
    font-size: 24px;
    font-weight: 500;
    font-family: var(--font-family-yh);
    margin: 0 0 25px;
}

/* --- 登录表单 --- */
.login-form .setting li {
    flex-direction: row;
    align-items: center;
    margin-bottom: 20px; /* 加大行间距 */
}
.login-form .setting li label {
    width: 100px; /* <<< 稍微加宽标签宽度 */
    text-align: right;
    padding-right: 15px;
    flex-shrink: 0;
}
.login-form .input-wrapper {
    position: relative;
    flex-grow: 1;
}
.login-form .input-wrapper input {
    padding-right: 85px; /* <<< 为输入框内部留出空间给“忘记密码”链接 */
}
.login-form .additional-links {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    white-space: nowrap; /* 防止链接文字换行 */
}

/* --- 验证码区域 --- */
.captcha-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.captcha-group input {
    width: 120px;
}
.captcha-group #loginshowkey img {
    height: 43px;
    vertical-align: middle;
    cursor: pointer;
    border-radius: 4px;
}


/* --- 登录方式分隔 --- */
.login-divider {
    text-align: center;
    color: #aaa;
    margin: 25px 0;
    padding-left: 100px; /* 与label宽度+padding一致 */
    position: relative;
}
.login-divider span {
    background-color: rgba(255, 255, 255, 0.95); /* 与卡片背景色一致 */
    padding: 0 10px;
    position: relative;
    z-index: 1;
}
.login-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 100px; /* 与label宽度+padding一致 */
    right: 0;
    border-top: 1px solid #eee;
    z-index: 0;
}


/* === Part 8: Form Alignment Fixes === */

/* --- 用于包裹多个选项的容器 --- */
.option-group {
    display: flex;
    flex-wrap: wrap; /* 允许在小屏幕上换行 */
    align-items: center;
    flex-grow: 1; /* 让它自动撑满空间 */
    gap: 5px 15px; /* 垂直间距5px, 水平间距15px */
    font-size: 13px;
}
.option-group input[type="radio"] {
    margin-right: 3px;
}
.option-group label {
    font-weight: normal; /* 取消加粗 */
    cursor: pointer;
    width: auto !important; /* 覆盖通用的label宽度设置 */
    text-align: left !important;
    padding-right: 0 !important;
}

/* === Part 9: Responsive Adaptation (Continued) === */
@media (max-width: 992px) {
    .member-container { flex-direction: column; }
    .member-sidebar { width: 100%; }
}
@media (max-width: 768px) {
    .member-header .user-menu { display: none; }
    #mobile-menu-toggle { display: block; }
    .member-sidebar { display: none; }
    .member-sidebar.open { display: block; }

    .setting li, .login-form .setting li { flex-direction: column; align-items: flex-start; }
    .setting li label, .login-form .setting li label { text-align: left; margin-bottom: 5px; width: auto; }
    .login-form .additional-links { position: static; transform: none; text-align: left; margin-top: 5px; }
    
    .login-panel, .member-content { padding: 20px; }
    .login-divider, 
    .login-panel div[style*="padding-left: 100px"] {
        padding-left: 0;
    }
    .login-divider::before {
        left: 0;
    }
}
/* === Part 9: Form Element Enhancements === */

/* --- 美化 select 下拉菜单 --- */
select {
    padding: 8px 10px;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid #C1C1C1;
    background-color: white;
    color: #333;
    border-radius: 3px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all .2s ease;
    box-sizing: border-box;
    width: 100%; /* 默认撑满容器 */
    max-width: 300px; /* 但最大宽度不超过300px */
}
select:focus {
    background-color: #FDFBF0;
    border-color: var(--brand-color-blue);
    outline: none;
}
/* === Part 10: Modern Data Table Components === */

/* --- 表格容器，用于在小屏幕上实现横向滚动 --- */
.table-responsive {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #e9eef3;
    border-radius: 6px;
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px; /* 强制表格最小宽度，内容过长时出现滚动条 */
}
.data-table th, .data-table td {
    padding: 12px 15px;
    text-align: center;
    border-bottom: 1px solid #e9eef3;
}
.data-table thead th {
    background-color: #f8f9fa;
    font-weight: bold;
    color: #555;
    font-size: 14px;
}
/* --- 斑马条纹 --- */
.data-table tbody tr:nth-of-type(even) {
    background-color: #fdfdfd;
}
/* --- 悬停高亮 --- */
.data-table tbody tr:hover {
    background-color: #f5f7fa;
}

/* --- 分页容器 --- */
.table-pagination {
    margin-top: 20px;
    text-align: right;
}
/* === Part 11: Package Selection Components (精品卡片美化版) === */

/* --- 套餐选项的容器 (保持不变) --- */
.package-options {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 15px;
}

/* --- 让li成为flex容器 (保持不变) --- */
.package-options li {
    display: flex;
}

/* --- ★★★ 单个套餐卡片的样式 (核心美化) ★★★ --- */
.package-item {
    display: flex;
    flex-direction: column;
    padding: 20px;
    border: 2px solid #e9eef3;
    border-radius: 8px; /* 圆角更大更柔和 */
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    width: 100%;
    position: relative; /* 为“已选”角标提供定位 */
    overflow: hidden; /* 隐藏溢出的角标 */
    text-align: center;
}
.package-item:hover {
    transform: translateY(-3px); /* 悬停时轻微上浮 */
    border-color: var(--brand-color-blue);
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.package-item.selected {
    border-color: var(--brand-color-blue);
    background-color: #f0f8ff;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.1);
}

/* --- ★★★ 新增：“已选”角标样式 ★★★ --- */
.package-item .selected-checkmark {
    position: absolute;
    top: -1px;
    right: -1px;
    width: 0;
    height: 0;
    border-top: 30px solid var(--brand-color-blue);
    border-left: 30px solid transparent;
    transition: all 0.2s;
    opacity: 0; /* 默认隐藏 */
}
.package-item .selected-checkmark::after {
    content: '✔';
    position: absolute;
    top: -28px;
    right: 3px;
    color: white;
    font-size: 12px;
}
.package-item.selected .selected-checkmark {
    opacity: 1; /* 选中时显示 */
}

/* --- ★★★ 新增：价格样式 ★★★ --- */
.package-item .package-price {
    font-size: 28px;
    font-weight: bold;
    color: var(--brand-color-blue);
    font-family: var(--font-family-yh);
    margin-bottom: 5px;
    line-height: 1.2;
}
.package-item .package-price span.unit {
    font-size: 16px;
    font-weight: normal;
}

/* --- ★★★ 新增：赠送优惠样式 ★★★ --- */
.package-item .package-bonus {
    font-size: 14px;
    font-weight: bold;
    color: var(--brand-color-green);
    margin-bottom: 15px;
}

/* --- 标题的 radio 部分微调 --- */
.package-item .package-title {
    display: block;
    text-align: center;   /* Horizontally centers the text */
    padding-top: 10px;    /* Manually add some space from the top */
    padding-bottom: 10px; /* Manually add some space from the bottom */
    font-size: 16px;
    color: #333;
}

/* --- 描述部分的样式 (升级) --- */
.package-item .package-description {
    font-size: 13px;
    color: #888;
    line-height: 1.6;
    flex-grow: 1; /* 保持等高对齐 */
    /* 移除不必要的内边距 */
    padding-left: 0;
    margin-top: 0;
}
/* === Part 12: Action Bars & Management List Components === */

/* --- 顶部操作栏 --- */
.action-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* 在小屏幕上换行 */
    gap: 15px;
    margin-bottom: 20px;
}
.action-bar .filter-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* --- 底部批量操作栏 --- */
.batch-actions {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}
.batch-actions .pagination-area {
    flex-grow: 1;
}
.batch-actions .action-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}
.batch-actions .action-buttons select {
    width: auto; /* 让select宽度自适应内容 */
}
/* === Part 13: Status Indicator Components === */

/* --- 消息已读/未读状态标记 --- */
.msg-status {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}
.msg-status.unread {
    background-color: var(--brand-color-blue); /* 未读消息用醒目的蓝色 */
}
.msg-status.read {
    background-color: #ccc; /* 已读消息用灰色 */
}
.msg-title.unread a {
    font-weight: bold; /* 未读消息标题加粗 */
    color: #333;
}
/* === Part 14: Full-Width Form Row Layout === */

.setting li.full-width-row {
    flex-direction: column; /* 让label和内容垂直排列 */
    align-items: flex-start; /* 左对齐 */
}
.setting li.full-width-row .package-options-wrapper {
    width: 100%; /* 让内容区宽度为100% */
    margin-top: 10px; /* 与label之间增加一点间距 */
}
/* === Part 15: Public List Page Components === */

/* --- 列表顶部的搜索表单 --- */
.list-search-form {
    display: flex;
    align-items: center;
    gap: 10px;
}
.list-search-form input[type="text"] {
    width: 200px; /* 给搜索框一个合适的默认宽度 */
}
/* === Part 16: Space Template Selector Components === */

/* --- 模板选择列表，使用网格布局 --- */
.template-selector-grid {
    display: grid;
    /* 响应式网格：每列最小180px，自动填充，项目间距20px */
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* --- 单个模板卡片样式 --- */
.template-card {
    border: 2px solid #e9eef3;
    border-radius: 6px;
    text-align: center;
    transition: all 0.2s ease-in-out;
    overflow: hidden; /* 保证内部元素不超出圆角 */
}
.template-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}
.template-card.current {
    border-color: var(--brand-color-green);
    box-shadow: 0 0 10px rgba(121, 190, 30, 0.3);
}

.template-card .template-preview {
    display: block;
    background-color: #f5f7fa;
}
.template-card .template-preview img {
    width: 100%;
    height: 180px; /* 给一个固定的高度，让卡片更整齐 */
    object-fit: cover; /* 保证图片不变形 */
    display: block;
}
.template-card .template-info {
    padding: 15px;
}
.template-card .template-name {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 10px;
}
/* === Part 17: Guestbook/Comment Card Components === */

.gbook-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.gbook-item {
    background-color: #fff;
    border: 1px solid #e9eef3;
    border-radius: 6px;
    margin-bottom: 20px;
}
.gbook-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9eef3;
    font-size: 13px;
}
.gbook-meta {
    color: #888;
}
.gbook-meta a {
    font-weight: bold;
    color: #555;
}
.gbook-actions a {
    margin-left: 15px;
    color: var(--brand-color-blue);
    text-decoration: none;
}
.gbook-body {
    padding: 20px;
    line-height: 1.8;
    font-size: 15px;
}
.gbook-reply {
    margin-top: 15px;
    padding: 15px;
    background-color: #f5fafe;
    border-top: 2px solid #d0eaff;
    border-radius: 4px;
}
.gbook-reply strong {
    color: #FF0000;
}
/* === Part 18: Date Picker Input === */

/* --- 日期选择输入框样式 --- */
.Wdate {
    /* 继承我们漂亮的输入框样式 */
    padding: 8px 10px;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid #C1C1C1;
    background-color: white;
    color: #333;
    border-radius: 3px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all .2s ease;
    box-sizing: border-box;
}
.Wdate:focus {
    background-color: #FDFBF0;
    border-color: var(--brand-color-blue);
    outline: none;
}
/* === Part 19: Order Confirmation Page Components === */

.order-section {
    margin-bottom: 25px;
    border: 1px solid #e9eef3;
    border-radius: 6px;
    background-color: #fff;
}
.order-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #e9eef3;
}
.order-section-header h3 {
    margin: 0;
    font-size: 16px;
    font-family: var(--font-family-yh);
}
.order-section-body {
    padding: 20px;
}
/* 商品列表特殊表格 */
.order-product-list { width: 100%; border-collapse: collapse; }
.order-product-list th, .order-product-list td { padding: 10px; border-bottom: 1px solid #f0f0f0; text-align: center; }
.order-product-list th { background-color: #fdfdfd; }
.order-product-list .product-info { text-align: left; }

/* 配送/支付方式选项 */
.choice-option {
    border: 2px solid #e9eef3;
    border-radius: 6px;
    padding: 15px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s;
}
.choice-option:hover { background-color: #f5fafe; }
.choice-option.selected { border-color: var(--brand-color-blue); }
.choice-option input[type="radio"] { margin-right: 10px; }
.choice-option-header { font-weight: bold; }
.choice-option-fee { float: right; font-weight: bold; color: var(--brand-color-blue); }
.choice-option-desc { font-size: 12px; color: #888; margin-top: 5px; padding-left: 28px; }

/* 订单总计 */
.order-summary {
    text-align: right;
    line-height: 2;
}
.order-summary .total-amount {
    font-size: 22px;
    color: #f56c6c;
    font-weight: bold;
}
/*
/*
 * === [完美对齐补丁 - 由Gemini生成] ===
 * 统一所有表单输入框的宽度、高度和垂直对齐
 * ========================================= */

/* --- 1. 统一基础输入框的样式 --- */
.setting li input[type='text'],
.setting li input[type='password'],
.setting li input[type='email'],
.setting li input[type='url'],
.setting li input[type='tel'] {
    /* 核心修正：确保所有输入框共享完全相同的样式 */
    flex-grow: 1;
    width: 100%;
    padding: 8px 10px;
    font-size: 14px;
    line-height: 1.5;
    border: 1px solid #C1C1C1;
    background-color: white;
    color: #333;
    border-radius: 3px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: all .2s ease;
    box-sizing: border-box;
    height: auto; /* 让高度由padding和line-height决定，避免固定高度带来的问题 */
}

/* --- 2. 确保所有输入框在 flex 容器中行为一致 --- */
.setting li input[type='email'] {
    flex-grow: 1; /* 再次强调，确保email输入框也能自动伸展 */
}
/* ==================== 自定义“小眼睛”专属样式 v2.0 (兼容“忘记密码”) ==================== */

/* --- 1. 让输入框的容器支持定位 --- */
.login-form .input-wrapper {
    position: relative; /* 这是让两个元素能精确定位的关键 */
}

/* --- 2. “小眼睛”图标的样式 (核心修改) --- */
.toggle-password {
    position: absolute;
    /* ★ 核心修改：让它从更靠右的位置开始定位 */
    right: 90px; 
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    color: #aaa;
    font-size: 18px;
    font-family: 'Arial', sans-serif;
    user-select: none;
    padding: 5px;
    z-index: 2; /* ★ 确保小眼睛在最上层 */
}
.toggle-password:hover {
    color: #333;
}

/* --- 3. “忘记密码”链接的样式 (全新) --- */
/* (我们假设“忘记密码”链接的父容器class是 .additional-links) */
.login-form .input-wrapper .additional-links {
    position: absolute;
    right: 10px; /* 定位在最右侧 */
    top: 50%;
    transform: translateY(-50%);
    z-index: 1; /* 层级比小眼睛低 */
}
.login-form .input-wrapper .additional-links a {
    font-size: 13px;
    color: #888;
    text-decoration: none;
}
.login-form .input-wrapper .additional-links a:hover {
    color: var(--primary-color, #FF7D00);
}


/* --- 4. 为输入框留出空间 (核心修改) --- */
.login-form .input-wrapper input[type="password"],
.login-form .input-wrapper input[type="text"][data-toggle-password]
{
    /* ★ 核心修改：留出足够宽的空间，以容纳【小眼睛】和【忘记密码】两个元素 */
    padding-right: 125px !important; 
}
/* --- 会员中心登录页 - 第三方登录样式 (V6 - 最终完美版) --- */

/* 分割线容器：作为定位的“锚点” */
.login-panel .login-divider {
    position: relative; /* 必须！为伪元素提供定位上下文 */
    text-align: center; /* 让 span 居中 */
    margin: 25px 0;
    /* 移除所有干扰项 */
    padding: 0; 
}

/* 中间的文字：盖在横线之上 */
.login-panel .login-divider span {
    position: relative; /* 确保 z-index 生效 */
    z-index: 1;         /* 关键：让文字浮在横线上方 */
    background-color: #fff; /* 关键：用白色背景“切断”下方的横线 (请根据您的背景色调整) */
    padding: 0 15px;    /* 在文字两侧留出空隙 */
    color: #aaa;
}

/* 背景横线：一条从最左到最右的完整横线 */
.login-panel .login-divider::before {
    content: '';
    position: absolute;   /* 绝对定位 */
    top: 50%;             /* 垂直居中 */
    left: 0;              /* 从最左边开始 */
    right: 0;             /* 到最右边结束 */
    height: 1px;          /* 横线粗细 */
    background-color: #e0e0e0; /* 横线颜色 */
    z-index: 0;           /* 确保在文字下方 */
    /* 移除所有干扰项 */
    border: none;
}

/* 第三方登录按钮容器 */
.login-panel .social-login-container {
    text-align: center; /* 居中按钮 */
    margin-top: 15px;
}

/* 第三方登录按钮图标样式 (这个保持不变) */
.login-panel .social-btn {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin: 0 8px;
    text-align: center;
    line-height: 40px;
    background-color: #f5f5f5;
    transition: transform 0.2s, box-shadow 0.2s;
}
.login-panel .social-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
.login-panel .social-btn img {
    width: 28px;
    height: 28px;
    vertical-align: middle;
}
/* ================================================= */
/* ★★★ 谷歌翻译【全局会员中心】CSS ★★★ */
/* ================================================= */

/* --- 1. 总容器的位置控制 (作为菜单项之一) --- */
#translation-container {
    display: inline-block; /* 让其可以和 a 标签并排 */
    vertical-align: middle; /* 垂直居中对齐 */
    margin-right: 15px; /* 和右侧的“登录”等按钮保持间距 */
    position: relative;
    z-index: 10;
}

/* --- 2. 初始状态下“触发按钮”的样式 --- */
#translate-trigger {
    display: inline-flex;
    align-items: center;
    padding: 3px 6px;
    color: #888;
    text-decoration: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    background-color: #f9f9f9;
}

#translate-trigger:hover {
    color: #333;
    background-color: #eee;
    border-color: #ccc;
}

/* 解决与现有菜单链接的对齐问题 */
.user-menu #translate-trigger {
    color: white; /* 颜色与旁边的链接统一 */
    border: none; /* 移除边框，看起来更像一个菜单链接 */
    background: none; /* 移除背景色 */
    padding: 0; /* 移除内边距 */
    font-size: 1em; /* 字体大小继承父级 */
}
.user-menu #translate-trigger:hover {
    text-decoration: underline; /* 鼠标悬停时加下划线，保持一致 */
}
.user-menu #translate-trigger span {
    vertical-align: middle;
}

/* --- 3. 谷歌官方插件加载后的样式微调 --- */
#google_translate_element .goog-te-gadget-simple {
    border: none;
    background-color: transparent;
    padding: 0;
    vertical-align: middle;
}

#google_translate_element .goog-te-gadget-simple .goog-te-menu-value span {
    color: white; /* 下拉菜单文字颜色也设为白色 */
    text-decoration: none;
    font-size: 1em;
}

#google_translate_element .goog-te-gadget-simple:hover .goog-te-menu-value span {
    text-decoration: underline;
}
/* ================================================= */
/* ★★★ 在线充值页面 - 交互与信任优化CSS ★★★ */
/* ================================================= */

/* --- 交互与验证样式 --- */
#showbuyfen {
    font-size: 24px;
    font-weight: bold;
    color: var(--brand-color-blue);
    font-family: var(--font-family-yh);
}
.form-error-tip {
    color: #f56c6c;
    font-size: 12px;
    margin-left: 10px;
    font-weight: normal;
}
input#money.error {
    border-color: #f56c6c !important;
}
input[type="submit"]:disabled {
    background-color: var(--brand-color-gray) !important;
    border-color: #a5a5a5 !important;
    color: #fff !important;
    cursor: not-allowed;
    transform: none; /* 禁用点击动效 */
}

/* --- 增强信任感样式 --- */
.payment-logos {
    display: flex;
    gap: 15px;
    align-items: center;
}
.payment-logos img {
    height: 32px;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 3px;
    background-color: #fff;
}
.security-info {
    display: inline-flex;
    align-items: center;
    margin-left: 20px;
    font-size: 12px;
    color: #888;
}
.security-info svg {
    width: 14px;
    height: 14px;
    margin-right: 5px;
    fill: #888;
}
/* ================================================= */
/* ★★★ 【布局修正】输入框与单位文字对齐补丁 ★★★ */
/* ================================================= */

.input-with-unit {
    display: flex;       /* 启用Flexbox布局 */
    align-items: center; /* 垂直居中对齐内部所有元素 */
    flex-grow: 1;        /* 让这个容器自动伸展以填充可用空间 */
}

.input-with-unit input {
    flex-grow: 1;        /* 让输入框占据大部分空间 */
    width: auto;         /* 取消固定的100%宽度，让flexbox来管理 */
}

.input-with-unit .unit-label {
    flex-shrink: 0;      /* 防止“元”字在空间不足时被压缩 */
    margin-left: 10px;   /* 在输入框和“元”字之间增加一点间距 */
    color: #888;
}
/* ================================================= */
/* ★★★ 【最终补丁】修复套餐卡片不等高冲突 ★★★ */
/* ================================================= */

.package-options > li {
    align-items: stretch; /* 强制覆盖 .setting li 的 align-items: center */
}
/* ================================================= */
/* ★★★ 【美化】卡片式支付方式选择器 CSS ★★★ */
/* ================================================= */

.payment-options-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    /* 每列最小160px，自动填充，间距15px */
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 15px;
}
.payment-option-item {
    display: flex;
    align-items: center;
    justify-content: center; /* 水平居中内容 */
    padding: 15px;
    border: 2px solid #e9eef3;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    position: relative;
    height: 50px; /* 给一个固定高度，让卡片更整齐 */
}
.payment-option-item:hover {
    border-color: var(--brand-color-blue);
}
.payment-option-item.selected {
    border-color: var(--brand-color-blue);
    background-color: #f0f8ff;
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.1);
}
.payment-option-item input[type="radio"] {
    display: none; /* 彻底隐藏原始的radio按钮 */
}
.payment-option-item img {
    height: 24px; /* Logo高度 */
    margin-right: 10px;
}
.payment-option-item .payment-name {
    font-weight: bold;
    color: #555;
    font-size: 14px;
}
/* ============================================================= */
/* ★★★ 【最终补丁】修复支付方式选择器居中 (解决样式冲突) ★★★ */
/* ============================================================= */

/* --- 1. 核心修正：覆盖全局的左对齐规则 --- */
.setting li.full-width-row .payment-options-wrapper {
    align-self: center; /* 关键：让这个容器在父级中自我居中 */
}

/* --- 2. 让网格容器的宽度自适应 (这个逻辑保持不变) --- */
.payment-options-grid {
    display: inline-grid;
}

/* --- 3. (锦上添花) 强化选中状态 (这个逻辑保持不变) --- */
.payment-option-item {
    opacity: 0.7;
    transition: all 0.3s ease;
}
.payment-option-item:hover,
.payment-option-item.selected {
    opacity: 1;
}
/* ================================================= */
/* ★★★ 【布局微调】修复支付卡片文字折行问题 ★★★ */
/* ================================================= */

.payment-option-item .payment-name {
    white-space: nowrap; /* 关键：禁止文字换行 */
}