/* ============================================================
   SEARCH‑A‑3：筛选侧栏 2.0 终极完美美学版 (Creawith Master Edition)
   微雕闭环单：
   - 【力学动能修正】加号竖线改为纯粹 -90° 逆时针旋转，视觉重心完美向内侧收拢，绝不向外倾斜。
   - 【绝杀双边线】物理剔除底座操作区的顶边框，改由手风琴底线自然过渡，彻底荡平时间下方的重叠鬼影线。
   - 【零 Technical Debt】全盘保持 0 个 !important 极净级联，严守 21px 黄金垂直中轴线。
============================================================ */

/* 1. 全屏遮罩层退场 */
.cw-filter-mask {
    display: none;
}

/* 2. Drawer 总外壳视窗（机械裁剪快门，消除任何渐变引起的视觉迟滞） */
.cw-filter-drawer {
    position: relative;
    top: 0;
    left: 0;
    width: 0;                       /* 常态完全闭合 */
    height: auto;
    min-height: 500px;
    background: #FFFFFF;
    box-sizing: border-box;
    overflow: hidden;               /* 强力横向裁剪，断绝任何动画期间的文本折行 */
    flex-shrink: 0;                 /* 坚决不接受右侧作品大盘的反向弹性挤压 */
    z-index: 100;
    visibility: hidden;
    margin-right: 0;
    padding: 0;

    /* 关闭动画快门依赖链 */
    transition:
        width        0.28s cubic-bezier(.33, 1, .68, 1),
        margin-right 0.28s cubic-bezier(.33, 1, .68, 1),
        visibility   0s    0.28s;
}

/* 激活状态 */
.cw-filter-drawer.open {
    width: 280px;                   /* 1:1 锁死 Creawith 280px 黄金规格 */
    visibility: visible;
    margin-right: 32px;             /* 与右侧卡片流大盘保持 32px 模块呼吸间距 */
    border-right: 1px solid rgba(0, 0, 0, 0.06); /* 6% 极细机械物理切线 */

    transition:
        width        0.28s cubic-bezier(.33, 1, .68, 1),
        margin-right 0.28s cubic-bezier(.33, 1, .68, 1),
        visibility   0s;
}

/* 3. 刚性总内壳（21px 绝对留白空间总闸） */
.cw-filter-drawer .cw-filter-drawer-inner {
    width: 280px;
    min-width: 280px;               /* 强锁横向刚度，关闭时内容稳如泰山 */
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 12px 21px 40px 21px;   /* 严锁左右 21px 绝对对称留白 */
    display: flex;
    flex-direction: column;
}

/* ------------------------------------------------------------
   4. 高级关键词筛选面板
------------------------------------------------------------ */
.cw-filter-drawer .cw-filter-keywords-block {
    width: 100%;
    box-sizing: border-box;
}

.cw-filter-drawer .cw-keywords-container-group {
    width: 100%;
    margin-bottom: 16px;
    box-sizing: border-box;
}

.cw-filter-drawer .cw-keywords-container-title {
    font-size: 13px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.55);     /* 55% 浓灰层级 */
    margin-bottom: 8px;
    white-space: nowrap;
}

/* 输入框实体槽 */
.cw-filter-drawer .cw-keywords-input-zone {
    width: 100%;
    min-height: 38px;
    background: rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 6px;
    padding: 6px 12px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.cw-filter-drawer .cw-keywords-ghost-input {
    flex: 1;
    min-width: 60px;
    border: none;
    background: transparent;
    font-size: 13px;
    color: #111111;
    outline: none;
    padding: 0;
}
.cw-filter-drawer .cw-keywords-ghost-input::placeholder {
    color: rgba(0, 0, 0, 0.25);
}

/* 关键词并排双按钮 */
.cw-filter-drawer .cw-keywords-action-area {
    display: flex;
    gap: 12px;
    width: 100%;
    margin-top: 16px;
    box-sizing: border-box;
}

.cw-filter-drawer .cw-keywords-action-area button {
    flex: 1;
    height: 32px;
    font-size: 12px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    box-sizing: border-box;
    transition: all 0.18s cubic-bezier(.33,1,.68,1);
    outline: none;
}

.cw-filter-drawer .cw-keywords-btn-reset {
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.55);
}
.cw-filter-drawer .cw-keywords-btn-reset:hover {
    background: rgba(0, 0, 0, 0.02);
    color: #000000;
}

.cw-filter-drawer .cw-keywords-btn-apply {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.05);
    color: rgba(0, 0, 0, 0.3);
}
.cw-filter-drawer .cw-keywords-btn-apply:not([disabled]) {
    background: #111111;
    border-color: #111111;
    color: #FFFFFF;
}

.cw-filter-drawer .cw-filter-divider {
    border: none;
    height: 1px;
    background: rgba(0, 0, 0, 0.05);
}

/* ------------------------------------------------------------
   5. Accordion 折叠组标头 (垂直中轴绝对平齐)
------------------------------------------------------------ */
.cw-filter-drawer .cw-filter-group {
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05); /* 统一的极轻底部剖面切线 */
    box-sizing: border-box;
}

