.filter-actions-wrapper .btn-group { margin-left: 5px; }
.pagination { justify-content: center; }

.modern-filter-box {
    background: #fff; border-radius: 12px; border: 1px solid #f0f0f0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.03); overflow: hidden; margin-bottom: 20px;
}
.filter-title {
    padding: 15px 20px; border-bottom: 1px solid #f0f0f0;
    font-weight: 700; color: #1a1a1a; font-size: 16px;
}
.mod-cat-list { list-style: none; padding: 0; margin: 0; }
.mod-cat-item { border-bottom: 1px solid #f9f9f9; }

.mod-cat-link {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 20px; text-decoration: none; color: #555;
    transition: all 0.2s ease; font-size: 14px; cursor: pointer;
}
.mod-cat-link:hover { background-color: #fcfcfc; color: #000; text-decoration: none; }

.mod-cat-item.active > .mod-cat-link {
    color: #4f46e5; font-weight: 600; background-color: #f5f7ff;
    border-left: 3px solid #4f46e5;
}

.count {
    font-size: 11px; background: #f1f3f5; color: #888;
    padding: 2px 8px; border-radius: 20px;
}
.toggle-icon { font-size: 10px; color: #aaa; transition: transform 0.3s ease; }
.mod-cat-item.open > .mod-cat-link .toggle-icon { transform: rotate(180deg); color: #4f46e5; }

.mod-sub-menu {
    list-style: none; padding: 0; margin: 0; background: #fafafa;
    overflow: hidden; max-height: 0; transition: max-height 0.3s ease-out;
}
.mod-sub-link {
    display: flex; justify-content: space-between; padding: 10px 20px 10px 35px;
    font-size: 13px; color: #666; text-decoration: none; border-top: 1px solid #f0f0f0;
}

/* Mobile Adjustments */
.mobile-trigger-btn { display: none; }
.category-content-wrapper { display: block; }

@media (max-width: 768px) {
    .mobile-trigger-btn {
        display: flex; width: 100%; background: #fff; border: 1px solid #e5e7eb;
        padding: 12px; border-radius: 8px; justify-content: space-between;
        align-items: center; margin-bottom: 10px; cursor: pointer;
    }
    .category-content-wrapper { display: none; }
    .category-content-wrapper.show-mobile { display: block; animation: fadeIn 0.3s; }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-5px); }
        to { opacity: 1; transform: translateY(0); }
    }
}