/* vn_pay 付费可见插件样式 */

/* ===== 付费块占位 ===== */
.vnpay-lock {
    position: relative;
    margin: 18px 0;
    padding: 22px 22px 20px;
    border-radius: 14px;
    text-align: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--mn-primary, #4f6ef7) 26%, var(--mn-border, #e2e8f0));
    background: linear-gradient(180deg, color-mix(in srgb, var(--mn-primary, #4f6ef7) 6%, var(--mn-bg-card, #fff)), var(--mn-bg-card, #fff));
    box-shadow: 0 6px 20px rgba(15, 23, 42, .05);
}
/* 顶部渐变装饰条 */
.vnpay-lock::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, #5b73f7, #4f6ef7 55%, #f59e0b);
}
.vnpay-lock-head { display: flex; align-items: center; justify-content: center; gap: 12px; }
.vnpay-lock-ico { display: inline-flex; }
.vnpay-lock-ico svg { width: 16px; height: 16px; display: block; }
/* 锁定块内图标做成圆形徽标（不影响已解锁标题里的小图标） */
.vnpay-lock-head .vnpay-lock-ico {
    width: 42px; height: 42px; flex: none;
    align-items: center; justify-content: center;
    border-radius: 50%;
    color: var(--mn-primary, #4f6ef7);
    background: color-mix(in srgb, var(--mn-primary, #4f6ef7) 12%, var(--mn-bg-card, #fff));
    border: 1px solid color-mix(in srgb, var(--mn-primary, #4f6ef7) 24%, var(--mn-border, #e2e8f0));
}
.vnpay-lock-head .vnpay-lock-ico svg { width: 20px; height: 20px; }
.vnpay-lock-headtxt { text-align: left; }
.vnpay-lock-title { font-weight: 700; font-size: 15px; color: var(--mn-text, #1f2937); }
.vnpay-lock-desc { margin-top: 3px; font-size: 12px; color: var(--mn-text-muted, #64748b); }
.vnpay-lock-price { margin: 0 0 14px; font-size: 13px; color: var(--mn-text-muted, #64748b); }
.vnpay-lock-price-tag {
    display: inline-block; margin-right: 8px; padding: 2px 8px;
    border-radius: 999px; font-size: 12px;
    background: var(--mn-bg-card, #fff); border: 1px solid var(--mn-border, #e2e8f0);
}
.vnpay-lock-price b { font-size: 19px; font-weight: 800; color: #d97706; }
.vnpay-lock-btns { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; }
/* 按钮为 POST 表单时仍保持行内排列 */
.vnpay-inline-form { display: inline-block; margin: 0; }
.vnpay-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    /* 这些按钮现在是 <button>，需清掉浏览器默认边框/字体，否则会出现很粗的原生描边 */
    border: 0;
    font-family: inherit;
    line-height: 1.4;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, background .15s ease, color .15s ease;
}
.vnpay-btn-primary { color: #fff; background: linear-gradient(135deg, #5b73f7, #4f6ef7); box-shadow: 0 4px 12px color-mix(in srgb, var(--mn-primary, #4f6ef7) 35%, transparent); }
.vnpay-btn-points { color: var(--mn-primary, #4f6ef7); background: color-mix(in srgb, var(--mn-primary, #4f6ef7) 10%, var(--mn-bg-card, #fff)); border: 1px solid color-mix(in srgb, var(--mn-primary, #4f6ef7) 35%, var(--mn-border, #e2e8f0)); }
.vnpay-btn:hover { transform: translateY(-1px); color: #fff; }
.vnpay-btn-primary:hover { box-shadow: 0 6px 16px color-mix(in srgb, var(--mn-primary, #4f6ef7) 45%, transparent); }
.vnpay-btn-points:hover { background: color-mix(in srgb, var(--mn-primary, #4f6ef7) 16%, var(--mn-bg-card, #fff)); color: var(--mn-primary, #4f6ef7); }
.vnpay-btn:active { transform: translateY(0); }
.vnpay-btn-ico { display: inline-flex; }
.vnpay-btn-y { display: inline-flex; font-size: 14px; font-weight: 800; }
.vnpay-free {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 700; text-decoration: none;
    color: #5b3a00; padding: 9px 16px; border-radius: 8px;
    background: linear-gradient(135deg, #fde047, #f59e0b);
    border: 1px solid #f59e0b;
    box-shadow: 0 4px 12px rgba(245, 158, 11, .38);
    font-family: inherit;
    line-height: 1.4;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
.vnpay-free:hover { transform: translateY(-1px); filter: brightness(1.05); color: #5b3a00; box-shadow: 0 6px 16px rgba(245, 158, 11, .5); }
.vnpay-free:active { transform: translateY(0); }
.vnpay-free-ico { display: inline-flex; }
.vnpay-free-ico svg { width: 15px; height: 15px; display: block; }
.vnpay-need {
    display: inline-flex; align-items: center; gap: 6px;
    color: #b45309; font-size: 13px; font-weight: 600;
    padding: 8px 12px; border-radius: 8px;
    background: #fffbeb; border: 1px solid #fde68a;
}
/* ===== 已解锁框：与锁定块（解锁前）同款风格 ===== */
.vnpay-unlocked-box {
    position: relative;
    margin: 18px 0;
    padding: 22px 22px 20px;
    border-radius: 14px;
    text-align: center;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--mn-primary, #4f6ef7) 26%, var(--mn-border, #e2e8f0));
    background: linear-gradient(180deg, color-mix(in srgb, var(--mn-primary, #4f6ef7) 6%, var(--mn-bg-card, #fff)), var(--mn-bg-card, #fff));
    box-shadow: 0 6px 20px rgba(15, 23, 42, .05);
}
.vnpay-unlocked-box::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
    background: linear-gradient(90deg, #5b73f7, #4f6ef7 55%, #f59e0b);
}
/* 头部复用锁定块的 .vnpay-lock-head 结构，圆形徽标图标与锁定态一致 */
.vnpay-unlocked-box .vnpay-lock-head { position: relative; justify-content: center; }
.vnpay-unlocked-box .vnpay-lock-headtxt { text-align: left; }
/* 已解锁：图标与标题整体居中，购买记录链接靠右 */
.vnpay-unlocked-box .vnpay-unlocked-headtxt {
    display: flex; align-items: center;
}
.vnpay-unlocked-box .vnpay-unlocked-headtxt .vnpay-lock-title {
    text-align: center;
}
.vnpay-unlocked-box .vnpay-unlocked-headtxt .vnpay-rec-link {
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);
}
.vnpay-unlocked-box .vnpay-lock-desc a,
.vnpay-rec-link { font-size: 12px; font-weight: 600; color: var(--mn-primary, #4f6ef7); text-decoration: none; white-space: nowrap; }
.vnpay-unlocked-box .vnpay-lock-desc a:hover,
.vnpay-rec-link:hover { text-decoration: underline; }
/* 隐藏内容：直接铺在框内（与锁定块同款底色，不再套独立白框），左对齐更易读 */
.vnpay-unlocked-content {
    margin-top: 16px; text-align: left;
    font-size: 14px; line-height: 1.75; font-weight: 700;
    color: var(--mn-text, #1f2937);
    word-break: break-word;
}
.vnpay-unlocked-content a { color: var(--mn-primary, #4f6ef7); text-decoration: underline; word-break: break-all; }
/* 有效期提示：红色加粗居中 + 前置小图标，上方加分隔线更清爽 */
.vnpay-expire-tip {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin-top: 18px; padding-top: 14px;
    border-top: 1px solid var(--mn-border, #e2e8f0);
    font-size: 13px; font-weight: 700; text-align: center;
    color: var(--mn-error, #dc2626);
}
.vnpay-expire-tip svg { width: 15px; height: 15px; display: block; flex: none; }
/* 手机端：购买记录链接移到标题下方 */
@media (max-width: 640px) {
    .vnpay-unlocked-box .vnpay-unlocked-headtxt {
        flex-direction: column; gap: 0;
    }
    .vnpay-unlocked-box .vnpay-unlocked-headtxt .vnpay-rec-link {
        position: static; top: auto; transform: none;
    }
}

/* ===== 通用信息/确认页 ===== */
.vnpay-msg {
    margin: 16px 0;
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--mn-bg-card, #fff);
    border: 1px solid var(--mn-border, #e2e8f0);
}
.vnp-pay-card, .vnp-vip-grid { margin-top: 16px; }
.vnp-pay-card {
    padding: 20px;
    border-radius: 12px;
    background: var(--mn-bg-card, #fff);
    border: 1px solid var(--mn-border, #e2e8f0);
}
.vnp-pay-price { margin: 12px 0; padding-left: 18px; }
.vnp-pay-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ===== VIP 开通页 ===== */
/* 整页外框：浅底容器，内部卡片保持白色形成层次 */
.vnp-vip-page {
    max-width: 1040px; margin: 0 auto;
    padding: 24px 24px 28px;
    border-radius: 16px;
    border: 1px solid var(--mn-border, #e2e8f0);
    background: color-mix(in srgb, var(--mn-border, #e2e8f0) 26%, var(--mn-bg-card, #fff));
    box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
}
@media (max-width: 640px) {
    .vnp-vip-page { padding: 16px 14px 20px; border-radius: 12px; }
}
.vnp-vip-hero { text-align: center; padding: 4px 12px 4px; }
.vnp-vip-title { margin: 0 0 6px; font-size: 26px; font-weight: 800; letter-spacing: .5px; }
.vnp-vip-sub { margin: 0; font-size: 14px; color: var(--mn-text-muted, #64748b); }

/* 我的会员卡：金色渐变 */
.vnp-myvip {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
    margin: 18px 0 24px; padding: 18px 20px; border-radius: 14px;
    background: linear-gradient(135deg, #fde047 0%, #f59e0b 62%, #d97706 100%);
    color: #4a2c00; box-shadow: 0 10px 28px rgba(217, 119, 6, .28);
}
.vnp-myvip.is-none {
    background: var(--mn-bg-card, #fff); color: var(--mn-text, #1f2937);
    border: 1px solid var(--mn-border, #e2e8f0); box-shadow: none;
}
.vnp-myvip-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 800; }
.vnp-myvip-badge svg { width: 20px; height: 20px; display: block; }
.vnp-myvip-exp { margin-top: 6px; font-size: 13px; opacity: .85; }
.vnp-myvip-right { min-width: 190px; text-align: right; }
.vnp-myvip-quota { font-size: 13px; }
.vnp-myvip-quota b { font-size: 22px; font-weight: 800; }
.vnp-myvip-bar { height: 6px; margin: 8px 0 6px; border-radius: 999px; background: rgba(255,255,255,.5); overflow: hidden; }
.vnp-myvip-bar i { display: block; height: 100%; border-radius: 999px; background: var(--mn-text-inverse, #fff); }
.vnp-myvip-link { font-size: 12px; font-weight: 700; color: #4a2c00; text-decoration: underline; }

.vnp-vip-sec { margin: 0 0 12px; font-size: 16px; font-weight: 700; }

.vnp-vip-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}
.vnp-vip-card {
    position: relative;
    padding: 20px 18px;
    border-radius: 14px;
    background: var(--mn-bg-card, #fff);
    border: 1px solid var(--mn-border, #e2e8f0);
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.vnp-vip-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(15, 23, 42, .12);
    border-color: color-mix(in srgb, var(--mn-primary, #4f6ef7) 45%, var(--mn-border, #e2e8f0));
}
.vnp-vip-card.is-current { border-color: #f59e0b; box-shadow: 0 0 0 2px rgba(245, 158, 11, .35); }
.vnp-vip-ribbon {
    position: absolute; top: -10px; right: 12px;
    padding: 3px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 700;
    color: #fff; background: linear-gradient(135deg, #f59e0b, #d97706);
}
.vnp-vip-ribbon.is-muted { color: #78350f; background: #fef3c7; border: 1px solid #fde68a; }
.vnp-vip-cname { font-size: 16px; font-weight: 700; }
.vnp-vip-cprice { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: 6px 0 2px; }
.vnp-price-main { color: #d97706; font-size: 15px; font-weight: 700; }
.vnp-price-main b { font-size: 28px; font-weight: 800; }
.vnp-price-unit { font-size: 12px; color: var(--mn-text-muted, #64748b); }
.vnp-price-pts { font-size: 13px; font-weight: 700; color: var(--mn-text-muted, #64748b); }
.vnp-vip-feats { list-style: none; margin: 10px 0 14px; padding: 0; font-size: 13px; }
.vnp-vip-feats li { position: relative; padding: 4px 0 4px 20px; }
.vnp-vip-feats li::before { content: "✓"; position: absolute; left: 0; color: var(--mn-success, #16a34a); font-weight: 700; }
.vnp-vip-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.vnp-vip-actions form { flex: 1 1 auto; }
.vnp-vip-actions .mn-btn { width: 100%; }
.vnp-owned-tip { font-size: 12px; color: var(--mn-text-muted, #64748b); }
.vnp-vip-foot { margin-top: 18px; font-size: 12px; color: var(--mn-text-muted, #64748b); }
.vnp-vip-tag {
    display: inline-flex; align-items: center; margin-left: 8px;
    padding: 1px 8px; border-radius: 999px;
    font-size: 11px; font-weight: 700; vertical-align: middle;
    color: #fff; background: linear-gradient(135deg, #f59e0b, #d97706);
}
.vnp-vip-tag-muted { color: #78350f; background: #fef3c7; border: 1px solid #fde68a; }
.vnp-vip-status {
    margin: 12px 0 18px;
    padding: 14px 16px;
    border-radius: 12px;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border: 1px solid #fcd34d;
    color: #78350f;
}
.vnp-vip-status-main { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vnp-vip-badge {
    display: inline-flex; align-items: center;
    padding: 4px 12px; border-radius: 999px;
    font-weight: 800; font-size: 14px;
    color: #fff; background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 2px 8px rgba(217, 119, 6, .35);
}
.vnp-vip-status-meta { margin-top: 8px; font-size: 13px; }

/* ===== 后台设置 ===== */
.vnp-admin .admin-card {
    margin-top: 16px;
    padding: 16px 18px;
    border-radius: 12px;
    background: var(--mn-bg-card, #fff);
    border: 1px solid var(--mn-border, #e2e8f0);
}
.vnp-admin .admin-card h3 { margin: 0 0 12px; }
.mn-form-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.mn-form-row > span { font-size: 13px; color: var(--mn-text-muted, #64748b); }
.mn-form-row .mn-input { max-width: 360px; }
.vnp-vip-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.vnp-vip-row .form-input { width: auto; flex: 1 1 120px; min-width: 90px; }
.vnp-vip-row .vnp-vip-del { flex: 0 0 auto; }
.vnp-grant-row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.vnp-grant-row .form-group { margin-bottom: 0; flex: 1 1 180px; min-width: 160px; }
.vnp-insert-tip { font-size: 12px; color: var(--mn-text-muted, #64748b); margin-left: 8px; }

/* ===== 付费内容按钮（选择文件之前） ===== */
.vnpay-pay-btn { margin: 0; }

/* ===== 付费内容弹窗内提示 ===== */
.vnpay-pay-tip { font-size: 12px; color: var(--mn-text-muted, #64748b); margin: 4px 0 0; }

/* ===== 独立付费块字段（表单内） ===== */
.vnpay-field-box {
    margin: 14px 0;
    padding: 14px 16px;
    border: 1px solid var(--mn-border, #e2e8f0);
    border-radius: 10px;
    background: color-mix(in srgb, var(--mn-primary, #4f6ef7) 5%, var(--mn-bg-card, #fff));
}
.vnpay-field-title { font-weight: 600; margin-bottom: 4px; }
.vnpay-field-tip { font-size: 12px; color: var(--mn-text-muted, #64748b); margin: 0 0 10px; }
.vnpay-field-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.vnpay-field-row > label { width: 110px; flex: 0 0 auto; font-size: 13px; color: var(--mn-text-muted, #64748b); }
.vnpay-field-row .form-input { flex: 1 1 auto; max-width: 320px; }
.vnpay-field-col { align-items: flex-start; }
.vnpay-field-col > label { padding-top: 6px; }
.vnpay-field-col .form-input { width: 100%; max-width: 100%; resize: vertical; }

/* ===== 插入付费块弹窗 ===== */
.vnpay-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.vnpay-modal[hidden] { display: none; }
.vnpay-modal-mask { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); }
.vnpay-modal-box {
    position: relative; z-index: 1; width: min(440px, 100%);
    background: var(--mn-bg-card, #fff); border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25); overflow: hidden;
    font-size: 14px; color: var(--mn-text, #1f2937);
    animation: vnpay-pop .15s ease-out;
}
@keyframes vnpay-pop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.vnpay-modal-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 16px; border-bottom: 1px solid var(--mn-border, #e2e8f0); font-weight: 600;
}
.vnpay-modal-title { display: inline-flex; align-items: center; gap: 8px; }
.vnpay-modal-x {
    border: none; background: none; font-size: 22px; line-height: 1;
    cursor: pointer; color: var(--mn-text-muted, #64748b); padding: 0 6px; border-radius: 6px;
}
.vnpay-modal-x:hover { background: var(--mn-border-light, #f1f5f9); color: var(--mn-text, #1f2937); }
.vnpay-modal-body { padding: 16px; }
.vnpay-field { margin-bottom: 14px; }
.vnpay-label { display: block; font-size: 13px; color: var(--mn-text-muted, #64748b); margin-bottom: 6px; }
.vnpay-modal .mn-input,
.vnpay-modal .mn-select,
.vnpay-modal .mn-textarea { width: 100%; box-sizing: border-box; }
.vnpay-modal-foot {
    display: flex; justify-content: flex-end; gap: 10px;
    padding: 12px 16px; border-top: 1px solid var(--mn-border, #e2e8f0);
    background: var(--mn-bg-input, #f8fafc);
}

/* 7.3/11.7：消除内联 style 与硬编码色，统一主题变量化 */
.vnp-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.vnp-tr-head { text-align: left; color: var(--mn-text-muted, #64748b); }
.vnp-th, .vnp-td { padding: 8px 10px; border-bottom: 1px solid var(--mn-border, #e2e8f0); }
.vnp-th { font-weight: 600; }
.vnp-mt-14 { margin-top: 14px; }
.vnp-mt-4 { margin-top: 4px; }
.vnp-mt-8 { margin-top: 8px; }
.vnp-inline-block { display: inline-block; }
.vnp-hidden { display: none; }
.vnp-center-box { padding: 40px; text-align: center; }
.vnp-box-narrow { max-width: 560px; }
.vnp-fs-12 { font-size: 12px; }
.vnp-fs-15 { font-size: 15px; }
.vnp-success { color: var(--mn-success, #16a34a); }
.vnp-vip-status { margin: 8px 0 0; padding: 10px 14px; }
.vnp-myvip-bar i { width: var(--vnp-pct, 0%); }

.vnp-mt-16 { margin-top: 16px; }