/* ============================================
   文章列表项徽章样式
   item.css - 文章列表徽章自定义样式
   路径: /assets/css/item.css
   ============================================ */

/* ----------------------------------------
   图片区域徽章容器
   ---------------------------------------- */
.post-item .tips-badge {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    pointer-events: none;
}

.post-item .tips-badge .badge {
    pointer-events: auto;
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.25em 0.5em;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ----------------------------------------
   分类区域的价格徽章
   ---------------------------------------- */
.entry-cat-dot .badge {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.2em 0.5em;
    vertical-align: middle;
    margin-right: 0.25rem;
}

/* ----------------------------------------
   标题区域的徽章（title 布局）
   ---------------------------------------- */
.entry-title .badge {
    font-size: 0.65rem;
    font-weight: 500;
    padding: 0.2em 0.45em;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

/* ----------------------------------------
   VIP免费 徽章 - 橙黄色 rgb(255,176,27) 透明度0.7
   ---------------------------------------- */
.badge.badge-vip-free {
    background-color: rgba(255, 176, 27, 0.7) !important;
    color: #fff !important;
}

/* ----------------------------------------
   R18 徽章 - 红色 rgb(255,0,0) 透明度0.5
   ---------------------------------------- */
.badge.badge-r18 {
    background-color: rgba(255, 0, 0, 0.5) !important;
    color: #fff !important;
}

/* ----------------------------------------
   免费徽章 - 绿色
   ---------------------------------------- */
.badge.bg-success {
    background-color: rgba(25, 135, 84, 0.85) !important;
}

/* ----------------------------------------
   VIP徽章（有折扣但非免费）
   ---------------------------------------- */
.badge.badge-vip {
    background-color: rgba(255, 176, 27, 0.7) !important;
    color: #fff !important;
}

/* ----------------------------------------
   分类区域布局
   ---------------------------------------- */
.entry-cat-dot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem;
}

.entry-cat-dot a {
    display: inline-flex;
    align-items: center;
}

/* ----------------------------------------
   List 布局图片区域徽章位置
   ---------------------------------------- */
.item-list .tips-badge {
    z-index: 2;
}

/* ----------------------------------------
   响应式调整
   ---------------------------------------- */
@media (max-width: 768px) {
    .entry-cat-dot .badge {
        font-size: 0.65rem;
        padding: 0.15em 0.4em;
    }
    
    .entry-title .badge {
        font-size: 0.6rem;
    }
}

@media (max-width: 576px) {
    .post-item .tips-badge .badge {
        font-size: 0.6rem;
        padding: 0.2em 0.4em;
    }
    
    .entry-cat-dot .badge {
        font-size: 0.6rem;
    }
}