/* style.css */

/* ------------------------------------------------------------- */
/* 侧边栏（Sidebar）基础样式和响应式宽度控制 */
/* ------------------------------------------------------------- */
.sidebar {


      width: 280px; /* 固定侧边栏宽度 */
        flex-shrink: 0; /* 防止侧边栏被压缩 */
        top: var(--header-height, 10px); /* 保持在头部下方 */
        bottom: 0;
        position: sticky; /* 使侧边栏在滚动时固定 */
        overflow-y: auto; /* 允许侧边栏内容滚动 */
        padding-bottom: 10px; /* 底部留白 */
}
.section-title {
        font-size: 1rem;
    }
/* 仅在大屏幕（lg 断点及以上）时，设置侧边栏的固定宽度 */
@media (min-width: 992px) { /* Bootstrap 的 lg 断点 */
    .sidebar {
        width: 280px; /* 在大屏幕上固定侧边栏宽度 */
    }
}

/* ------------------------------------------------------------- */
/* VIP 卡片包裹器样式 - 用于控制卡片在侧边栏内的居中和宽度 */
/* ------------------------------------------------------------- */
.vip-card-wrapper {
    display: flex;
    justify-content: center;
    /* 调整包裹器左右内边距，给卡片更多空间或更少空间 */
    padding-left: 5px; /* 适当减少内边距，让卡片在侧边栏内更宽敞 */
    padding-right: 5px;
    max-width: 100%;
    box-sizing: border-box;

    /* 在小屏幕上（如果侧边栏被强制显示） */
    @media (max-width: 991.98px) {
        padding-left: 10px; /* 进一步减少小屏幕上的内边距 */
        padding-right: 10px;
    }
    @media (max-width: 767.98px) {
        padding-left: 5px;
        padding-right: 5px;
    }
}


/* ------------------------------------------------------------- */
/* 卡片和文本样式 - 精细调整 */
/* ------------------------------------------------------------- */

/* 通用部分间距 - 保持不变或根据整体布局微调 */
#asideRight .container {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 0;
    padding-right: 0;
}

/* VIP 卡片（右侧）的增强样式 */
.vip-card-right {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 1rem;
    width: 100%; /* 确保卡片在 vip-card-wrapper 内占据所有可用宽度 */
    /* 移除或增大 max-width 限制，让卡片可以更宽 */
    /* max-width: 260px; /* 如果您觉得 260px 还是太窄，可以移除此行或增大它 */
    flex-shrink: 0;
}

/* 鼠标悬停在 VIP 卡片上的效果 - 保持不变 */
.vip-card-right:hover {
    transform: translateY(-5px);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175) !important;
}

/* 卡片内部内容的内边距 */
.vip-card-right .card-body {
    padding: 20px; /* 进一步减少内边距，为文字提供更多空间 */

}

/* VIP 标签（徽章）样式 - 保持不变或微调 */
.vip-badge {
    font-size: 0.85rem;
    padding: 0.4em 0.8em !important;
    border-radius: 20px;
}

/* 主题图标（如 smart_toy, school）样式 - 保持不变或微调 */
.vip-card-right .tool-icon-material {
    font-size: 65px; /* 略微再缩小图标，为文本腾出空间 */
    margin-bottom: 15px;
}

/* 卡片标题样式 */
.vip-card-right .card-title {
    font-size: 1.45rem; /* 标题字体略微缩小，节省空间 */
    margin-bottom: 8px; /* 标题下方间距减少 */
    font-weight: bold;
}

/* 卡片描述文本样式 */
.vip-card-right .card-text {
    font-size: 0.9rem; /* 基础文本进一步缩小，增加每行字数 */
    line-height: 1.4; /* 略微收紧行高，增加行密度 */
    margin-bottom: 15px; /* 描述下方间距减少 */
    word-break: normal;
    word-wrap: break-word;
    white-space: normal;
    overflow-wrap: break-word;

}

/* 列表项（check_circle 部分）样式 */
.vip-card-right ul.list-unstyled {
    padding-left: 0; /* 移除 ul 默认的左内边距，非常关键 */
}

.vip-card-right ul.list-unstyled li {
    margin-bottom: 6px; /* 列表项之间间距进一步减少 */
    font-size: 0.88rem; /* 列表项字体进一步缩小 */
    line-height: 1.3; /* 列表项行高进一步收紧 */
    word-break: normal;
    word-wrap: break-word;
    white-space: normal;
    overflow-wrap: break-word;
    text-align: left;
    /* 移除 li 自身的左右内边距，由 ul 或父级控制 */
    padding-left: 0;
    padding-right: 0;
}

/* 列表项中的检查图标样式 */
.vip-card-right ul.list-unstyled li .material-symbols-rounded.me-2 {
    font-size: 1rem; /* 图标略微缩小 */
    vertical-align: middle;
    color: #FFC107;
    margin-top: -1px; /* 微调 */
    margin-right: 1px; /* 缩小图标与文字之间的间距 */


}

/* 立即升级VIP 按钮样式 */
.vip-card-right .btn-lg {
     padding: 8px 18px; /* 按钮内边距减少 */
      font-size: 0.95rem; /* 按钮文字大小 */
      border-radius: 20px; /* 按钮圆角 */
      font-weight: bold;
      word-break: normal;
      word-wrap: break-word;
      white-space: normal;
      overflow-wrap: break-word;

      display: inline-block;
      margin-top: 10px; /* 按钮上方间距减少 */

      /* 其他样式 */
          width: auto; /* 尝试将宽度设为自动，而不是百分比 */
          max-width: none; /* 移除最大宽度限制 */


}


/* 广告卡片样式 - 保持不变 */
.card.border-light.shadow-sm {
    transition: box-shadow 0.3s ease;
    border-radius: 15px;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.card.border-light.shadow-sm:hover {
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
}

.card.border-light.shadow-sm .card-body {
    padding: 25px;
}

/* 响应式调整 - 针对内容文本和布局的微调 */
/* 这些主要是为了兜底，如果侧边栏在小屏上意外显示，也能保持一定可读性 */
@media (max-width: 991.98px) {
    .vip-card-right .card-body {
        padding: 15px;
    }
    .vip-card-right .card-title {
        font-size: 1.3rem;
    }
    .vip-card-right .card-text {
        font-size: 0.85rem;
    }
    .vip-card-right ul.list-unstyled li {
        font-size: 0.8rem;
    }
    .vip-card-right .btn-lg {
        padding: 6px 12px;
        font-size: 0.85rem;
    }
}

@media (max-width: 767.98px) {
    .vip-card-right .card-body {
        padding: 10px; /* 移动端内边距进一步减少 */
    }
    .vip-card-right .card-title {
        font-size: 1.2rem;
    }
    .vip-card-right .card-text {
        font-size: 0.8rem;
    }
    .vip-card-right ul.list-unstyled li {
        font-size: 0.75rem;
    }
    .vip-card-right .btn-lg {
        padding: 5px 10px;
        font-size: 0.8rem;
    }
}