.cw-filter-drawer .cw-filter-group-header {
    width: 100%;
    margin: 0;
    padding: 0;                     
    height: 48px;                   /* 48px 标准工程条带硬高度 */
    min-height: 48px;
    background: none;
    border: none;
    box-sizing: border-box;
    outline: none;
    cursor: pointer;

    display: flex;
    justify-content: space-between;
    align-items: center;            /* Flex 垂直绝对居中，消灭向下偏心的视觉病灶 */
    
    font-size: 14px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);     /* 坚固的 85% 权威黑色主干 */
    white-space: nowrap;
}

/* 折叠内容体 */
.cw-filter-drawer .cw-filter-group-body {
    width: 100%;
    padding: 0;                     
    max-height: 0;
    overflow: hidden;               /* 纵向裁剪总线 */
    box-sizing: border-box;
    transition:
        max-height     0.24s cubic-bezier(.33, 1, .68, 1),
        padding-bottom 0.24s cubic-bezier(.33, 1, .68, 1);
}

/* 激活态空间释放 */
.cw-filter-drawer .cw-filter-group.open .cw-filter-group-body {
    max-height: 240px;
    padding-bottom: 16px;           /* 展开后优雅给底部呼吸空间解冻 */
}

/* 🌟 6. 加减号微图标（高级逆时针 -90° 机械流体旋转，绝杀视觉扭曲） */
.cw-filter-drawer .cw-accordion-icon {
    width: 12px;
    height: 12px;
    position: relative;
    color: rgba(0, 0, 0, 0.75);    /* 75% 严整工程灰笔触 */
    display: inline-block;
    flex-shrink: 0;
}
.cw-filter-drawer .cw-accordion-icon::before,
.cw-filter-drawer .cw-accordion-icon::after {
    content: "";
    position: absolute;
    background: currentColor;
    border-radius: 999px;
    transform-origin: center center; /* 强锁绝对中心点为流转轴线 */
    transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1); /* 升级为极其干脆利落的高级快门机械阻尼曲线 */
}
/* 横线横向常驻 */
.cw-filter-drawer .cw-accordion-icon::before { top: 5px; left: 0; width: 12px; height: 2px; }

/* 竖线（加号状态） */
.cw-filter-drawer .cw-accordion-icon::after  { top: 0; left: 5px; width: 2px; height: 12px; }

/* 🌟 终极微雕状态机：逆时针偏转 -90°，令旋转势能平滑向内侧收拢，像素级与横线重合归一，极具秩序感 */
.cw-filter-drawer .cw-filter-group.open .cw-accordion-icon::after {
    transform: rotate(-90deg);
}

/* ------------------------------------------------------------
   7. 下拉子项目列表 (Behance 级纵向纯文本菜单流)
------------------------------------------------------------ */
.cw-filter-drawer .cw-filter-tags {
    display: flex;
    flex-direction: column;         /* 纵向平行排布 */
    align-items: flex-start;
    gap: 2px;                       
    width: 100%;
    box-sizing: border-box;
    padding: 2px 0;
}

/* 纯文本项重构 */
.cw-filter-drawer .cw-tag {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 32px;                   /* 精准适中的点击热区高度 */
    padding: 0;                     /* 向左靠拢死锁中轴线 */
    
    background: transparent;        /* 空气扁平化，物理剥离全部胶囊底色与边框 */
    border: none;
    border-radius: 0;
    box-shadow: none;
    outline: none;
    cursor: pointer;
    
    font-size: 13px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.65);     /* 饱满沉稳的 65% 工程灰，保障裸字阅读高张力 */
    text-align: left;
    
    transition: color 0.15s linear;
}

.cw-filter-drawer .cw-tag:hover {
    background: transparent;
    border-color: transparent;
    color: #000000;                 /* 纯黑高亮聚焦反馈 */
}

/* 灵魂青绿深度激活态 */
.cw-filter-drawer .cw-tag.active {
    background: transparent;
    border: none;
    box-shadow: none;
    transform: none;
    
    color: #4BAF9F;                 /* 唤醒 Creawith Green 视觉灵魂 */
    font-weight: 600;               /* 字重增粗 */
}

/* ------------------------------------------------------------
   8. 全局操作重置底座 (21px 绝对齐边线)
------------------------------------------------------------ */
.cw-filter-drawer .cw-filter-footer {
    width: 100%;
    padding: 24px 0 0 0;            
    margin-top: 12px;
    box-sizing: border-box;
    
    /* 🌟 终极修复：物理下线 border-top 顶线！ */
    /* 彻底杜绝与上游“时间组”溢出底线相撞拉出的双重线鬼影，让最下方的视觉版式纯净闭环 */
    border-top: none; 
}

.cw-filter-drawer .cw-filter-reset {
    width: 100%;
    height: 34px;                   /* 34px 严整工程高度规范 */
    font-size: 13px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.55);
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 6px;             /* 锁死 6px 黄金外框圆角 */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: all 0.2s cubic-bezier(.33, 1, .68, 1);
    outline: none;
}
.cw-filter-drawer .cw-filter-reset:hover {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.15);
    color: #000000;
}
.cw-filter-reset:active {
    transform: scale(0.98);
}