/* --- 1. 按钮基础样式与 Hover 效果 --- */
.filter-btn {
    /* 清除 button 的原生默认样式 */
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer;

    /* 布局与对齐 */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;    /* 增加隐形的点击区域 */
    color: #666;          /* 图标默认颜色，暗灰色 */

    /* 平滑过渡效果 */
    transition: all 0.3s ease;
}

/* 鼠标放上去的 Hover 效果 */
.filter-btn:hover {
    /* 极浅的主题粉色背景，0.08是透明度 */
    background-color: rgba(255, 51, 102, 0.08);
    /* 颜色变为主题粉色 */
    color: #FF3366;
}

/* --- 2. 内部排版：让漏斗和箭头横向居中对齐 --- */
.filter-content {
    display: inline-flex;
    align-items: center;
    gap: 4px; /* 漏斗和箭头之间的间距 */

    /* 绑定呼吸动画 */
    animation: breathe 2.5s infinite ease-in-out;
}

/* 确保 SVG 箭头使用当前文字颜色 */
.dropdown-arrow {
    fill: currentColor;
    margin-top: 2px; /* 微调箭头高度，使其视觉居中 */
}

/* --- 3. 动态呼吸微缩放效果 --- */
@keyframes breathe {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.12); /* 轻微放大 1.12倍 */
        color: #FF3366;         /* 放大时微微泛起主题色，强烈暗示可点击 */
    }
    100% {
        transform: scale(1);
    }
}

/* （可选）当鼠标悬停时，停止呼吸动画，防止用户点击时图标还在乱跑 */
.filter-btn:hover .filter-content {
    animation-play-state: paused;
    transform: scale(1.1); /* 保持放大状态 */
}

.filter-btn {
    background: rgba(255, 255, 255, 0);
    border-right: 1px solid #fd2c55;
    color: black;
    font-size: .32rem;
    height: .76rem;
    line-height: .76rem;
    position: absolute;
    left: 0;
    text-align: center;
    top: 0;
    width: 0.8rem;
}
.filter-btn .icon {
    font-size: .36rem;
}
/* 筛选面板新样式 */
#filter-panel { display: none; background: #fff; padding: .2rem .16rem; border-bottom: 1px solid #f0f0f0; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.filter-section { margin-bottom: .35rem; }
.filter-title { font-size: .30rem; font-weight: bold; color: #333; }

.tag-group { display: flex; flex-wrap: wrap; gap: .12rem; }
.filter-tag {
    background: #f5f5f5;
    border: 1px solid #eee;
    border-radius: .08rem;
    padding: 0.04rem .1rem;
    font-size: .28rem;
    color: #666;
    /*min-width: 1rem;*/
    text-align: center;
    transition: all 0.2s;
}
.filter-tag.active {
    background: #fff1f3;
    border-color: #ff4572;
    color: #ff4572;
    font-weight: bold;
}

.filter-actions { display: flex; gap: .2rem; margin-top: .4rem; }
.btn-reset { flex: 1; height: .8rem; border-radius: .4rem; background: #f5f5f5; color: #666; font-size: .28rem; }
.btn-apply { flex: 2; height: .8rem; border-radius: .4rem; background: #ff4572; color: #fff; font-size: .28rem; font-weight: bold; }
.form-flex { display: flex; align-items: center; width: 100%; }
.form-flex .layui-form-label { width: auto;  padding:9px 0px; padding-right: 8px;text-align: left; font-size: 0.28rem}
.form-flex .layui-input-block { flex: 1; margin-left: 0;  font-size: 0.28rem }