.vip-badge {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    padding: 4px 8px 4px 6px;
    background: linear-gradient(135deg, #f5c842 0%, #d4a017 100%);
    border-radius: 0 0 0 6px;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(212, 160, 23, 0.4);
    letter-spacing: 0.5px;
    overflow: hidden;
}

/* VIP免费角标-左上角（面授班级列表使用，避免与右上角余量重叠） */
.vip-badge.vip-badge-left {
    right: auto;
    left: 0;
    border-radius: 0 0 6px 0;
}

.vip-badge::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 3px;
    vertical-align: middle;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round'><path d='M2 4l3 12h14l3-12-6 7-4-7-4 7-6-7z'/><path d='M3 20h18v2H3z'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.vip-badge::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: vip-badge-shimmer 2s infinite;
}

@keyframes vip-badge-shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.vip-free-tag {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #f5c842 0%, #d4a017 100%);
    color: #fff;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 10px;
    vertical-align: middle;
    letter-spacing: 0.5px;
}

.vip-free-tag::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 4px;
    vertical-align: middle;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linejoin='round'><path d='M2 4l3 12h14l3-12-6 7-4-7-4 7-6-7z'/><path d='M3 20h18v2H3z'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.btn-vip-gold {
    background: linear-gradient(135deg, #f5c842 0%, #d4a017 100%) !important;
    color: #5a3e00 !important;
    border: none !important;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    margin-right: 10px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(212, 160, 23, 0.4);
    display: inline-block;
    vertical-align: middle;
}

.btn-vip-gold::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    animation: vip-shimmer 2s infinite;
}

@keyframes vip-shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

.btn-vip-gold:hover {
    box-shadow: 0 4px 16px rgba(212, 160, 23, 0.6);
}

/* 详情页按钮区域：当存在 VIP 免费学习按钮时，
   防止按钮区域与 class1-data（学习进度/倒计时）重叠
   class1-btn 默认 absolute right:0 bottom:0
   class1-data 默认 absolute left:0 bottom:0
   宽按钮会从右往左溢出覆盖 class1-data */
.class1-btn-with-vip {
    max-width: 65%;
    text-align: right;
    z-index: 2;
    background: #fff;
    /* 用 flex 让内部按钮强制居中对齐，避免 .btn-theme(baseline) 与 .btn-vip-gold(middle)
       因 vertical-align 基准不同导致 offsetTop 错位 */
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
}
.class1-btn-with-vip > a {
    flex: 0 0 auto;
}
.class1-btn-with-vip ~ .class1-data,
.class1 .class-detail-time-with-vip {
    max-width: 33%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 面授详情页 .right 容器使用 flex 让多个 .class-detail-opt 按钮项垂直居中对齐，
   防止 .btn-vip-gold 与灰色 .btn-primary.disabled 因 vertical-align 基线不一致而错位 */
.class-detail1-foot .right {
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
}
.class-detail1-foot .right .class-detail-opt {
    display: inline-flex;
    align-items: center;
}

/* 课程列表卡片底部按钮区：当存在 .btn-vip-gold 时，
   两个按钮（加入购物车 + 开通VIP免费学）总宽超出 200px 容器导致换行。
   改为 flex 布局让按钮等分宽度，保持同一行显示。 */
.course-box1-opt:has(.btn-vip-gold) {
    display: flex !important;
    flex-direction: row-reverse;
    align-items: center;
    gap: 6px;
    height: auto !important;
}
.course-box1-opt:has(.btn-vip-gold) > a {
    float: none !important;
    flex: 1 1 0;
    min-width: 0;
    margin: 0 !important;
    padding: 0 4px !important;
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
}

/* 课程列表：当只有一个 VIP免费学习 按钮时，恢复为block布局，让按钮正常浮动靠右 */
.course-box1-opt:has(.btn-vip-gold:only-child) {
    display: block !important;
}
.course-box1-opt:has(.btn-vip-gold:only-child) > .btn-vip-gold {
    float: right !important;
    flex: none !important;
    width: auto !important;
    padding: 0 15px !important;
    font-size: 14px !important;
}

.vip-detail-banner {
    background: linear-gradient(135deg, #fdf6e3 0%, #f5e6c8 100%);
    border: 1px solid rgba(212, 160, 23, 0.2);
    border-radius: 6px;
    padding: 10px 20px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 14px;
    color: #5a4a2a;
}

.vip-detail-banner a {
    display: inline-block;
    background: linear-gradient(135deg, #f5c842, #d4a017);
    color: #5a3e00;
    padding: 4px 14px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
}

.vip-detail-banner a:hover {
    opacity: 0.9;
}