/**
 * 多用户组（会员等级）样式
 *
 * 说明：
 *  - 用户组直接复用父主题的 .vip-card / .vip-cardmini / .pay-vip-info 结构，
 *    这里只做「第 3、4 个用户组」的配色补充与用户中心卡片布局
 *  - 父主题的调色板只定义了 jb-vip1、jb-vip2，用户中心按钮用到 jb-vip3、jb-vip4，
 *    因此需要在这里补齐 --this-bg / --this-color
 *
 * @package BaiycOraculix
 */

/* ---------- 按钮调色板：补齐 jb-vip3 / jb-vip4 ---------- */
.jb-vip3,
.jb-vip4 {
    color: var(--this-color);
    background: var(--this-bg);
    border: none;
}

.jb-vip3 {
    --this-bg: linear-gradient(25deg, #d9a02c 10%, #ffe9a8 60%, #f0c65a 100%);
    --this-color: #5a3c05;
}

.jb-vip4 {
    --this-bg: linear-gradient(25deg, #b02a44 10%, #ff9db0 60%, #e2566f 100%);
    --this-color: #fff2f3;
}

/* ---------- 第 3、4 个用户组卡片配色 ---------- */
/* 父主题只区分 vip-theme1（金）与 vip-theme2（紫），这里让 3、4 组各自有辨识度 */
.vip-card.baiyc-ug-card.level-3,
.payvip-modal .vip-cardmini.level-3 {
    background: linear-gradient(25deg, #d9a02c 10%, #ffe9a8 60%, #f0c65a 100%);
    color: #5a3c05;
}

.vip-card.baiyc-ug-card.level-4,
.payvip-modal .vip-cardmini.level-4 {
    background: linear-gradient(25deg, #b02a44 10%, #ff9db0 60%, #e2566f 100%);
    color: #6b1024;
}

.baiyc-ug-card.level-3 .payvip-button,
.baiyc-ug-card.level-4 .payvip-button {
    background: linear-gradient(135deg, #ff9633 10%, #f14315 100%);
    color: #fff;
    --this-color: #fff;
}

/* 背景装饰图标在第 4 组上用深色，避免和浅色底混在一起 */
.payvip-modal .vip-cardmini.level-3 .vip-baicon,
.payvip-modal .vip-cardmini.level-4 .vip-baicon {
    color: rgba(255, 255, 255, 0.55);
}

/* ---------- 开通弹窗里的用户组介绍卡 ---------- */
.pay-vip-info.level-3 {
    color: #b8842a;
    background-image: radial-gradient(ellipse 105% 65% at 92% 8%, rgba(217, 160, 44, 0.22) 0, transparent 52%);
    border-color: rgba(217, 160, 44, 0.25);
}

.pay-vip-info.level-4 {
    color: #c2354f;
    background-image: radial-gradient(ellipse 105% 65% at 92% 8%, rgba(178, 42, 68, 0.22) 0, transparent 52%);
    border-color: rgba(178, 42, 68, 0.25);
}

/* ---------- 弹窗标签：4 个用户组排成一行 ---------- */
/* 父主题按 2 个标签设计（.vip-cardminis > li { flex: auto }），这里让 4 个标签等分成一行。
   间距沿用父主题的 gutters-5（li 自带 5px 内边距），不再叠加 gap，否则一行放不下 4 个 */
.payvip-modal .vip-cardminis {
    flex-wrap: nowrap;
}

.payvip-modal .vip-cardminis > li {
    flex: 1 1 0;
    min-width: 0;
}

/* 弹窗卡片里的背景装饰大图标会盖住文字（父主题 font-size 7em 且偏右），直接隐藏，
   卡片前部已有 v-icon 图标，无需背景装饰 */
.payvip-modal .vip-cardmini .vip-baicon {
    display: none;
}

/* 一行 4 个后卡片变窄：压缩内边距与图标，名称、简介超宽时用省略号截断 */
.payvip-modal .vip-cardminis .vip-cardmini {
    padding: 10px 8px;
    overflow: hidden;
}

.payvip-modal .vip-cardminis .vip-cardmini .v-iconbox {
    gap: 6px;
}

.payvip-modal .vip-cardminis .vip-cardmini .v-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.payvip-modal .vip-cardminis .vip-cardmini .v-info {
    min-width: 0;
    text-align: left;
}

.payvip-modal .vip-cardminis .vip-cardmini .v-name {
    font-size: 14px;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.payvip-modal .vip-cardminis .vip-cardmini .v-desc {
    font-size: 0.72em;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 当前用户组标签：加一圈描边，和「可切换」的标签区分开 */
.payvip-modal .vip-cardminis > li.active .vip-cardmini {
    box-shadow: 0 0 0 2px var(--focus-color);
}

/* ---------- 用户中心：用户组卡片列表 ---------- */
.baiyc-ug-cards {
    margin-bottom: 20px;
}

.baiyc-ug-card {
    flex: 1 1 calc(25% - 15px);
    min-width: 200px;
    display: flex;
    flex-direction: column;
}

.baiyc-ug-card > .relative {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.baiyc-ug-card .vip-name {
    font-size: 18px;
    display: flex;
    align-items: center;
}

.baiyc-ug-card .vip-name .img-icon {
    width: 1.4em;
    height: 1.4em;
}

.baiyc-ug-card .v-equity,
.baiyc-ug-card ul {
    flex: 1;
    list-style: none;
    padding: 0;
    margin: 0 0 10px;
    line-height: 1.9;
    font-size: 0.9em;
}

/* 卡片底部的按钮统一贴底 */
.baiyc-ug-card .payvip-button {
    display: block;
    text-align: center;
    margin-top: auto;
}

/* 当前所在的用户组 */
.baiyc-ug-card.is-current {
    box-shadow: 0 0 0 2px var(--focus-color);
}

.baiyc-ug-card.is-current::after {
    content: '当前用户组';
    position: absolute;
    right: 0;
    top: 0;
    z-index: 3;
    font-size: 0.7em;
    padding: 3px 10px;
    border-bottom-left-radius: var(--mini-radius);
    background: var(--focus-color);
    color: #fff;
}

/* 永久有效时按钮不可点击，弱化显示 */
.baiyc-ug-card .but.c-green.btn-block {
    display: block;
    text-align: center;
    margin-top: auto;
    opacity: 0.85;
    cursor: default;
}

/* ---------- 前台发文页：用户组价格字段 ---------- */
.baiyc-ug-post-pay-row {
    margin-top: 6px;
}

.baiyc-ug-post-pay-row .muted-color {
    display: flex;
    align-items: center;
}

/* ---------- 窄屏 ---------- */
@media (max-width: 600px) {
    .baiyc-ug-card {
        flex: 1 1 calc(50% - 15px);
        min-width: 0;
    }

    /* 手机上弹窗宽度有限，4 个一行太挤，退回 2×2 */
    .payvip-modal .vip-cardminis {
        flex-wrap: wrap;
    }

    .payvip-modal .vip-cardminis > li {
        flex: 1 1 40%;
        min-width: 0;
    }

    .payvip-modal .vip-cardminis .vip-cardmini .v-desc {
        display: none;
    }
}

@media (max-width: 480px) {
    .baiyc-ug-card {
        flex: 1 1 100%;
    }
}

/* ---------- 导航「开通会员」悬浮卡（新版样式） ---------- */
.baiyc-nav-vip {
    width: 330px;
    max-width: 88vw;
    background: var(--main-bg-color, #fff);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
    overflow: hidden;
}

.baiyc-nav-vip-head {
    text-align: center;
    padding: 16px 14px 10px;
}

.baiyc-nav-vip-head .t1 {
    font-size: 16px;
    font-weight: bold;
    color: var(--key-color, #333);
}

.baiyc-nav-vip-head .t2 {
    font-size: 12px;
    color: var(--muted-color, #999);
    margin-top: 4px;
}

.baiyc-nav-vip-body {
    padding: 10px 12px 2px;
}

.baiyc-nav-vip-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    color: var(--focus-color, #f04494);
    font-size: 13px;
    font-weight: bold;
    font-style: italic;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.baiyc-nav-vip-badge::before,
.baiyc-nav-vip-badge::after {
    content: '';
    width: 36px;
    height: 1px;
    background: currentColor;
    opacity: 0.35;
}

.baiyc-nav-vip-grid {
    display: flex;
    flex-wrap: wrap;
}

.baiyc-nav-vip-item {
    width: 25%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 12px;
}

.baiyc-nav-vip-item .ic {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    overflow: hidden;
}

.baiyc-nav-vip-item .ic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.baiyc-nav-vip-item .tx {
    font-size: 12px;
    color: var(--main-color, #4e5358);
    margin-top: 6px;
}

.baiyc-ug-ic-0 { background: #fff1e0; }
.baiyc-ug-ic-1 { background: #e8f1ff; }
.baiyc-ug-ic-2 { background: #e6f7ef; }
.baiyc-ug-ic-3 { background: #f3ecff; }
.baiyc-ug-ic-4 { background: #e8f8f5; }
.baiyc-ug-ic-5 { background: #fff7e0; }
.baiyc-ug-ic-6 { background: #ffecef; }
.baiyc-ug-ic-7 { background: #eefaff; }

/* 按钮颜色要盖过父主题的 .header .sub-menu a，因此用三级类名提高优先级 */
.sub-vip-card .baiyc-nav-vip .baiyc-nav-vip-buy {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 6px 14px 16px;
    height: 42px;
    border-radius: 999px;
    background: linear-gradient(90deg, #33406e, #232d52);
    color: #fff;
    font-weight: bold;
    letter-spacing: 1px;
    text-decoration: none;
    cursor: pointer;
    transition: 0.15s;
}

.sub-vip-card .baiyc-nav-vip .baiyc-nav-vip-buy:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.sub-vip-card .baiyc-nav-vip .baiyc-nav-vip-buy .price-text {
    font-size: 14px;
}

.sub-vip-card .baiyc-nav-vip .baiyc-nav-vip-buy .price-num {
    font-size: 17px;
    margin-left: 4px;
    color: #ffd28a;
}

.sub-vip-card .baiyc-nav-vip .baiyc-nav-vip-buy .corner {
    position: absolute;
    top: -9px;
    right: -4px;
    background: linear-gradient(135deg, #ff9d2e, #ff5f2e);
    color: #fff;
    font-size: 11px;
    font-weight: normal;
    letter-spacing: 0;
    padding: 2px 9px;
    border-radius: 999px 999px 999px 2px;
    transform: rotate(4deg);
    box-shadow: 0 2px 6px rgba(255, 95, 46, 0.4);
}

/* 导航上的「开通会员」按钮 li：与相邻图标垂直对齐 */
.navbar-top .navbar-collapse li.baiyc-nav-vip-li {
    vertical-align: middle;
}

/* 按钮在图标组左侧，悬浮卡向左展开（卡片右缘对齐按钮右缘） */
.navbar-top .navbar-collapse .baiyc-nav-vip-li .sub-menu.sub-vip-card {
    right: 0;
    left: auto;
}