/* 表单整体容器 */
.svm-form-wrapper {
    max-width: 400px;
    margin: 50px auto;
    padding: 25px 20px;
    background-color: #f9f9f9;
    border-top: 3px solid #00A4E1;
    border-bottom: 3px solid #00A4E1; /* 新增底部边框 */
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    box-sizing: border-box;
}

/* 标题及提示 */
.svm-form-wrapper p {
    margin-bottom: 15px;
}

.svm-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.svm-form input[type="email"],
.svm-form input[type="password"],
.svm-form input[type="text"] {
    width: 100%;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

.svm-form input[type="submit"] {
    display: block;
    width: 100%;
    max-width: 200px;
    margin: 20px auto 0;
    background-color: #00A4E1;
    color: #fff;
    padding: 12px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 16px;
    transition: background 0.3s ease;
}

.svm-form input[type="submit"]:hover {
    background-color: #0084b7;
}

.svm-btn-secondary {
    background: #00A4E1;
    color: #fff;
    border: none;
    padding: 10px 18px;
    border-radius: 20px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.3s ease;
}

.svm-btn-secondary:hover:not([disabled]) {
    background: #0084b7;
}

.svm-btn-secondary[disabled] {
    opacity: 0.6;
    cursor: default;
}

/* 验证码数字装饰框 */
.svm-captcha-box {
    width: 90px;
    text-align: center;
    padding: 8px 0;
    border: 1px solid #00A4E1;
    border-radius: 6px;
    color: #00A4E1;
    font-weight: bold;
    background: #fff;
    margin-left: 10px;
}

/* 数字验证码行容器，增加底部间距 */
.svm-inline-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 20px; /* 增加间距 */
}

/* 邮箱验证码行容器 */
.svm-mail-code-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 15px; /* 可根据需要微调 */
}

/* 验证码输入框样式 */
.svm-inline-row .svm-code-input,
.svm-mail-code-row .svm-code-input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #fff;
    height: 42px; /* 确保高度统一 */
    box-sizing: border-box;
}

/* 右侧数字验证码框样式 */
.svm-captcha-box {
    width: 90px;
    text-align: center;
    padding: 6px 0; /* 调低高度，让它更接近输入框 */
    border: 1px solid #00A4E1;
    border-radius: 5px;
    color: #00A4E1;
    font-weight: bold;
    background: #fff;
    height: 42px; /* 与输入框一致 */
    line-height: 28px; /* 内容垂直居中，可根据需要再微调 */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ======== 邮箱修改页面专用 CSS ======== */

.svm-email-wrapper {
    max-width: 420px;
    margin: 0 auto;
    padding: 30px 20px;
    background: #f9f9f9;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    font-size: 14px;
    color: #333;
    border-top: 3px solid #00A4E1;
    border-bottom: 3px solid #00A4E1; /* 新增底部边框 */
}

.svm-email-tip {
    margin-bottom: 20px;
    font-size: 13px;
    color: #666;
    line-height: 1.6;
}

.svm-email-form {
    margin-top: 25px;
}

.svm-email-block p {
    margin-bottom: 15px;
}

.svm-email-block label {
    display: block;
    font-size: 14px;
    margin-bottom: 5px;
    color: #444;
}

.svm-email-block input[type="password"],
.svm-email-block input[type="email"],
.svm-email-block input[type="text"] {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    transition: border-color 0.2s;
    font-size: 14px;
}

.svm-email-block input[type="password"]:focus,
.svm-email-block input[type="email"]:focus,
.svm-email-block input[type="text"]:focus {
    border-color: #00a4e1;
    outline: none;
}

.svm-email-block input[type="submit"] {
    width: 100%;
    background: #00a4e1;
    color: #fff;
    border: none;
    padding: 10px;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.2s;
}

.svm-email-block input[type="submit"]:hover {
    background: #008fc7;
}

.svm-email-inline {
    display: flex;
    gap: 10px;
    align-items: center;
}

.svm-email-code-input {
    flex: 1;
}

.svm-email-btn-secondary {
    background: transparent;
    border: 1px solid #00a4e1;
    color: #00a4e1;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.svm-email-btn-secondary:hover {
    background: #00a4e1;
    color: #fff;
}

/* 提示信息颜色修饰 */
.svm-email-wrapper p[style*="color:green"] {
    color: #28a745 !important;
    margin-bottom: 10px;
}

.svm-email-wrapper p[style*="color:red"] {
    color: #dc3545 !important;
    margin-bottom: 10px;
}

/* =====================
   关键词订阅整体容器
===================== */
.svm-kw-wrapper {
    max-width: 500px;
    margin: 50px auto;
    padding: 25px 20px;
    background-color: #f9f9f9;
    border-top: 3px solid #00A4E1;
    border-bottom: 3px solid #00A4E1;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    box-sizing: border-box;
}

/* 提示文字 */
.svm-kw-tip {
    font-size: 14px;
    color: #555;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* 消息提示 */
.svm-kw-wrapper p {
    margin-bottom: 15px;
    font-size: 14px;
}

/* 关键词列表 */
.svm-kw-list ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.svm-kw-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 10px;
    transition: box-shadow 0.2s;
}

.svm-kw-item:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.svm-kw-text {
    font-size: 14px;
    color: #333;
    flex: 1;
    word-break: break-all;
}

/* 删除按钮表单 */
.svm-kw-del-form {
    margin: 0;
}

.svm-kw-del-btn {
    background-color: #f44336;
    color: #fff;
    border: none;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    transition: background-color 0.2s;
}

.svm-kw-del-btn:hover {
    background-color: #d32f2f;
}

/* 关键词为空提示 */
.svm-kw-empty {
    font-size: 14px;
    color: #888;
    text-align: center;
    margin-bottom: 20px;
}

/* 添加新关键词表单 */
.svm-kw-add-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.svm-kw-input {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.svm-kw-input:focus {
    border-color: #00A4E1;
    box-shadow: 0 0 5px rgba(0,164,225,0.2);
}

/* 添加按钮 */
.svm-kw-add-btn {
    background-color: #00A4E1;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.svm-kw-add-btn:hover {
    background-color: #008dc0;
}

.svm-kw-add-btn:active {
    transform: scale(0.97);
}

/* 让表单内元素在小屏下保持良好排版 */
@media (max-width: 500px) {
    .svm-kw-add-form {
        flex-direction: column;
    }

    .svm-kw-add-btn {
        width: 100%;
    }
}

/* 会员中心样式 */
.svm-member-center {
    max-width: 800px;
    margin: 50px auto;
    padding: 20px;
    background-color: #ffffff;
    box-sizing: border-box;
}

.svm-member-center h2 {
    text-align: center;
    margin-bottom: 30px;
    font-size: 28px;
}

.svm-member-center p {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 15px;
}

.svm-member-center .vip-status {
    font-size: 18px;
    font-weight: bold;
    color: #009900;
    margin-bottom: 30px;
}

.svm-member-center h3 {
    font-size: 22px;
    margin-bottom: 20px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 10px;
}

.svm-member-center form {
    max-width: 400px;
    margin: 0 auto;
}

.svm-member-center select {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
    box-sizing: border-box;
}

.svm-member-center input[type="submit"] {
    display: block;
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
    background-color: #6699cc;
    color: #fff;
    padding: 12px 20px;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 16px;
}

.svm-member-center input[type="submit"]:hover {
    background-color: #557799;
}

/* svm-style.css */

/* ================================
   样式：VIP支付页面
   ================================ */

/* 整体容器 */
.svm-pay-container {
  /* 我们让body默认不用再设置颜色，这里自己控制 */
  width: 100%;
  overflow: hidden;  /* 避免圆角溢出 */
  background: #70C160; /* 顶部绿色 */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* 顶部部分（绿色区域） */
.svm-pay-top {
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

/* 二维码外框包装 */
.svm-qrcode-wrapper {
  background: #fff;
  border-radius: 10px;
  display: inline-block;
  padding: 20px;
  margin-bottom: 20px;
}

/* 二维码图片本身 */
.svm-qrcode-img {
    margin-bottom: 0 !important;
    display: block;
    width: 200px;
    height: 200px;
}

/* 提示文字 */
.svm-pay-tip {
  color: #fff;
  margin: 0 auto;
  max-width: 300px;
  line-height: 1.5;
}

/* 底部白色区域 */
.svm-pay-bottom {
  width: 100%;
  height: 50px; /* 根据需要可调整 */
  background: #fff;
  position: absolute;
  bottom: 0;
  left: 0;

  /* 让白色区域在绿色区域上带有微弧 */
  border-top-left-radius: 80% 40px;
  border-top-right-radius: 80% 40px;
}

/* 微信支付logo */
.svm-wechat-logo {
  display: block;
  margin: 0 auto;
  width: 100px; /* 可调大小 */
  height: auto;
  padding-top: 20px;
}

/* 让顶部绿色与底部白色有一个平滑的过渡，如果需要渐变效果可再加渐变
   这里只是做了一个圆角衔接，已经有微妙的弧度 */

/* 调整移动端样式 */
@media (max-width: 600px) {
    .svm-payment-title {
        font-size: 16px;
    }
    .svm-payment-btn {
        font-size: 14px;
    }
}

/* =============== Member Center Enhanced Layout =============== */

/* 外层容器 */
.nmc-wrapper {
    width: 100%;
    max-width: 800px; 
    margin: 0 auto;
    font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
    position: relative;
}

/* 
   背景卡片： 
   - 通过 padding-bottom 来控制高度，达到自适应原图比例的效果。
   - 这里示例使用 56.25%（16:9），可根据你背景图的实际比例微调，比如 60%、75% 等。
   - 或者在现代浏览器也可用 aspect-ratio: 16 / 9; (如果你能确定图片大概的宽高比)
*/
.nmc-top-bg {
    position: relative;
    width: 100%;
    border-radius: 12px;        /* 圆角 */
    overflow: hidden;          /* 隐藏溢出 */
    
    /* ======================
       方法①：padding-bottom百分比
    ======================= */
    padding-bottom: 56.25%;    /* 16:9 比例。可以改为其他数字来匹配你的图片 */
    
    /* 背景图片 */
    background: url("../img/beijing.jpg") no-repeat center;
    background-size: cover;    /* 填充裁剪 */
}

/* 
   ————————————
     顶部两个绝对定位元素：头像(左) & 导航栏(右)
   ————————————
*/

/* 头像容器：绝对定位在卡片左上角，同一水平 top */
.nmc-avatar-wrap {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
}

/* 头像 */
.nmc-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 4px solid #fff;
    object-fit: cover;
}

/* 右上角导航条 */
.nmc-right-nav {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: #89c7ff;
    color: #fff;
    padding: 6px 12px;
    border-bottom-left-radius: 12px; /* 左下角 */
    border-top-right-radius: 12px;   /* 右上角 */
    font-size: 14px;
    z-index: 2;
}
.nmc-right-nav a {
    color: #fff !important;         /* 强制白色，避免主题干扰 */
    text-decoration: none !important; 
    margin: 0 5px;
}
.nmc-right-nav-sep {
    margin: 0 5px;
}

/* 
   ————————————
     底部信息盒：固定宽度，居中，无多余外边距
   ————————————
*/
/* 底部信息盒子：增加顶部间隔，减少内边距 */
/* 底部信息盒子：增加左右外边距，确保宽度与上方元素一致 */
.nmc-info-box {
    position: absolute;
    left: 50%;                     /* 居中：先 left:50% 然后 transform */
    bottom: 10px;                  /* 离卡片底部 20px */
    transform: translateX(-50%);   /* 水平居中 */
    
    background-color: rgba(255, 255, 255, 0.75);
    color: #333;
    width: 80%;                    /* 宽度设为 80%，与上方元素一致 */
    padding: 5px 15px;             /* 减少内边距，精简空间 */
    margin-top: 10px;              /* 增加与头像、导航栏之间的间隔 */
    border-radius: 6px;
    text-align: center;
    box-shadow: 0 3px 6px rgba(0,0,0,0.1);
}

/* 用户邮箱 */
.nmc-user-email {
    font-size: 13px;
    font-weight: 600;
    margin: 6px 0;
}

/* VIP状态 */
.nmc-vip-status {
    margin: 5px 0;
    font-size: 13px;
    line-height: 1.4;
}

/* VIP徽章 */
.nmc-vip-badge {
    background-color: #FF6699;
    color: #fff;
    padding: 2px 5px;
    border-radius: 3px;
    font-size: 12px;
}

/* 
   下面是卡片外的下方内容区域 
   你在 new-member-center.php 里 .nmc-content-area 仍旧写在下面
*/
.nmc-content-area {
    background-color: #fafafa;
    margin-top: 30px;   /* 与卡片拉开距离 */
    padding: 20px;
    border-radius: 6px;
}
.nmc-content-area h2 {
    margin-top: 0;
}

/* 下方新增内容区域：会员信息 */
.nmc-content-area {
    background-color: #f9f9f9;  /* 轻微的灰色背景 */
    margin-top: 20px;            /* 上方间隔 */
    padding: 15px;               /* 内边距 */
    border-radius: 6px;          /* 圆角 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 阴影 */
}

/* 下方内容区域标题 */
.nmc-content-area p {
    font-size: 14px;
    margin: 5px 0;
}

/* 强调部分内容 */
.nmc-content-area strong {
    color: #333;
    font-weight: normal;  /* 取消加粗 */
}

/* 菜单区域样式 */
.nmc-menu-area {
    margin-top: 30px;
}

.nmc-menu-title {
    font-size: 22px;
    margin-bottom: 15px;
    text-align: center; /* 居中对齐标题 */
    color: #89c7ff; /* 设置标题颜色为 #89c7ff */
    font-weight: normal; /* 取消加粗 */
    border-bottom: 2px dashed #89c7ff; /* 标题底部虚线 */
    padding-bottom: 5px;
}

.nmc-menu {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}

.nmc-menu-item:nth-child(3) {
    width: 100%; /* 让单独一行的项目独占 */
    text-align: center; /* 内容居中 */
}

.nmc-menu-item {
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 15px;
    text-align: center;
    transition: all 0.3s ease;
}

.nmc-menu-item a {
    color: #89c7ff; /* 文字颜色 */
    text-decoration: none;
    font-size: 16px;
    font-weight: normal; /* 取消加粗 */
}

.nmc-menu-item:hover {
    background-color: #f5f5f5;
    border-color: #999;
}

.nmc-menu-item i {
    font-size: 24px;
    margin-bottom: 10px;
    display: block;
}

/* ============= VIP卡片布局 ============= */

/* ============= VIP卡片布局（优先级最高版） ============= */

/* 外层容器：两列布局，居中留间隙 */
.svm-vip-cards-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    margin-top: 20px !important;
    margin-bottom: 20px !important;
    justify-content: center !important;
}

/* 每个卡片整体 */
.svm-vip-card {
    flex: 0 0 calc(50% - 20px) !important;  /* 2列 */
    background-color: #fff !important;
    border-radius: 6px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important; /* 轻阴影 */
    overflow: hidden !important;        
    display: flex !important;
    flex-direction: column !important;
}

/* 卡片头部 */
.svm-vip-card-header {
    color: #fff !important;
    font-weight: bold !important;
    font-size: 18px !important;
    text-align: center !important;
    padding: 12px 0 !important;
}

/* 卡片主体 */
.svm-vip-card-body {
    padding: 20px !important;
    color: #333 !important; /* 黑色字体 */
}

/* 价格 */
.svm-vip-price {
    font-size: 24px !important;
    font-weight: bold !important;
    margin: 0 !important;
    margin-bottom: 10px !important;
}

/* 时长 */
.svm-vip-days {
    font-size: 14px !important;
    margin: 0 !important;
    margin-bottom: 10px !important;
}

/* 权限说明 */
.svm-vip-perms {
    font-size: 14px !important;
    color: #666 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* 立即开通按钮 */
.svm-vip-btn {
    display: inline-block !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 10px 18px !important;
    color: #fff !important; /* 白色文字 */
    cursor: pointer !important;
    font-size: 14px !important;
    transition: opacity 0.2s !important;
}
.svm-vip-btn:hover {
    opacity: 0.8 !important;
}

/* 卡片内文字居中（追加） */
.svm-vip-card-body {
    text-align: center !important;
}

.svm-vip-btn {
    margin: 0 auto !important;
    display: inline-block !important;
}